Crypto Research

Learn Web3 in 100 Days – Day 8: JS

Table of Contents

Website Response

Alert the Browser

Code to Get-Random Color on the Website Background

Change Button Color

Web3 

In Conclusion

Website Response

One of the excitement of using JS or JavaScript is to make your website responsive. It gives your website a life that can interact with users. Such interaction occurs when users perform the actions below:

  • Hovering the cursor over the text
  • Clicking a button
  • Pressing enter key on the keyboard
  • And more

One of the examples is onmouseover Event which when your mouse pointer onto an object said image, it will automatically execute a JS. Note that you create functions to describe how images change from small to large and from large to small.

You can test here.

Alert the Browser

To activate the JS interaction, you need to put a tag <script> and </script> to separate from HTML.  

Code to Get-Random Color on the Website Background

The idea is to create a code to change the color of the website background randomly by clicking the button.

Here is the code and reference code here:

<!DOCTYPE html>

<html lang=”en”>

  <head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <link rel=”stylesheet” href=”style.css”>

   </head>

  <body>

      <button onclick=”changeColor()”>Change the Color!</button>

  </body>

      <script>

        function getRandomColor(){

          let letters = ‘0123456789ABCDEF’;

          let color = ‘#’;

          for (let i = 0; i < 6; i++) {

            color = color + letters[Math.floor(Math.random() * 16)];

          }

          return color;

        }

        function changeColor(){

          let newColor = getRandomColor();

          document.body.style.backgroundColor = newColor;

        }

    </script>

</html>

Let’s break down a bit on each section. You can test the code here

Pre-setting:

<!DOCTYPE html>

<html lang=”en”>

  <head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <link rel=”stylesheet” href=”style.css”>

   </head>

Body:

  <body>

      <button onclick=”changeColor()”>Change the Color!</button>

  </body>

Here I define my button called “Change the Color!” and assign an attribute to the button to have a response once the user clicks the button.

Script of JS:

 <script>

        function getRandomColor(){

          let letters = ‘0123456789ABCDEF’;

          let color = ‘#’;

          for (let i = 0; i < 6; i++) {

            color = color + letters[Math.floor(Math.random() * 16)];

          }

          return color;

        }

        function changeColor(){

          let newColor = getRandomColor();

          document.body.style.backgroundColor = newColor;

        }

    </script>

This part is the main idea to create random colors from the function. First, you will need to understand how color works in HTML. Here is the reference. Color is descriptive with # followed by 6 digits from 0 to F. it is called hexadecimal. What you try to do here is to come up with a function to randomly assign numbers with a combination of 6 digits from 16 characters.

To cap the maximum number of 16, you use Math.random() function and you can try it here.

Change Button Color

If we also want the button to change color along with the background color, we can incorporate the idea that shows here.

Under JS:

const change = document.getElementById(‘change’);

let index = 0;

const colors = [‘salmon’, ‘green’, ‘blue’, ‘purple’];

change.addEventListener(‘click’, function onClick() {

  change.style.backgroundColor = colors[index];

  change.style.color = ‘white’;

  index = index >= colors.length – 1 ? 0 : index + 1;

});

Under HTML:

<!DOCTYPE html>

<html lang=”en”>

  <head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <link rel=”stylesheet” href=”style.css”>

   </head>

  <body>

      <button onclick=”changeColor()” id=”change”>Change the Color!</button>

      <script src=”script.js”></script>

  </body>

      <script>

        function getRandomColor(){

          let letters = ‘0123456789ABCDEF’;

          let color = ‘#’;

          for (let i = 0; i < 6; i++) {

            color = color + letters[Math.floor(Math.random() * 16)];

          }

          return color;

        }

        function changeColor(){

          let newColor = getRandomColor();

          document.body.style.backgroundColor = newColor;

        }

      </script>

</html>

Note that the key is to link both files inter-connected using a code

<script src=”script.js”></script>

You can test it here. Note that I remove <!DOCTYPE html> because it is already HTML.

Web3

One of the missing elements of Web3 is a responsive website. There has been nothing like Web2 that Web3 creates despite only connecting to your wallet. Although there are more and more Web3 looks like Web2 with interaction, we need more design ideas for Web3 to make it more interactive. 

In Conclusion

Now you have learned the basics of JS. You can make your website interactive and improve the user experience!

The next topic I will share is an introduction to SQL.

Related posts
Crypto Research

Modern Economic Nonsense — Inclusive blockchain

Crypto Research

Modern Economic Nonsense — Banks are seeking shelter in cryptocurrencies

Crypto Research

Modern Economic Nonsense — Web3 continues building despite the bear market

Crypto Research

Modern Economic Nonsense — Payment apps move away from the fiat currency

Sign up for our Newsletter and
stay informed

Leave a Reply

Your email address will not be published.