mathew.emad778

Devlog 4 — Start Button, Quiz Flow & Result Sharing

This update focuses on making the Start Test button fully functional, establishing the core quiz flow, and allowing users to share their results in DevPersona.

Key Changes:

Start Test Button: Clicking it hides the landing section and reveals the quiz section, giving users a smooth transition into the quiz.

Question Display: Questions are presented one by one with multiple-choice answers. The progress bar and question counter update dynamically as users move through the quiz.

Navigation: Users can navigate forward with the Next button and backward with the Previous button. Buttons update their state automatically based on the current question.

Answer Selection: Each selected answer is saved in real-time, updating the internal scores object. Selected answers are highlighted visually, so users can easily see what they picked.

Result Sharing: After completing the quiz, users can share their developer personality results via native share dialogs or by copying a link to the clipboard. This allows friends and fellow developers to see and compare results.

With this update, the quiz is fully interactive, responsive, and polished. Users can now complete the full flow from start to finish and share their results with ease.

Preparing the Quiz Logic

Today I started preparing the logic for how the quiz will actually work. The UI is mostly finished now, so the next step was making sure the structure is ready for JavaScript.

I reviewed the sections I built earlier and made sure each part has the right IDs so it can be controlled from JS later. This includes the landing section, the quiz section, and the results section. The quiz and results sections are hidden by default for now.

I also prepared the container where the answers will be rendered dynamically. Instead of writing all the answers directly in the HTML, the plan is to generate them with JavaScript depending on the current question.

Another thing I worked on was the progress bar layout and the navigation buttons. These will later update based on which question the user is on.

At this point the structure is ready, so the next step will be writing the JavaScript that starts the quiz when the Start Test button is clicked and begins showing the questions.

Working on the UI

Today I focused mostly on the visual side of the project. After finishing the basic structure earlier, I started improving how everything looks and feels.

I used Tailwind CSS to style the layout and tried to keep the design simple but clean. I worked on the landing section first, adding the main title, description, and the Start Test button. I also added some icons using Font Awesome to make the interface feel a bit more alive.

After that, I designed the cards that explain what the quiz does (questions, progress tracking, and personality result). I also added the progress bar layout that will later be updated with JavaScript while the user answers questions.

Most of the UI is now ready. The sections for the quiz and the results page are already in the HTML, but they are hidden for now. The next step will be connecting everything with JavaScript so the quiz can actually start and move between questions.

Started working on the structure of the project today. I began by building the full layout using HTML and focused on organizing the sections clearly (landing page, quiz section, and results section). After that, I styled everything using Tailwind CSS to keep the design clean and responsive.

Most of the UI is now in place, including the cards, buttons, progress bar, and layout for the questions and results. I also added icons and fonts to make the interface look a bit more polished.

Right now I’m moving into the JavaScript part of the project. The plan is to handle the quiz logic, question navigation, progress updates, and calculating the final personality result. The structure for the answers container and result section is already prepared, so the next step is wiring everything together with JS.

After building the core simulation engine, the next step was turning the logic into something interactive. Initially, the system was running with a hardcoded test user just to verify that the calculations and yearly progression worked correctly. The goal was to replace that with a real input system so users could enter their own data and see how different habits might influence their life trajectory over the next ten years.

To achieve this, I built a form that collects several key variables such as age, income, sleep hours, study time, and risk tolerance, along with lifestyle habits like going to the gym or investing money. When the form is submitted, the data is passed to the simulation function which generates a year-by-year timeline.

During this process I ran into a common frontend issue where the script attempted to attach event listeners before the DOM elements were fully loaded, causing the well-known “Cannot read properties of null” error. Fixing it required adjusting how the scripts were loaded.

The interface was then redesigned into a two-column layout, placing the form on the left and the simulation results on the right. Each simulated year is displayed as a card showing Wealth, Health, Mental state, and Career progress. A final summary card calculates an overall score and provides a simple evaluation of the user’s trajectory. Alongside these changes, the UI was refined with custom form styling and a light mode toggle built using CSS variables.

The first real step in this project was not about design, layout, or animations. It was about logic. I wanted the application to feel alive, not random. The goal was to simulate 10 years of a user’s life in a way that reflects how small daily decisions compound over time.

I started by designing a function called simulateTenYears(). Instead of generating isolated yearly results, the system carries state forward. Each year builds on the previous one. Wealth increases based on income, investment behavior, and risk tolerance. Health reacts to sleep hours and gym consistency. Mental state shifts depending on balance between effort and pressure. Career growth is influenced by study hours and long-term discipline.

