Survey / Poll App | HTML CSS JavaScript

Survey / Poll App with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #07

Project Overview

A simple Survey / Poll App built using HTML, CSS, and JavaScript with a clean and responsive interface. The application allows users to vote on different poll options and instantly view the results. It demonstrates frontend concepts such as form handling, dynamic result updates, DOM manipulation, and interactive user input, making it a useful beginner project for learning how voting and survey interfaces work.

Key Features

Create polls with multiple voting options
User-friendly interface for selecting answers
Instant display of poll results after voting
Dynamic vote counting using JavaScript
Responsive layout for mobile and desktop devices
Clean and minimal UI design
Interactive voting experience
Real-time updates using JavaScript DOM manipulation

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Survey / Poll App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="poll-container">
    <h2>What's Your Favorite Frontend Framework?</h2>

    <form id="pollForm">
      <label>
        <input type="radio" name="option" value="React">
        React
      </label>

      <label>
        <input type="radio" name="option" value="Vue">
        Vue
      </label>

      <label>
        <input type="radio" name="option" value="Angular">
        Angular
      </label>

      <label>
        <input type="radio" name="option" value="Svelte">
        Svelte
      </label>

      <button type="submit">Vote</button>
    </form>

    <div id="results" class="results"></div>
  </div>

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

CSS Code

body {
  font-family: Arial, sans-serif;
  background: #042354;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.poll-container {
  background: white;
  padding: 30px;
  width: 400px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

h2 {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 10px;
  cursor: pointer;
}

button {
  margin-top: 15px;
  padding: 10px 20px;
  border: none;
  background: #4CAF50;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background: #45a049;
}

.results {
  margin-top: 20px;
}

.result-item {
  margin-bottom: 10px;
}

.progress {
  background: #eee;
  border-radius: 20px;
  height: 20px;
  overflow: hidden;
  margin-top: 5px;
}

.progress-bar {
  height: 100%;
  background: #4CAF50;
  width: 0%;
  transition: width 0.5s ease;
}

Javascript Code

const form = document.getElementById("pollForm");
const resultsDiv = document.getElementById("results");

// Store votes in memory
let votes = {
  React: 0,
  Vue: 0,
  Angular: 0,
  Svelte: 0
};

form.addEventListener("submit", function(e) {
  e.preventDefault();

  const selected = document.querySelector("input[name='option']:checked");

  if (!selected) {
    alert("Please select an option!");
    return;
  }

  // Prevent multiple votes per session
  if (sessionStorage.getItem("voted")) {
    alert("You have already voted!");
    return;
  }

  votes[selected.value]++;
  sessionStorage.setItem("voted", "true");

  showResults();
});

function showResults() {
  resultsDiv.innerHTML = "";

  const totalVotes = Object.values(votes).reduce((a, b) => a + b, 0);

  for (let option in votes) {
    const percentage = totalVotes === 0 ? 0 :
      ((votes[option] / totalVotes) * 100).toFixed(1);

    const resultItem = document.createElement("div");
    resultItem.classList.add("result-item");

    resultItem.innerHTML = `
      <strong>${option}</strong> - ${votes[option]} votes (${percentage}%)
      <div class="progress">
        <div class="progress-bar" style="width:${percentage}%"></div>
      </div>
    `;

    resultsDiv.appendChild(resultItem);
  }
}