How many time slot designs are there?

Skab din egen tidsbestillingsapp

28/10/2024

★★★★★Rating: 4.72 (5622 votes)
Indholdsfortegnelse

Byg din egen Tidsbestillingsapp med HTML, CSS og JavaScript

I en verden, hvor tid er en afgørende faktor, er evnen til at administrere aftaler og reservationer effektivt blevet uundværlig. Uanset om du skal planlægge møder, booke undervisning eller administrere andre tidsfølsomme aktiviteter, er et velfungerende system til at booke og administrere tidsintervaller essentielt. Denne guide vil føre dig igennem processen med at skabe en simpel og brugervenlig tidsbestillingsapp ved hjælp af HTML, CSS og JavaScript. Du vil lære at opsætte appen, designe grænsefladen og tilføje funktionalitet, der giver brugerne mulighed for at vælge en dato, et tidsinterval og bekræfte deres reservation.

How many time slot designs are there?
Inspirational designs, illustrations, and graphic elements from the world’s best designers. Want more inspiration? Browse our search results... Discover 32 Time Slot designs on Dribbble. Your resource to discover and connect with designers worldwide.

Grundlæggende Forudsætninger

Før vi dykker ned i koden, er det vigtigt at have en grundlæggende forståelse af følgende teknologier:

  • HTML: Til at skabe appens struktur og indhold.
  • CSS: Til at style appen og gøre den visuelt tiltalende.
  • JavaScript: Til at tilføje interaktivitet og håndtere logikken bag tidsbestillingssystemet.

Trin 1: HTML-strukturen (index.html)

Vi starter med at oprette den grundlæggende HTML-struktur for vores app. Dette inkluderer et hovedelement til at indeholde tidsintervallerne og en datovælger, der giver brugerne mulighed for at vælge en dato. Her er en detaljeret gennemgang af strukturen og dens funktionalitet:

  1. Dokumentstruktur:
    • <!DOCTYPE html>: Angiver dokumenttypen som HTML5.
    • <html lang="en">: Sætter dokumentets sprog til engelsk.
  2. Head-sektion:
    • <meta charset="UTF-8">: Specificerer tegnkodningen som UTF-8.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sikrer, at siden er responsiv på forskellige enheder.
    • <title>Time Slot Booking App</title>: Sætter sidens titel.
    • <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">: Importerer Poppins-fonten fra Google Fonts til styling.
    • <link rel="stylesheet" href="styles.css">: Binder det eksterne CSS-ark til siden.
  3. Body-sektion:
    • <div class="container">: Hovedcontaineren til alt indholdet, som bruges til layout og styling.
    • <h1>Time Slot Booking App</h1>: Hovedoverskriften for appen.
    • Datovælger:
      • <label for="booking-date">Select a Date:</label>: En etiket, der beder brugeren om at vælge en dato.
      • <input type="date" id="booking-date">: Et inputfelt af typen 'date' til at vælge datoen.
    • Tidsintervalcontainer:
      • <div class="time-slot-container"></div>: Denne div vil dynamisk blive fyldt med tilgængelige tidsintervaller baseret på den valgte dato.
    • Tabel for Bookede Tidsintervaller:
      • <div class="booked-slots-container">: Indeholder en tabel, der viser alle bookede tidsintervaller.
      • <table id="booked-slots-table">: Selve tabellen med kolonner for Dato, Tid og Status.
      • <thead> og <tbody></tbody>: Tabelhoved og tabelkrop, hvor de bookede tidsintervaller vil blive vist.
    • Modaler:
      • <div id="confirmation-modal" class="modal hidden">: En modal, der vises, når brugeren vælger et tidsinterval for at bekræfte reservationen. Den indeholder information om det valgte tidsinterval samt knapper til at bekræfte eller annullere.
      • <div id="cancel-modal" class="modal hidden">: En modal, der vises, når brugeren ønsker at annullere en reservation. Den indeholder en bekræftelsesmeddelelse og knapper til at fortsætte eller fortryde annulleringen.
    • <script src="script.js"></script>: Binder det eksterne JavaScript-ark til siden, som håndterer appens logik.

Trin 2: CSS-styling (styles.css)

