Build an Interactive Quiz App with API Connections

👋 Hey everyone!

I’m Sarfraz, and this week I built a Quiz App using vanilla JavaScript that fetches questions dynamically using an external API. It's simple, smooth, and surprisingly fun to use!

Let me walk you through the idea, tech, features, and the little UX spice I added.

---

🔧 Tech Stack

• HTML, CSS, JavaScript

• Open Trivia DB API

• Hosted on Netlify

• Code managed on GitHub

---

💡 What This Quiz App Can Do

1. Select number of questions (5, 10, 15... your choice)

2. Choose a category (Science, History, Computers, etc.)

3. Pick difficulty level (Easy / Medium / Hard)

4. Start answering MCQs with instant feedback

5. Includes a ticking sound during the quiz for added UX pressure 🧠⏳

---

🚀 How It Works

The app uses fetch() to get questions from the Open Trivia API based on the user’s input. Each question is displayed one by one with multiple options. After answering, it automatically moves to the next question.

To make it even more dynamic:

• I added a smooth score tracking system

• Timer feel with tick-tick sound in background

---

🎥 Behind the Code

I made sure the logic is not just functional but also reusable. The flow is designed in small functions:

• getQuestions() - to fetch and filter data

• displayQuestion() - render current question

• checkAnswer() - validate answer and update score

• showResult() - show final score with reset option

• 

---

🌐 Try It Yourself

🔗 Live Demo
💻 GitHub Repo
🎬 Watch Demo Video

---

🧠 What I Learned

• How to work with public APIs

• DOM manipulation with conditionals and events

• Better UX means better user retention (even in small projects!)

---

🗣️ Let’s Connect

If you liked this app or want to build something similar, feel free to fork my repo or reach out! Feedback and suggestions are always welcome 💬

---

Thanks for reading! 🙌

• Sarfraz