Interactive Frontend Quiz with AI Chatbot. Vanilla JS & Vercel

What are you most proud of, and what would you do differently next time?

1. Getting the AI Chatbot Up and Running! Integrating the AI and learning to handle the API key safely was a good lesson, since AI is such a big thing these days.

2. My JavaScript Getting Cleaner: I'm also really proud of how much better I am at refactoring my JavaScript. It's not perfect, but it keeps getting better every time I do a project.

Looking back, the main thing I'd want to improve is the chatbot's CSS styling.

• Right now, it's pretty basic, just enough to work.
• Next time, I’d spend more effort making it look a lot nicer. Maybe I'll try to check out some chatbot template online for inspiration and see how I can make the chat window more slick and user-friendly.

What challenges did you encounter, and how did you overcome them?

1. Making the JavaScript Do All the Things:

   • Getting the quiz logic in main.js to run smoothly was a bit of a puzzle. Things like:
     • Pulling the right questions for HTML, CSS, etc., from the data.json file.
     • Keeping tabs on the score as you go.
     • Making sure the page actually showed the right question, updated the options, and moved the progress bar correctly – all that UI stuff had to sync up.
   • How I fixed it: console.log() was very useful, just to see what was going on. I also found it helped to break the big problems down into smaller chunks. If I got stuck, I’d search around for how other people solved similar problems or look up specific JavaScript tricks until things started working.

2. Figuring Out the Google Gemini API:

   • Using Google's AI for the chatbot was totally new territory for me, so getting the @google/generative-ai library to play nice in my Vercel function (api/gemini-chat.js) took a bit of effort.
   • The tricky bits were stuff like:
     • Just getting the API client set up right.
     • Sending the chat history back and forth so the bot remembered what we were talking about.
     • Making sure my API key was kept secret using those environment variables on Vercel, and then handling the responses from the AI without the app crashing if something went sideways.
   • How I fixed it: I posted my issues at the Vercel community board, which was very helpful since they are very active.

What specific areas of your project would you like help with?

The main thing I'm looking to get some feedback on is my JavaScript code in main.js.

Specifically, I'm trying to get better at:

Refactoring for Clarity and Efficiency: * I'd love any tips or suggestions on how I could have refactored my JavaScript functions to make them cleaner, easier to read, or maybe even a bit more efficient"