Skip to content

Some suggestions on improvements of the levels #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Some suggestions on improvements of the levels #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e98591
Split the course into more levels, to make it easier to comlete the e…
tamm Oct 24, 2019
186da8a
Change download instruction in README to match current github setup
tamm Oct 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
33 changes: 30 additions & 3 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 * {
Expand Down Expand Up @@ -56,6 +58,7 @@ abbr {
main {
display: flex;
flex: 1;
flex-direction: column;
width: calc(100% - 4rem);
}

Expand All @@ -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;
Expand Down
250 changes: 17 additions & 233 deletions js/level1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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. //
Expand Down
Loading