course-work/prep-work
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

files

Browse Source
This commit is contained in:
Armen Vartan
2014-12-01 12:17:43 -05:00
parent 89e5a5f4b0
commit b9a8397f34
124 changed files with 2918 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
javascript/8-more-jquery-basics/README.md Normal file
View File

@ -0,0 +1,14 @@
### Intro to jQuery
In this assignment, you will be dynamically adding list elements with the comments from the form.
The flow is something like this - the user writes in the form and presses the submit button. That text is added to the page, under the form. The page is not refreshed, and the user can continue to add items.
Research the following to accomplish this challenge.
jQuery .append
Form inputs and how to access their values
jQuery .on (in this assignment, you will be using .on('submit'))
preventDefault

5
javascript/8-more-jquery-basics/application.js Normal file
View File

@ -0,0 +1,5 @@
(function($, window, document) {
$(function(){
//your code here
});
}(window.jQuery, window, document));

15
javascript/8-more-jquery-basics/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<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="application.js"></script>
</head>
<body>
<form id="post-comment" action="#" method="post">
<input type="text" name="comment" placeholder="Type your comment.">
<input type="submit" value="Submit">
</form>
<ul id="comments"></ul>
</body>
</html>

19
javascript/8-more-jquery-basics/main.css Normal file
View File

@ -0,0 +1,19 @@
body {
margin: 0 auto;
font-size: 20px;
}
#post-comment {
margin-top: 20px;
text-align: center;
}
li {
list-style: none;
height: 30px;
width: 100%;
padding: 1em;
}
li:nth-child(odd) {
background-color: lightgrey;
}