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

Skip to content

Commit c90ad3c

Browse files
author
Noer Paanakker
committed
Almost finished week 1, week 3 finished!
1 parent fd74e8d commit c90ad3c

File tree

3 files changed

+242
-122
lines changed

3 files changed

+242
-122
lines changed

Week1/MAKEME.md

Lines changed: 52 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
# Homework JavaScript1 Week 1
22

3-
## Todo list
3+
## **Todo list**
44

55
1. Practice the concepts
66
2. JavaScript exercises
77
3. Code along
88
4. PROJECT:
99

10-
### 1. Get to know
10+
## **1. Get to know**
1111

1212
Before we learn how to build actual applications, we first need to gain experience using JavaScript in a computational way. This teaches us how to think like a programmer, and gives us more experience with the language itself.
1313

@@ -17,11 +17,11 @@ In the following exercises you'll learn how to use different JavaScript concepts
1717
- [Codecademy: Introduction to JavaScript](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-introduction). Do all the exercises (#1 to #10).
1818
- [FreeCodeCamp: Introduction to JavaScript](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript). Do at least 20 exercises, you can choose whichever ones you feel are challenging enough.
1919

20-
### 2. JavaScript exercises
20+
## **2. JavaScript exercises**
2121

2222
Inside of your `JavaScript1` fork, create a folder called `week1`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (10 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `logHello.js`.
2323

24-
In each file, start off with the string `'use strict'`. This will make sure the code interpreter will enforce stronger rules when looking at your code.
24+
> In each file, start off with the string `'use strict'`. This will make sure the code interpreter will enforce stronger rules when looking at your code.
2525
2626
> Before starting, make sure you have [Node.js](https://nodejs.org/en/download/) installed on your computer. You'll use this to execute your code to check if it works.
2727
@@ -63,9 +63,9 @@ When done right, it should show the message `I'm awesome`.
6363
6464
**Exercise 3: Log the number**
6565
66-
Follow the steps. Make sure that each step is written on the line after. The file should have 6 lines (excluding the 'use strict') in total.
66+
Follow the steps. Make sure that each step is written on the line after.
6767
68-
1. First, _declare_ your variable `numberX`. Do not _initialize_ it (which means, don't give it a value) yet.
68+
1. First, declare your variable `numberX`. Do not _initialize_ it (which means, don't give it a value) yet.
6969
2. Add a `console.log` statement that explains in words _what you think_ the value of `x` is, like in this example.
7070
3. Add a `console.log` statement that logs the value of `numberX`.
7171
4. Now _initialize_ your variable `numberX` with a number (also called an `integer` in computer science terms).
@@ -74,7 +74,7 @@ Follow the steps. Make sure that each step is written on the line after. The fil
7474
7575
**Exercise 4: Log the string**
7676
77-
Follow the steps. Make sure that each step is written on the line after. The file should have 6 lines (excluding the 'use strict') in total.
77+
Follow the steps. Make sure that each step is written on the line after.
7878
7979
1. Declare a variable `myString` and assign a string to it. Use your full name, including spaces, as the content for the string.
8080
2. Write a `console.log` statement in which you explain in words _what you think_ the value of the string is.
@@ -85,7 +85,7 @@ Follow the steps. Make sure that each step is written on the line after. The fil
8585
8686
**Exercise 5: Round a number and log it**
8787
88-
Follow the steps. Make sure that each step is written on the line after. The file should have 6 lines (excluding the 'use strict') in total.
88+
Follow the steps. Make sure that each step is written on the line after.
8989
9090
1. Declare a variable `z` and assign the number 7.25 to it.
9191
2. Write a `console.log` statement in which you log the value of `z`.
@@ -96,7 +96,7 @@ Follow the steps. Make sure that each step is written on the line after. The fil
9696
9797
**Exercise 6: Log an array of animals**
9898
99-
Follow the steps. Make sure that each step is written on the line after. The file should have 7 lines (excluding the 'use strict') in total.
99+
Follow the steps. Make sure that each step is written on the line after.
100100
101101
1. Declare variable and assign to it an empty array. Make sure that the name of the variable indicates it contains more than 1 item. For example `items` instead of `item`.
102102
2. Write a `console.log` statement that explains in words _what you think_ the value of the array is.
@@ -108,57 +108,71 @@ Follow the steps. Make sure that each step is written on the line after. The fil
108108
109109
**Exercise 7: Log the length of a string**
110110
111+
Follow the steps. Make sure that each step is written on the line after.
112+
111113
1. Declare a variable called `mySentence` and initialize it with the following string: "Programming is so interesting!".
112114
2. Figure out (using Google) how to get the length of `mySentence`.
113115
3. Write a `console.log` statement to log the length of `mySentence`.
114116
115-
**Exercise 8: **
116-
117-
8.0 Write a program that checks the types of two variables and prints out `SAME TYPE` if they are the same type.
118-
8.1 First declare at least four variables and assign them different data types.
119-
8.2 For each variable write a `console.log` statement that logs the value
120-
121-
```js
122-
let foo = 3;
123-
console.log("The value of my variable foo is: " + foo);
124-
```
117+
**Exercise 8: Type checker**
125118
126-
(Curious to know what a `foo` is? Check [this article](https://en.wikipedia.org/wiki/Metasyntactic_variable) on Wikipedia.)
119+
Write a program that checks the data types of two variables and logs to the console `SAME TYPE` if they are the same type. If they are different types log `Not the same...`.
127120
128-
8.3 Now write a `console.log` statement wherein you first explain in words what you think the _type_ of your variables is.
129-
8.4 Now use `typeof` to log the actual _type_ of your variables.
130-
8.5 Now compare the types of your different variables with one another.
131-
8.6 Make sure to also show a message when the variables you are comparing are not the same type.
121+
1. Declare 4 variables: 2 must be `strings` and 2 must be `objects`
122+
2. Create 8 conditional statements, where for each you check if the data type of one variable is the same as the other
123+
3. Find out how to check the type of a variable
124+
4. Write 2 `console.log` statements to log the type of 2 variables, each with a different data type
125+
5. Now compare the types of your different variables with one another
126+
6. Log `Not the same...` when the types are different
132127
133-
For example:
128+
Here's an incomplete example of how it could look:
134129
135130
```js
131+
// Declare all variables
136132
let x = 9;
137-
let y = 'Hello';
133+
let y = 67;
138134

135+
// Check data type
136+
console.log(...);
137+
138+
// Check if data type is the same
139139
if (...) {
140140
console.log('SAME TYPE');
141141
}
142-
// TODO -> add a way of giving feedback if your variables don't have the same type
143142
```
144143
145-
**Exercise 9:**
144+
**Exercise 9: Log the remainder**
145+
146+
For each of these, write in comments what the answer is followed by how you came to that conclusion
146147
147-
9.0 If `x` equals 7, and the only other statement is `x = x % 3`, what would be the new value of `x`?
148-
9.1 Add at least 3 `console.log` statements in which you show that you understand what `%` does.
148+
1. If `x` equals 7, and the only other statement is `x = x % 3`, what would be the value of `x` after the calculation?
149+
2. If `y` equals 21, and the only other statement is `x = x % 4`, what would be the value of `y` after the calculation?
150+
3. If `z` equals 13, and the only other statement is `x = x % 2`, what would be the value of `z` after the calculation?
149151
150-
**Exercise 10:**
152+
**Exercise 10: Compare arrays**
151153
152-
10.0 Write a program to answer the following questions:
153-
10.1 Can you store multiple types in an array? Numbers and strings? Make an example that illustrates your answer.
154-
10.2 Can you compare infinities? (Not in Eyad's world) - does 6/0 === 10/0? How can you test this?
155-
10.3 Add `console.log` statements to the above program in which you show that you understand the concepts (just like you've done in the above assignments).
154+
1. Declare 2 variables, that each hold an array. The first array should have 4 items, the second 7 items
155+
2. Find out how to get the length of each array. Write a `console.log` statement that shows the length of each array
156156
157-
### 3. Code along
157+
```js
158+
const array = ["hello", 123, true, { name: "Noer" }];
159+
160+
console.log('The length of the array is...' + ...);
161+
```
162+
163+
3. Write a conditional statement that checks if both are of equal length. If they are, log to the console `They are the same!`, if not log `Two different sizes`
164+
165+
## **3. Code along**
158166
159167
We don't want to lose connection with HTML/CSS, so in the following tutorial you'll learn how to build a simple web application use HTML/CSS and JavaScript.
160168
161-
### 4. PROJECT:
169+
You'll first write the HTML and CSS, to provide structure and style to the page. When doing so, keep notice of how the developer chooses to do this. Why do they use this tag instead of something else? Why do they give an element a certain class name?
170+
171+
After, the developer will write JavaScript code. You'll notice it's different from how you've used JavaScript. It is something we call **DOM Manipulation**. Don't worry, you don't need to master this just yet. Just follow along and do some research yourself if you already want to learn more about it!
172+
173+
- [Calculator](https://www.youtube.com/watch?v=6v4vBXL-qkY)
174+
175+
## **4. PROJECT: Temperature converter** NOT FINISHED
162176
163177
Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to.
164178
@@ -175,7 +189,7 @@ Example of how to use comments:
175189
const myName = "";
176190
```
177191
178-
## SUBMIT YOUR HOMEWORK!
192+
## **SUBMIT YOUR HOMEWORK!**
179193
180194
After you've finished your todo list it's time to show us what you got! Starting from this week you'll be submitting all your homework through GitHub. What you'll be doing is upload all your files to a forked repository (a copy from the original, which in this case is the [JavaScript1](https://www.github.com/HackYourFuture/JavaScript1) repository) using GIT.
181195

Week2/MAKEME.md

Lines changed: 115 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
# Homework JavaScript1 Week 2
22

3-
## Todo list
3+
## **Todo list**
44

55
1. Practice the concepts
66
2. JavaScript exercises
77
3. Code along
88
4. PROJECT:
99

10-
## 1. Practice the concepts
10+
## **1. Practice the concepts**
1111

1212
In this section you will be doing interactice exercises, that will allow you to practice with the concepts you've learned about this week!
1313

@@ -20,23 +20,66 @@ In the following tutorial you'll learn how to combine JavaScript with HTML & CSS
2020

2121
- [Calculator]()
2222

23-
## 2. JavaScript exercises
23+
## **2. JavaScript exercises**
2424

25-
> For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference
25+
> For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference.
2626
27-
**String exercises!**
27+
> Start each file off with the string `'use strict'` at the top.
28+
29+
**Exercise 1: Remove the comma**
2830

2931
Consider the following string:
3032

3133
```js
3234
let myString = "hello,this,is,a,difficult,to,read,sentence";
3335
```
3436

35-
1.1
36-
1.1 Add the string to your file and log it.<br />
37-
1.2 Log the length of `myString`.<br />
38-
1.3 The commas make that the sentence is quite hard to read. Find a way to remove the commas from the string and replace them with spaces.<br />
39-
1.4 Log `myString` to see if you succeeded.<br />
37+
1. Add the variable to your file.
38+
2. Log the length of `myString`.
39+
3. The commas make that the sentence is quite hard to read. Find a way to remove the commas from the string and replace them with spaces. (use Google!)
40+
4. After replacing the commas, log `myString` to see if you succeeded.
41+
42+
**Exercise 2: The even/odd reporter**
43+
44+
Report whether or not a number is odd/even!
45+
46+
1. Create a `for` loop, that iterates from 0 to 20.
47+
2. Create a conditional statement that checks if the value of the counter variable is odd or even.
48+
3. If it's odd, log to the console `The number [PUT_NUMBER_HERE] is odd!`.
49+
4. If it's even, log to the console `The number [PUT_NUMBER_HERE] is even!`.
50+
51+
**Exercise 3: The recipe card**
52+
53+
Ever wondered how to make a certain meal? Let's create a recipe list with JavaScript!
54+
55+
1. Declare a variable that holds an object (your meal recipe).
56+
2. Give the object 3 properties: a `title` (string), a `servings` (number) and an `ingredients` (array of strings) property.
57+
3. Log each property out seperately.
58+
59+
It should look similar to this:
60+
61+
```markdown
62+
Meal name: Omelete
63+
Serves: 2
64+
Ingredients:
65+
4 eggs
66+
2 strips of bacon
67+
1 tsp salt/pepper
68+
```
69+
70+
**Exercise 4: The reading list**
71+
72+
Keep track of which books you read and which books you want to read!
73+
74+
1. Create an array of 3 objects, where each object describes a book and has properties for the `title` (string), `author` (string), and `alreadyRead` (boolean indicating if you read it yet).
75+
2. Loop through the array of books.
76+
3. For each book, log the book title and book author like so: "The Hobbit by J.R.R. Tolkien".
77+
4. Create a conditional statement to change the log depending on whether you read it yet or not. If you read it, log a string like `You already read "The Hobbit"` right after the log of the book details
78+
5. If you haven't read it log a string like `You still need to read "The Lord of the Rings"`
79+
80+
**Exercise 5: **
81+
**Exercise 3: **
82+
**Exercise 3: **
4083

4184
**Array exercises!**
4285

@@ -46,16 +89,16 @@ Consider the following array:
4689
let favoriteAnimals = ["blowfish", "capricorn", "giraffe"];
4790
```
4891

49-
2.1 Add a statement that adds Mauro's favorite animal _'turtle'_ to the existing array.<br />
50-
2.2 Log your new array!<br />
51-
2.3 Now add Jim's favorite animal to the array, it's _'meerkat'_, but make sure it will be placed after _'blowfish'_ and before _'capricorn'_.<br />
52-
2.4 Write a console.log statement that explains in words _you think_ the new value of the array is.<br />
53-
2.5 Log your new array!<br />
54-
2.6 Log the length of the array, add a message: _'The array has a length of: '_ (here you should show the length of the array).<br />
55-
2.7 Jason does not like _'giraffe'_, delete this animal from the array.<br />
56-
2.8 Again log your new array.<br />
57-
2.9 Now if unlike Jim, you don't like _'meerkat'_ and you want to delete it from the array, but you don't know the position or the `index` of the item in the array, how can you find it?<br />
58-
2.10 Log the index of _'meerkat'_. Add a message so it says: _'The item you are looking for is at index: '_ (here you should show the index of the item).<br />
92+
2.1 Add a statement that adds Mauro's favorite animal _'turtle'_ to the existing array.
93+
2.2 Log your new array!
94+
2.3 Now add Jim's favorite animal to the array, it's _'meerkat'_, but make sure it will be placed after _'blowfish'_ and before _'capricorn'_.
95+
2.4 Write a console.log statement that explains in words _you think_ the new value of the array is.
96+
2.5 Log your new array!
97+
2.6 Log the length of the array, add a message: _'The array has a length of: '_ (here you should show the length of the array).
98+
2.7 Jason does not like _'giraffe'_, delete this animal from the array.
99+
2.8 Again log your new array.
100+
2.9 Now if unlike Jim, you don't like _'meerkat'_ and you want to delete it from the array, but you don't know the position or the `index` of the item in the array, how can you find it?
101+
2.10 Log the index of _'meerkat'_. Add a message so it says: _'The item you are looking for is at index: '_ (here you should show the index of the item).
59102

60103
1. Create a function that takes 3 arguments and returns the sum of the these arguments.
61104

@@ -130,24 +173,69 @@ let favoriteAnimals = ["blowfish", "capricorn", "giraffe"];
130173

131174
> ‘Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily.
132175
133-
## 3. Code along
176+
## **3. Code along**
134177
135-
In the following project you'll be flexing your HTML/CSS skills again, together with writing JavaScript code.
178+
> Create a new folder outside of your `JavaScript1` fork
136179
137-
In the first part you'll be building the basic frontend, which means the way the page is going to look using only HTML/CSS. In the second part you'll be writing the logic that will allow a user to convert the temperature from one temperature scale to another (i.e. Celsius to Fahrenheit)
180+
In the following 2 projects you'll be flexing your HTML/CSS skills again, together with writing JavaScript code. They are similar in structure and logic, so be sure to spot the similarities!
138181

139-
While watching the videos and coding along, focus on the following:
182+
It's ok if you don't understand exactly what's happening here. Just follow along and try to understand: ask questions about what the developer is doing and think about every line of code.
140183
141-
- Why does the developer
184+
**Project 1: Temperature Converter**
185+
186+
This project will teach you how to convert the temperature from one scale to another in real-time!
187+
188+
In the first part you'll be building the basic frontend, which means the way the page is going to look using only HTML/CSS. In the second part you'll be writing the logic that will allow a user to convert the temperature from one temperature scale to another (i.e. Celsius to Fahrenheit)
142189
143190
- [Temperature Converter Pt. I](https://www.youtube.com/watch?v=EHclqGV_KME)
144191
- [Temperature Converter Pt. II](https://www.youtube.com/watch?v=8mRGfLL1nzE)
145192
146-
### 4. PROJECT:
193+
**Project 2: Weight Converter**
194+
195+
In the following tutorial you'll learn how to make a Weight Converter application. You'll make use of HTML, CSS and JavaScript. At first you'll be building the basic layout of the frontend (the HTML & CSS). After you'll start writing the JavaScript logic that will `convert pounds into grams`.
196+
197+
In order to speed up development you'll be using a CSS framework: [Bootstrap 4](https://www.getbootstrap.com). While coding along, have a look through the documentation in order to get familiar with the different class names to see what they do.
198+
199+
- [Weight Converter App](https://www.youtube.com/watch?v=7l-ZAuU8TXc)
200+
201+
###** 4. PROJECT: Grade calculator**
147202

148203
> Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to.
149204
150-
## SUBMIT YOUR HOMEWORK!
205+
In this project you'll write a script that calculates grades, based on the American grading system! Let's say a student did a test and they got a 60 out of 100, this script will:
206+
207+
1. convert the score into a percentage
208+
2. calculate what grade corresponds with that percentage, and
209+
3. shows in the command line the result: the grade and the percentage
210+
211+
When writing the script, make use of the following grade scores:
212+
213+
```markdown
214+
Grade A (90% - 100%)
215+
Grade B (80% - 89%)
216+
Grade C (70% - 79%)
217+
Grade D (60% - 69%)
218+
Grade E (50% - 59%)
219+
Grade F (0% - 49%)
220+
```
221+
222+
These are the requirements your project needs to fulfill:
223+
224+
- Make a JavaScript file with a name that describes its contents
225+
- Use either a switch or if/else statement
226+
- Write at least 2 comments that explain to others what a line of code is meant to do
227+
- Make the return value of the function a template string, so you can insert variables!
228+
- Use `node` from the command line to test if your code works as expected
229+
230+
This is what the script is expected to return in the command line:
231+
232+
```markdown
233+
You got a B (85%)!
234+
```
235+
236+
Good luck!
237+
238+
## **SUBMIT YOUR HOMEWORK!**
151239
152240
After you've finished your todo list it's time to show us what you got! The homework that needs to be submitted is the following:
153241

0 commit comments

Comments
 (0)