Todo Web App
Live Demo
Source Code
A web app to keep track of things you need to do, also shows how long it took to complete a task
Project DetailsInfo behind this project
This project focused more on states, you can create, modify, start, pause, close and reopen tasks. The point of this project was to learn how to store persistent states in the browser. Generally, browsers do not store information about the site state when you restart. You can store persistent data in the browser by using the browsers Local Storage which allows information to be stored in the browser instead of a server.
Review
There are a few things I would fix if I was going to reimplement or update this page. As an example, some browsers pause execution of scripts on tabs that are inactive, this causes the stopwatch to not be reliable since events are not getting fired. Another issue is with how I store data, I store the time elapsed, but if you have a task "ongoing" its timer wouldn't be counting, since that relied on the stopwatch events which are not available when the site is closed. A more reliable approch that fixes both of these issues would be to store the date and time of the last recorded state and time elapsed so that it can fast forward and update the time after you load the page (or reactivate the tab).
Technologies UsedWhat engines, frameworks and tools were used
Hypertext Markup Language (HTML)
HTML is used to define the general hierarchy and relationships between elements on a webpage. HTML itself, usually doesn't look very presentable and looks like a something you'd find in the 90s, so you'll need to use CSS to add color.
CSS is used in combination with HTML, it is used to "paint" the canvas that was built with HTML. However, CSS is not a programming language and does not provide any programmable functionality.
Javascript can be utilized to provide functionality and programmable logic to webpages and/or servers assumming it is using a JS runtime on the server. With Javascript you can make a popup open to alert the user about unsaved changes or process a login request.
I used Javascript to ..
- .. create new tasks and update timer if ongoing
- .. save and recall the tasks with their states
- .. ability to add/edit/delete/modify tasks
Git is a Version Control System (VCS) used to track changes to a codebase over time. GitHub is a centralized Git service owned by Microsoft that lets developers easily collaborate with each other. GitHub also offers other tools for development such as Boards (named GitHub Projects), Issues and automation.
This project pushed changed to a central repository where I kept Web Projects. It is public, so you can see the source code here.