JSFiddle - React, Tailwind, and code Playground

by Reem Al Dossary

HTML

<h4>Practice Set: Basic jQuery</h4>

<div id="textBox">
  <p>This assignment will give you practice with some basic jQuery capabilities. There is two tasks in this practice set. You have to use jQuery to make this div fade to about one third of opacity when mouse comes over it. The second one is to add a class to the textBox div when the page is loaded. Use the jQuery API documentation as needed! </p>
</div>

CSS

#textBox {
  height: 170px;
  width: 300px;
  border: 2px solid #CCC;
  padding: 20px;
}

.boxStyle {
  height: 120px;
  width: 300px;
  background-color:#FAEBD7;
  padding: 20px;
}

JavaScript

// your solutions here

//for more information you may visit the jQuery API documentation at: http://api.jquery.com/

$(document).ready(function() {
//use fadeTo() method with a mouse event that will change the p element to fade to 0.30 of opacity when mouse is over it..
	$("#textBox").hover(function() {
    	$("p").fadeTo("slow",0.30);
  	});
//add your class style to textBox div. The class style is already set for you..       
  $("#textBox").addClass("boxStyle");
});