diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index e1cb8994c..000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "extends": ["airbnb", "prettier"], - "plugins": ["prettier"], - "env": { - "browser": true, - "jest": true - }, - "rules": { - "prettier/prettier": ["error"], - "strict": "off", - "func-names": "off", - "import/no-dynamic-require": "off", - "no-console": "off", - "no-param-reassign": "off", - "no-plusplus": "off", - "no-restricted-syntax": "off", - "object-shorthand": "off", - "operator-assignment": "off", - "prefer-arrow-callback": "off", - "prefer-destructuring": "off", - "prefer-template": "off", - "trailing-comma": "off", - "linebreak-style": "off" - } -} diff --git a/.gitignore b/.gitignore index 6c589c2f8..3c3629e64 100644 --- a/.gitignore +++ b/.gitignore @@ -1,61 +1 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# Typescript v1 declaration files -typings/ - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env - -.netlify -dist/ +node_modules diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 5e1bae462..000000000 --- a/.travis.yml +++ /dev/null @@ -1,6 +0,0 @@ -language: node_js -node_js: - - '10' - -script: - - npm run lint diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 79285a5eb..000000000 --- a/LICENSE +++ /dev/null @@ -1,3 +0,0 @@ -This work is licensed under the Creative Commons Attribution 4.0 International License. -To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/ -or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. \ No newline at end of file diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 79b197b83..5e378788b 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -28,15 +28,15 @@ Modify the (mostly empty) files in the `Week1/homework` folder for this step. **1.2** Open the empty `index.html` and add the required HTML to load the `app.js` file. Open `index.html` in the browser and confirm that the `console.log` statement shows the array. (Open the Chrome Developer Tools and inspect the console.) -**1.3** Remove the temporary `console.log` from step 1.1. Make a function (or functions) that generate a `ul` with `li` elements for each book ID in the array using a `for` loop. Make sure that the function names you choose are an accurate reflection of what they do. As a reminder, here are the recommended [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md). +**1.3** Remove the temporary `console.log` from step 1.1. Make a function (or functions) that generate a `ul` with `li` elements for each book title in the array using a `for` loop. Make sure that the function names you choose are an accurate reflection of what they do. As a reminder, here are the recommended [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md). -**1.4** Make an object (_not an array!_) containing information for each book. Each property of this object should be another (i.e., nested) object with the book ID you thought up in step 1.1 as a key, and at least the following properties: `title`, `language` and `author`. +**1.4** Make an object (_not an array!_) containing information for each book. Each property of this object should be another (i.e., nested) object with the book title you thought up in step 1.1 as a key, and at least the following properties: `title`, `language` and `author`. -**1.5** Now change the function from step 1.3 that you used to display the book ID's in a list to take the actual information about the book from the object and display that. Make sure you choose the correct HTML elements for each piece of info, for instance, a heading for the title. +**1.5** Now change the function from step 1.3 that you used to display the book title in a list to take the actual information about the book from the object and display that. Make sure you choose the correct HTML elements for each piece of info, for instance, a heading for the title. **1.6** Beautify your html page with css (use the `style.css` file for that), add sources and alts to each of the images. -**1.7** Find and download book covers for each book and construct a new object which has as keys the book IDs again, and as value the path to the image source (e.g. `{ harry_potter_blabla: './img/harry_potter_blabla.jpg', ... }`). +**1.7** Find and download book covers for each book and construct a new object which has as keys the book titles again, and as value the path to the image source (e.g. `{ harry_potter_blabla: './img/harry_potter_blabla.jpg', ... }`). **1.8** Loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before._) diff --git a/Week1/New Text Document.js b/Week1/New Text Document.js new file mode 100644 index 000000000..3ce0845b9 --- /dev/null +++ b/Week1/New Text Document.js @@ -0,0 +1,25 @@ +'use strict'; + +const update = () => { + let value = parseInt(number.innerText); + value++; + number.innerText = value; +}; + +const root = document.getElementById('root'); + +const number = document.createElement('div'); +number.style.width = '100%'; +number.innerText = 0; +number.style.textAlign = 'center'; +number.style.fontSize = '250%'; +root.appendChild(number); + +const incr = document.createElement('button'); +incr.onclick = update; +incr.setAttribute('class', 'my-button'); +incr.style.width = '100%'; +incr.innerText = 'incr'; +incr.style.textAlign = 'center'; +incr.style.fontSize = '250%'; +root.appendChild(incr); diff --git a/Week1/README.md b/Week1/README.md index b7faf0c20..c509afe0a 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -34,15 +34,19 @@ In week one we will discuss the following topics: Then, click on the `{ }` button in the top-right corner of the settings screen to access the settings in JSON format. + ```json /// Place your settings in this file to overwrite the default settings { "editor.detectIndentation": false, "editor.formatOnSave": true, - "editor.formatOnType": true, "editor.minimap.enabled": false, "editor.renderIndentGuides": true, "editor.tabSize": 2, + "editor.codeActionsOnSave": { + "source.fixAll": true + }, + "eslint.autoFixOnSave": true, "files.autoSave": "onFocusChange", "prettier.printWidth": 100, "prettier.singleQuote": true, diff --git a/Week1/homework/.vscode/launch.json b/Week1/homework/.vscode/launch.json new file mode 100644 index 000000000..a053d2340 --- /dev/null +++ b/Week1/homework/.vscode/launch.json @@ -0,0 +1,14 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "program": "${file}" + } + ] +} \ No newline at end of file diff --git a/Week1/homework/.vscode/settings.json b/Week1/homework/.vscode/settings.json new file mode 100644 index 000000000..3b6641073 --- /dev/null +++ b/Week1/homework/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "git.ignoreLimitWarning": true +} \ No newline at end of file diff --git a/Week1/homework/MY-app.js b/Week1/homework/MY-app.js new file mode 100644 index 000000000..17d31f5c7 --- /dev/null +++ b/Week1/homework/MY-app.js @@ -0,0 +1,142 @@ +'use strict'; + +{ + const favoriteBooks = [ + //1.1 Replace with your own book titles + 'harry_potter_chamber_secrets', + 'call_of_the_wild', + 'the_turtle', + 'snowball_and_the_bunny_adventures', + 'chicken_little', + 'hey_friend', + 'it_is_chilly_out_there', + 'stone_and_pain', + 'maybe_tomorrow', + 'alise_in_wonderland', + ]; + + // 1.2 Replace with your own code + + //console.log(favoriteBooks); + + //1.3 Remove the temporary console.log from step 1.1. Make a function (or functions) that generate a ul with li elements for each book ID + // in the array using a for loop. Make sure that the function names you choose are an accurate reflection of what they do. As a reminder, + //here are the recommended Naming Conventions. + + // let booksList = document.createElement('ul'); + // booksList.setAttribute('id', 'li'); + // document.body.appendChild(booksList); + + // let index; + // for (index in favoriteBooks) { + // let booksListItem = document.createElement('li'); + // booksList.appendChild(booksListItem); + // booksListItem.textContent = favoriteBooks[index]; + // } + // } + // generateList(); + // function generateList(){ + + +// // 1.4 Make an object (not an array!) containing information for each book. Each property of this object should be another (i.e., nested) +// object with the book ID you thought up in step 1.1 as a key, and at least the following properties: title, language and author. +let bookProperties = { + harry_potter_chamber_secrets:{ + title:"Harry Potter: Chamber of Secrets", + language:"English", + author:"Joanne K. Rowling", + }, + call_of_the_wild:{ + title:"Call of the Wild", + language:"English", + author:"Jack London", + }, + the_turtle:{ + title:"The Turtle", + language:"Anna -ish", + author:"Imaginery", + }, + snowball_and_the_bunny_adventures:{ + title:"Snowball and the Bunny Adventures", + language:"Anna -ish", + author:"Imaginery van Children", + }, + chicken_little:{ + title:"Chicken Little - The Sky is Falling", + language:"English", + author:"Folk Tale", + }, + hey_friend:{ + title:"Hey Friend", + language:"Anna -ish", + author:"Imaginery", + }, + it_is_chilly_out_there:{ + title:"It is Chilly out There", + language:"Anna -ish", + author:"Imaginery", + }, + stone_and_pain:{ + title:"Stone and Pain - The Life of Michelangelo Buonarotti", + language:"Chech", + author:"Karrel Schulz", + }, + maybe_tomorrow:{ + title:"Maybe Tomorrow", + language:"Anna -ish", + author:"Imaginery Delayer", + }, + alise_in_wonderland:{ + title:"Alise in Wonderland", + language:"English", + author:"Lewis Carrol", + } +} + + +// // 1.5 Now change the function from step 1.3 that you used to display the book ID's in a list to take the actual information about the book +// from the object and display that. Make sure you choose the correct HTML elements for each piece of info, for instance, a heading for the title. +function generateList(){ + let booksList = document.createElement('ul'); + booksList.setAttribute('id', 'li'); + document.body.appendChild(booksList); + + let index; + + for (index in favoriteBooks) { + let booksListItem = document.createElement('li'); + booksList.appendChild(booksListItem); + + let BooksID = favoriteBooks[index]; + booksListItem.textContent = favoriteBooks[index]; + } +} +generateList(); +//Gabe's example +// const unorderedListElement = document.createElement('ul'); + +// for (let bookTitleKey in bookTitles) { +// const bookUL = document.createElement ('ul'); + +// const authorListEl = document.createElement('li') +// authorListEl.innerText = bookTitles[bookTitleKey].author; +// bookUL.appendChild(authorListEl) + +// const titleListEl = document.createElement('li') +// titleListEl.innerText = bookTitles[bookTitleKey].author; +// bookUL.appendChild(titleListEl) + +// const yearListEl = document.createElement('li') +// yearListEl.innerText = bookTitles[bookTitleKey].author; +// bookUL.appendChild(yearListEl) +// } + +// // 1.6 Beautify your html page with css (use the style.css file for that), add sources and alts to each of the images. + +// // 1.7 Find and download book covers for each book and construct a new object which has as keys the book IDs again, and as value the path to +// the image source (e.g. { harry_potter_blabla: './img/harry_potter_blabla.jpg', ... }). + +// // 1.8 Loop over these entries (hint: Object.keys(objectName) gives you an array containing the keys). Then write a function which places an +// image at the corresponding li element. Remember that objects are not ordered, so you cannot guarantee that the first key is the first li element. + // (Hint: you could give each li item an id tag by modifying the function you made before.) +} diff --git a/Week1/homework/adding_numbers.js b/Week1/homework/adding_numbers.js new file mode 100644 index 000000000..685b40efc --- /dev/null +++ b/Week1/homework/adding_numbers.js @@ -0,0 +1,30 @@ +const assert = chai.assert.deepStrictEqual +const range = _.range +const print = console.log +print('##### begin #####') +assert(range(5), [0,1,2,3,4]) + +/*function sumAll(a, b) { + const max = Math.max(a, b); + const min = Math.min(a, b); + let result = 0; + for (var i=min; i <= max; i++){ + result += i; + } +return result; +}*/ + +function sumAll(a, b) { + const avg = (a+b)/2 + const n = Math.abs(b-a)+1 + return avg*n; +} + +assert(10, sumAll(1, 4)); +assert(10, sumAll(4, 1)); +assert(1, sumAll(1, 1)); +assert(45, sumAll(5, 10)); +assert(5050, sumAll(1, 100)); + + +print('##### end #####') diff --git a/Week1/homework/app.js b/Week1/homework/app.js deleted file mode 100644 index a9b5f75d8..000000000 --- a/Week1/homework/app.js +++ /dev/null @@ -1,11 +0,0 @@ -'use strict'; - -{ - const bookTitles = [ - // Replace with your own book titles - 'harry_potter_chamber_secrets', - ]; - - // Replace with your own code - console.log(bookTitles); -} diff --git a/Week1/homework/extend-constructors-to-receive-arguments.json b/Week1/homework/extend-constructors-to-receive-arguments.json new file mode 100644 index 000000000..ab3b8146d --- /dev/null +++ b/Week1/homework/extend-constructors-to-receive-arguments.json @@ -0,0 +1 @@ +{"index.js":"function Dog(name, color) {\nthis.name = name;\nthis.color = color;\nthis.numLegs = 4; \n}\n\nlet terrier = new Dog(\"Gafgaf\", \"brown\");"} \ No newline at end of file diff --git a/Week1/homework/index.htm b/Week1/homework/index.htm new file mode 100644 index 000000000..550464056 --- /dev/null +++ b/Week1/homework/index.htm @@ -0,0 +1,13 @@ + + + + + Foo Coding + + + + + + + + \ No newline at end of file diff --git a/Week1/homework/index.html b/Week1/homework/index.html index b22147cd1..238e7436e 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -1 +1,29 @@ - \ No newline at end of file + + + + + + FavoriteBooks Excercise + + + + + + + + + + + \ No newline at end of file diff --git a/Week1/homework/style.css b/Week1/homework/style.css index bab13ec23..44cb05eeb 100644 --- a/Week1/homework/style.css +++ b/Week1/homework/style.css @@ -1 +1 @@ -/* add your styling here */ \ No newline at end of file +/* add your styling here */ diff --git a/Week1/homework/sum-all-numbers-in-a-range.json b/Week1/homework/sum-all-numbers-in-a-range.json new file mode 100644 index 000000000..6c54d70be --- /dev/null +++ b/Week1/homework/sum-all-numbers-in-a-range.json @@ -0,0 +1 @@ +{"index.js":"function sumAll(arr) {\n \n let minimumValue = Math.min(...arr);\n let maximumValue = Math.max(...arr);\n let summarize = 0;\n for (let i = minimumValue; i <= maximumValue; i += 1){\n console.log(i);\n summarize += i;\n }\n return summarize;\n}\n\nsumAll([1, 4]);\n\n\n// var arr;\n// for (arr = 0; arr < 5; arr++) {\n// // Runs 5 times, with values of step 0 through 4.\n// console.log(arr);\n// }\n\n"} \ No newline at end of file diff --git a/Week1/incrementSimple/incrementSimple.html b/Week1/incrementSimple/incrementSimple.html new file mode 100644 index 000000000..6e954296a --- /dev/null +++ b/Week1/incrementSimple/incrementSimple.html @@ -0,0 +1,12 @@ + + + + Increment + + + + +
+ + + \ No newline at end of file diff --git a/Week1/incrementSimple/incrementSimple.js b/Week1/incrementSimple/incrementSimple.js new file mode 100644 index 000000000..cf4eb87f9 --- /dev/null +++ b/Week1/incrementSimple/incrementSimple.js @@ -0,0 +1,25 @@ +"use strict" + +const update = () => { + let value = parseInt(number.innerText) + value++ + number.innerText = value +} + +const root = document.getElementById('root') + +const number = document.createElement('div') +number.style.width = '100%' +number.innerText = 0 +number.style.textAlign = 'center' +number.style.fontSize = '250%' +root.appendChild(number) + +const incr = document.createElement('button') +incr.onclick = update +incr.setAttribute('class', 'my-button') +incr.style.width = '100%' +incr.innerText = 'incr' +incr.style.textAlign = 'center' +incr.style.fontSize = '250%' +root.appendChild(incr) \ No newline at end of file diff --git a/Week1/notes.txt b/Week1/notes.txt new file mode 100644 index 000000000..e69de29bb diff --git a/Week2/.vscode/settings.json b/Week2/.vscode/settings.json new file mode 100644 index 000000000..8d330d45d --- /dev/null +++ b/Week2/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "cSpell.words": [ + "everything", + "upcase" + ] +} \ No newline at end of file diff --git a/Week2/LECTURENOTES.md b/Week2/LECTURENOTES.md new file mode 100644 index 000000000..09352a864 --- /dev/null +++ b/Week2/LECTURENOTES.md @@ -0,0 +1,51 @@ +### Lecture Notes Week 2 + +#### Before class +Slack message students for things they'd like to review before diving into new topics + +## Reviewing (11-11:30am) +Cover individual topics that students may still be stuck on from previous lectures and homework + +## JSON (11:30am-12pm) +* Illustration on Google Maps. How do people from Sweden speak to people from Sri Lanka? +* [Advice Slip](https://adviceslip.com/) and [API](https://api.adviceslip.com/#endpoint-random). If they have machines that run on the programming language RUST, how can we communicate with them? They serialize their data to JSON! +* Douglass Crawford +* What is JSON? + * Javscript Object Notation + * We are fortunate that it's familiar and easy to understand :) + * It is a STRING [PokeAPI](https://pokeapi.co/api/v2/pokemon/squirtle/) + * Not all javascript objects are valid json +* Coding exercise (lecture-exercise.js) + * JSON.parse +* Serialization vs Deserialization + * JSON.stringify() + * Other formats + * protobufs + * XML + * GRPC?! +* Cover homework question #3 + +## Functions advanced (12-12:30pm) +* Different ways functions can be made: + * function declaration vs expression + * arrow function + * Omitting return, parameter parenthesis +* What's a method? +* Pure function? or side effects? +* Example: how does a program run this? (example w/ a function, call of that function, and a console log) + * Call stack (stack overflow) +* Params + * Extra params + * Default params +* Recursion (basic example) +* Example function + * pigs example? + * countChar("kakkerlak", "k")? With DOM manipulation? +* Simplicity of functions + * while loop from [Chapter 5](http://eloquentjavascript.net/05_higher_order.html) +* Higher order functions + * repeat(n, action) + * greaterThan10 + +## Array Manipulations +## Map, Filter, Reduce (others? every, some, etc) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 0169b7920..2709da79e 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -2,11 +2,10 @@ ``` Topics discussed this week: -• Functions + JSON/Arrays -• Array Manipulations • JSON -• Map and filter -• Arrow functions +• Functions advanced +• Array Manipulations +• Map, filter, & reduce ``` > [Here](/Week3/README.md) you find the readings you have to complete before the third lecture. @@ -139,7 +138,13 @@ If that's the case, try and fix the error. When done, run the tests again: `npm Repeat the previous step until all (= 2 in this case) tests pass. -## Step 3: ROVER +## Step 3: JSON parsing + +1. Create an HTML file +2. Insert a script tag that points to squirtle-sprites.js +3. In squirtle-sprites.js, call fetchPokemonData() and convert the JSON string it returns to a javascript object so you can access its properties +4. Display the sprite images (located in the parsed object) in the HTML page. You'll need to do some DOM manipulation kinda of stuff (maybe element.appendChild?) +*Bonus Challenge*: Can you use an array method to loop over all sprites so you don't have to manually type each? Finish up to chapter 7: JSON on [roverjs.com](http://roverjs.com/)! @@ -171,3 +176,6 @@ Go over your homework one last time: If the answer is 'yes' to all preceding questions you are ready to follow these instructions: - [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) + +### Do you have even more time? +Read the _Eloquent Javascript_ chapters in the [Week 2 Readme](./README.md) \ No newline at end of file diff --git a/Week2/README.md b/Week2/README.md index c58b21eb5..2b9dd1b9c 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -4,37 +4,32 @@ ``` In week two we will discuss the following topics: -• Functions + JSON/Arrays -• Array Manipulations • JSON -• Map and filter -• Arrow functions +• Functions advanced +• Array Manipulations +• Map, filter, & reduce ``` ## Here are resources that we like you to read as a preparation for the coming lecture. ### JSON -- [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) (MDN) +- [FreeCodeCamp JSON](https://www.youtube.com/watch?v=B-k76DMOj2k) +- [What is JSON and why does one use it?](https://www.quora.com/What-is-JSON-and-why-does-one-use-it/answer/Prid-Speed?ch=10&share=0b6f9763&srid=XxbK) ### Map and Filter - :dizzy: [Fun fun functional](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) :dizzy: Check the first 3-4 videos. -### Code conventions -- Code conventions: http://crockford.com/javascript/code.html - ### Array cardio - Wes Bos' awesome free tutorials. Just make a free account and do Array Cardio #1 [here](https://javascript30.com/) -### From _Eloquent JavaScript_ - -- Objects continued: http://eloquentjavascript.net/06_object.html - - ## Recommended readings +These chapters from _Eloquent JavaScript_ are a bit advanced, but give in-depth explanations of the topics that will be discussed during the lecture. If you have the time, try giving these chapters a read. -This chapter from _Eloquent JavaScript_ gives in-depth explanations of the topics that will be discussed during the lecture. Highly recommended (if time permits). +- Chapter 3 - [Functions](https://eloquentjavascript.net/03_functions.html) +- Chapter 4 - [Data Structures: Objects and Arrays](https://eloquentjavascript.net/04_data.html) +- Chapter 5 [Higher-Order Functions](https://eloquentjavascript.net/05_higher_order.html) -- Chapter 3 - [Functions](http://eloquentjavascript.net/03_functions.html) -- Chapter 5 - [Higher-Order Functions](http://eloquentjavascript.net/05_higher_order.html) +#### For fun + [The Weird History of JavaScript](https://www.youtube.com/watch?v=Sh6lK57Cuk4) shows just how haphazard the evolution of Javascript actually was. _Please go through the material and come to class prepared!_ \ No newline at end of file diff --git a/Week2/class_with_Gabe/example.html b/Week2/class_with_Gabe/example.html new file mode 100644 index 000000000..0adb34d9e --- /dev/null +++ b/Week2/class_with_Gabe/example.html @@ -0,0 +1,19 @@ + + + + Advice Slip Page + + + +

