├── advanced-algorithm-scripting ├── inventory-update.js ├── symmetric-difference.js └── validate-us-telephone-numbers.js ├── basic-algorithm-scripting ├── arguments-optional.js ├── binary-agents.js ├── boo-who.js ├── caesars-cipher.js ├── check-for-palindromes.js ├── chunky-monkey.js ├── confirm-the-ending.js ├── convert-html-entities.js ├── diff-two-arrays.js ├── dna-pairing.js ├── drop-it.js ├── everything-be-true.js ├── factorialize-a-number.js ├── falsey-bouncer.js ├── find-the-longest-word-in-a-string.js ├── finders-keepers.js ├── missing-letters.js ├── mutations.js ├── pig-latin.js ├── repeat-a-string-repeat-a-string.js ├── return-largest-numbers-in-arrays.js ├── reverse-a-string.js ├── roman-numeral-converter.js ├── search-and-replace.js ├── seek-and-destroy.js ├── slasher-flick.js ├── smallest-common-multiple.js ├── sorted-union.js ├── spinal-tap-case.js ├── steamroller.js ├── sum-all-numbers-in-a-range.js ├── sum-all-odd-fibonacci-numbers.js ├── sum-all-primes.js ├── title-case-a-sentence.js ├── truncate-a-string.js ├── where-art-thou.js └── where-do-i-belong.js ├── calculator ├── index.html ├── js │ └── app.js └── stylesheet │ └── main.css ├── camper-leaderboard ├── css │ ├── .sass-cache │ │ └── f77b9f374ae531ebfd46e62f535a091b4f0cad9e │ │ │ └── main.scssc │ ├── main.css │ ├── main.css.map │ └── main.scss ├── index.html └── js │ └── app.js ├── camper-news ├── css │ └── main.css ├── index.html └── js │ └── app.js ├── intermediate-algorithm-scripting ├── make-a-person.js ├── map-the-debris.js └── pairwise.js ├── local-weather ├── images │ ├── broken.jpg │ ├── clear.jpg │ ├── def.jpg │ ├── drizzle.jpg │ ├── fog.jpg │ ├── rain.jpg │ ├── rainbow.ico │ ├── snow.jpg │ └── thunder.jpg ├── index.html ├── js │ └── weather.js └── stylesheet │ └── stylesheet.css ├── markdown-previewer ├── css │ ├── .sass-cache │ │ └── 8856f0c5aaee073b264039d1bd51939a93519c77 │ │ │ └── main.scssc │ ├── main.css │ ├── main.css.map │ └── main.scss ├── index.html └── js │ └── app.js ├── personal-portfolio-webpage ├── images │ ├── bottom.jpg │ ├── clock.png │ ├── quote.png │ ├── top.jpg │ ├── twitch.png │ └── weather.png ├── index.html └── stylesheet │ └── main.css ├── pomodoro-clock ├── images │ ├── bomb.ico │ └── clock.jpg ├── index.html ├── js │ └── countdown.js └── stylesheet │ └── stylesheet.css ├── random-quote-machine ├── images │ ├── r2d2.ico │ └── space.jpg ├── index.html ├── index.jade ├── js │ ├── quotes-coffee.coffee │ ├── quotes-coffee.js │ ├── quotes.js │ └── twitter.js ├── old-index.html └── stylesheet │ └── stylesheet.css ├── readme.md ├── recipe-box ├── css │ ├── .sass-cache │ │ └── df1f54489ef0864290c692c342ff206c7db98d9f │ │ │ └── main.scssc │ ├── main.css │ ├── main.css.map │ └── main.scss ├── index.html └── js │ └── app.js ├── screenshots ├── calculator-desktop.png ├── front-desktop.png ├── leaderboard-desktop.png ├── local-desktop.png ├── markdown-desktop.png ├── news-desktop.png ├── pomodoro-desktop.png ├── random-desktop.png ├── recipe-desktop.png ├── tic-desktop.png ├── twitch-desktop.png └── wikipedia-desktop.png ├── tic-tac-toe ├── css │ └── main.css ├── index.html └── js │ └── tictactoe.js ├── twitch-tv ├── images │ ├── logo.png │ ├── no.png │ ├── search.png │ └── twitch.ico ├── index.html ├── js │ └── twitch.js └── stylesheet │ └── stylesheet.css └── wikipedia-viewer ├── css └── main.css ├── index.html └── js └── app.js /advanced-algorithm-scripting/inventory-update.js: -------------------------------------------------------------------------------- 1 | // Compare and update inventory stored in a 2d array against a second 2d array of a fresh delivery. 2 | // Update current inventory item quantity, and if an item cannot be found, add the new item and quantity into the inventory array in alphabetical order. 3 | function inventory(arr1, arr2) { 4 | var stock = {}; 5 | var newArr = []; 6 | arr1.forEach(function(a) { 7 | stock[a[1]] = a[0] || 0; 8 | }); 9 | arr2.forEach(function(b) { 10 | if (!stock[b[1]]) { 11 | stock[b[1]] = 0; 12 | } 13 | stock[b[1]] += b[0]; 14 | }); 15 | 16 | Object.keys(stock).forEach(function(info) { 17 | newArr.push([stock[info], info]); 18 | }); 19 | return newArr.sort(function(x, y) { 20 | if (x[1] < y[1]) { 21 | return -1; 22 | } else if (x[1] > y[1]) { 23 | return 1; 24 | } else { 25 | return 0; 26 | } 27 | }); 28 | } 29 | 30 | var curInv = [ 31 | [21, 'Bowling Ball'], 32 | [2, 'Dirty Sock'], 33 | [1, 'Hair Pin'], 34 | [5, 'Microphone'] 35 | ]; 36 | 37 | var newInv = [ 38 | [2, 'Hair Pin'], 39 | [3, 'Half-Eaten Apple'], 40 | [67, 'Bowling Ball'], 41 | [7, 'Toothpaste'] 42 | ]; 43 | 44 | inventory(curInv, newInv); -------------------------------------------------------------------------------- /advanced-algorithm-scripting/symmetric-difference.js: -------------------------------------------------------------------------------- 1 | // Create a function that takes two or more arrays and returns an array of the symmetric difference of the provided arrays. 2 | function sym(args) { 3 | var arr = Array.prototype.slice.call(arguments); 4 | return arr.reduce(function(arrFirst, arrNext) { 5 | var one = arrFirst.filter(function(a) { 6 | return arrNext.indexOf(a) === -1; 7 | }); 8 | var two = arrNext.filter(function(a) { 9 | return arrFirst.indexOf(a) === -1; 10 | }); 11 | return one.concat(two); 12 | }).reduce(function(a,b) { 13 | if(a.indexOf(b) < 0) { 14 | a.push(b); 15 | } 16 | return a; 17 | }, []); 18 | } 19 | 20 | sym([1, 2, 3], [5, 2, 1, 4]); -------------------------------------------------------------------------------- /advanced-algorithm-scripting/validate-us-telephone-numbers.js: -------------------------------------------------------------------------------- 1 | // Return true if the passed string is a valid US phone number. 2 | function telephoneCheck(str) { 3 | var exp = /^1?(-|\s)?(\()?\d{3}(\))?(-|\s)?\d{3}(-|\s)?\d{4}$/; 4 | return exp.test(str); 5 | } 6 | 7 | telephoneCheck("555-555-5555"); -------------------------------------------------------------------------------- /basic-algorithm-scripting/arguments-optional.js: -------------------------------------------------------------------------------- 1 | // Create a function that sums two arguments together. 2 | // If only one argument is provided, return a function that expects one additional argument and will return the sum. 3 | function add() { 4 | var args = Array.prototype.slice.call(arguments); 5 | if (args.length !== 2) { 6 | if (typeof args[0] !== 'number') return undefined; 7 | return function(a) { 8 | if (typeof a !== 'number') return undefined; 9 | return (a + args[0]); 10 | }; 11 | } else { 12 | if (typeof args[1] !== "number") return undefined; 13 | return args[0] + args[1]; 14 | } 15 | } 16 | 17 | add(2,3); -------------------------------------------------------------------------------- /basic-algorithm-scripting/binary-agents.js: -------------------------------------------------------------------------------- 1 | // Return an English translated sentence of the passed binary string. 2 | function binaryAgent(str) { 3 | var newStr = ''; 4 | arr = str.split(' '); 5 | for (var i = 0; i < arr.length; i++) { 6 | newStr += String.fromCharCode(parseInt(arr[i], 2)); 7 | } 8 | return newStr; 9 | } 10 | 11 | binaryAgent('01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111'); -------------------------------------------------------------------------------- /basic-algorithm-scripting/boo-who.js: -------------------------------------------------------------------------------- 1 | // Check if a value is classified as a boolean primitive. 2 | // Return true or false. 3 | function boo(bool) { 4 | return typeof bool === 'boolean'; 5 | } 6 | 7 | boo(null); -------------------------------------------------------------------------------- /basic-algorithm-scripting/caesars-cipher.js: -------------------------------------------------------------------------------- 1 | function rot13(str) { 2 | var arr = str.split(''); 3 | var newArr = []; 4 | var letterCode = 0; 5 | arr.forEach(function(letter) { 6 | if (letter.charCodeAt() < 65 || letter.charCodeAt() > 90) { 7 | letterCode = letter.charCodeAt(); 8 | } else { 9 | if (letter.charCodeAt() + 13 > 90 ) { 10 | letterCode = letter.charCodeAt() - 13; 11 | } else { 12 | letterCode = letter.charCodeAt() + 13; 13 | } 14 | } 15 | newArr.push(String.fromCharCode(letterCode)); 16 | }); 17 | return newArr.join(''); 18 | } 19 | 20 | rot13("SERR PBQR PNZC"); -------------------------------------------------------------------------------- /basic-algorithm-scripting/check-for-palindromes.js: -------------------------------------------------------------------------------- 1 | // Return true if the given string is a palindrome. 2 | // Otherwise, return false. 3 | function palindrome(str) { 4 | var strStripped = str.replace(/[\W_]/g, '').toLowerCase(); 5 | var strReverse = noSpace.split('').reverse().join(''); 6 | return strStripped === strReverse ? true : false; 7 | } 8 | 9 | palindrome("eye"); -------------------------------------------------------------------------------- /basic-algorithm-scripting/chunky-monkey.js: -------------------------------------------------------------------------------- 1 | // Write a function that splits an array (first argument) into groups the length of size (second argument) and returns them as a multidimensional array. 2 | function chunk(arr, size) { 3 | var newArr = []; 4 | for (var i = 0; i < arr.length; i += size) { 5 | newArr.push(arr.slice(i, i + size)); 6 | } 7 | return newArr; 8 | } 9 | 10 | chunk(['a', 'b', 'c', 'd'], 2); -------------------------------------------------------------------------------- /basic-algorithm-scripting/confirm-the-ending.js: -------------------------------------------------------------------------------- 1 | // Check if a string (first argument) ends with the given target string (second argument). 2 | function confirmEnding(str, target) { 3 | var length = target.length; 4 | return str.substr(-length) === target ? true : false; 5 | } 6 | 7 | confirmEnding('Bastian', 'n'); -------------------------------------------------------------------------------- /basic-algorithm-scripting/convert-html-entities.js: -------------------------------------------------------------------------------- 1 | // Convert the characters "&", "<", ">", '"' (double quote), and "'" (apostrophe), in a string to their corresponding HTML entities. 2 | function convert(str) { 3 | str = str.replace(/&/g, "&"); 4 | str = str.replace(//g, ">"); 6 | str = str.replace(/"/g, """); 7 | str = str.replace(/'/g, "'"); 8 | return str; 9 | } 10 | 11 | convert('Dolce & Gabbana'); -------------------------------------------------------------------------------- /basic-algorithm-scripting/diff-two-arrays.js: -------------------------------------------------------------------------------- 1 | // Compare two arrays and return a new array with any items not found in both of the original arrays. 2 | function diff(arr1, arr2) { 3 | var newArr = []; 4 | arr1.filter( function (num) { 5 | if (arr2.indexOf(num) === -1) { 6 | arr1.concat(arr2); 7 | newArr.push(num); 8 | } 9 | }); 10 | arr2.filter( function (num) { 11 | if (arr1.indexOf(num) === -1) { 12 | arr2.concat(arr1); 13 | newArr.push(num); 14 | } 15 | }); 16 | return newArr; 17 | } 18 | 19 | diff([1, 2, 3, 5], [1, 2, 3, 4, 5]); -------------------------------------------------------------------------------- /basic-algorithm-scripting/dna-pairing.js: -------------------------------------------------------------------------------- 1 | // The DNA strand is missing the pairing element. 2 | // Match each character with the missing element and return the results as a 2d array. 3 | function pair(str) { 4 | var newStr = str.split(''); 5 | var arr = []; 6 | for (var i = 0; i < newStr.length; i++) { 7 | if (newStr[i] === 'A') { 8 | arr.push(['A', 'T']); 9 | } else if (newStr[i] === 'T') { 10 | arr.push(['T', 'A']); 11 | } else if (newStr[i] === 'C') { 12 | arr.push(['C', 'G']); 13 | } else { 14 | arr.push(['G', 'C']); 15 | } 16 | } 17 | return arr; 18 | } 19 | 20 | pair("GCG"); -------------------------------------------------------------------------------- /basic-algorithm-scripting/drop-it.js: -------------------------------------------------------------------------------- 1 | // Drop the elements of an array (first argument), starting from the front, until the predicate (second argument) returns true. 2 | function drop(arr, func) { 3 | var newArr = []; 4 | for (var i = 0; i < arr.length; i++) { 5 | if (func(arr[i])) newArr.push(arr[i]); 6 | } 7 | return newArr; 8 | } 9 | 10 | drop([1, 2, 3], function(n) {return n < 3; }); -------------------------------------------------------------------------------- /basic-algorithm-scripting/everything-be-true.js: -------------------------------------------------------------------------------- 1 | // Check if the predicate (second argument) returns truthy (defined) for all elements of a collection (first argument). 2 | function every(collection, pre) { 3 | for (var i = 0; i < collection.length; i++) { 4 | return collection[i].hasOwnProperty(pre) ? true : false; 5 | } 6 | } 7 | 8 | every([{'user': 'Tinky-Winky', 'sex': 'male'}, {'user': 'Dipsy', 'sex': 'male'}, {'user': 'Laa-Laa', 'sex': 'female'}, {'user': 'Po', 'sex': 'female'}], 'sex'); -------------------------------------------------------------------------------- /basic-algorithm-scripting/factorialize-a-number.js: -------------------------------------------------------------------------------- 1 | // Return the factorial of the provided integer. 2 | function factorialize(num) { 3 | var total = num; 4 | if (num === 0) { 5 | return 1; 6 | } else { 7 | for (var i = 1; i < num; i++) { 8 | total *= i; 9 | } 10 | return total; 11 | } 12 | } 13 | 14 | factorialize(5, ''); -------------------------------------------------------------------------------- /basic-algorithm-scripting/falsey-bouncer.js: -------------------------------------------------------------------------------- 1 | // Remove all falsey values from an array. 2 | function bouncer(arr) { 3 | newArr = []; 4 | for (var i = 0; i < arr.length; i++) { 5 | if (arr[i]) newArr.push(arr[i]); 6 | } 7 | return newArr; 8 | } 9 | 10 | bouncer([7, 'ate', '', false, 9]); -------------------------------------------------------------------------------- /basic-algorithm-scripting/find-the-longest-word-in-a-string.js: -------------------------------------------------------------------------------- 1 | // Return the length of the longest word in the provided sentence. 2 | function findLongestWord(str) { 3 | var findArray = str.split(' '); 4 | findArray.sort(function (a, b) { 5 | return b.length - a.length; 6 | }); 7 | return findArray[0].length; 8 | } 9 | 10 | findLongestWord('The quick brown fox jumped over the lazy dog'); -------------------------------------------------------------------------------- /basic-algorithm-scripting/finders-keepers.js: -------------------------------------------------------------------------------- 1 | // Create a function that looks through an array (first argument) and returns the first element in the array that passes a truth test (second argument). 2 | function find(arr, func) { 3 | var num = 0; 4 | for (var i = 0; i < arr.length; i++) { 5 | if (func(arr[i])) { 6 | num = arr[i]; 7 | return num; 8 | } 9 | } 10 | } 11 | 12 | find([1, 2, 3, 4], function(num){ return num % 2 === 0; }); -------------------------------------------------------------------------------- /basic-algorithm-scripting/missing-letters.js: -------------------------------------------------------------------------------- 1 | // Find the missing letter in the passed letter range and return it. 2 | function fearNotLetter(str) { 3 | var letter = str.charCodeAt(0); 4 | for (var i = 1; i < str.length; i++) { 5 | var next = str.charCodeAt(i); 6 | if (letter === next - 1) { 7 | letter = next; 8 | } else { 9 | return String.fromCharCode(letter + 1); 10 | } 11 | } 12 | return undefined; 13 | } 14 | 15 | fearNotLetter('abce'); -------------------------------------------------------------------------------- /basic-algorithm-scripting/mutations.js: -------------------------------------------------------------------------------- 1 | // Return true if the string in the first element of the array contains all of the letters of the string in the second element of the array. 2 | function mutation(arr) { 3 | var arr1 = arr[0].toLowerCase().split(''); 4 | var arr2 = arr[1].toLowerCase().split(''); 5 | for (var i = 0; i < arr2.length; i++) { 6 | if (arr1.indexOf(arr2[i]) === - 1) return false; 7 | } 8 | return true; 9 | } 10 | 11 | mutation(['hello', 'hey']); -------------------------------------------------------------------------------- /basic-algorithm-scripting/pig-latin.js: -------------------------------------------------------------------------------- 1 | // Translate the provided string to pig latin. 2 | function translate(str) { 3 | var vowels = ['a', 'e', 'i', 'o', 'u']; 4 | for (var i = 0; i < vowels.length; i++) { 5 | if (str.charAt(0) === vowels[i]) return str + 'way'; 6 | } 7 | for (var j = 1; j < str.length; j++) { 8 | for (i = 0; i 0; i) { 5 | if (i <= 49 && i >= 40) { 6 | roman += 'XL'; 7 | i -= 40; 8 | } else if (i <= 39 && i >= 30 ) { 9 | roman += 'XXX'; 10 | i -= 30; 11 | } else if (i <= 29 && i >= 20 ) { 12 | roman += 'XX'; 13 | i -= 20; 14 | } else if (i <= 19 && i >= 10 ) { 15 | roman += 'X'; 16 | i -=10; 17 | } else if (i >= 9) { 18 | roman += 'IX'; 19 | i -= 9; 20 | } else if (i >= 5) { 21 | roman += 'V'; 22 | i -= 5; 23 | } else if (i >= 4) { 24 | roman += 'IV'; 25 | i -= 4; 26 | } else { 27 | roman += 'I'; 28 | i -= 1; 29 | } 30 | } 31 | return roman; 32 | } 33 | 34 | convert(36); -------------------------------------------------------------------------------- /basic-algorithm-scripting/search-and-replace.js: -------------------------------------------------------------------------------- 1 | // Perform a search and replace on the sentence using the arguments provided and return the new sentence. 2 | function replace(str, before, after) { 3 | str = str.split(' '); 4 | for (var i = 0; i < str.length; i++) { 5 | if (str[i] === before) { 6 | if (str[i].charAt(0) === str[i].charAt(0).toUpperCase()) { 7 | str[i] = after.charAt(0).toUpperCase() + after.substring(1); 8 | } else { 9 | str[i] = after; 10 | } 11 | } 12 | } 13 | return str.join(' '); 14 | } 15 | 16 | replace("A quick brown fox jumped over the lazy dog", "jumped", "leaped"); -------------------------------------------------------------------------------- /basic-algorithm-scripting/seek-and-destroy.js: -------------------------------------------------------------------------------- 1 | // You will be provided with an initial array (the first argument in the destroyer function), followed by one or more arguments. 2 | // Remove all elements from the initial array that are of the same value as these arguments. 3 | function destroyer(arr) { 4 | var destroy = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | destroy.push(arguments[i]); 7 | } 8 | function checkList (search) { 9 | for (var j = 0; j < destroy.length; j++) { 10 | return arr[search] === destroy[j] ? true : false; 11 | } 12 | } 13 | return arr.filter(checkList); 14 | } 15 | 16 | destroyer([1, 2, 3, 1, 2, 3], 2, 3); -------------------------------------------------------------------------------- /basic-algorithm-scripting/slasher-flick.js: -------------------------------------------------------------------------------- 1 | // Return the remaining elements of an array after chopping off n elements from the head. 2 | function slasher(arr, howMany) { 3 | return arr.slice(howMany); 4 | } 5 | 6 | slasher([1, 2, 3], 2); -------------------------------------------------------------------------------- /basic-algorithm-scripting/smallest-common-multiple.js: -------------------------------------------------------------------------------- 1 | // Find the smallest number that is evenly divisible by all numbers in the provided range. 2 | function smallestCommons(arr) { 3 | var newArr = arr.sort(); 4 | var num = newArr[1]; 5 | while (true) { 6 | var common = true; 7 | for (var i = newArr[0]; i <= newArr[1]; i++) { 8 | common = common && (num % i === 0); 9 | } 10 | if (common) return num; 11 | num += newArr[1]; 12 | } 13 | } 14 | 15 | smallestCommons([1,5]); -------------------------------------------------------------------------------- /basic-algorithm-scripting/sorted-union.js: -------------------------------------------------------------------------------- 1 | // Write a function that takes two or more arrays and returns a new array of unique values in the order of the original provided arrays. 2 | function unite(arr1, arr2, arr3) { 3 | var newArr = arr1.concat(arr2).concat(arr3); 4 | var uniqueNum = newArr.filter(function (num, pos) { 5 | return newArr.indexOf(num) === pos; 6 | }); 7 | return uniqueNum; 8 | } 9 | 10 | unite([1, 2, 3], [5, 2, 1, 4], [2, 1]); -------------------------------------------------------------------------------- /basic-algorithm-scripting/spinal-tap-case.js: -------------------------------------------------------------------------------- 1 | // Convert a string to spinal case. 2 | // Spinal case is all-lowercase-words-joined-by-dashes. 3 | function spinalCase(str) { 4 | var newStr = str.split(' ').join('-').split('_').join('-'); 5 | newStr = newStr.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); 6 | return newStr; 7 | } 8 | 9 | spinalCase('This Is Spinal Tap'); -------------------------------------------------------------------------------- /basic-algorithm-scripting/steamroller.js: -------------------------------------------------------------------------------- 1 | // Flatten a nested array. 2 | // You must account for varying levels of nesting. 3 | function checker(a, b) { 4 | return a.concat((Array.isArray(b)) ? steamroller(b) : b); 5 | } 6 | 7 | function steamroller(arr) { 8 | return arr.reduce(checker, []); 9 | } 10 | 11 | steamroller([1, [2], [3, [[4]]]]); -------------------------------------------------------------------------------- /basic-algorithm-scripting/sum-all-numbers-in-a-range.js: -------------------------------------------------------------------------------- 1 | // We'll pass you an array of two numbers. 2 | // Return the sum of those two numbers and all numbers between them. 3 | function sumAll(arr) { 4 | if (arr[1] < arr[0]) arr = [arr[1], arr[0]]; 5 | var sum = 0; 6 | for (var i = arr[0]; i <= arr[1]; i++) { 7 | sum += i; 8 | } 9 | return sum; 10 | } 11 | 12 | sumAll([1, 4]); -------------------------------------------------------------------------------- /basic-algorithm-scripting/sum-all-odd-fibonacci-numbers.js: -------------------------------------------------------------------------------- 1 | // Return the sum of all odd Fibonacci numbers up to and including the passed number if it is a Fibonacci number. 2 | function sumFibs(num) { 3 | var i = 1; 4 | var j = 2; 5 | var k = 0; 6 | var sum = 2; 7 | while (k <= num ) { 8 | if (k % 2 === 1) sum = sum + k; 9 | k = i + j; 10 | i = j; 11 | j = k; 12 | } 13 | return sum; 14 | } 15 | 16 | sumFibs(4); -------------------------------------------------------------------------------- /basic-algorithm-scripting/sum-all-primes.js: -------------------------------------------------------------------------------- 1 | // Sum all the prime numbers up to and including the provided number. 2 | function isPrime(testNum) { 3 | if (testNum === 1) return false; 4 | for (var i = 2; i <= testNum; i++) { 5 | if ((testNum % i === 0) && (i !== testNum)) return false; 6 | } 7 | return true; 8 | } 9 | 10 | function sumPrimes(num) { 11 | var sum = 0; 12 | for (var j = 0; j <= num; j++) { 13 | if (isPrime(j)) sum += j; 14 | } 15 | return sum; 16 | } 17 | 18 | sumPrimes(10); -------------------------------------------------------------------------------- /basic-algorithm-scripting/title-case-a-sentence.js: -------------------------------------------------------------------------------- 1 | // Return the provided string with the first letter of each word capitalized. 2 | 3 | function titleCase(str) { 4 | var arr = str.toLowerCase().split(' '); 5 | var newArr = []; 6 | arr.forEach(function(word) { 7 | var capWord = word.charAt(0).toUpperCase() + word.substring(1); 8 | newArr.push(capWord); 9 | }); 10 | return newArr.join(' '); 11 | } 12 | 13 | titleCase("I'm a little tea pot"); -------------------------------------------------------------------------------- /basic-algorithm-scripting/truncate-a-string.js: -------------------------------------------------------------------------------- 1 | // Truncate a string (first argument) if it is longer than the given maximum string length (second argument). 2 | // Return the truncated string with a '...' ending. 3 | function truncateString(str, num) { 4 | var newArr = []; 5 | if (num >= str.length) { 6 | return str; 7 | } else if (num < 3) { 8 | for (var i = 0; i < num; i++) { 9 | newArr.push(str[i]); 10 | } 11 | } else { 12 | for (var j = 0; j <= num - 3; j++) { 13 | newArr.push(str[j]); 14 | } 15 | } 16 | 17 | return newArr.join('').replace(/\s$/, '') + '...'; 18 | } 19 | 20 | truncateString('A-tisket a-tasket A green and yellow basket', 11); -------------------------------------------------------------------------------- /basic-algorithm-scripting/where-art-thou.js: -------------------------------------------------------------------------------- 1 | // Make a function that looks through a list (first argument) and returns an array of all objects that have equivalent property values (second argument). 2 | function where(collection, source) { 3 | var arr = []; 4 | for (var i = 0; i < collection.length; i++) { 5 | if (collection[i].last === source.last) arr.push(collection[i]); 6 | } 7 | return arr; 8 | } 9 | 10 | where([{ first: 'Romeo', last: 'Montague' }, { first: 'Mercutio', last: null }, { first: 'Tybalt', last: 'Capulet' }], { last: 'Capulet' }); -------------------------------------------------------------------------------- /basic-algorithm-scripting/where-do-i-belong.js: -------------------------------------------------------------------------------- 1 | // Return the lowest index at which a value (second argument) should be inserted into a sorted array (first argument). 2 | function getIndexToIns(arr, num) { 3 | arr.sort(function(a, b) { 4 | return a - b; 5 | }); 6 | for (var i = 0; i < arr.length; i++) { 7 | if (arr[i] >= num) return i; 8 | } 9 | return arr.length; 10 | } 11 | 12 | getIndexToIns([40, 60], 50); -------------------------------------------------------------------------------- /calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Calculator 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |
17 | 18 | 21 | 22 | 23 |
24 |
25 | 26 | 27 | 28 | 29 |
30 |
31 | 32 | 33 | 34 | 35 |
36 |
37 | 38 | 39 | 40 | 41 |
42 |
43 | 44 | 45 | 46 |
47 |
48 |
49 | 50 | -------------------------------------------------------------------------------- /calculator/js/app.js: -------------------------------------------------------------------------------- 1 | var app = angular.module('CalculatorApplication', []); 2 | 3 | app.controller('CalculatorController', ['$scope', function($scope) { 4 | var previousNum = 0; 5 | var previousOp = false; 6 | 7 | $scope.clear = function() { 8 | $scope.display = '0'; 9 | $scope.operator = false; 10 | previousNum = '0'; 11 | previousOp = false; 12 | } 13 | 14 | $scope.sign = function() { 15 | $scope.display = parseFloat($scope.display) * -1; 16 | } 17 | 18 | $scope.percent = function() { 19 | $scope.display = parseFloat($scope.display) / 100; 20 | } 21 | 22 | $scope.setOperator = function(operation) { 23 | var current = parseFloat($scope.display); 24 | var previous = parseFloat(previousNum); 25 | 26 | if (previousOp === '/') { 27 | current = previous / current; 28 | } else if (previousOp === '*') { 29 | current *= previous; 30 | } else if (previousOp === '-') { 31 | current = previous - current; 32 | } else if (previousOp === '+') { 33 | current += previous; 34 | } 35 | 36 | previousNum = current; 37 | $scope.display = current; 38 | $scope.operator = operation; 39 | previousOp = false; 40 | } 41 | 42 | $scope.number = function(num) { 43 | if ($scope.operator) { 44 | previousNum = $scope.display; 45 | $scope.display = ''; 46 | previousOp = $scope.operator; 47 | $scope.operator = false; 48 | } 49 | 50 | if (num === '.' && $scope.display.indexOf('.') !== -1) { 51 | return; 52 | } 53 | 54 | if ($scope.display === '0') { 55 | $scope.display = ''; 56 | } 57 | 58 | $scope.display += num; 59 | } 60 | 61 | $scope.clear(); 62 | }]); -------------------------------------------------------------------------------- /calculator/stylesheet/main.css: -------------------------------------------------------------------------------- 1 | /* Background image */ 2 | body { 3 | background-image: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/retina_wood.png'); 4 | } 5 | 6 | /* Chrome blue outline */ 7 | button:focus { 8 | outline: 0; 9 | } 10 | 11 | /* Common properties */ 12 | .calulator, 13 | .display, 14 | .button { 15 | cursor: pointer; 16 | } 17 | 18 | .display, 19 | .button { 20 | font-family: 'Roboto', Helvetica, sans-serif; 21 | font-weight: 100; 22 | border: 0; 23 | } 24 | 25 | /* Main div */ 26 | .calculator { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | bottom: 0; 31 | left: 0; 32 | margin: auto; 33 | height: 316px; 34 | width: 228px; 35 | background: #000000; 36 | } 37 | 38 | /* Display calculation */ 39 | .display { 40 | box-sizing: border-box; 41 | display: block; 42 | width: inherit; 43 | margin-top: 28px; 44 | padding: 0 10px; 45 | background: #000000; 46 | color: #FFFFFF; 47 | font-size: 45px; 48 | text-align: right; 49 | } 50 | 51 | /* All buttons */ 52 | .button { 53 | height: 47px; 54 | width: 57px; 55 | float: left; 56 | padding: 2px 0 3px 0; 57 | background: #E0E0E0; 58 | font-size: 22px; 59 | } 60 | 61 | .button:active { 62 | background: #BABABA; 63 | } 64 | 65 | /* Top row - Clear, sign, percentage */ 66 | .top { 67 | background: #D6D6D6; 68 | } 69 | 70 | .top:active { 71 | background: #B0B0B0; 72 | } 73 | 74 | /* Right column - All operators */ 75 | .operator { 76 | background: #FF8C00; 77 | color: #FFFFFF; 78 | font-size: 28px; 79 | } 80 | 81 | .operator:active { 82 | background: #B36200; 83 | } 84 | 85 | /* Decimal was too small */ 86 | .decimal { 87 | font-weight: 400; 88 | } 89 | 90 | /* Adding border radius */ 91 | .calculator { 92 | border-radius: 6px; 93 | } 94 | 95 | .equal { 96 | border-bottom-right-radius: 6px; 97 | } 98 | 99 | .double { 100 | width: 114px; 101 | border-bottom-left-radius: 6px; 102 | } 103 | -------------------------------------------------------------------------------- /camper-leaderboard/css/.sass-cache/f77b9f374ae531ebfd46e62f535a091b4f0cad9e/main.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/camper-leaderboard/css/.sass-cache/f77b9f374ae531ebfd46e62f535a091b4f0cad9e/main.scssc -------------------------------------------------------------------------------- /camper-leaderboard/css/main.css: -------------------------------------------------------------------------------- 1 | #freecodecamp table { 2 | margin-top: 16px; } 3 | #freecodecamp img { 4 | height: 40px; 5 | width: 40px; } 6 | 7 | /*# sourceMappingURL=main.css.map */ 8 | -------------------------------------------------------------------------------- /camper-leaderboard/css/main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAGC,mBAAM;EACL,UAAU,EAAE,IAAI;AAGjB,iBAAI;EACH,MAAM,EARE,IAAI;EASZ,KAAK,EATG,IAAI", 4 | "sources": ["main.scss"], 5 | "names": [], 6 | "file": "main.css" 7 | } -------------------------------------------------------------------------------- /camper-leaderboard/css/main.scss: -------------------------------------------------------------------------------- 1 | $picture: 40px; 2 | 3 | #freecodecamp { 4 | table { 5 | margin-top: 16px; 6 | } 7 | 8 | img { 9 | height: $picture; 10 | width: $picture; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /camper-leaderboard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Camper Leaderboard 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /camper-leaderboard/js/app.js: -------------------------------------------------------------------------------- 1 | var App = React.createClass({ 2 | render: function() { 3 | return ( 4 | 5 | ); 6 | } 7 | }); 8 | 9 | var Leader = React.createClass({ 10 | render: function() { 11 | return ( 12 | 13 | {this.props.rank} 14 | {this.props.name} 15 | {this.props.recentPoints} 16 | {this.props.allPoints} 17 | 18 | ); 19 | } 20 | }); 21 | 22 | var Leaderboard = React.createClass({ 23 | getInitialState: function() { 24 | return {camper: [], sort: 'Recent'} 25 | }, 26 | componentDidMount: function() { 27 | this.recent(); 28 | }, 29 | recent: function() { 30 | var self = this; 31 | $.get('http://fcctop100.herokuapp.com/api/fccusers/top/recent', function(data) { 32 | self.setState({camper: data, sort: 'Recent'}); 33 | }); 34 | }, 35 | alltime: function() { 36 | var self = this; 37 | $.get('http://fcctop100.herokuapp.com/api/fccusers/top/alltime', function(data) { 38 | self.setState({camper: data, sort: 'AllTime'}); 39 | }); 40 | }, 41 | render: function() { 42 | var leaderboard = this.state.camper.map(function(person, idx) { 43 | return ( 44 | 45 | ); 46 | }); 47 | return ( 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | {leaderboard} 59 | 60 |
#Camper NamePoints in past 30 days {this.state.sort === 'Recent' ? '▼' : ''}All time points {this.state.sort === 'AllTime' ? '▼' : ''}
61 | ); 62 | } 63 | }); 64 | 65 | ReactDOM.render(, document.getElementById('freecodecamp')); 66 | -------------------------------------------------------------------------------- /camper-news/css/main.css: -------------------------------------------------------------------------------- 1 | .thumbnail>img { 2 | height: 250px; 3 | } -------------------------------------------------------------------------------- /camper-news/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Camper News 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |

Free Code Camp

29 |

Camper News

30 |
31 |
32 |
33 | Headline Image 34 |
35 |

{{ story.headline | limitTo:headlineLimit }}...

36 |

Shared by {{ story.author.username }}

37 |

{{ story.rank }}

38 |

Read

39 |
40 |
41 |
42 |
43 |
44 | 45 | -------------------------------------------------------------------------------- /camper-news/js/app.js: -------------------------------------------------------------------------------- 1 | var app = angular.module('CamperNewsApplication', ['ngResource']); 2 | 3 | app.factory('Story', ['$resource', function($resource) { 4 | return $resource('http://www.freecodecamp.com/news/hot/:id'); 5 | }]); 6 | 7 | app.controller('StoryController', ['$scope', 'Story', function($scope, Story) { 8 | $scope.stories = []; 9 | $scope.headlineLimit = 30; 10 | 11 | Story.query(function success(data) { 12 | $scope.stories = data; 13 | }, function error(data) { 14 | console.log(data); 15 | }); 16 | }]); -------------------------------------------------------------------------------- /intermediate-algorithm-scripting/make-a-person.js: -------------------------------------------------------------------------------- 1 | // Fill in the object constructor with the methods specified in the tests. 2 | var Person = function(firstAndLast) { 3 | firstName = firstAndLast.split(' ')[0]; 4 | lastName = firstAndLast.split(' ')[1]; 5 | fullName = firstName + ' ' + lastName; 6 | 7 | this.getFirstName = function() { 8 | return firstName; 9 | }; 10 | this.getLastName = function() { 11 | return lastName; 12 | }; 13 | this.getFullName = function() { 14 | return fullName; 15 | }; 16 | this.setFirstName = function(first) { 17 | firstName = first; 18 | }; 19 | this.setLastName = function(last) { 20 | lastName = last; 21 | }; 22 | this.setFullName = function(firstAndLast) { 23 | fullName = firstAndLast; 24 | }; 25 | }; 26 | 27 | var bob = new Person('Bob Ross'); 28 | bob.getFullName(); -------------------------------------------------------------------------------- /intermediate-algorithm-scripting/map-the-debris.js: -------------------------------------------------------------------------------- 1 | // Return a new array that transforms the element's average altitude into their orbital periods. 2 | function orbitalPeriod(arr) { 3 | var GM = 398600.4418; 4 | var earthRadius = 6367.4447; 5 | function calculation(orbit) { 6 | return Math.round((2 * Math.PI) * Math.sqrt(Math.pow(orbit + earthRadius, 3) / GM)); 7 | } 8 | return arr.map(function(space) { 9 | space.orbitalPeriod = calculation(space.avgAlt); 10 | delete space.avgAlt; 11 | return space; 12 | }); 13 | } 14 | 15 | orbitalPeriod([{name : "sputkin", avgAlt : 35873.5553}]); -------------------------------------------------------------------------------- /intermediate-algorithm-scripting/pairwise.js: -------------------------------------------------------------------------------- 1 | // Return the sum of all indices of elements of 'arr' that can be paired with one other element to form a sum that equals the value in the second argument 'arg'. 2 | // If multiple sums are possible, return the smallest sum. 3 | // Once an element has been used, it cannot be reused to pair with another. 4 | function pairwise(arr, arg){ 5 | var newArr = []; 6 | if (arr.length <= 0) { 7 | return 0; 8 | } 9 | arr.forEach(function(num, index) { 10 | for (var i = index + 1; i < arr.length; i++) { 11 | if (arr[i] + num === arg) { 12 | if (newArr.indexOf(i) < 0 && newArr.indexOf(index) < 0) { 13 | newArr.push(index, i); 14 | } 15 | } 16 | } 17 | }); 18 | return newArr.reduce(function(one,two) { 19 | return one + two; 20 | }); 21 | } 22 | 23 | pairwise([1,4,2,3,0,5], 7); -------------------------------------------------------------------------------- /local-weather/images/broken.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/local-weather/images/broken.jpg -------------------------------------------------------------------------------- /local-weather/images/clear.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/local-weather/images/clear.jpg -------------------------------------------------------------------------------- /local-weather/images/def.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/local-weather/images/def.jpg -------------------------------------------------------------------------------- /local-weather/images/drizzle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/local-weather/images/drizzle.jpg -------------------------------------------------------------------------------- /local-weather/images/fog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/local-weather/images/fog.jpg -------------------------------------------------------------------------------- /local-weather/images/rain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/local-weather/images/rain.jpg -------------------------------------------------------------------------------- /local-weather/images/rainbow.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/local-weather/images/rainbow.ico -------------------------------------------------------------------------------- /local-weather/images/snow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/local-weather/images/snow.jpg -------------------------------------------------------------------------------- /local-weather/images/thunder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/local-weather/images/thunder.jpg -------------------------------------------------------------------------------- /local-weather/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Show the Local Weather 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |

