jQuery

by atheer Salim

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id=empty>

</div>

<div id="red">
<p>
hej
</p>
</div>

<div id="blue">
<p>
hej
</p>
</div>

<div id="green">
<p>
hej
</p>
</div>

<div id="purple">
<p>
hej
</p>
</div>

<button id="changeColor">
click me
</button>

    
</body>
</html>

CSS

#red {
  background: red;
}

#blue {
  background: blue;
}

#green {
  background: green;
}

#purple {
  background: purple;
}

.highlight {
 
color: white;
  
}

/*.hidden {
  
visibility: hidden;
  
}*/

JavaScript

$(document).ready(function() {

// UPPGIFT 1
var changeText = $("#purple").text("då");

/*$("#purple").click(function() {
$("#purple").fadeOut();
changeText = $("#purple").text("hej");
$("#purple").fadeIn();

});*/

//UPPGIFT 2
$("#red").animate({
    	opacity: 0.45
    }, 800, function() {
});

//UPPGIFT 3
$("#changeColor").click(function() {
$("#green").toggleClass("highlight");
});
 


/*$("#red").hover(function() {
$("#green").hide();

});*/

$("div").click(function() {
//UPPGIFT 4
$(this).toggleClass("highlight");


//$("div").prepend("<h5>olika</h5>");
//$("div").before("<h6>platser</h6>");
//$("div").append("<h6>choices</h6>");
//$("div").after("<h5>things</h5>");

//$("#empty").after($(this).clone());
//$(this).fadeOut();

});










});