Free Coding Ebook 👉 Get Now

How to Create Color Flipper Using JavaScript (Source Code)

Welcome to the Codewithrandom blog. In this blog, We learn how we create a Color Flipper Using HTML, CSS, and JavaScript. We have simple color and hex color codes in this Color Flipper Project.

Color Flipper Javascript | Color Flipper Using Html Css Javascript

A colour flipper is a beginner’s project in which the background of our project changes as the user presses the button, and we have a wide range of background colours to change. Every time a user clicks the button, the project’s background changes.

I hope you enjoy our blog so let’s start with a basic HTML structure for the Color Flipper.

50+ HTML, CSS & JavaScript Projects With Source Code

Code by	N/A
Project Download	Link Available Below
Language used	HTML , CSS and JavaScript
External link / Dependencies	No
Responsive	Yes

Color Flipper Table

HTML Code for Main File (Index.Html)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Color Flipper || Simple</title>
        <!-- styles -->
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <nav>
            <div class="nav-center">
                <h4>color flipper</h4>
                <ul class="nav-links">
                    <li><a href="index.html">simple</a></li>
                    <li><a href="hex.html">hex</a></li>
                </ul>
            </div>
        </nav>
        <main>
            <div class="container">
                <h2>background color : <span class="color">#f1f5f8</span></h2>
                <button class="btn btn-hero" id="btn">click me</button>
            </div>
        </main>
        <!-- javascript -->
        <script src="app.js"></script>
    </body>
</html>

Using the nav tag we will create the

There is all the HTML Code for the Index.html. Now, we make Hex.html File For Another Page.

Responsive Gym Website Using HTML ,CSS & JavaScript

Output

HTML Code for Main File (Hex.Html)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Color Flipper || Hex</title>
        <!-- styles -->
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <nav>
            <div class="nav-center">
                <h4>color flipper</h4>
                <ul class="nav-links">
                    <li><a href="index.html">simple</a></li>
                    <li><a href="hex.html">hex</a></li>
                </ul>
            </div>
        </nav>
        <main>
            <div class="container">
                <h2>background color : <span class="color">#f1f5f8</span></h2>
                <button class="btn btn-hero" id="btn">click me</button>
            </div>
        </main>
        <!-- javascript -->
        <script src="hex.js"></script>
    </body>
</html>

Output

Css Code For Color Flipper

