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

Start with Python

Browse Source
This commit is contained in:
Kenneth Mendonca
2015-07-22 16:44:07 -04:00
parent 94031a251f
commit 57cb3981a0
100 changed files with 2085 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
2- javascript/1-js-variables/README.md Normal file
View File

@ -0,0 +1,18 @@
Javascript Variables, Lists, and Objects
========================================
Create a variable named byte and set it equal to "school".
Create an array named instructors and have it contain the strings "Armen", "Chris", and "Greg"
Create an array named students and have it contain the strings "Adolfo", "Benny", "Billy", "Brendan"
Create an object with the following key-value pairs- "byteAcademy":byte, "instructors":instructors, "students":students
Append the contents of the object to the "printout" div element. It should read like this:
byteAcademy - School
instructors - Armen, Chris, Greg
students - Adolfo, Benny, Billy, Brendan

18
2- javascript/1-js-variables/index.html Normal file
View File

@ -0,0 +1,18 @@
<!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>
<div class = "container">
<nav id="top">
<h1>Javascript Variables and Objects</h1>
</nav>
<div id = "printout"></div>
</div>
</body>
</html>

36
2- javascript/1-js-variables/main.css Normal file
View File

@ -0,0 +1,36 @@
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;
}
#printout{
width: 800px;
min-height: 1000px;
background-color: white;
margin: 5em auto 0 auto;
color: black;
text-indent: 1em;
}
#printout p{
font-size: 2em;
}
#printout p:nth-child(even) {
background-color: #D1D1D1;
}

8
2- javascript/1-js-variables/main.js Normal file
View File

@ -0,0 +1,8 @@
// set your variables below
// all jquery dom actions can only be called inside document ready. Print your variables
// inside document ready.
$(document).ready(function(){
})

47
2- javascript/1-js-variables/reset.css Normal file
View 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;
}

11
2- javascript/10-bank-accounts/README.md Normal file
View File

@ -0,0 +1,11 @@
Banks and Bank Accounts
=======================
Make a bank object that holds bank accounts. Your bank accounts should have a balance and account number (store the account number as a string).
Make two bank accounts that are keys in the Bank object.
With the bank accounts, you should be able to:
* make a deposit
* make a withdrawal
* Not be able to withdraw more than the amount in the account
* See your current balance

0
2- javascript/10-bank-accounts/bank.js Normal file
View File

18
2- javascript/11-bank-accounts-dom/README.md Normal file
View File

@ -0,0 +1,18 @@
Bank Accounts 2
===============
In this assignment, you will be taking your code from Bank Accounts 1 and applying it to the DOM.
This is not an easy assignment. Work together and ask for help.
* Take a look through the code and see what you've been given so far. There is a modal ready to use in the html. You will be using it later in the assignment.
* You have a form on the left to create a bank account. Make a bank account object using the inputs from the form.
* Append the bank account name to the 'Bank Accounts' list.
* When you click on the name of a bank account, it should show the modal, and hide the container.
* In the modal, show the user's account name and balance in their respective divs (given to you in the html)
* Use the deposit and withdrawal forms to do their respective functions to the bank account.
* Upon deposit, withdrawal, or 'I'm done', hide the modal, and show the container again.
* _stretch_: When the modal pops up, rather than hiding the container, make it fall to the background and be less visible (opacity, visibility, color... your choice). Add error checking. Clear the forms after submit. See if there is any other functionality you think this page should have. Show off.
Here is some code to create account numbers:
```
this.accountNumber = (Math.floor(Math.random() * (9999999999 - 1000000000)) + 1000000000).toString()
```

9
2- javascript/11-bank-accounts-dom/application.js Normal file
View File

@ -0,0 +1,9 @@
(function($, window, document) {
$(function(){
var Bank = {}
$('#account-modal').hide()
// your code here
});
}(window.jQuery, window, document));
// your code from bank accounts 1 here