16 |

17 | Check Weather 18 | Convert to Celsius 19 | Convert to Fahrenheit 20 |

21 |
22 | 23 |
24 |
25 |

Local Weather for FreeCodeCamp by Thomas Vaeth.

26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /local-weather/js/weather.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $.getJSON('http://ip-api.com/json', function(ipAddress) { 3 | $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + ipAddress.lat + '&lon=' + ipAddress.lon + '&appid=3695e5e886e4a1b016cf201000ec807e', function(forecast) { 4 | var celsius = forecast.main.temp - 273.15; 5 | var fahrenheit = celsius * 1.8 + 32; 6 | var backgroundPic = forecast.weather[0].icon.substring(0, 2); 7 | 8 | var $body = $('body'); 9 | if (backgroundPic === '01' || backgroundPic === '02' || backgroundPic === '03') { 10 | $body.css('background-image', 'url("images/clear.jpg")'); 11 | } else if (backgroundPic === '04') { 12 | $body.css('background-image', 'url("images/broken.jpg")'); 13 | } else if (backgroundPic === '09') { 14 | $body.css('background-image', 'url("images/drizzle.jpg")'); 15 | } else if (backgroundPic === '10') { 16 | $body.css('background-image', 'url("images/rain.jpg")'); 17 | } else if (backgroundPic === '11') { 18 | $body.css('background-image', 'url("images/thunder.jpg")'); 19 | } else if (backgroundPic === '13') { 20 | $body.css('background-image', 'url("images/snow.jpg")'); 21 | } else if (backgroundPic === '50') { 22 | $body.css('background-image', 'url("images/fog.jpg")'); 23 | } else { 24 | $body.css('background-image', 'url("images/def.jpg")'); 25 | } 26 | $('.information').text('Hello ' + ipAddress.city + ' from Seattle.'); 27 | $('.btn-check').on('click', function() { 28 | $('.btn-check').hide(); 29 | $('.btn-celsius').show(); 30 | $('.information').text('The current temperature in ' + ipAddress.city + ' is ' + fahrenheit.toFixed(0) + ' degrees Fahrenheit.'); 31 | }); 32 | $('.btn-celsius').on('click', function() { 33 | $('.btn-celsius').hide(); 34 | $('.btn-fahrenheit').show(); 35 | $('.information').text('The current temperature in ' + ipAddress.city + ' is ' + celsius.toFixed(0) + ' degrees Celsius.'); 36 | }); 37 | $('.btn-fahrenheit').on('click', function() { 38 | $('.btn-fahrenheit').hide(); 39 | $('.btn-celsius').show(); 40 | $('.information').text('The current temperature in ' + ipAddress.city + ' is ' + fahrenheit.toFixed(0) + ' degrees Fahrenheit.'); 41 | }); 42 | }); 43 | }); 44 | }); -------------------------------------------------------------------------------- /local-weather/stylesheet/stylesheet.css: -------------------------------------------------------------------------------- 1 | .btn-celsius, 2 | .btn-fahrenheit { 3 | display: none; 4 | } 5 | 6 | a, 7 | a:focus, 8 | a:hover { 9 | color: #fff; 10 | } 11 | 12 | .btn-default, 13 | .btn-default:hover, 14 | .btn-default:focus { 15 | color: #333; 16 | text-shadow: none; 17 | background-color: #fff; 18 | border: 1px solid #fff; 19 | } 20 | 21 | .information { 22 | font-size: 36px; 23 | font-weight: 600; 24 | } 25 | 26 | html, 27 | body { 28 | height: 100%; 29 | background-size: cover; 30 | background-color: #333; 31 | } 32 | 33 | body { 34 | color: #fff; 35 | text-align: center; 36 | text-shadow: 0 1px 3px rgba(0,0,0,.5); 37 | } 38 | 39 | .site-wrapper { 40 | display: table; 41 | width: 100%; 42 | height: 100%; /* For at least Firefox */ 43 | min-height: 100%; 44 | -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); 45 | box-shadow: inset 0 0 100px rgba(0,0,0,.5); 46 | } 47 | 48 | .site-wrapper-inner { 49 | display: table-cell; 50 | vertical-align: top; 51 | } 52 | 53 | .cover-container { 54 | margin-right: auto; 55 | margin-left: auto; 56 | } 57 | 58 | .inner { 59 | padding: 30px; 60 | } 61 | 62 | .cover { 63 | padding: 0 20px; 64 | } 65 | .cover .btn-lg { 66 | padding: 10px 20px; 67 | font-weight: bold; 68 | } 69 | 70 | .mastfoot { 71 | color: #999; 72 | color: rgba(255,255,255,.5); 73 | } 74 | 75 | @media (min-width: 768px) { 76 | .mastfoot { 77 | position: fixed; 78 | bottom: 0; 79 | } 80 | .site-wrapper-inner { 81 | vertical-align: middle; 82 | } 83 | .mastfoot, 84 | .cover-container { 85 | width: 100%; 86 | } 87 | } 88 | 89 | @media (min-width: 992px) { 90 | .mastfoot, 91 | .cover-container { 92 | width: 700px; 93 | } 94 | } -------------------------------------------------------------------------------- /markdown-previewer/css/.sass-cache/8856f0c5aaee073b264039d1bd51939a93519c77/main.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/markdown-previewer/css/.sass-cache/8856f0c5aaee073b264039d1bd51939a93519c77/main.scssc -------------------------------------------------------------------------------- /markdown-previewer/css/main.css: -------------------------------------------------------------------------------- 1 | #freecodecamp textarea { 2 | margin-top: 20px; } 3 | #freecodecamp .overflow { 4 | margin-top: 20px; 5 | height: 610px; 6 | overflow-y: scroll; } 7 | 8 | /*# sourceMappingURL=main.css.map */ 9 | -------------------------------------------------------------------------------- /markdown-previewer/css/main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAKC,sBAAS;EAJT,UAAU,EAAE,IAAI;AAQhB,uBAAU;EARV,UAAU,EAAE,IAAI;EAUd,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,MAAM", 4 | "sources": ["main.scss"], 5 | "names": [], 6 | "file": "main.css" 7 | } -------------------------------------------------------------------------------- /markdown-previewer/css/main.scss: -------------------------------------------------------------------------------- 1 | @mixin margin-top { 2 | margin-top: 20px; 3 | } 4 | 5 | #freecodecamp { 6 | textarea { 7 | @include margin-top; 8 | } 9 | 10 | .overflow { 11 | @include margin-top; 12 | height: 610px; 13 | overflow-y: scroll; 14 | } 15 | } -------------------------------------------------------------------------------- /markdown-previewer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Markdown Previewer 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /markdown-previewer/js/app.js: -------------------------------------------------------------------------------- 1 | var App = React.createClass({ 2 | render: function() { 3 | return ( 4 | 5 | ); 6 | } 7 | }); 8 | 9 | var MarkupDisplay = React.createClass({ 10 | markup: function() { 11 | var markup = marked(this.props.display, {sanitize: true}); 12 | return {__html: markup}; 13 | }, 14 | render: function() { 15 | return ( 16 |
17 | ); 18 | } 19 | }); 20 | 21 | var InputDisplay = React.createClass({ 22 | input: 'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n * apples\n * oranges\n * pears\n\nNumbered list:\n\n 1. apples\n 2. oranges\n 3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Thomas Vaeth](http://freecodecamp.com/thomasvaeth)*', 23 | getInitialState: function() { 24 | return {input: this.input}; 25 | }, 26 | changeInput: function(e) { 27 | this.setState({input: e.target.value}); 28 | }, 29 | render: function() { 30 | return ( 31 |
32 |
33 | 34 |
35 |
36 | 37 |
38 |
39 | ); 40 | } 41 | }); 42 | 43 | ReactDOM.render(, document.getElementById('freecodecamp')); 44 | -------------------------------------------------------------------------------- /personal-portfolio-webpage/images/bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/personal-portfolio-webpage/images/bottom.jpg -------------------------------------------------------------------------------- /personal-portfolio-webpage/images/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/personal-portfolio-webpage/images/clock.png -------------------------------------------------------------------------------- /personal-portfolio-webpage/images/quote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/personal-portfolio-webpage/images/quote.png -------------------------------------------------------------------------------- /personal-portfolio-webpage/images/top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/personal-portfolio-webpage/images/top.jpg -------------------------------------------------------------------------------- /personal-portfolio-webpage/images/twitch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/personal-portfolio-webpage/images/twitch.png -------------------------------------------------------------------------------- /personal-portfolio-webpage/images/weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/personal-portfolio-webpage/images/weather.png -------------------------------------------------------------------------------- /personal-portfolio-webpage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Thomas Vaeth 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 32 | 33 |
34 |
35 |
36 |
37 |
38 |

