DEV Community

KUNAL BHADE
KUNAL BHADE

Posted on

6 4 4 4 4

🎨 DevCycle Feature Flag Challenge: Background Color Changer Magic!

This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse

What I Built

🎨 Background Color Changer 🎨

The Background Color Changer is a simple and interactive project that allows users to change the background color of a web page by clicking on color boxes. With this functionality, users can easily personalize the look of a page, making it more engaging and visually appealing.

Demo

You can see a preview of the Background Color Changer in action below:

Image description

Here’s how it works:

  1. The web page displays a selection of color boxes.

  2. Click on any box, and the background color will instantly change to match the selected box.


My Code

πŸ“‚ The project has a simple file structure:

index.html: Defines the structure of the web page.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta" content=
        "width=device-width, initial-scale=1.0">

    <title>Background changer using JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Background Changer</h1>
    <div id="colorbox"></div>

    <script src="script.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

style.css: Adds style to the web page and enhances its visual appeal.

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}

h1 {
    color: #6203e0;
    margin-bottom: 2rem;
}

#colorbox {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

#colorbox span {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Script.js: Implements the functionality using JavaScript.

function bgchange(color) {
    let colorarray = ["#e58e26", "#f9b4ab", "#B1FB17", "#78e08f", "#fd79a8"];
    document.body.style.background = colorarray[color];
}

var colorarray = ["#e58e26", "#f9b4ab", "#B1FB17", "#78e08f", "#fd79a8"];
var colorbox = document.getElementById("colorbox");

colorarray.forEach(function (color, index) {
    let span = document.createElement("span");
    span.style.backgroundColor = color;
    span.addEventListener("click", function () {
        bgchange(index);
    });
    colorbox.appendChild(span);
});
Enter fullscreen mode Exit fullscreen mode

My DevCycle Experience

πŸš€ This project was built as part of the DevCycle Feature Flag Challenge: Feature Flag Funhouse! I used a straightforward approach with HTML, CSS, and JavaScript to achieve the desired result.

This approach kept the code modular and easy to manage.


Additional Prize Categories

πŸ’‘ This project could qualify for additional prize categories such as:

Best Design: The aesthetic appeal of the color boxes and transitions.

Best Beginner-Friendly Project: Simple and easy to understand for anyone learning web development.

Thank you for reading! πŸŽ‰ I hope this inspires you to try the project and explore how colors can transform web pages. 🌈✨

Billboard image

Monitoring as code

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay