djacksonlad

DEVLOG 21 (Boss battle)
within this period of work i began by Introduced game state variables (health, streak), Built boss battle structure, Connected quiz system to game logic.
and i also spent time on Implementing the boss attack system so i linked correct answers to boss damage, added penalty system for wrong answers

DEVLOG 20 (PREVENT CHEATING & LOCK ANSWERS)
During this time i:
Replaced static answer system with interactive multiple choice
Implemented real-time scoring
Added feedback for correct and incorrect answers
and Improved engagement and interactivity

DEVLOG 19 (INTERACTIVE QUIZ UI)
within this last session i have been able to
Replaced static answer system with interactive multiple choice
Implemented real-time scoring
Added feedback for correct and incorrect answers
Improved engagement and interactivity

DEVLOG 18
(CHANGE AI OUTPUT FORMAT)
Modified AI prompt to generate structured multiple-choice questions
Ensured output format consistency
Prepared backend for interactive quiz system

DEVLOG 17 (final touches)
here i fixed all the bug and generally just fixed every thing to be more organized

DEVLOG 16 (JSON Parsing & Error Handling)
In this stage, I worked on converting the AI responses into usable quiz data.

Since the AI sometimes returned invalid JSON, I implemented some strict prompts and added error handling using try/catch blocks.

I also improved backend validation to ensure the app wouldn’t crash if the AI response was malformed.
here i faced issues like
JSON parsing failures when AI added extra text which i fixed by refining prompt and adding fallback error handling

DEVLOG 15 (Hack Club AI Integration)
his was the most critical session. I replaced mock data with real AI integration using the Hack Club AI API.

I implemented a POST request from the backend to:https://ai.hackclub.com/proxy/v1/chat/completions

I structured the request to include:
model: qwen/qwen3-32b
user message containing notes

here i also faced issues like
-API returning unexpected formats which i fixed by logging full response
-401 errors due to incorrect API key formatting
-forgetting Bearer prefix

DEVLOG 14 (UI Cleanup & Minor Fixes)
This was a short session focused on improving the UI and fixing small issues.

I adjusted spacing, improved button styling, and ensured the layout was consistent. I also fixed minor bugs like empty input handling.

DEVLOG 13 (Dynamic Quiz Rendering)
In this session, my main goal was on displaying the quiz data dynamically on the frontend.so i created a function to render multiple questions and added buttons to reveal answers.

I also implemented a system to store answers in a global array so they could be accessed when clicking “Show Answer.”

At first the buttons were not showing answers correctly due to incorrect indexing
so i fixed it by properly mapping answers and passing the correct index.

DEVLOG 12 (Backend Setup + API Route)
In this session, I set up the backend using Node.js and Express. I initialized the project with npm init and installed required dependencies like express, cors, and dotenv.

I created the main server file and implemented a basic route (/generate) to receive POST requests from the frontend. At this stage, the server simply returned mock quiz data to confirm the connection worked.

I then connected the frontend to the backend using the fetch API, sending user notes to the server.

here i face issues like JSON body not being read properly which i fixed by adding express.json()

DEVLOG 11 (Trying to introduce Ai)

In this session, I started building the foundation of the AI Study Buddy project. I created the project structure with separate client and server folders to keep frontend and backend logic organized early on.

I implemented the basic JavaScript to capture user input and log it to the console. This helped verify that the DOM connections were working correctly before introducing the real backend communication.
this part devlog was mainlly filled with issues i which so i still don’t understand, but the issues i understound was that
-the initially struggled with DOM selection (getElementById returning null) because scripts were loading before the DOM finished rendering.
-When clicking the “Generate” button, nothing happened. this was because the JavaScript function was either not defined globally or the script wasn’t loaded correctly so i made sure the function was defined in app.js and also ensured the script tag was placed at the bottom of the HTML.
-clicking the button didn’t show anything in the output section this maked it hard to tell if the app was working so i added temporary console logs and placeholder text to confirm that the function was running.
There were also moments where the textarea appeared empty even after typing this was because of incorrect reference to the element ID or accessing so i verified correct ID usage and ensured .value was accessed after user input.

DEVLOG 10 (Clean Structure & Code Refactor)

During this time, I focused on improving the internal structure of my project. Up to this point, the website was working, but the code was starting to become repetitive and harder to manage. I decided to refactor the frontend logic to make it more easier, organized and readable, to scale for future features like AI integration.
I broke down the main generate() function into smaller, reusable helper functions. Instead of

handling everything in one place, I separated responsibilities into distinct parts:
getNotes() → retrieves and cleans user input,
showError() → displays error messages,
showLoading() → shows a loading state when waiting for a response,
fetchQuiz() → handles communication with the backend API.

One issue I ran into was making sure all functions still worked together after separating them. I had to carefully check that data was being passed correctly between functions, especially when dealing with asynchronous calls like fetch().

DEVLOG 9 (Implementing ERROR HANDLING + UX )