Thomas Vaeth

39 |

FreeCodeCamp Student

40 |
41 | 46 |
47 |
48 |
49 |
50 |
51 | 52 |
53 |
54 |
55 |
56 |
57 |
58 |

Random Quote Machine

59 |

User can click a button to show a new random quote. The user can tweet out the quote shown. Built using Bootstrap, HTML, CSS, JavaScript, jQuery, and Twitter API.
The project can be viewed live here.

60 |
61 |
62 | 63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |

Local Weather

74 |

User will be greeted from Seattle. The background picture will be similar to the current weather. The user can view the temperature. Built using Bootstrap, HTML, CSS, JavaScript, jQuery, and OpenWeaterMap API.
The project can be viewed live here.

75 |
76 |
77 | 78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |

Pomodoro Clock

89 |

User will be able to set a pomodoro clock to whatever task and break time needed. Built using Bootstrap, HTML, CSS, JavaScript, and jQuery.
The project can be viewed live here.

90 |
91 |
92 | 93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |

Twitch.tv JSON API

104 |

User will be shown a selected group of Twitch streamers. The remote is searchable and will show the streamers that are online and offline. Built using HTML, CSS, JavaScript, jQuery, and Twitch.tv API.
The project can be viewed live here.

105 |
106 |
107 | 108 |
109 |
110 |
111 |
112 | 113 | 129 |
130 |
131 |
132 |
133 | 142 |

Copyright © Thomas Vaeth 2015. All Rights Reserved

