Apr 12•4 min read
Learn Web3 in 100 Days - Day 8: JS
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.
Photo by Manish Upadhyay on Unsplash
Resource
https://www.w3schools.com/jsref/event_onmouseover.asp
https://stackoverflow.com/questions/1484506/random-color-generator
https://www.mathsisfun.com/hexadecimal-decimal-colors.html
https://www.w3schools.com/colors/colors_picker.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
https://bobbyhadz.com/blog/javascript-change-button-color-onclick
https://codepen.io/xuanling11/pen/ExopoLa
