├── .DS_Store ├── .gitignore ├── .gitmodules ├── FirefoxWebconsole.png ├── README.md ├── cheatsheets ├── HTML Cheat Sheet.pdf ├── JavaScript Cheat Sheet.pdf └── jQuery Cheat Sheet.pdf ├── cleancode └── Readme.md ├── ppt ├── .DS_Store ├── 000 - Browsers Internals-Getting started.pptx ├── 000 - Programming Basics.pptx ├── 000a - HTML Basics.pptx ├── 001 - DataTypes.pptx ├── 001a - How Browser Works.pptx ├── 001b-Why JavaScript.pptx ├── 002 - Classes and objects.pptx ├── 003 - Spread Operator.pptx ├── 004 - Call Apply Bind.pptx ├── 005 - DOM manupu .pptx ├── Readme.md └── ~$004 - Call Apply Bind.pptx ├── puppeteer ├── get_text_value.js └── screenshot.js ├── workouts-100 ├── Modules_task │ ├── file.txt │ ├── fsexample.js │ ├── mymodule.js │ └── myserver.js ├── PlayingWithDOM │ ├── myclick.html │ └── readinput.html ├── README.md ├── SummaryList.txt └── jsontask │ ├── node_cors.js │ ├── sample.html │ └── scripts.js ├── workouts-101 ├── 00-template.html ├── 01-hello.html ├── 02-change.html ├── 03-piglatin.html ├── 04-binary.html ├── 05-special.html ├── 06-css.html ├── 07-jumbotron.css ├── 07-jumbotron.html ├── 08-buttons.css ├── 08-buttons.html ├── 09-navbar.css ├── 09-navbar.html ├── 10-form.css ├── 10-form.html ├── 11-login.css ├── 11-login.html ├── 12-featurette.css ├── 12-featurette.html ├── 13-textarea.html ├── 14-panel.css └── 14-panel.html ├── workouts-102 ├── .gitignore ├── Readme.md ├── spec │ ├── 01_factorsSpec.js │ ├── 02_reduceSpec.js │ ├── 03_uniqueSpec.js │ ├── 04_medianSpec.js │ ├── 05_indexWordsSpec.js │ ├── 06_caesarSpec.js │ ├── 07_sumPairsSpec.js │ ├── 08_fyShuffleSpec.js │ ├── 09_bubbleSortSpec.js │ ├── 10_changeBaseSpec.js │ ├── 11_combineArrSpec.js │ ├── 12_digitCombosSpec.js │ ├── 13_morseSpec.js │ ├── 14_insertionSortSpec.js │ ├── 15_scrambleWordSpec.js │ ├── 16_inWordsSpec.js │ ├── 17_nearestLargerSpec.js │ ├── 18_mergeSortSpec.js │ ├── 19_transposeSpec.js │ ├── 20_runTimeSpec.js │ ├── 21_nonRepeatsSpec.js │ ├── 22_orderedVowelsSpec.js │ ├── 23_recIntersectionSpec.js │ ├── 24_substringsSpec.js │ └── 25_maxSubsumSpec.js ├── src │ ├── 01_factors.js │ ├── 02_reduce.js │ ├── 03_unique.js │ ├── 04_median.js │ ├── 05_indexWords.js │ ├── 06_caesar.js │ ├── 07_sumPairs.js │ ├── 08_fyShuffle.js │ ├── 09_bubbleSort.js │ ├── 10_changeBase.js │ ├── 11_combineArr.js │ ├── 12_digitCombos.js │ ├── 13_morse.js │ ├── 14_insertionSort.js │ ├── 15_scrambleWord.js │ ├── 16_inWords.js │ ├── 17_nearestLarger.js │ ├── 18_mergeSort.js │ ├── 19_transpose.js │ ├── 20_runTime.js │ ├── 21_nonRepeats.js │ ├── 22_orderedVowels.js │ ├── 23_recIntersection.js │ ├── 24_substrings.js │ └── 25_maxSubsum.js └── vendor │ └── expect.js ├── workouts-103 ├── 01index.html ├── 02index.html ├── 03index.html ├── 04index.html ├── 05index.html ├── 06index.html ├── 07index.html ├── 08index.html ├── 09index.html ├── 10index.html ├── 11index.html ├── 12index.html ├── 13index.html ├── andy.html └── index.html ├── workouts-104 ├── 01-show-one-element │ ├── QUESTIONS.md │ ├── README.md │ ├── global.js │ ├── index.html │ └── solution │ │ ├── global.js │ │ └── index.html ├── 02-hide-many-elements │ ├── QUESTIONS.md │ ├── README.md │ ├── index.html │ └── solution │ │ ├── global.js │ │ └── index.html ├── 03-show-many-elements │ ├── QUESTIONS.md │ ├── README.md │ └── solution │ │ ├── global.js │ │ └── index.html ├── 04-toggle-many-elements │ ├── README.md │ ├── global.js │ ├── index.html │ └── solution │ │ ├── global.js │ │ └── index.html ├── 05-toggle-elements-of-dom-path │ ├── QUESTIONS.md │ ├── README.md │ ├── global.js │ ├── index.html │ └── solution │ │ ├── global.js │ │ └── index.html ├── 06-detecting-typed-input │ ├── README.md │ ├── global.js │ ├── index.html │ └── solution │ │ ├── global.js │ │ └── index.html ├── 07-automatic-tabbing-fields │ ├── QUESTIONS.md │ ├── README.md │ ├── global.js │ ├── index.html │ └── solution │ │ ├── global.js │ │ └── index.html └── README.md └── workouts-106 ├── README.md ├── accountant.js ├── cowboy.js ├── ihate.js ├── number-one.js ├── sapper.js └── true-detective.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | outline.txt 2 | book/scripts/lib* 3 | book/*.xml~ 4 | book/pub/fo/jquery-fundamentals-book.fo 5 | old/* 6 | sandbox 7 | publish/ 8 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "book/src/pt-BR"] 2 | path = book/src/pt-BR 3 | url = http://github.com/herberthamaral/jqfundamentals-pt-BR.git 4 | -------------------------------------------------------------------------------- /FirefoxWebconsole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/FirefoxWebconsole.png -------------------------------------------------------------------------------- /cheatsheets/HTML Cheat Sheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/cheatsheets/HTML Cheat Sheet.pdf -------------------------------------------------------------------------------- /cheatsheets/JavaScript Cheat Sheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/cheatsheets/JavaScript Cheat Sheet.pdf -------------------------------------------------------------------------------- /cheatsheets/jQuery Cheat Sheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/cheatsheets/jQuery Cheat Sheet.pdf -------------------------------------------------------------------------------- /ppt/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/ppt/.DS_Store -------------------------------------------------------------------------------- /ppt/000 - Browsers Internals-Getting started.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/ppt/000 - Browsers Internals-Getting started.pptx -------------------------------------------------------------------------------- /ppt/000 - Programming Basics.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/ppt/000 - Programming Basics.pptx -------------------------------------------------------------------------------- /ppt/000a - HTML Basics.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/ppt/000a - HTML Basics.pptx -------------------------------------------------------------------------------- /ppt/001 - DataTypes.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/ppt/001 - DataTypes.pptx -------------------------------------------------------------------------------- /ppt/001a - How Browser Works.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/ppt/001a - How Browser Works.pptx -------------------------------------------------------------------------------- /ppt/001b-Why JavaScript.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/ppt/001b-Why JavaScript.pptx -------------------------------------------------------------------------------- /ppt/002 - Classes and objects.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/ppt/002 - Classes and objects.pptx -------------------------------------------------------------------------------- /ppt/003 - Spread Operator.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/ppt/003 - Spread Operator.pptx -------------------------------------------------------------------------------- /ppt/004 - Call Apply Bind.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/ppt/004 - Call Apply Bind.pptx -------------------------------------------------------------------------------- /ppt/005 - DOM manupu .pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reach2arunprakash/javascript-101/023829a452d8fc5411fcd790ff84577886788c6a/ppt/005 - DOM manupu .pptx -------------------------------------------------------------------------------- /ppt/Readme.md: -------------------------------------------------------------------------------- 1 | this has all ppt 2 | -------------------------------------------------------------------------------- /ppt/~$004 - Call Apply Bind.pptx: -------------------------------------------------------------------------------- 1 | arunprakash murugesan arunprakash murugesan -------------------------------------------------------------------------------- /puppeteer/get_text_value.js : -------------------------------------------------------------------------------- 1 | const puppeteer = require('puppeteer'); 2 | 3 | (async () => { 4 | const browser = await puppeteer.launch() 5 | const page = await browser.newPage() 6 | await page.goto('https://news.ycombinator.com/news') 7 | const name = await page.$eval('.hnname > a', el => el.innerText) 8 | console.log(name) 9 | await browser.close() 10 | })() -------------------------------------------------------------------------------- /puppeteer/screenshot.js: -------------------------------------------------------------------------------- 1 | const puppeteer = require('puppeteer'); 2 | 3 | (async () => { 4 | const browser = await puppeteer.launch(); 5 | const page = await browser.newPage(); 6 | await page.setViewport({ 7 | width: 1434, 8 | height: 1768, 9 | deviceScaleFactor: 1, 10 | }); 11 | 12 | await page.goto('https://www.guvi.io'); 13 | await page.screenshot({path: 'example.png'}); 14 | 15 | await browser.close(); 16 | })(); 17 | 18 | 19 | //Putter -- > CDT & chromium + Jest 20 | -------------------------------------------------------------------------------- /workouts-100/Modules_task/file.txt: -------------------------------------------------------------------------------- 1 | line 1 2 | line 11 3 | line 111 4 | end of the file...get lost -------------------------------------------------------------------------------- /workouts-100/Modules_task/fsexample.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const arun = require('./mymodule'); 3 | 4 | fs.readFile('./file.txt', 'utf-8', (err, data) => { 5 | if(err) { throw err; } 6 | console.log('data: ', data); 7 | }); 8 | 9 | console.log(arun.add2(5)); 10 | console.log(arun.myvar); // fix this 11 | console.dir(arun); 12 | 13 | 14 | -------------------------------------------------------------------------------- /workouts-100/Modules_task/mymodule.js: -------------------------------------------------------------------------------- 1 | const myvar = "GUVI"; 2 | 3 | exports.add1 = function function_name(argument) { 4 | return argument + 1 ; 5 | } 6 | 7 | exports.add2 = function function_name(argument) { 8 | return argument + 2 ; 9 | } 10 | 11 | exports.add3 = function function_name(argument) { 12 | return argument + 3 ; 13 | } 14 | -------------------------------------------------------------------------------- /workouts-100/Modules_task/myserver.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | http.createServer(function (req, res) { 3 | res.write('Hello GUVI'); 4 | res.end(); 5 | }).listen(8080); -------------------------------------------------------------------------------- /workouts-100/PlayingWithDOM/myclick.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Demonstrating quirks of onevent HTML attributes on 8 | these three words. 9 |

10 | 11 | 12 |
Something in this div - https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
13 | 14 | 15 |

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick#Examples

16 | 17 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /workouts-100/PlayingWithDOM/readinput.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Get Text Input Field Value in JavaScript 6 | 7 | 8 | 9 | 10 | 11 | 25 | 26 | -------------------------------------------------------------------------------- /workouts-100/README.md: -------------------------------------------------------------------------------- 1 | Preread for JSON task: 2 | 3 | https://www.youtube.com/watch?v=rJesac0_Ftw 4 | -------------------------------------------------------------------------------- /workouts-100/SummaryList.txt: -------------------------------------------------------------------------------- 1 | Simple Event handler: 2 | --------------------- 3 | Summary: Create a div and change the color onmouse over 4 | Time to complete: About 15 minutes. 5 | 6 | Simple DOM manipulation: 7 | ------------------------ 8 | 9 | Summary: Create 2 div with text "I am div1" & "I am div2" and a button. On click of the button the text of the two divs has to be swapped. 10 | Time to complete: About 20 minutes. 11 | 12 | Reading contents from text box & Basic Regx: 13 | ------------------------------------------- 14 | Email & password validation 15 | Time to complete: About 30 minutes. 16 | 17 | Summary: Create a simple registration & login in HTML. While registering the username & password we have the following constraints 18 | 19 | UserName: It should be email id or phone number only. 20 | Password: Should be 8 characters long and should have a special character at end. 21 | 22 | Roll over images: 23 | --------------- 24 | 25 | Time to complete: About 15 minutes. 26 | Summary: Create an image box in which the images will be changing when you hover the box. You have have a list of 6 images. 27 | 28 | 29 | Hover on image to fit the frame: 30 | -------------------------------- 31 | Time to complete: About 15 minutes. 32 | Summary: You should have 1 large image box and 3 small ( preview boxes ) at the bottom. When you click the preview box it should appear in the large box at the top center. 33 | 34 | Create 4 group of display 35 | var groups = [ 36 | { 'id': 1, 'name': 'Student1', 'confirmed': false }, 37 | { 'id': 2, 'name': 'Student2', 'confirmed': true }, 38 | { 'id': 3, 'name': 'Student3', 'confirmed': false }, 39 | { 'id': 4, 'name': 'Student4', 'confirmed': false }, 40 | { 'id': 5, 'name': 'Student5', 'confirmed': true }, 41 | { 'id': 6, 'name': 'Student6', 'confirmed': true }, 42 | { 'id': 7, 'name': 'Student7', 'confirmed': true }, 43 | { 'id': 8, 'name': 'Student8', 'confirmed': true } 44 | ]; 45 | Time to complete: About 15 minutes. 46 | Summary: Display the above data in 4 columns so that each has 2 rows of student details. 47 | 48 | 49 | JSON - Dict 50 | 51 | Time to complete: About 30 minutes. 52 | Summary: 53 | /* 54 | Given an Array of strings, use Array#reduce to create an object that contains the number of times each string occured in the array. Return the object directly (no need to console.log). 55 | Example 56 | var inputWords = ['Apple', 'Banana', 'Apple', 'Durian', 'Durian', 'Durian'] 57 | 58 | console.log(countWords(inputWords)) 59 | 60 | // => 61 | // { 62 | // Apple: 2, 63 | // Banana: 1, 64 | // Durian: 3 65 | // } 66 | */ 67 | 68 | Map Usage 69 | 70 | Time to complete: About 30 minutes. 71 | Summary: 72 | 73 | // Convert the following code from a for-loop to Array#map: 74 | // * Your solution should use Array.prototype.map() 75 | // * Do not use any for/while loops or Array.prototype.forEach. 76 | // * Do not create any unnecessary functions e.g. helpers. 77 | 78 | function doubleAll(numbers) { 79 | var result = [] 80 | for (var i = 0; i < numbers.length; i++) { 81 | result.push(numbers[i] * 2) 82 | } 83 | return result 84 | } 85 | 86 | 87 | 88 | FB Wall- Infinite scroll 89 | Time to complete: About 90 minutes. 90 | Summary: Create a FB wall with infinite scroll 91 | 92 | https://codepen.io/wernight/details/YyvNoW 93 | Summary: Create a FB wall with infinite scroll 94 | 95 | 96 | Get and list all the repos 97 | https://api.github.com/users/reach2arunprakash/repos 98 | Time to complete: About 20 minutes. 99 | Summary: Get the repo list from the github api and display in the page. 100 | 101 | 102 | User validation with your flask api 103 | Time to complete: About 120 minutes. 104 | 105 | Local Storage: 106 | 107 | Store the loggedin user info in Local storage. 108 | Time to complete: About 60 minutes. 109 | 110 | Data Table 111 | https://datatables.net/ 112 | 113 | ListJS 114 | https://listjs.com/ 115 | -------------------------------------------------------------------------------- /workouts-100/jsontask/node_cors.js: -------------------------------------------------------------------------------- 1 | //npm install node-fetch --save 2 | 3 | const fetch = require('node-fetch'); 4 | 5 | var url_string2 = "https://api.domainsdb.info/v1/domains/search?domain=facebook&zone=com" 6 | 7 | 8 | fetch(url_string2) 9 | .then(res => res.json()) 10 | .then(json => console.log(json)); -------------------------------------------------------------------------------- /workouts-100/jsontask/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | GUVI App 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /workouts-100/jsontask/scripts.js: -------------------------------------------------------------------------------- 1 | // Create a request variable and assign a new XMLHttpRequest object to it. 2 | var request = new XMLHttpRequest() 3 | var url_string = 'https://restcountries.eu/rest/v2/all'; 4 | 5 | // Open a new connection, using the GET request on the URL endpoint 6 | request.open('GET',url_string , true) 7 | request.send(); 8 | 9 | request.onload = function() { 10 | // Begin accessing JSON data here 11 | //console.log(this.response); 12 | var data = JSON.parse(this.response) 13 | console.log(data); 14 | } 15 | 16 | 17 | /* 18 | var proxy = "https://cors-anywhere.herokuapp.com/" 19 | var url_string1 ="https://dog.ceo/api/breeds/list/all"; 20 | var url_string2 = "https://api.domainsdb.info/v1/domains/search?domain=facebook&zone=com" 21 | 22 | 23 | fetch(url_string2) // Call the fetch function passing the url of the API as a parameter 24 | .then(res=>res.json()) 25 | .then(data=>console.log(data)) 26 | */ 27 | 28 | -------------------------------------------------------------------------------- /workouts-101/00-template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | untitled 5 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /workouts-101/01-hello.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /workouts-101/02-change.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /workouts-101/03-piglatin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /workouts-101/04-binary.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | Enter number of binary digits to generate 21 |
22 | 23 | 24 | 25 | 26 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /workouts-101/05-special.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SPECIAL for Programmers 6 | 8 | 9 | 18 | 19 | 20 | 21 | 22 | 23 |

