DevDex
Explore
← BACK
@Ocdeed / Mialiko-Online

Mialiko-Online

A modern, client-side web application that allows users to create, manage, and share event tickets with embedded QR codes

JavaScript ⭐ 0
▶ Demo </> Source

README

Open on GitHub ↗

Mialiko Online

Mialiko Online is a modern, client-side web application that allows users to create, manage, and share event tickets with embedded QR codes. The project uses QRCode.js to generate QR codes, html2canvas for downloading ticket previews, Flatpickr for date/time selection, and CSS custom properties for theme management.

Features

  • Ticket Creation: Fill out a form with event details including event name, date, time, location, ticket holder's name, and ticket color.
  • QR Code Generation: Each ticket generates a unique QR code that links to a verification page.
  • Ticket Verification: Scan the QR code or navigate to the ticket URL to verify if a ticket is valid or has been used.
  • Theme Customization: Users can switch between different themes (default, dark) via a theme selector.
  • Ticket History: Automatically stores created tickets in localStorage and displays them in a sidebar. Tickets can be viewed in detail or deleted.
  • Download Option: Download a ticket as a PNG image using html2canvas.

Setup

  1. Clone or copy the repository files to your local machine.
  2. Open https://github.com/Ocdeed/Mialiko-Online.git in your web browser.
  3. Ensure an internet connection for loading external libraries (QRCode.js, html2canvas, Flatpickr, Google Fonts).

File Structure

  • index.html: Main page with a form for ticket creation and layout for created tickets.
  • index.js: Contains the JavaScript logic for ticket creation, theme switching, QR code generation, and notification.
  • ticket.html: Ticket verification page that reads ticket data from localStorage.
  • ticket.js: Handles ticket validation and updates the ticket status.
  • style.css: Contains all styles including layout, themes, Flatpickr customizations, and notification styling.

Usage

  1. Visit the main page.
  2. Enter the event details in the form and select a ticket color.
  3. Click Generate Ticket:
    • A QR code is generated and a toast notification will display "QR Code generated!"
    • The ticket details and QR code preview appear.
  4. Use the Download Ticket button to save your ticket as an image.
  5. View your created tickets in the sidebar. Click a ticket card to view its details or click "Delete" to remove it.
  6. Use the theme selector in the header to switch between themes.

email: [email protected]