39
2- javascript/11-bank-accounts-dom/index.html Normal file
View File

@ -0,0 +1,39 @@
<!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>
<div id="container">
<form id="create-account" action="#" method="post">
<h2>Make An Account</h2>
<input type="text" name="accountName" placeholder="Enter your account name (camelCase plz (: )"><br><br>
<input type="text" name="accountBalance" placeholder="Enter your starting balance"><br><br>
<input type="submit" class="button" value="Submit">
</form>
<div id="bank">
<h2>Bank Accounts</h2>
<ul id="account-list"></ul>
</div>
</div>
<div id="account-modal">
<div id="account-name"></div>
<div id="account-balance"></div>
<form id="deposit">
<input type="text" name="deposit-amount" placeholder="Deposit amount">
<input type="submit" class="button" value="Deposit into account">
</form>
<br>
<form id="withdrawal">
<input type="text" name="withdrawal-amount" placeholder="Withdrawal amount">
<input type="submit" class="button" value="Withdraw from account">
</form>
<br>
<button id="cancel-modal">I'm done</button>
</div>
</body>
</html>

71
2- javascript/11-bank-accounts-dom/main.css Normal file
View File

@ -0,0 +1,71 @@
body {
margin: 0 auto;
font-size: 20px;
}
#container {
margin: 5% 10%;
}
li {
list-style: none;
margin-bottom: 1em;
}
input[type=text] {
width: 300px;
height: 24px;
}
#create-account {
float: left;
width: 45%;
}
#bank {
float: left;
width: 40%;
text-align: center;
}
#account {
float: left;
width: 30%;
}
#account-name {
float: left;
width: 20%;
padding: 2em 0 0 4em;
}
#account-balance {
float: left;
width: 20%;
padding: 2em 0 0 4em;
}
#account-modal {
position: absolute;
width: 50%;
top: 15%;
left: 25%;
border: 1px #222 solid;
}
#deposit {
clear: both;
padding: 4em 0 0 4em;
}
#withdrawal {
padding: 4em 0 0 4em;
padding-top: 10%;
}
#cancel-modal {
clear: both;
float: right;
margin: 2em 10% 2em 0;
font-size: 1.3em;
}

21
2- javascript/2-js-objects/README.md Normal file
View File

@ -0,0 +1,21 @@
Javascript Objects In Depth
===========================
Model these people as objects:
Name: Michaela
Gender: Female
Height in cm: 178
Job: Visual Artist
Parents: Aimee, Louis
Pets: Fezzy, Rufus
Name: Steve
Gender: Male
Height in cm: 160
Job: Graphic Designer
Nickname: The Cow
Friends: Stephen, Stephanie, Stefan
Jobs: Graphic Designer at Acme Corp, Bartender at Banter
Write them to the "printout" div similarly to how they are listed above.

18
2- javascript/2-js-objects/index.html Normal file
View File

@ -0,0 +1,18 @@
<!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>
<div class = "container">
<nav id="top">
<h1>Javascript Objects In Depth</h1>
</nav>
<div id = "printout"></div>
</div>
</body>
</html>

36
2- javascript/2-js-objects/main.css Normal file
View File

@ -0,0 +1,36 @@
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;
}
#printout{
width: 800px;
min-height: 1000px;
background-color: white;
margin: 5em auto 0 auto;
color: black;
text-indent: 1em;
}
#printout p{
font-size: 2em;
}
#printout p:nth-child(even) {
background-color: #D1D1D1;
}

8
2- javascript/2-js-objects/main.js Normal file
View File

@ -0,0 +1,8 @@
// set your variables below
// all jquery dom actions can only be called inside document ready. Print your variables
// inside document ready.
$(document).ready(function(){
})

47
2- javascript/2-js-objects/reset.css Normal file
View 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;
}

71
2- javascript/3-conditionals-and-for-loops/README.md Normal file
View File

