Giter Site home page Giter Site logo

brian926 / 100devs-hw-tracker Goto Github PK

View Code? Open in Web Editor NEW

This project forked from labrocadabro/100devs-hw-tracker

0.0 0.0 0.0 12.09 MB

A simple way to keep track of 100Devs homework.

License: MIT License

JavaScript 5.39% CSS 13.82% HTML 80.79%

100devs-hw-tracker's Introduction

100Devs Homework Tracker

This is a homework tracker for the #100 Devs Academy training course. The tracker uses localStorage to keep track of checkbox status, so as long as you keep using the same browser, your completions will be tracked.

Link to live tracker: #100Devs homework tracker

Image of the homework tracker

How It's Made:

Built with: html5css3javascript

The project is primarily HTML and CSS. The essential Javascript is the storage of checkbox checked/unchecked status in localStorage, since without that users would not be able to keep track of their progress.

In addition, I added some Javascript to keep track of the completed status of individual classes. When all homework is checked off for a particular class, the class is faded to indicate that it has been completed, giving visual feedback and making it easier to scroll through the list and spot incomplete homework. It is also possible to mark an entire class complete or incomplete with a single checkbox, which is useful for anyone who starts using the tracker after they have completed some of the homework.

Optimizations

  • hide completed
  • backup and load completion status
  • optional tracking of push work
  • improve the tooltips

Lessons Learned:

The main lesson I learned from this project is: keep in mind future maintainability from the beginning, especially for a project that requires frequent updates. I made the tracker before the classes had completed, and the process of adding new homework is cumbersome, but I don't want to introduce any breaking changes that would affect current users. If I had spent more time in the beginning considering what the updating process would involve, I would have opted for a database and HTML template.

How to Contribute

If you spot any errors in the tracker, please fork the repo and create a pull request, or you can also simply open an issue.

Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

MIT

Copyright (c) 2022-present, Laura Abro

100devs-hw-tracker's People

Contributors

anasmus avatar thesunnydev avatar brian926 avatar rixaxtech avatar tarat1 avatar alcpereira avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.