CoderDojo

HTML/CSS/Javascript

15.11.2021

Some tools to use

A texteditor on your computer Visual Studio Code
Online editors example CodePen
Discord link: Coder Dojo discord

HTML, CSS, JavaScript Explained [in 4 minutes for beginners]

HTML, CSS, JavaScript are totally different languanges.

Just like, Swedish Finnsih or Norwegian

HTML, The builder.

= Hypertext Markup Languange

Every valid HTML tag that exists and how to use it:

Structure

An HTML tag is made up of the element name followed by an optional list of attributes, all of which appears between angle brackets (< >). Nothing within the brackets is displayed in the browser.

Standalone

A few tags do not have end tags because they are used to place standalone elements in the document or on the page. The image tag (<img>) is such a tag; it simply plops a graphic into the flow of the page. Other standalone tags include the linebreak (<br>), horizontal rule (<hr>).

A small code example what we learned in the first lesson

See the Pen Untitled by Marcus Björke (@mbjorke) on CodePen.

CSS

= Cascading Style Sheets

The Artist
The Furniture
The Paint

CoderDojo

CSS and HTML Continue

22.11.2021

Our goal for next time is to start and make a quiz game like this:

Here you can find the source code for the game

Lets check the code

What is new code from last lesson?

Home assignment:

Upload a background image to use for your game to the discord #hemuppgifter channel.
Try put your own background image on the body tag.
You can maybe guess which line is correct from this code example.
Create at least 5 questions with one correct and two incorrect answers to use in your game
If you have time also try find some nice sound for your game, mp3 files will work fine. Some sound examples.

CoderDojo

JavaScript

29.11.2021

class and id explained

In the previous lesson we mentioned class and how we used it to style the quizbox div. We also so a couple of examples where id was used on the quizbox game.

ID’s are unique

Each element can have only one ID
Each page shall have only one element with that ID

Classes are not unique

You can use the same class on multiple elements.
You can use multiple classes on the same element.

Correct answer is that the text would show as red because ID's are more specific than classes and take precedence over the id.

JavaScript

The function behind everything

The Wizard

Method

The action that perform on the HTML elements

Methods:

getElementById
getElementsByClassName
addEventListener
play & pause

Properties

The values of the HTML elements, that you can set or change

Propertis:

innerHTML
style
src (source)

## 
            To use method and propertis 
            We have to get access to HTML document object by using: `document`<br>
            and after document we can find HTML elements by method
            ---
            ##
            Example how to get HTML Element based on Id
            <pre><code data-trim data-noescape> 
              document.getElementById("question");
            </code></pre>
            or get elements by classname
            <pre><code data-trim data-noescape> 
              document.getElementsByClassName("Class name");
            </code></pre>
            ---
            ## 
            To use the innerHTML property, to give Id element a new value
            <pre><code data-trim data-noescape> 
              document.getElementById("question").innerHTML = "The new value";
            </code></pre>
            or give class a new style to show or hide
            <pre><code data-trim data-noescape> 
              document.getElementById("gamebox").style.display = "none";
            </code></pre>
            <pre><code data-trim data-noescape> 
              document.getElementById("gamebox").style.display = "block";
            </code></pre>
            or give a new color class
            <pre><code data-trim data-noescape> 
              document.getElementsByClassName("myP2").style.color = "blue";
            </code></pre>

Remember to add semicolon ( ; ) at the end of the property to close the function

## Debugging
            Inside the function in can be good to add console.log('some text")'); or alert("some text here too"); 
            inside a function to see if the function will be called
            ---
            ## console.log();
            To see console.log, you have the devtools open and add console.log inside a function
            <pre><code data-trim data-noescape>
              document.addEventListener("DOMContentLoaded", function() {
                  console.log("DOM has been loaded");
              });
            </code></pre>
            ---
            ##
            How it will look like on the browser
            <img src="img/maxresdefault.jpeg">
            
            ---
            ## alert();
            The alert() method displays an alert box with a specified message and an OK button.
            And alert() shall also be added inside a function
            <pre>
              <code data-trim data-noescape>
                document.addEventListener("DOMContentLoaded", function() {
                    alert("Alert box");
                });
              </code>
            </pre>
            ---
            Example how it will look on webbrowser 
            <img src="img/alert_browser.png">

Continue with JavaScript

17.01.2022

In JavaScript you can store value from input field or generate own value that can display for the user later on. Just like in our Quiz game score.

