Today I am sharing a very small project that I have created while learning JavaScript.
This Project is Crazy Button. Let's understand what has been performed in the Project.
As you already know HTML is data, CSS is the presentation and JS is the main code for any web project. In this, the whole work is done only on these files.
Lets Start
1. Firstly I have created an Index.html file that contains only a single button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crazy Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="stylebutton">Try to Click Me</button>
<script src="script.js"></script>
</body>
</html>
2. Next I have added the Style.css file which contains all the necessary CSS for the code. I also have added comments to tell for which function is performed by specific CSS.
/* It is used to set properties of button */
button {
position: absolute;
top: 100px;
left: 100px;
height: 50px;
width: 150px;
cursor: pointer;
font-size: 15px;
font-family: 'Fantasy', Papyrus;
font-weight: bold;
letter-spacing: 3px;
background: #ffc421;
border: 2px solid black;
transition: 500ms;
}
/* It is used to set style of button on hovering */
button:hover {
background-position: left;
color: white;
box-shadow: inset 0px 3px 5px rgba(255, 255, 255, 1), 0px 0px 10px rgba(0, 0, 0, 0.25);
}
3. Now the main brain of the projects comes in i.e. Script.js. It will handle the events according to the button function.
const btn = document.querySelector('button');
// Set the background color and background Image of window (Screen)
document.body.style.backgroundColor = "#2b1331";
document.body.style.backgroundImage = "linear-gradient(315deg, #2b1331 0%, #b9abcf 74%)";
// Add an EventListener of mouseover so that on mouseover the button changes its position
btn.addEventListener('mouseover', function(){
const height = Math.floor(Math.random() * window.innerHeight);
const width = Math.floor(Math.random() * window.innerWidth);
btn.style.left = `${width}px`;
btn.style.top = `${height}px`;
});
// Add an EventListener of click so that on clicking its text and background chnages
btn.addEventListener('click', function(){
btn.innerText = 'Got Me';
document.body.style.backgroundColor = 'green';
document.body.style.backgroundImage = "linear-gradient(315deg, green 0%, pink 74%)";
});
addEventListener() method is used to attach an event handler for a particular element. It also does not override the existing event handlers as normal events do. Events are said to be an essential part of JavaScript as the element will respond according to the event that has been occurred.
addEventListener('mouseover', function()) method is used to attach an event of mouseover for the element. When mouseover is performed on the element then the function given as the second argument will execute.
addEventListerner('click', function()) method is used to attach an event of click for the element. When clicking is performed on the element then the function given as the second argument will execute.
GitHub Link - https://github.com/chirag-goel360/Crazy_Button
References
addEventListener - https://www.w3schools.com/jsref/met_document_addeventlistener.asp