SPECIAL for Programmers

24 | 25 |
26 | 27 |
28 |

Do you comment your code?

29 | 30 | I comment code when code is not enough
31 | 32 | I comment when code somebody asks me too
33 | 34 | What is a comment?
35 |
36 | 37 | 38 |
39 |

Do you following the DRY principle?

40 | 41 | Yes, religiously
42 | 43 | Yes, but sometimes I find WET better
44 | 45 | What the heck do you mean DRY?
46 |
47 | 48 |
49 | What is your favorite programming language? 50 | 59 |
60 | 61 | 62 |
63 | What are your thoughts on Test Driven Development?
64 | 65 |
66 | 67 |
68 | What are your favorite Unix tools?
69 | grep 70 | sed 71 | find 72 | cut 73 |
74 | 75 | 76 | 77 | 78 |
79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /workouts-101/06-css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 31 | 32 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | 42 | 52 | 53 |
54 |

Main Content Area

55 |
56 | 57 |
58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /workouts-101/07-jumbotron.css: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | /* image is from http://imgur.com/r/highres */ 3 | background-image:url('http://i.imgur.com/l0qGeXe.jpg'); 4 | height: 1000px; 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | } 8 | 9 | .jumbotron .container { 10 | position: relative; 11 | top:100px; 12 | } 13 | 14 | .jumbotron h1 { 15 | color: #fff; 16 | font-size: 55px; 17 | font-family: 'Rock Salt', cursive; 18 | } 19 | 20 | .jumbotron p { 21 | color: #fff; 22 | font-size: 25px; 23 | font-weight: bold; 24 | } -------------------------------------------------------------------------------- /workouts-101/07-jumbotron.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | My Page 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Walking is great

17 |

There is a bright side to not owning a car...

18 |
19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /workouts-101/08-buttons.css: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | /* image is from http://imgur.com/r/highres */ 3 | background-image:url('http://i.imgur.com/W0uiUAR.jpg'); 4 | height: 1000px; 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | } 8 | 9 | .jumbotron .container { 10 | position: relative; 11 | top:100px; 12 | } 13 | 14 | .jumbotron h1 { 15 | color: #000; 16 | font-size: 55px; 17 | font-family: 'Racing Sans One', cursive; 18 | } 19 | 20 | .jumbotron p { 21 | color: #000; 22 | font-size: 25px; 23 | font-weight: bold; 24 | } 25 | 26 | .width-120px { 27 | width: 120px; 28 | } -------------------------------------------------------------------------------- /workouts-101/08-buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | My Page 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Koenigsegg

17 |

You know you want one

18 | Order 19 | Test Drive 20 |
21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /workouts-101/09-navbar.css: -------------------------------------------------------------------------------- 1 | .nav { 2 | padding-top: 10px; 3 | } 4 | 5 | .nav a { 6 | font-size: 15px; 7 | font-weight: bold; 8 | color: black; 9 | text-transform: uppercase; 10 | padding: 20px 50px; 11 | } 12 | 13 | .nav li { 14 | display: inline; 15 | } 16 | 17 | .jumbotron { 18 | /* image is from http://imgur.com/r/highres */ 19 | background-image:url('http://i.imgur.com/mkbS36L.jpg'); 20 | height: 600px; 21 | background-repeat: no-repeat; 22 | background-size: cover; 23 | } 24 | 25 | .jumbotron .container { 26 | position: relative; 27 | top:100px; 28 | } 29 | 30 | .jumbotron h1 { 31 | color: #000; 32 | font-size: 55px; 33 | } 34 | 35 | .jumbotron p { 36 | color: #000; 37 | font-size: 25px; 38 | font-weight: bold; 39 | } 40 | 41 | .width-120px { 42 | width: 120px; 43 | } 44 | -------------------------------------------------------------------------------- /workouts-101/09-navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | North Face 9 | 10 | 11 | 12 | 13 |
14 | 20 |
21 | 22 |
23 |
24 |

North Face

25 |

Clothing for Climbers

26 | Catalog 27 | Order 28 |
29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /workouts-101/10-form.css: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | /* image is from http://imgur.com/r/highres */ 3 | background-image:url('http://i.imgur.com/U7ZkM.jpg'); 4 | height: 850px; 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | } 8 | 9 | .jumbotron .container { 10 | position: relative; 11 | top:100px; 12 | } 13 | 14 | .jumbotron h1 { 15 | color: #fff; 16 | font-size: 55px; 17 | } 18 | 19 | .jumbotron p { 20 | color: #fff; 21 | font-size: 25px; 22 | font-weight: bold; 23 | } 24 | 25 | #entrance { 26 | width: 600px; 27 | height: 70px; 28 | font-size: 3em; 29 | margin-top: 25px; 30 | margin-bottom: 25px; 31 | text-align: center; 32 | } 33 | -------------------------------------------------------------------------------- /workouts-101/10-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dungeon Game 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Dungeon Game

18 |

You are in a dark room, what do you do?

19 |
20 | 21 |
22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /workouts-101/11-login.css: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | /* image is from http://imgur.com/r/highres */ 3 | background-image:url('http://i.imgur.com/trjRs1j.jpg'); 4 | height: 850px; 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | } 8 | 9 | .jumbotron .container { 10 | position: relative; 11 | top:100px; 12 | } 13 | 14 | .jumbotron h1 { 15 | color: #fff; 16 | font-size: 55px; 17 | } 18 | 19 | .jumbotron p { 20 | color: #fff; 21 | font-size: 25px; 22 | font-weight: bold; 23 | } 24 | 25 | .form-signin { 26 | max-width: 350px; 27 | margin: 0 auto; 28 | } -------------------------------------------------------------------------------- /workouts-101/11-login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | BaceFook 9 | 10 | 11 | 12 | 13 |
14 |
15 |

BaceFook

16 |

Join now, it won't always be free

17 | 27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /workouts-101/12-featurette.css: -------------------------------------------------------------------------------- 1 | .featurette-divider { 2 | margin: 80px 0; 3 | } 4 | -------------------------------------------------------------------------------- /workouts-101/12-featurette.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Featurette 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |
17 |
18 |

19 | Try our awesome feature 20 |

21 |

22 | Commale peronatons infestus conlui eccasus conto. Denta consa considero usitheri sufforminis coerere acantegum. Delicata invinavi dirado praesti altipatio. Depraesentiae opticum lenotheus revica. Efflectatus apopheum surare. 23 |

24 |
25 | 26 |
27 | 500x500 28 |
29 |
30 | 31 |
32 | 33 |
34 |
35 | 500x500 36 |
37 | 38 |
39 |

40 | Try another awesome feature 41 |

42 |

43 | Efflectatus apopheum surare. Seiurae fossitas carmitare septemeratus esicia panturatum. Praevectaria catumulare inpeticiae acclego glausoris condidium. Aliquate resoluto notificeo servitator disseisivum pertinui tubium. 44 | Agnorare arrata fibulatopoli. Didascio novisiaeum accubricitudinis aberravi eculabor tumularium adtonomanteum. 45 |

46 |
47 |
48 | 49 |
50 | 51 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /workouts-101/13-textarea.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pastabin 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |

15 | Pastabin 16 | Inspired by Pastebin 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 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /workouts-101/14-panel.css: -------------------------------------------------------------------------------- 1 | 2 | .panel { 3 | margin: 10px; 4 | } 5 | 6 | .menu-panel { 7 | min-height: 200px; 8 | max-height: 300px; 9 | } 10 | 11 | .main-panel { 12 | min-height: 500px; 13 | max-height: 800px; 14 | } 15 | -------------------------------------------------------------------------------- /workouts-101/14-panel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bootstrap Panel Example 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | A Small Panel 18 |
19 |
20 |
21 | 22 |
23 |
24 |
25 | A Big Panel 26 |
27 |
28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /workouts-102/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | solutions -------------------------------------------------------------------------------- /workouts-102/Readme.md: -------------------------------------------------------------------------------- 1 | JAVASCRIPT SUMMONS 2 | ================== 3 | 4 | This project is in its early stages and will continue to grow with new tests to summon. If something is not working or you would like a new feature, please use the issues page. 5 | 6 | Do you have what it takes to summon JavaScript? Let's find out! 7 | 8 | ## Information 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
LanguageJavaScript
Test SuiteMocha
Exercises25
26 | 27 | ## Installation 28 | 29 | To summon, you must first have npm installed. 30 | 31 | Once you have `npm`, install `mocha` globally by running the following command: 32 | 33 | ``` 34 | $ npm install -g mocha 35 | ``` 36 | 37 | Then fork and clone (or download) JavaScript Summons into your local directory: 38 | 39 | ## Usage 40 | 41 | All of the exercises are located in the `src` directory. They contain the necessary directions for the challenges; for more infomation regarding the tests, you can locate them in the `spec` directory. 42 | 43 | Navigate to the `src` directory and fire up an exercise: 44 | 45 | ```javascript 46 | /*--FACTORS 47 | 48 | Write a function that returns an array 49 | containing all of the factors of a number. 50 | 51 | For example: factors(10) returns [1, 2, 5, 10] 52 | */ 53 | 54 | var factors; 55 | 56 | factors = function(num) { 57 | return "summon here"; 58 | }; 59 | ``` 60 | Solve the exercise and summon the test inside `spec` directory by running the following command: 61 | 62 | ``` 63 | $ mocha filenameSpec.js 64 | ``` 65 | 66 | Be sure to run this command within the `spec` directory. 67 | 68 | ## Options 69 | 70 | Mocha's browser support may later be added; if you'd like this feature, let me know so that it'll be implemented into future updates. 71 | 72 | To summon with Mocha's different reporters, run the following command (e.g. spec): 73 | 74 | ``` 75 | $ mocha filenameSpec.js -R spec 76 | ``` 77 | 78 | You can view a list of Mocha's reporters by running the following command: 79 | 80 | ``` 81 | $ mocha --reporters 82 | ``` 83 | 84 | ## Credits 85 | 86 | These summons were inspired by the many wonderful online resources (e.g. RubyMonk, Hack Reactor, CoderByte, App Academy, etc.) that challenge developers everyday to become better. 87 | -------------------------------------------------------------------------------- /workouts-102/spec/01_factorsSpec.js: -------------------------------------------------------------------------------- 1 | var expect, factors; 2 | 3 | factors = require('../src/01_factors', expect = require('../vendor/expect')); 4 | 5 | describe("Factors", function() { 6 | it("returns an array of the input's factors", function() { 7 | return expect(factors(20)).to.eql([1, 2, 4, 5, 10, 20]); 8 | }); 9 | return it("returns null for negative integers", function() { 10 | return expect(factors(-7)).to.be["null"]; 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /workouts-102/spec/02_reduceSpec.js: -------------------------------------------------------------------------------- 1 | var expect, reduce; 2 | 3 | reduce = require('../src/02_reduce', expect = require('../vendor/expect')); 4 | 5 | describe("Reduce", function() { 6 | it("returns the sum of the elements in an array", function() { 7 | return expect(reduce([4, 4, 2, 7, 2, 5])).to.eql(24); 8 | }); 9 | return it("returns the sum of the elements plus the initial value", function() { 10 | return expect(reduce([2, 4, 2, 9, 2, 3], 10)).to.eql(32); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /workouts-102/spec/03_uniqueSpec.js: -------------------------------------------------------------------------------- 1 | var expect, unique; 2 | 3 | unique = require('../src/03_unique', expect = require('../vendor/expect')); 4 | 5 | describe("Unique", function() { 6 | it("returns a new array with the unique elements", function() { 7 | return expect(unique([0, 1, 1, 1, 2, 2, 3, 5, 6, 6, 10])).to.eql([0, 1, 2, 3, 5, 6, 10]); 8 | }); 9 | return it("returns a sorted array of the unique elements", function() { 10 | return expect(unique([4, 4, 2, 7, 2, 5])).to.eql([2, 4, 5, 7]); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /workouts-102/spec/04_medianSpec.js: -------------------------------------------------------------------------------- 1 | var expect, median; 2 | 3 | median = require('../src/04_median', expect = require('../vendor/expect')); 4 | 5 | describe("Median", function() { 6 | it("returns an empty array if there are no elements", function() { 7 | return expect(median([])).to.eql([]); 8 | }); 9 | it("returns the median for an array containing an even number of integers", function() { 10 | return expect(median([1, 3, 5, 6, 2, 9])).to.eql(4); 11 | }); 12 | return it("returns the median for an array containing an odd number of integers", function() { 13 | return expect(median([1, 3, 5, 2, 9])).to.eql(3); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /workouts-102/spec/05_indexWordsSpec.js: -------------------------------------------------------------------------------- 1 | var expect, indexWords; 2 | 3 | indexWords = require('../src/05_indexWords', expect = require('../vendor/expect')); 4 | 5 | describe("Index Words", function() { 6 | it("returns an object mapping out the words to their first letter", function() { 7 | var result, words; 8 | words = ["apple", "car"]; 9 | result = { 10 | a: ["apple"], 11 | c: ["car"] 12 | }; 13 | return expect(indexWords(words)).to.eql(result); 14 | }); 15 | it("handles letters that have multiple values", function() { 16 | var result, words; 17 | words = ["car", "cat"]; 18 | result = { 19 | c: ["car", "cat"] 20 | }; 21 | return expect(indexWords(words)).to.eql(result); 22 | }); 23 | return it("sorts the words in alphabetical order", function() { 24 | var result, words; 25 | words = ["banana", "cat", "car", "bat", "carrot", "yellow"]; 26 | result = { 27 | b: ["banana", "bat"], 28 | c: ["car", "carrot", "cat"], 29 | y: ["yellow"] 30 | }; 31 | return expect(indexWords(words)).to.eql(result); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /workouts-102/spec/06_caesarSpec.js: -------------------------------------------------------------------------------- 1 | var caesar, expect; 2 | 3 | caesar = require('../src/06_caesar', expect = require('../vendor/expect')); 4 | 5 | describe("Caesar Cipher", function() { 6 | it("encodes lowercase strings", function() { 7 | return expect(caesar("hello", 3)).to.equal("khoor"); 8 | }); 9 | it("encodes uppercase strings", function() { 10 | return expect(caesar("SUMMON", 3)).to.equal("VXPPRQ"); 11 | }); 12 | return it("encodes more complex sentences", function() { 13 | return expect(caesar("SUMMON my epic Javascript!", 3)).to.equal("VXPPRQ pb hslf Mdydvfulsw!"); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /workouts-102/spec/07_sumPairsSpec.js: -------------------------------------------------------------------------------- 1 | var expect, sumPairs; 2 | 3 | sumPairs = require('../src/07_sumPairs', expect = require('../vendor/expect')); 4 | 5 | describe("Sum Pairs", function() { 6 | it("returns an empty array", function() { 7 | return expect(sumPairs([0, 1, 3, 5, 7, 10], 9)).to.be.empty(); 8 | }); 9 | it("returns an array with the passing pairs", function() { 10 | return expect(sumPairs([7, 8, 3, 9, 1, -6, -8, 4], 11)).to.eql([[7, 4], [8, 3]]); 11 | }); 12 | return it("considers that two zeros are required, if zero is the target value", function() { 13 | expect(sumPairs([6, -6, 8, -8, 9, -10, 0, 1], 0)).to.eql([[6, -6], [8, -8]]); 14 | return expect(sumPairs([6, -6, 8, -8, 9, -10, 0, 0, 1], 0)).to.eql([[6, -6], [8, -8], [0, 0]]); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /workouts-102/spec/08_fyShuffleSpec.js: -------------------------------------------------------------------------------- 1 | var expect, fyShuffle; 2 | 3 | fyShuffle = require('../src/08_fyShuffle', expect = require('../vendor/expect')); 4 | 5 | describe("Fisher–Yates Shuffle", function() { 6 | return it("shuffles the array using the Fisher–Yates methodology", function() { 7 | var arr; 8 | arr = [1, 2, 3, 4, 5, 6, 7]; 9 | return expect(fyShuffle(arr)).to.not.eql(arr); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /workouts-102/spec/09_bubbleSortSpec.js: -------------------------------------------------------------------------------- 1 | var bubbleSort, expect; 2 | 3 | bubbleSort = require('../src/09_bubbleSort', expect = require('../vendor/expect')); 4 | 5 | describe("Bubble Sort", function() { 6 | it("returns an empty array if there are no elements to sort", function() { 7 | return expect(bubbleSort([])).to.eql([]); 8 | }); 9 | return it("sorts the array using Bubble Sort'", function() { 10 | return expect(bubbleSort([2, 8, 7, 5, 4, 9, 10, 3])).to.eql([2, 3, 4, 5, 7, 8, 9, 10]); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /workouts-102/spec/10_changeBaseSpec.js: -------------------------------------------------------------------------------- 1 | var changeBase, expect; 2 | 3 | changeBase = require('../src/10_changeBase', expect = require('../vendor/expect')); 4 | 5 | describe("Change Base", function() { 6 | it("changes numbers from base 10 to another", function() { 7 | expect(changeBase(10, 10, 2)).to.eql(1010); 8 | expect(changeBase(10, 10, 3)).to.eql(101); 9 | expect(changeBase(10, 10, 4)).to.eql(22); 10 | expect(changeBase(10, 10, 5)).to.eql(20); 11 | return expect(changeBase(10, 10, 16)).to.eql("a"); 12 | }); 13 | it("changes numbers from base 2 to another", function() { 14 | expect(changeBase(101, 2, 10)).to.eql(5); 15 | expect(changeBase(10011, 2, 8)).to.eql(23); 16 | return expect(changeBase(2, 2, 16)).to.eql("4b"); 17 | }); 18 | return it("changes numbers from any base to another", function() { 19 | expect(changeBase(1231, 4, 10)).to.eql(109); 20 | expect(changeBase(1231, 4, 2)).to.eql(1101101); 21 | expect(changeBase(1231, 8, 2)).to.eql(1010011001); 22 | expect(changeBase(1231, 8, 16)).to.eql(299); 23 | return expect(changeBase(1245, 8, 16)).to.eql("2a5"); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /workouts-102/spec/11_combineArrSpec.js: -------------------------------------------------------------------------------- 1 | var combineArr, expect; 2 | 3 | combineArr = require('../src/11_combineArr', expect = require('../vendor/expect')); 4 | 5 | describe("Combine Arrays", function() { 6 | it("combines two arrays into a single array", function() { 7 | return expect(combineArr([1, 2, 3], [4, 5, 6])).to.eql([1, 2, 3, 4, 5, 6]); 8 | }); 9 | it("combines two unsorted arrays", function() { 10 | return expect(combineArr([3, 2, 1], [4, 6, 5])).to.eql([1, 2, 3, 4, 5, 6]); 11 | }); 12 | return it("returns a sorted array without any duplicates", function() { 13 | return expect(combineArr([3, 2, 2], [4, 5, 5])).to.eql([2, 3, 4, 5]); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /workouts-102/spec/12_digitCombosSpec.js: -------------------------------------------------------------------------------- 1 | var digitsCombos, expect; 2 | 3 | digitsCombos = require('../src/12_digitCombos', expect = require('../vendor/expect')); 4 | 5 | describe("Digit Combinations", function() { 6 | it("returns the single combination of a 1 digit number", function() { 7 | return expect(digitCombos(5)).to.eql([5]); 8 | }); 9 | it("returns the sorted combinations of a 2 digit number", function() { 10 | return expect(digitCombos(12)).to.eql([12, 21]); 11 | }); 12 | it("returns the combinations of a 3 digit number", function() { 13 | return expect(digitCombos(123)).to.eql([123, 132, 213, 231, 312, 321]); 14 | }); 15 | it("returns the combinations of a 4 digit number", function() { 16 | return expect(digitCombos(1234)).to.eql([1234, 1243, 1324, 1342, 1423, 1432, 2134, 2143, 2314, 2341, 2413, 2431, 3124, 3142, 3214, 3241, 3412, 3421, 4123, 4132, 4213, 4231, 4312, 4321]); 17 | }); 18 | return it("returns the combinations of a 5+ digit number", function() { 19 | expect(digitCombos(12345)).to.have.length(120); 20 | expect(digitCombos(123456)).to.have.length(720); 21 | return expect(digitCombos(1234567)).to.have.length(5040); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /workouts-102/spec/13_morseSpec.js: -------------------------------------------------------------------------------- 1 | var expect, morse; 2 | 3 | morse = require('../src/13_morse', expect = require('../vendor/expect')); 4 | 5 | describe("Morse", function() { 6 | it("converts a simple letter", function() { 7 | return expect(morse("q")).to.equal("--.-"); 8 | }); 9 | it("converts a small word", function() { 10 | return expect(morse("cat")).to.equal("-.-. .- -"); 11 | }); 12 | return it("converts a sentence", function() { 13 | return expect(morse("cat in hat")).to.equal("-.-. .- - .. -. .... .- -"); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /workouts-102/spec/14_insertionSortSpec.js: -------------------------------------------------------------------------------- 1 | var expect, insertionSort; 2 | 3 | insertionSort = require('../src/14_insertionSort', expect = require('../vendor/expect')); 4 | 5 | describe("Insertion Sort", function() { 6 | it("returns an empty array if there are no elements to sort", function() { 7 | return expect(insertionSort([])).to.eql([]); 8 | }); 9 | return it("sorts the array using Insertion Sort'", function() { 10 | return expect(insertionSort([2, 8, 7, 5, 4, 9, 10, 3])).to.eql([2, 3, 4, 5, 7, 8, 9, 10]); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /workouts-102/spec/15_scrambleWordSpec.js: -------------------------------------------------------------------------------- 1 | var expect, scrambleWord; 2 | 3 | scrambleWord = require('../src/15_scrambleWord', expect = require('../vendor/expect')); 4 | 5 | describe("Scramble Word", function() { 6 | it("handles a simple word", function() { 7 | return expect(scrambleWord("cat", ["tac"])).to.eql(["tac"]); 8 | }); 9 | it("does not return a word", function() { 10 | return expect(scrambleWord("cat", ["tom"])).to.eql([]); 11 | }); 12 | it("handles a simple word from a larger array", function() { 13 | return expect(scrambleWord("cat", ["tic", "toc", "tac", "toe"])).to.eql(["tac"]); 14 | }); 15 | it("only handles words of the correct length", function() { 16 | return expect(scrambleWord("cat", ["scatter", "tac", "ca"])).to.eql(["tac"]); 17 | }); 18 | return it("handles multiple successful cases", function() { 19 | return expect(scrambleWord("turn", ["numb", "turn", "runt", "nurt"])).to.eql(["turn", "runt", "nurt"]); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /workouts-102/spec/16_inWordsSpec.js: -------------------------------------------------------------------------------- 1 | var expect, inWords; 2 | 3 | inWords = require('../src/16_inWords', expect = require('../vendor/expect')); 4 | 5 | describe("In Words", function() { 6 | it("reads 0 to 9", function() { 7 | expect(inWords(0)).to.equal('zero'); 8 | expect(inWords(1)).to.equal('one'); 9 | expect(inWords(2)).to.equal('two'); 10 | expect(inWords(3)).to.equal('three'); 11 | expect(inWords(4)).to.equal('four'); 12 | expect(inWords(5)).to.equal('five'); 13 | expect(inWords(6)).to.equal('six'); 14 | expect(inWords(7)).to.equal('seven'); 15 | expect(inWords(8)).to.equal('eight'); 16 | return expect(inWords(9)).to.equal('nine'); 17 | }); 18 | it("reads 10 to 12", function() { 19 | expect(inWords(10)).to.equal('ten'); 20 | expect(inWords(11)).to.equal('eleven'); 21 | return expect(inWords(12)).to.equal('twelve'); 22 | }); 23 | it("reads teens", function() { 24 | expect(inWords(13)).to.equal('thirteen'); 25 | expect(inWords(14)).to.equal('fourteen'); 26 | expect(inWords(15)).to.equal('fifteen'); 27 | expect(inWords(16)).to.equal('sixteen'); 28 | expect(inWords(17)).to.equal('seventeen'); 29 | expect(inWords(18)).to.equal('eighteen'); 30 | return expect(inWords(19)).to.equal('nineteen'); 31 | }); 32 | it("reads tens", function() { 33 | expect(inWords(20)).to.equal('twenty'); 34 | expect(inWords(30)).to.equal('thirty'); 35 | expect(inWords(40)).to.equal('forty'); 36 | expect(inWords(50)).to.equal('fifty'); 37 | expect(inWords(60)).to.equal('sixty'); 38 | expect(inWords(70)).to.equal('seventy'); 39 | expect(inWords(80)).to.equal('eighty'); 40 | return expect(inWords(90)).to.equal('ninety'); 41 | }); 42 | it("reads various other numbers less than 100", function() { 43 | expect(inWords(20)).to.equal('twenty'); 44 | expect(inWords(77)).to.equal('seventy seven'); 45 | return expect(inWords(99)).to.equal('ninety nine'); 46 | }); 47 | it("reads hundreds", function() { 48 | expect(inWords(100)).to.equal('one hundred'); 49 | expect(inWords(200)).to.equal('two hundred'); 50 | expect(inWords(300)).to.equal('three hundred'); 51 | expect(inWords(123)).to.equal('one hundred twenty three'); 52 | expect(inWords(777)).to.equal('seven hundred seventy seven'); 53 | expect(inWords(818)).to.equal('eight hundred eighteen'); 54 | expect(inWords(512)).to.equal('five hundred twelve'); 55 | return expect(inWords(999)).to.equal('nine hundred ninety nine'); 56 | }); 57 | it("reads thousands", function() { 58 | expect(inWords(1000)).to.equal('one thousand'); 59 | expect(inWords(32767)).to.equal('thirty two thousand seven hundred sixty seven'); 60 | return expect(inWords(32768)).to.equal('thirty two thousand seven hundred sixty eight'); 61 | }); 62 | it("reads millions", function() { 63 | return expect(inWords(10000001)).to.equal('ten million one'); 64 | }); 65 | it("reads billions", function() { 66 | return expect(inWords(1234567890)).to.equal('one billion two hundred thirty four million five hundred sixty seven thousand eight hundred ninety'); 67 | }); 68 | return it("reads trillions", function() { 69 | expect(inWords(1000000000000)).to.equal('one trillion'); 70 | expect(inWords(1000000000001)).to.equal('one trillion one'); 71 | return expect(inWords(1888259040036)).to.equal('one trillion eight hundred eighty eight billion two hundred fifty nine million forty thousand thirty six'); 72 | }); 73 | }); 74 | -------------------------------------------------------------------------------- /workouts-102/spec/17_nearestLargerSpec.js: -------------------------------------------------------------------------------- 1 | var expect, nearestLarger; 2 | 3 | nearestLarger = require('../src/17_nearestLarger', expect = require('../vendor/expect')); 4 | 5 | describe("Nearest Larger", function() { 6 | it("return the nearest larger integer's index to the left", function() { 7 | return expect(nearestLarger([2, 8, 7, 4, 9], 2)).to.eql(1); 8 | }); 9 | it("returns the nearest larger integer's index to the right", function() { 10 | return expect(nearestLarger([2, 4, 7, 8, 9], 2)).to.eql(3); 11 | }); 12 | it("returns the left result if it's a tie", function() { 13 | return expect(nearestLarger([1, 8, 7, 4, 7], 3)).to.eql(2); 14 | }); 15 | it("iterates through the array to find the result", function() { 16 | return expect(nearestLarger([4, 7, 8, 5, 9], 2)).to.eql(4); 17 | }); 18 | return it("returns null if no results were found", function() { 19 | return expect(nearestLarger([1, 3, 2, 4, 2], 3)).to.eql(null); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /workouts-102/spec/18_mergeSortSpec.js: -------------------------------------------------------------------------------- 1 | var expect, mergeSort; 2 | 3 | mergeSort = require('../src/18_mergeSort', expect = require('../vendor/expect')); 4 | 5 | describe("Merge Sort", function() { 6 | it("returns an empty array if there are no elements to sort", function() { 7 | return expect(mergeSort([])).to.eql([]); 8 | }); 9 | return it("sorts the array using Merge Sort'", function() { 10 | return expect(mergeSort([2, 8, 7, 5, 4, 9, 10, 3])).to.eql([2, 3, 4, 5, 7, 8, 9, 10]); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /workouts-102/spec/19_transposeSpec.js: -------------------------------------------------------------------------------- 1 | var expect, transpose; 2 | 3 | transpose = require('../src/19_transpose', expect = require('../vendor/expect')); 4 | 5 | describe("Transpose", function() { 6 | it("converts between row-oriented and column-oriented representations", function() { 7 | var input, result; 8 | input = [[0, 1, 2], [3, 4, 5], [6, 7, 8]]; 9 | result = [[0, 3, 6], [1, 4, 7], [2, 5, 8]]; 10 | return expect(transpose(input)).to.eql(result); 11 | }); 12 | return it("converts between asymmetrical representations", function() { 13 | var input, result; 14 | input = [[0, 1, 2, 3], [4, 5], [6, 7, 8, 9]]; 15 | result = [[0, 4, 6], [1, 5, 7], [2, void 0, 8], [3, void 0, 9]]; 16 | return expect(transpose(input)).to.eql(result); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /workouts-102/spec/20_runTimeSpec.js: -------------------------------------------------------------------------------- 1 | var expect, runTime; 2 | 3 | runTime = require('../src/20_runTime', expect = require('../vendor/expect')); 4 | 5 | describe("Run Time", function() { 6 | return it("calculates the time taken to run a function", function() { 7 | var test; 8 | test = function() { 9 | var num, _i, _results; 10 | _results = []; 11 | for (num = _i = 0; _i <= 999999999; num = ++_i) { 12 | _results.push(num); 13 | } 14 | return _results; 15 | }; 16 | return expect(runTime(test)).to.be.above(700); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /workouts-102/spec/21_nonRepeatsSpec.js: -------------------------------------------------------------------------------- 1 | var expect, nonRepeats; 2 | 3 | nonRepeats = require('../src/21_nonRepeats', expect = require('../vendor/expect')); 4 | 5 | describe("Non Repeats", function() { 6 | it("return the number(s) with unique digtis", function() { 7 | return expect(nonRepeats(198, 199)).to.eql([198]); 8 | }); 9 | it("return the number(s) with unique digtis", function() { 10 | return expect(nonRepeats(1980, 1988)).to.eql([1980, 1982, 1983, 1984, 1985, 1986, 1987]); 11 | }); 12 | return it("return an empty array if the digits are not unique", function() { 13 | return expect(nonRepeats(898)).to.eql([]); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /workouts-102/spec/22_orderedVowelsSpec.js: -------------------------------------------------------------------------------- 1 | var expect, orderedVowels; 2 | 3 | orderedVowels = require('../src/22_orderedVowels', expect = require('../vendor/expect')); 4 | 5 | describe("Ordered Vowels", function() { 6 | it("returns a word that is in order", function() { 7 | return expect(orderedVowels("amends")).to.equal("amends"); 8 | }); 9 | it("does not return a word that is not in order", function() { 10 | return expect(orderedVowels("complicated")).to.equal(""); 11 | }); 12 | it("handle double vowels", function() { 13 | return expect(orderedVowels("afoot")).to.equal("afoot"); 14 | }); 15 | it("handles a word with a single vowel", function() { 16 | return expect(orderedVowels("ham")).to.equal("ham"); 17 | }); 18 | it("handles a word with no vowel", function() { 19 | return expect(orderedVowels("crypt")).to.equal("crypt"); 20 | }); 21 | it("handles a word with a single letter", function() { 22 | return expect(orderedVowels("o")).to.equal("o"); 23 | }); 24 | it("ignores the letter y", function() { 25 | return expect(orderedVowels("tamely")).to.equal("tamely"); 26 | }); 27 | return it("processes a string with several words", function() { 28 | var phrase, result; 29 | phrase = "this is a test of the vowel ordering system"; 30 | result = "this is a test of the system"; 31 | return expect(orderedVowels(phrase)).to.equal(result); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /workouts-102/spec/23_recIntersectionSpec.js: -------------------------------------------------------------------------------- 1 | var expect, recIntersection; 2 | 3 | recIntersection = require('../src/23_recIntersection', expect = require('../vendor/expect')); 4 | 5 | describe("Rectangle Intersection", function() { 6 | it("handles a simple case", function() { 7 | return expect(recIntersection([[0, 0], [2, 1]], [[1, 0], [3, 1]])).to.eql([[1, 0], [2, 1]]); 8 | }); 9 | it("returns the smaller rectangle if engulfed completely", function() { 10 | return expect(recIntersection([[1, 1], [2, 2]], [[0, 0], [5, 5]])).to.eql([[1, 1], [2, 2]]); 11 | }); 12 | it("returns null if there is no intersection", function() { 13 | return expect(recIntersection([[1, 1], [2, 2]], [[4, 4], [5, 5]])).to.be["null"]; 14 | }); 15 | return it("handles a more complex case", function() { 16 | return expect(recIntersection([[1, 1], [5, 4]], [[2, 2], [3, 5]])).to.eql([[2, 2], [3, 4]]); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /workouts-102/spec/24_substringsSpec.js: -------------------------------------------------------------------------------- 1 | var expect, substrings; 2 | 3 | substrings = require('../src/24_substrings', expect = require('../vendor/expect')); 4 | 5 | describe("Substrings", function() { 6 | it("returns the substrings of a single character", function() { 7 | return expect(substrings("a")).to.eql(["a"]); 8 | }); 9 | it("returns the substrings of a double digit character", function() { 10 | return expect(substrings("of")).to.eql(["o", "of", "f"]); 11 | }); 12 | return it("returns the substrings of a double digit character", function() { 13 | return expect(substrings("cat")).to.eql(["c", "ca", "cat", "a", "at", "t"]); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /workouts-102/spec/25_maxSubsumSpec.js: -------------------------------------------------------------------------------- 1 | var expect, maxSubsum; 2 | 3 | maxSubsum = require('../src/25_maxSubsum', expect = require('../vendor/expect')); 4 | 5 | describe("Max Subsum", function() { 6 | it("returns the subarray with the largest sum", function() { 7 | return expect(maxSubsum([−2, 1, −3, 4, −1, 2, 1, −5, 4])).to.eql([4, −1, 2, 1]); 8 | }); 9 | it("returns the subarray with the largest sum", function() { 10 | return expect(maxSubsum([1, -3, 5, -2, 9, -8, -6, 4])).to.eql([5, -2, 9]); 11 | }); 12 | return it("returns the subarray with the largest sum", function() { 13 | return expect(maxSubsum([4, -2, -8, 5, -2, 7, 7, 2, -6, 5])).to.eql([5, -2, 7, 7, 2]); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /workouts-102/src/01_factors.js: -------------------------------------------------------------------------------- 1 | /*--FACTORS 2 | 3 | Write a function that returns an array 4 | containing all of the factors of a number. 5 | 6 | For example: factors(10) returns [1, 2, 5, 10] 7 | */ 8 | 9 | var factors; 10 | 11 | factors = function(num) { 12 | if(num<0) 13 | { 14 | return "null"; 15 | } 16 | dummy = [] 17 | for(i=1;i<=num;i++) 18 | if(num%i==0) 19 | { 20 | dummy.push(i); 21 | } 22 | return dummy; 23 | }; 24 | 25 | /*--Mocha Testing--*/ 26 | 27 | 28 | module.exports = factors; 29 | -------------------------------------------------------------------------------- /workouts-102/src/02_reduce.js: -------------------------------------------------------------------------------- 1 | /*--REDUCE 2 | 3 | Return the sum of all the elements in an array 4 | plus an optional initial value. 5 | 6 | For example: reduce([1, 2, 3], 10) returns 16 7 | */ 8 | 9 | var reduce; 10 | 11 | reduce = function(arr, initial) { 12 | 13 | if(isNaN(initial)) 14 | { 15 | initial = 0; 16 | } 17 | for(var i=0;i= start && this.obj <= finish 232 | , function(){ return 'expected ' + i(this.obj) + ' to be within ' + range } 233 | , function(){ return 'expected ' + i(this.obj) + ' to not be within ' + range }); 234 | return this; 235 | }; 236 | 237 | /** 238 | * Assert typeof / instance of 239 | * 240 | * @api public 241 | */ 242 | 243 | Assertion.prototype.a = 244 | Assertion.prototype.an = function (type) { 245 | if ('string' == typeof type) { 246 | // proper english in error msg 247 | var n = /^[aeiou]/.test(type) ? 'n' : ''; 248 | 249 | // typeof with support for 'array' 250 | this.assert( 251 | 'array' == type ? isArray(this.obj) : 252 | 'object' == type 253 | ? 'object' == typeof this.obj && null !== this.obj 254 | : type == typeof this.obj 255 | , function(){ return 'expected ' + i(this.obj) + ' to be a' + n + ' ' + type } 256 | , function(){ return 'expected ' + i(this.obj) + ' not to be a' + n + ' ' + type }); 257 | } else { 258 | // instanceof 259 | var name = type.name || 'supplied constructor'; 260 | this.assert( 261 | this.obj instanceof type 262 | , function(){ return 'expected ' + i(this.obj) + ' to be an instance of ' + name } 263 | , function(){ return 'expected ' + i(this.obj) + ' not to be an instance of ' + name }); 264 | } 265 | 266 | return this; 267 | }; 268 | 269 | /** 270 | * Assert numeric value above _n_. 271 | * 272 | * @param {Number} n 273 | * @api public 274 | */ 275 | 276 | Assertion.prototype.greaterThan = 277 | Assertion.prototype.above = function (n) { 278 | this.assert( 279 | this.obj > n 280 | , function(){ return 'expected ' + i(this.obj) + ' to be above ' + n } 281 | , function(){ return 'expected ' + i(this.obj) + ' to be below ' + n }); 282 | return this; 283 | }; 284 | 285 | /** 286 | * Assert numeric value below _n_. 287 | * 288 | * @param {Number} n 289 | * @api public 290 | */ 291 | 292 | Assertion.prototype.lessThan = 293 | Assertion.prototype.below = function (n) { 294 | this.assert( 295 | this.obj < n 296 | , function(){ return 'expected ' + i(this.obj) + ' to be below ' + n } 297 | , function(){ return 'expected ' + i(this.obj) + ' to be above ' + n }); 298 | return this; 299 | }; 300 | 301 | /** 302 | * Assert string value matches _regexp_. 303 | * 304 | * @param {RegExp} regexp 305 | * @api public 306 | */ 307 | 308 | Assertion.prototype.match = function (regexp) { 309 | this.assert( 310 | regexp.exec(this.obj) 311 | , function(){ return 'expected ' + i(this.obj) + ' to match ' + regexp } 312 | , function(){ return 'expected ' + i(this.obj) + ' not to match ' + regexp }); 313 | return this; 314 | }; 315 | 316 | /** 317 | * Assert property "length" exists and has value of _n_. 318 | * 319 | * @param {Number} n 320 | * @api public 321 | */ 322 | 323 | Assertion.prototype.length = function (n) { 324 | expect(this.obj).to.have.property('length'); 325 | var len = this.obj.length; 326 | this.assert( 327 | n == len 328 | , function(){ return 'expected ' + i(this.obj) + ' to have a length of ' + n + ' but got ' + len } 329 | , function(){ return 'expected ' + i(this.obj) + ' to not have a length of ' + len }); 330 | return this; 331 | }; 332 | 333 | /** 334 | * Assert property _name_ exists, with optional _val_. 335 | * 336 | * @param {String} name 337 | * @param {Mixed} val 338 | * @api public 339 | */ 340 | 341 | Assertion.prototype.property = function (name, val) { 342 | if (this.flags.own) { 343 | this.assert( 344 | Object.prototype.hasOwnProperty.call(this.obj, name) 345 | , function(){ return 'expected ' + i(this.obj) + ' to have own property ' + i(name) } 346 | , function(){ return 'expected ' + i(this.obj) + ' to not have own property ' + i(name) }); 347 | return this; 348 | } 349 | 350 | if (this.flags.not && undefined !== val) { 351 | if (undefined === this.obj[name]) { 352 | throw new Error(i(this.obj) + ' has no property ' + i(name)); 353 | } 354 | } else { 355 | var hasProp; 356 | try { 357 | hasProp = name in this.obj 358 | } catch (e) { 359 | hasProp = undefined !== this.obj[name] 360 | } 361 | 362 | this.assert( 363 | hasProp 364 | , function(){ return 'expected ' + i(this.obj) + ' to have a property ' + i(name) } 365 | , function(){ return 'expected ' + i(this.obj) + ' to not have a property ' + i(name) }); 366 | } 367 | 368 | if (undefined !== val) { 369 | this.assert( 370 | val === this.obj[name] 371 | , function(){ return 'expected ' + i(this.obj) + ' to have a property ' + i(name) 372 | + ' of ' + i(val) + ', but got ' + i(this.obj[name]) } 373 | , function(){ return 'expected ' + i(this.obj) + ' to not have a property ' + i(name) 374 | + ' of ' + i(val) }); 375 | } 376 | 377 | this.obj = this.obj[name]; 378 | return this; 379 | }; 380 | 381 | /** 382 | * Assert that the array contains _obj_ or string contains _obj_. 383 | * 384 | * @param {Mixed} obj|string 385 | * @api public 386 | */ 387 | 388 | Assertion.prototype.string = 389 | Assertion.prototype.contain = function (obj) { 390 | if ('string' == typeof this.obj) { 391 | this.assert( 392 | ~this.obj.indexOf(obj) 393 | , function(){ return 'expected ' + i(this.obj) + ' to contain ' + i(obj) } 394 | , function(){ return 'expected ' + i(this.obj) + ' to not contain ' + i(obj) }); 395 | } else { 396 | this.assert( 397 | ~indexOf(this.obj, obj) 398 | , function(){ return 'expected ' + i(this.obj) + ' to contain ' + i(obj) } 399 | , function(){ return 'expected ' + i(this.obj) + ' to not contain ' + i(obj) }); 400 | } 401 | return this; 402 | }; 403 | 404 | /** 405 | * Assert exact keys or inclusion of keys by using 406 | * the `.own` modifier. 407 | * 408 | * @param {Array|String ...} keys 409 | * @api public 410 | */ 411 | 412 | Assertion.prototype.key = 413 | Assertion.prototype.keys = function ($keys) { 414 | var str 415 | , ok = true; 416 | 417 | $keys = isArray($keys) 418 | ? $keys 419 | : Array.prototype.slice.call(arguments); 420 | 421 | if (!$keys.length) throw new Error('keys required'); 422 | 423 | var actual = keys(this.obj) 424 | , len = $keys.length; 425 | 426 | // Inclusion 427 | ok = every($keys, function (key) { 428 | return ~indexOf(actual, key); 429 | }); 430 | 431 | // Strict 432 | if (!this.flags.not && this.flags.only) { 433 | ok = ok && $keys.length == actual.length; 434 | } 435 | 436 | // Key string 437 | if (len > 1) { 438 | $keys = map($keys, function (key) { 439 | return i(key); 440 | }); 441 | var last = $keys.pop(); 442 | str = $keys.join(', ') + ', and ' + last; 443 | } else { 444 | str = i($keys[0]); 445 | } 446 | 447 | // Form 448 | str = (len > 1 ? 'keys ' : 'key ') + str; 449 | 450 | // Have / include 451 | str = (!this.flags.only ? 'include ' : 'only have ') + str; 452 | 453 | // Assertion 454 | this.assert( 455 | ok 456 | , function(){ return 'expected ' + i(this.obj) + ' to ' + str } 457 | , function(){ return 'expected ' + i(this.obj) + ' to not ' + str }); 458 | 459 | return this; 460 | }; 461 | /** 462 | * Assert a failure. 463 | * 464 | * @param {String ...} custom message 465 | * @api public 466 | */ 467 | Assertion.prototype.fail = function (msg) { 468 | msg = msg || "explicit failure"; 469 | this.assert(false, msg, msg); 470 | return this; 471 | }; 472 | 473 | /** 474 | * Function bind implementation. 475 | */ 476 | 477 | function bind (fn, scope) { 478 | return function () { 479 | return fn.apply(scope, arguments); 480 | } 481 | } 482 | 483 | /** 484 | * Array every compatibility 485 | * 486 | * @see bit.ly/5Fq1N2 487 | * @api public 488 | */ 489 | 490 | function every (arr, fn, thisObj) { 491 | var scope = thisObj || global; 492 | for (var i = 0, j = arr.length; i < j; ++i) { 493 | if (!fn.call(scope, arr[i], i, arr)) { 494 | return false; 495 | } 496 | } 497 | return true; 498 | }; 499 | 500 | /** 501 | * Array indexOf compatibility. 502 | * 503 | * @see bit.ly/a5Dxa2 504 | * @api public 505 | */ 506 | 507 | function indexOf (arr, o, i) { 508 | if (Array.prototype.indexOf) { 509 | return Array.prototype.indexOf.call(arr, o, i); 510 | } 511 | 512 | if (arr.length === undefined) { 513 | return -1; 514 | } 515 | 516 | for (var j = arr.length, i = i < 0 ? i + j < 0 ? 0 : i + j : i || 0 517 | ; i < j && arr[i] !== o; i++); 518 | 519 | return j <= i ? -1 : i; 520 | }; 521 | 522 | // https://gist.github.com/1044128/ 523 | var getOuterHTML = function(element) { 524 | if ('outerHTML' in element) return element.outerHTML; 525 | var ns = "http://www.w3.org/1999/xhtml"; 526 | var container = document.createElementNS(ns, '_'); 527 | var elemProto = (window.HTMLElement || window.Element).prototype; 528 | var xmlSerializer = new XMLSerializer(); 529 | var html; 530 | if (document.xmlVersion) { 531 | return xmlSerializer.serializeToString(element); 532 | } else { 533 | container.appendChild(element.cloneNode(false)); 534 | html = container.innerHTML.replace('><', '>' + element.innerHTML + '<'); 535 | container.innerHTML = ''; 536 | return html; 537 | } 538 | }; 539 | 540 | // Returns true if object is a DOM element. 541 | var isDOMElement = function (object) { 542 | if (typeof HTMLElement === 'object') { 543 | return object instanceof HTMLElement; 544 | } else { 545 | return object && 546 | typeof object === 'object' && 547 | object.nodeType === 1 && 548 | typeof object.nodeName === 'string'; 549 | } 550 | }; 551 | 552 | /** 553 | * Inspects an object. 554 | * 555 | * @see taken from node.js `util` module (copyright Joyent, MIT license) 556 | * @api private 557 | */ 558 | 559 | function i (obj, showHidden, depth) { 560 | var seen = []; 561 | 562 | function stylize (str) { 563 | return str; 564 | }; 565 | 566 | function format (value, recurseTimes) { 567 | // Provide a hook for user-specified inspect functions. 568 | // Check that value is an object with an inspect function on it 569 | if (value && typeof value.inspect === 'function' && 570 | // Filter out the util module, it's inspect function is special 571 | value !== exports && 572 | // Also filter out any prototype objects using the circular check. 573 | !(value.constructor && value.constructor.prototype === value)) { 574 | return value.inspect(recurseTimes); 575 | } 576 | 577 | // Primitive types cannot have properties 578 | switch (typeof value) { 579 | case 'undefined': 580 | return stylize('undefined', 'undefined'); 581 | 582 | case 'string': 583 | var simple = '\'' + json.stringify(value).replace(/^"|"$/g, '') 584 | .replace(/'/g, "\\'") 585 | .replace(/\\"/g, '"') + '\''; 586 | return stylize(simple, 'string'); 587 | 588 | case 'number': 589 | return stylize('' + value, 'number'); 590 | 591 | case 'boolean': 592 | return stylize('' + value, 'boolean'); 593 | } 594 | // For some reason typeof null is "object", so special case here. 595 | if (value === null) { 596 | return stylize('null', 'null'); 597 | } 598 | 599 | if (isDOMElement(value)) { 600 | return getOuterHTML(value); 601 | } 602 | 603 | // Look up the keys of the object. 604 | var visible_keys = keys(value); 605 | var $keys = showHidden ? Object.getOwnPropertyNames(value) : visible_keys; 606 | 607 | // Functions without properties can be shortcutted. 608 | if (typeof value === 'function' && $keys.length === 0) { 609 | if (isRegExp(value)) { 610 | return stylize('' + value, 'regexp'); 611 | } else { 612 | var name = value.name ? ': ' + value.name : ''; 613 | return stylize('[Function' + name + ']', 'special'); 614 | } 615 | } 616 | 617 | // Dates without properties can be shortcutted 618 | if (isDate(value) && $keys.length === 0) { 619 | return stylize(value.toUTCString(), 'date'); 620 | } 621 | 622 | var base, type, braces; 623 | // Determine the object type 624 | if (isArray(value)) { 625 | type = 'Array'; 626 | braces = ['[', ']']; 627 | } else { 628 | type = 'Object'; 629 | braces = ['{', '}']; 630 | } 631 | 632 | // Make functions say that they are functions 633 | if (typeof value === 'function') { 634 | var n = value.name ? ': ' + value.name : ''; 635 | base = (isRegExp(value)) ? ' ' + value : ' [Function' + n + ']'; 636 | } else { 637 | base = ''; 638 | } 639 | 640 | // Make dates with properties first say the date 641 | if (isDate(value)) { 642 | base = ' ' + value.toUTCString(); 643 | } 644 | 645 | if ($keys.length === 0) { 646 | return braces[0] + base + braces[1]; 647 | } 648 | 649 | if (recurseTimes < 0) { 650 | if (isRegExp(value)) { 651 | return stylize('' + value, 'regexp'); 652 | } else { 653 | return stylize('[Object]', 'special'); 654 | } 655 | } 656 | 657 | seen.push(value); 658 | 659 | var output = map($keys, function (key) { 660 | var name, str; 661 | if (value.__lookupGetter__) { 662 | if (value.__lookupGetter__(key)) { 663 | if (value.__lookupSetter__(key)) { 664 | str = stylize('[Getter/Setter]', 'special'); 665 | } else { 666 | str = stylize('[Getter]', 'special'); 667 | } 668 | } else { 669 | if (value.__lookupSetter__(key)) { 670 | str = stylize('[Setter]', 'special'); 671 | } 672 | } 673 | } 674 | if (indexOf(visible_keys, key) < 0) { 675 | name = '[' + key + ']'; 676 | } 677 | if (!str) { 678 | if (indexOf(seen, value[key]) < 0) { 679 | if (recurseTimes === null) { 680 | str = format(value[key]); 681 | } else { 682 | str = format(value[key], recurseTimes - 1); 683 | } 684 | if (str.indexOf('\n') > -1) { 685 | if (isArray(value)) { 686 | str = map(str.split('\n'), function (line) { 687 | return ' ' + line; 688 | }).join('\n').substr(2); 689 | } else { 690 | str = '\n' + map(str.split('\n'), function (line) { 691 | return ' ' + line; 692 | }).join('\n'); 693 | } 694 | } 695 | } else { 696 | str = stylize('[Circular]', 'special'); 697 | } 698 | } 699 | if (typeof name === 'undefined') { 700 | if (type === 'Array' && key.match(/^\d+$/)) { 701 | return str; 702 | } 703 | name = json.stringify('' + key); 704 | if (name.match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)) { 705 | name = name.substr(1, name.length - 2); 706 | name = stylize(name, 'name'); 707 | } else { 708 | name = name.replace(/'/g, "\\'") 709 | .replace(/\\"/g, '"') 710 | .replace(/(^"|"$)/g, "'"); 711 | name = stylize(name, 'string'); 712 | } 713 | } 714 | 715 | return name + ': ' + str; 716 | }); 717 | 718 | seen.pop(); 719 | 720 | var numLinesEst = 0; 721 | var length = reduce(output, function (prev, cur) { 722 | numLinesEst++; 723 | if (indexOf(cur, '\n') >= 0) numLinesEst++; 724 | return prev + cur.length + 1; 725 | }, 0); 726 | 727 | if (length > 50) { 728 | output = braces[0] + 729 | (base === '' ? '' : base + '\n ') + 730 | ' ' + 731 | output.join(',\n ') + 732 | ' ' + 733 | braces[1]; 734 | 735 | } else { 736 | output = braces[0] + base + ' ' + output.join(', ') + ' ' + braces[1]; 737 | } 738 | 739 | return output; 740 | } 741 | return format(obj, (typeof depth === 'undefined' ? 2 : depth)); 742 | }; 743 | 744 | function isArray (ar) { 745 | return Object.prototype.toString.call(ar) == '[object Array]'; 746 | }; 747 | 748 | function isRegExp(re) { 749 | var s; 750 | try { 751 | s = '' + re; 752 | } catch (e) { 753 | return false; 754 | } 755 | 756 | return re instanceof RegExp || // easy case 757 | // duck-type for context-switching evalcx case 758 | typeof(re) === 'function' && 759 | re.constructor.name === 'RegExp' && 760 | re.compile && 761 | re.test && 762 | re.exec && 763 | s.match(/^\/.*\/[gim]{0,3}$/); 764 | }; 765 | 766 | function isDate(d) { 767 | if (d instanceof Date) return true; 768 | return false; 769 | }; 770 | 771 | function keys (obj) { 772 | if (Object.keys) { 773 | return Object.keys(obj); 774 | } 775 | 776 | var keys = []; 777 | 778 | for (var i in obj) { 779 | if (Object.prototype.hasOwnProperty.call(obj, i)) { 780 | keys.push(i); 781 | } 782 | } 783 | 784 | return keys; 785 | } 786 | 787 | function map (arr, mapper, that) { 788 | if (Array.prototype.map) { 789 | return Array.prototype.map.call(arr, mapper, that); 790 | } 791 | 792 | var other= new Array(arr.length); 793 | 794 | for (var i= 0, n = arr.length; i= 2) { 820 | var rv = arguments[1]; 821 | } else { 822 | do { 823 | if (i in this) { 824 | rv = this[i++]; 825 | break; 826 | } 827 | 828 | // if array contains no values, no initial value to return 829 | if (++i >= len) 830 | throw new TypeError(); 831 | } while (true); 832 | } 833 | 834 | for (; i < len; i++) { 835 | if (i in this) 836 | rv = fun.call(null, rv, this[i], i, this); 837 | } 838 | 839 | return rv; 840 | }; 841 | 842 | /** 843 | * Asserts deep equality 844 | * 845 | * @see taken from node.js `assert` module (copyright Joyent, MIT license) 846 | * @api private 847 | */ 848 | 849 | expect.eql = function eql (actual, expected) { 850 | // 7.1. All identical values are equivalent, as determined by ===. 851 | if (actual === expected) { 852 | return true; 853 | } else if ('undefined' != typeof Buffer 854 | && Buffer.isBuffer(actual) && Buffer.isBuffer(expected)) { 855 | if (actual.length != expected.length) return false; 856 | 857 | for (var i = 0; i < actual.length; i++) { 858 | if (actual[i] !== expected[i]) return false; 859 | } 860 | 861 | return true; 862 | 863 | // 7.2. If the expected value is a Date object, the actual value is 864 | // equivalent if it is also a Date object that refers to the same time. 865 | } else if (actual instanceof Date && expected instanceof Date) { 866 | return actual.getTime() === expected.getTime(); 867 | 868 | // 7.3. Other pairs that do not both pass typeof value == "object", 869 | // equivalence is determined by ==. 870 | } else if (typeof actual != 'object' && typeof expected != 'object') { 871 | return actual == expected; 872 | 873 | // 7.4. For all other Object pairs, including Array objects, equivalence is 874 | // determined by having the same number of owned properties (as verified 875 | // with Object.prototype.hasOwnProperty.call), the same set of keys 876 | // (although not necessarily the same order), equivalent values for every 877 | // corresponding key, and an identical "prototype" property. Note: this 878 | // accounts for both named and indexed properties on Arrays. 879 | } else { 880 | return objEquiv(actual, expected); 881 | } 882 | } 883 | 884 | function isUndefinedOrNull (value) { 885 | return value === null || value === undefined; 886 | } 887 | 888 | function isArguments (object) { 889 | return Object.prototype.toString.call(object) == '[object Arguments]'; 890 | } 891 | 892 | function objEquiv (a, b) { 893 | if (isUndefinedOrNull(a) || isUndefinedOrNull(b)) 894 | return false; 895 | // an identical "prototype" property. 896 | if (a.prototype !== b.prototype) return false; 897 | //~~~I've managed to break Object.keys through screwy arguments passing. 898 | // Converting to array solves the problem. 899 | if (isArguments(a)) { 900 | if (!isArguments(b)) { 901 | return false; 902 | } 903 | a = pSlice.call(a); 904 | b = pSlice.call(b); 905 | return expect.eql(a, b); 906 | } 907 | try{ 908 | var ka = keys(a), 909 | kb = keys(b), 910 | key, i; 911 | } catch (e) {//happens when one is a string literal and the other isn't 912 | return false; 913 | } 914 | // having the same number of owned properties (keys incorporates hasOwnProperty) 915 | if (ka.length != kb.length) 916 | return false; 917 | //the same set of keys (although not necessarily the same order), 918 | ka.sort(); 919 | kb.sort(); 920 | //~~~cheap key test 921 | for (i = ka.length - 1; i >= 0; i--) { 922 | if (ka[i] != kb[i]) 923 | return false; 924 | } 925 | //equivalent values for every corresponding key, and 926 | //~~~possibly expensive deep test 927 | for (i = ka.length - 1; i >= 0; i--) { 928 | key = ka[i]; 929 | if (!expect.eql(a[key], b[key])) 930 | return false; 931 | } 932 | return true; 933 | } 934 | 935 | var json = (function () { 936 | "use strict"; 937 | 938 | if ('object' == typeof JSON && JSON.parse && JSON.stringify) { 939 | return { 940 | parse: nativeJSON.parse 941 | , stringify: nativeJSON.stringify 942 | } 943 | } 944 | 945 | var JSON = {}; 946 | 947 | function f(n) { 948 | // Format integers to have at least two digits. 949 | return n < 10 ? '0' + n : n; 950 | } 951 | 952 | function date(d, key) { 953 | return isFinite(d.valueOf()) ? 954 | d.getUTCFullYear() + '-' + 955 | f(d.getUTCMonth() + 1) + '-' + 956 | f(d.getUTCDate()) + 'T' + 957 | f(d.getUTCHours()) + ':' + 958 | f(d.getUTCMinutes()) + ':' + 959 | f(d.getUTCSeconds()) + 'Z' : null; 960 | }; 961 | 962 | var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, 963 | escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, 964 | gap, 965 | indent, 966 | meta = { // table of character substitutions 967 | '\b': '\\b', 968 | '\t': '\\t', 969 | '\n': '\\n', 970 | '\f': '\\f', 971 | '\r': '\\r', 972 | '"' : '\\"', 973 | '\\': '\\\\' 974 | }, 975 | rep; 976 | 977 | 978 | function quote(string) { 979 | 980 | // If the string contains no control characters, no quote characters, and no 981 | // backslash characters, then we can safely slap some quotes around it. 982 | // Otherwise we must also replace the offending characters with safe escape 983 | // sequences. 984 | 985 | escapable.lastIndex = 0; 986 | return escapable.test(string) ? '"' + string.replace(escapable, function (a) { 987 | var c = meta[a]; 988 | return typeof c === 'string' ? c : 989 | '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); 990 | }) + '"' : '"' + string + '"'; 991 | } 992 | 993 | 994 | function str(key, holder) { 995 | 996 | // Produce a string from holder[key]. 997 | 998 | var i, // The loop counter. 999 | k, // The member key. 1000 | v, // The member value. 1001 | length, 1002 | mind = gap, 1003 | partial, 1004 | value = holder[key]; 1005 | 1006 | // If the value has a toJSON method, call it to obtain a replacement value. 1007 | 1008 | if (value instanceof Date) { 1009 | value = date(key); 1010 | } 1011 | 1012 | // If we were called with a replacer function, then call the replacer to 1013 | // obtain a replacement value. 1014 | 1015 | if (typeof rep === 'function') { 1016 | value = rep.call(holder, key, value); 1017 | } 1018 | 1019 | // What happens next depends on the value's type. 1020 | 1021 | switch (typeof value) { 1022 | case 'string': 1023 | return quote(value); 1024 | 1025 | case 'number': 1026 | 1027 | // JSON numbers must be finite. Encode non-finite numbers as null. 1028 | 1029 | return isFinite(value) ? String(value) : 'null'; 1030 | 1031 | case 'boolean': 1032 | case 'null': 1033 | 1034 | // If the value is a boolean or null, convert it to a string. Note: 1035 | // typeof null does not produce 'null'. The case is included here in 1036 | // the remote chance that this gets fixed someday. 1037 | 1038 | return String(value); 1039 | 1040 | // If the type is 'object', we might be dealing with an object or an array or 1041 | // null. 1042 | 1043 | case 'object': 1044 | 1045 | // Due to a specification blunder in ECMAScript, typeof null is 'object', 1046 | // so watch out for that case. 1047 | 1048 | if (!value) { 1049 | return 'null'; 1050 | } 1051 | 1052 | // Make an array to hold the partial results of stringifying this object value. 1053 | 1054 | gap += indent; 1055 | partial = []; 1056 | 1057 | // Is the value an array? 1058 | 1059 | if (Object.prototype.toString.apply(value) === '[object Array]') { 1060 | 1061 | // The value is an array. Stringify every element. Use null as a placeholder 1062 | // for non-JSON values. 1063 | 1064 | length = value.length; 1065 | for (i = 0; i < length; i += 1) { 1066 | partial[i] = str(i, value) || 'null'; 1067 | } 1068 | 1069 | // Join all of the elements together, separated with commas, and wrap them in 1070 | // brackets. 1071 | 1072 | v = partial.length === 0 ? '[]' : gap ? 1073 | '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']' : 1074 | '[' + partial.join(',') + ']'; 1075 | gap = mind; 1076 | return v; 1077 | } 1078 | 1079 | // If the replacer is an array, use it to select the members to be stringified. 1080 | 1081 | if (rep && typeof rep === 'object') { 1082 | length = rep.length; 1083 | for (i = 0; i < length; i += 1) { 1084 | if (typeof rep[i] === 'string') { 1085 | k = rep[i]; 1086 | v = str(k, value); 1087 | if (v) { 1088 | partial.push(quote(k) + (gap ? ': ' : ':') + v); 1089 | } 1090 | } 1091 | } 1092 | } else { 1093 | 1094 | // Otherwise, iterate through all of the keys in the object. 1095 | 1096 | for (k in value) { 1097 | if (Object.prototype.hasOwnProperty.call(value, k)) { 1098 | v = str(k, value); 1099 | if (v) { 1100 | partial.push(quote(k) + (gap ? ': ' : ':') + v); 1101 | } 1102 | } 1103 | } 1104 | } 1105 | 1106 | // Join all of the member texts together, separated with commas, 1107 | // and wrap them in braces. 1108 | 1109 | v = partial.length === 0 ? '{}' : gap ? 1110 | '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}' : 1111 | '{' + partial.join(',') + '}'; 1112 | gap = mind; 1113 | return v; 1114 | } 1115 | } 1116 | 1117 | // If the JSON object does not yet have a stringify method, give it one. 1118 | 1119 | JSON.stringify = function (value, replacer, space) { 1120 | 1121 | // The stringify method takes a value and an optional replacer, and an optional 1122 | // space parameter, and returns a JSON text. The replacer can be a function 1123 | // that can replace values, or an array of strings that will select the keys. 1124 | // A default replacer method can be provided. Use of the space parameter can 1125 | // produce text that is more easily readable. 1126 | 1127 | var i; 1128 | gap = ''; 1129 | indent = ''; 1130 | 1131 | // If the space parameter is a number, make an indent string containing that 1132 | // many spaces. 1133 | 1134 | if (typeof space === 'number') { 1135 | for (i = 0; i < space; i += 1) { 1136 | indent += ' '; 1137 | } 1138 | 1139 | // If the space parameter is a string, it will be used as the indent string. 1140 | 1141 | } else if (typeof space === 'string') { 1142 | indent = space; 1143 | } 1144 | 1145 | // If there is a replacer, it must be a function or an array. 1146 | // Otherwise, throw an error. 1147 | 1148 | rep = replacer; 1149 | if (replacer && typeof replacer !== 'function' && 1150 | (typeof replacer !== 'object' || 1151 | typeof replacer.length !== 'number')) { 1152 | throw new Error('JSON.stringify'); 1153 | } 1154 | 1155 | // Make a fake root object containing our value under the key of ''. 1156 | // Return the result of stringifying the value. 1157 | 1158 | return str('', {'': value}); 1159 | }; 1160 | 1161 | // If the JSON object does not yet have a parse method, give it one. 1162 | 1163 | JSON.parse = function (text, reviver) { 1164 | // The parse method takes a text and an optional reviver function, and returns 1165 | // a JavaScript value if the text is a valid JSON text. 1166 | 1167 | var j; 1168 | 1169 | function walk(holder, key) { 1170 | 1171 | // The walk method is used to recursively walk the resulting structure so 1172 | // that modifications can be made. 1173 | 1174 | var k, v, value = holder[key]; 1175 | if (value && typeof value === 'object') { 1176 | for (k in value) { 1177 | if (Object.prototype.hasOwnProperty.call(value, k)) { 1178 | v = walk(value, k); 1179 | if (v !== undefined) { 1180 | value[k] = v; 1181 | } else { 1182 | delete value[k]; 1183 | } 1184 | } 1185 | } 1186 | } 1187 | return reviver.call(holder, key, value); 1188 | } 1189 | 1190 | 1191 | // Parsing happens in four stages. In the first stage, we replace certain 1192 | // Unicode characters with escape sequences. JavaScript handles many characters 1193 | // incorrectly, either silently deleting them, or treating them as line endings. 1194 | 1195 | text = String(text); 1196 | cx.lastIndex = 0; 1197 | if (cx.test(text)) { 1198 | text = text.replace(cx, function (a) { 1199 | return '\\u' + 1200 | ('0000' + a.charCodeAt(0).toString(16)).slice(-4); 1201 | }); 1202 | } 1203 | 1204 | // In the second stage, we run the text against regular expressions that look 1205 | // for non-JSON patterns. We are especially concerned with '()' and 'new' 1206 | // because they can cause invocation, and '=' because it can cause mutation. 1207 | // But just to be safe, we want to reject all unexpected forms. 1208 | 1209 | // We split the second stage into 4 regexp operations in order to work around 1210 | // crippling inefficiencies in IE's and Safari's regexp engines. First we 1211 | // replace the JSON backslash pairs with '@' (a non-JSON character). Second, we 1212 | // replace all simple value tokens with ']' characters. Third, we delete all 1213 | // open brackets that follow a colon or comma or that begin the text. Finally, 1214 | // we look to see that the remaining characters are only whitespace or ']' or 1215 | // ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval. 1216 | 1217 | if (/^[\],:{}\s]*$/ 1218 | .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@') 1219 | .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']') 1220 | .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) { 1221 | 1222 | // In the third stage we use the eval function to compile the text into a 1223 | // JavaScript structure. The '{' operator is subject to a syntactic ambiguity 1224 | // in JavaScript: it can begin a block or an object literal. We wrap the text 1225 | // in parens to eliminate the ambiguity. 1226 | 1227 | j = eval('(' + text + ')'); 1228 | 1229 | // In the optional fourth stage, we recursively walk the new structure, passing 1230 | // each name/value pair to a reviver function for possible transformation. 1231 | 1232 | return typeof reviver === 'function' ? 1233 | walk({'': j}, '') : j; 1234 | } 1235 | 1236 | // If the text is not JSON parseable, then a SyntaxError is thrown. 1237 | 1238 | throw new SyntaxError('JSON.parse'); 1239 | }; 1240 | 1241 | return JSON; 1242 | })(); 1243 | 1244 | if ('undefined' != typeof window) { 1245 | window.expect = module.exports; 1246 | } 1247 | 1248 | })( 1249 | this 1250 | , 'undefined' != typeof module ? module : {} 1251 | , 'undefined' != typeof exports ? exports : {} 1252 | ); 1253 | -------------------------------------------------------------------------------- /workouts-103/01index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS DOM paragraph style 7 | 8 | 9 |

JavaScript Exercises - w3resource

10 |
11 | 12 |
13 | 28 | 40 | 41 | -------------------------------------------------------------------------------- /workouts-103/02index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Return first and last name from a form - w3resource 7 | 8 | 9 |
10 | First name:
11 | Last name:
12 | 13 |
14 | 29 | 37 | 38 | -------------------------------------------------------------------------------- /workouts-103/03index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Question #3 7 | 8 | 9 |

I have of late -- but wherefore I know not -- lost all my mirth, forgone all custom of exercises; and indeed it goes so heavily with my disposition that this goodly frame, the earth, seems to me a sterile promontory, this most excellent canopy, the air, look you, this brave o'erhanging firmament, this majestical roof fretted with golden fire, why, it appears no other thing to me than a foul and pestilent gongregation of vapours.

10 | 11 | 26 | 32 | 33 | -------------------------------------------------------------------------------- /workouts-103/04index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

w3resource

9 | 10 | 25 | 37 | 38 | -------------------------------------------------------------------------------- /workouts-103/05index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Insert row in a table - w3resource 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
Row1 cell1Row1 cell2
Row2 cell1Row2 cell2

19 | 20 | 35 | 43 | 44 | -------------------------------------------------------------------------------- /workouts-103/06index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Change the content of a cell 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
Row1 cell1Row1 cell2
Row2 cell1Row2 cell2
Row3 cell1Row3 cell2
23 |
24 | Make it say "unnghhhh!" 25 | 33 | 34 |
35 | 50 | 62 | 63 | -------------------------------------------------------------------------------- /workouts-103/07index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Change the content of a cell 7 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | Enter number of rows: 22 | Enter number of columns: 23 | 24 |
25 | 40 | 66 | 67 | -------------------------------------------------------------------------------- /workouts-103/08index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Remove items from a dropdown list 7 | 8 | 9 |
10 | 16 | 17 |
18 | 33 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /workouts-103/09index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | Count and display items of a dropdown list - w3resource 12 | 13 | 14 |
15 | Select your favorite Color: 16 | 22 | 23 |
24 | 39 | 53 | 54 | -------------------------------------------------------------------------------- /workouts-103/10index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Volume of a Sphere 7 | 15 | 16 | 17 |

Input radius value and get the volume of a sphere.

18 |
19 | 20 | 21 | 22 |
23 | 38 | 70 | 71 | -------------------------------------------------------------------------------- /workouts-103/11index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Display Random Image on Click 6 | 25 | 26 | 27 |
28 | 29 |
30 | 45 | 55 | 56 | -------------------------------------------------------------------------------- /workouts-103/12index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Highlight test on link hover 6 | 14 | 15 | 16 | On mouse over here bold words of the following paragraph will be highlighted 17 |

We have just started this section for the users (beginner to intermediate) who want to work with various JavaScript problems and write scripts online to test their JavaScript skill.

18 | 33 | 47 | 48 | -------------------------------------------------------------------------------- /workouts-103/13index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Get width and height of window on resize 6 | 7 | 8 |
Resize Window to Measure!
9 | 24 | 33 | 34 | -------------------------------------------------------------------------------- /workouts-103/andy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Change the content of a cell 6 | 7 | 8 |
9 | Content: 10 | Row: 11 | Column: 12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Row1 cell1Row1 cell2
Row2 cell1Row2 cell2
Row3 cell1Row3 cell2
29 | 30 | 31 | 79 | -------------------------------------------------------------------------------- /workouts-103/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | JavaScript DOM Exercises: Homepage 5 | 6 | 7 |

JavaScript DOM Exercises

8 |

Choose the exercise you wish to view

9 | 24 | 25 | -------------------------------------------------------------------------------- /workouts-104/01-show-one-element/QUESTIONS.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 01: Show One Element 2 | 3 | ## Questions 4 | 5 | --- 6 | 7 | > If you click the link to reveal more text and then refresh the page, does the text remain revealed, or is it hidden again? Why? 8 | 9 | Your reply here... 10 | 11 | --- 12 | 13 | > Remove `window.addEventListener("load", function(){` (and the closing `})`) from **global.js**. Does the link still reveal the text? What is the purpose of this code that you've removed? 14 | 15 | Your reply here... 16 | 17 | --- 18 | 19 | > Describe the the `addEventListener` method. (Remember that there is a specific, technical, methodical way to describe methods. Your reply should match that format.) 20 | 21 | Your reply here... 22 | -------------------------------------------------------------------------------- /workouts-104/01-show-one-element/README.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 01: Show One Element 2 | 3 | ## Description 4 | 5 | You've seen this all over the Web: Some truncated text following by a link--"Show more..."--which reveals the rest of the text. 6 | 7 | ![](http://cl.ly/fNdR/Screen%20Recording%202016-03-09%20at%2011.21%20PM.gif) 8 | 9 | This is a simple JavaScript feature, which listens for a **click** event on the "Show more..." link and un-hides some element in the DOM. 10 | 11 | We've provided starter HTML and JavaScript for you. Review those files and open **index.html**. 12 | 13 | ## Tasks 14 | 15 | The only task is to add code to **global.js** that accomplishes the following: 16 | 17 | - Clicking the 'Show more...' link reveals the hidden text. 18 | 19 | ## Questions 20 | 21 | Don't forget to answer the [questions](./QUESTIONS.md). -------------------------------------------------------------------------------- /workouts-104/01-show-one-element/global.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", function(){ 2 | 3 | // Here is some pseudo-code to help you get started: 4 | 5 | // 1. Get the DOM element which will be clicked. 6 | 7 | // 2. Add a listener for the 'click' event onto that element. 8 | 9 | // 3. The block for the listener should get the DOM 10 | // element containing the text to reveal. 11 | 12 | // 4. Modify that DOM element's style to change it's 'display' 13 | // from a hidden value to a shown value. 14 | 15 | // 5. Also modify the DOM to hide the "More info..." link. 16 | 17 | }); -------------------------------------------------------------------------------- /workouts-104/01-show-one-element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 01 5 | 6 | 7 | 8 |

DOM Atomic 01

9 | 10 |

11 | 12 | The modern mammal metropolis of Zootopia is a city like no other. Comprised of habitat neighborhoods like ritzy Sahara Square and frigid Tundratown, it's a melting pot where animals from every environment live together-a place where no matter what you are, from the biggest elephant to the smallest shrew, you can be anything. But when rookie Officer Judy Hopps (voice of Ginnifer Goodwin) arrives, she discovers that being the first bunny on a police force of big, tough animals isn't so easy. Determined to prove herself, she jumps at the opportunity to crack a case, even if it means partnering with a fast-talking, scam-artist fox, Nick Wilde (voice of Jason Bateman), to solve the mystery. 13 | 14 | 15 | More... 16 | 17 | 18 | 21 |

22 | 23 | -------------------------------------------------------------------------------- /workouts-104/01-show-one-element/solution/global.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", function(){ 2 | 3 | // 1. Get the DOM element which will be clicked. 4 | var more_link = document.getElementById("more_text_link"); 5 | 6 | // 2. Add a listener for the 'click' event onto that element. 7 | more_link.addEventListener("click", function(){ 8 | 9 | // 3. The block for the listener should get the DOM 10 | // element containing the text to reveal. 11 | var more_text = document.getElementById("more_text_content"); 12 | 13 | // 4. Modify that DOM element's style to change it's 'display' 14 | // from a hidden value to a shown value. 15 | more_text.style.display = "inline"; 16 | 17 | // 5. Also modify the DOM to hide the "More info..." link. 18 | more_link.style.display = "none"; 19 | }); 20 | 21 | }); -------------------------------------------------------------------------------- /workouts-104/01-show-one-element/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 01 5 | 6 | 7 | 8 |

DOM Atomic 01

9 | 10 |

11 | 12 | The modern mammal metropolis of Zootopia is a city like no other. Comprised of habitat neighborhoods like ritzy Sahara Square and frigid Tundratown, it's a melting pot where animals from every environment live together-a place where no matter what you are, from the biggest elephant to the smallest shrew, you can be anything. But when rookie Officer Judy Hopps (voice of Ginnifer Goodwin) arrives, she discovers that being the first bunny on a police force of big, tough animals isn't so easy. Determined to prove herself, she jumps at the opportunity to crack a case, even if it means partnering with a fast-talking, scam-artist fox, Nick Wilde (voice of Jason Bateman), to solve the mystery. 13 | 14 | 15 | More... 16 | 17 | 18 | 21 |

22 | 23 | -------------------------------------------------------------------------------- /workouts-104/02-hide-many-elements/QUESTIONS.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 02: Hide Many Elements 2 | 3 | ## Questions 4 | 5 | --- 6 | 7 | > How did you go about selecting the DOM elements to hide? Describe the "contract" for that function. 8 | 9 | Your reply here... 10 | 11 | --- 12 | 13 | > Describe how you were able to hide each element. Were you able to do it as one operation, or did you use a loop of some kind? Describe the "contracts" that were utilized to accomplish your goal. 14 | 15 | Your reply here... -------------------------------------------------------------------------------- /workouts-104/02-hide-many-elements/README.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 02: Hide Many Elements 2 | 3 | ## Tasks 4 | 5 | Write code that accomplishes the following: 6 | 7 | 1. Find all elements on the page with 'hide_me' as a class. 8 | 2. Hide all of those elements when a button is clicked. 9 | 10 | There is starter HTML for you. 11 | 12 | ## Questions 13 | 14 | Don't forget to answer the [questions](./QUESTIONS.md). -------------------------------------------------------------------------------- /workouts-104/02-hide-many-elements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 02 5 | 6 | 7 | 8 | 9 |
10 | I have the class "show_me", and will stick around even after you click the button at the bottom. 11 |
12 | 13 |
14 | I have the class "hide_me"; I should disappear when you click the button at the bottom. 15 |
16 | 17 |
18 | I'm also part of the "hide_me" class, and should also disappear. 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /workouts-104/02-hide-many-elements/solution/global.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", function(){ 2 | 3 | var button = document.getElementById('button'); 4 | 5 | button.addEventListener("click", function() { 6 | 7 | var divs_to_hide = document.getElementsByClassName('hide_me'); 8 | 9 | for (var i = 0; i < divs_to_hide.length; i++) { 10 | divs_to_hide[i].style.display = "none"; 11 | } 12 | }); 13 | 14 | }); -------------------------------------------------------------------------------- /workouts-104/02-hide-many-elements/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 02 5 | 6 | 7 | 8 | 9 |
10 | I have the class "show_me", and will stick around even after you click the button at the bottom. 11 |
12 | 13 |
14 | I have the class "hide_me"; I should disappear when you click the button at the bottom. 15 |
16 | 17 |
18 | I'm also part of the "hide_me" class, and should also disappear. 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /workouts-104/03-show-many-elements/QUESTIONS.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 03: Show Many Elements 2 | 3 | ## Questions 4 | 5 | --- 6 | 7 | > How did you go about hiding elements initially? 8 | 9 | Your reply here... -------------------------------------------------------------------------------- /workouts-104/03-show-many-elements/README.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 03: Show Many Elements 2 | 3 | This is the exact reverse of the previous atomic: Instead of hiding many elements with a shared class, you should show those elements. 4 | 5 | ## Tasks 6 | 7 | Write code that accomplishes the following: 8 | 9 | 1. When the page loads initially, some elements should be hidden. 10 | - No JavaScript is needed for this part of the feature. 11 | 2. Find all of the elements you chose to hide. 12 | 3. When you click a button, those elements should be shown. 13 | 14 | There is no starter HTML for you. However, we recommend copy/pasting the HTML from the previous exercise and modifying it to suit this exercise. 15 | 16 | ## Questions 17 | 18 | Don't forget to answer the [questions](./QUESTIONS.md). -------------------------------------------------------------------------------- /workouts-104/03-show-many-elements/solution/global.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", function(){ 2 | 3 | var button = document.getElementById('button'); 4 | 5 | button.addEventListener("click", function() { 6 | 7 | var divs_to_show = document.getElementsByClassName('show_me'); 8 | 9 | for (var i = 0; i < divs_to_show.length; i++) { 10 | divs_to_show[i].style.display = "block"; 11 | } 12 | }); 13 | 14 | }); -------------------------------------------------------------------------------- /workouts-104/03-show-many-elements/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 03 5 | 6 | 7 | 8 | 9 | 12 | 13 | 16 | 17 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /workouts-104/04-toggle-many-elements/README.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 04: Toggle Many Elements 2 | 3 | This is a combination of the previous two atomics. You will be _either_ hiding or showing elements, based on their current display state. 4 | 5 | ## Tasks 6 | 7 | You have some starter HTML code. Review that and then write code that accomplishes the following: 8 | 9 | 1. Find all of the elements that you want to toggle. 10 | 2. When you click a button, those elements should either be shown or hidden. 11 | 3. When you click that button again, those elements should be toggled again. 12 | 4. You can repeat as many times as you like--the button always "toggles" the display state of the elements. -------------------------------------------------------------------------------- /workouts-104/04-toggle-many-elements/global.js: -------------------------------------------------------------------------------- 1 | // Your JavaScript goes here. -------------------------------------------------------------------------------- /workouts-104/04-toggle-many-elements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 04 5 | 6 | 7 | 8 | 9 | 12 | 13 | 16 | 17 |
18 | I'm a boring element that doesn't ever get revealed/disappeared. 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /workouts-104/04-toggle-many-elements/solution/global.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", function(){ 2 | 3 | var button = document.getElementById('button'); 4 | 5 | button.addEventListener("click", function() { 6 | 7 | var divs_to_toggle = document.getElementsByClassName('toggle_me'); 8 | 9 | for (var i = 0; i < divs_to_toggle.length; i++) { 10 | if (divs_to_toggle[i].style.display === "none") { 11 | divs_to_toggle[i].style.display = "block"; 12 | } 13 | else { 14 | divs_to_toggle[i].style.display = "none"; 15 | } 16 | } 17 | }); 18 | 19 | }); -------------------------------------------------------------------------------- /workouts-104/04-toggle-many-elements/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 04 5 | 6 | 7 | 8 | 9 | 12 | 13 | 16 | 17 |
18 | I'm a boring element that doesn't ever get revealed/disappeared. 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /workouts-104/05-toggle-elements-of-dom-path/QUESTIONS.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 05: Toggle Elements of DOM Path 2 | 3 | ## Questions 4 | 5 | --- 6 | 7 | > Describe the contract you used for finding the movies to toggle in the DOM. How is this function different from other functions that find elements in the DOM? 8 | 9 | Your reply here... -------------------------------------------------------------------------------- /workouts-104/05-toggle-elements-of-dom-path/README.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 05: Toggle Elements of DOM Path 2 | 3 | This is a very similar exercise to the previous few atomics. The difference is that instead of toggling elements that share a class, you'll instead of toggling elements that exist somewhere in the DOM tree. 4 | 5 | For example, in the following HTML, there are many elements with the "banana" class but only some of them are inside an element with the "potato" class: 6 | 7 | ```html 8 |
Banana 1
9 | 10 |
11 |
Banana 2
12 |
Banana 3
13 |
Banana 4
14 |
15 | 16 |
17 |
Banana 5
18 |
19 | ``` 20 | 21 | The previous exercises allowed you to get all of the elements with a class of 'banana'; but for this exercise, you will need to be more selective. 22 | 23 | ## Tasks 24 | 25 | You have some starter HTML code. When the page loads initially, some of the movies in the list will be hidden. Your job is to write code that toggles the display of the second set of movies whenever the button is clicked. 26 | 27 | You should not need to alter the HTML at all to complete this exercise. 28 | 29 | ## Questions 30 | 31 | There are questions to answer for this exercise. -------------------------------------------------------------------------------- /workouts-104/05-toggle-elements-of-dom-path/global.js: -------------------------------------------------------------------------------- 1 | // Your JavaScript goes here. -------------------------------------------------------------------------------- /workouts-104/05-toggle-elements-of-dom-path/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 05 5 | 6 | 7 | 8 | 9 |
10 |

This is a div containing a list of movies:

11 | 12 | 13 |
    14 |
  • Jurassic Park
    • 15 |
  • Aristocats
    • 16 |
  • Oliver and Company
    • 17 |
  • Homeward Bound
    • 18 |
  • Balto
    • 19 |
20 | 21 | 25 |
    26 |
  • Anastasia
    • 27 |
  • Rent
    • 28 |
  • Aladdin
    • 29 |
  • Clueless
    • 30 |
  • Home Alone
    • 31 |
32 | 33 | 34 | 35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /workouts-104/05-toggle-elements-of-dom-path/solution/global.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", function(){ 2 | 3 | var button = document.getElementById('toggle_button'); 4 | 5 | button.addEventListener("click", function() { 6 | 7 | var movieList = document.querySelectorAll("ul.second_five li"); 8 | 9 | for (var i = 0; i < movieList.length; i++) { 10 | if (movieList[i].style.display === "list-item") { 11 | movieList[i].style.display = "none"; 12 | } 13 | else { 14 | movieList[i].style.display = "list-item"; 15 | } 16 | } 17 | 18 | }); 19 | 20 | }); 21 | -------------------------------------------------------------------------------- /workouts-104/05-toggle-elements-of-dom-path/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 05 5 | 6 | 7 | 8 | 9 |
10 |

This is a div containing a list of movies:

11 | 12 |
    13 |
  • Jurassic Park
    • 14 |
  • Aristocats
    • 15 |
  • Oliver and Company
    • 16 |
  • Homeward Bound
    • 17 |
  • Balto
    • 18 |
19 | 20 |
    21 |
  • Anastasia
    • 22 |
  • Rent
    • 23 |
  • Aladdin
    • 24 |
  • Clueless
    • 25 |
  • Home Alone
    • 26 |
27 | 28 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /workouts-104/06-detecting-typed-input/README.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 06: Detecting Typed Input 2 | 3 | ## Tasks 4 | 5 | You have some starter HTML, which contains a form with a single text field and also an empty `p`. 6 | 7 | Write code that accomplishes the following: 8 | 9 | - As the user types in their name into the form field, immediately mirror their typed value into the empty `p`. 10 | - Specifically, have the empty `p` greet them some way--like this: 11 | 12 | ![](http://cl.ly/fNYD/Screen%20Recording%202016-03-10%20at%2002.03%20AM.gif) -------------------------------------------------------------------------------- /workouts-104/06-detecting-typed-input/global.js: -------------------------------------------------------------------------------- 1 | // Your JavaScript goes here. -------------------------------------------------------------------------------- /workouts-104/06-detecting-typed-input/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 06 5 | 6 | 7 | 8 | 9 |

10 | 11 |

12 | 13 | 14 | 15 |

16 | 17 | -------------------------------------------------------------------------------- /workouts-104/06-detecting-typed-input/solution/global.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", function(){ 2 | 3 | var name_field = document.getElementById("full_name"); 4 | 5 | name_field.addEventListener("keyup", function() { 6 | 7 | var greeting_div = document.getElementById("greeting"); 8 | 9 | greeting_div.innerHTML = ("Hello there, " + name_field.value + "!"); 10 | 11 | }); 12 | 13 | }); -------------------------------------------------------------------------------- /workouts-104/06-detecting-typed-input/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 06 5 | 6 | 7 | 8 | 9 |

10 | 11 |

12 | 13 | 14 | 15 |

16 | 17 | -------------------------------------------------------------------------------- /workouts-104/07-automatic-tabbing-fields/QUESTIONS.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 07: Automatic Tabbing Fields 2 | 3 | ## Questions 4 | 5 | --- 6 | 7 | > What are some refactoring techniques you might apply to the provided solution? 8 | 9 | Your reply here... -------------------------------------------------------------------------------- /workouts-104/07-automatic-tabbing-fields/README.md: -------------------------------------------------------------------------------- 1 | # DOM Atomic 07: Automatic Tabbing Fields 2 | 3 | ## Description 4 | 5 | JavaScript can create less work for an application's user. In this atomic, you automatically move the user's cursor to the next field in an HTML form. It'll look like this: 6 | 7 | ![](http://cl.ly/fNLd/Screen%20Recording%202016-03-09%20at%2010.40%20PM.gif) 8 | 9 | ## Tasks 10 | 11 | Write code that accomplishes the following: 12 | 13 | 1. The user sees an HTML form, which has three separate fields for parts of a phone number (ex: 402-555-0000). 14 | 2. Write JavaScript so that when a user types in enough characters for each of the first two fields, their cursor automatically moves to the next field. -------------------------------------------------------------------------------- /workouts-104/07-automatic-tabbing-fields/global.js: -------------------------------------------------------------------------------- 1 | // Your JavaScript goes here. -------------------------------------------------------------------------------- /workouts-104/07-automatic-tabbing-fields/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 07 5 | 6 | 7 | 8 | 9 |

Enter your phone number (ex: 402-555-0000):

10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /workouts-104/07-automatic-tabbing-fields/solution/global.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", function(){ 2 | 3 | var area_code = document.getElementById('first'); 4 | var middle_numbers = document.getElementById('second'); 5 | var end_numbers = document.getElementById('third'); 6 | 7 | area_code.addEventListener("keyup", function() { 8 | typed_characters = area_code.value.length; 9 | max_characters = parseInt(area_code.getAttribute("maxlength")); 10 | 11 | if (typed_characters === max_characters) { 12 | middle_numbers.focus(); 13 | } 14 | }); 15 | 16 | middle_numbers.addEventListener("keyup", function() { 17 | typed_characters = middle_numbers.value.length; 18 | max_characters = parseInt(middle_numbers.getAttribute("maxlength")); 19 | 20 | if (typed_characters === max_characters) { 21 | end_numbers.focus(); 22 | } 23 | }); 24 | 25 | }); -------------------------------------------------------------------------------- /workouts-104/07-automatic-tabbing-fields/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Atomic 07 5 | 6 | 7 | 8 | 9 |

Enter your phone number (ex: 402-555-0000):

10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /workouts-104/README.md: -------------------------------------------------------------------------------- 1 | # DOM Exercises 2 | 3 | These exercises are based on actual tasks web developers use JavaScript for. They all are based on listening for events and modifying the DOM in some way. 4 | 5 | For some of the exercises, you'll be given starter HTML and/or JavaScript; but this may not always be the case. The exercises sort-of build in difficulty. 6 | 7 | Some of the exercises have an accompanying **QUESTIONS.md** file, which contains one or more questions about the exercise for you to answer. 8 | 9 | Begin with the [first exercise now](./01-show-one-element). -------------------------------------------------------------------------------- /workouts-106/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Puzzles 2 | 3 | Funny javascript puzzles for those who have some spare time and passion to spend it solving simple but sometimes confusing tasks. 4 | 5 | Good luck, hope you enjoy.:-) 6 | -------------------------------------------------------------------------------- /workouts-106/accountant.js: -------------------------------------------------------------------------------- 1 | /* 2 | An accountant is still unable to sum things up. 3 | It's either an invalid result or even not a number. 4 | Add some code so that the final sum will fit. 5 | Mission is accomplished if console.log() at line #18 runs. 6 | NOTE: it's prohibited to modify the code of the IIFE itself. 7 | */ 8 | 9 | (function accountant() { 10 | const balance = [1,2,,4,5]; 11 | let sum = 0; 12 | for (let i = 0; i < balance.length; i++) { 13 | sum += balance[i]; 14 | } 15 | if (sum !== 15) { 16 | throw new Error(`Oh no! It's all wrong again!`); 17 | } 18 | console.log(`Yep! It's correct:-)`); 19 | })(); 20 | -------------------------------------------------------------------------------- /workouts-106/cowboy.js: -------------------------------------------------------------------------------- 1 | /* 2 | Cowboy likes to cry 'Yee haaa!' and just can't stand silence. 3 | Insert one symbol to help cowboy overcome the silence. 4 | In seven different ways. 5 | The task is accomplished if 7 ways of solving it are provided. 6 | Any answer (with respect to other rules) is correct if it makes console.log() in line #13 run. 7 | NOTE: it's prohibited to remove existing symbols from the code or modify them. 8 | */ 9 | 10 | (function cowboy(param, y = null) { 11 | const x = y = param; 12 | if (x && typeof x !== 'number') { 13 | return console.log('Yee haaa!'); 14 | } 15 | throw new Error(`...[horrible silence]...`); 16 | })(0); 17 | -------------------------------------------------------------------------------- /workouts-106/ihate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This is a hater function and it's confident that "haters gonna hate", 3 | * especially when it's even elements of an array. 4 | * @todo Remove any SINGLE symbol from the code below so the function won't 5 | * hate the provided input. 6 | * @hint Вы все сделали правильно, если после удаления одного символа 7 | * выполнится console.log(). 8 | */ 9 | (function iHate(arr) { 10 | 'use strict'; 11 | let pointer = 0; 12 | for (let i = 0; i < arr.length; i++) { 13 | if (i % 2 === 0) { 14 | pointer = i || i + 2; 15 | if (!arr[pointer] && pointer < arr.length) { 16 | throw new Error('I hate zeroes and undefined!!!'); 17 | } 18 | } 19 | } 20 | console.log('Love it when there\'s no zeroes or undefined!'); 21 | })([0,0,1,0,0,0,1]); 22 | -------------------------------------------------------------------------------- /workouts-106/number-one.js: -------------------------------------------------------------------------------- 1 | /* 2 | This function wants to be number one. Help it. 3 | Modify the existing code so that console.log() at line #12 runs. 4 | NOTE: it's prohibited to modify code starting from line #9 (including it). 5 | */ 6 | (function isNumberOne(one) { 7 | 8 | function numberOne() { 9 | if (this !== 1) { 10 | throw new Error(`Oh no! I'm not number one!!!:-((((`); 11 | } else { 12 | console.log(`I'm definitely number ONE!`); 13 | } 14 | } 15 | 16 | numberOne.call(one); 17 | 18 | })(1); 19 | -------------------------------------------------------------------------------- /workouts-106/sapper.js: -------------------------------------------------------------------------------- 1 | /* 2 | Help the sapper to evade the third (and final) mistake in his life. 3 | What should constant 'command' equals to in order to prevent the explosion? 4 | Another problem is that the sapper only has time to enter 13 symbols before the explosion. 5 | The bomb will be deactivated and the task accomplished when console.log() in line #26 runs. 6 | NOTE: changing or modifying the existing code apart from the 'command' constant is prohibited. 7 | */ 8 | 9 | const command = '???'; 10 | 11 | const bomb = (function bomb() { 12 | let detonators = 1 | 4 | 2; 13 | return Object.freeze({ 14 | valueOf: function() { 15 | detonators &= 4; 16 | return this; 17 | }, 18 | toString: function() { 19 | detonators -= Math.ceil(detonators / 2); 20 | return this; 21 | }, 22 | disarm: function() { 23 | if (detonators) { 24 | this.explode(); 25 | } 26 | console.log('Bomb disarmed :-)'); 27 | }, 28 | explode: function() { 29 | throw new Error('BOOM!!!'); 30 | }, 31 | }); 32 | })(); 33 | 34 | (function sapper(bomb, command) { 35 | 'use strict'; 36 | try { 37 | eval(command); 38 | } catch(e) { 39 | } 40 | bomb.disarm(); 41 | })(bomb, command); 42 | -------------------------------------------------------------------------------- /workouts-106/true-detective.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This function is a true detective. It's solving a very confusing 3 | * case right now. All evidences are collected but it's still 4 | * impossible to find who's commited the crime. 5 | * @todo Find which evidence (variable) has the wrong type and 6 | * confuses the investigation. 7 | */ 8 | (function trueDetective(m, f, o, c, q, a, b, u, r, p) { 9 | switch (true) { 10 | case m && f: 11 | console.log('Gotcha!'); 12 | break; 13 | case o && c: 14 | console.log('Gotcha!'); 15 | break; 16 | case q && a: 17 | console.log('Gotcha!'); 18 | break; 19 | case b && u: 20 | console.log('Gotcha!'); 21 | break; 22 | case r && p: 23 | console.log('Gotcha!'); 24 | break; 25 | default: 26 | console.log('Has no clue!'); 27 | } 28 | })(Boolean(+[]), ['0'], !!{}, false, -1, false, ~'false', [!+!!null], ![1], true); 29 | --------------------------------------------------------------------------------