143 |
144 |
145 |
146 |
147 | 148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /personal-portfolio-webpage/stylesheet/main.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Landing Page Bootstrap Theme (http://startbootstrap.com) 3 | * Code licensed under the Apache License v2.0. 4 | * For details, see http://www.apache.org/licenses/LICENSE-2.0. 5 | */ 6 | 7 | body, 8 | html { 9 | width: 100%; 10 | height: 100%; 11 | } 12 | 13 | body, 14 | h1, 15 | h2, 16 | h3, 17 | h4, 18 | h5, 19 | h6 { 20 | font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; 21 | font-weight: 700; 22 | } 23 | 24 | .topnav { 25 | font-size: 14px; 26 | } 27 | 28 | .lead { 29 | font-size: 18px; 30 | font-weight: 400; 31 | } 32 | 33 | .intro-header { 34 | padding-top: 50px; 35 | padding-bottom: 50px; 36 | text-align: center; 37 | color: #f8f8f8; 38 | background: url(../images/top.jpg) no-repeat center center; 39 | background-size: cover; 40 | } 41 | 42 | .intro-message { 43 | position: relative; 44 | padding-top: 20%; 45 | padding-bottom: 20%; 46 | } 47 | 48 | .intro-message > h1 { 49 | margin: 0; 50 | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); 51 | font-size: 5em; 52 | } 53 | 54 | .intro-divider { 55 | width: 400px; 56 | border-top: 1px solid #f8f8f8; 57 | border-bottom: 1px solid rgba(0,0,0,0.2); 58 | } 59 | 60 | .intro-message > h3 { 61 | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); 62 | } 63 | 64 | @media(max-width:767px) { 65 | .intro-message { 66 | padding-bottom: 15%; 67 | } 68 | 69 | .intro-message > h1 { 70 | font-size: 3em; 71 | } 72 | 73 | ul.intro-social-buttons > li { 74 | display: block; 75 | margin-bottom: 20px; 76 | padding: 0; 77 | } 78 | 79 | ul.intro-social-buttons > li:last-child { 80 | margin-bottom: 0; 81 | } 82 | 83 | .intro-divider { 84 | width: 100%; 85 | } 86 | } 87 | 88 | .network-name { 89 | text-transform: uppercase; 90 | font-size: 14px; 91 | font-weight: 400; 92 | letter-spacing: 2px; 93 | } 94 | 95 | .content-section-a { 96 | padding: 50px 0; 97 | background-color: #f8f8f8; 98 | } 99 | 100 | .content-section-b { 101 | padding: 50px 0; 102 | border-top: 1px solid #e7e7e7; 103 | border-bottom: 1px solid #e7e7e7; 104 | } 105 | 106 | .section-heading { 107 | margin-bottom: 30px; 108 | } 109 | 110 | .section-heading-spacer { 111 | float: left; 112 | width: 200px; 113 | border-top: 3px solid #e7e7e7; 114 | } 115 | 116 | .banner { 117 | padding: 100px 0; 118 | color: #f8f8f8; 119 | background: url(../images/bottom.jpg) no-repeat center center; 120 | background-size: cover; 121 | } 122 | 123 | .banner h2 { 124 | margin: 0; 125 | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); 126 | font-size: 3em; 127 | } 128 | 129 | .banner ul { 130 | margin-bottom: 0; 131 | } 132 | 133 | .banner-social-buttons { 134 | float: right; 135 | margin-top: 0; 136 | } 137 | 138 | @media(max-width:1199px) { 139 | ul.banner-social-buttons { 140 | float: left; 141 | margin-top: 15px; 142 | } 143 | } 144 | 145 | @media(max-width:767px) { 146 | .banner h2 { 147 | margin: 0; 148 | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); 149 | font-size: 3em; 150 | } 151 | 152 | ul.banner-social-buttons > li { 153 | display: block; 154 | margin-bottom: 20px; 155 | padding: 0; 156 | } 157 | 158 | ul.banner-social-buttons > li:last-child { 159 | margin-bottom: 0; 160 | } 161 | } 162 | 163 | footer { 164 | padding: 50px 0; 165 | background-color: #f8f8f8; 166 | } 167 | 168 | p.copyright { 169 | margin: 15px 0 0; 170 | } -------------------------------------------------------------------------------- /pomodoro-clock/images/bomb.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/pomodoro-clock/images/bomb.ico -------------------------------------------------------------------------------- /pomodoro-clock/images/clock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/pomodoro-clock/images/clock.jpg -------------------------------------------------------------------------------- /pomodoro-clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Build a Pomodoro Clock 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

17 |

18 |

19 |

20 |

21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 |

31 |
32 |
33 |
34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /pomodoro-clock/js/countdown.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $('.task').html(taskTimer + clock); 3 | $('.break').html('0' + breakTimer + clock); 4 | }); 5 | 6 | var taskTimer = 25; 7 | var breakTimer = 5; 8 | var clock = ':00'; 9 | 10 | $('.add-task').on('click', function() { 11 | taskTimer++; 12 | if (taskTimer > 0) $('.set-task, .subtract-task').removeAttr('disabled'); 13 | if (taskTimer < 10) { 14 | $('.task').html('0' + taskTimer + clock) 15 | } else { 16 | $('.task').html(taskTimer + clock); 17 | } 18 | }); 19 | 20 | $('.subtract-task').on('click', function() { 21 | taskTimer--; 22 | if (taskTimer === 0) $('.set-task, .subtract-task').attr('disabled', 'disabled'); 23 | if (taskTimer < 10) { 24 | $('.task').html('0' + taskTimer + clock) 25 | } else { 26 | $('.task').html(taskTimer + clock); 27 | } 28 | }); 29 | 30 | $('.set-task').on('click', function() { 31 | $('.task, .set-task, .add-task, .subtract-task').hide(); 32 | $('.break, .set-break, .add-break, .subtract-break').show(); 33 | }); 34 | 35 | $('.add-break').on('click', function() { 36 | breakTimer++; 37 | if (breakTimer > 0) $('.set-break, .subtract-break').removeAttr('disabled'); 38 | if (breakTimer < 10) { 39 | $('.break').html('0' + breakTimer + clock) 40 | } else { 41 | $('.break').html(breakTimer + clock); 42 | } 43 | }); 44 | 45 | $('.subtract-break').on('click', function() { 46 | breakTimer--; 47 | if (breakTimer === 0) $('.set-break, .subtract-break').attr('disabled', 'disabled') 48 | if (breakTimer < 10) { 49 | $('.break').html('0' + breakTimer + clock) 50 | } else { 51 | $('.break').html(breakTimer + clock); 52 | } 53 | }); 54 | 55 | $('.set-break').on('click', function() { 56 | $('.break, .set-break, .add-break, .subtract-break').hide(); 57 | $('.start-task, .task').show(); 58 | }); 59 | 60 | var minutesLeft; 61 | var secondsLeft = 0; 62 | var timeSetup; 63 | 64 | function sharedClock() { 65 | secondsLeft--; 66 | if (minutesLeft < 10 && secondsLeft < 10) { 67 | $('.clock').html('0' + minutesLeft + ':0' + secondsLeft); 68 | } else if (minutesLeft < 10) { 69 | $('.clock').html('0' + minutesLeft + ':' + secondsLeft); 70 | } else if (secondsLeft < 10) { 71 | $('.clock').html(minutesLeft + ':0' + secondsLeft); 72 | } else { 73 | $('.clock').html(minutesLeft + ':' + secondsLeft); 74 | } 75 | if (minutesLeft <= 1 && secondsLeft === 0 || minutesLeft < 1) $('.clock, .information').css('color', 'red'); 76 | } 77 | 78 | function taskClock() { 79 | $('.clock, .information').css('color', 'white'); 80 | $('.information').text('Left in Task'); 81 | $('.information').show(); 82 | sharedClock(); 83 | if (secondsLeft < 0) { 84 | if (minutesLeft === 0 && secondsLeft < 0) { 85 | taskTimer = 0; 86 | clearInterval(timeSetup); 87 | $('.clock').html('00:00'); 88 | $('.stop, .information').hide(); 89 | $('.start-break').show(); 90 | } else { 91 | minutesLeft--; 92 | secondsLeft = 60; 93 | taskClock(); 94 | } 95 | } 96 | } 97 | 98 | function breakClock() { 99 | $('.clock, .information').css('color', 'white'); 100 | $('.information').text('Left in Break'); 101 | $('.information').show(); 102 | sharedClock(); 103 | if (secondsLeft < 0) { 104 | if (minutesLeft === 0 && secondsLeft < 0) { 105 | taskTimer = 0; 106 | clearInterval(timeSetup); 107 | $('.clock').html('00:00'); 108 | $('.information').hide(); 109 | $('.stop').text('Reset'); 110 | } else { 111 | minutesLeft--; 112 | secondsLeft = 60; 113 | breakClock(); 114 | } 115 | } 116 | } 117 | 118 | $('.start-task').on('click', function() { 119 | $('.task, .start-task, .subtract-break').hide(); 120 | $('.clock, .stop').show(); 121 | timeSetup = setInterval( function() {taskClock()}, 1000); 122 | minutesLeft = taskTimer; 123 | taskClock(); 124 | }); 125 | 126 | $('.start-break').on('click', function() { 127 | $('.task, .start-break, .subtract-break').hide(); 128 | $('.clock, .stop').show(); 129 | timeSetup = setInterval( function() {breakClock()}, 1000); 130 | minutesLeft = breakTimer; 131 | breakClock(); 132 | }); 133 | 134 | $('.stop').on('click', function() { 135 | $('.stop, .clock, .information').hide(); 136 | $('.stop').text('Stop'); 137 | $('.task, .set-task, .add-task, .subtract-task').show(); 138 | clearInterval(timeSetup); 139 | taskTimer = 25; 140 | $('.task').html(taskTimer + clock) 141 | breakTimer = 5; 142 | $('.break').html('0' + breakTimer + clock); 143 | minutesLeft = taskTimer; 144 | secondsLeft = 0; 145 | $('.clock').html(''); 146 | }); -------------------------------------------------------------------------------- /pomodoro-clock/stylesheet/stylesheet.css: -------------------------------------------------------------------------------- 1 | .break, 2 | .start-task, 3 | .start-break, 4 | .stop, 5 | .reset, 6 | .set-break, 7 | .add-break, 8 | .subtract-break, 9 | .information { 10 | display: none; 11 | } 12 | 13 | .add-task, 14 | .subtract-task, 15 | .add-break, 16 | .subtract-break { 17 | margin-top: 5px; 18 | } 19 | 20 | a, 21 | a:focus, 22 | a:hover { 23 | color: #fff; 24 | } 25 | 26 | button:focus { 27 | outline: 0 !important; 28 | } 29 | 30 | .btn-default, 31 | .btn-default:hover, 32 | .btn-default:focus { 33 | color: #333; 34 | text-shadow: none; 35 | background-color: #fff; 36 | border: 1px solid #fff; 37 | } 38 | 39 | .task, 40 | .break, 41 | .clock { 42 | font-size: 144px; 43 | font-weight: 600; 44 | } 45 | 46 | html, 47 | body { 48 | height: 100%; 49 | background-image: url("../images/clock.jpg"); 50 | background-size: cover; 51 | background-color: #333; 52 | } 53 | 54 | body { 55 | color: #fff; 56 | text-align: center; 57 | text-shadow: 0 1px 3px rgba(0,0,0,.5); 58 | } 59 | 60 | .site-wrapper { 61 | display: table; 62 | width: 100%; 63 | height: 100%; /* For at least Firefox */ 64 | min-height: 100%; 65 | -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); 66 | box-shadow: inset 0 0 100px rgba(0,0,0,.5); 67 | } 68 | 69 | .site-wrapper-inner { 70 | display: table-cell; 71 | vertical-align: top; 72 | } 73 | 74 | .cover-container { 75 | margin-right: auto; 76 | margin-left: auto; 77 | } 78 | 79 | .inner { 80 | padding: 30px; 81 | } 82 | 83 | .cover { 84 | padding: 0 20px; 85 | } 86 | .cover .btn-lg { 87 | padding: 10px 20px; 88 | font-weight: bold; 89 | } 90 | 91 | @media (min-width: 768px) { 92 | .site-wrapper-inner { 93 | vertical-align: middle; 94 | } 95 | .cover-container { 96 | width: 100%; 97 | } 98 | } 99 | 100 | @media (min-width: 992px) { 101 | .cover-container { 102 | width: 700px; 103 | } 104 | } -------------------------------------------------------------------------------- /random-quote-machine/images/r2d2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/random-quote-machine/images/r2d2.ico -------------------------------------------------------------------------------- /random-quote-machine/images/space.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/random-quote-machine/images/space.jpg -------------------------------------------------------------------------------- /random-quote-machine/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Build a Random Quote Machine 8 | 9 | 10 |
11 |
12 |
13 |
14 |

A long time ago in a galaxy far,
far away....

15 |

16 |

17 | 19 |

20 |
21 |
22 |
23 |
24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /random-quote-machine/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css") 5 | link(rel="stylesheet", type="text/css", href="stylesheet/stylesheet.css") 6 | link(rel="icon", href="images/r2d2.ico") 7 | title Build a Random Quote Machine 8 | body 9 | .site-wrapper 10 | .site-wrapper-inner 11 | .cover-container 12 | .inner.cover 13 | p.cover-heading.quote 14 | | A long time ago in a galaxy far, 15 | br 16 | | far away.... 17 | p.lead.character 18 | p.lead 19 | button.btn.btn-lg.btn-default.btn-force Use the Force 20 | a.twitter 21 | button.btn.btn-lg.btn-default.btn-tweet Tweet 22 | script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js") 23 | script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js") 24 | script(src="js/twitter.js") 25 | script(src="js/quotes-coffee.js") -------------------------------------------------------------------------------- /random-quote-machine/js/quotes-coffee.coffee: -------------------------------------------------------------------------------- 1 | speaker = '' 2 | said = '' 3 | 4 | quotes = [ 5 | {quote: "It's a trap!", character: "Admiral Ackbar"} 6 | {quote: "Because he's holding a thermal detonator!", character: "C-3PO"} 7 | {quote: "Don't call me a mindless philosopher, you overweight glob of grease.", character: "C-3PO"} 8 | {quote: "Don't get technical with me.", character: "C-3PO"} 9 | {quote: "Let the Wookiee win.", character: "C-3PO"} 10 | {quote: "Sir, the possibility of successfully navigating an asteroid field is approximately 3,720 to 1.", character: "C-3PO"} 11 | {quote: "We're doomed.", character: "C-3PO"} 12 | {quote: "All too easy.", character: "Darth Vader"} 13 | {quote: "I find your lack of faith disturbing.", character: "Darth Vader"} 14 | {quote: "No. I am your Father.", character: "Darth Vader"} 15 | {quote: "Stay on target.", character: "Gold Five"} 16 | {quote: "Great, kid. Don't get cocky.", character: "Han Solo"} 17 | {quote: "Laugh it up, fuzzball.", character: "Han Solo"} 18 | {quote: "Never tell me the odds.", character: "Han Solo"} 19 | {quote: "Traveling through hyperspace ain't like dusting crops, farm boy.", character: "Han Solo"} 20 | {quote: "If there's a bright center to the universe, you're on the planet that it's farthest from.", character: "Luke Skywalker"} 21 | {quote: "I have a very bad feeling about this.", character: "Luke Skywalker"} 22 | {quote: "There is good in him. I've felt it.", character: "Luke Skywalker"} 23 | {quote: "This is Red Five. I'm going in!", character: "Luke Skywalker"} 24 | {quote: "In my experience there is no such thing as luck.", character: "Obi-Wan Kenobi"} 25 | {quote: "Remember... the Force will be with you, always.", character: "Obi-Wan Kenobi"} 26 | {quote: "Your eyes can deceive you. Don't trust them.", character: "Obi-Wan Kenobi"} 27 | {quote: "Aren't you a little short for a stormtrooper?", character: "Princess Leia"} 28 | {quote: "Somebody has to save our skins.", character: "Princess Leia"} 29 | {quote: "Why you stuck-up, half-witted, scruffy-looking nerf-herder!", character: "Princess Leia"} 30 | {quote: "Your focus determines your reality.", character: "Qui-Gon Jinn"} 31 | {quote: "Do. Or do not. There is no try.", character: "Yoda"} 32 | {quote: "Once you start down the dark path, forever will it dominate your destiny.", character: "Yoda"} 33 | ] 34 | 35 | generateQuote = -> 36 | randomQuote = quotes[Math.floor(Math.random() * quotes.length)] 37 | if randomQuote.quote.length + randomQuote.character.length > 97 38 | generateQuote() 39 | else 40 | $('.quote').text randomQuote.quote 41 | $('.character').text randomQuote.character 42 | said = randomQuote.quote.split(' ').join('%20') 43 | speaker = randomQuote.character.split(' ').join('%20') 44 | 45 | $(document).ready -> 46 | $('.btn-tweet').hide() 47 | $('.btn-force').on('click', -> 48 | generateQuote() 49 | $('.twitter').attr('href', 'https://twitter.com/intent/tweet?text=' + speaker + '%20said,%20"' + said + '"%20%23StarWars%20https://goo.gl/MOxWg1') 50 | $('.btn-tweet').show() 51 | ) 52 | -------------------------------------------------------------------------------- /random-quote-machine/js/quotes-coffee.js: -------------------------------------------------------------------------------- 1 | // Generated by CoffeeScript 1.10.0 2 | (function() { 3 | var generateQuote, quotes, said, speaker; 4 | 5 | speaker = ''; 6 | 7 | said = ''; 8 | 9 | quotes = [ 10 | { 11 | quote: "It's a trap!", 12 | character: "Admiral Ackbar" 13 | }, { 14 | quote: "Because he's holding a thermal detonator!", 15 | character: "C-3PO" 16 | }, { 17 | quote: "Don't call me a mindless philosopher, you overweight glob of grease.", 18 | character: "C-3PO" 19 | }, { 20 | quote: "Don't get technical with me.", 21 | character: "C-3PO" 22 | }, { 23 | quote: "Let the Wookiee win.", 24 | character: "C-3PO" 25 | }, { 26 | quote: "Sir, the possibility of successfully navigating an asteroid field is approximately 3,720 to 1.", 27 | character: "C-3PO" 28 | }, { 29 | quote: "We're doomed.", 30 | character: "C-3PO" 31 | }, { 32 | quote: "All too easy.", 33 | character: "Darth Vader" 34 | }, { 35 | quote: "I find your lack of faith disturbing.", 36 | character: "Darth Vader" 37 | }, { 38 | quote: "No. I am your Father.", 39 | character: "Darth Vader" 40 | }, { 41 | quote: "Stay on target.", 42 | character: "Gold Five" 43 | }, { 44 | quote: "Great, kid. Don't get cocky.", 45 | character: "Han Solo" 46 | }, { 47 | quote: "Laugh it up, fuzzball.", 48 | character: "Han Solo" 49 | }, { 50 | quote: "Never tell me the odds.", 51 | character: "Han Solo" 52 | }, { 53 | quote: "Traveling through hyperspace ain't like dusting crops, farm boy.", 54 | character: "Han Solo" 55 | }, { 56 | quote: "If there's a bright center to the universe, you're on the planet that it's farthest from.", 57 | character: "Luke Skywalker" 58 | }, { 59 | quote: "I have a very bad feeling about this.", 60 | character: "Luke Skywalker" 61 | }, { 62 | quote: "There is good in him. I've felt it.", 63 | character: "Luke Skywalker" 64 | }, { 65 | quote: "This is Red Five. I'm going in!", 66 | character: "Luke Skywalker" 67 | }, { 68 | quote: "In my experience there is no such thing as luck.", 69 | character: "Obi-Wan Kenobi" 70 | }, { 71 | quote: "Remember... the Force will be with you, always.", 72 | character: "Obi-Wan Kenobi" 73 | }, { 74 | quote: "Your eyes can deceive you. Don't trust them.", 75 | character: "Obi-Wan Kenobi" 76 | }, { 77 | quote: "Aren't you a little short for a stormtrooper?", 78 | character: "Princess Leia" 79 | }, { 80 | quote: "Somebody has to save our skins.", 81 | character: "Princess Leia" 82 | }, { 83 | quote: "Why you stuck-up, half-witted, scruffy-looking nerf-herder!", 84 | character: "Princess Leia" 85 | }, { 86 | quote: "Your focus determines your reality.", 87 | character: "Qui-Gon Jinn" 88 | }, { 89 | quote: "Do. Or do not. There is no try.", 90 | character: "Yoda" 91 | }, { 92 | quote: "Once you start down the dark path, forever will it dominate your destiny.", 93 | character: "Yoda" 94 | } 95 | ]; 96 | 97 | generateQuote = function() { 98 | var randomQuote; 99 | randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; 100 | if (randomQuote.quote.length + randomQuote.character.length > 97) { 101 | return generateQuote(); 102 | } else { 103 | $('.quote').text(randomQuote.quote); 104 | $('.character').text(randomQuote.character); 105 | said = randomQuote.quote.split(' ').join('%20'); 106 | return speaker = randomQuote.character.split(' ').join('%20'); 107 | } 108 | }; 109 | 110 | $(document).ready(function() { 111 | $('.btn-tweet').hide(); 112 | return $('.btn-force').on('click', function() { 113 | generateQuote(); 114 | $('.twitter').attr('href', 'https://twitter.com/intent/tweet?text=' + speaker + '%20said,%20"' + said + '"%20%23StarWars%20https://goo.gl/MOxWg1'); 115 | return $('.btn-tweet').show(); 116 | }); 117 | }); 118 | 119 | }).call(this); 120 | -------------------------------------------------------------------------------- /random-quote-machine/js/quotes.js: -------------------------------------------------------------------------------- 1 | var quotes = [ 2 | {quote: "It's a trap!", character: "Admiral Ackbar"}, 3 | {quote: "Because he's holding a thermal detonator!", character: "C-3PO"}, 4 | {quote: "Don't call me a mindless philosopher, you overweight glob of grease.", character: "C-3PO"}, 5 | {quote: "Don't get technical with me.", character: "C-3PO"}, 6 | {quote: "Let the Wookiee win.", character: "C-3PO"}, 7 | {quote: "Sir, the possibility of successfully navigating an asteroid field is approximately 3,720 to 1.", character: "C-3PO"}, 8 | {quote: "We're doomed.", character: "C-3PO"}, 9 | {quote: "All too easy.", character: "Darth Vader"}, 10 | {quote: "I find your lack of faith disturbing.", character: "Darth Vader"}, 11 | {quote: "No. I am your Father.", character: "Darth Vader"}, 12 | {quote: "Stay on target.", character: "Gold Five"}, 13 | {quote: "Great, kid. Don't get cocky.", character: "Han Solo"}, 14 | {quote: "Laugh it up, fuzzball.", character: "Han Solo"}, 15 | {quote: "Never tell me the odds.", character: "Han Solo"}, 16 | {quote: "Traveling through hyperspace ain't like dusting crops, farm boy.", character: "Han Solo"}, 17 | {quote: "If there's a bright center to the universe, you're on the planet that it's farthest from.", character: "Luke Skywalker"}, 18 | {quote: "I have a very bad feeling about this.", character: "Luke Skywalker"}, 19 | {quote: "There is good in him. I've felt it.", character: "Luke Skywalker"}, 20 | {quote: "This is Red Five. I'm going in!", character: "Luke Skywalker"}, 21 | {quote: "In my experience there is no such thing as luck.", character: "Obi-Wan Kenobi"}, 22 | {quote: "Remember... the Force will be with you, always.", character: "Obi-Wan Kenobi"}, 23 | {quote: "Your eyes can deceive you. Don't trust them.", character: "Obi-Wan Kenobi"}, 24 | {quote: "Aren't you a little short for a stormtrooper?", character: "Princess Leia"}, 25 | {quote: "Somebody has to save our skins.", character: "Princess Leia"}, 26 | {quote: "Why you stuck-up, half-witted, scruffy-looking nerf-herder!", character: "Princess Leia"}, 27 | {quote: "Your focus determines your reality.", character: "Qui-Gon Jinn"}, 28 | {quote: "Do. Or do not. There is no try.", character: "Yoda"}, 29 | {quote: "Once you start down the dark path, forever will it dominate your destiny.", character: "Yoda"} 30 | ]; 31 | 32 | function generateQuote() { 33 | randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; 34 | if (randomQuote.character === "C-3PO" && randomQuote.quote.length + randomQuote.character.length > 95) { 35 | generateQuote(); 36 | } else if (randomQuote.quote.length + randomQuote.character.length > 97) { 37 | generateQuote(); 38 | } else { 39 | $('.quote').text(randomQuote.quote); 40 | $('.character').text(randomQuote.character); 41 | said = randomQuote.quote.split(' ').join('%20'); 42 | speaker = randomQuote.character.split(' ').join('%20'); 43 | } 44 | } 45 | 46 | $(document).ready(function() { 47 | $('.btn-tweet').hide(); 48 | $('.btn-force').on('click', function() { 49 | generateQuote(); 50 | if (speaker === 'C-3PO') { 51 | $('.twitter').attr('href', 'https://twitter.com/intent/tweet?text=%23C3PO%20said,%20"' + said + '"%20%23StarWars%20https://goo.gl/MOxWg1'); 52 | } else { 53 | $('.twitter').attr('href', 'https://twitter.com/intent/tweet?text=' + speaker + '%20said,%20"' + said + '"%20%23StarWars%20https://goo.gl/MOxWg1'); 54 | } 55 | $('.btn-tweet').show(); 56 | }); 57 | }); -------------------------------------------------------------------------------- /random-quote-machine/js/twitter.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | if (window.__twitterIntentHandler) return; 3 | var intentRegex = /twitter\.com(\:\d{2,4})?\/intent\/(\w+)/, 4 | windowOptions = 'scrollbars=yes,resizable=yes,toolbar=no,location=yes', 5 | width = 550, 6 | height = 420, 7 | winHeight = screen.height, 8 | winWidth = screen.width; 9 | 10 | function handleIntent(e) { 11 | e = e || window.event; 12 | var target = e.target || e.srcElement, 13 | m, left, top; 14 | 15 | while (target && target.nodeName.toLowerCase() !== 'a') { 16 | target = target.parentNode; 17 | } 18 | 19 | if (target && target.nodeName.toLowerCase() === 'a' && target.href) { 20 | m = target.href.match(intentRegex); 21 | if (m) { 22 | left = Math.round((winWidth / 2) - (width / 2)); 23 | top = 0; 24 | 25 | if (winHeight > height) { 26 | top = Math.round((winHeight / 2) - (height / 2)); 27 | } 28 | 29 | window.open(target.href, 'intent', windowOptions + ',width=' + width + 30 | ',height=' + height + ',left=' + left + ',top=' + top); 31 | e.returnValue = false; 32 | e.preventDefault && e.preventDefault(); 33 | } 34 | } 35 | } 36 | 37 | if (document.addEventListener) { 38 | document.addEventListener('click', handleIntent, false); 39 | } else if (document.attachEvent) { 40 | document.attachEvent('onclick', handleIntent); 41 | } 42 | window.__twitterIntentHandler = true; 43 | }()); -------------------------------------------------------------------------------- /random-quote-machine/old-index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Build a Random Quote Machine 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

