Wish Wall
// script.js
// Get form and container elements
const wishForm = document.getElementById('wishForm');
const wishInput = document.getElementById('wishInput');
const wishesContainer = document.getElementById('wishesContainer');
// Array to store wishes
let wishes = JSON.parse(localStorage.getItem('wishes')) || [];
// Function to save wishes to local storage
function saveWishes() {
localStorage.setItem('wishes', JSON.stringify(wishes));
}
// Function to display wishes
function displayWishes() {
wishesContainer.innerHTML = ''; // Clear previous wishes
wishes.forEach((wish, index) => {
const wishCard = document.createElement('div');
wishCard.classList.add('wish-card');
wishCard.innerHTML = `
${wish.text}
Added: ${wish.timestamp}
`;
wishesContainer.appendChild(wishCard);
});
}
// Function to handle deleting a wish
function deleteWish(index) {
wishes.splice(index, 1); // Remove the wish from the array
saveWishes(); // Save updated wishes to local storage
displayWishes(); // Refresh the wish wall
}
// Function to handle editing a wish
function editWish(index) {
const newWishText = prompt("Edit your wish:", wishes[index].text);
if (newWishText && newWishText.trim() !== '') {
wishes[index].text = newWishText.trim();
saveWishes();
displayWishes();
}
}
// Handle form submission
wishForm.addEventListener('submit', (e) => {
e.preventDefault(); // Prevent page reload
const wishText = wishInput.value.trim();
if (wishText) {
const timestamp = new Date().toLocaleString(); // Add a timestamp
wishes.push({ text: wishText, timestamp }); // Add wish to the array
saveWishes(); // Save updated wishes to local storage
wishInput.value = ''; // Clear the input field
displayWishes(); // Update the wish wall
}
});
// Display wishes on page load
displayWishes();
0 Comments