For at gøre vores app visuelt tiltalende, anvender vi CSS. Her er en detaljeret beskrivelse af de anvendte styles:

  • Body Styling:
    • font-family: 'Poppins', sans-serif;: Bruger Poppins-fonten.
    • background: #825CFF;: Sætter en lilla baggrundsfarve.
    • color: #333;: Sætter tekstfarven til mørkegrå.
    • display: flex; justify-content: center; align-items: center;: Centrerer indholdet på siden ved hjælp af Flexbox.
  • Container Styling:
    • width: 90%; max-width: 500px;: Giver containeren en responsiv bredde.
    • background: #fff;: Sætter en hvid baggrund.
    • padding: 25px;: Tilføjer indre afstand.
    • border-radius: 12px;: Afrunder hjørnerne.
    • box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);: Tilføjer en skygge for dybde.
    • text-align: center;: Centrerer teksten i containeren.
  • Overskrift (h1):
    • margin-bottom: 20px; font-size: 28px;: Tilføjer margin og sætter skriftstørrelsen.
  • Tidsintervalcontainer:
    • display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;: Bruger Flexbox til at arrangere tidsintervallerne i et gitterlayout.
  • Tidsinterval Styling:
    • padding: 12px 18px; border-radius: 8px; background: #e0e7ff;: Giver tidsintervallerne et pænt udseende med lys blå baggrund.
    • cursor: pointer;: Ændrer markøren til en pegefinger, når man holder musen over et interval.
    • transition: background 0.3s, transform 0.2s;: Tilføjer en jævn overgangseffekt ved hover.
    • .time-slot:hover: Ændrer baggrundsfarven og skalerer elementet let ved hover.
    • .time-slot.booked: Giver bookede tidsintervaller en rød baggrund og gør dem ikke-klikbare.
    • .time-slot.selected: Fremhæver det valgte tidsinterval med en lilla baggrund og hvid tekst.
  • Tabel for Bookede Tidsintervaller:
    • width: 100%; border-collapse: collapse;: Sørger for, at tabellen fylder hele bredden.
    • padding: 12px; border: 1px solid #ccc;: Stylerer tabelceller og tilføjer kanter.
    • th { background-color: #825CFF; color: white; }: Giver tabelhovedet en lilla baggrund og hvid tekst.
    • .booked { background-color: #ffd6d6; color: #b91c1c; }: Fremhæver bookede rækker med rød farve.
  • Modal Styling:
    • position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);: Positionerer modalerne over hele skærmen med en semi-transparent baggrund.
    • display: flex; justify-content: center; align-items: center;: Centrerer modalindholdet.
    • .modal.hidden { display: none; }: Skjuler modalerne som standard.
    • .modal-content: Stylerer selve indholdet i modalerne med hvid baggrund, padding og afrundede hjørner.
  • Knap Styling:
    • padding: 10px 20px; border: none; border-radius: 8px; background: #825CFF; color: #fff;: Generel styling for knapper med lilla baggrund og hvid tekst.
    • .btn.cancel { background: #ff6b6b; }: Giver annulleringsknapper en rød baggrund.
    • .btn:hover { opacity: 0.9; }: Reducerer knappens opacitet ved hover.
  • Datovælger Styling:
    • margin-bottom: 20px;: Tilføjer margin under datovælgeren.
    • label { font-size: 16px; margin-right: 10px; }: Stylerer etiketten.
    • input { padding: 8px 10px; border-radius: 6px; border: 1px solid #ccc; font-size: 14px; }: Stylerer inputfeltet for dato.

Trin 3: JavaScript-funktionalitet (script.js)

Nu tilføjer vi den interaktive logik ved hjælp af JavaScript. Dette script vil håndtere valget af tidsintervaller, bekræftelse af reservationer og visning af modaler.

How do I Share my free time slots?
MyFreeTime lets you share your free time slots, synchronized directly from your calendar (s). Share your availability in seconds. Import one or more calendars, sync all your events Select your work days and daily working hours Keep your availability always up to date Pick free time slots and share them via text in seconds! 1. Pick the calendar (s)
  • DOMContentLoaded: Koden venter på, at DOM'en er fuldt indlæst, før den eksekveres.
  • Variabler: Forskellige DOM-elementer og data gemmes i variabler. En timeSlots-array indeholder de tilgængelige tidsintervaller, og bookings-objektet holder styr på reservationerne, gemt i localStorage.
  • renderTimeSlots(date): Denne funktion opretter og viser de tilgængelige tidsintervaller for en given dato. Bookede intervaller markeres som 'Booked' og kan ikke vælges. Tilgængelige intervaller kan klikkes på for at vise en bekræftelsesmodal. Bookede intervaller kan klikkes på for at starte en annulleringsproces.
  • renderTable(): Denne funktion opdaterer tabellen med alle bookede tidsintervaller. Hvis der ikke er nogen reservationer, vises en besked.
  • selectSlot(slot, element): Kaldes, når et tilgængeligt tidsinterval klikkes på. Den markerer intervallet som valgt, viser en bekræftelsesmodal og gemmer det valgte tidsinterval og dato.
  • showModal(slot): Viser bekræftelsesmodallen med detaljer om det valgte tidsinterval.
  • promptCancel(slot): Vises, når et allerede booket tidsinterval klikkes på. Den beder brugeren om at bekræfte annulleringen.
  • Event Listeners: Der er event listeners på bekræftelses- og annulleringsknapperne for at håndtere brugerinteraktioner. Når en reservation bekræftes, gemmes den i localStorage, og UI'en opdateres. Når en reservation annulleres, fjernes den fra bookings-objektet, og localStorage opdateres.
  • LocalStorage: Reservationerne gemmes i browserens localStorage, hvilket sikrer, at dataene bevares, selv efter at siden genindlæses.
  • Datovælger Ændring: Datovælgeren lytter efter ændringer, opdaterer den valgte dato og viser de relevante tidsintervaller.
document.addEventListener("DOMContentLoaded", () => { const bookedSlotsTableBody = document.querySelector("#booked-slots-table tbody"); const timeSlotContainer = document.querySelector(".time-slot-container"); const modal = document.getElementById("confirmation-modal"); const cancelModal = document.getElementById("cancel-modal"); const selectedSlotDisplay = document.getElementById("selected-slot"); const cancelSlotMessage = document.getElementById("cancel-slot-message"); const confirmBtn = document.getElementById("confirm-btn"); const cancelBtn = document.getElementById("cancel-btn"); const confirmCancelBtn = document.getElementById("confirm-cancel-btn"); const closeCancelBtn = document.getElementById("close-cancel-btn"); const datePicker = document.getElementById("booking-date"); const timeSlots = [ "9:00 AM", "9:30 AM", "10:00 AM", "10:30 AM", "11:00 AM", "11:30 AM", "12:00 PM", "12:30 PM", "1:00 PM", "1:30 PM", "2:00 PM", "2:30 PM", "3:00 PM", "3:30 PM", "4:00 PM", "4:30 PM", ]; let bookings = JSON.parse(localStorage.getItem("bookings")) || {}; let selectedSlot = null; let selectedDate = null; function renderTimeSlots(date) { timeSlotContainer.innerHTML = ""; const bookedSlots = bookings[date] || []; renderTable(); timeSlots.forEach((slot) => { const slotDiv = document.createElement("div"); slotDiv.classList.add("time-slot"); slotDiv.setAttribute("data-tooltip", bookedSlots.includes(slot) ? "Booked": "Available"); if (bookedSlots.includes(slot)) { slotDiv.classList.add("booked"); slotDiv.textContent = `${slot} (Booked)`; slotDiv.addEventListener("click", () => promptCancel(slot)); } else { slotDiv.textContent = slot; slotDiv.addEventListener("click", () => selectSlot(slot, slotDiv)); } timeSlotContainer.appendChild(slotDiv); }); } function renderTable() { bookedSlotsTableBody.innerHTML = ""; if (Object.keys(bookings).length === 0) { const noBookingsRow = document.createElement("tr"); const noBookingsCell = document.createElement("td"); noBookingsCell.colSpan = 4; // Justeret til 4 kolonner noBookingsCell.textContent = "Ingen reservationer tilgængelige."; noBookingsRow.appendChild(noBookingsCell); bookedSlotsTableBody.appendChild(noBookingsRow); return; } Object.keys(bookings).forEach((date) => { const bookedSlots = bookings[date]; bookedSlots.forEach((slot) => { const row = document.createElement("tr"); const dateCell = document.createElement("td"); dateCell.textContent = date; row.appendChild(dateCell); const slotCell = document.createElement("td"); slotCell.textContent = slot; row.appendChild(slotCell); const statusCell = document.createElement("td"); statusCell.textContent = "Booked"; row.appendChild(statusCell); bookedSlotsTableBody.appendChild(row); }); }); } function selectSlot(slot, element) { if (!selectedDate) { alert("Vælg venligst en dato først."); return; } document.querySelectorAll(".time-slot").forEach((slotEl) => { slotEl.classList.remove("selected"); }); element.classList.add("selected"); selectedSlot = slot; showModal(slot); } function showModal(slot) { selectedSlotDisplay.textContent = `Du valgte: ${slot} den ${selectedDate}`; modal.classList.remove("hidden"); } function promptCancel(slot) { selectedSlot = slot; cancelSlotMessage.textContent = `Vil du annullere reservationen for ${slot} den ${selectedDate}?`; cancelModal.classList.remove("hidden"); } confirmBtn.addEventListener("click", () => { if (selectedSlot) { if (!bookings[selectedDate]) { bookings[selectedDate] = []; } bookings[selectedDate].push(selectedSlot); localStorage.setItem("bookings", JSON.stringify(bookings)); alert(`Reservation bekræftet for ${selectedSlot} den ${selectedDate}!`); modal.classList.add("hidden"); renderTimeSlots(selectedDate); } }); cancelBtn.addEventListener("click", () => { modal.classList.add("hidden"); }); confirmCancelBtn.addEventListener("click", () => { if (selectedDate && bookings[selectedDate] && bookings[selectedDate].includes(selectedSlot)) { const index = bookings[selectedDate].indexOf(selectedSlot); if (index > -1) { bookings[selectedDate].splice(index, 1); localStorage.setItem("bookings", JSON.stringify(bookings)); alert(`Reservationen for ${selectedSlot} den ${selectedDate} er annulleret.`); cancelModal.classList.add("hidden"); renderTimeSlots(selectedDate); } } else { // Håndter tilfælde hvor reservationen ikke findes (f.eks. hvis siden blev genindlæst) cancelModal.classList.add("hidden"); renderTimeSlots(selectedDate); // Opdater UI alligevel } }); closeCancelBtn.addEventListener("click", () => { cancelModal.classList.add("hidden"); }); datePicker.addEventListener("change", (e) => { selectedDate = e.target.value; if (!selectedDate) { alert("Vælg venligst en gyldig dato."); return; } renderTimeSlots(selectedDate); }); // Initial rendering af tidsintervaller, hvis en dato allerede er valgt (f.eks. ved genindlæsning) if (datePicker.value) { selectedDate = datePicker.value; renderTimeSlots(selectedDate); } });

Konklusion

Ved at følge denne guide har du lært at bygge en funktionel tidsbestillingsapp fra bunden ved hjælp af HTML, CSS og JavaScript. Denne app tilbyder en simpel, men effektiv måde for brugere at planlægge aftaler eller reservere tidsintervaller. Med dette fundament kan du yderligere forbedre appen ved at tilføje flere funktioner, såsom at gemme reservationer i en database eller integrere mere avancerede funktionaliteter. Dette projekt er en fantastisk måde at forbedre dine webudviklingsevner, mens du bygger noget praktisk og brugervenligt.

How do I create a time slot app using HTML?
Start by creating the basic structure of the app using HTML. This includes creating a container for the time slots and a date picker to allow users to choose the date. Here's a breakdown of the structure and functionality: 1. Document Structure DOCTYPE Declaration: Specifies the document type as HTML5 ().

Denne guide giver dig et solidt udgangspunkt for at skabe din egen tidsbestillingsløsning. Held og lykke med dit projekt!

Hvis du vil læse andre artikler, der ligner Skab din egen tidsbestillingsapp, kan du besøge kategorien Teknologi.

Go up