One of the biggest challenges was balancing the equations. If the impact of one factor was too strong, it would break the realism of the simulation. If too weak, the results would feel meaningless. The logic had to reward consistency while still allowing risk to produce both gains and setbacks.

Another important decision was making the engine deterministic but flexible. The structure allows easy tuning of weight values and conditions without rewriting the full system. This makes the simulation scalable and adjustable for future features.

By the end of this phase, the application had a working life progression engine capable of generating a 10-year timeline based entirely on user input. No UI improvements yet — just pure logic and structured thinking.

This was the foundation everything else would be built on.

When implementing dark mode in this project, my goal was to build a structured theme system instead of just changing background colors. I used a single dark-mode class added to the body element to control the entire theme. This keeps JavaScript responsible only for toggling the mode, while CSS handles all visual changes.

The light theme acts as the base design, and dark mode works through CSS overrides using the .dark-mode prefix. Backgrounds, cards, text, buttons, and borders are all adjusted through controlled style changes, keeping the stylesheet organized and maintainable.

A key challenge was maintaining readability. Some elements, especially analytics numbers, became hard to see on darker backgrounds. To fix this, I adjusted text colors and contrast carefully to ensure clarity without breaking the design consistency.

Cards were switched to deep gray instead of pure black to preserve visual hierarchy. Inputs and buttons were also restyled to remain accessible and clear.

Overall, the dark mode implementation reinforces clean separation between logic and styling, scalable CSS structure, and strong UI contrast management.

When developing the analytics system for this project, my main goal was to provide real-time productivity insights while keeping the architecture simple and fully synchronized with the task state. Instead of storing separate counters for totals and completed tasks, I designed analytics to be derived directly from the main tasks array. This ensures that the displayed numbers are always accurate and never fall out of sync with the actual data.

The total number of tasks is calculated using the array length property. Completed tasks are calculated using a filtering operation that counts tasks where the completed value is set to true. This dynamic calculation removes the need for manual updates whenever a task is added, toggled, or deleted.

For the completion rate, I implemented a percentage formula based on completed tasks divided by total tasks. To prevent errors, I added a safeguard to handle cases where there are no tasks. If the total is zero, the completion rate defaults to 0%, avoiding division-by-zero issues and maintaining UI stability.

One important architectural decision was centralizing analytics updates inside the main render cycle. Instead of updating analytics inside each individual action function, I created a structured flow where any state change triggers a save-and-render process. During this cycle, analytics values are recalculated and displayed instantly. This keeps the system predictable and easy to maintain.

From a UI perspective, analytics are updated immediately after every interaction, providing instant feedback to the user. In dark mode, text colors were adjusted to maintain readability and strong contrast against darker backgrounds.

Overall, the analytics system reinforces principles of derived state, centralized updates, clean function separation, and UI synchronization using pure JavaScript without external libraries.

When building the task system for this project, my main objective was to create a clean and reliable state-driven structure using pure Vanilla JavaScript. Instead of treating tasks as simple text entries, I designed each task as an object containing a title, priority level, and a boolean completed value. This approach makes the system scalable and easier to extend in the future.

All tasks are stored inside a single array that acts as the source of truth. The UI does not store any independent state. Instead, every time the state changes, the interface is fully re-rendered based on the current tasks array. This guarantees synchronization between the data and what the user sees on the screen.

When adding a task, the application validates the input, creates a new task object with completed set to false, pushes it into the array, saves the updated array to Local Storage, and re-renders the list. This structured flow ensures consistency and prevents logic duplication.

The toggle completion feature works by flipping the completed boolean when the user clicks on the task text. During rendering, a conditional CSS class is applied if the task is completed, which visually adds a line-through effect. This keeps logic and styling clearly separated.

Deleting a task removes it from the array using its index, then triggers the same save-and-render cycle. Because analytics are derived directly from the tasks array, all statistics update automatically without additional logic.

Local Storage integration ensures persistence after page refresh. On load, stored tasks are parsed and rendered immediately, maintaining continuity.

Overall, this task architecture demonstrates state management, dynamic DOM rendering, separation of concerns, and clean update cycles without relying on any framework

Started the project by setting up the core HTML structure with a clear layout: Sidebar and Main Content. I’m building this as a Single Page Application (SPA) so navigating between sections (Dashboard – Tasks – Analytics) won’t require page reloads, making the experience smoother.

