Telegram Group Join Now

How to Create Color Flipper Using JavaScript (Source Code)

Color Flipper Javascript | Color Flipper Using Html Css Javascript

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.

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>

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.