daily pastebin goal
61%
SHARE
TWEET

Untitled

Tyrsdei Oct 11th, 2018 83 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* === DO NOT ALTER CODE BELOW THIS LINE UNTIL LINE 88 === */
  2. // HtmlElement is a javascript class that represents an HTML element
  3. // It's constructor takes in two arguments: type and text
  4. // type is the type of element (example div, p, span, h1, etc)
  5. // text is an optional argument and represents any text in the element
  6. const HtmlElement = function(type, text) {
  7.   this.type = type;
  8.   this.text = text || "";
  9.   this.id = null;
  10.   this.classes = [];
  11.   this.children = [];
  12. };
  13.  
  14. // The addID method will add an id to an HTML element
  15. // If an id already exists, it will overwrite it.
  16. HtmlElement.prototype.addID = function(id) {
  17.   this.id = id;
  18. };
  19.  
  20. // The addClass method will add a class to an HTML element
  21. // addClass can be called multiple times to add difference classes
  22. HtmlElement.prototype.addClass = function(className) {
  23.   this.classes.push(className);
  24. };
  25.  
  26. // The addChild method will add children elements
  27. // The argument must be an HtmlElement object
  28. HtmlElement.prototype.addChild = function(element) {
  29.   if (!(element instanceof HtmlElement)) {
  30.     throw new Error('Invalid argument for addChild method');
  31.   }
  32.  
  33.   this.children.push(element);
  34. };
  35.  
  36. // The toString method returns a string version of the HTML element
  37. // Note: The following code is quite complicated
  38. // While you can use this method to check your work,
  39. // there is no need to read through it or understand it
  40. // (until you get the stretch question)
  41. HtmlElement.prototype.toString = function() {
  42.   const openingTag = getOpeningTag(this.type, this.id, this.classes);
  43.   const closingTag = "</" + this.type + ">";
  44.   // let childrenElements = ''
  45.  
  46.   // if(this.children.length > 0) {
  47.   //   childrenElements = this.children.reduce((finalString, currentChild) => finalString + currentChild, '')
  48.   // }
  49.  
  50.   // return openingTag + this.text + childrenElements + closingTag;
  51.   return openingTag + this.text + closingTag;
  52.  
  53.   function getID(id) {
  54.     if (!id) {
  55.       return "";
  56.     }
  57.  
  58.     return "id=\"" + id + "\"";
  59.   }
  60.  
  61.   function getClasses(classes) {
  62.     if (!classes.length) {
  63.       return "";
  64.     }
  65.  
  66.     const classList = classes.reduce(function(string, name) {
  67.       return string + ' ' + name;
  68.     });
  69.  
  70.     return "class=\"" + classList + "\"";
  71.   }
  72.  
  73.   function getOpeningTag(type, id, classes) {
  74.     const idText = getID(id);
  75.     const classText = getClasses(classes);
  76.  
  77.     let text = type;
  78.    
  79.     if (idText) {
  80.       text += " " + idText;
  81.     }
  82.  
  83.     if (classText) {
  84.       text += " " + classText;
  85.     }
  86.  
  87.     return "<"+text+">"
  88.   }
  89. };
  90.  
  91. /* === DO NOT ALTER ANY CODE ABOVE THIS LINE === */
  92.  
  93.  
  94. // Question 1: Create following instances of HtmlElement.
  95. //             You will need to use the method of addID and addClass.
  96. //             The toString method may be used to check your work.
  97. //
  98. //  a. <p>To every action there is an equal and opposite reaction.</p>
  99. //  b. <h1 id="main">Welcome to the Webpage</h1>
  100. //  c. <div class="container important"></div>
  101. //  d. <li id="first-item" class="stir-fry">Scallion</li>
  102. //  e. <span id="CTA" class="inline important"></span>
  103.  
  104. // Assign the following variables correctly:
  105.  
  106. const elementA = new HtmlElement('p', 'To every action there is an equal and opposite reaction.');
  107. // console.log(elementA.type);
  108.  
  109. const elementB = new HtmlElement('h1', 'Welcome to the Webpage');
  110. elementB.addID("main");
  111. // console.log(elementB);
  112.  
  113. const elementC = new HtmlElement('div');
  114. elementC.addClass("container")
  115. elementC.addClass("important");
  116. // console.log(elementC.toString());
  117.  
  118. const elementD = new HtmlElement('li', 'Scallion');
  119. elementD.addID("first-item");
  120. elementD.addClass("stir-fry");
  121. // console.log(elementD);
  122.  
  123. const elementE = new HtmlElement('span');
  124. elementE.addID("CTA");
  125. elementE.addClass("inline");
  126. elementE.addClass("important");
  127. // console.log(elementE)
  128.  
  129.  
  130. // Question 2: Create an element that represents the following ordered list.
  131. //             You will need to create an new element for each of its children
  132. //             and add them to their parent using the addChild method.
  133. //             Note that the toString method won't fully work on elements with
  134. //             children (see stretch question).
  135. //
  136. // <ol id="world-domination">
  137. //   <li> Discover the secret to prime factorization </li>
  138. //   <li class="illegal"> Hack through online banking security </li>
  139. //   <li class="illegal"> Blackmail all the major global leaders </li>
  140. //   <li> World domination </li>
  141. // </ol>
  142.  
  143. const stepsToWorldDomination = new HtmlElement('ol');
  144. stepsToWorldDomination.addID("world-domination")
  145. const childElement1 = new HtmlElement('li', 'Discover the secret to prime factorization');
  146. stepsToWorldDomination.addChild(childElement1)
  147. const childElement2 = new HtmlElement('li', 'Hack through online banking security');
  148. childElement2.addClass("illegal")
  149. stepsToWorldDomination.addChild(childElement2)
  150. const childElement3 = new HtmlElement('li', 'Blackmail all the major global leaders');
  151. childElement3.addClass("illegal")
  152. stepsToWorldDomination.addChild(childElement3)
  153. const childElement4 = new HtmlElement('li', 'World domination');
  154. stepsToWorldDomination.addChild(childElement4)
  155.  
  156. // Question 3: Write the removeClass method on the HTMLElement class.
  157.  
  158.  
  159. // The removeClass method will remove a class from an element
  160. // by removing that class name from the this.classes array
  161. // Example: if element.children were equal to ['inline', 'important']
  162. //          and you called element.removeClass('inline'), afterward
  163. //          element.chasses would be equal to ['important']
  164.  
  165. HtmlElement.prototype.removeClass = function(className) {
  166.   // TODO
  167.   for (let i = 0; i < this.classes.length; i++) {
  168.     if (this.classes[i] === className) this.classes.splice(i, 1);
  169.   }
  170. };
  171.  
  172. const testElement = new HtmlElement('div', 'hello')
  173. testElement.addClass('one')
  174. testElement.removeClass('one')
  175. console.log(testElement)
  176. // STRETCH QUESTION (NOT REQUIRED)
  177. // Question 4: Update toString
  178. //
  179. // As you notice in Question 2 toString does not work for elements with children.
  180. // Your job is to update the method so that it prints the element containing it's children.
  181. // The first step will be to spend some time reading through the existing code and understanding it.
  182. //
  183. // Note: The string shoudl not include any new lines or tabbing.
  184. //
  185. // Example: stepsToWorldDomination.toString() should yield:
  186. // "<ol id="world-domination"><li>Discover the secret to prime factorization</li><li class="illegal">Hack through online banking..."
  187. // (Full string not shown because it would be super long, but you get the point...)
  188.  
  189. console.log(stepsToWorldDomination.toString())
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top