diff --git a/README.md b/README.md index 53b244e..b5ac8c7 100644 --- a/README.md +++ b/README.md @@ -562,6 +562,17 @@ In order to run this project you need: +
  • +
    +Simple Chat App +

    This is an interactive polling app that allows users to vote on a specific question. Users can vote for their preferred options and view the results in real-time. The app tracks the votes for each option and stores them in the local storage so the votes persist even after the page is refreshed.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/InteractivePolling/index.html b/Source-Code/InteractivePolling/index.html new file mode 100644 index 0000000..2d67c99 --- /dev/null +++ b/Source-Code/InteractivePolling/index.html @@ -0,0 +1,29 @@ + + + + + + Interactive Polling App + + + +
    +

    Vote for Your Favorite Programming Language

    +
    + + + + +
    +
    +

    Results

    + +
    +
    + + + + + diff --git a/Source-Code/InteractivePolling/script.js b/Source-Code/InteractivePolling/script.js new file mode 100644 index 0000000..e0b4d0b --- /dev/null +++ b/Source-Code/InteractivePolling/script.js @@ -0,0 +1,48 @@ +document.addEventListener('DOMContentLoaded', () => { + const pollOptions = document.querySelectorAll('.poll-option'); + const resultsList = document.getElementById('results-list'); + + const votes = JSON.parse(localStorage.getItem('votes')) || { + Ruby: 0, + Python: 0, + Java: 0, + Javascript: 0, + }; + + // Update the results on the page + function updateResults() { + resultsList.innerHTML = ''; // Clear previous results + + const totalVotes = Object.values(votes).reduce( + (total, count) => total + count, + 0, + ); + + // Display the updated results + Object.entries(votes).forEach(([option, count]) => { + const percentage = totalVotes + ? ((count / totalVotes) * 100).toFixed(1) + : 0; + + const resultItem = document.createElement('li'); + resultItem.innerHTML = ` + ${option}: ${count} votes (${percentage}%) +
    + `; + resultsList.appendChild(resultItem); + }); + } + + // Display initial poll results + updateResults(); + + // Event listener for voting + pollOptions.forEach((option) => { + option.addEventListener('click', () => { + const selectedVote = option.getAttribute('data-vote'); + votes[selectedVote] += 1; + localStorage.setItem('votes', JSON.stringify(votes)); + updateResults(); + }); + }); +}); diff --git a/Source-Code/InteractivePolling/style.css b/Source-Code/InteractivePolling/style.css new file mode 100644 index 0000000..f85b2e4 --- /dev/null +++ b/Source-Code/InteractivePolling/style.css @@ -0,0 +1,67 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f9f9f9; +} + +.poll-container { + background: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 400px; + text-align: center; +} + +.poll-question { + font-size: 1.2rem; + margin-bottom: 20px; +} + +label { + display: block; + margin: 10px 0; + font-size: 1rem; +} + +button { + margin-top: 20px; + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +.poll-results { + margin-top: 20px; + text-align: left; +} + +.poll-results ul { + list-style: none; + padding: 0; +} + +.poll-results li { + padding: 5px 0; + font-size: 1rem; +} + +.poll-results .bar { + background-color: #007bff; + height: 10px; + border-radius: 4px; + margin-top: 5px; +}