Create Feature Flags using HTML CSS & JavaScript

Last Updated : 21 Nov, 2023

Feature flags, also known as feature toggles, are a crucial component of modern web development. They enable developers to control feature releases, test functionalities, and tailor user experiences dynamically.

This article introduces a feature flag mechanism to control the dynamic change of the background color. It uses HTML, CSS, and JavaScript to create a simple user interface with two buttons. One button enables or disables the feature, while the other button changes the background color when the feature is enabled. This project illustrates the use of feature flags to control specific functionality within a web application.

Preview Image:

flags-(1)-(1)

Prerequisites:

Approach:

Create a project directory and set up the necessary files (HTML, CSS, JavaScript).
Design the basic HTML structure for your web application, including a header, content area, and a button to toggle Dark Mode.
In JavaScript, set up a feature flag (enableBackgroundColorChange) initially set to false.
Add event listeners to the “Enable/Disable Feature” button to toggle the feature flag and change the “Change Background” button’s properties (enabled and color) accordingly.
Add an event listener to the “Change Background” button to change the background color when the feature is enabled.
Implement a function to generate random background colors.

Example: Below is the implementation of the Dark Mode Feature Flag with the help of HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width,  
                                   initial-scale=1.0"> 
    <link rel="stylesheet" href="styles.css"> 
    <title>Background Colour Changer</title> 
</head> 
  
<body> 
    <h1>GeeksForGeeks</h1> 
    <div class="title"> 
          Background Colour Changer 
      </div> 
    <button id="toggleButton"> 
          Disabled Feature 
      </button> 
    <button id="changeBgButton" disabled> 
        Change Background 
    </button> 
    <div id="content"> 
        <h1>About Feature Flags</h1> 
        <p> 
            Feature flags, also known as feature toggles,  
              feature switches, or feature flags, are a  
              valuable technique in software development. 
            They enable developers to control the activation  
              or deactivation of specific features or  
              functionality within a software application without 
            the need for a full redeployment. Feature  
              flags are implemented as conditional statements  
              in the code, allowing for dynamic control  
              over which users or groups of users can  
              access certain features. This level of control  
            offers several benefits to development teams  
              and product managers. 
            <br> 
            <br> 
            One significant advantage of feature flags is  
              their ability to facilitate gradual feature  
              rollouts.Developers can introduce new features  
              to a subset of users or a targeted audience  
              before a wider release.This incremental approach  
              allows for controlled testing and monitoring of  
              how the feature performs in a real-world environment.  
              It also helps identify any potential issues or  
              improvements, ultimately leading to a more  
              refined user experience. 
            <br> 
            <br> 
  
            Feature flags are invaluable for managing unforeseen  
              issues or bugs that may arise during the deployment  
              of new features. In the event of unexpected problems, 
            developers can quickly disable the feature using a  
              feature flag, avoiding the need for a full application  
              redeployment. This capability is especially useful in 
            maintaining a reliable and uninterrupted user experience. 
            <br> 
            <br> 
  
            Implementing feature flags is relatively straightforward,  
              often involving if-else statements or configuration options 
              in the code. These flags can be managed through  
              configuration files or centralized feature management  
              systems, simplifying feature activation and control.  
              By using feature flags, development teams can make  
              real-time decisions about which features are accessible 
              to different user segments, all while reducing the risk  
              associated with new feature launches. 
        </p> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

body { 
    font-family: Arial, sans-serif; 
    text-align: center; 
    padding: 20px; 
} 
  
h1 { 
    color: rgb(5, 173, 5); 
} 
  
.title { 
    margin-bottom: 20px; 
    font-size: 30px; 
    font-weight: 900; 
    color: #1d05f2; 
} 
  
#content { 
    margin: auto; 
    text-align: left; 
    font-weight: 600; 
    max-width: 60%; 
    margin-top: 20px; 
    padding: 20px; 
    background-color: #f0f0f0; 
    border: 3px solid #0518ec; 
    border-radius: 10px; 
} 
  
#content h1 { 
    color: black; 
    text-align: center; 
} 
  
#toggleButton { 
    padding: 10px 20px; 
    background-color: #0074D9; 
    color: #fff; 
    border: none; 
    cursor: pointer; 
} 
  
#changeBgButton { 
    padding: 10px 10px; 
    cursor: pointer; 
}

Javascript

let enableBackgroundColorChange = false; 
  
const toggleButton = document 
    .getElementById('toggleButton'); 
const contentDiv = document 
    .getElementById('content'); 
const changeBgButton = document 
    .getElementById('changeBgButton'); 
  
toggleButton.addEventListener('click', () => { 
    enableBackgroundColorChange =  
        !enableBackgroundColorChange; 
    changeBgButton.disabled =  
        !enableBackgroundColorChange; 
    toggleButton.textContent =  
        enableBackgroundColorChange ? 
            'Enabled Feature' : 'Disabled Feature'; 
      if (enableBackgroundColorChange) { 
        changeBgButton.style.backgroundColor = '#de3cd3'; 
        changeBgButton.style.color = 'white'; 
        changeBgButton.style.border = 'none'; 
    } else { 
        changeBgButton.style.backgroundColor = ''; 
        changeBgButton.style.border = 'thin solid black'; 
        changeBgButton.style.color = 'black'; 
    } 
}); 
  
changeBgButton.addEventListener('click', () => { 
    if (enableBackgroundColorChange) { 
        contentDiv.style.backgroundColor = getRandomColor(); 
    } 
}); 
  
function getRandomColor() { 
    const letters = '0123456789ABCDEF'; 
    let color = '#'; 
    for (let i = 0; i < 6; i++) { 
        color += letters[Math.floor(Math.random() * 16)]; 
    } 
    return color; 
}