A long time ago in a galaxy far,
far away....

17 |

18 |

19 | 20 | 21 |

22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /random-quote-machine/stylesheet/stylesheet.css: -------------------------------------------------------------------------------- 1 | a, 2 | a:focus, 3 | a:hover { 4 | text-decoration: none; 5 | color: #fff; 6 | } 7 | 8 | .btn, 9 | .btn:hover, 10 | .btn:focus, 11 | .btn:active:focus, 12 | .btn.active:focus { 13 | color: #333; 14 | background-color: #fff; 15 | border: 1px solid #fff; 16 | text-shadow: none; 17 | outline: none; 18 | } 19 | 20 | .quote { 21 | font-size: 36px; 22 | font-weight: 600; 23 | } 24 | 25 | html, 26 | body { 27 | height: 100%; 28 | background-image: url("../images/space.jpg"); 29 | background-size: cover; 30 | background-color: #333; 31 | } 32 | 33 | body { 34 | color: #fff; 35 | text-align: center; 36 | text-shadow: 0 1px 3px rgba(0,0,0,.5); 37 | } 38 | 39 | .site-wrapper { 40 | display: table; 41 | width: 100%; 42 | height: 100%; /* For at least Firefox */ 43 | min-height: 100%; 44 | -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); 45 | box-shadow: inset 0 0 100px rgba(0,0,0,.5); 46 | } 47 | 48 | .site-wrapper-inner { 49 | display: table-cell; 50 | vertical-align: top; 51 | } 52 | 53 | .cover-container { 54 | margin-right: auto; 55 | margin-left: auto; 56 | } 57 | 58 | .inner { 59 | padding: 30px; 60 | } 61 | 62 | .cover { 63 | padding: 0 20px; 64 | } 65 | .cover .btn-lg { 66 | padding: 10px 20px; 67 | font-weight: bold; 68 | } 69 | 70 | @media (min-width: 768px) { 71 | .site-wrapper-inner { 72 | vertical-align: middle; 73 | } 74 | .cover-container { 75 | width: 100%; 76 | } 77 | } 78 | 79 | @media (min-width: 992px) { 80 | .cover-container { 81 | width: 700px; 82 | } 83 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Free Code Camp 2 | ### Basic Front End Development Projects 3 | * [Personal Portfolio Webpage](http://codepen.io/thomasvaeth/full/WQxQem/) 4 | - HTML 5 | - CSS 6 | - Bootstrap 7 | * [Random Quote Machine](http://codepen.io/thomasvaeth/full/epmrEm/) 8 | - HTML/Jade 9 | - CSS 10 | - JavaScript/CoffeeScript 11 | - jQuery 12 | - Bootstrap 13 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/random-desktop.png "Screenshot") 14 | * [Calculator](http://codepen.io/thomasvaeth/full/VerWLg/) 15 | - HTML 16 | - CSS 17 | - JavaScript 18 | - AngularJS 19 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/calculator-desktop.png "Screenshot") 20 | * [Pomodoro Clock](http://codepen.io/thomasvaeth/full/QjwPgz/) 21 | - HTML 22 | - CSS 23 | - JavaScript 24 | - jQuery 25 | - Bootstrap 26 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/pomodoro-desktop.png "Screenshot") 27 | 28 | ### Intermediate Front End Development Projects 29 | * [Local Weather](http://codepen.io/thomasvaeth/full/avzaBd/) 30 | - HTML 31 | - CSS 32 | - JavaScript 33 | - jQuery 34 | - Bootstrap 35 | - IP API 36 | - Open Weather Map API 37 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/local-desktop.png "Screenshot") 38 | * [Camper News](http://codepen.io/thomasvaeth/full/yeXMEJ/) 39 | - HTML 40 | - CSS 41 | - JavaScript 42 | - AngularJS 43 | - Bootstrap 44 | - Free Code Camp API 45 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/news-desktop.png "Screenshot") 46 | * [Wikipedia Viewer](http://codepen.io/thomasvaeth/full/adKNyx/) 47 | - HTML 48 | - CSS 49 | - JavaScript 50 | - AngularJS 51 | - Foundation 52 | - Wikipedia API 53 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/wikipedia-desktop.png "Screenshot") 54 | * [Twitch.tv JSON API](http://codepen.io/thomasvaeth/full/EVyabe/) 55 | - HTML 56 | - CSS 57 | - JavaScript 58 | - jQuery 59 | - Twitch API 60 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/twitch-desktop.png "Screenshot") 61 | * [Tic Tac Toe](http://codepen.io/thomasvaeth/full/zrmjeB/) 62 | - HTML 63 | - CSS 64 | - JavaScript 65 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/tic-desktop.png "Screenshot") 66 | 67 | ###[Front End Development Certificate](http://www.freecodecamp.com/thomasvaeth/front-end-certification) 68 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/front-desktop.png "Screenshot") 69 | 70 | ### React Projects 71 | * [Markdown Previewer](http://codepen.io/thomasvaeth/full/dGJWxK/) 72 | - HTML 73 | - Sass 74 | - React 75 | - JSX 76 | - Marked 77 | - Foundation 78 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/markdown-desktop.png "Screenshot") 79 | * [Camper Leaderboard](http://codepen.io/thomasvaeth/full/JGMEMm/) 80 | - HTML 81 | - Sass 82 | - React 83 | - JSX 84 | - Foundation 85 | - Free Code Camp API 86 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/leaderboard-desktop.png "Screenshot") 87 | * [Recipe Box](http://codepen.io/thomasvaeth/full/EPEpvW/) 88 | - HTML 89 | - Sass 90 | - React 91 | - JSX 92 | - jQuery 93 | - Bootstrap/React-Bootstrap 94 | ![Screenshot](https://github.com/thomasvaeth/freecodecamp/blob/master/screenshots/recipe-desktop.png "Screenshot") 95 | -------------------------------------------------------------------------------- /recipe-box/css/.sass-cache/df1f54489ef0864290c692c342ff206c7db98d9f/main.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/recipe-box/css/.sass-cache/df1f54489ef0864290c692c342ff206c7db98d9f/main.scssc -------------------------------------------------------------------------------- /recipe-box/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Coming Soon', cursive; } 3 | 4 | #freecodecamp { 5 | margin-top: 20px; } 6 | #freecodecamp h1 { 7 | text-align: center; } 8 | #freecodecamp .panel-group { 9 | margin-bottom: 10px; } 10 | #freecodecamp .panel-group .list-group { 11 | margin-bottom: 10px; } 12 | 13 | /*# sourceMappingURL=main.css.map */ 14 | -------------------------------------------------------------------------------- /recipe-box/css/main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,IAAK;EACJ,WAAW,EAAE,sBAAsB;;AAGpC,aAAc;EACb,UAAU,EAAE,IAAI;EAEhB,gBAAG;IACF,UAAU,EAAE,MAAM;EAGnB,0BAAa;IACZ,aAAa,EAAE,IAAI;IAEnB,sCAAY;MACX,aAAa,EAAE,IAAI", 4 | "sources": ["main.scss"], 5 | "names": [], 6 | "file": "main.css" 7 | } -------------------------------------------------------------------------------- /recipe-box/css/main.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Coming Soon', cursive; 3 | } 4 | 5 | #freecodecamp { 6 | margin-top: 20px; 7 | 8 | h1 { 9 | text-align: center; 10 | } 11 | 12 | .panel-group { 13 | margin-bottom: 10px; 14 | 15 | .list-group { 16 | margin-bottom: 10px; 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /recipe-box/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Recipe Box 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /recipe-box/js/app.js: -------------------------------------------------------------------------------- 1 | var Accordion = ReactBootstrap.Accordion; 2 | var ButtonToolbar = ReactBootstrap.ButtonToolbar; 3 | var Button = ReactBootstrap.Button; 4 | var Col = ReactBootstrap.Col; 5 | var Input = ReactBootstrap.Input; 6 | var ListGroup = ReactBootstrap.ListGroup; 7 | var ListGroupItem = ReactBootstrap.ListGroupItem; 8 | var Modal = ReactBootstrap.Modal; 9 | var Panel = ReactBootstrap.Panel; 10 | var Row = ReactBootstrap.Row; 11 | 12 | var recipes = typeof localStorage['recipeBook'] !== 'undefined' ? JSON.parse(localStorage['recipeBook']) : [ 13 | {title: 'Chicken Quesadillas', ingredients: ['Chicken Breast', 'Shredded Cheddar Cheese', 'Shredded Monterey Jack Cheese', 'Flour Tortillas']}, 14 | {title: 'Cereal', ingredients: ['Cinnamon Toast Crunch', 'Milk']}, 15 | {title: 'Baked Ziti', ingredients: ['Ziti Pasta', 'Tomato Sauce', 'Mozzarella Cheese', 'Parmesan Cheese']} 16 | ], recipeTitle = '', recipeIngredients = []; 17 | 18 | 19 | var App = React.createClass({ 20 | getInitialState: function() { 21 | return {modal: false} 22 | }, 23 | openRecipe: function() { 24 | this.setState({modal: true}); 25 | // I need to ask Quincy/FCC about this small section because DOM wasn't working. 26 | if (document.getElementById('title') && document.getElementById('ingredients')) { 27 | $('#title').val(recipeTitle); 28 | $('#ingredients').val(recipeIngredients); 29 | if (recipeTitle !== '') { 30 | $('#modalTitle').text('Edit Recipe'); 31 | $('#modalButton').text('Edit'); 32 | } 33 | } else { 34 | window.requestAnimationFrame(this.openRecipe); 35 | } 36 | }, 37 | closeRecipe: function() { 38 | recipeTitle = ''; 39 | recipeIngredients = []; 40 | this.setState({modal: false}); 41 | }, 42 | addRecipe: function() { 43 | var title = document.getElementById('title').value; 44 | var ingredients = document.getElementById('ingredients').value.split(','); 45 | var previousRecipe = false; 46 | recipes.forEach(function(recipe) { 47 | if (recipe.title === title) { 48 | recipe.ingredients = ingredients; 49 | previousRecipe = true; 50 | } 51 | }); 52 | // Using ES2015 to push object to the array! 53 | if (!previousRecipe) recipes.push({title, ingredients}); 54 | renderRecipes(); 55 | this.closeRecipe(); 56 | }, 57 | render: function() { 58 | return ( 59 |
60 | 61 | 62 | 63 | 64 | 65 | Add Recipe 66 | 67 | 68 |
69 | 70 | 71 |
72 | 73 | 74 | 75 | 76 | 77 | 78 |
79 | ); 80 | } 81 | }); 82 | 83 | var RecipeBook = React.createClass({ 84 | render: function() { 85 | return ( 86 | 87 |

Recipe Box

88 | 89 | {this.props.data} 90 | 91 | 92 | ); 93 | } 94 | }); 95 | 96 | var IngredientsList = React.createClass({ 97 | render: function() { 98 | var ingredientsList = this.props.ingredients.map(function(ingredient, idx) { 99 | return ( 100 | 101 | {ingredient} 102 | 103 | ); 104 | }); 105 | return ( 106 | 107 | {ingredientsList} 108 | 109 | ); 110 | } 111 | }); 112 | 113 | var Recipe = React.createClass({ 114 | editRecipe: function() { 115 | recipeTitle = this.props.title; 116 | recipeIngredients = this.props.ingredients; 117 | document.getElementById('modal').click(); 118 | }, 119 | removeRecipe: function() { 120 | recipes.splice(this.props.index, 1); 121 | renderRecipes(); 122 | }, 123 | render: function() { 124 | return ( 125 |
126 | 127 | 128 | 129 | 130 | 131 |
132 | ); 133 | } 134 | }); 135 | 136 | function renderRecipes() { 137 | localStorage.setItem('recipeBook', JSON.stringify(recipes)); 138 | var recipeArr = []; 139 | recipes.forEach(function(recipe, idx) { 140 | recipeArr.push( 141 | 142 | 143 | 144 | ); 145 | }); 146 | ReactDOM.render(, document.getElementById('freecodecamp')); 147 | } 148 | 149 | ReactDOM.render(, document.getElementById('recipe')); 150 | renderRecipes(); 151 | -------------------------------------------------------------------------------- /screenshots/calculator-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/calculator-desktop.png -------------------------------------------------------------------------------- /screenshots/front-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/front-desktop.png -------------------------------------------------------------------------------- /screenshots/leaderboard-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/leaderboard-desktop.png -------------------------------------------------------------------------------- /screenshots/local-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/local-desktop.png -------------------------------------------------------------------------------- /screenshots/markdown-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/markdown-desktop.png -------------------------------------------------------------------------------- /screenshots/news-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/news-desktop.png -------------------------------------------------------------------------------- /screenshots/pomodoro-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/pomodoro-desktop.png -------------------------------------------------------------------------------- /screenshots/random-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/random-desktop.png -------------------------------------------------------------------------------- /screenshots/recipe-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/recipe-desktop.png -------------------------------------------------------------------------------- /screenshots/tic-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/tic-desktop.png -------------------------------------------------------------------------------- /screenshots/twitch-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/twitch-desktop.png -------------------------------------------------------------------------------- /screenshots/wikipedia-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/screenshots/wikipedia-desktop.png -------------------------------------------------------------------------------- /tic-tac-toe/css/main.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | width: 100%; 5 | margin: 0; 6 | padding: 0; 7 | font-family: 'Schoolbell', cursive; 8 | } 9 | 10 | h1 { 11 | text-align: center; 12 | margin-bottom: 2%; 13 | font-size: 800%; 14 | margin-top: 2%; 15 | } 16 | 17 | #symbol-container { 18 | position: absolute; 19 | margin: 20% 40%; 20 | height: 10%; 21 | width: 10%; 22 | text-align: center; 23 | border: 2px solid black; 24 | background-color: #ecf0f1; 25 | padding: 5%; 26 | } 27 | 28 | #symbol-container button { 29 | padding: 20px 20px; 30 | margin: 0 1%; 31 | } 32 | 33 | #x { 34 | color: #e74c3c; 35 | } 36 | 37 | #o { 38 | color: #3498db; 39 | } 40 | 41 | .container { 42 | height: 45%; 43 | width: 30%; 44 | text-align: center; 45 | margin: 0 auto; 46 | visibility: hidden; 47 | } 48 | 49 | .container span { 50 | height: 30%; 51 | width: 30%; 52 | border: 2px black solid; 53 | display: inline-block; 54 | border-radius: 2%; 55 | } 56 | 57 | .container span:hover { 58 | background-color: #ecf0f1; 59 | } 60 | 61 | .top { 62 | border-top: none !important; 63 | border-bottom: none !important; 64 | } 65 | 66 | .bottom { 67 | border-bottom: none !important; 68 | border-top: none !important; 69 | } 70 | 71 | .left { 72 | border-left: none !important; 73 | margin-right: -2%; 74 | } 75 | 76 | .right { 77 | border-right: none !important; 78 | margin-left: -2%; 79 | } 80 | 81 | .space { 82 | font-size: 450%; 83 | text-align: center; 84 | line-height: 100px; 85 | } 86 | 87 | p { 88 | margin-top: 5%; 89 | } 90 | 91 | button { 92 | font-family: 'Schoolbell', cursive; 93 | background-color: white; 94 | border: 2px solid black; 95 | border-radius: 5%; 96 | outline: none; 97 | box-shadow: 1px 1px 1px black; 98 | } 99 | 100 | .new { 101 | padding: 20px 20px; 102 | margin-bottom: 2%; 103 | } 104 | 105 | .reset { 106 | padding: 0 18px; 107 | } 108 | 109 | .red { 110 | color: #e74c3c; 111 | } 112 | 113 | .blue { 114 | color: #3498db; 115 | } 116 | 117 | #left { 118 | float: left; 119 | margin-left: 15%; 120 | margin-top: 5%; 121 | font-size: 150%; 122 | text-align: center; 123 | visibility: hidden; 124 | } 125 | 126 | #right { 127 | float: right; 128 | margin-right: 15%; 129 | margin-top: 5%; 130 | font-size: 150%; 131 | text-align: center; 132 | visibility: hidden; 133 | } 134 | 135 | span { 136 | font-size: 200%; 137 | } 138 | 139 | #left span { 140 | color: #e74c3c; 141 | } 142 | 143 | #right span { 144 | color: #3498db; 145 | } 146 | -------------------------------------------------------------------------------- /tic-tac-toe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tic Tac Toe 9 | 10 | 11 |
12 | Pick a symbol: 13 | 14 | 15 |
16 |

