week6_Assignment_Completed

UW-JavaScript-310B · Himanshi9gupta · Mar 3, 2022 · Mar 7, 2022 · Mar 3, 2022 · ea60466e5f9965c36c7fc6ee1a4592c5aaac96ae
commit ea60466e5f9965c36c7fc6ee1a4592c5aaac96ae
diff --git a/carProto.html b/carProto.html
@@ -2,8 +2,24 @@
 <html>
 <head>
   <title>Car Prototype</title>
+  <style>
+    .color{
+      color:red;
+      text-align: center;
+
+    }
+    .color1{
+      color:green;
+      text-align: center;
+
+    }
+  </style>
 </head>
 <body>
+  <script
+  src="https://code.jquery.com/jquery-3.3.1.min.js"
+  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+  crossorigin="anonymous"></script>
   <script src="carProto.js"></script>
 </body>
 </html>
diff --git a/carProto.js b/carProto.js
@@ -4,6 +4,37 @@
  * @param {String} model
  */
 
+ $( document ).ready(function() {
+    console.log( "ready!" );
+class Car{
+
+    constructor(model){
+        this.model = model;
+        this.currentSpeed = 0;
+
+    }
+
+    accelerate(){
+        this.currentSpeed++;
+    }
+    brake(){
+        this.currentSpeed--;
+    }
+
+    toString(){
+
+        $('body').append(`<h1 class="color">${this.model} is moving with ${this.currentSpeed}ms speed!<h1>`);
+        console.log(`This ${this.model} is moving with ${this.currentSpeed}ms speed!`);
+
+    }
+}
+
+let newCar = new Car('Mercedes');
+newCar.accelerate();
+newCar.accelerate();
+newCar.brake();
+newCar.toString();
+
 //  Create an instance, accelerate twice, brake once, and console log the instance.toString()
 
 /**
@@ -12,4 +43,25 @@
  * @param {String} model
  */
 
+ class ElectricCar extends Car{
+
+    constructor(model){
+       super(model);
+       super.accelerate();
+       super.brake();
+    }
+
+    toString(){
+        $('body').append(`<h1 class="color1">This is new Model ${this.model} is moving with ${this.currentSpeed}ms speed!<h1>`);
+        console.log(`This is new Model ${this.model} is moving with ${this.currentSpeed}ms speed!`);
+    }
+}
+
+let brandNewCar = new ElectricCar('Audi');
+brandNewCar.accelerate();
+brandNewCar.accelerate();
+brandNewCar.brake();
+brandNewCar.toString();
+
 //  Create an instance, accelerate twice, brake once, and console log the instance.toString()
+ });
diff --git a/jQueryDomCrud.css b/jQueryDomCrud.css
@@ -18,4 +18,8 @@ img {
 .highlight {
   color: darkorchid;
   font-weight: bold;
+}
+
+#text{
+  color:red;
 }
diff --git a/jQueryDomCrud.js b/jQueryDomCrud.js
@@ -1,15 +1,43 @@
 // Create a new <a> element containing the text "Buy Now!"
 // with an id of "cta" after the last <p>
 
+$( document ).ready(function() {
+    console.log( "ready!" );
+const $newA = $('<a>');
+$newA.attr('id','cta');
+$newA.text('Buy Now!');
+
+const $main = $('main');
+$main.append($newA);
+
+
 // Access (read) the data-color attribute of the <img>,
 // log to the console
 
+const $img = $('img');
+console.log($img[0].dataset.color);
+
 // Update the third <li> item ("Turbocharged"),
 // set the class name to "highlight"
 
+const $allList = $('li');
+$allList.eq(2).addClass('highlight')
+
+
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
 
+const $p = $('p');
+$p.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"
+const $text = $('<p>').text('Added to Cart!')
+$text.attr('id','text');
+$('#cta')[0].addEventListener('click', ()=>{
+
+    $newA.remove();
+    $main.append($text);
+});
+});
diff --git a/jQueryToDoList.css b/jQueryToDoList.css
@@ -56,3 +56,9 @@ li.done span {
 .add-item {
   background-color: darkturquoise;
 }
+.hidden {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s 2s, opacity 2s ease-in-out;
+
+}
diff --git a/jQueryToDoList.html b/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>
diff --git a/jQueryToDoList.js b/jQueryToDoList.js
@@ -1,19 +1,42 @@
 /**
  * Toggles "done" class on <li> element
  */
+ $( document ).ready(function() {
+  console.log( "ready!" );
+
+ $("ul").on("click", function(e) {
+  e.target.parentElement.classList.toggle("done");
+});
+
 
 /**
  * Delete element when delete link clicked
  */
 
+  const $deleteBtn = $('.delete');
+  function del(e){
+    e.target.parentElement.classList.toggle("hidden");
+    //$(this).addClass('hidden')
+    //$(this).parent().remove();
+}
+  $deleteBtn.on('click', del);
+
 /**
  * Adds new list item to <ul>
  */
+ let $newLi = $('<li>');
 const addListItem = function(e) {
   e.preventDefault();
   const text = $('input').val();
-
-  // rest here...
+
+  let $ul = $('ul').append(`<li><span>${text}</span><a class="delete">Delete</a></li>`);
+  $('.delete').addClass('delete');
+  $('.delete').on('click', del);
+
 };
 
+
 // add listener for add
+
+$('.add-item').on('click', addListItem)
+});
diff --git a/stoppingBehavior.html b/stoppingBehavior.html
@@ -14,6 +14,9 @@
   <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>
diff --git a/stoppingBehavior.js b/stoppingBehavior.js
@@ -1,3 +1,11 @@
+$( document ).ready(function() {
+  console.log( "ready!" );
+$('#cat').on('click',function func(e){
+  alert("Bow wow!");
+  e.stopImmediatePropagation();
+})
+
+
 // Do not change
 document.getElementById('cat').addEventListener('click', () => {
   alert('meow!');
@@ -6,5 +14,13 @@ document.getElementById('cat').addEventListener('click', () => {
 // When clicked, "More info" link should alert "Here's some info"
 // instead of going to a new webpage
 
+let $anchor = $('#more-info');  
+  $anchor.attr('href','#');
+
+$anchor.on('click',()=>{
+  alert("Here's some info");
+})
+
 // When the bark button is clicked, should alert "Bow wow!"
 // Should *not* alert "meow"
+});