@ -0,0 +1,71 @@
Conditionals and For Loops
==========================
Get ready for FizzBuzz!
This is a classic programming test - that yes, you will actually see at job interviews.
It basically just checks if you can write a for loop and if you know what [modulo](http://en.wikipedia.org/wiki/Modulo_operation) is.
#### For Loop
This is the most basic loop we write in Javascript, and most languages for that matter. The ubiquitous For Loop.
```
for(var i = 0; i<=100; i++){ console.log(x) }
```
In the first argument, we declare an incrementing variable, i, and where it will start. We could have called it anything.
In the second argument, we state the conditions under which the following code should be executing. In this case, it is while i is less than or equal to 100.
In the third argument, we say that every time the code is run, i should increment by 1. i++ is shorthand, also known as [syntactic sugar](http://en.wikipedia.org/wiki/Syntactic_sugar) for i += 1, or i = i + 1. They all do the same thing.
To get a slightly different view of it, we could do it this way.
```
for(var x = 500; x > 150; x-=5){ console.log(x) }
```
Try it in your browser or node console and watch it work. What is the last number it prints? Why?
#### Conditionals - If / Else
The most simple conditional statement is the if statement. This is also ubiquitous across many programming languages.
Basically it is written like this:
```
if(some condition){
do this
}
```
You can make it more powerful by specifying an else. This is a catch all for things to do if the first condition isnt met. For example:
```
if(cute store clerk has brown hair){
give phone number
} else {
leave store
}
```
Finally, we can specify multiple outcomes using an else if.
```
if(cute clerk has brown hair){
give phone number
} elseif(cute clerk has blond hair) {
get phone number
} else {
buy playstation
}
```
Instead of this plain english example, also known as [Pseudocode](http://en.wikipedia.org/wiki/Pseudocode)
Get the idea?
#### Fizzbuzz
Ok, now onto FizzBuzz.
Open the main.js file and find the loop inside the document ready.
Write code that does the following:
* if i is divisible by 3, append a line that reads "Fizz"
* if i is divisible by 5, append a line that reads "Buzz"
* if i is divisible by 3 & 5, append a line that reads "FizzBuzz"
All this should be done as usual, to the printout div.

18
2- javascript/3-conditionals-and-for-loops/index.html Normal file
View File

@ -0,0 +1,18 @@
<!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>
<div class = "container">
<nav id="top">
<h1>FizzBuzz</h1>
</nav>
<div id = "printout"></div>
</div>
</body>
</html>

36
2- javascript/3-conditionals-and-for-loops/main.css Normal file
View File

@ -0,0 +1,36 @@
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;
}
#printout{
width: 800px;
min-height: 1000px;
background-color: white;
margin: 5em auto 0 auto;
color: black;
text-indent: 1em;
}
#printout p{
font-size: 2em;
}
#printout p:nth-child(even) {
background-color: #D1D1D1;
}

12
2- javascript/3-conditionals-and-for-loops/main.js Normal file
View File

@ -0,0 +1,12 @@
// set your variables below
// all jquery dom actions can only be called inside document ready. Print your variables
// inside document ready.
$(document).ready(function(){
for(var i = 0; i<=100; i++){
}
})

47
2- javascript/3-conditionals-and-for-loops/reset.css Normal file
View 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;
}

72
2- javascript/4-while-loops-and-for-each/README.md Normal file
View File

