Complete exercises

carProto.js

@@ -3,13 +3,45 @@
  * @constructor
  * @param {String} model
  */
+class Car {
+  constructor(model) {
+    this.model = model;
+    this.speed = 0;
+    this.accelerate = function () {
+      this.speed++;
+    };
+    this.brake = function () {
+      if (this.speed > 0) {
+        this.speed--;
+      }
+    };
+  }
+  toString() {
+    console.log(`${this.model} is currently going ${this.speed} mph.`);
+  }
+}
 
 //  Create an instance, accelerate twice, brake once, and console log the instance.toString()
-
 /**
  * ElectricCar class
  * @constructor
  * @param {String} model
  */
+class ElectricCar extends Car {
+  constructor(model) {
+    super(model);
+  }
+}
 
 //  Create an instance, accelerate twice, brake once, and console log the instance.toString()
+const civic = new Car("Honda Civic");
+civic.accelerate();
+civic.accelerate();
+civic.brake();
+civic.toString();
+
+const tesla = new ElectricCar("Tesla Roadster");
+tesla.accelerate();
+tesla.accelerate();
+tesla.brake();
+tesla.toString();

jQueryDomCrud.js

@@ -1,15 +1,38 @@
-// Create a new <a> element containing the text "Buy Now!"
-// with an id of "cta" after the last <p>
+$(document).ready(function () {
+  // Create a new <a> element containing the text "Buy Now!"
+  // with an id of "cta" after the last <p>
+  const $lastP = $(`p:last-child`);
+  const $newAtag = $(`<a>`);
+  $newAtag.text(`Buy Now!`);
+  $newAtag.attr(`id`, `cta`);
+  $lastP.append($newAtag);
 
-// Access (read) the data-color attribute of the <img>,
-// log to the console
+  // Access (read) the data-color attribute of the <img>,
+  // log to the console
+  const $imageStuff = $(`img`);
+  const tempValue = $imageStuff.attr(`data-color`);
+  console.log(`data-color attribute = ${tempValue}`);
 
-// Update the third <li> item ("Turbocharged"),
-// set the class name to "highlight"
+  // Update the third <li> item ("Turbocharged"),
+  // set the class name to "highlight"
+  const $thirdItem = $(`li:nth-child(3)`);
+  $thirdItem.attr("class", "highlight");
+  console.log($thirdItem);
 
-// Remove (delete) the last paragraph
-// (starts with "Available for purchase now…")
+  // Remove (delete) the last paragraph
+  // (starts with "Available for purchase now…")
+  //$lastP.remove(); I don't think we want to remove the full paragraphy b/c the next section won't work.
+  $modifyLastParagraph = $();
+  $modifyLastParagraph.remove();
 
-// Create a listener on the "Buy Now!" link that responds to a click event.
-// When clicked, the the "Buy Now!" link should be removed
-// and replaced with text that says "Added to cart"
+  // Create a listener on the "Buy Now!" link that responds to a click event.
+  // When clicked, the the "Buy Now!" link should be removed
+  // and replaced with text that says "Added to cart"
+  const highlightItem = function (event) {
+    let $this = $(this);
+    $this.text("Added to cart");
+  };
+
+  const $newAtagText = $(`a#cta`);
+  $newAtagText.on("click", highlightItem);
+});

jQueryToDoList.html

@@ -23,6 +23,11 @@ <h1>To Do:</h1>
         <a class="add-item">Add</a>
       </div>
     </main>
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.min.js"
+      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+      crossorigin="anonymous"
+    ></script>
     <script src="jQueryToDoList.js"></script>
   </body>
 </html>

jQueryToDoList.js

@@ -1,19 +1,31 @@
-/**
- * Toggles "done" class on <li> element
- */
+const addListItem = function (event) {
+  event.preventDefault();
+  const text = $("input").val();
+  const $newLi = $(`<li><span>${text}</span><a class="delete">Delete</a></li>`);
+  let $listItem = $("ul.today-list li span");
 
-/**
- * Delete element when delete link clicked
- */
+  $listItem.off("click", clickListItem);
+  $todayList = $("ul.today-list");
+  $todayList.append($newLi);
+  $listItem = $("ul.today-list li span");
+  $delete = $(".delete");
+  $listItem.on("click", clickListItem);
+  $delete.on("click", deleteListItem);
+};
 
-/**
- * Adds new list item to <ul>
- */
-const addListItem = function(e) {
-  e.preventDefault();
-  const text = $('input').val();
+const clickListItem = function (event) {
+  let $this = $(this);
+  $this.parent().toggleClass(`done`);
+};
 
-  // rest here...
+const deleteListItem = function (event) {
+  let $this = $(this);
+  $this.parent().remove();
 };
 
-// add listener for add
+$addButton = $(".add-item");
+$listItem = $("ul.today-list li span");
+$delete = $(".delete");
+$addButton.on("click", addListItem);
+$listItem.on("click", clickListItem);
+$delete.on("click", deleteListItem);

stoppingBehavior.html

@@ -14,6 +14,10 @@
   <div id="cat" class="container">
     <button id="dog" class="dog">Bark</button>
   </div>
-
+  <script
+    src="https://code.jquery.com/jquery-3.3.1.min.js"
+    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+    crossorigin="anonymous"
+  ></script>
   <script src="./stoppingBehavior.js"></script>
 </body>

stoppingBehavior.js

@@ -1,10 +1,25 @@
 // Do not change
-document.getElementById('cat').addEventListener('click', () => {
-  alert('meow!');
+document.getElementById("cat").addEventListener("click", () => {
+  alert("meow!");
 });
 
 // When clicked, "More info" link should alert "Here's some info"
 // instead of going to a new webpage
+let $moreInfo = $("a#more-info");
+$moreInfo.on("click", clickAlert);
+
+function clickAlert(event) {
+  event.preventDefault();
+  alert("Here's some info");
+}
 
 // When the bark button is clicked, should alert "Bow wow!"
 // Should *not* alert "meow"
+document.getElementById("dog").addEventListener("click", bark);
+let $doggy = $("#dog");
+$doggy.on("click", bark);
+
+function bark(event) {
+  event.stopPropagation();
+  alert("Bow wow!");
+}