diff --git a/README.md b/README.md index 2b4974f..3d3606a 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ To leave feedback click [here](https://docs.google.com/forms/d/e/1FAIpQLSdoOaviR If you are familiar with git, you can clone this repository to your machine. If you don't know what git is, relax. You can easily download the folder on your machine - go to -the 'releases' tab over the yellow line on the page and click the link 'Source code (zip)'. +https://github.com/muses-code-js/js-intro-workshop (probably where you are now!) and click the Green button close to the top that says `Clone or download`, then `Download ZIP` in the popover. Unzip it (Extract) and open the folder, don't open files inside the .zip. Start from the `README.md` file, then open `js/level1.js`. diff --git a/css/main.css b/css/main.css index 37cde01..ccc2452 100644 --- a/css/main.css +++ b/css/main.css @@ -4,16 +4,18 @@ html, body { } html { + display: flex; + min-height: 100vh; font-size: 62.5%; } body { - align-items: center; - background: #EFEFEF; display: flex; + width: 100vw; flex-direction: column; + align-items: center; + background: #EFEFEF; font-family: Avenir, 'Source Sans Pro', sans-serif; - justify-content: center; } body * { @@ -56,6 +58,7 @@ abbr { main { display: flex; flex: 1; + flex-direction: column; width: calc(100% - 4rem); } @@ -72,6 +75,30 @@ main a { font-weight: 800; } +.console-log-renderer { + background: rgba(0,0,0,0.6); + color: white; + font-family: monospace; + padding: 1rem; + border-radius: .5rem; + font-size: 2rem; +} + +.console-log-renderer > div { + overflow: hidden; + max-height: 0; + transition: max-height 0.25s ease-out; +} + +.console-log-renderer > div.visible { + max-height: 10em; + transition: max-height 0.5s ease-in; +} + +.console-log-renderer + div { + display: none; +} + footer { background-color: #7986e5; padding: 1rem 1rem 2rem; diff --git a/js/level1.js b/js/level1.js index 5df9d22..715e54a 100644 --- a/js/level1.js +++ b/js/level1.js @@ -1,11 +1,25 @@ -// Level 1 +/* + Introduction + ============ + + Welcome to level 1! + In this level you will learn about + + * Comments, + * Displaying text + * Variables, + * Constants, + * Maths + + Let's get started with comments! +*/ /* Comments ======== - Let's start with comments. This is a comment. Comments are notes that people - can read and computers will ignore. + This is a comment. Comments are notes that people can read + and computers will ignore. They will help us to guide you through the JavaScript introduction journey. @@ -108,7 +122,6 @@ Boolean - it represents logical values - true or false. - P.S. You may see code that uses the keyword 'var' instead of 'let'. This is an older keyword that also creates variables, but with different rules about where that variable is available ("scope"). For now, consider @@ -225,235 +238,6 @@ - -/* - Functions - ========= - - A function is a set of instructions that performs the same task every time - we call it. It takes input in the form of 'arguments', calculates a result - based on the input and returns the result as output. - - To create a function use the following format: - - function functionName(argumentName) { - return argumentName * 2; - }; - - This function will take one 'argument' and 'return' the argument multiplied - by 2. An argument works like a variable, if something is passed to the - function the argument contains that value, and if nothing is passed then - the argument is undefined. - - Our function won't actually run unless we 'call' it. - To 'call' the function we write: - - functionName(10); - - This will call our function with the argument 10. And our function - will return 20. To see what our function returns we can console.log it, - for example: - - console.log(functionName(10)); - - This takes the result of our function and sends it to console.log. - - TIP: The keyword 'return' is used to define the return value, we can do - things before the line with 'return' on it, - but after we 'return' the function ends. - - TIP: We can accept multiple arguments by separating them with a comma: - function functionName(argument1, argument2) {} -*/ - -// TODO: It's your turn to create a function. - -// Create a function called 'add'. -// Tell it to accept two arguments (number1 and number2) -// - To pass multiple arguments into function we separate them with a comma. -// Tell it to return a sum of number1 and number2. -// Call the function passing numbers 2 and 3 as arguments. -// - To see the result you can console.log it. - - - - - - -// TODO: Great, you made it! Now let's create another function named 'subtract', -// Tell it to accept 2 arguments, number1 and number2, and subtract -// number2 from number1 then return that value. -// Call it with the numbers 5 and 1 and console.log the result. - - - - - - -// P.S.: Do you know that instead of numbers you can create variables that store -// those numbers and pass them as an arguments to your function? Try it out! - -// P.P.S.: Leave the functions as they are, don't comment them out, -// we will use them again. - -/* - If-Else Statements - ================== - - What if we want our program to make a decision about which function it - should run? This is when we use conditions! If you have a TV you can - watch it in the evening. If not, you might do something else. - It's the same with code. You can give an 'if' condition to a machine to - make a decision about what part of the code to run. - - Structure: - - if (condition) { - do this - } else { - do something else - } - - We need condition to either be true or false, so if we have something like - a number we need to compare it to something. - - Example: - - const number = 7; - if (number >= 7) { - console.log('Our number is bigger than or equal to 7'); - } else { - console.log('Our number is smaller than 7'); - } -*/ - -/* - Comparison Operators - ==================== - - Earlier we introduced JavaScript's arithmetic operators. Now comes time to - introduce you to the next set of operators. 'Comparison operators' are used - to compare values (>, <, <=, >=, ===, !==). Most of them you know from math - classes in school, some of them can be new for you: - - '===' checks equality, results in true if two values are equal. - '!==' checks inequality, results in true if two values are not equal. - - TIP: Don't mix up '=' and '===' as they have different meanings. - '=' means Assign - '===' means Is it equal - - There are also '==' and '!=' operators, which are very similar to '===' - and '!==', but with a slightly different meaning that is more prone to - programming errors, so you should always use '===' and '!=='. - - The result of a comparison operator is a boolean value (true or false). - For example: - - 3 < 4 is true. - 1 + 1 === 3 is false. -*/ - -// TODO: So now we have 2 functions from the previous task - add and subtract. -// Let's tell the machine to decide which to run depending on the -// arithmetical operator (+,-,/, * etc). -// -// If the operator is '+', we should use the add function, -// else we should use the subtract function. -// -// Step 1 - Create a variable called operator and let it be equal to '+'. -// Step 2 - Create 2 variables with any 2 numbers. -// Step 3 - Create an if/else statement based on what operator we have. -// -// If we have an operator equal to '+', we call the add function with our numbers, -// else we call the subtract function with our numbers. -// -// Don't forget to console.log it to see the result. - - - - - - -// TODO: Change your operator to '-', and check that it calls the -// subtract function instead. - - - - - - -/* - If - Else if - Else - =================== - - Hmm, but what if we have 4 arithmetical operations in our calculator? Well, - we can use an if - else if - else structure. - - Example: - - const number = 7; - if (number > 7) { - console.log('Our number is bigger then 7'); - } else if (number < 7) { - console.log('Our number is smaller then 7'); - } else { - console.log('Our number is equal to 7'); - } - - TIP: We can use any number of 'else if' statements in a row. - The first one which is true is the only one which happens. -*/ - -// TODO: Let's create 2 more functions and name them 'divide' and 'multiply'. - - - - - - -// TODO: Then let's extend our 'if else' check that we already created by adding -// 'else if' operator is equal to '+' - call 'add' function, -// 'else if' operator is equal to '/' - call 'divide' function, -// 'else if' operator is equal to '*' - call 'multiply' function -// else console.log - "Sorry, we don't know this operator". -// (Copy it to here and comment out the first version) - - - - - - -/* - Boolean Operators - ================= - Putting an exclamation (!) before a Boolean variable gives - the opposite value. The ! is called a "not" operator when - used this way. - - The result of a comparison is a Boolean value, we can save it to a variable - const bool = (1 < 2); - - Then we can check if 'bool' is true or false by using console.log - - console.log(bool); // This will return true - console.log(!bool); // "not true", therefore returns false - console.log(bool); // The original value isn't affected, still returns true - - We can also assign a Boolean value straight to a variable with the keywords - true and false: - - const aLie = false; - let previousStatement = true; -*/ - -// TODO: Try inverting a true or false value and print the result to the console - - - - - - //////////////////////////////////////////////////////////////////////////// // Congratulations! You have finished Level 1 of JavaScript Basics! // // Stand up, stretch your legs, and celebrate your achievement. // diff --git a/js/level2.js b/js/level2.js index d5b49b4..9f9f793 100644 --- a/js/level2.js +++ b/js/level2.js @@ -1,5 +1,3 @@ -// Level 2 - /* Introduction ============ @@ -23,225 +21,169 @@ level1.js to point to this file — level2.js. Now you are ready to start! -*/ -/* - Arrays - ====== + In this level you will learn about - An array is an ordered list of values. It can keep any number of values - inside. And also any type of values — Numbers, Strings, Objects, even - other Arrays. + * Functions, + * If-Else Statements, + * Comparison Operators, + * If - Else if - Else, + * Boolean Operators - Example: - - let animals = ['cat', 'dog', 'horse']; - let randomThings = [2, 'book', 'today is Saturday', 10]; - let numbers = [1, 2, 8, 19]; + Let's get started with functions! */ -// TODO: Create your own array, named favouriteFood, and write in a couple of -// things you like. - - - - - - /* - Array Length - ============ - - We can easily check how many items we have in our array with a property: - '.length' - - Example: - - let randomThings = [2, 'book', 'today is Saturday', 10]; - console.log(randomThings.length); // We will get 4. -*/ - -// TODO: Check how many values you have in your array favouriteFood. -// console.log the result. + Functions + ========= + A function is a set of instructions that performs the same task every time + we call it. It takes input in the form of 'arguments', calculates a result + based on the input and returns the result as output. + To create a function use the following format: + function functionName(argumentName) { + return argumentName * 2; + }; + This function will take one 'argument' and 'return' the argument multiplied + by 2. An argument works like a variable, if something is passed to the + function the argument contains that value, and if nothing is passed then + the argument is undefined. + Our function won't actually run unless we 'call' it. + To 'call' the function we write: -/* - Array Usage - =========== + functionName(10); - It's useful to keep all of these values in one place. But what if we want - to use only 1 item from the array? + This will call our function with the argument 10. And our function + will return 20. To see what our function returns we can console.log it, + for example: - We can get them out using 'bracket notation'. Thanks to a guy named Edsger - Dijkstra*, array indices start counting from 0. The usage looks like this. + console.log(functionName(10)); - Example: + This takes the result of our function and sends it to console.log. - let randomThings = [2, 'book', 'today is Saturday', 10]; - let firstItem = randomThings[0]; - let secondItem = randomThings[1]; and so on + TIP: The keyword 'return' is used to define the return value, we can do + things before the line with 'return' on it, + but after we 'return' the function ends. - * https://www.cs.utexas.edu/users/EWD/transcriptions/EWD08xx/EWD831.html + TIP: We can accept multiple arguments by separating them with a comma: + function functionName(argument1, argument2) {} */ -// TODO: Get the third element from your array favouriteFood and console.log it. - +// TODO: It's your turn to create a function. +// Create a function called 'add'. +// Tell it to accept two arguments (number1 and number2) +// - To pass multiple arguments into function we separate them with a comma. +// Tell it to return a sum of number1 and number2. +// Call the function passing numbers 2 and 3 as arguments. +// - To see the result you can console.log it. -/* - Changing Values in Arrays - ========================= - We also can replace values inside of the arrays by assigning a new value to - a specific index. - Example: +// TODO: Great, you made it! Now let's create another function named 'subtract', +// Tell it to accept 2 arguments, number1 and number2, and subtract +// number2 from number1 then return that value. +// Call it with the numbers 5 and 1 and console.log the result. - let animals = ['cat', 'dog', 'horse']; - // let's replace 'dog' with 'fish' - animals[1] = 'fish'; - // now our animals array will be ['cat', 'fish', 'horse'] -*/ -// TODO: Take your array favouriteFood and replace the first value -// with anything else. +// P.S.: Do you know that instead of numbers you can create variables that store +// those numbers and pass them as an arguments to your function? Try it out! - - - -// TODO: console.log the whole array to check. - - - - - - -// TIP: Don't forget, index positions start from 0! +// P.P.S.: Leave the functions as they are, don't comment them out, +// we will use them again. /* - Array.push() - ============ - - If you want to add new values to an existing array you can use the method - '.push()'. Push will add a new value to the end of the array. - - Example: - - let animals = ['cat', 'dog', 'horse']; - animals.push('rabbit'); - - // animals will be ['cat', 'dog', 'horse','rabbit'] -*/ - -// TODO: Let's extend your list of favouriteFood and add one more value to it. - - - - - - -// TODO: console.log the whole array to check. - + If-Else Statements + ================== + What if we want our program to make a decision about which function it + should run? This is when we use conditions! If you have a TV you can + watch it in the evening. If not, you might do something else. + It's the same with code. You can give an 'if' condition to a machine to + make a decision about what part of the code to run. + Structure: + if (condition) { + do this + } else { + do something else + } - -/* - Note about constant Arrays - ========================== - - An array is what is known as a "reference type". What this means is that - even if an array is declared (created) using 'const', the values *inside* that - array can still be changed; only the array itself cannot be overwritten. + We need condition to either be true or false, so if we have something like + a number we need to compare it to something. Example: - const animals = ['cat', 'dog', 'horse']; - - // These are both legal, and works the same way as when animals is a variable: - animals[1] = 'fish'; - animals.push('rabbit'); - - // This is illegal, and will return an error the same as changing any constant: - animals = [ 'mouse', 'elephant' ]; - */ - -// TODO: Try creating an array as a constant and modifying the values in it. - - - - - - -// TODO: See what happens if you add something with .push(), change something -// with bracket notation (array[1]) and -// assigning a new whole new array to the constant - - - - - + const number = 7; + if (number >= 7) { + console.log('Our number is bigger than or equal to 7'); + } else { + console.log('Our number is smaller than 7'); + } +*/ /* - Loops - ===== + Comparison Operators + ==================== - People have always been lazy, but sometimes it moves progress forward! We - don't like to repeat the same boring actions again and again, so we look - for ways to avoid it. + Earlier we introduced JavaScript's arithmetic operators. Now comes time to + introduce you to the next set of operators. 'Comparison operators' are used + to compare values (>, <, <=, >=, ===, !==). Most of them you know from math + classes in school, some of them can be new for you: - Programming is the same. For example, if I want to print 'JavaScript is - awesome!' 10 times, what are my options? Of course, I can type ten lines of - code repeating the same instruction, but I can also tell the computer to - repeat it instead of me writing it 10 times! + '===' checks equality, results in true if two values are equal. + '!==' checks inequality, results in true if two values are not equal. - For this we have loops. + TIP: Don't mix up '=' and '===' as they have different meanings. + '=' means Assign + '===' means Is it equal - Each loop should have three main things: - - a starting point - - a condition (finishing point) - - a counter (a step) + There are also '==' and '!=' operators, which are very similar to '===' + and '!==', but with a slightly different meaning that is more prone to + programming errors, so you should always use '===' and '!=='. - If you miss one of these, you can get into an infinite loop! + The result of a comparison operator is a boolean value (true or false). + For example: - Let's look into different looping structures. + 3 < 4 is true. + 1 + 1 === 3 is false. */ -/* - While Loops - =========== - - 'While' loop will do an action forever until some condition is met. +// TODO: So now we have 2 functions from the previous task - add and subtract. +// Let's tell the machine to decide which to run depending on the +// arithmetical operator (+,-,/, * etc). +// +// If the operator is '+', we should use the add function, +// else we should use the subtract function. +// +// Step 1 - Create a variable called operator and let it be equal to '+'. +// Step 2 - Create 2 variables with any 2 numbers. +// Step 3 - Create an if/else statement based on what operator we have. +// +// If we have an operator equal to '+', we call the add function with our numbers, +// else we call the subtract function with our numbers. +// +// Don't forget to console.log it to see the result. - Example: - // starting point - let number = 0; - while (number < 10) { - // 'less than 10' is a condition (finishing point) - console.log('JavaScript is awesome!'); - number = number + 1; - // + 1 is a counter/size of the step - } -*/ -// TODO: Using a 'while loop', tell your computer to log the numbers from -// ten to one. +// TODO: Change your operator to '-', and check that it calls the +// subtract function instead. @@ -249,48 +191,40 @@ /* - For Loops - ========= + If - Else if - Else + =================== - For loops are very similar to the 'while loop'. In a for loop, you - declare a counter in the statement. + Hmm, but what if we have 4 arithmetical operations in our calculator? Well, + we can use an if - else if - else structure. Example: - let i; - for (i = 0; i <= 5; i = i + 1) { // (starting point; condition; step) - console.log('Purr'); + const number = 7; + if (number > 7) { + console.log('Our number is bigger then 7'); + } else if (number < 7) { + console.log('Our number is smaller then 7'); + } else { + console.log('Our number is equal to 7'); } -*/ - -// TODO: Log every 3rd number from three to 22 using a 'for loop'. - - - - + TIP: We can use any number of 'else if' statements in a row. + The first one which is true is the only one which happens. +*/ -/* - Iterating Through Arrays - ======================== +// TODO: Let's create 2 more functions and name them 'divide' and 'multiply'. - Now we know about loops, I want to use each value from my animal list - and express my love for each. How shall I do it? - We can use a 'for loop' to iterate through our array and get each value - from it. - Note: i++ is another way of writing i = i + 1. - Example: - const animals = ['cats', 'dogs', 'horses']; - for(let i = 0; i < animals.length; i++){ - console.log('I love ' + animals[i]); - } -*/ -// TODO: Try it out with your favouriteFood array. +// TODO: Then let's extend our 'if else' check that we already created by adding +// 'else if' operator is equal to '+' - call 'add' function, +// 'else if' operator is equal to '/' - call 'divide' function, +// 'else if' operator is equal to '*' - call 'multiply' function +// else console.log - "Sorry, we don't know this operator". +// (Copy it to here and comment out the first version) @@ -298,41 +232,29 @@ /* - Loops and Logic - =============== - - Let's bring loops together with the if/else statements we learned in - level 1, and make something interesting. + Boolean Operators + ================= + Putting an exclamation (!) before a Boolean variable gives + the opposite value. The ! is called a "not" operator when + used this way. - Let's count from 10 to 0 and log all the numbers. But, when we get to the - middle (5) print 'Woohoo, we are in the middle!'. + The result of a comparison is a Boolean value, we can save it to a variable + const bool = (1 < 2); - Example: + Then we can check if 'bool' is true or false by using console.log - for (let i = 10; i >= 0; i = i - 1) { - if (i === 5) { - console.log('WooHoo, we are in the middle!'); - } else { - console.log(i); - } - } -*/ + console.log(bool); // This will return true + console.log(!bool); // "not true", therefore returns false + console.log(bool); // The original value isn't affected, still returns true -// TODO: Time has come for a classic exercise — 'FizzBuzz'. + We can also assign a Boolean value straight to a variable with the keywords + true and false: -// Count from 1 to 50 and print the numbers out: -// -// * If a number is a multiple of three, print 'Fizz'. -// * If it's a multiple of 5, print 'Buzz'. -// * If it's a multiple of 3 and 5, print 'FizzBuzz'. -// * For everything else, print the number itself. + const aLie = false; + let previousStatement = true; +*/ -// P.S. You may wish to use arithmetic operator remainder (%): -// It calculates the remainder when dividing. -// -// 10 % 3 = 1 — in 10 we have 3*3 + 1 -// 16 % 4 = 0 — in 16 we have 4*4 -// 19 % 4 = 3 — in 19 we have 4*4 + 3 etc +// TODO: Try inverting a true or false value and print the result to the console @@ -342,5 +264,5 @@ //////////////////////////////////////////////////////////////////////////// // Congratulations! You have finished Level 2 of JavaScript Basics! // // Stand up, stretch your legs, and celebrate your achievement. // -// The next step will be following up the instructions in level3.js file. // +// The next step will be following the instructions in level3.js // //////////////////////////////////////////////////////////////////////////// diff --git a/js/level3.js b/js/level3.js index d8fbd3e..9777602 100644 --- a/js/level3.js +++ b/js/level3.js @@ -1,126 +1,43 @@ -// Level 3 - /* Introduction ============ WooHoo, you got so far on your first day! Great! + Welcome to level 3! But we still have more things for you. First of all, open index.html, and replace our script from level2.js to our current file — level3.js. TIP: If you want to use multiple js files simultaneously, simply add more script tags. -*/ - -/* - Lets talk a little more about HTML, CSS, and how we can interact with them - in JavaScript. - - - Hypertext Markup Language (HTML) - -------------------------------- - As you noticed, HTML is divided into elements that look like this: - -
-

- - - We call these "tags". Each element on the page has an opening and closing - tag. (NOTE: Some tags are self-closing like , this means we don't - need a matching end tag.) - - The outermost tag in every HTML file is . - - Inside the tag you will find a and a tag. - - In we keep meta information, the page title and links to css files. - contains our actual content. - - For a full list of HTML tags, you can refer to this listing: - http://htmldog.com/references/html/tags/ - - HTML tags may contain attributes: -
- - This div has an attribute named 'class' that has a value: 'settings'. - - - Cascading Style Sheets (CSS) - ---------------------------- - CSS describes how HTML elements look. - - CSS files consist of 'declaration blocks'. Each declaration block is - composed of a selector and a set of visual style rules. A declaration looks - like this: - - [selector] { - style-name: value; - style-name: value; - style-name: value; - } - - Selectors specify which elements the visual styles are applied to. - - The most basic selectors refer to elements by their tag-name. They look - like this: - - body { - background-color: white; - } - - Selectors can also refer to elements by their class attribute like this: - - .settings { - margin: 0; - } - - or IDs, like this: - - #logo { - text-align: center; - } - - The list of css properties is huge, you can read more here, if you're - interested: - https://www.w3.org/TR/CSS21/propidx.html - Don't worry, you don't need to remember all of this immediately! -*/ + In this level you will learn about + * Arrays, + * Array Length, + * Changing Values in Arrays, + * Note about constant Arrays -/* - Phew, lots of new things. Let's come back to JavaScript and see how we can - interact with HTML. + Let's get started with arrays! */ - /* - Accessing Elements - ================== - - Document Object Model (DOM) - --------------------------- - The DOM is the JavaScript representation of the active HTML file. The DOM - is available under a special global variable called 'document'. We can get - specific nodes (page elements) with the DOM method: '.querySelector'. + Arrays + ====== - Let's get our twitter link from the page. + An array is an ordered list of values. It can keep any number of values + inside. And also any type of values — Numbers, Strings, Objects, even + other Arrays. Example: - const ourTwitter = document.querySelector('.twitter'); - - // We can store page elements in variables, just like any other value! - // However, note that a page element is an object, which is a "reference - // type" just like arrays (see level 2). That means you can change - // attributes and properties of the element, but not the variable itself. - // You will see this in action in this section. + let animals = ['cat', 'dog', 'horse']; + let randomThings = [2, 'book', 'today is Saturday', 10]; + let numbers = [1, 2, 8, 19]; */ -// TODO: Now it's your turn — get the h1 tag from the page and store it into a -// variable named ourTitle. -// console.log it and see what you get! +// TODO: Create your own array, named favouriteFood, and write in a couple of +// things you like. @@ -128,36 +45,46 @@ /* - Getting Similar Elements - ======================== + Array Length + ============ - We also can get all elements with the same tag. In our footer, we have an - unordered list (