Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c509c51

Browse files
CatsudemoCatsudemo
authored
Merge pull request #1 from Catsudemo/homework
Homework
2 parents 7cfa2fd + cf4d80e commit c509c51

File tree

12 files changed

+277
-85
lines changed

12 files changed

+277
-85
lines changed

‎.gitignore

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
8-
# Runtime data
9-
pids
10-
*.pid
11-
*.seed
12-
*.pid.lock
13-
14-
# Directory for instrumented libs generated by jscoverage/JSCover
15-
lib-cov
16-
17-
# Coverage directory used by tools like istanbul
18-
coverage
19-
20-
# nyc test coverage
21-
.nyc_output
22-
23-
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24-
.grunt
25-
26-
# Bower dependency directory (https://bower.io/)
27-
bower_components
28-
29-
# node-waf configuration
30-
.lock-wscript
31-
32-
# Compiled binary addons (http://nodejs.org/api/addons.html)
33-
build/Release
34-
35-
# Dependency directories
36-
node_modules/
37-
jspm_packages/
38-
39-
# Typescript v1 declaration files
40-
typings/
41-
42-
# Optional npm cache directory
43-
.npm
44-
45-
# Optional eslint cache
46-
.eslintcache
47-
48-
# Optional REPL history
49-
.node_repl_history
50-
51-
# Output of 'npm pack'
52-
*.tgz
53-
54-
# Yarn Integrity file
55-
.yarn-integrity
56-
57-
# dotenv environment variables file
58-
.env
59-
60-
.netlify
61-
dist/
1+
.DS_Store

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ or links, please share them by [opening a pull request](https://github.com/FooCo
55

66
Here you can find course content and homework for the JavaScript2 module
77

8-
|Week|Topic|Read|Homework|
9-
|----|-----|----|--------|
8+
|Week|Topic|Read|Homework|Lecture Notes|
9+
|----|-----|----|--------|--------|
1010
|1.|• Capturing user input through forms <br>• [Events](http://javascript.info/introduction-browser-events)<br>• [Basic DOM manipulations](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)<br>• [Code debugging using the browser](http://javascript.info/debugging-chrome) <br>• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)<br>• Structuring code files<br>• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)<br>• [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
11-
|2.|• Functions + JSON/Arrays<br>• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)<br>• JSON<br>• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)<br>• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|
11+
|2.|• Functions + JSON/Arrays<br>• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)<br>• JSON<br>• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)<br>• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[Notes](/Week2/LECTURENOTES.md)
1212
|3.|• [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md) <br>• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
1313

1414
## Test

