How I Implemented this Application

Software, Languages, and Frameworks

This application was implemented using Svelte, which is a JavaScript web development framework. Additionally, I used JavaScript, CSS, and HTML. The writable Svelte store library was utilized to define variables that can be edited or changed from outside the component it is defined in. Also, the onMount functionality from Svelte was used to run functions on load of the webpage. External from Svelte libraries, chart.js was utilized to create  the graphs shown in the Tracking Stats component.

Code Structure

In total, 9 Svelte files were developed to create components within the application. One JavaScript file (script.js) was used to export functions and writable store variables that multiple components utilized. An example of this is the appendCurrentDay function which is used to implement or edit data within the application, and called in several components. Two SVG images were created using an online SVG tool generator. The Svelte components, script.js, and SVG files are all located in the lib folder under src. Most style implications are defined within the Svelte component files, however, overlapping component styles are defined in app.css in the src folder. Finally, the main App.svelte file holds the component calls to deploy and display the webpage.

Use of AI

I utilized ChatGPT to help debug specific encountered issues. For example, I had trouble implementing the graphs using chart.js, so I used ChatGPT to help figure out why the graphs were not appearing in the component. The reason was because I had not defined the context as 2d, and therefore the graph was not rendering properly. A similar process was used on other encountered issues. In general, ChatGPT was helpful, however, I had to ensure I gave it lots of context and at times had to ask for help in different ways to find the correct answer. I did not use it as a way to wholly generate code, only as a debugger for specific instances.