Cascading style sheet

JavaScript Change Background Color on Click

In this tutorial, we are going to change the background color of a webpage to the one supplied by the user in the input field.

Let’s get Started!

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Change JavaScript Background Color on Click</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <style>
    .colorContainer {
      display:flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    </style>
  </head>
  <body>
    <div class="container d-flex justify-content-center colorContainer">
    <form>
    <input id="colorName" type="text" class="form-control-lg" placeholder="Enter color name or code" />
    <button type="button" id="btn" class="btn btn-primary btn-lg" >

Result:

See also

CSS Dropdown Menu

Share
Published by
codeflare

Recent Posts

The Surprisingly Simple Secret to Getting Things Done

We live in an age of infinite distraction and overwhelming ambition. Grand goals shimmer on…

15 hours ago

How to Create Reusable Components in React JS

Reusable components are modular UI building blocks designed for versatility. Instead of writing duplicate code…

20 hours ago

Check if Number, Word or Phrase is a Palindrome in JavaScript

What is a Palindrome? A palindrome is any word, phrase, number, or sequence that reads…

1 week ago

How Facial Recognition Software Works

Facial recognition technology is rapidly changing how we interact with devices, access services, and enhance…

2 weeks ago

Why Grok 4 is the AI Game-Changer You Need to Know

Move over ChatGPT, there's a new, significantly upgraded player causing a stir. xAI, Elon Musk's…

3 weeks ago

Cloudinary vs. AWS vs. ImageKit.io vs. Cloudflare

Choosing the right asset management service is vital. Cloudinary is frequently mentioned, but how does…

4 weeks ago