Blog Post 10/10/15

It’s Homecoming Weekend!

For your 3rd blog post, update me with what you learned this week. I would like a sample of code as well as a full paragraph. Also tell me if you can use your new skills in school yet.  If so, how are you using them.  If not, how could you?

This week I learned the basics of JQuery! We used animations, timeouts, delays, and any other method we wanted to learn. I tried to make my code complicated, but it didn’t work out so well, so I settled with what I could learn off of w3schools and StackOverflow. Here is an example of my code:



$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
/*$(document).ready(function(){
$("#p1").mouseenter(function(){
$(this).hide();
});
});*/
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
$(document).ready(function(){
$("#bt1").click(function(){
$("#div1").animate({left: $(window).width() / 4}, 2000);
$("#p2").text("Hello World!");
});
});
$(document).ready(function(){
$("#div1").click( function() {
$(this).css('-webkit-transform', 'rotateY(-190deg)')
});
})

I commented out the function that hides the paragraph when you move your mouse over it because it messed up the formatting.

Here is my HTML:


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link href="css.css" type="css/text" rel="stylesheet"/>
</head>
<body>
<!-- Step One -->
<div><h2>Heading</h2></div>
<div><p>Paragraph</p>
<p>Paragraph 2</p></div>
<button>Click Here</button>
<!-- mouse over -->
<div><p id="p1">Enter Paragraph. </p></div>
<!-- slider-->
<div id="flip">Click to slide</div>
<div id="panel">Hello</div>
<!-- animation-->
<div><button id="bt1">Start Animation</button>
<p>Paragraph</p></div>
<div id="div1">
<p id="p2"></p>
</div>
</body>
</html>

It is simple yet concise.


In school I am not using my coding knowledge as of now, but I am taking Computer Science Principles next term, so I can use it then.

Advertisements