Tic Tac Toe

17 |

Player X Wins:

0
18 | 19 |
20 |
21 |   22 |   23 |   24 |
25 |
26 |   27 |   28 |   29 |
30 |
31 |   32 |   33 |   34 |
35 |
36 |
37 |

It's X's turn to go.

38 |
39 | 40 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /tic-tac-toe/js/tictactoe.js: -------------------------------------------------------------------------------- 1 | var spaces = document.getElementsByClassName('space'); 2 | var turn = document.getElementsByTagName('p')[2]; 3 | var rightScore = document.getElementById('right'); 4 | var rightScoreSpan = document.getElementById('right').getElementsByTagName('span')[0]; 5 | var leftScore = document.getElementById('left'); 6 | var leftScoreSpan = document.getElementById('left').getElementsByTagName('span')[0]; 7 | var button = document.getElementsByTagName('button'); 8 | var clicks = 0; 9 | var symbol; 10 | var computerSymbol; 11 | var arrX = []; 12 | var arrO = []; 13 | var winningMoves = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]]; 14 | var inRow = 0; 15 | var xWins = 0; 16 | var oWins = 0; 17 | var gameboard = ['', '', '', '', '', '', '', '', '']; 18 | var goComputer; 19 | 20 | document.addEventListener('DOMContentLoaded', function() { 21 | document.getElementsByClassName('container')[0].addEventListener('click', emptySpace); 22 | getSymbol(); 23 | button[2].addEventListener('click', function() { 24 | turn.innerHTML = "New game. It's X's turn to go."; 25 | clearBoard(); 26 | }); 27 | button[3].addEventListener('click', function() { 28 | resetScores(); 29 | }); 30 | }); 31 | 32 | function getSymbol() { 33 | document.getElementById('x').addEventListener('click', function() { 34 | symbol = 'X'; 35 | computerSymbol = 'O'; 36 | leftScore.getElementsByTagName('p')[0].innerHTML = "Player X Wins:"; 37 | rightScore.getElementsByTagName('p')[0].innerHTML = "Computer O Wins:"; 38 | visibilePage(); 39 | }); 40 | document.getElementById('o').addEventListener('click', function() { 41 | symbol = 'O'; 42 | computerSymbol = 'X'; 43 | rightScore.getElementsByTagName('p')[0].innerHTML = "Player O Wins:"; 44 | leftScore.getElementsByTagName('p')[0].innerHTML = "Computer X Wins:"; 45 | visibilePage(); 46 | neverLose(); 47 | }); 48 | } 49 | 50 | function visibilePage() { 51 | document.getElementById('symbol-container').style.display = 'none'; 52 | document.getElementsByClassName('container')[0].style.visibility = 'visible'; 53 | document.getElementsByClassName('container')[1].style.visibility = 'visible'; 54 | rightScore.style.visibility = 'visible'; 55 | leftScore.style.visibility = 'visible'; 56 | } 57 | 58 | function computerMove(idx) { 59 | if (computerSymbol === 'X') { 60 | spaces[idx].classList.add('red'); 61 | turn.innerHTML = "It's O's turn to go."; 62 | arrX.push(parseInt(spaces[idx].getAttribute('data-num'))); 63 | clicks++; 64 | if (checkForWin(arrX) === true) { 65 | turn.innerHTML = "Computer X won! New game. It's X's turn to go."; 66 | xWins++; 67 | leftScoreSpan.innerHTML = xWins; 68 | clearBoard(); 69 | } 70 | } else { 71 | spaces[idx].classList.add('blue'); 72 | turn.innerHTML = "It's X's turn to go."; 73 | arrO.push(parseInt(spaces[idx].getAttribute('data-num'))); 74 | clicks++; 75 | if (checkForWin(arrO) === true) { 76 | turn.innerHTML = "Computer O won! New game. It's X's turn to go."; 77 | oWins++; 78 | rightScoreSpan.innerHTML = oWins; 79 | clearBoard(); 80 | } 81 | } 82 | } 83 | 84 | function neverLose() { 85 | if (gameboard[0] === '' && ((gameboard[1] === symbol && gameboard[2] === symbol) || (gameboard[3] === symbol && gameboard[6] === symbol) || (gameboard[4] === symbol && gameboard[8] === symbol))) { 86 | gameboard[0] = computerSymbol; 87 | spaces[0].innerHTML = computerSymbol; 88 | computerMove(0); 89 | } else if (gameboard[1] === '' && ((gameboard[0] === symbol && gameboard[2] === symbol) || (gameboard[4] === symbol && gameboard[7] === symbol))) { 90 | gameboard[1] = computerSymbol; 91 | spaces[1].innerHTML = computerSymbol; 92 | computerMove(1); 93 | } else if (gameboard[2] === '' && ((gameboard[0] === symbol && gameboard[1] === symbol) || (gameboard[5] === symbol && gameboard[8] === symbol) || (gameboard[4] === symbol && gameboard[6] === symbol))) { 94 | gameboard[2] = computerSymbol; 95 | spaces[2].innerHTML = computerSymbol; 96 | computerMove(2); 97 | } else if (gameboard[3] === '' && ((gameboard[4] === symbol && gameboard[5] === symbol) || (gameboard[0] === symbol && gameboard[6] === symbol))) { 98 | gameboard[3] = computerSymbol; 99 | spaces[3].innerHTML = computerSymbol; 100 | computerMove(3); 101 | } else if (gameboard[4] === '' && ((gameboard[3] === symbol && gameboard[5] === symbol) || (gameboard[1] === symbol && gameboard[7] === symbol) || (gameboard[0] === symbol && gameboard[8] === symbol) || (gameboard[2] === symbol && gameboard[6] === symbol))) { 102 | gameboard[4] = computerSymbol; 103 | spaces[4].innerHTML = computerSymbol; 104 | computerMove(4); 105 | } else if (gameboard[5] === '' && ((gameboard[3] === symbol && gameboard[4] === symbol) || (gameboard[2] === symbol && gameboard[8] === symbol))) { 106 | gameboard[5] = computerSymbol; 107 | spaces[5].innerHTML = computerSymbol; 108 | computerMove(5); 109 | } else if (gameboard[6] === '' && ((gameboard[7] === symbol && gameboard[8] === symbol) || (gameboard[0] === symbol && gameboard[3] === symbol) || (gameboard[2] === symbol && gameboard[4] === symbol))) { 110 | gameboard[6] = computerSymbol; 111 | spaces[6].innerHTML = computerSymbol; 112 | computerMove(6); 113 | } else if (gameboard[7] === '' && ((gameboard[6] === symbol && gameboard[8] === symbol) || (gameboard[1] === symbol && gameboard[4] === symbol))) { 114 | gameboard[7] = computerSymbol; 115 | spaces[7].innerHTML = computerSymbol; 116 | computerMove(7); 117 | } else if (gameboard[8] === '' && ((gameboard[2] === symbol && gameboard[5] === symbol) || (gameboard[6] === symbol && gameboard[7] === symbol) || (gameboard[0] === symbol && gameboard[4] === symbol))) { 118 | gameboard[8] = computerSymbol; 119 | spaces[8].innerHTML = computerSymbol; 120 | computerMove(8); 121 | } else { 122 | goComputer = Math.floor(Math.random() * 9); 123 | if (gameboard[goComputer] === '') { 124 | gameboard[goComputer] = computerSymbol; 125 | spaces[goComputer].innerHTML = computerSymbol; 126 | computerMove(goComputer); 127 | } else { 128 | if (clicks >= 9) { 129 | turn.innerHTML = "The game was a draw. New game. It's X's turn to go."; 130 | clearBoard(); 131 | } else { 132 | neverLose(); 133 | } 134 | } 135 | } 136 | } 137 | 138 | function emptySpace(event) { 139 | if (event.target.innerHTML !== ' ') { 140 | turn.innerHTML = 'Player ' + symbol +': That spot is already taken. Go again.'; 141 | } else { 142 | event.target.innerHTML = symbol; 143 | gameboard[event.target.getAttribute('data-num')] = symbol; 144 | if (symbol === 'X') { 145 | event.target.classList.add('red'); 146 | turn.innerHTML = "It's O's turn to go."; 147 | arrX.push(parseInt(event.target.getAttribute('data-num'))); 148 | clicks++; 149 | if (checkForWin(arrX) === true) { 150 | turn.innerHTML = "Player X won! New game. It's X's turn to go."; 151 | xWins++; 152 | leftScoreSpan.innerHTML = xWins; 153 | clearBoard(); 154 | return false; 155 | } 156 | neverLose(); 157 | } else { 158 | event.target.classList.add('blue'); 159 | turn.innerHTML = "It's X's turn to go."; 160 | arrO.push(parseInt(event.target.getAttribute('data-num'))); 161 | clicks++; 162 | if (checkForWin(arrO) === true) { 163 | turn.innerHTML = "Player O won! New game. It's X's turn to go."; 164 | oWins++; 165 | rightScoreSpan.innerHTML = oWins; 166 | clearBoard(); 167 | return false; 168 | } 169 | neverLose(); 170 | } 171 | if (clicks >= 9) { 172 | turn.innerHTML = "The game was a draw. New game. It's X's turn to go."; 173 | clearBoard(); 174 | } 175 | } 176 | } 177 | 178 | function checkForWin(moves){ 179 | for (var i = 0; i < winningMoves.length; i++) { 180 | inRow = 0; 181 | for (var j = 0; j < winningMoves[i].length; j++) { 182 | if (moves.indexOf(winningMoves[i][j]) > -1){ 183 | inRow++; 184 | if (inRow === 3) return true; 185 | } 186 | } 187 | } 188 | return false; 189 | } 190 | 191 | function clearBoard() { 192 | for (var i = 0; i < spaces.length; i++) { 193 | spaces[i].innerHTML = " "; 194 | spaces[i].classList.remove('red'); 195 | spaces[i].classList.remove('blue'); 196 | } 197 | clicks = 0; 198 | arrX = []; 199 | arrO = []; 200 | gameboard = ['', '', '', '', '', '', '', '', '']; 201 | if (computerSymbol === 'X') neverLose(); 202 | } 203 | 204 | function resetScores() { 205 | clearBoard(); 206 | xWins = 0; 207 | oWins = 0; 208 | rightScoreSpan.innerHTML = "0"; 209 | leftScoreSpan.innerHTML = "0"; 210 | turn.innerHTML = "Scores reset. It's X's turn to go."; 211 | } 212 | -------------------------------------------------------------------------------- /twitch-tv/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/twitch-tv/images/logo.png -------------------------------------------------------------------------------- /twitch-tv/images/no.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/twitch-tv/images/no.png -------------------------------------------------------------------------------- /twitch-tv/images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/twitch-tv/images/search.png -------------------------------------------------------------------------------- /twitch-tv/images/twitch.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thomasvaeth/freecodecamp/b07a9ecefc3ca0dbf360569483bacf372eedf012/twitch-tv/images/twitch.ico -------------------------------------------------------------------------------- /twitch-tv/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Twitch TV 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
AllOnlineOffline
21 |
22 |
23 |
24 | 25 |
26 |
27 |
28 |
    29 |
    30 |
    31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /twitch-tv/js/twitch.js: -------------------------------------------------------------------------------- 1 | var users = [ 2 | 'justin', 3 | 'syndicate', 4 | 'riotgames', 5 | 'captainsparklez', 6 | 'LIRIK', 7 | 'PhantomL0rd', 8 | 'esl_csgo', 9 | 'sodapoppin', 10 | 'summit1g', 11 | 'Nightblue3', 12 | 'goldglove', 13 | 'tsm_bjergsen', 14 | 'imaqtpie', 15 | 'tsm_theoddone', 16 | 'trick2g' 17 | ]; 18 | var status; 19 | 20 | function appendUser(icon, name, status, link, info) { 21 | var user = document.createElement('li'); 22 | user.className = 'user'; 23 | 24 | var userIcon = document.createElement('img'); 25 | userIcon.className = 'user-icon'; 26 | userIcon.setAttribute('src', icon); 27 | user.appendChild(userIcon); 28 | $(userIcon).wrap(''); 29 | 30 | var userName = document.createElement('p'); 31 | userName.className = 'user-name'; 32 | userName.innerHTML = '' + name + ''; 33 | user.appendChild(userName); 34 | 35 | var userStatus = document.createElement('span'); 36 | userStatus.className = 'user-status'; 37 | userStatus.innerHTML = ''; 38 | user.appendChild(userStatus); 39 | 40 | if (info !== undefined) { 41 | var userInfo = document.createElement('p'); 42 | userInfo.className = 'user-info'; 43 | if (info.length >= 50) { 44 | userInfo.innerHTML = '' + info.substring(0, 47) + '...'; 45 | } else { 46 | userInfo.innerHTML = '' + info + ''; 47 | } 48 | user.appendChild(userInfo); 49 | } 50 | $('ul').append(user); 51 | } 52 | 53 | $(document).ready(function () { 54 | 55 | users.forEach(function(user) { 56 | $.get('https://api.twitch.tv/kraken/channels/' + user, function(callback) { 57 | if (callback.error !== "Not Found") { 58 | if (callback.logo === null) callback.logo = 'images/no.png'; 59 | var link = 'http://twitch.tv/' + user; 60 | $.get('https://api.twitch.tv/kraken/streams/' + user, function(nextCallback) { 61 | if (nextCallback.stream === null) { 62 | status = 'fa fa-exclamation'; 63 | appendUser(callback.logo, callback.display_name, status, link); 64 | } else { 65 | status = 'fa fa-twitch'; 66 | appendUser(callback.logo, callback.display_name, status, link, callback.status); 67 | } 68 | }, 'jsonp'); 69 | } 70 | }, 'jsonp'); 71 | }); 72 | 73 | $('td').on('click', function() { 74 | $('td').removeClass('active'); 75 | $(this).addClass('active'); 76 | var button = $(this).attr('id'); 77 | if (button === 'all') { 78 | $('li').show(); 79 | } else if (button === 'online') { 80 | $('.fa-exclamation').parent().parent().hide(); 81 | $('.fa-twitch').parent().parent().show(); 82 | } else { 83 | $('.fa-exclamation').parent().parent().show(); 84 | $('.fa-twitch').parent().parent().hide(); 85 | } 86 | }); 87 | 88 | $('input').keyup(function() { 89 | var searchBar = $(this).val(); 90 | $('li').each(function() { 91 | var entered = $(this).text().toLowerCase(); 92 | if (entered.indexOf(searchBar) >= 0) { 93 | $(this).show() 94 | } else { 95 | $(this).hide(); 96 | } 97 | }); 98 | }); 99 | 100 | }); -------------------------------------------------------------------------------- /twitch-tv/stylesheet/stylesheet.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: white; 3 | font-family: Helvetica, sans-serif; 4 | } 5 | 6 | a { 7 | text-decoration: none; 8 | color: #6441a5; 9 | } 10 | 11 | .twitch { 12 | display: block; 13 | margin: 0 auto 0 auto; 14 | width: 400px; 15 | } 16 | 17 | .container { 18 | width: 400px; 19 | margin: 0 auto; 20 | text-align: center; 21 | border: 1px solid #6441a5; 22 | } 23 | 24 | table { 25 | width: 100%; 26 | border-collapse: collapse; 27 | } 28 | 29 | td { 30 | background-color: #6441a5; 31 | color: white; 32 | padding: 20px; 33 | } 34 | 35 | td:hover { 36 | cursor: pointer; 37 | } 38 | 39 | .active { 40 | background-color: #B9a3e3; 41 | } 42 | 43 | #online { 44 | border-width: 0 1px; 45 | border-style: solid; 46 | } 47 | 48 | form { 49 | padding: 15px; 50 | border-bottom: 1px solid gainsboro; 51 | } 52 | 53 | input { 54 | border: 1px solid gainsboro; 55 | border-radius: 15px; 56 | height: 25px; 57 | padding: 0 30px; 58 | width: 80%; 59 | background: url('../images/search.png') no-repeat 10px; 60 | background-size: 15px; 61 | color: grey; 62 | } 63 | 64 | ul { 65 | padding: 0; 66 | list-style-type: none; 67 | } 68 | 69 | .user { 70 | display: block; 71 | padding: 15px; 72 | text-align: left; 73 | } 74 | 75 | .user-icon { 76 | border-radius: 100%; 77 | height: 50px; 78 | width: 50px; 79 | display: inline-block; 80 | float: left; 81 | } 82 | 83 | .user-name { 84 | display: inline-block; 85 | padding-left: 10px; 86 | } 87 | 88 | .user-info { 89 | display: block; 90 | color: grey; 91 | font-size: 12px; 92 | margin-top: -10px; 93 | padding-left: 60px; 94 | } 95 | 96 | .user-status { 97 | display: inline-block; 98 | float: right; 99 | padding-top: 15px; 100 | } 101 | 102 | .fa-exclamation { 103 | color: red; 104 | } 105 | 106 | .fa-twitch { 107 | color: green; 108 | } -------------------------------------------------------------------------------- /wikipedia-viewer/css/main.css: -------------------------------------------------------------------------------- 1 | body, 2 | h1, 3 | h2 { 4 | font-family: 'Raleway', sans-serif; 5 | } 6 | 7 | .vertical { 8 | position: absolute; 9 | top: 50%; 10 | transform: translateY(-50%); 11 | } 12 | 13 | .callout:hover { 14 | background-color: #EBEBEB; 15 | } 16 | 17 | h1 { 18 | font-size: 4rem; 19 | font-weight: 300; 20 | } 21 | 22 | h2 { 23 | text-transform: uppercase; 24 | } 25 | -------------------------------------------------------------------------------- /wikipedia-viewer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Wikipedia Viewer 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | 21 |

    Wikipedia Viewer

    22 | 23 |
    24 |
    25 |
    26 | 27 |
    28 |
    29 |
    30 |

    Or click here for a random article

    31 | 32 | 33 |
    34 |

    {{ result.title }}

    35 |

    {{ result.extract }}

    36 |
    37 |     38 | 39 |
    40 | 41 | 42 | -------------------------------------------------------------------------------- /wikipedia-viewer/js/app.js: -------------------------------------------------------------------------------- 1 | var app = angular.module('WikipediaApplication', []); 2 | 3 | app.controller('WikipediaController', ['$scope', '$http', function($scope, $http) { 4 | $scope.results = []; 5 | 6 | $scope.searchWikipedia = function() { 7 | var api = 'http://en.wikipedia.org/w/api.php?action=query&generator=search&prop=extracts&exintro&exsentences=1&exlimit=max&explaintext&gsrsearch='; 8 | var callback = '&format=json&callback=JSON_CALLBACK'; 9 | $http.jsonp(api + $scope.searchTerm + callback 10 | ).success(function(data) { 11 | document.getElementById('wikipedia').classList.remove('vertical'); 12 | $scope.results = data.query.pages; 13 | }).error(function(data) { 14 | console.log(data); 15 | }); 16 | 17 | if ($scope.searchTerm === '') $scope.results = []; 18 | } 19 | }]); 20 | --------------------------------------------------------------------------------