About This Project
Student Information
Name: Zaher Abuamro
Student Number: 22365417
Course: CSE3CWA
Assignment: Freelance Services Agreement (Assignment 1)
How to Use This Website
Watch the walkthrough of this website. If the video doesn’t play, download it.
Project Overview
This Next.js application is designed to generate HTML5 code with JavaScript and inline CSS for deployment on MOODLE LMS. The application focuses on creating interactive tab components that can be easily copied and pasted into LMS environments.
Key Features Implemented:
- Responsive Navigation: Header with hamburger menu for mobile devices
- Theme Support: Dark mode, light mode, and system preference detection
- Accessibility: WCAG compliant with proper ARIA labels and keyboard navigation
- Cookie Management: Remembers the last visited navigation tab
- Tab Generator: Dynamic creation of up to 15 tabs with customizable content
- Code Output: Generates clean HTML5 with inline CSS (no external classes)
- Local Storage: Persists tab configurations between sessions
Technical Stack
⚛️
Next.js 14
App Router
📘
TypeScript
Type Safety
🎨
Tailwind CSS
Styling
🍪
js-cookie
State Persistence
How to Use the Tab Generator
- Navigate to the Tabs page from the menu
- Use the + Add Tab button to create new tabs (up to 15)
- Click on tab headers to edit their names
- Click on tab content areas to edit their content
- Use the - Remove Tab button to delete tabs
- Click Generate Output to create the HTML5 code
- Copy the generated code and paste it into any HTML file
- Your tab configuration is automatically saved in localStorage