‎Week2/LECTURENOTES.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
### Lecture Notes Week 2
2+
3+
#### Before class
4+
Slack message students for things they'd like to review before diving into new topics
5+
6+
## Reviewing (11-11:30am)
7+
Cover individual topics that students may still be stuck on from previous lectures and homework
8+
9+
## JSON (11:30am-12pm)
10+
* Illustration on Google Maps. How do people from Sweden speak to people from Sri Lanka?
11+
* [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!
12+
* Douglass Crawford
13+
* What is JSON?
14+
* Javscript Object Notation
15+
* We are fortunate that it's familiar and easy to understand :)
16+
* It is a STRING [PokeAPI](https://pokeapi.co/api/v2/pokemon/squirtle/)
17+
* Not all javascript objects are valid json
18+
* Coding exercise (lecture-exercise.js)
19+
* JSON.parse
20+
* Serialization vs Deserialization
21+
* JSON.stringify()
22+
* Other formats
23+
* protobufs
24+
* XML
25+
* GRPC?!
26+
* Cover homework question #3
27+
28+
## Functions advanced (12-12:30pm)
29+
* Different ways functions can be made:
30+
* function declaration vs expression
31+
* arrow function
32+
* Omitting return, parameter parenthesis
33+
* What's a method?
34+
* Pure function? or side effects?
35+
* Example: how does a program run this? (example w/ a function, call of that function, and a console log)
36+
* Call stack (stack overflow)
37+
* Params
38+
* Extra params
39+
* Default params
40+
* Recursion (basic example)
41+
* Example function
42+
* pigs example?
43+
* countChar("kakkerlak", "k")? With DOM manipulation?
44+
* Simplicity of functions
45+
* while loop from [Chapter 5](http://eloquentjavascript.net/05_higher_order.html)
46+
* Higher order functions
47+
* repeat(n, action)
48+
* greaterThan10
49+
50+
## Array Manipulations
51+
## Map, Filter, Reduce (others? every, some, etc)

‎Week2/MAKEME.md

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@
22

33
```
44
Topics discussed this week:
5-
• Functions + JSON/Arrays
6-
• Array Manipulations
75
• JSON
8-
• Map and filter
9-
• Arrow functions
6+
• Functions advanced
7+
• Array Manipulations
8+
• Map, filter, & reduce
109
```
1110

1211
> [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
139138

140139
Repeat the previous step until all (= 2 in this case) tests pass.
141140

142-
## Step 3: ROVER
141+
## Step 3: JSON parsing
142+
143+
1. Create an HTML file
144+
2. Insert a script tag that points to squirtle-sprites.js
145+
3. In squirtle-sprites.js, call fetchPokemonData() and convert the JSON string it returns to a javascript object so you can access its properties
146+
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?)
147+
*Bonus Challenge*: Can you use an array method to loop over all sprites so you don't have to manually type each?
143148

144149
Finish up to chapter 7: JSON on [roverjs.com](http://roverjs.com/)!
145150

@@ -171,3 +176,6 @@ Go over your homework one last time:
171176
If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
172177

173178
- [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md)
179+
180+
### Do you have even more time?
181+
Read the _Eloquent Javascript_ chapters in the [Week 2 Readme](./README.md)

‎Week2/README.md

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,32 @@
44

55
```
66
In week two we will discuss the following topics:
7-
• Functions + JSON/Arrays
8-
• Array Manipulations
97
• JSON
10-
• Map and filter
11-
• Arrow functions
8+
• Functions advanced
9+
• Array Manipulations
10+
• Map, filter, & reduce
1211
```
1312

1413
## Here are resources that we like you to read as a preparation for the coming lecture.
1514

1615
### JSON
17-
- [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) (MDN)
16+
- [FreeCodeCamp JSON](https://www.youtube.com/watch?v=B-k76DMOj2k)
17+
- [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)
1818

1919
### Map and Filter
2020
- :dizzy: [Fun fun functional](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) :dizzy: Check the first 3-4 videos.
2121

22-
### Code conventions
23-
- Code conventions: http://crockford.com/javascript/code.html
24-
2522
### Array cardio
2623
- Wes Bos' awesome free tutorials. Just make a free account and do Array Cardio #1 [here](https://javascript30.com/)
2724

28-
### From _Eloquent JavaScript_
29-
30-
- Objects continued: http://eloquentjavascript.net/06_object.html
31-
32-
3325
## Recommended readings
26+
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.
3427

35-
This chapter from _Eloquent JavaScript_ gives in-depth explanations of the topics that will be discussed during the lecture. Highly recommended (if time permits).
28+
- Chapter 3 - [Functions](https://eloquentjavascript.net/03_functions.html)
29+
- Chapter 4 - [Data Structures: Objects and Arrays](https://eloquentjavascript.net/04_data.html)
30+
- Chapter 5 [Higher-Order Functions](https://eloquentjavascript.net/05_higher_order.html)
3631

37-
- Chapter 3 - [Functions](http://eloquentjavascript.net/03_functions.html)
38-
- Chapter 5 - [Higher-Order Functions](http://eloquentjavascript.net/05_higher_order.html)
32+
#### For fun
33+
[The Weird History of JavaScript](https://www.youtube.com/watch?v=Sh6lK57Cuk4) shows just how haphazard the evolution of Javascript actually was.
3934

4035
_Please go through the material and come to class prepared!_

‎Week2/example.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Sample exercise</title>
6+
<style>
7+
body {
8+
font-family: sans-serif;
9+
}
10+
#advice {
11+
color: slateblue;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<h3>Here is your advice for the day:</h3>
17+
<h1 id="advice"></h1>
18+
<script type="text/javascript" src="./lecture-exercises.js"></script>
19+
</body>
20+
</html>

‎Week2/homework/squirtle-sprites.js

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Week2/homework/squirtle-squad/SquirtleSquad.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="squirtle.css" />
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
<title>Meet the Squirtle Squad</title>
9+
</head>
10+
<body>
11+
<section class="section">
12+
<h2>Introducing the Squirtle Squad</h2>
13+
<br />
14+
<div id="quoteSpace"></div>
15+
16+
<div id="poke-selector"></div>
17+
<script type="text/javascript" src="./squirtle-sprites.js"></script>
18+
<div id="footer">Made for FooCoding Javascript 2.</div>
19+
</section>
20+
</body>
21+
</html>

‎Week2/homework/squirtle-squad/squirtle-sprites.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/* eslint-disable */
2+
3+
console.log('im fucking awawke');
4+
/*
5+
Call this function to get a JSON string of the data
6+
(simulates calling a server to retrieve data)
7+
*/
8+
function fetchPokemonData() {
9+
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}`;
10+
}
11+
12+
/*Code goes below */
13+
14+
function parsemon() {
15+
let pokeProperties = JSON.parse(fetchPokemonData());
16+
let justSprites = Object.keys(pokeProperties.sprites)
17+
.map(key => pokeProperties.sprites[key])
18+
.filter(sprite => sprite);
19+
return justSprites;
20+
}
21+
22+
let unorderedSprites = parsemon();
23+
let sprites = unorderedSprites.reverse();
24+
25+
const mySpriteSpot = document.querySelector('#poke-selector');
26+
27+
const div = document.createElement('div');
28+
div.setAttribute('class', 'wrapper');
29+
30+
for (sprite in sprites) {
31+
const eachSpriteDiv = document.createElement('div');
32+
eachSpriteDiv.id = sprite;
33+
eachSpriteDiv.setAttribute('class', 'box');
34+
35+
// const name = document.createElement('h4');
36+
// name.innerText = `This is sprite ${sprite}`;
37+
// eachSpriteDiv.appendChild(name);
38+
// console.log(name);
39+
40+
const picture = document.createElement('IMG');
41+
picture.src = sprites[sprite];
42+
eachSpriteDiv.appendChild(picture);
43+
44+
div.appendChild(eachSpriteDiv);
45+
46+
mySpriteSpot.appendChild(div);
47+
48+
console.log('Name is' + name + 'sprite is' + sprites[sprite]);
49+
}

0 commit comments

Comments
 (0)