Start with Python
This commit is contained in:
Kenneth Mendonca
18
2- javascript/5-jquery-basics/README.md
Normal file
18
2- javascript/5-jquery-basics/README.md
Normal file
@ -0,0 +1,18 @@
|
||||
JQuery Basics
|
||||
=============
|
||||
|
||||
JQuery is a powerful front-end javascript library that is used on virtually 100% of modern websites. The JQuery codebase is extremely [well documented with explanations and examples](http://api.jquery.com/) Don't be afraid to dig in.
|
||||
|
||||
When you open index.html you'll find 3 black boxes, inside a 3 column layout.
|
||||
|
||||
Your task is the following:
|
||||
|
||||
* Add 3 buttons to each column, under the boxes and text. The buttons should be centered and evenly spaced. Label each button with a color of your choice.
|
||||
* Using JQuery's .css method, change the color of the appropriate box to the color you labeled the button when the button is clicked.
|
||||
* Also adjust the text under each box to tell the user which color the box currently is.
|
||||
* Make it so when you click the box, it goes back to black and alters the message appropriately.
|
||||
* Add another button for each box. Label it "Animate!" or whatever.
|
||||
* Using JQuery's .animate method, make one box much taller, slowly. Make one box much skinnier, fast. And make one box completely disappear.
|
||||
* Now make it so when you click the animate button a second time it will go back to the way it was.
|
||||
|
||||
This is just some of the fun you can have in JQuery. What else can you do?
|
||||
30
2- javascript/5-jquery-basics/index.html
Normal file
30
2- javascript/5-jquery-basics/index.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!doctype HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="reset.css">
|
||||
<link rel="stylesheet" type="text/css" href="main.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav id="top">
|
||||
<h1>JQuery Basics</h1>
|
||||
</nav>
|
||||
<div class = "row">
|
||||
<div class = "col">
|
||||
<div class = "box" id = "box-1"></div>
|
||||
<p>The box color is <span id = "color-1"></span></p>
|
||||
</div>
|
||||
<div class = "col">
|
||||
<div class = "box" id = "box-2"></div>
|
||||
<p>The box color is <span id = "color-2"></span></p>
|
||||
</div>
|
||||
<div class = "col">
|
||||
<div class = "box" id = "box-3"></div>
|
||||
<p>The box color is <span id = "color-3"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
41
2- javascript/5-jquery-basics/main.css
Normal file
41
2- javascript/5-jquery-basics/main.css
Normal file
@ -0,0 +1,41 @@
|
||||
body{
|
||||
background-color: #D1D1D1
|
||||
}
|
||||
|
||||
nav{
|
||||
position: absolute;
|
||||
background-color: black;
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
line-height: 4em;
|
||||
}
|
||||
|
||||
nav h1{
|
||||
font-size: 3em;
|
||||
font-family: monospace;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.row{
|
||||
width: 80%;
|
||||
margin: 10em auto 0 auto;
|
||||
}
|
||||
|
||||
.col{
|
||||
float: left;
|
||||
width: 30%;
|
||||
margin: 0 1.5% 0 1.5%;
|
||||
}
|
||||
|
||||
.box{
|
||||
height: 15em;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.col p{
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
6
2- javascript/5-jquery-basics/main.js
Normal file
6
2- javascript/5-jquery-basics/main.js
Normal file
@ -0,0 +1,6 @@
|
||||
// all jquery dom actions can only be called inside document ready.
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
|
||||
})
|
||||
47
2- javascript/5-jquery-basics/reset.css
Normal file
47
2- javascript/5-jquery-basics/reset.css
Normal file
@ -0,0 +1,47 @@
|
||||
/**
|
||||
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
|
||||
* http://cssreset.com
|
||||
*/
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user