## Variables
            Variables are containers for storing data (storing data values).
            In this example, x, y, and z, are variables, declared with the var keyword: 
            <ul>
              <li>using var</li>
              <li>using let</li>
              <li>using const</li>
              <li>using nothing</li>
            </ul>
            
            ---
            ## Var variable
            Var is a short word for variable.
            <pre>
              To initializ a variable:
              <code data-trim data-noescape>
                var x = 5;
                var y = 6;
                var z = x + y;
              </code>
            </pre>
            ---
            ##  Var Variable
            Backdraw with var:
            <ul>
              <li>Same variable name can be initializ many times.</li>
              <li>But the last initialized variable name will have that value</li>
            </ul>
            <img src="img/var_variable.png" width="50%" height="auto">
            ---
            ## Let variable
            Let variable comes from english word letting.<br>
            The let statement declares a block scope local variable, optionally initializing it to a value.<br>
            <pre><code data-trim data-noescape>
              function varTest() {
                var x = 1;
                if (true) {
                var x = 2; // same variable!
                console.log(x); // 2
                }
                console.log(x); // 2
               }
               
               function letTest() {
                let x = 1;
                if (true) {
                let x = 2; // different variable
                console.log(x); // 2
                }
                console.log(x); // 1
               }
            </code></pre>
            ---
            ## Const variable
            Variables defined with const cannot be Redeclared.
            Variables defined with const cannot be Reassigned.
            Variables defined with const have Block Scope.
            <pre>
              <code>
                const PI = 3.141592653589793;
                PI = 3.14;      // This will give an error
                PI = PI + 10;   // This will also give an error 
              </code>
            </pre>
            ---
            ## Const Variable
            const variables must be assigned a value when they are declared:
            <pre>
              Correct:
              <code>
                const PI = 3.14159265359;
              </code>
            </pre>
            <pre>
              Incorrect:
              <code>
                const PI;
                PI = 3.14159265359;
              </code>
            </pre>
            ---
            ## Const Variable
            As a general rule, always declare a variable with const unless you know that the value will change.

Use const when you declare:
              <ul>
                <li>A new Array</li>
                <li>A new Object</li>
                <li>A new Function</li>
                <li>A new RegExp</li>
              </ul>
            ---
            <h1>Arrays</h1>
            <p>Generally, a collection of same type data items that can be selected by indices computed at run-time, including:</p>
            <ul>
              <li>Array data structure, an arrangement of items at equally spaced addresses in computer memory</li>
              <li>Array data type, used in a programming language to specify a variable that can be indexed</li>
            </ul>

How to create an Array

Using an array literal is the easiest way to create a JavaScript Array.

Syntax:

            
              const array_name = [item1, item2, ...];

Iterat an Array

To iterat an Array, we can use either for loop, forEach methods or manually add position index

But we have to know that an Array starts always from position 0

To get lenght of an Array, we have to use length method, by adding end of the array

            
              const test_array = ['Iterate','this','Array'];
              test_array.lenght // test_array length is 3

Looping through an Array

            For Loop method
            
              const test_array = ['Iterate','this','Array'];
              
              for (let i = 0; i < test_array.length; i++) {
                console.log(test_array[i]);
              }

            ForEach method
            
              const test_array = ['Iterate','this','Array'];
          
              test_array.forEach(function(value) {
                console.log(value);
              });

Manually get data from an Array

There is possible to manually get data without loop the array through

But should only use if you know that the value wont change and you will use same data over and ove again

            Manually get data from the Array
            
              const test_array = ['Iterate','this','Array'];
              console.log(test_array[1]);

If, else if and else

The if/else statement is a part of JavaScript's "Conditional" Statements, which are used to perform different actions based on different conditions.

In JavaScript we have the following conditional statements:

Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false
Use switch to select one of many blocks of code to be executed

            if statement
            
              if (condition) {
                // block of code to be executed
                // if the condition is true
              }

            if / else statements
            
              if (condition) {
                // block of code to be executed
                // if the condition is true
              } else {
                // block of code to be executed 
                // if the condition is false
              }

            if, else if and else statements
            
              if (condition1) {
                // block of code to be executed 
                // if condition1 is true
              } else if (condition2) {
                // block of code to be executed 
                // if the condition1 is false and 
                // condition2 is true
              } else {
                // block of code to be executed 
                // if the condition1 is false and 
                // condition2 is false
              }

Example with if statements

            If statement for time
            
              var time = new Date().getHours();
              if (time < 10) {
                greeting = "Good morning";
              } else if (time < 20) {
                greeting = "Good day";
              } else {
                greeting = "Good evening";
              }

More example with if statements

            If statement to change font size
            
              var x = document.getElementsByTagName("DIV")[0];

              if (x.id === "myDIV") {
                x.style.fontSize = "30px";
              }

Home assignment:

To refactoring the code
Upload on discord: #hemuppgifter channel.

Criteria:

Should be able to go to next question when answering, wrong or correct answer
should be able to show the score at the end of the game
Update the score if answering wrong or right, if wrong withdraw some points and correct add score the score can not be below than 0 points
Remove inline JavaScript from HTML and use addEventListener instead
Restart the game

Nice to have:

Reset the score when restarting the game
play sounds both when answering the question and at the end of the game
Show how many question that user have answer and total of question (e.i. 2 / 15)