Good, Cheap, Fast | Coders

Project Overview

This project implements the classic "Good, Cheap, Fast" dilemma as an interactive UI using HTML, CSS, and JavaScript. It features three toggle switches, each representing one of the qualities: Good, Cheap, and Fast. The core functionality ensures that a user can only select a maximum of two options at any given time. If a third option is selected, one of the previously selected options is automatically deselected, illustrating the trade-off concept.

The design of the toggle switches is clean and modern, with smooth animations for the "ball" movement and color changes when a switch is activated. The project provides a clear and intuitive way to visualize and interact with the principle that you can often only pick two out of "Good, Cheap, and Fast" when it comes to project management or product development. This interactive demo is a great way to showcase conditional UI logic and custom toggle switch styling.

HTML Structure

The HTML structure for the "Good, Cheap, Fast" toggle UI is straightforward, consisting of a main heading and three identical `toggle-container` divs. Each `toggle-container` holds a hidden checkbox input, a `label` element that acts as the visual toggle switch, and a `span` for the text label (Good, Cheap, or Fast). Inside each `label`, a `div` with the class `ball` represents the movable part of the toggle. The `id` attributes for the checkboxes (`good`, `cheap`, `fast`) are crucial for linking them to their respective labels and for JavaScript to reference them. This clean and repetitive structure makes it easy to apply consistent styling and logic across all three toggles.


<!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="style.css" />
    <title>Good, Cheap, Fast</title>
  </head>
  <body>
    <h2>How do you want your project to be?</h2>
    <div class="toggle-container">
      <input type="checkbox" name="good" id="good" class="toggle" />
      <label for="good" class="label"><div class="ball"></div></label>
      <span>Good</span>
    </div>
    <div class="toggle-container">
      <input type="checkbox" name="cheap" id="cheap" class="toggle" />
      <label for="cheap" class="label><div class="ball"></div></label>
      <span>Cheap</span>
    </div>
    <div class="toggle-container">
      <input type="checkbox" name="fast" id="fast" class="toggle" />
      <label for="fast" class="label"><div class="ball"></div></label>
      <span>Fast</span>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS Styling

The CSS for the "Good, Cheap, Fast" toggle UI provides a clean and animated visual representation of the switches. It imports the "Roboto" font and sets up basic styling for the `body` to center the content. Each `.toggle-container` uses flexbox for alignment. The actual `input` checkboxes are hidden (`visibility: hidden`), and the `label` elements are styled to look like the toggle switch track, with rounded corners and a default gray background. When a toggle is `:checked`, its associated `label` changes to a purple background (`#8e44ad`). The `.ball` element within the `label` is styled as a white circle, representing the movable part of the switch. Crucially, CSS `@keyframes` are used to define `slideOn` and `slideOff` animations for the `.ball`, creating a smooth, bouncy transition when the toggle state changes. This combination of styles ensures an intuitive and visually appealing interactive element.


@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.toggle-container {
  display: flex;
  align-items: center;
  margin: 10px 0;
  width: 200px;
}

.toggle {
  visibility: hidden;
}

.label {
  background-color: #d0d0d0;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  margin: 0 15px 0;
  width: 80px;
  height: 40px;
  position: relative;
}

.toggle:checked + .label {
  background-color: #8e44ad;
}

.ball {
  background: #fff;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  align-items: center;
  justify-content: center;
  animation: slideOff 0.3s linear forwards;
}

.toggle:checked + .label .ball {
  animation: slideOn 0.3s linear forwards;
}

@keyframes slideOn {
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(20px) scale(1.2);
  }
  100% {
    transform: translateX(40px) scale(1);
  }
}

@keyframes slideOff {
  0% {
    transform: translateX(40px) scale(1);
  }
  50% {
    transform: translateX(20px) scale(1.2);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

JavaScript

The JavaScript for the "Good, Cheap, Fast" project implements the core logic of the dilemma: you can only have two out of three. It starts by selecting all toggle elements and specifically referencing the 'good', 'cheap', and 'fast' checkboxes. The `doTheTrick` function is the heart of the logic. It's called whenever a toggle's state changes. Inside this function, it checks if all three toggles are currently checked. If they are, it then identifies which toggle was *just* clicked (`theClickedOne`) and programmatically unchecks one of the other two, ensuring that only two remain selected. For example, if 'good' was the one just clicked and all three were previously checked, 'fast' is unchecked. This creates the interactive trade-off behavior. Finally, an event listener is added to each toggle to trigger `doTheTrick` on a `change` event, passing the clicked toggle as an argument.


const toggles = document.querySelectorAll(".toggle");
const good = document.getElementById("good");
const cheap = document.getElementById("cheap");
const fast = document.getElementById("fast");

const doTheTrick = (theClickedOne) => {
  if (good.checked && cheap.checked && fast.checked) {
    if (good === theClickedOne) fast.checked = false;
    if (cheap === theClickedOne) good.checked = false;
    if (fast === theClickedOne) cheap.checked = false;
  }
};

toggles.forEach((toggle) =>
  toggle.addEventListener("change", (e) => doTheTrick(e.target))
);

Live Demo: Good, Cheap, Fast Toggle

Watch a live demonstration of the Good, Cheap, Fast Toggle below.

Final Thoughts

This "Good, Cheap, Fast" toggle project is a simple yet effective demonstration of a common trade-off principle in an interactive UI. It provides a clear visual and functional representation of how selecting one option might necessitate deselecting another. The clean design and smooth animations enhance the user experience, making it an engaging tool for illustrating decision-making scenarios.

You can easily customize this component by:

Changing the labels and logic to represent different sets of trade-offs (e.g., "Quality, Speed, Cost").
Adjusting the CSS to modify the appearance of the toggle switches, including colors, sizes, and animation speeds.
Extending the JavaScript logic to handle more complex interdependencies between options or to provide feedback messages to the user.
Integrating this component into larger forms or configuration panels where users need to make constrained choices.

Pro Tip

For more complex toggle interactions or a larger number of interdependent options, consider using a state management pattern in your JavaScript to keep track of the selected states and simplify the logic for updating them based on user input.

Good, Cheap, Fast Toggle Using HTML, CSS & Javascript

Project Overview

HTML Structure

CSS Styling

JavaScript

Live Demo: Good, Cheap, Fast Toggle

Final Thoughts

Pro Tip

Ready to Use This Project?

Project Overview

HTML Structure

CSS Styling

JavaScript

Live Demo: Good, Cheap, Fast Toggle

Final Thoughts

Pro Tip

Ready to Use This Project?

Stay Updated