Learn Web3 in 100 Days - Day 8: JS

By xuanling11 | Crypto Learning | 12 Apr 2022


Let’s explore deeper into JavaScript.

 

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.


294b89495592a16ac5cc726e90fd0be88f6eb68f9111c19c12ca2a5f9ee74783.png

Join Odyssey DAO to onboard 1 million to web3 and check out our community to check out more events, contribute to a project, and stay up to date. Also, check out the website here and subscribed to the newsletter here

 

Photo by Manish Upadhyay on Unsplash
Note: the post was shared on multiple platforms here.

You can refer my previous article lists here and here
------------------------
2022 Prediction
2022 Prediction #1: L1 Scalability
2022 Prediction #2: L2 Bridges
2022 Prediction #3: Zero-Knowledge Proofs or ZKPs
2022 Prediction #4: Regulated Defi On-Chain KYC
2022 Prediction #5: Institutional Crypto Adoption
2022 Prediction #6: Defi Insurance
2022 Prediction #7: NFTs-Based Communities - DAO 1.5
2022 Prediction #8: Metaverse and NFTs
2022 Prediction #9: Web2 Companies’ FOMO
2022 Prediction #10: Time for DAO 2.0
------------------------
DAO The Way
DAO The Way Part 1
DAO The Way Part 2
DAO The Way Part 3
DAO The Way Part 4
DAO The Way Part 5
DAO The Way Part 6
DAO The Way Part 7
DAO The Way Part 8
DAO The Way Part 9
DAO The Way Part 10
DAO The Way Part 11
DAO The Way Part 12
------------------------
Learn How To Defi
Learn How To Defi Part 1
Learn How To Defi Part 2
Learn How To Defi Part 3
Learn How To Defi Part 4
Learn How To Defi Part 5
------------------------
Crypto Comics
Crypto Comics
Crypto Comics - PoW
Crypto Comics - Who is Satoshi
Crypto Comics - What is Token
Crypto Comics - What is DeFi
Crypto Comics - What is Wallet
Crypto Comics - What is HODL
Crypto Comics - What is Coinbase
Crypto Comics - What is PoS
Crypto Comics - What is DAO
Crypto Comics - What is A Block
Crypto Comics - What is NFT
Crypto Comics - What is Fork
Crypto Comics - What is Web3
Crypto Comics - What is DeFi-2
Crypto Comics - What is Yearn Finance
Crypto Comics - What is Degen
Crypto Comics - What is Aping
Crypto Comics - What is Cold Wallet
Crypto Comics - What is Hot Wallet
Crypto Comics - What is Airdrop
Crypto Comics - What is DYOR
Crypto Comics - What is 65537
Crypto Comics - What is RC4
Crypto Comics - What is WAGMI
Crypto Comics - What is Bagholder
Crypto Comics - What is Decentralization
Crypto Comics - What is Wallet Address
Crypto Comics - What is Plagiarism in Web3
Crypto Comics - What is Bart Pattern
Crypto Comics - What is Encryption
Crypto Comics - What is Consensus
Crypto Comics - What is Protocol
Crypto Comics - What is Stablecoin
Crypto Comics - What is ApeCoin
Crypto Comics - What is FOMO
Crypto Comics - What is Tokenomics
Crypto Comics - What is APR
Crypto Comics - What is to The Moon
------------------------
Learn Web3 in 100 Days
Learn Web3 in 100 Days - #1 What is the Internet and How Relevant to Web3
Learn Web3 in 100 Days - Day 2: What are the Browsers and Servers
Learn Web3 in 100 Days - Day 3: What are HTTP Status Code
Learn Web3 in 100 Days - Day 4: HTML and CSS and JS
Learn Web3 in 100 Days - Day 5: What is programming
Learn Web3 in 100 Days - Day 6: Markup, Elements, Tags, and Hyperlinks
Learn Web3 in 100 Days - Day 7: Style Your Web
------------------------
Modern Economic Nonsense
Modern Economic Nonsense - Inflation and Incentives
-------------------------------------------------------------------------------------
Disclosure: The article was written by a delusional author who is possibly a nut job without any questions whatsoever about expertise in the subject matters. You should not believe any words this author wrote or you may experience similar symptoms or even possibly become a nut job.

How do you rate this article?


22

2

xuanling11
xuanling11

A delusional author who is possibly a nut job without any questions whatsoever about expertise in the subject matters to write with a freestyle.


Crypto Learning
Crypto Learning

All article was written by a delusional author who is possibly a nut job without any questions whatsoever about expertise in the subject matters.

Send a $0.01 microtip in crypto to the author, and earn yourself as you read!

20% to author / 80% to me.
We pay the tips from our rewards pool.