Skip to content

Commit

Permalink
making newsletter and vote popup appear only once per session
Browse files Browse the repository at this point in the history
  • Loading branch information
@Riyachauhan11
Riyachauhan11 committed Nov 8, 2024
1 parent 32cae55 commit cf5f363
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 97 deletions.
136 changes: 64 additions & 72 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3523,93 +3523,85 @@ <h2 class="uppercase">How do you prefer to read?</h2>
</div>

<script>

// Show the newsletter popup immediately on page load
function displayNewsletterPopup() {
document.getElementById('popup-nl').style.display = 'flex'; // Show newsletter
// Display newsletter popup if not shown in session
function displayNewsletterPopup() {
if (!sessionStorage.getItem("newsletterPopupDisplayed")) {
document.getElementById("popup-nl").style.display = "flex";
sessionStorage.setItem("newsletterPopupDisplayed", "true"); // Mark as displayed
}
displayNewsletterPopup(); // Call the 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() {
const newsletterPopup = document.getElementById('popup-nl');
if (newsletterPopup.style.display !== 'flex' && !hasVoted) {
document.getElementById('pollPopup').style.display = 'flex'; // Show poll
}
// Show the poll popup after a delay if not shown in session and user hasn't voted
function displayPollPopup() {
if (!sessionStorage.getItem("pollPopupDisplayed") && !sessionStorage.getItem("hasVoted")) {
setTimeout(() => {
document.getElementById("pollPopup").style.display = "flex";
sessionStorage.setItem("pollPopupDisplayed", "true"); // Mark poll popup as displayed
}, 10000); // 10-second delay
}
}

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

// Manage user selections and votes
const pollButtons = document.querySelectorAll('.poll-button[data-value]');
let selectedValue = '';
// Close popups function for both newsletter and poll
function closePopups() {
document.getElementById("popup-nl").style.display = "none";
document.getElementById("pollPopup").style.display = "none";
}

// 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
});
});
// Add event listeners for close buttons in both popups
document.querySelectorAll(".close-nl").forEach(btn => {
btn.addEventListener("click", closePopups);
});

// 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
}
});
// Initialize popups on page load
window.onload = function() {
displayNewsletterPopup(); // Show newsletter popup
displayPollPopup(); // Check and show poll popup if conditions met
};

// Close popups function
function closePopups() {
document.getElementById('popup-nl').style.display = 'none'; // Hide newsletter popup
// Close the popup when clicking outside the content
window.addEventListener("click", function(event) {
const popupContent = document.querySelector(".popup-content");
if (
event.target === document.getElementById("popup-nl") &&
!popupContent.contains(event.target)
) {
document.getElementById("popup-nl").style.display = "none";
}
});

// Attach close event to close buttons
document.querySelectorAll('.close-nl').forEach(btn => {
btn.addEventListener('click', closePopups);
});

// Function to log the voting action
function logVoteAction() {
console.log("User has voted for: " + selectedValue); // Log selected value
// Handle form submission for newsletter
document.getElementById("emailForm-nl").addEventListener("submit", function(event) {
event.preventDefault();
const email = document.getElementById("email-nl").value;
if (email) {
alert(`Your email ID ${email} has been registered successfully for the newsletter.`);
document.getElementById("popup-nl").style.display = "none";
}
});

// Event listener for the vote button to log action
document.getElementById('voteButton').addEventListener('click', logVoteAction);

// Function to manage button focus for accessibility
function handleFocus(event) {
event.target.style.border = '2px solid #0058ff'; // Optional highlight effect
}
// Poll voting logic
const pollButtons = document.querySelectorAll(".poll-button[data-value]");
let selectedValue = "";

// Attach focus event for accessibility improvement
pollButtons.forEach(button => {
button.addEventListener('focus', handleFocus);
pollButtons.forEach(button => {
button.addEventListener("click", function() {
pollButtons.forEach(btn => btn.classList.remove("selected"));
button.classList.add("selected");
selectedValue = button.getAttribute("data-value");
});
});

// Function to remove focus style
function handleBlur(event) {
event.target.style.border = ''; // Remove highlight effect
document.getElementById("voteButton").addEventListener("click", function() {
if (selectedValue) {
document.getElementById("result").innerHTML = `You voted for: ${selectedValue}<br>Thank you!`;
sessionStorage.setItem("hasVoted", "true");
setTimeout(() => {
document.getElementById("pollPopup").style.display = "none";
}, 2000);
} else {
alert("Please select an option!");
}

// 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!");
});

</script>

Expand Down
59 changes: 34 additions & 25 deletions popup.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,46 @@
// Show the pop-up automatically when the page loads
window.onload = function() {
if (!sessionStorage.getItem('popupDisplayed')) {
document.getElementById('popup-nl').style.display = 'flex';
sessionStorage.setItem('popupDisplayed', 'true');
window.onload = function () {
if (!sessionStorage.getItem("popupDisplayed")) {
document.getElementById("popup-nl").style.display = "flex";
sessionStorage.setItem("popupDisplayed", "true"); // Set flag to indicate popup has been shown
}
};

// Close the pop-up when the user clicks the close button
document.querySelector('.close-nl').addEventListener('click', function() {
document.getElementById('popup-nl').style.display = 'none';
document.querySelector(".close-nl").addEventListener("click", function () {
document.getElementById("popup-nl").style.display = "none";
});

// // Close the pop-up when clicking outside the pop-up content
// window.addEventListener('click', function(event) {
// const popupContent = document.querySelector('.popup-content'); // Select the popup content
// if (event.target === document.getElementById('popup')) {
// document.getElementById('popup').style.display = 'none';
// }
// });
// Close the pop-up when clicking outside the pop-up content
window.addEventListener("click", function (event) {
const popupContent = document.querySelector(".popup-content"); // Select the popup content
if (
event.target === document.getElementById("popup-nl") &&
!popupContent.contains(event.target)
) {
document.getElementById("popup-nl").style.display = "none";
}
});

// Handle form submission
document.getElementById('emailForm-nl').addEventListener('submit', function(event) {
event.preventDefault();
document
.getElementById("emailForm-nl")
.addEventListener("submit", function (event) {
event.preventDefault();

const email = document.getElementById('email-nl').value;
if (email) {
alert(`Your email ID ${email} has been registered successfully for the newsletter.`);
document.getElementById('popup').style.display = 'none';
}
});
const email = document.getElementById("email-nl").value;
if (email) {
alert(
`Your email ID ${email} has been registered successfully for the newsletter.`
);
document.getElementById("popup-nl").style.display = "none"; // Close popup after successful submission
}
});

// Handle "No thanks" link
document.querySelector('.no-thanks-nl').addEventListener('click', function(event) {
event.preventDefault();
document.getElementById('popup-nl').style.display = 'none';
});
document
.querySelector(".no-thanks-nl")
.addEventListener("click", function (event) {
event.preventDefault();
document.getElementById("popup-nl").style.display = "none";
});

0 comments on commit cf5f363

Please sign in to comment.