daily pastebin goal
61%
SHARE
TWEET

Untitled

Tyrsdei Oct 11th, 2018 88 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.  
  45.   return openingTag + this.text + closingTag;
  46.  
  47.   function getID(id) {
  48.     if (!id) {
  49.       return "";
  50.     }
  51.  
  52.     return "id=\"" + id + "\"";
  53.   }
  54.  
  55.   function getClasses(classes) {
  56.     if (!classes.length) {
  57.       return "";
  58.     }
  59.  
  60.     const classList = classes.reduce(function(string, name) {
  61.       return string + ' ' + name;
  62.     });
  63.  
  64.     return "class=\"" + classList + "\"";
  65.   }
  66.  
  67.   function getOpeningTag(type, id, classes) {
  68.     const idText = getID(id);
  69.     const classText = getClasses(classes);
  70.  
  71.     let text = type;
  72.    
  73.     if (idText) {
  74.       text += " " + idText;
  75.     }
  76.  
  77.     if (classText) {
  78.       text += " " + classText;
  79.     }
  80.  
  81.     return "<"+text+">"
  82.   }
  83. };
  84.  
  85. /* === DO NOT ALTER ANY CODE ABOVE THIS LINE === */
  86.  
  87.  
  88. // Question 1: Create following instances of HtmlElement.
  89. //             You will need to use the method of addID and addClass.
  90. //             The toString method may be used to check your work.
  91. //
  92. //  a. <p>To every action there is an equal and opposite reaction.</p>
  93. //  b. <h1 id="main">Welcome to the Webpage</h1>
  94. //  c. <div class="container important"></div>
  95. //  d. <li id="first-item" class="stir-fry">Scallion</li>
  96. //  e. <span id="CTA" class="inline important"></span>
  97.  
  98. // Assign the following variables correctly:
  99. const elementA = new HtmlElement('p', 'To every action there is an equal and opposite reaction.');
  100. const elementB = new HtmlElement("h1", "Welcome to the Webpage");
  101. elementB.addID("main");
  102. //console.log(elementB.toString());
  103. //HTMLELement.addID("main")
  104. const elementC = new HtmlElement("div","");
  105. //HtmlElement.addClass("container important")
  106. elementC.addClass("container important");
  107. const elementD = new HtmlElement("li", "Scallion");
  108. //HTMLELement.addID("first-item")
  109. //HtmlElement.addClass("stir-fry")
  110. elementD.addID("first-item");
  111. elementD.addClass("stir-fry");
  112. const elementE = new HtmlElement("span","");
  113. //HTMLELement.addID("CTA")
  114. elementE.addID("CTA");
  115. elementE.addClass("inline important");
  116.  
  117. // Question 2: Create an element that represents the following ordered list.
  118. //             You will need to create an new element for each of its children
  119. //             and add them to their parent using the addChild method.
  120. //             Note that the toString method won't fully work on elements with
  121. //             children (see stretch question).
  122. //
  123. // <ol id="world-domination">
  124. //   <li> Discover the secret to prime factorization </li>
  125. //   <li class="illegal"> Hack through online banking security </li>
  126. //   <li class="illegal"> Blackmail all the major global leaders </li>
  127. //   <li> World domination </li>
  128. // </ol>
  129.  
  130. const stepsToWorldDomination = new HtmlElement('ol');
  131. const childElement1 = new HtmlElement("li", "Discover the secret to prime factorization");
  132. //console.log(childElement1.toString());
  133. const childElement2 = new HtmlElement("li", "Hack through online banking security");
  134. childElement2.addClass("illegal");
  135. const childElement3 = new HtmlElement("li", "Blackmail all the major global leaders");
  136. childElement3.addClass("illegal");
  137. const childElement4 = new HtmlElement("li", "World domination");
  138. stepsToWorldDomination.addChild(childElement1);
  139. stepsToWorldDomination.addChild(childElement2);
  140. stepsToWorldDomination.addChild(childElement3);
  141. stepsToWorldDomination.addChild(childElement4);
  142.  
  143. // Question 3: Write the removeClass method on the HTMLElement class.
  144.  
  145.  
  146. // The removeClass method will remove a class from an element
  147. // by removing that class name from the this.classes array
  148. // Hint: look up the splice method
  149. // Example: if element.children were equal to ['inline', 'important']
  150. //          and you called element.removeClass('inline'), afterward
  151. //          element.chasses would be equal to ['important']
  152.  
  153. HtmlElement.prototype.removeClass = function(className) {
  154.   // TODO
  155.         function trueOrFalse(){
  156.         return !className;
  157.      
  158.         this.classes = this.classes.splice(className, 1);
  159.         for(let i = 0; i < this.children.length; i++){
  160.          this.children[i]["classes"] = this.children[i]["classes"].filter(trueOrFalse);
  161.       }
  162.       };
  163.       stepsToWorldDomination.toString();
  164.       const numbers = [3, -2, 33, -10];
  165.       for (let i = 0; i < numbers.length; i++) {
  166.        console.log(numbers[i]);
  167. }
  168. };
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