Your piece of random advice is

+

SAMPLE ADVICE

+ + + \ No newline at end of file diff --git a/Week2/class_with_Gabe/lecture-excercises.js b/Week2/class_with_Gabe/lecture-excercises.js new file mode 100644 index 000000000..e37bd89d2 --- /dev/null +++ b/Week2/class_with_Gabe/lecture-excercises.js @@ -0,0 +1,15 @@ +document.querySelector('h1').innerText = 'Monkey'; + +async function getAdvice() { + const adviceResponse = await fetch('https://api.adviceslip.com/advice') //get bytes + const payloadText = await adviceResponse.text(); //convert bytes to text + const payloadObj = JSON.parse(payloadText) + return payloadObj.slip.advice; +} + + +async function addAdviceToPage() { + document.querySelector('h1').innerHTML = await getAdvice(); +} + +addAdviceToPage(); \ No newline at end of file diff --git a/Week2/example.html b/Week2/example.html new file mode 100644 index 000000000..ee9ce43a2 --- /dev/null +++ b/Week2/example.html @@ -0,0 +1,22 @@ + + + + + Sample exercise + + + +

Here is your advice for the day:

+ + + + + + diff --git a/Week2/homework/map-filter.js b/Week2/homework/map-filter.js index c8e8a88c1..83a1f6b63 100644 --- a/Week2/homework/map-filter.js +++ b/Week2/homework/map-filter.js @@ -3,6 +3,7 @@ function doubleOddNumbers(numbers) { // Replace this comment and the next line with your code console.log(numbers); + return [2, 6]; } const myNumbers = [1, 2, 3, 4]; diff --git a/Week2/homework/squirtle-sprites.js b/Week2/homework/squirtle-sprites.js new file mode 100644 index 000000000..b6b6e2920 --- /dev/null +++ b/Week2/homework/squirtle-sprites.js @@ -0,0 +1,11 @@ +/* eslint-disable */ + +/* + Call this function to get a JSON string of the data + (simulates calling a server to retrieve data) +*/ +function fetchPokemonData() { + return '{"abilities":[{"ability":{"name":"rain-dish","url":"https://pokeapi.co/api/v2/ability/44/"},"is_hidden":true,"slot":3},{"ability":{"name":"torrent","url":"https://pokeapi.co/api/v2/ability/67/"},"is_hidden":false,"slot":1}],"base_experience":63,"forms":[{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-form/7/"}],"height":5,"held_items":[],"id":7,"is_default":true,"location_area_encounters":"https://pokeapi.co/api/v2/pokemon/7/encounters","name":"squirtle","order":10,"species":{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-species/7/"},"sprites":{"back_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/7.png","back_female":null,"back_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/7.png","back_shiny_female":null,"front_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png","front_female":null,"front_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/7.png","front_shiny_female":null},"stats":[{"base_stat":43,"effort":0,"stat":{"name":"speed","url":"https://pokeapi.co/api/v2/stat/6/"}},{"base_stat":64,"effort":0,"stat":{"name":"special-defense","url":"https://pokeapi.co/api/v2/stat/5/"}},{"base_stat":50,"effort":0,"stat":{"name":"special-attack","url":"https://pokeapi.co/api/v2/stat/4/"}},{"base_stat":65,"effort":1,"stat":{"name":"defense","url":"https://pokeapi.co/api/v2/stat/3/"}},{"base_stat":48,"effort":0,"stat":{"name":"attack","url":"https://pokeapi.co/api/v2/stat/2/"}},{"base_stat":44,"effort":0,"stat":{"name":"hp","url":"https://pokeapi.co/api/v2/stat/1/"}}],"types":[{"slot":1,"type":{"name":"water","url":"https://pokeapi.co/api/v2/type/11/"}}],"weight":90}'; +} + +/* Code goes below */ diff --git a/Week2/lecture-exercises.js b/Week2/lecture-exercises.js new file mode 100644 index 000000000..73b4242cb --- /dev/null +++ b/Week2/lecture-exercises.js @@ -0,0 +1,53 @@ +async function getRandomAdvice() { + const adviceReq = fetch('https://api.adviceslip.com/advice'); // send request + const adviceResponse = await adviceReq; // wait until something comes back + // const jsonString = await adviceResponse.text(); + // return jsonString + // const adviceData = JSON.parse(jsonString) + // return jsonString + const adviceData = await adviceResponse.json(); // parses JSON string into native JavaScript object + return adviceData.slip.advice; +} + +let allAdvice = []; +const adviceEl = document.getElementById('advice'); + +function updateDOM() { + adviceEl.innerHTML = ''; + +allAdvice.forEach((advice, index) => { + const adviceItem = document.createElement('li'); + adviceEl.appendChild(adviceItem); + adviceItem.innerText = advice; + + const removeButton = document.createElement('button'); + removeButton.innerText = 'Remove'; + adviceItem.appendChild(removeButton); + + removeButton.addEventListener('click', () => deleteAdvice(index)); +}) +} + +function deleteAdvice(index) { + allAdvice.splice(index, 1); + updateDOM(); +} + +function upcaseAllAdvice() { + allAdvice = allAdvice.map(advice => advice.toUpperCase()); + updateDOM(); +} + +async function setRandomAdvice() { + allAdvice.push(await getRandomAdvice()); + updateDOM(); +} + +setRandomAdvice(); + +// for (let i=0; i<10; i++) { +// setRandomAdvice(); +// } + +document.getElementById('add-advice').addEventListener('click', setRandomAdvice); +document.getElementById('upcase-everything').addEventListener('click', upcaseAllAdvice); \ No newline at end of file diff --git a/Week2/placeholder.txt b/Week2/placeholder.txt new file mode 100644 index 000000000..be9475599 --- /dev/null +++ b/Week2/placeholder.txt @@ -0,0 +1 @@ +ggg \ No newline at end of file diff --git a/Week2/test/maartjes-work.test.js b/Week2/test/maartjes-work.test.js index ab6bc2a44..a0de72b2f 100644 --- a/Week2/test/maartjes-work.test.js +++ b/Week2/test/maartjes-work.test.js @@ -1,9 +1,9 @@ -const { maartjesTasks, maartjesHourlyRate, computeEarnings } = require(`../homework/maartjes-work`); +// const { maartjesTasks, maartjesHourlyRate, computeEarnings } = require(`../homework/maartjes-work`); -describe('maartjes_work', () => { - test('earnings rounded to euro cents', () => { - const earnings = computeEarnings(maartjesTasks, maartjesHourlyRate); - const result = earnings.toFixed(2); - expect(result).toBe('373.33'); - }); -}); +// describe('maartjes_work', () => { +// test('earnings rounded to euro cents', () => { +// const earnings = computeEarnings(maartjesTasks, maartjesHourlyRate); +// const result = earnings.toFixed(2); +// expect(result).toBe('373.33'); +// }); +// }); diff --git a/Week2/test/map-filter.test.js b/Week2/test/map-filter.test.js index e4cb83906..8b8d6c555 100644 --- a/Week2/test/map-filter.test.js +++ b/Week2/test/map-filter.test.js @@ -1,3 +1,4 @@ + const { myNumbers, doubleOddNumbers } = require(`../homework/map-filter`); describe('map_filter', () => { @@ -5,4 +6,20 @@ describe('map_filter', () => { const result = doubleOddNumbers(myNumbers); expect(result).toEqual([2, 6]); }); + test('result -> [2, 6]', () => { + const result = doubleOddNumbers([4, 7, 1, 2]); + + expect(result).toEqual([14, 2]); + }); }); + +// describe('hi',()=> { +// test('return hi',() => { +// expect(hi()).toEqual('hi'); +// }); +// }); + +// describe('add_numbers', ()=>{ +// test('result ->') +// } +// ) \ No newline at end of file diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 289c6c22d..b0b01e7fd 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -13,7 +13,7 @@ Topics discussed this week: > Read: -- JavaScript : [Closures](http://conceptf1.blogspot.nl/2012.11/javascript-closures.html) +- JavaScript : [Closures](http://conceptf1.blogspot.com/2013/11/javascript-closures.html) - Everything you wanted to know about [JavaScript scope](https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/) - JavaScript [Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) - 5 JavaScript [“Bad” Parts That Are Fixed In ES6](https://medium.freecodecamp.com/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81) @@ -74,7 +74,7 @@ function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { threeFive(10, 15, sayThree, sayFive); -// Should create an array [10,11,12,12.14,15] +// Should create an array [10,11,12,13,14,15] // and call sayFive, sayThree, sayThree, sayFive // please make sure you see why these calls are made before you start coding ``` @@ -167,7 +167,7 @@ To run the unit test for the week 3 homework, open a terminal window in the `Jav npm run test-week3 ``` -In case of errors, try and fix them. When done, run the tests again: `npm run test3` +In case of errors, try and fix them. When done, run the tests again. Repeat the previous step until all tests pass. diff --git a/Week3/placeholder.txt b/Week3/placeholder.txt new file mode 100644 index 000000000..be9475599 --- /dev/null +++ b/Week3/placeholder.txt @@ -0,0 +1 @@ +ggg \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e89e9916d..2b047f93a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2221,12 +2221,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2241,17 +2243,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2368,7 +2373,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2380,6 +2386,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2394,6 +2401,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2401,12 +2409,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -2425,6 +2435,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -2505,7 +2516,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -2517,6 +2529,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -2638,6 +2651,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/package.json b/package.json deleted file mode 100644 index 1f7571946..000000000 --- a/package.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "name": "javascript2", - "version": "1.0.0", - "description": "HYF JavaScript2 module", - "main": "index.js", - "scripts": { - "lint": "eslint \"**/homework/**/*.js\"", - "test": "npm run lint", - "test-week1": "eslint Week1/homework", - "test-week2": "eslint Week2/homework && jest Week2", - "test-week3": "eslint Week3/homework && jest Week3", - "test-maartjes-work": "jest maartjes-work", - "test-map-filter": "jest map-filter", - "test-step2-1": "jest step2-1", - "test-step2-2": "jest step2-2", - "test-step2-3": "jest step2-3", - "test-step2-4": "jest step2-4", - "test-step2-5": "jest step2-5", - "test-step2-6": "jest step2-6", - "test-step3": "jest step3", - "test-step3-bonus": "jest step3-bonus" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/HackYourFuture/JavaScript2.git" - }, - "author": "HackYourFuture", - "license": "ISC", - "bugs": { - "url": "https://github.com/HackYourFuture/JavaScript2/issues" - }, - "homepage": "https://github.com/HackYourFuture/JavaScript2#readme", - "devDependencies": { - "eslint": "^5.9.0", - "eslint-config-airbnb-base": "^13.1.0", - "eslint-config-airbnb": "^17.1.0", - "eslint-config-prettier": "^3.3.0", - "eslint-plugin-import": "^2.14.0", - "eslint-plugin-jest": "^21.26.0", - "eslint-plugin-jsx-a11y": "^6.1.2", - "eslint-plugin-prettier": "^3.0.0", - "eslint-plugin-react": "^7.11.1", - "jest": "^23.6.0", - "prettier": "^1.15.2" - } -} diff --git a/prettier.config.js b/prettier.config.js deleted file mode 100644 index ee80efd56..000000000 --- a/prettier.config.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = { - printWidth: 100, - singleQuote: true, - trailingComma: 'all', - bracketSpacing: true, - jsxBracketSameLine: false, - tabWidth: 2, - semi: true, -};