@ -0,0 +1,72 @@
While and For In Loops
========================
In this challenge, we're going to write a while loop, a For In loop, and nest them.
#### While Loops
A while loop iterates until a condition is no longer true. For example:
```
while(greg == alive){
live_year(1)
age++
}
```
Seemingly, a while loop could be endless. In that case, we have to break it. Take the following example:
```
i = 0
while(true){
i++
print("I'm an endless loop")
if(i >= 50){
break;
}
}
```
This will run exactly 50 times.
#### For In
A For In loop iterates through each index in the data structure. In an array, an index is an integer, that starts at 0. Take this example:
```
var array = ['john', 'bobby', 'homa', 'stevie', 'rob']
for(var i in array) {
console.log(i) // prints 0, 1, 2, 3, 4
}
```
In an object however, the index is a string. Check this out:
```
var obj = {'john': 'student', 'bobby': 'programmer', 'homa': 'actress', 'stevie': 'gamer'}
for(var k in obj) {
console.log(k) // prints 'john', 'bobby', 'homa', 'stevie'
}
```
#### Sandbox
Try this on your own in your node console or browser console. Declare some objects, iterate through them, print them out.
Also check out [.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
#### Multiplication Tables
Using any loop / loops of your choosing, write code that prints the multiplication tables up to a number input by the user in a form.
Create the form that gets the user input yourself above the #printout div, and append the result to the printout div.
Bonus if you actually use a table.
Your return should look something like this:
```
// userinput = 7
```
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
2 | 2 | 4 | 6 | 8 | 10| 12| 14|
3 | 3 | 6 | 9 | 12| 15| 18| 21|
4 | 4 | 8 | 12| 16| 20| 24| 28|
5 | 5 | 10| 15| 20| 25| 30| 35|
6 | 6 | 12| 18| 24| 30| 36| 42|
7 | 7 | 14| 21| 28| 35| 42| 49|

18
2- javascript/4-while-loops-and-for-each/index.html Normal file
View File

@ -0,0 +1,18 @@
<!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>
<div class = "container">
<nav id="top">
<h1>Multiplication Tables</h1>
</nav>
<div id = "printout"></div>
</div>
</body>
</html>

36
2- javascript/4-while-loops-and-for-each/main.css Normal file
View File

@ -0,0 +1,36 @@
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;
}
#printout{
width: 800px;
min-height: 1000px;
background-color: white;
margin: 5em auto 0 auto;
color: black;
text-indent: 1em;
}
#printout p{
font-size: 2em;
}
#printout p:nth-child(even) {
background-color: #D1D1D1;
}

8
2- javascript/4-while-loops-and-for-each/main.js Normal file
View File

@ -0,0 +1,8 @@
// set your variables below
// all jquery dom actions can only be called inside document ready. Print your variables
// inside document ready.
$(document).ready(function(){
})

47
2- javascript/4-while-loops-and-for-each/reset.css Normal file
View 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;
}

18
2- javascript/5-jquery-basics/README.md Normal file
View 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
View 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
View 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
View 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
View 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;
}

13
2- javascript/6-more-jquery-basics/README.md Normal file
View File

@ -0,0 +1,13 @@
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
2- javascript/6-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
2- javascript/6-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
2- javascript/6-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;
}

8
2- javascript/7-simple-loops/README.md Normal file
View File

@ -0,0 +1,8 @@
Simple Loops and Iteration
==========================
You are given an array (challengeArray) at the top. Using a loop, compare the values inside. If a value in the list is "Dog", switch it to "Burger".
#### Assertion
Make sure your results are printing so you know its working- because you're not going to get much from the assert test. Why is that? Google it and write the answer, as well as your own.

24
2- javascript/7-simple-loops/simple-loops.js Normal file
View File

@ -0,0 +1,24 @@
//Do not edit this list
var challengeArray = ["New York", "Dog", "Philly", "Dog", "Jersey", "Dog", "Cali", "Dog"];
// your code goes in this function
function getDogs(array){
}
// call the function
// do not edit the assert statements
function assert(testnum, bool){
console.log('Test ' + testnum + ": " + bool)
}
assert(1, challengeArray === ['New York', 'Burger', 'Philly', 'Burger', 'Jersey', 'Burger', 'Cali', 'Burger']);
//Make sure you have the correct array - is the assert test working? Why not? Google!
//Write a custom test that allows it to prove challengeArray's equality.

24
2- javascript/8-todo-list/README.md Normal file
View File

