Skip to content

HFenda/HTML-CSS-JS-QuizProject

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Interactive Quiz Application → Live Demo

📌 Overview

A dynamic web-based quiz application that fetches questions from the Open Trivia Database API, featuring:

  • Responsive design with animated UI elements
  • Real-time answer validation
  • Score tracking and progress visualization
  • Keyboard navigation support

Live Demo: Quiz App Demo (https://hfenda.github.io/HTML-CSS-JS-QuizProject/)

🚀 Features

Core Functionality

  • API Integration: Fetches 10 randomized questions from Open Trivia DB
  • Answer Validation: Highlights correct answers in green
  • Score Tracking: Maintains correct/incorrect tally
  • Progress Dots: Visual navigation through questions

Technical Highlights

  • Modern JavaScript: Async/await API calls
  • CSS Animations: Wave effects and smooth transitions
  • Responsive Design: Mobile-first approach
  • Accessibility: Keyboard navigation support

🛠️ Tech Stack

Component Technologies Used
Frontend HTML5, CSS3, JavaScript (ES6+)
Styling Flexbox, CSS Animations
API Open Trivia Database
Deployment Netlify/Vercel/GitHub Pages

🏗️ Project Structure

HTML-CSS-JS-QuizProject/
├── index.html          # Main application markup
├── style.css           # All styling with animations
├── script.js           # Core application logic
└── README.md           # Project documentation

🧩 Installation

  1. Clone the repository:
git clone https://github.com/HFenda/HTML-CSS-JS-QuizProject.git
  1. Open in browser:
cd HTML-CSS-JS-QuizProject && open index.html

(No dependencies required - runs completely client-side)

📬 Contact

Developed during [PTF-1.Year] - © 2021

Releases

No releases published

Packages

No packages published