Build a Pros & Cons List Maker with HTML, CSS, and JavaScript

Decision-making can be tough—whether you’re wondering “Should I learn React?” or “Should I switch jobs?”, listing the pros and cons is a tried-and-tested method to gain clarity.

In this tutorial, we’ll build a Pros & Cons List Maker web app using plain HTML, CSS, and JavaScript. It’s a great beginner-friendly project to practice form handling, DOM manipulation, and styling a clean UI.

• 🧩 What You’ll Build
  A clean input form to enter your decision topic.
• Interactive buttons to add pros or cons.
• Real-time score tracking with verdict display (Pros Win / Cons Win / Tie).

HTML:

🔧 HTML – Structuring the App

The HTML code is the foundation of our project. It contains two main sections:

1. The Topic Section, where users enter the decision topic (e.g., “Should I learn React?”).

2. The Main App Content, which appears after the topic is submitted. This section has an input field to enter points and buttons to add them to either the Pros or Cons list. It also contains two <ul> elements to display the list items and a scoreboard to show which side is winning.

Each element is assigned an id or class so that we can easily style it with CSS or target it with JavaScript later.

<!-- Topic Entry Section -->
<div class="topic-section" id="topicSection">
  <h1>What's your decision topic?</h1>
  <input type="text" id="topicInput" placeholder="e.g Should I learn React?" />
  <button onclick="submitTopic()">Start</button>
</div>

<!-- Main App Section -->
<div id="appContent">
  <h2 class="topic-title" id="topicTitle"></h2>
  <div class="input-section">
    <input type="text" id="itemInput" placeholder="Enter A point" />
    <button onclick="addItem('pros')">Add To Pros</button>
    <button onclick="addItem('cons')">Add To Cons</button>
  </div>
  <div class="list-container">
    <div class="list">
      <h2>Pros</h2>
      <ul id="prosList"></ul>
    </div>
    <div class="list">
      <h2>Cons</h2>
      <ul id="consList"></ul>
    </div>
  </div>
  <div class="scoreboard" id="scoreboard">
    Pros:0 | Cons <br /> Let's Decide
  </div>
</div>

CSS:

The CSS gives the app a clean, modern, and user-friendly look. The background uses a gradient split between white and purple to visually separate the input area from the main app section.

Each section is centered and styled with padding, border-radius, and box-shadow to give a soft card-like appearance. Buttons are color-coded: green for adding to Pros, red for Cons, and purple for the Start button. List items are displayed in individual cards with subtle shadows for better readability. The layout is also responsive, ensuring the app looks good on mobile screens too.

* {
  box-sizing: border-box;
}
body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #2d2d2d;
  min-height: 100vh;
  background: linear-gradient(to bottom, #ffffff 50%, #6a5af9 50%);
}
h1,
.topic-title {
  margin-bottom: 1.5rem;
  font-weight: 600;
  color: #333333;
  text-align: center;
}
.topic-section {
  position: relative;
  background: #ffffff;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  margin-top: auto;
  margin-bottom: auto;
}
.topic-section::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  border-top-left-radius: 20px;
  border-top-right-radius: 2px;
  box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.1);
  z-index: -1;
}
input[type="text"] {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid #cccccc;
  border-radius: 5px;
  width: 300px;
  max-width: 90%;
  background-color: #ffffff;
}
button {
  font-family: inherit;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: background 0.2s ease;
  color: #ffffff;
}
.topic-section button {
  margin-top: 1rem;
  background-color: #6a5af9;
  padding: 0.75rem 2rem;
}
.topic-section button:hover {
  background-color: #5947e6;
}
.input-section {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.input-section input {
  width: 240px;
}
.input-section button:nth-of-type(1) {
  background-color: #28a745;
}
.input-section button:nth-of-type(2) {
  background-color: #dc3545;
}
.input-section button:hover {
  opacity: 0.9;
}

.list-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 800px;
}
.list {
  flex: 1;
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  min-width: 280px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.list h2 {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #6a5af9;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  background: #f0f2f5;
  margin: 0.5rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.delete-btn {
  background: transparent;
  color: #dc3545;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}
.delete-btn:hover {
  text-decoration: underline;
}
.scoreboard {
  margin-top: 2.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  color: #000000;
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.1);
}
#appContent {
  display: none;
  width: 100%;
  max-width: 900px;
  padding: 2rem;
}
@media (max-width: 600px) {
  .input-section input {
    width: 100%;
  }
  .topic-section {
    padding: 1.5rem;
  }
  .list-container {
    gap: 1rem;
  }
}

Javascript:

The JavaScript adds dynamic behavior to the app. It contains three main parts:

• submitTopic(): This function checks if a topic has been entered. If valid, it hides the topic input section and shows the main app area, displaying the chosen topic as the heading.

• addItem(type): When users add a point, this function checks if the input is non-empty and adds it to either the pros or cons list using the renderItem() function.

• renderItem(text, type): This function creates a new <li> element for each item, adds a “Delete” button, and appends it to the correct list. It also updates the score.

• updateScore(): This function counts how many items are in the pros and cons lists, compares them, and displays a verdict—either “Pros Win”, “Cons Win”, or “It’s a tie”.

Together, these functions handle input, list rendering, and real-time score tracking.

function submitTopic() {
  const topicInput = document.getElementById("topicInput");
  const topic = topicInput.value.trim();
  if (topic === "") {
    alert("Please enter a topic before proceeding");
    return;
  }
  document.getElementById("topicSection").style.display = "none";
  document.getElementById("appContent").style.display = "block";
  document.getElementById("topicTitle").textContent = topic;
}

function addItem(type) {
  const input = document.getElementById("itemInput");
  const text = input.value.trim();
  if (text === "") return;

  renderItem(text, type);
  input.value = "";
  updateScore();
}

function renderItem(text, type) {
  const li = document.createElement("li");
  li.textContent = text;
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "Delete";
  deleteBtn.classList.add("delete-btn");
  deleteBtn.onclick = () => {
    li.remove();
    updateScore();
  };
  li.appendChild(deleteBtn);
  document.getElementById(type + "List").appendChild(li);
}

function updateScore() {
  const prosCount = document.getElementById("prosList").children.length;
  const consCount = document.getElementById("consList").children.length;
  const scoreboard = document.getElementById("scoreboard");
  let verdict = "Let's Decide";
  if (prosCount > consCount) verdict = "Pros Win!";
  else if (consCount > prosCount) verdict = "Cons Win!";
  else if (prosCount === consCount) verdict = "It's a tie";
  scoreboard.innerHTML = `Pros: ${prosCount}| Cons: ${consCount}<br> ${verdict}`;
}

✅ Conclusion:

This Pros & Cons List Maker is a perfect mini-project for beginners to practice combining HTML, CSS, and JavaScript. It teaches you how to create dynamic content, handle user input, and style responsive layouts. You can even expand this project by saving the list to local storage or allowing users to share their decision topics with friends. Try building it yourself and see how fun and useful JavaScript can be!