@ -0,0 +1,24 @@
To Do List
==========
When it comes to learning new web languages, the todo list has become a "Hello World". So expect to revisit this in Python.
But until then, we will do it in front-end Javascript.
You will find the toDoList prototype and constructor at the top of the main.js file.
#### Create the List
The add method adds a todo to the list, using the text input and form.
The complete method marks the appropriate todo item complete. The user wants to click the item itself and strike the item, noting it done.
Use toggle to toggle it done struck and unstruck.
Feel free to add any other methods, lists or objects you may want. You will want a separate function to print the list to the #printout div.
#### Woah! Client's demands have changed
Now the client who was going to buy your sweet todo list wants a new feature. Is it going to break your whole code, or is your code modular and extendable?
They want it so after a user completes a task, it is displayed struck for 10 seconds, but then disappears from your list. Google the setTimeout method.

22
2- javascript/8-todo-list/index.html Normal file
View File

@ -0,0 +1,22 @@
<!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>
<div class = "container">
<nav id="top">
<h1>To Do List</h1>
</nav>
<form id="todoform" action="#" method="post">
<input type="text" id= "todo" name="todo" placeholder="Enter Your Todo">
<input type="submit" value="Add" id="addTodo">
</form>
<div id = "printout"></div>
</div>
</body>
</html>

41
2- javascript/8-todo-list/main.css Normal file
View 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;
}
#todoform{
margin: 5em auto 0 auto;
width: 20%;
}
#printout{
width: 800px;
min-height: 1000px;
background-color: white;
margin: 1em auto 0 auto;
color: black;
text-indent: 1em;
}
#printout p{
font-size: 2em;
}
#printout p:nth-child(even) {
background-color: #D1D1D1;
}

20
2- javascript/8-todo-list/main.js Normal file
View File

@ -0,0 +1,20 @@
// all jquery dom actions can only be called inside document ready.
function toDoList(){
}
toDoList.prototype.add = function(todo){
}
toDoList.prototype.complete = function(todo){
}
var myList = new toDoList();
$(document).ready(function(){
})

47
2- javascript/8-todo-list/reset.css Normal file
View 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;
}

8
2- javascript/9-get-primes/README.md Normal file
View File

@ -0,0 +1,8 @@
Get Prime Numbers Challenge
===========================
In the HTML file you'll find the normal template plus an input form.
Have the input form accept a number from the user. When the form is submitted, have the function getPrimes take the number as an argument (num) and calculate all the prime numbers up to and including num.
In typical fashion, use JQuery to have all the prime numbers append to the "#printout" div. Make sure they are wrapped in p tags for readability. Do not modify the HTML in any way.

22
2- javascript/9-get-primes/index.html Normal file
View File

@ -0,0 +1,22 @@
<!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>
<div class = "container">
<nav id="top">
<h1>Get All Prime Numbers below Input Number</h1>
</nav>
<form id="numberform" action="#" method="post">
<input type="text" id= "number" name="comment" placeholder="Enter a Number">
<input type="submit" value="Get Primes">
</form>
<div id = "printout"></div>
</div>
</body>
</html>

41
2- javascript/9-get-primes/main.css Normal file
View 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;
}
#numberform{
margin: 5em auto 0 auto;
width: 20%;
}
#printout{
width: 800px;
min-height: 1000px;
background-color: white;
margin: 1em auto 0 auto;
color: black;
text-indent: 1em;
}
#printout p{
font-size: 2em;
}
#printout p:nth-child(even) {
background-color: #D1D1D1;
}

11
2- javascript/9-get-primes/main.js Normal file
View File

@ -0,0 +1,11 @@
// use this function to get and return all the prime numbers below the input number
function getPrimes(num){
}
// all jquery dom actions can only be called inside document ready.
$(document).ready(function(){
})

47
2- javascript/9-get-primes/reset.css Normal file
View 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;
}