JSFiddle - React, Tailwind, and code Playground

by Alexis Rodriguez

HTML

<h1>Using JQuery with JS</h1>
<body>
  <p>
  Rewrite the Event Listener code using JQuery. The output should remain the same, only the code will change. Add Music from the below list to the Christmas Party list.
  </p>
  <ol>
    <li id="1">Make sure the same alerts appear when you click on 'yes' or 'no' </li>
    <li id="2">Music</li>
  
  </ol>
  
  <div id = "alert">
    <span class = "ready" onclick = "this.parentElement.style.display='none';"></span>
    Are you ready to party in your ugliest Xmas Sweater?
  </div>
  <div id="yes">YES!</div>
  <div id="no">No</div>
 <h2>
 Things We Need for Christmas Party
 </h2>
   <ol id="xmasList">
     <li id="1st">Christmas Tree</li>
     <li id="2nd">Ornaments</li>
     <li id="3rd">Mistletoe</li>
     <li id="4th">Punch</li>
     <li id="5th">Snacks</li>
   </ol>
  </body>

CSS

#alert {
  padding: 30px;
  background-color: #f44336;
  color: green;
  margin-bottom: 20px
}
 .ready {
   margin-left: 20px;
   color: white;
   font-weight: bold;
   float: right;
   font-size: 34px
   line-height: 25px
   
  }

JavaScript

/*JS code*/
yes.addEventListener ("click", function(){
		alert("WOOHOO!");
}, false);

no.addEventListener ("click", function(){
	alert("We don't want you anyway!");
}, false);

 var New = document.getElementById("2");
 var xmasList = document.getElementById("xmasList");
 document.getElementById("xmasList").appendChild(New);
   
/*JQuery Solution
$('#yes').click(function (){alert("WOOHOO!")});
$('#no').click(function (){alert("We don't want you anyway!")});
*/