Log-In form with background color switcher

Hi Everone, welcome to my blog and in this blog post i will share the code of JavaScript practice project "Log in form with background color switcher" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file:

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>color switcher</title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="login"> <form action="#"> <h2> Your Feedback <i class="fa-solid fa-heart" style="color: rgb(207, 20, 20)"></i> </h2> <label for="name">Name:</label> <input type="text" placeholder="Enter your name" /> <label for="name">Email:</label> <input type="email" required placeholder="Enter your email" /> <label>Enter your message:</label> <textarea name="" id="" cols="30" rows="10">

Color Scheme Switcher

style.css:

html { margin: 0; padding: 0; overflow-x: hidden; box-sizing: border-box; } .login { max-width: 300px; margin: 0 auto; height: 60vh; padding: 40px; background-color: transparent; border-radius: 5px; font-family: Arial, sans-serif; position: absolute; bottom: 20%; left: 30%; border: 2px solid black; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .login h2 { text-align: center; margin-bottom: 20px; } .login label { display: block; margin-bottom: 5px; } .login input[type="text"], .login input[type="email"], .login textarea { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } .login textarea { height: 100px; } .login input[type="submit"] { background-color: #4caf50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } span { display: block; } .canvas { margin: 100px auto; width: 30%; text-align: center; border: 2px solid rgb(19, 17, 17); position: absolute; top: 70%; left: 35%; box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.3), 0 -2px 4px rgba(0, 0, 0, 0.3); } .button { width: 40px; height: 40px; border: solid black 2px; display: inline-block; border-radius: 50%; } #plum { background: plum; } #white { background: white; } #lightblue { background: rgb(77, 173, 205); } #lightpink { background: rgb(219, 134, 147); } /* Responsive Styles */ @media (max-width: 768px) { .login { width: 80%; left: 10%; } .canvas { width: 80%; left: 10%; } } @media (max-width: 480px) { .login { width: 90%; left: 5%; } .canvas { width: 90%; left: 5%; } }

index.js:

const buttons = document.querySelectorAll(".button"); const body = document.querySelector("body"); const submit = document.querySelector(".submit"); console.log(buttons); buttons.forEach(function (button) { button.addEventListener("click", function (e) { console.log(e.target); if (e.target.id === "plum") { body.style.backgroundColor = e.target.id; submit.style.backgroundColor = "purple"; } if (e.target.id === "white") { body.style.backgroundColor = e.target.id; submit.style.backgroundColor = "green"; } if (e.target.id === "lightblue") { body.style.backgroundColor = e.target.id; submit.style.backgroundColor = "rgb(13, 114, 148)"; } if (e.target.id === "lightpink") { body.style.backgroundColor = e.target.id; submit.style.backgroundColor = "rgb(196, 78, 96)"; } }); }); submit.addEventListener("click", function () { alert("Submit button clicked!"); });

Here is the explaination:

It selects all elements with the class "button" and assigns them to the buttons variable using document.querySelectorAll(".button").
It selects the element and assigns it to the body variable using document.querySelector("body").
It selects an element with the class "submit" and assigns it to the submit variable using document.querySelector(".submit").
It adds a click event listener to each button using buttons.forEach(...). When a button is clicked, the event listener checks the id of the clicked button and performs different actions based on the id.
If the clicked button has an id of "plum", it sets the background color of the body to "plum" and the background color of the submit button to "purple".
If the clicked button has an id of "white", it sets the background color of the body to "white" and the background color of the submit button to "green".
If the clicked button has an id of "lightblue", it sets the background color of the body to "lightblue" and the background color of the submit button to "rgb(13, 114, 148)".
If the clicked button has an id of "lightpink", it sets the background color of the body to "lightpink" and the background color of the submit button to "rgb(196, 78, 96)".
It adds a click event listener to the submit button using submit.addEventListener("click", ...). When the submit button is clicked, it triggers the event listener function, which displays an alert message saying "Submit button clicked!".
FINAL WORDS:
Don't forget to leave your feedback in the comment section. Follow front.end24 on instagram for more project ideas