ProSkill Quiz Application (Front-End Demo) - My First Big Project! 🥳 Hey World, Check Out My Quiz App! This is my first major project built entirely from scratch! It's a simple, fast quiz app that I made to practice my web development skills. The goal was to create something that looks good and works smoothly for testing yourself on different tech topics like HTML, CSS, and JS. It's 100% front-end, meaning everything you see and interact with is built right in the browser. No complicated servers yet!
✨ Cool Stuff I Got Working (And What I Learned!) I'm super proud of these features—they really challenged me:
Quiz Flow Logic: I implemented the core game loop, handling the selection of categories and randomly shuffling the questions so you don't get the same quiz twice!
The Timer! This was a tough one. Each question has a real-time countdown timer. I used setInterval in JavaScript to make it tick down every second. The best part is that if you run out of time, the code automatically registers a failed attempt and moves to the next question—super cool.
Instant Results & Feedback: After answering all the questions, the app calculates your final score and gives you a nice summary message. I used simple conditional logic (if/else) to give personalized feedback based on your percentage.
Demo Leaderboard: Since I'm only working on the front end right now, I figured out how to fake a database! I use a JavaScript array in memory to hold scores, sort them, and display them. This simulates a competitive leaderboard and shows how I'd integrate persistent storage later on. This felt like a huge win!
Looks Good Everywhere: Thanks to Tailwind CSS, the app looks awesome and adapts perfectly whether you view it on a phone or a big screen! I focused on making it fully responsive and visually clean.
💻 Tech Stack (What I Used) I kept it simple, focusing on the basics:
HTML5: Just the core structure of the whole page.
Tailwind CSS: This made styling much faster and kept the design professional and mobile-friendly (I love using utility classes!).
Vanilla JavaScript (ES6+): All the brainpower! This is where the quiz flow, scoring logic, shuffling the questions, and the timer magic lives.
🚀 How to Run It! It's super easy because it's only one file!
Clone the repository:
git clone https://github.com/skinaamuddin25/Quiz-App.git
Open the file: Just find the index.html file on your computer and double-click it. It will open instantly in your web browser! No need to install anything else.