Build Simple Color Picker using JavaScript | JS Projects with Code

let’s build a Color Picker by applying the basic JavaScript concepts.

Refer to the below image.

Instructions:

  • The HTML container element that is wrapping all the HTML elements should have the id colorPickerContainer
  • The HTML span element should have the id selectedColorHexCode
  • The HTML button element with text as #e0e0e0 should have the id button1
  • The HTML button element with text as #6fcf97 should have the id button2
  • The HTML button element with text as #56ccf2 should have the id button3
  • The HTML button element with text as #bb6bd9 should have the id button4

By following the above instructions, achieve the given functionality.

  • The background color of the page and the Hex Code value in the HTML span element should change when the HTML button element is clicked.
  • The background color of the page and the background color of the clicked HTML button element should be the same.
  • The text in the clicked HTML button element and the text in the HTML span element should be the same.

Here is the Code:

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
    <div id="colorPickerContainer" class="d-flex flex-column justify-content-center">
        <h1>Color Picker</h1>
        <div>
            <button class="button btn1" onclick="colorOne()" id="button1">#e0e0e0</button>
            <button class="button btn2" onclick="colortwo()" id="button2">#6fcf97</button>
            <button class="button btn3" onclick="colorthree()" id="button3">#56ccf2</button>
            <button class="button btn4" onclick="colorfour()" id="button4">#bb6bd9</button>
        </div>
        <p class="Background_Color mt-3 mb-3">Background Color : <span id="selectedColorHexCode">#fffff</span></p>
        <p>Try clicking on one of the colors above to change the background color of this page!</p>
    </div>
</body>

</html>

CSS


#colorPickerContainer {
    height: 100vh;
    text-align: center;
}

h1 {
    font-weight: 900;
    font-size: 35px;
    margin-bottom: 20px;
}

.button {
    height: 90px;
    width: 90px;
    border-radius: 20px;
    border-style: solid;
    border-width: 2px;
    font-size: 12px;
}

.btn1 {
    background-color: #e0e0e0;
}

.btn2 {
    background-color: #6fcf97;
}

.btn3 {
    background-color: #56ccf2;
}

.btn4 {
    background-color: #bb6bd9;
}

.Background_Color {
    background-color: #222222;
    color: #ffffff;
    padding: 10px;
    font-size: 22px;
    font-weight: 600;
    border-radius: 10px;

}

#selectedColorHexCode {
    color: #49a6e9;
}

JS

let colorPickerContainer = document.getElementById("colorPickerContainer");
let selectedColorHexCode = document.getElementById("selectedColorHexCode");

function colorOne() {
    colorPickerContainer.style.backgroundColor = "#e0e0e0";
    selectedColorHexCode.textContent = "#e0e0e0";
}

function colortwo() {
    colorPickerContainer.style.backgroundColor = "#6fcf97";
    selectedColorHexCode.textContent = "#6fcf97";
}

function colorthree() {
    colorPickerContainer.style.backgroundColor = "#56ccf2";
    selectedColorHexCode.textContent = "#56ccf2";
}

function colorfour() {
    colorPickerContainer.style.backgroundColor = "#bb6bd9";
    selectedColorHexCode.textContent = "#bb6bd9";
}

Github Link:

https://ravikiran991.github.io/Color-Picker-using-JavaScript/

Github Repository

https://github.com/ravikiran991/Color-Picker-using-JavaScript

Related Posts

Time Converter Using JavaScript | Simple JS Projects for Beginners

Time Converter Today, let’s build a Time Converter by applying the basic java script concepts. Refer to the below image. Instructions: The HTML input element for entering the number…

JS Program to log the value located at Given Index

Access the values of an array Given an array. myArray = [25, false, “green”, “apple”]Write a Js program to log the value located at the given index….

JavaScript Program to Create & Log an Array

Create & Log an Array Write a JS program to log an array with the given values.‘Orange’, 25, 100, true, 33.58. OutputThe output should be a single…

Traffic Signal Light using Javascript | JS Projects for Beginners with Code

Traffic Signal Light Today, let’s build a Traffic Light by applying the basic Javascript concepts. Refer to the below image. Instructions: The HTML button elements should have the ids stopButton, readyButton,…

Leave a Reply

Your email address will not be published.