Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

final-project/calendar.html

Go to file
 
 
Cannot retrieve contributors at this time
107 lines (94 sloc) 4.05 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
<link rel="stylesheet" href="CSS/calendar.css">
<link rel="manifest" href="/app.webmanifest">
<script src="https://unpkg.com/dexie/dist/dexie.js"></script>
</head>
<body>
<ion-app>
<ion-content>
<div class="container">
<h1>EVENTI</h1>
<div id="event-details"></div>
<button expand="block" id="add-more-event-btn" class="add-more-btn">+ Add More Event</button>
</div>
</div>
</ion-content>
<!-- Footer Tab Bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home" onclick="window.location.href='home.html'">
<ion-icon name="home-outline"></ion-icon>
<ion-label>Home</ion-label>
</ion-tab-button>
<ion-tab-button tab="calendar" onclick="window.location.href='calendar.html'">
<ion-icon name="calendar-outline"></ion-icon>
<ion-label style="color: #002cb1;">Calendar</ion-label>
</ion-tab-button>
<ion-tab-button tab="share" onclick="window.location.href='share.html'">
<ion-icon name="share-outline"></ion-icon>
<ion-label>Share</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-app>
<script>
const events = JSON.parse(localStorage.getItem('events')) || [];
const eventDetailsDiv = document.getElementById('event-details');
if (events.length > 0) {
events.forEach(eventData => {
const eventDate = new Date(eventData.date);
// Function to calculate the countdown
function updateCountdown() {
const now = new Date();
const timeDiff = eventDate - now;
if (timeDiff > 0) {
const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
return `${days} Days, ${hours} Hours, ${minutes} Minutes left`;
} else {
return `The event has passed!`;
}
}
eventDetailsDiv.innerHTML += `
<div style="background-color: ${eventData.color}; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
<h2>${eventData.name}</h2>
<p>${eventData.date}</p>
<p>${updateCountdown()}</p>
</div>
`;
});
// Update countdown every minute for all events
setInterval(() => {
eventDetailsDiv.innerHTML = '';
events.forEach(eventData => {
const eventDate = new Date(eventData.date);
eventDetailsDiv.innerHTML += `
<div style="border: 1px solid #ccc; margin: 10px; padding: 10px; border-radius: 5px;">
<h3>${event.name}</h3>
<p>Date: ${event.date}</p>
<button class="delete-btn" data-id="${index}">Delete</button>
</div>
`;
});
}, 60000); // Update every 60 seconds
} else {
eventDetailsDiv.innerHTML = `<p>No events added yet!</p>`;
}
// add more event
document.getElementById('add-more-event-btn').addEventListener('click', () => {
window.location.href = 'home.html';
});
//Sevice Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("service-worker.js");
}
</script>
</body>
</html>