diff --git a/.DS_Store b/.DS_Store index 5008ddf..18d782f 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/README.md b/README.md index 0b60105..9cc4713 100644 --- a/README.md +++ b/README.md @@ -1,104 +1,7 @@ -> If you are following the HackYourFuture curriculum we recommend you to start with module 1: [HTML/CSS/GIT](https://github.com/HackYourFuture/HTML-CSS). To get a complete overview of the HackYourFuture curriculum first, click [here](https://github.com/HackYourFuture/curriculum). +# HYF-Module-JavaScript +Javascript homework and projects from HackYourFuture program: -> Please help us improve and share your feedback! If you find better tutorials -> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript/pulls). - -# Module #2 - JavaScript - -![JavaScript](./assets/javascript.png) - -In this module you'll make a start into wonderful world of programming. We will be using the programming language `JavaScript` to do so. You'll learn about the basic building blocks of programming: `loops`, `functions`, `control flow` and more. Consider these as the ABC's of programming, without them it's impossible to write working software! - -You'll be learning two main things: - -1. **Fundamental concepts in programming**. While we're using JavaScript to illustrate these concepts, it's important to keep in mind that what you will learn is applicable to **any** programming language. They might differ in syntax (a fancy term for the arrangement of words in a language in order for it to make sense), but the functionality will be the same: a loop will always be a loop. - -This should be your mindset when you're learning concepts: **I'm learning how to become a software developer that can adjust to any language used, because I know what the underlying principles and concepts are**. - -2. **How to think like a programmer**. In one sentence this means: knowing how to solve problems computationally. Let's split that up in two parts: `how to solve problems` refers to the ability to identify issues and find effective solutions. `computationally` refers to the ability to think in logical steps that the computer can understand and execute. - -This should be your mindset when you're learning how to think : **I'm learning how to think in logical steps, identifying cause and effect, and always looking for solutions**. - -## Before you start! - -### Install some new software! - -In order to test your JavaScript code, you'll be using software that will execute your files from the command line. This software is called [Node.js](https://nodejs.org/en/download/). Download the Long-Term Support (LTS) version for your specific operating system. - -After you've installed it, go to your command line interface. Type in the following command: - -``` -node --version -``` - -It should show you version `v12.16.1` or higher. - -### First 3 weeks - -The first three weeks of this module you will be moving at your own pace. That means that we have split up the material into three sections, but feel free to go faster or slower depending on if you feel comfortable you understood the material or not. These weeks are very important, so put in the time to practice as much as possible. The homework for week 3 covers all the material in the other weeks as by then you will know all the basic building blocks that JavaScript has to offer. - -After those weeks we will be going into the more tricky parts of JavaScript and start solving more complex and realistic problems that you will be facing as a developer. - -### New way of working! - -Starting from this module we will be using a class repository in GitHub to get used to some of the features of GitHub as well. When the first week starts you will be invited to a new GitHub repository and will be given a first issue there to enter your information. - -You will also be handing in your homework by creating issues there, starting from week 3. - -## Learning goals - -In order to successfully complete this module you will need to master the following: - -- Have an idea of what `computer programming` is -- Know the basic building blocks of `JavaScript` -- Correctly write and use `variables`, `functions` and `loops` -- Understand the `control flow` - -## How to use this repository - -### Repository content - -This repository consists of 2 essential parts for each week: - -1. `README`: this document contains all the required theory you need to understand **while** working on the homework. It contains the list of concepts that you will want to study this week and points you to your study book to read all about them. This is the **first thing** you should start with every week -2. `MAKEME`: this document contains the instructions for each week's practical tasks / homework. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier. In the first two weeks we do not expect you to hand in any homework as the online resources already check the code automatically, from week 3 our mentors will start giving you feedback on your homework. - -### How to study - -Let's say you are just starting out with the JavaScript module. This is what you do... - -1. The week always starts on **Wednesday**. First thing you'll do is open the `README.md` for that week. For the first week of `JavaScript`, that would be [Week1 Reading](/Week1/README.md) -2. You spend **Wednesday** and **Thursday** going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's homework (from the HTML-CSS module) -3. On **Friday** you start with the homework, found in the `MAKEME.md`. For the first week of `JavaScript`, that would be [Week1 Homework](/Week1/MAKEME.md) -4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have -5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel -6. On **Sunday** you'll attend class. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others -7. You spend **Monday** and **Tuesday** finalizing your homework -8. **DEADLINE 2**: You submit your homework to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor -9. Start the new week by going back to point 1! - -In summary: - -![Weekflow](assets/weekflow.png) - -To have a more detailed overview of the guidelines, please read [this document](https://docs.google.com/document/d/1JUaEbxMQTyljAPFsWIbbLwwvvIXZ0VCHmCCN8RaeVIc/edit?usp=sharing) or ask your mentor/class on Slack! - - -## Planning - -| Week | Topic | Reading Materials | Homework | -| ---- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | -| 1. | Variables, Variable Types, Operators, Objects, Arrays | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | -| 2. | Loops, Control Flow, If/Else, | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | -| 3. | Functions, Scope, ModernJS | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | -| 4. | Higher Order Functions, Array functions, Closures | [Reading W4](/Week4/README.md) | [Homework W4](/Week4/MAKEME.md) | - -## Finished? - -Did you finish the module? Good job! You're doing great! - -If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/Browsers) to go to Browsers! - -_The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)_ - -Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. +* Week 1: https://github.com/HackYourFuture/JavaScript/blob/main/Week1/MAKEME.md +* Week 2: https://github.com/HackYourFuture/JavaScript/blob/main/Week2/MAKEME.md +* Week 3: https://github.com/HackYourFuture/JavaScript/blob/main/Week3/MAKEME.md +* Week 4: https://github.com/HackYourFuture/JavaScript/blob/main/Week4/MAKEME.md diff --git a/Week1/practice-exercises/.vscode/launch.json b/Week1/practice-exercises/.vscode/launch.json new file mode 100644 index 0000000..82e6d33 --- /dev/null +++ b/Week1/practice-exercises/.vscode/launch.json @@ -0,0 +1,9 @@ +{ + // 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": [ + + ] +} \ No newline at end of file diff --git a/Week1/practice-exercises/1-hello-world.js b/Week1/practice-exercises/1-hello-world.js index e345354..a099484 100644 --- a/Week1/practice-exercises/1-hello-world.js +++ b/Week1/practice-exercises/1-hello-world.js @@ -10,3 +10,13 @@ * Hola, mundo! // Spanish */ +console.log("Hello world!"); // English +console.log("Halo dunia!"); // Indonesian +console.log("Hola mundo!"); // Spanish +console.log("Ciao mondo!"); // Italian +console.log("Olá mundo!"); // Portuguese +console.log("Hola món!"); // Catalan +console.log("Bonjour le monde!"); // French +console.log("Kaixo Mundua!"); // Euskera +console.log("Hallo Welt!"); // German +console.log("Pozdav svijete!"); // Croatian \ No newline at end of file diff --git a/Week1/practice-exercises/2-syntax-error.js b/Week1/practice-exercises/2-syntax-error.js index a0005dd..5f57a4f 100644 --- a/Week1/practice-exercises/2-syntax-error.js +++ b/Week1/practice-exercises/2-syntax-error.js @@ -3,4 +3,4 @@ * Fix it so that when running this file it shows the message 'I'm awesome!' */ -console.log('I'm awesome'!; \ No newline at end of file +console.log("I'm awesome!"); \ No newline at end of file diff --git a/Week1/practice-exercises/3-log-number.js b/Week1/practice-exercises/3-log-number.js index c29038c..251c451 100644 --- a/Week1/practice-exercises/3-log-number.js +++ b/Week1/practice-exercises/3-log-number.js @@ -4,20 +4,19 @@ */ // 1. Declare your variable numberX. Do not initialize it (which means, don't give it a starting value) yet - +var numberX; // 2. Add a console.log statement that explains in words what you think the value of x is - +console.log("I think the value of numberX is 'undefined'"); // 3. Add a console.log statement that logs the value of numberX. - +console.log(numberX); // 4. Now initialize your variable numberX with a number (also called an integer in computer science terms) - +numberX = 4; // 5. Next, add a console.log statement that explains what you think the value of numberX is - +console.log("I think the value of numberX is 4"); // 6. Add a console.log statement that logs the value of numberX - - +console.log(numberX); \ No newline at end of file diff --git a/Week1/practice-exercises/4-log-string.js b/Week1/practice-exercises/4-log-string.js index 8e38cb3..3c8a9f4 100644 --- a/Week1/practice-exercises/4-log-string.js +++ b/Week1/practice-exercises/4-log-string.js @@ -4,20 +4,20 @@ */ // 1. Declare a variable myString and assign a string to it. Use your full name, including spaces, as the content for the string. - +var myString = "Peter Funk"; // 2. Write a console.log statement in which you explain in words what you think the value of the string is. - +console.log("I think the value of the string is the full name I've just assigned to it"); // 3. Now console.log the variable myString. - +console.log(myString); // 4. Now reassign to the variable myString a new string. - +myString = "Tony Allen & Jeff Mills" // 5. Just like what you did before write a console.log statement that explains in words what you think will be logged to the console. - +console.log("I think the value of the string is the new full name I've reassigned to it"); // 6. Now console.log myString again. - +console.log(myString); diff --git a/Week1/practice-exercises/5-round-number.js b/Week1/practice-exercises/5-round-number.js index 602c5f1..638de24 100644 --- a/Week1/practice-exercises/5-round-number.js +++ b/Week1/practice-exercises/5-round-number.js @@ -3,15 +3,19 @@ */ // 1. Declare a variable z and assign the number 7.25 to it. - + const z = 7.65; // 2. Write a console.log statement in which you log the value of z. - + console.log(z); // 3. Declare another variable a that has the value of z but rounded to the nearest integer. - + const a = Math.round(z); // 4. Write a console.log statement in which you log the value of a. - + console.log(a); // 5. So now we have z and a find a way to compare the two values and log true if a is greater than z or false if a is smaller than z. + console.log (a > z); + if (a == z) { + console.log("a is equal to z"); + } diff --git a/Week1/practice-exercises/6-log-animals.js b/Week1/practice-exercises/6-log-animals.js index 65c2e41..b66133e 100644 --- a/Week1/practice-exercises/6-log-animals.js +++ b/Week1/practice-exercises/6-log-animals.js @@ -3,23 +3,23 @@ */ // 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. - +var myThings = []; // 2. Write a console.log statement that explains in words what you think the value of the array is. - +console.log("I think the value of the array will be an empty array as it has been initialized like that"); // 3. Write a console.log statement that logs the array. - +console.log(myThings); // 4. Create a new variable with an array that has 3 of your favorite animals, each in a different string. Make sure the name of the variables says something about what the variable contains. - +var myFavouriteAnimals = ['cheetah', 'dolphin', 'hawk']; // 5. Write a console.log statement that logs the second array. - +console.log(myFavouriteAnimals); // 6. Add a statement that adds another string ("Piglet)" to the array of animals. +myFavouriteAnimals.push('piglet'); // 7. Write a console.log statement that logs the second array! - - +console.log(myFavouriteAnimals); \ No newline at end of file diff --git a/Week1/practice-exercises/7-log-string-length.js b/Week1/practice-exercises/7-log-string-length.js index b1ee540..b12a1c6 100644 --- a/Week1/practice-exercises/7-log-string-length.js +++ b/Week1/practice-exercises/7-log-string-length.js @@ -1,9 +1,10 @@ -/** +/** * Follow the commented steps to write a piece of code. */ // 1. Declare a variable called mySentence and initialize it with the following string: "Programming is so interesting!". +var mySentence = "Programming is so interesting!"; // 2. Figure out (using Google) how to get the length of mySentence. Then write a console.log statement to log the length of mySentence. - +console.log(mySentence.length); \ No newline at end of file diff --git a/Week2/practice-exercises/1-remove-the-comma.js b/Week2/practice-exercises/1-remove-the-comma.js index b71cffd..5466fb7 100644 --- a/Week2/practice-exercises/1-remove-the-comma.js +++ b/Week2/practice-exercises/1-remove-the-comma.js @@ -7,7 +7,16 @@ let myString = 'hello,this,is,a,difficult,to,read,sentence'; +// OPTION 1 +myString = myString.split(',').join(' '); +console.log(myString); +// OPTION 2 +/* +let re = /,/gi; +let newString = myString.replace(re, " "); +myString = newString; +*/ /* --- Code that will test your solution, do NOT change. Write above this line --- */ diff --git a/Week2/practice-exercises/2-even-odd-reporter.js b/Week2/practice-exercises/2-even-odd-reporter.js index 6edf23e..e1bfff3 100644 --- a/Week2/practice-exercises/2-even-odd-reporter.js +++ b/Week2/practice-exercises/2-even-odd-reporter.js @@ -7,3 +7,10 @@ * If it's even, log to the console The number [PUT_NUMBER_HERE] is even!. */ +for (let i = 0; i <= 20; i++) { + if (i % 2 == 0) { + console.log(`The number ${i} is even!`); + } else { + console.log(`The number ${i} is odd!`); + } +} \ No newline at end of file diff --git a/Week2/practice-exercises/3-recipe-card.js b/Week2/practice-exercises/3-recipe-card.js index 24bcb54..552646b 100644 --- a/Week2/practice-exercises/3-recipe-card.js +++ b/Week2/practice-exercises/3-recipe-card.js @@ -12,3 +12,18 @@ * Ingredients: 4 eggs, 2 strips of bacon, 1 tsp salt/pepper */ +const mealRecipe = {}; +mealRecipe.title = "Omelette"; +mealRecipe.servings = 2; +mealRecipe.ingredients = ["4 eggs", "2 strips of bacon", "1 tsp salt/pepper"]; +console.log(mealRecipe); + +for (let property in mealRecipe){ + if (property == "title"){ + console.log(`Meal name: ${mealRecipe[property]}`); + } else if (property == "servings"){ + console.log(`Serves: ${mealRecipe[property]}`); + } else if (property == "ingredients"){ + console.log(`Ingredients: ${mealRecipe[property].join(', ')}`); + } +} \ No newline at end of file diff --git a/Week2/practice-exercises/4-reading-list.js b/Week2/practice-exercises/4-reading-list.js index f535657..d6013d0 100644 --- a/Week2/practice-exercises/4-reading-list.js +++ b/Week2/practice-exercises/4-reading-list.js @@ -9,3 +9,29 @@ * If you haven't read it log a string like You still need to read "The Lord of the Rings" */ +const books = [ + { + title: "Tokio Blues", + author: "Haruki Murakami", + alreadyRead: false + }, + { + title: "The Naked Sun", + author: "Isaac Asimov", + alreadyRead: true + }, + { + title: "El Incal", + author: "Alejandro Jodorowski", + alreadyRead: false + } +]; + +for (let element in books) { + const book = books[element]; + if (book.alreadyRead){ + console.log(`${book.title} by ${book.author}. You already read "${book.title}".`); + } else { + console.log(`${book.title} by ${book.author}. You still need to read "${book.title}".`); + } +} \ No newline at end of file diff --git a/Week2/practice-exercises/5-who-wants-a-drink.js b/Week2/practice-exercises/5-who-wants-a-drink.js index f37f02b..b5b99b4 100644 --- a/Week2/practice-exercises/5-who-wants-a-drink.js +++ b/Week2/practice-exercises/5-who-wants-a-drink.js @@ -8,4 +8,15 @@ */ // There are 3 different types of drinks: -const drinkTypes = ['cola', 'lemonade', 'water']; \ No newline at end of file +const drinkTypes = ['cola', 'lemonade', 'water']; +const drinkTray = []; + +for (let i = 0; i < 5; i++) { + if (i < 3){ + drinkTray.push(drinkTypes[i]); + } else { + drinkTray.push(drinkTypes[i - drinkTypes.length]); + } +} +//console.log(drinkTray); +console.log(`Hey guys, I brougt a ${drinkTray.join(', ')}!`); \ No newline at end of file diff --git a/assets/black-box-input-output.png b/assets/black-box-input-output.png deleted file mode 100644 index 193dfd6..0000000 Binary files a/assets/black-box-input-output.png and /dev/null differ diff --git a/assets/do_while.jpg b/assets/do_while.jpg deleted file mode 100644 index cf75f96..0000000 Binary files a/assets/do_while.jpg and /dev/null differ diff --git a/assets/for_loop.jpg b/assets/for_loop.jpg deleted file mode 100644 index 4966f6b..0000000 Binary files a/assets/for_loop.jpg and /dev/null differ diff --git a/assets/humanbody.jpg b/assets/humanbody.jpg deleted file mode 100644 index e7b4274..0000000 Binary files a/assets/humanbody.jpg and /dev/null differ diff --git a/assets/image-datatypes.jpg b/assets/image-datatypes.jpg deleted file mode 100644 index 100a954..0000000 Binary files a/assets/image-datatypes.jpg and /dev/null differ diff --git a/assets/javascript.png b/assets/javascript.png deleted file mode 100644 index 7d0351d..0000000 Binary files a/assets/javascript.png and /dev/null differ diff --git a/assets/new-pull-request.png b/assets/new-pull-request.png deleted file mode 100644 index 374766b..0000000 Binary files a/assets/new-pull-request.png and /dev/null differ diff --git a/assets/scopes.png b/assets/scopes.png deleted file mode 100644 index a5f7bef..0000000 Binary files a/assets/scopes.png and /dev/null differ diff --git a/assets/submit-homework.png b/assets/submit-homework.png deleted file mode 100644 index 9d577a5..0000000 Binary files a/assets/submit-homework.png and /dev/null differ diff --git a/assets/week1-uday.png b/assets/week1-uday.png deleted file mode 100644 index 93f88c6..0000000 Binary files a/assets/week1-uday.png and /dev/null differ diff --git a/assets/weekflow.png b/assets/weekflow.png deleted file mode 100644 index 9da0971..0000000 Binary files a/assets/weekflow.png and /dev/null differ diff --git a/assets/while-loop.jpg b/assets/while-loop.jpg deleted file mode 100644 index 1cfc049..0000000 Binary files a/assets/while-loop.jpg and /dev/null differ diff --git a/hand-in-homework-guide.md b/hand-in-homework-guide.md deleted file mode 100644 index 771dd46..0000000 --- a/hand-in-homework-guide.md +++ /dev/null @@ -1,44 +0,0 @@ -# How to hand in homework - -In this module you'll submit your homework only using GIT and GitHub. - -1. [GitHub](https://www.github.com/HackYourFuture/JavaScript) - -## 1. GitHub homework guide - -HYF Video - -Watch the video (by clicking the image) or go through the following walk-through to learn how to submit your homework: - -ONE TIME ONLY (START OF EVERY MODULE) - -1. Create a [fork](https://help.github.com/en/articles/fork-a-repo) of the homework module repository. For JavaScript (as well as the next 2 modules), the homework module repository is `https://www.github.com/HackYourHomework/Homework-classXX` where XX is your class number. You do this by using the `fork` option on the top right. -2. Navigate to the URL of the cloned repository (it should be in your personal GitHub account, under "repositories"). -3. Clone the repository, using SSH¹, to your local machine. You can do this by typing in `git clone ` in the command line. -4. On your local machine, navigate to the folder using the command line. -5. Make sure you've cloned it correctly by running `git status` from the command line. -6. This homework repository is a little special, have a look through the README how it all works! - -EVERY WEEK - -1. Do a `git pull` on your main branch to get the latest version. -2. Create a new branch for each week you have homework. For example, for the week 3 homework² for JavaScript create a branch called `YOUR_NAME-w3-JavaScript`. Don't forget to checkout this branch after creating it. You should not modify the `main` branch. -3. Make your homework! -4. Once you're finished, add your homework to a commit. There will be some test and config files added by the test runner, this is expected and should be added! -5. Create the commit (`git commit`). Make the commit message meaningful, for example `Finished project for homework week 3`. -6. Push the branch to your forked repository. -7. On the GitHub page of your forked repository, click on the `create pull request` button. Make sure the `base repository` is the `Homework-classXX` repository, on branch `main`. -8. Give the pull request a title in the following format: - -```markdown -Homework week 3 -``` - -9. Submit the pull request from your forked repository branch into the `main` branch. - -If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! - -Notes: - -1. If you are in an AZC you may need to use HTTPS instead as the AZC may have blocked the network protocol used by SSH. -2. This first week for which you need to submit homework is week 3 of the JavaScript module. diff --git a/review/README.md b/review/README.md deleted file mode 100644 index 016be8d..0000000 --- a/review/README.md +++ /dev/null @@ -1,47 +0,0 @@ -> UNDER CONSTRUCTION: This is still a WIP, feel free to add questions. As soon as there are enough we can open it up to students. - -# Review - -Test yourself with this review quiz to make sure you've learned the most important concepts from this module - ---- - -## What is JavaScript - -Which of these is true? - -1. JavaScript is Java, but for browsers -1. Node.js is a popular browser -1. JavaScript can be used to make websites interactive - -
-answer - -3 is the correct answer: JavaScript works with HTML & CSS to create interactive websites: - -- HTML defines how the site is structured -- CSS defines how the website looks -- JavaScript defines what the site does - -
- ---- - -## basic syntax - -### loops - -How do you write a for loop to log the numbers from 0 to 9? - -
-answer - -```js -for (let i = 0; i < 10; i++) { - console.log(i); -} -``` - -
- ----