Skip to content

Commit

Permalink
Revert "Add a pop up dialog box for Polls/Survey done !"
Browse files Browse the repository at this point in the history
  • Loading branch information
@swaraj-das
swaraj-das authored Nov 10, 2024
1 parent 87ac088 commit 43fbbeb
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 191 deletions.
23 changes: 1 addition & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -846,28 +846,7 @@ <h2>Feedback Form</h2>

</script>
</div>
poll

<!-- Poll Pop-up -->
<div class="popups" id="pollPopup">
<div class="popups-content">
<h2 class="uppercase">What type of Gaming Accessory are you Most Interested in?</h2>
<div id="pollOptions">
<button class="poll-button" data-value="Game Controllers">Game Controllers</button>
<button class="poll-button" data-value="VR Accessories">VR Accessories</button>
<button class="poll-button" data-value="Gaming Keyboard">Gaming Keyboard</button>
<button class="poll-button" data-value="Gaming Headphones">Gaming Headphones</button>
<button class="poll-button" style="display: none;" data-value="Option4">Option4</button>
<button class="poll-button" style="display: none;" data-value="Option5">Option5</button>
</div>
<button id="voteButton" class="vote-button">Vote</button>
<p id="result"></p> <!-- Result display -->
</div>
</div>

<script src="script.js"></script> <!-- Link to the JavaScript file -->

main

</body>


Expand Down
76 changes: 10 additions & 66 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -525,71 +525,15 @@ function displayVisitorCount() {
// Call the display function when the page loads
document.addEventListener('DOMContentLoaded', displayVisitorCount);

poll
//Name validation function on index page , Contact us section

document.addEventListener('DOMContentLoaded', function() {
// Check if the user has already voted in this session
const hasVoted = sessionStorage.getItem('hasVoted');

// Show the poll popup after a delay, only if the user hasn't voted
function checkAndDisplayPollPopup() {
if (!hasVoted) {
document.getElementById('pollPopup').style.display = 'flex'; // Show poll
}
}

// Set timeout for poll display
setTimeout(checkAndDisplayPollPopup, 10000);

// Manage user selections and votes
const pollButtons = document.querySelectorAll('.poll-button[data-value]');
let selectedValue = '';

// Handle clicks on poll buttons
pollButtons.forEach(button => {
button.addEventListener('click', function() {
pollButtons.forEach(btn => btn.classList.remove('selected')); // Clear previous selections
button.classList.add('selected'); // Highlight selected button
selectedValue = button.getAttribute('data-value'); // Store selected value
});
});

// Handle voting process
document.getElementById('voteButton').addEventListener('click', function() {
if (selectedValue) {
document.getElementById('result').innerHTML = `You voted for: ${selectedValue}<br>Thank you!`; // Show result
sessionStorage.setItem('hasVoted', 'true'); // Save voting status
setTimeout(() => {
document.getElementById('pollPopup').style.display = 'none'; // Hide poll
}, 2000);
} else {
alert("Please select an option!"); // Alert if no option is selected
}
});
const nameInput = document.getElementById('name');

// Function to manage button focus for accessibility
function handleFocus(event) {
event.target.style.border = '2px solid #0058ff'; // Optional highlight effect
}

// Attach focus event for accessibility improvement
pollButtons.forEach(button => {
button.addEventListener('focus', handleFocus);
});

// Function to remove focus style
function handleBlur(event) {
event.target.style.border = ''; // Remove highlight effect
}

// Attach blur event for accessibility improvement
pollButtons.forEach(button => {
button.addEventListener('blur', handleBlur);
});

// Log when the script has loaded
console.log("Poll script initialized and ready!");
});


main
nameInput.addEventListener('input', () => {
const name = nameInput.value.trim();
if (!/^[a-zA-Z ]+$/.test(name)) {
nameInput.setCustomValidity('Numbers and symbols are not allowed');
} else {
nameInput.setCustomValidity('');
}
});
146 changes: 43 additions & 103 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2259,122 +2259,62 @@ button {
}
}




body {

font-family: Arial, sans-serif;

}


/* Polls Popup Styles */
.popups {

display: none; /* Hidden by default */
position: fixed; /* Stay in place */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
justify-content: center; /* Center the popup */
align-items: center; /* Center the popup */
z-index: 1000; /* Sit on top */

}

.popups-content {

background: linear-gradient(#ff459f, #ff9532);
padding: 20px;
border-radius: 5px;
max-width: 400px;
text-align: center;

}

/* Set poll options to stack vertically */
#pollOptions {

display: flex;
flex-direction: column; /* Stack buttons vertically */
align-items: center; /* Center the buttons */

}

.poll-button,
.vote-button {

display: block; /* Change to block for full-width */
margin: 5px 0; /* Add vertical margin */
padding: 10px 15px;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
transition: background-color 0.3s;
width: 100%; /* Full width */
text-align: center;
font-size: 15px;
background: #1c525f;

.most-loved-products {
text-align: center;
padding: 2rem;
background: linear-gradient(120deg, #f7562d, #f533a4, rgb(235, 235, 82));
color: #0a0a0a;
overflow: hidden; /* Hide overflow for sliding effect */
}

.poll-button {

background-color: rgba(16, 22, 26, .4); /* Green */

.most-loved-products h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: #000;
}

.poll-button:hover {

background-color: #be264c; /* Darker green */
border: none;

.product-slider {
display: flex;
gap: 1.5rem;
animation: slide 20s linear infinite;
}

.poll-button.selected {

background-color: #b92248; /* Blue for selected */
border: 1px solid black !important; /* 1px black border when selected */
outline: none !important;

.product-card {
min-width: 150px; /* Ensures each card is the same width */
background-color: #2b2b2b;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vote-button {

background: linear-gradient(135deg, #c7c400, #ff393d, #ff3c76, #f5f100b9);
border: 1px solid #000000;

.product-card:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}


.vote-button:hover {

background-color: #d32f2f; /* Darker red */

.product-card img {
width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 0.5rem;
}

.uppercase {


font-size: 18px;
color: #000000;

.product-card h3 {
font-size: 1rem;
color: #ffffff;
margin: 0.5rem 0 0;
font-weight: 600;
}

#result {

margin-top: 10px; /* Space above result text */
word-wrap: break-word; /* Allow long text to wrap */
overflow: hidden; /* Prevent overflow */
max-height: 50px; /* Limit height */
color: #000000; /* Text color */
text-align: center; /* Center align the text */
font-size: 15px;

/* Keyframes for sliding effect */
@keyframes slide {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(calc(-40px * 7)); /* Adjust based on the total width of all items */
}
}


0 comments on commit 43fbbeb

Please sign in to comment.