/* =============== Fonts =============== */
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); /* =============== Variables =============== */
:root {
    /* dark shades of primary color*/
    --clr-primary-1: hsl(205, 86%, 17%);
    --clr-primary-2: hsl(205, 77%, 27%);
    --clr-primary-3: hsl(205, 72%, 37%);
    --clr-primary-4: hsl(205, 63%, 48%); /* primary/main color */
    --clr-primary-5: hsl(205, 78%, 60%); /* lighter shades of primary color */
    --clr-primary-6: hsl(205, 89%, 70%);
    --clr-primary-7: hsl(205, 90%, 76%);
    --clr-primary-8: hsl(205, 86%, 81%);
    --clr-primary-9: hsl(205, 90%, 88%);
    --clr-primary-10: hsl(
        205,
        100%,
        96%
    ); /* darkest grey - used for headings */
    --clr-grey-1: hsl(209, 61%, 16%);
    --clr-grey-2: hsl(211, 39%, 23%);
    --clr-grey-3: hsl(209, 34%, 30%);
    --clr-grey-4: hsl(209, 28%, 39%); /* grey used for paragraphs */
    --clr-grey-5: hsl(210, 22%, 49%);
    --clr-grey-6: hsl(209, 23%, 60%);
    --clr-grey-7: hsl(211, 27%, 70%);
    --clr-grey-8: hsl(210, 31%, 80%);
    --clr-grey-9: hsl(212, 33%, 89%);
    --clr-grey-10: hsl(210, 36%, 96%);
    --clr-white: #fff;
    --clr-red-dark: hsl(360, 67%, 44%);
    --clr-red-light: hsl(360, 71%, 66%);
    --clr-green-dark: hsl(125, 67%, 44%);
    --clr-green-light: hsl(125, 71%, 66%);
    --clr-black: #222;
    --ff-primary: "Roboto", sans-serif;
    --ff-secondary: "Open Sans", sans-serif;
    --transition: all 0.3s linear;
    --spacing: 0.1rem;
    --radius: 0.25rem;
    --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    --max-width: 1170px;
    --fixed-width: 620px;
} /* =============== Global Styles =============== */
*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--ff-secondary);
    background: var(--clr-grey-10);
    color: var(--clr-grey-1);
    line-height: 1.5;
    font-size: 0.875rem;
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
}
h1,
h2,
h3,
h4 {
    letter-spacing: var(--spacing);
    text-transform: capitalize;
    line-height: 1.25;
    margin-bottom: 0.75rem;
    font-family: var(--ff-primary);
}
h1 {
    font-size: 3rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.25rem;
}
h4 {
    font-size: 0.875rem;
}
p {
    margin-bottom: 1.25rem;
    color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
    h1 {
        font-size: 4rem;
    }
    h2 {
        font-size: 2.5rem;
    }
    h3 {
        font-size: 1.75rem;
    }
    h4 {
        font-size: 1rem;
    }
    body {
        font-size: 1rem;
    }
    h1,
    h2,
    h3,
    h4 {
        line-height: 1;
    }
} /* global classes */ /* section */
.section {
    padding: 5rem 0;
}
.section-center {
    width: 90vw;
    margin: 0 auto;
    max-width: 1170px;
}
@media screen and (min-width: 992px) {
    .section-center {
        width: 95vw;
    }
}
main {
    min-height: 100vh;
    display: grid;
    place-items: center;
} /* =============== Nav =============== */
nav {
    background: var(--clr-white);
    height: 3rem;
    display: grid;
    align-items: center;
    box-shadow: var(--dark-shadow);
}
.nav-center {
    width: 90vw;
    max-width: var(--fixed-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-center h4 {
    margin-bottom: 0;
    color: var(--clr-primary-5);
}
.nav-links {
    display: flex;
}
nav a {
    text-transform: capitalize;
    font-weight: 700;
    font-size: 1rem;
    color: var(--clr-primary-1);
    letter-spacing: var(--spacing);
    margin-right: 1rem;
}
nav a:hover {
    color: var(--clr-primary-5);
} /* =============== Container =============== */
main {
    min-height: calc(100vh - 3rem);
    display: grid;
    place-items: center;
}
.container {
    text-align: center;
}
.container h2 {
    background: var(--clr-black);
    color: var(--clr-white);
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 2.5rem;
}
.color {
    color: var(--clr-primary-5);
}
.btn-hero {
    font-family: var(--ff-primary);
    text-transform: uppercase;
    background: transparent;
    color: var(--clr-black);
    letter-spacing: var(--spacing);
    display: inline-block;
    font-weight: 700;
    transition: var(--transition);
    border: 2px solid var(--clr-black);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: var(--radius);
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
}
.btn-hero:hover {
    color: var(--clr-white);
    background: var(--clr-black);
}

Html + Css Update Output

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

JavaScript Code for Color Flipper (app.js)

const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
const btn = document.getElementById("btn");
const color = document.querySelector(".color");
btn.addEventListener("click", function () {
    const randomNumber = getRandomNumber();
    // console.log(randomNumber);
    document.body.style.backgroundColor = colors[randomNumber];
    color.textContent = colors[randomNumber];
});
function getRandomNumber() {
    return Math.floor(Math.random() * colors.length);
}

JavaScript Code for Color Flipper (Hex.js)

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const btn = document.getElementById("btn");
const color = document.querySelector(".color");
btn.addEventListener("click", function () {
    let hexColor = "#";
    for (let i = 0; i < 6; i++) {
        hexColor += hex[getRandomNumber()];
    }

    // console.log(hexColor);

    color.textContent = hexColor;
    document.body.style.backgroundColor = hexColor;
});
function getRandomNumber() {
    return Math.floor(Math.random() * hex.length);
}

Final Output Color Flipper Using JavaScript

Now that we have completed our javascript section. Hope you like the Color Flipper Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

Written by – Code With Random/Anki

Which code editor do you use for Color Flipper coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.