During this time, I focused on improving the overall user experience and making the app more stable.
The first issue I addressed was that when the user clicked “Generate” without entering any notes, nothing happened. To fix this, I added input validation that checks if the textarea is empty. If it is, the app now displays a clear message prompting the user to enter notes before continuing. This prevents confusion and makes the app feel more reel and responsive.
Next, I implemented a loading state. Previously, after you clicking the button, the screen would stay unchanged for a moment, which made it feel like the app wasn’t working. So i added a “Loading…” message that appears immediately after the button is clicked. This gives instant feedback and improves the performance of the app.
I also added basic error handling for connection between the frontend and backend. If the server fails to respond or there’s a network issue, the app now catches the error and displays a simple message instead of breaking or staying stuck. This makes the app more reliable and prevents it from feeling buggy.
Overall my plan for this stage wasn’t to add new features, but it was about making the existing ones feel smoother and more polished. These small improvements make a big difference in how the app feels to use and set a stronger foundation for future features like AI integration.

also this though me that Good UX is not just design but also involves it’s feedback and responsiveness and how Error handling is essential for real applications.

devlog 8 (returning quiz data)

well am still working with the back-end and i have: Created structured quiz data on the backend,
Sent quiz data to frontend, Rendered dynamic quiz UI from backend response and Maintained interactive answer reveal system
this i nothing much but i short terms now the back end gives feed back to the front end

devlog 7 (connecting frontend and backend)

In this stage, I focused on connecting my frontend interface to a backend server so the app could start processing user input instead of just displaying static or mock data.

I began by updating my Js file to use the fetch API to send a POST request to my server. which allowed me to take the notes entered by the user and send them as JSON data to the backend.

On the backend, I created a new endpoint using Express. The endpoint receives the notes from the js file and puts them to the console. This step was mainly for testing and verifying that the connection between the frontend and backend was working correctly.

by biggest challenges was a CORS error, where the browser blocked the request because the frontend and backend were running on different ports. I fixed this by adding the cors middleware to my Express server, which allowed cross-origin requests.

After fixing that, I tested the full flow and evert thing went well

By the end of this stage, I had a working communication pipeline between the frontend and backend, which is a critical if i will integrating AI.

devlog 6 (start backend)

I created backend folder and initialized Node.js project,
Installed Express and CORS,
Built first server,
Successfully ran server locally.

devlog 5 (Interactive)
i spent the last few moments making me study buddy website feel more interactive.
i added an interactive quiz system, Implemented button-based answer reveal, Introduced dynamic DOM updates and Improved engagement through interactivity. also some thing you might notice which i fogot to mention earlier is that the text input field draws a line around it’s boundaries once i click i it. i just wanted to say that i took inspiration for that feature from devloging here on flavour town.

devlog 4
i have created a FAKE QUIZ SYSTEM
so for simple terms Prepared the UI for future AI integration or you could say i built the structure for the ai before actually introducing the AI.
this was to help me: avoiding confusion as i move on, making debugging easier, prevent the AI integration from breaking later and to avoid having a messy code.
hopefully later when i “plug AI into it” everything will instantly

you can imagine it like i just built the tv screen and ai is the content that will be playing on it (if the tv doesnt work the content we be pointless).

through this process i learnt how to Structure data, Loop through data and Render dynamic UI

devlog 3
i have presently improved UI styling(worked on all the buttons, spacing and colors)
i also added input validation,
Enhanced user experience with feedback messages,
and refined layout for better readability

Devlog 2
It now accepts text
Within the past 2+ hours, I focused on making the website actually respond to user input instead of just showing the static message you saw earlier.

I started by updating my JavaScript so that when the user clicks the “Generate” button, it grabs whatever text is inside the textarea. I used document.getElementById(“notes”).value to store the input in a variable. At first, I had a small issue where nothing was showing up, and I realized I had a typo in my element ID, so fixing that allowed the input to display correctly.

After that, I worked on displaying the notes back onto the page. I used innerHTML to dynamically insert the text into a div below the button. This made the website feel more interactive since it could now reacting to user input in real time.

Once the functionality was working, I improved the layout by styling the output section. I added a background color, padding, and rounded corners using CSS so the displayed notes wouldn’t just look like plain text black and white page. After this the interface look more like an actual website instead of a plain test page.

I also tested different types of input (short text, long paragraphs, empty input) to see how the app behaved. I noticed that if the user didn’t type anything, it would still try to display an empty section, so I plan to fix that in the next phase by adding input validation.

Overall, this was the stage where the project started to feel functional instead of static. The main progress was connecting the user input to the UI and improving how the output is displayed.

I have also published the demo and created a repository so feel free to check them out.

i just finished some of the final touches, i organized the ui and created a Streak tracker feature which was inspired by hackatime. i as fix an issue where by the text in the goals space where leaving there boundaries. so basically am done and ready to ship bye😌

i have now added the task bar where you put your plan for the count down i and i is functional the errow that i faced when coding this was that i forgot to call renderTasks() after adding a task. so i added “renderTasks();”. this tough me that the DOM does not update automatically—so we most manually re-render after state changes.

i have created an input field so users can now change the time to thier preferred count down and i also created to code to this so it actually works.The defaultTime wasnt which made the reset not work properly so i fixed reset logic to use updated values

i have implemented the timer logic using setInterval and i also made the start, pause and reset button to start functioning with the set Interval and clear interval

i have build the basic ui layout of the website, i have also put in the start, stop and reset buttons although there inactive at the moment. i also gave it a bit of design so it looks good

first beginning of my study buddy
i have just started the basic ui. i create the text input box which when text is inserted it says Your notes received!. i also used css to style it a little but that not some thing you might notice right now couse i want to finish the html frist.