Skip to content

Latest commit

 

History

History
150 lines (112 loc) · 4.81 KB

exercise.md

File metadata and controls

150 lines (112 loc) · 4.81 KB

🎯 Exercise

Let's practise how to use what you have learnt under control flow!

Exercise 1

Create a function named sum, that will return the total,that was calculated by adding from numbers that are divisible by either 3 or 5 in the range of value stated.

ℹ️     For instance:
         sum(5)
         Output:
         8
         Output = 3 + 5, that is anything divisible by 3 or 5 that is within the range of 5.

🎌 Click Me For Answer! 🎌 
function sum (num){
    let total = 0;
    for (let count = 0; count <= num; count++)
        if (count%3===0 ||count%5===0)
            total += count;
    
    return total;
}

Exercise 2

Print the pattern of asterisks(*) as shown below:

*
**
***
****
*****

ℹ️ The number of asterisks (*) is proportional to its row number.

🎌 Click Me For Answer! 🎌 
function showStars(num){
    for (let row = 1; row<= num; row++){
        let star = '';
            for(let col = 1; col<= row; col++)
                star +='*';
                console.log(star);
    }
}

Exercise 3

Create a button that will show this line of message on screen when it is clicked :

Hello, Congratulations on finishing this part with me ! Let's proceed to our last phase.

Regards, Yien

🎌 Click Me For Answer! 🎌 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="favicon.png" />
    <title>WebLaunch 2020 : JavaScript</title>
  </head>

  <body>
      <h1>
        Welcome to Sunway Tech Club WebLaunch 2020 JavaScript Workshop
      </h1>
        
        This is the first line. <br />
        This is the second line. <br />
        
        <p id="change">Change me to something else please /.\</p>

        <script>
          function show(){
          document.write("Hello, \nCongratulations on finishing this part with me ! \nLet's proceed to our last phase.\n\nRegards, Yien");
        } 
        <script/>

      <button onclikc="show();">Don't Click Me</button>

  </body>
</html>

Exercise 4

Create a button that will add a new text node when it is clicked.

🎌 Click Me For Answer! 🎌 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="favicon.png" />
    <title>WebLaunch 2020 : JavaScript</title>
  </head>

  <body>
      <h1>
        Welcome to Sunway Tech Club WebLaunch 2020 JavaScript Workshop
      </h1>
      <div id="content">
        <p>This is the first line.</p> <br />
        <p>This is the second line.</p> <br />
      </div>
      <p id="change">Change me to something else please /.\</p>

      <script>
        function add(){
            let new_text_node = document.createTextNode("I am new text node");
            document.querySelector("#content").appendChild(new_text_node);
      	}
      <script/>

      <button onclick="add();">Don't Click Me</button>

  </body>
</html>



✅       Yeah 🎉🎉🎉You have now mastered the basics and control flow of JavaScript🎉🎉🎉!


📌 Download completed files for hands on




◀️ Previous Page : Control Flow : Function 🚩 🔓                                          🏡                                            ▶️ Next Page : ToDo hands on part