diff --git a/1- python/1-py-variables/README.md b/1- python/1-py-variables/README.md new file mode 100644 index 0000000..934c8b6 --- /dev/null +++ b/1- python/1-py-variables/README.md @@ -0,0 +1,21 @@ +Python Variables, Lists and Dictionaries +======================================== + +Create a variable named byte and set it equal to "school". + +Create a [list](http://www.tutorialspoint.com/python/python_lists.htm) named instructors and have it contain the strings "Armen", "Chris", and "Greg" + +Create an [tuple](http://www.tutorialspoint.com/python/python_tuples.htm) named students and have it contain the strings "Adolfo", "Benny", "Billy", "Brendan" + +What's the difference between a list and a tuple? Why use one over the other? + +Create a dictionary with the following key-value pairs- "byteAcademy":byte, "instructors":instructors, "students":students + +Print the keys and values of the dictionary. It should look like this: +``` +byteAcademy - School +instructors - Armen, Chris, Greg +students - Adolfo, Benny, Billy, Brendan +``` + +Check out [.format](https://infohost.nmt.edu/tcc/help/pubs/python/web/new-str-format.html) diff --git a/1- python/1-py-variables/variables.py b/1- python/1-py-variables/variables.py new file mode 100644 index 0000000..e69de29 diff --git a/1- python/10-reverse-polish-notation/README.md b/1- python/10-reverse-polish-notation/README.md new file mode 100644 index 0000000..f63aa93 --- /dev/null +++ b/1- python/10-reverse-polish-notation/README.md @@ -0,0 +1,41 @@ +Reverse Polish Notation +======================= + +You've never done it until you've done it reverse polish. + +I don't know what that means, but check this out on [reverse polish notation](http://en.wikipedia.org/wiki/Reverse_Polish_notation). + +Reverse polish notation is a mathematical notation in which every operator follows all of its operands. For example: +``` +3 4 + = 7 +4 2 / = 2 +10 7 2 - * 5 / = 10 +``` +Write a program that accepts a RPN equation as a command line argument, such that you would execute your program: +``` +python3 rpn_calc.py 10 9 - 5 + +``` +Which would then return you 6, the result of that equation. + +#### ARGV + +To run the program like this you need to import the sys library and access sys.argv. + +ARGV gives us the arguments used to launch the program as an array. The first position is always the application name / file. The next are all others divided by spaces. + +Read about sys.argv [here](http://www.pythonforbeginners.com/system/python-sys-argv) + +Sandbox with it, so you know what you are getting as an input. + +Here's a nice hint - we can "slice" arrays in Python like in JS just by doing: +``` +>>> array = ['hi', 'wut', 'm8', 'lol', 'doge'] +>>> array[2:4] +['m8', 'lol'] +``` + +#### Testing + +Write some assert statements after you've solved the challenge. + +**NOTE**: You might need to escape the multiplication operator * when you pass it in. You can escape things by adding a backslash (\) in front of it. diff --git a/1- python/10-reverse-polish-notation/rpncalc.py b/1- python/10-reverse-polish-notation/rpncalc.py new file mode 100644 index 0000000..e69de29 diff --git a/1- python/11-factorial/README.md b/1- python/11-factorial/README.md new file mode 100644 index 0000000..46aebab --- /dev/null +++ b/1- python/11-factorial/README.md @@ -0,0 +1,18 @@ +Factorial! +========== + +Get the factorial of a given number. Using sys.argv, pass in a number and return it's factorial. + +To calculate the factorial of 5, for example, the equation is ```5 * 4 * 3 * 2 * 1 = 120``` + +#### Iterative + +Write the equation iteratively, using a for or while loop. How to use loops in Python is well documented [here](https://docs.python.org/3.4/tutorial/controlflow.html) + +#### Bonus + +Write this function [recursively](http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_3/Recursion). If you run into difficulty, think about how your stack will develop as your function recurses and remember to define your base case. + +Write assert statements to test your code in both cases. + +[Wikipedia on Factorials](http://en.wikipedia.org/wiki/Factorial) diff --git a/1- python/11-factorial/factorial_iterative.py b/1- python/11-factorial/factorial_iterative.py new file mode 100644 index 0000000..d32d0d8 --- /dev/null +++ b/1- python/11-factorial/factorial_iterative.py @@ -0,0 +1,13 @@ +import sys + +def factorial(num): + + + + + + +#write assert statements below + +assert(factorial(5) == 120), "5! should return 120" +assert(factorial(20) == 2432902008176640000), "Well that escalated quickly" diff --git a/1- python/11-factorial/factorial_recursive.py b/1- python/11-factorial/factorial_recursive.py new file mode 100644 index 0000000..d32d0d8 --- /dev/null +++ b/1- python/11-factorial/factorial_recursive.py @@ -0,0 +1,13 @@ +import sys + +def factorial(num): + + + + + + +#write assert statements below + +assert(factorial(5) == 120), "5! should return 120" +assert(factorial(20) == 2432902008176640000), "Well that escalated quickly" diff --git a/1- python/12-is-palindrome/README.md b/1- python/12-is-palindrome/README.md new file mode 100644 index 0000000..aee1a71 --- /dev/null +++ b/1- python/12-is-palindrome/README.md @@ -0,0 +1,13 @@ +Sarah Palindrome +================ + +Write a function that when given a word or sentence returns True if it is a palindrome and False if it isn't. + +Your program should accept input using sys.argv. +``` +python3 palindrome.py Taco Cat # returns true +``` +You will want to make this case insensitive (Cat == cat). You can do this by make all letters upper or lower case. +You will also want to use strip to remove all non word characters. + +Make the asserts pass and write more assert statements to test your code. diff --git a/1- python/12-is-palindrome/palindrome.py b/1- python/12-is-palindrome/palindrome.py new file mode 100644 index 0000000..88305d3 --- /dev/null +++ b/1- python/12-is-palindrome/palindrome.py @@ -0,0 +1,12 @@ +import sys + +def is_palindrome(string): + pass + + + + +#TESTS + +assert(is_palindrome("greg is the man") == False), "Presumably random sentence should return false" +assert(is_palindrome("No Mel Gibson is a casino's big lemon") == True), "Palindrome should return true" diff --git a/1- python/13-string-scramble/README.md b/1- python/13-string-scramble/README.md new file mode 100644 index 0000000..d39d461 --- /dev/null +++ b/1- python/13-string-scramble/README.md @@ -0,0 +1,9 @@ +String Scramble +=============== + +Write an algorithm that takes a string, and checks if all of the letters of the string are inside of a second string. For example: +``` +string_scramble('hello', 'goodbye') # False +string_scramble('hello', 'lolfrhe') # True +``` +Write your own assert statements. diff --git a/1- python/13-string-scramble/scramble.py b/1- python/13-string-scramble/scramble.py new file mode 100644 index 0000000..5311009 --- /dev/null +++ b/1- python/13-string-scramble/scramble.py @@ -0,0 +1,2 @@ +def string_scramble(string_one, string_two): + pass diff --git a/1- python/14-largest-prime-factor/README.md b/1- python/14-largest-prime-factor/README.md new file mode 100644 index 0000000..7db633e --- /dev/null +++ b/1- python/14-largest-prime-factor/README.md @@ -0,0 +1,10 @@ +Largest Prime Factor +==================== + +Write a function that takes a number as input, and returns the largest prime factor of a given number. If the number is prime itself, then it's largest prime factor is itself. +``` +largest_prime(15) # 5 +largest_prime(18) # 3 +largest_prime(19) # 19 +largest_prime(302) # 151 +``` diff --git a/1- python/14-largest-prime-factor/primes.py b/1- python/14-largest-prime-factor/primes.py new file mode 100644 index 0000000..1528dfa --- /dev/null +++ b/1- python/14-largest-prime-factor/primes.py @@ -0,0 +1 @@ +def largest_prime(number): diff --git a/1- python/15-sieve-of-eratosthenes/README.md b/1- python/15-sieve-of-eratosthenes/README.md new file mode 100644 index 0000000..969312b --- /dev/null +++ b/1- python/15-sieve-of-eratosthenes/README.md @@ -0,0 +1,12 @@ +Sieve of Eratosthenes +===================== + +The [Sieve of Eratosthenes](http://en.wikipedia.org/wiki/Sieve_of_Eratosthenes) is an algorithm used to determine all the prime numbers below a given number. + +#### Pseudocode + +Use the wikipedia explanation above (under the "Example" header) to write some pseudocode to solve this problem. Here is a [pseudocode refresher](http://www.unf.edu/~broggio/cop2221/2221pseu.htm). Write this in comments at the top of the sieve.py file. + +#### Solve in Python + +Write a function that implements this algorithm to determine all the prime numbers below a given number. The program should take a number as an argument, and return an array of all the primes. diff --git a/1- python/15-sieve-of-eratosthenes/sieve.py b/1- python/15-sieve-of-eratosthenes/sieve.py new file mode 100644 index 0000000..ddd5403 --- /dev/null +++ b/1- python/15-sieve-of-eratosthenes/sieve.py @@ -0,0 +1,6 @@ +###PSEUDOCODE HERE + + + + +###real code below \ No newline at end of file diff --git a/1- python/16-benchmark/README.md b/1- python/16-benchmark/README.md new file mode 100644 index 0000000..150ec73 --- /dev/null +++ b/1- python/16-benchmark/README.md @@ -0,0 +1,20 @@ +Benchmarking your Code +======================= + +How fast is your code? Do you want to find out? Yes! + +#### Write a Benchmark function + +Write a Benchmark function that takes the following as inputs: +* the function you want to benchmark +* the amount of times you want it to run + +Have your Benchmark function return the total amount of time it took. + +The datetime library is imported at the top of the file. Look it up and how it's going to help you solve this problem. Do not import any other libraries. + +#### Test your Factorial Functions + +Test your Iterative Factorial function versus your recursive - which is faster?? + +Import this file into at least one other of your assignments and test some of your functions. diff --git a/1- python/16-benchmark/benchmark.py b/1- python/16-benchmark/benchmark.py new file mode 100644 index 0000000..5187aeb --- /dev/null +++ b/1- python/16-benchmark/benchmark.py @@ -0,0 +1,6 @@ +import datetime +import imp +##what is this code doing? figure out how to call your fibonacci functions in this file. +fibonacci = imp.load_source('fibonacci', '../2-is-fibonacci/fibonacci.py') + +def benchmark(func, times): \ No newline at end of file diff --git a/1- python/2-py-dictionaries/README.md b/1- python/2-py-dictionaries/README.md new file mode 100644 index 0000000..48277fd --- /dev/null +++ b/1- python/2-py-dictionaries/README.md @@ -0,0 +1,21 @@ +Python Dictionaries In Depth +============================ + +Model these people as dictionaries: + +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 + +Print out the keys and values of each person object. Look into iterating over dictionaries in Python diff --git a/1- python/2-py-dictionaries/dictionaries.py b/1- python/2-py-dictionaries/dictionaries.py new file mode 100644 index 0000000..e69de29 diff --git a/1- python/3-conditionals-and-for-loops/README.md b/1- python/3-conditionals-and-for-loops/README.md new file mode 100644 index 0000000..1611e1e --- /dev/null +++ b/1- python/3-conditionals-and-for-loops/README.md @@ -0,0 +1,76 @@ +Conditionals and For Loops +========================== + +Get ready for FizzBuzz, again! + +#### For Loop + +For loop syntax in Python is slightly different. +The 'for in' pattern is still available in Python: +``` +>>> for thing in list: +... print(thing) +``` +Python also has what's known as a range: +``` +>>> lst = ['a', 'b', 'c'] +>>> for i in range(len(lst)): +... print(i) +0 +1 +2 +``` +If we wanted to print the element in the list, rather than the index, we could do it like this: +``` +>>> lst = ['a', 'b', 'c'] +>>> for i in range(len(lst)): +... print(lst[i]) +a +b +c +``` +With range, you have the option to choose the start and stop points, as well as increment. +``` +>>> for i in range(2, 10, 2): +... print(i) +2 +4 +6 +8 +``` +As you can see, the end point is not included as part of the range. + +Fire up your Python interpreter and try it out. + +#### Conditionals - Switch + +Switch statements are basically the same in Python. You can write if statements in two ways: +``` +if(some condition): + do something +``` +or +``` +if some condition: + do something +``` +for else clauses, it's also pretty similar. +Here is an example: +``` +if condition: + do something +elif another condition: + do something else +else: + catch all of the other possibilities +``` + +#### FizzBuzz + +Time for FizzBuzz in Python. + +Write code that does the following: +* if i is divisible by 3, print "Fizz" +* if i is divisible by 5, print "Buzz" +* if i is divisible by 3 & 5, print "FizzBuzz" +* if i is not divisble by 3 or 5, print i diff --git a/1- python/3-conditionals-and-for-loops/fizzbuzz.py b/1- python/3-conditionals-and-for-loops/fizzbuzz.py new file mode 100644 index 0000000..f0fa29d --- /dev/null +++ b/1- python/3-conditionals-and-for-loops/fizzbuzz.py @@ -0,0 +1,11 @@ +def fizzbizz(num): + pass + + +def assertion(actual, expected): + print(str(actual) + " == " + str(expected) + " : " + str(actual==expected)) + +assertion(fizzbuzz(33), "Fizz") +assertion(fizzbuzz(20), "Buzz") +assertion(fizzbuzz(30), "FizzBuzz") +assertion(fizzbuzz(32), 32) diff --git a/1- python/4-while-loops/README.md b/1- python/4-while-loops/README.md new file mode 100644 index 0000000..3577bf0 --- /dev/null +++ b/1- python/4-while-loops/README.md @@ -0,0 +1,40 @@ +While Loops in Python +===================== + +A while loop iterates until a condition is no longer true. For example: +``` +i = 0 +while i < 10: + print(i) + i += 1 +``` +Be careful with while loops. If your while loop doesn't have a way to end, it will go on until it crashes. +``` +i = 10 +while i > 5: + print(i) + i += 1 +``` + +#### Multiplication Tables + +Using any loop / loops of your choosing, write code that prints the multiplication tables up to a number + +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| +``` +Python does not change data types for you. If you would like to mix an integer and "|" into a string, you have to explicitly change the integer into a string. the method str() will do this for you. +``` +1 + "c" # this won't work +str(1) + "c" # this will be "1c" +``` diff --git a/1- python/4-while-loops/multiply.py b/1- python/4-while-loops/multiply.py new file mode 100644 index 0000000..20a8535 --- /dev/null +++ b/1- python/4-while-loops/multiply.py @@ -0,0 +1,2 @@ +def multiplication_table(number): + pass diff --git a/1- python/5-triangles-part-1/README.md b/1- python/5-triangles-part-1/README.md new file mode 100644 index 0000000..54a9a04 --- /dev/null +++ b/1- python/5-triangles-part-1/README.md @@ -0,0 +1,17 @@ +Print a Triangle +================ + +Using nested for loops, print a triangle like so: +``` +>>> triangle(10) +* +** +*** +**** +***** +****** +******* +******** +********* +********** +``` diff --git a/1- python/5-triangles-part-1/triangle.py b/1- python/5-triangles-part-1/triangle.py new file mode 100644 index 0000000..5453a4e --- /dev/null +++ b/1- python/5-triangles-part-1/triangle.py @@ -0,0 +1,2 @@ +def triangle(num): + pass diff --git a/1- python/6-triangles-part-2/README.md b/1- python/6-triangles-part-2/README.md new file mode 100644 index 0000000..9d4908d --- /dev/null +++ b/1- python/6-triangles-part-2/README.md @@ -0,0 +1,20 @@ +Print a Mario End of Level Stairs +================================= + +Remember this from Mario? +![Mario stairs](http://www.nintendoninja.com/images/stairs.png) + +Create it! +``` +>>> triangle(10) + * + ** + *** + **** + ***** + ****** + ******* + ******** + ********* +********** +``` diff --git a/1- python/6-triangles-part-2/triangle.py b/1- python/6-triangles-part-2/triangle.py new file mode 100644 index 0000000..42246cb --- /dev/null +++ b/1- python/6-triangles-part-2/triangle.py @@ -0,0 +1,2 @@ +def mario_triangle(num): + pass diff --git a/1- python/7-regex-intro/README.md b/1- python/7-regex-intro/README.md new file mode 100644 index 0000000..1a8a21b --- /dev/null +++ b/1- python/7-regex-intro/README.md @@ -0,0 +1,29 @@ +Regular Expressions +=================== + +Regular Expressions (regex for short) are a way to represent patterns in strings. They aren't as bad as people make them out to be. When used on the right problem, they are a great solution. + +Go to [Rubular](http://rubular.com/). We're going to sandbox inside it a bit to get acquainted with regex syntax. At the bottom of the page is a regex cheat sheet. +Note: Depending on the language, you may have to escape certain characters. For example, instead of `a{3}`, you may have to type `a\{3\}`. +Also, be careful with periods (`.`). A period means any character in regex, so you have to escape it if you want to pattern match a period. + +Here are some examples of regex and matching string patterns: +* `a{3}` => `aaa` +* `a{3,}` => `aaaaaaaa` +* `[a-z]` => any lowercase letter +* `[A-Z]{4,6}` => between 4 and 6 uppercase letters, ex. `FASDV` +* `.` => any character +* `\w\.` => `_.` +* `hello\d?` => `hello` or `hello5` +* `[a-nO-Z]*` => abcOZZ + +Make a regex to match each of these strings: +* match 'byte academy' 3 different ways +* an 8 character password, do not allow non word characters +* an 8 character password that has at least 1 number and 1 capital letter + + +* byteacademy@example.com +* byte.academy@example.com +* byteacademy22@example.co.uk +See if you can get all three with 1 regex, but not invalid emails (not having an @, etc...) diff --git a/1- python/9a-temperature-converter/README.md b/1- python/9a-temperature-converter/README.md new file mode 100644 index 0000000..86b68a0 --- /dev/null +++ b/1- python/9a-temperature-converter/README.md @@ -0,0 +1,14 @@ +Temperature Converters +====================== + +#### Fahrenheit to Celsius +Write a function that converts fahrenheit temperatures to celsius. The equation to do this is ```C = (F - 32) * 5/9```. + +#### Celsius to Fahrenheit + +Write a similar function that converts celsius to fahrenheit. +The equation for this is ```F = (C * 9/5) + 32```. + +#### Testing + +Make sure the tests pass. Write 3 of your own tests. diff --git a/1- python/9a-temperature-converter/temp.py b/1- python/9a-temperature-converter/temp.py new file mode 100644 index 0000000..8b42c53 --- /dev/null +++ b/1- python/9a-temperature-converter/temp.py @@ -0,0 +1,12 @@ +def fahrenheit_to_celsius(temp): + pass + +def celsius_to_fahrenheit(temp): + pass + + +assert(fahrenheit_to_celsius(32) == 0), "Freezing temp should return true" +assert(fahrenheit_to_celsius(212) == 100), "Boiling temp should return true" +assert(fahrenheit_to_celsius(-13) == -25), "Negative number should return true" +assert(celsius_to_fahrenheit(37) == 98.6), "Body temp should return true" +assert(celsius_to_fahrenheit(10) == 50), "Random temp should return true" \ No newline at end of file diff --git a/1- python/9b-is-fibonacci/README.md b/1- python/9b-is-fibonacci/README.md new file mode 100644 index 0000000..b90a2eb --- /dev/null +++ b/1- python/9b-is-fibonacci/README.md @@ -0,0 +1,15 @@ +The Fibonacci Sequence +====================== + +The fibonacci sequence are the numbers in the following integer sequence: +``` +0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, ...and so on +``` +Write a function that detects whether its input is a fibonacci number or not. + +Make sure the assert statements all pass. Write two of your own Python assert statements. + +## Resources + +[Fibonacci Numbers](http://en.wikipedia.org/wiki/Fibonacci_number) +[Fibonacci in Nature](http://jwilson.coe.uga.edu/emat6680/parveen/fib_nature.htm) diff --git a/1- python/9b-is-fibonacci/fibonacci.py b/1- python/9b-is-fibonacci/fibonacci.py new file mode 100644 index 0000000..642c3c5 --- /dev/null +++ b/1- python/9b-is-fibonacci/fibonacci.py @@ -0,0 +1,16 @@ +def fibonacci(num): + pass + + + +# TESTS +import random +def random_fibonacci(): + fib = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711, 28657, 46368, 75025] + return random.sample(fib, 1)[0] + +assert(fibonacci(random_fibonacci()) == True), "Random Fibonacci number should return true" +assert(fibonacci(50) == False), "50 should return false" +assert(fibonacci(97450) == False), "50 should return false" +assert(fibonacci(1) == True), "1 should return true" +assert(fibonacci(7540113804746346429) == True), "A massive number in sequence should return true" diff --git a/2- javascript/1-js-variables/README.md b/2- javascript/1-js-variables/README.md new file mode 100644 index 0000000..c83c66d --- /dev/null +++ b/2- javascript/1-js-variables/README.md @@ -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 diff --git a/2- javascript/1-js-variables/index.html b/2- javascript/1-js-variables/index.html new file mode 100644 index 0000000..e71f366 --- /dev/null +++ b/2- javascript/1-js-variables/index.html @@ -0,0 +1,18 @@ + + + + + + + + + +
+ +
+
+ + + diff --git a/2- javascript/1-js-variables/main.css b/2- javascript/1-js-variables/main.css new file mode 100644 index 0000000..70a3e86 --- /dev/null +++ b/2- javascript/1-js-variables/main.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/1-js-variables/main.js b/2- javascript/1-js-variables/main.js new file mode 100644 index 0000000..2be4586 --- /dev/null +++ b/2- javascript/1-js-variables/main.js @@ -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(){ + +}) \ No newline at end of file diff --git a/2- javascript/1-js-variables/reset.css b/2- javascript/1-js-variables/reset.css new file mode 100644 index 0000000..af5d7e5 --- /dev/null +++ b/2- javascript/1-js-variables/reset.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/10-bank-accounts/README.md b/2- javascript/10-bank-accounts/README.md new file mode 100644 index 0000000..75e0a87 --- /dev/null +++ b/2- javascript/10-bank-accounts/README.md @@ -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 + diff --git a/2- javascript/10-bank-accounts/bank.js b/2- javascript/10-bank-accounts/bank.js new file mode 100644 index 0000000..e69de29 diff --git a/2- javascript/11-bank-accounts-dom/README.md b/2- javascript/11-bank-accounts-dom/README.md new file mode 100644 index 0000000..e2c4c94 --- /dev/null +++ b/2- javascript/11-bank-accounts-dom/README.md @@ -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() +``` diff --git a/2- javascript/11-bank-accounts-dom/application.js b/2- javascript/11-bank-accounts-dom/application.js new file mode 100644 index 0000000..3722ac0 --- /dev/null +++ b/2- javascript/11-bank-accounts-dom/application.js @@ -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 diff --git a/2- javascript/11-bank-accounts-dom/index.html b/2- javascript/11-bank-accounts-dom/index.html new file mode 100644 index 0000000..7b03f45 --- /dev/null +++ b/2- javascript/11-bank-accounts-dom/index.html @@ -0,0 +1,39 @@ + + + + + + + + +
+
+

Make An Account

+

+

+ +
+
+

Bank Accounts

+ +
+
+ +
+
+
+ +
+ + +
+
+
+ + +
+
+ +
+ + diff --git a/2- javascript/11-bank-accounts-dom/main.css b/2- javascript/11-bank-accounts-dom/main.css new file mode 100644 index 0000000..eede69f --- /dev/null +++ b/2- javascript/11-bank-accounts-dom/main.css @@ -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; +} diff --git a/2- javascript/2-js-objects/README.md b/2- javascript/2-js-objects/README.md new file mode 100644 index 0000000..4f25520 --- /dev/null +++ b/2- javascript/2-js-objects/README.md @@ -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. diff --git a/2- javascript/2-js-objects/index.html b/2- javascript/2-js-objects/index.html new file mode 100644 index 0000000..a9c0268 --- /dev/null +++ b/2- javascript/2-js-objects/index.html @@ -0,0 +1,18 @@ + + + + + + + + + +
+ +
+
+ + + diff --git a/2- javascript/2-js-objects/main.css b/2- javascript/2-js-objects/main.css new file mode 100644 index 0000000..70a3e86 --- /dev/null +++ b/2- javascript/2-js-objects/main.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/2-js-objects/main.js b/2- javascript/2-js-objects/main.js new file mode 100644 index 0000000..2be4586 --- /dev/null +++ b/2- javascript/2-js-objects/main.js @@ -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(){ + +}) \ No newline at end of file diff --git a/2- javascript/2-js-objects/reset.css b/2- javascript/2-js-objects/reset.css new file mode 100644 index 0000000..af5d7e5 --- /dev/null +++ b/2- javascript/2-js-objects/reset.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/3-conditionals-and-for-loops/README.md b/2- javascript/3-conditionals-and-for-loops/README.md new file mode 100644 index 0000000..7234386 --- /dev/null +++ b/2- javascript/3-conditionals-and-for-loops/README.md @@ -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. diff --git a/2- javascript/3-conditionals-and-for-loops/index.html b/2- javascript/3-conditionals-and-for-loops/index.html new file mode 100644 index 0000000..fb61bd5 --- /dev/null +++ b/2- javascript/3-conditionals-and-for-loops/index.html @@ -0,0 +1,18 @@ + + + + + + + + + +
+ +
+
+ + + diff --git a/2- javascript/3-conditionals-and-for-loops/main.css b/2- javascript/3-conditionals-and-for-loops/main.css new file mode 100644 index 0000000..70a3e86 --- /dev/null +++ b/2- javascript/3-conditionals-and-for-loops/main.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/3-conditionals-and-for-loops/main.js b/2- javascript/3-conditionals-and-for-loops/main.js new file mode 100644 index 0000000..e80d568 --- /dev/null +++ b/2- javascript/3-conditionals-and-for-loops/main.js @@ -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++){ + + } + +}) \ No newline at end of file diff --git a/2- javascript/3-conditionals-and-for-loops/reset.css b/2- javascript/3-conditionals-and-for-loops/reset.css new file mode 100644 index 0000000..af5d7e5 --- /dev/null +++ b/2- javascript/3-conditionals-and-for-loops/reset.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/4-while-loops-and-for-each/README.md b/2- javascript/4-while-loops-and-for-each/README.md new file mode 100644 index 0000000..c8aa7f2 --- /dev/null +++ b/2- javascript/4-while-loops-and-for-each/README.md @@ -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| diff --git a/2- javascript/4-while-loops-and-for-each/index.html b/2- javascript/4-while-loops-and-for-each/index.html new file mode 100644 index 0000000..ee570bc --- /dev/null +++ b/2- javascript/4-while-loops-and-for-each/index.html @@ -0,0 +1,18 @@ + + + + + + + + + +
+ +
+
+ + + diff --git a/2- javascript/4-while-loops-and-for-each/main.css b/2- javascript/4-while-loops-and-for-each/main.css new file mode 100644 index 0000000..70a3e86 --- /dev/null +++ b/2- javascript/4-while-loops-and-for-each/main.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/4-while-loops-and-for-each/main.js b/2- javascript/4-while-loops-and-for-each/main.js new file mode 100644 index 0000000..2be4586 --- /dev/null +++ b/2- javascript/4-while-loops-and-for-each/main.js @@ -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(){ + +}) \ No newline at end of file diff --git a/2- javascript/4-while-loops-and-for-each/reset.css b/2- javascript/4-while-loops-and-for-each/reset.css new file mode 100644 index 0000000..af5d7e5 --- /dev/null +++ b/2- javascript/4-while-loops-and-for-each/reset.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/5-jquery-basics/README.md b/2- javascript/5-jquery-basics/README.md new file mode 100644 index 0000000..a2aec77 --- /dev/null +++ b/2- javascript/5-jquery-basics/README.md @@ -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? diff --git a/2- javascript/5-jquery-basics/index.html b/2- javascript/5-jquery-basics/index.html new file mode 100644 index 0000000..d781b5b --- /dev/null +++ b/2- javascript/5-jquery-basics/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + +
+
+
+

The box color is

+
+
+
+

The box color is

+
+
+
+

The box color is

+
+
+ + + + diff --git a/2- javascript/5-jquery-basics/main.css b/2- javascript/5-jquery-basics/main.css new file mode 100644 index 0000000..9207b7a --- /dev/null +++ b/2- javascript/5-jquery-basics/main.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/5-jquery-basics/main.js b/2- javascript/5-jquery-basics/main.js new file mode 100644 index 0000000..83d620a --- /dev/null +++ b/2- javascript/5-jquery-basics/main.js @@ -0,0 +1,6 @@ +// all jquery dom actions can only be called inside document ready. + +$(document).ready(function(){ + + +}) \ No newline at end of file diff --git a/2- javascript/5-jquery-basics/reset.css b/2- javascript/5-jquery-basics/reset.css new file mode 100644 index 0000000..af5d7e5 --- /dev/null +++ b/2- javascript/5-jquery-basics/reset.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/6-more-jquery-basics/README.md b/2- javascript/6-more-jquery-basics/README.md new file mode 100644 index 0000000..96c107d --- /dev/null +++ b/2- javascript/6-more-jquery-basics/README.md @@ -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 diff --git a/2- javascript/6-more-jquery-basics/application.js b/2- javascript/6-more-jquery-basics/application.js new file mode 100644 index 0000000..d273115 --- /dev/null +++ b/2- javascript/6-more-jquery-basics/application.js @@ -0,0 +1,5 @@ +(function($, window, document) { + $(function(){ + //your code here + }); +}(window.jQuery, window, document)); diff --git a/2- javascript/6-more-jquery-basics/index.html b/2- javascript/6-more-jquery-basics/index.html new file mode 100644 index 0000000..6c33dda --- /dev/null +++ b/2- javascript/6-more-jquery-basics/index.html @@ -0,0 +1,15 @@ + + + + + + + + +
+ + +
+ + + diff --git a/2- javascript/6-more-jquery-basics/main.css b/2- javascript/6-more-jquery-basics/main.css new file mode 100644 index 0000000..05c95fb --- /dev/null +++ b/2- javascript/6-more-jquery-basics/main.css @@ -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; +} diff --git a/2- javascript/7-simple-loops/README.md b/2- javascript/7-simple-loops/README.md new file mode 100644 index 0000000..477b899 --- /dev/null +++ b/2- javascript/7-simple-loops/README.md @@ -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. diff --git a/2- javascript/7-simple-loops/simple-loops.js b/2- javascript/7-simple-loops/simple-loops.js new file mode 100644 index 0000000..5de108c --- /dev/null +++ b/2- javascript/7-simple-loops/simple-loops.js @@ -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. \ No newline at end of file diff --git a/2- javascript/8-todo-list/README.md b/2- javascript/8-todo-list/README.md new file mode 100644 index 0000000..2adb9ec --- /dev/null +++ b/2- javascript/8-todo-list/README.md @@ -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. diff --git a/2- javascript/8-todo-list/index.html b/2- javascript/8-todo-list/index.html new file mode 100644 index 0000000..7dee44f --- /dev/null +++ b/2- javascript/8-todo-list/index.html @@ -0,0 +1,22 @@ + + + + + + + + + +
+ +
+ + +
+
+
+ + + diff --git a/2- javascript/8-todo-list/main.css b/2- javascript/8-todo-list/main.css new file mode 100644 index 0000000..f08e97e --- /dev/null +++ b/2- javascript/8-todo-list/main.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/8-todo-list/main.js b/2- javascript/8-todo-list/main.js new file mode 100644 index 0000000..f17886f --- /dev/null +++ b/2- javascript/8-todo-list/main.js @@ -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(){ + + +}) \ No newline at end of file diff --git a/2- javascript/8-todo-list/reset.css b/2- javascript/8-todo-list/reset.css new file mode 100644 index 0000000..af5d7e5 --- /dev/null +++ b/2- javascript/8-todo-list/reset.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/9-get-primes/README.md b/2- javascript/9-get-primes/README.md new file mode 100644 index 0000000..cf95efc --- /dev/null +++ b/2- javascript/9-get-primes/README.md @@ -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. diff --git a/2- javascript/9-get-primes/index.html b/2- javascript/9-get-primes/index.html new file mode 100644 index 0000000..89e7485 --- /dev/null +++ b/2- javascript/9-get-primes/index.html @@ -0,0 +1,22 @@ + + + + + + + + + +
+ +
+ + +
+
+
+ + + diff --git a/2- javascript/9-get-primes/main.css b/2- javascript/9-get-primes/main.css new file mode 100644 index 0000000..52b99d4 --- /dev/null +++ b/2- javascript/9-get-primes/main.css @@ -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; +} \ No newline at end of file diff --git a/2- javascript/9-get-primes/main.js b/2- javascript/9-get-primes/main.js new file mode 100644 index 0000000..3d81e4a --- /dev/null +++ b/2- javascript/9-get-primes/main.js @@ -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(){ + + +}) \ No newline at end of file diff --git a/2- javascript/9-get-primes/reset.css b/2- javascript/9-get-primes/reset.css new file mode 100644 index 0000000..af5d7e5 --- /dev/null +++ b/2- javascript/9-get-primes/reset.css @@ -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; +} \ No newline at end of file diff --git a/3-front-end/1-basic-layout/README.md b/3-front-end/1-basic-layout/README.md new file mode 100644 index 0000000..b826fe9 --- /dev/null +++ b/3-front-end/1-basic-layout/README.md @@ -0,0 +1,22 @@ +Basic Layout +============ + +Using HTML and CSS, you are going to construct a skeleton for basic webpage. + +Create a header positioned absolutely to the top of the page. Use HTML 5 semantics, the `
` tag. + +Put a h1 tag inside that says something funny. + +Make a navigation bar, also positioned absolutely, that is colored black. Use HTML5 semantics, the `