@xuanling11
more from that month
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**. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_tag **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**: https://stackoverflow.com/questions/1484506/random-color-generator `<!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**. https://playcode.io/vanilla/ 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. https://www.w3schools.com/colors/colors_picker.asp To cap the maximum number of 16, you use `Math.random()` function and you can try it **here**. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random **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**. https://bobbyhadz.com/blog/javascript-change-button-color-onclick 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. https://codepen.io/xuanling11/pen/ExopoLa **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.
No comments yet