The Sidebar contains buttons linked via data-section attributes to dynamically show/hide each section with JavaScript. Each section is wrapped in its own to make managing content easier later.

At this stage I focused on:

Creating a clean, expandable layout

Preparing the dynamic navigation system

Setting up initial Cards for stats display

Building the Task section (input + priority + list)

Reserving space for Analytics to link with data later

For design, I chose a soft, light color palette to make adding Dark Mode later easy and visually pleasant.

Next steps: connect the Task system to the Dashboard and update stats live.

I completed the remaining core features of FocusForge.

Fully implemented the Pomodoro Timer (start, pause, reset functionality)

Added session tracking to monitor completed focus sessions

Connected completed tasks to the progress tracking system

Implemented a dynamic progress bar that updates in real-time

Improved UI consistency across all sections with smooth transitions

FocusForge is now a fully functional productivity dashboard combining task management and focus tracking in one clean, dark-themed interface.

Next step: polish animations, optimize performance, and refine user experience

Finished building the full To-Do List system for FocusForge.

Added dynamic task creation using JavaScript

Tasks render instantly in the UI

Clean dark styling with electric blue highlights

Structured the code to support future features (delete, complete, progress tracking)

Improved spacing and hover interactions for better UX

The app now has real interactivity.
Next step: connect tasks to progress tracking and Pomodoro sessions

I finished building the To-Do section for FocusForge.

Implemented task input with dynamic add functionality

Styled the list with a dark UI and electric blue accents

Added hover effects and smooth transitions

Structured the list for future features like delete and progress tracking

Next step: connecting it to progress tracking and Pomodoro logic.

Finished building the navbar for FocusForge today.

Added a sticky, dark-themed navigation bar with the FocusForge logo.

Included a theme toggle button for switching between dark and light modes.

Styled links with hover effects and smooth underline transitions.
Next step: work on the To-Do section and layout of the main dashboard.

This project started with the goal of designing a visually appealing coffee website that feels modern and immersive. I began by sketching the structure of the page and defining the main sections: navigation bar, hero section, menu, about section, hours, contact form, and footer.

The first development phase focused on building the HTML structure. I created reusable layout patterns and ensured consistent spacing across sections. The menu grid required careful planning to maintain balance and alignment while supporting multiple items.

Next, I moved to styling. I chose a dark color palette inspired by modern cafés and applied accent colors to highlight important elements like buttons and headings. I experimented with spacing, typography, and alignment to achieve a professional appearance.

Animations and transitions were added to improve user experience. Hover effects and subtle motion were implemented to make the interface feel interactive and responsive. I refined the layout multiple times to ensure visual consistency.

I also paid attention to accessibility and readability by maintaining strong color contrast and clear text hierarchy. Throughout development, I iterated on design decisions and continuously improved the layout based on testing and adjustments.

This project helped reinforce my understanding of front-end structure, styling workflows, and visual design principles. It also encouraged me to think about user experience and how layout choices influence navigation and engagement.

Devlog – 88 Coffee Website

In this project, I built a full static website for a fictional coffee shop called “88 Coffee.” The goal was to practice structuring a multi-section website using HTML and CSS while focusing on clean layout, responsive design, and visual styling.

I started by designing the main HTML structure, including a navbar, hero section, menu grid with multiple coffee items, about section, opening hours, contact form, and footer. I focused on organizing the content clearly and making the menu detailed, with images, descriptions, and prices.

After finishing the HTML, I worked on the CSS styling. I created a dark-themed color palette to match a modern coffee shop aesthetic and added hover effects and animations to improve the user experience. I also experimented with responsive design techniques to make the layout look good on mobile devices.

Throughout the process, I improved my understanding of layout systems, spacing, and visual hierarchy. This project helped me gain more confidence in building complete front-end projects from scratch.

AI tools were used to help fix minor HTML and CSS errors. The main design, layout, and content of Elite Gym were implemented by me.

Built the Primos restaurant website using HTML and CSS, focusing on clean design, responsive layout, and proper file organization. AI was used only to help fix minor coding mistakes, while the main work and design were completed by me.

Created Prime Table Website using HTML and CSS. Learned how to structure a responsive layout, design a navbar, and add a visual menu. Enjoyed experimenting with styling and screenshots for the banner. Minor help from AI for writing food menu descriptions.