Let's build a Weight Tracker app with vanilla JavaScript.

Over a period, I'll be building a weight tracker app (christened EazyTrckr) as part of the tasks assigned under the mentorship program created by the illustrious Everistus Olumese

Usually, I'd typically not bust a sweat trying to create this on a production grade as I could easily develop this with tested and trusted libraries & frameworks like React, Angular, Vue, Knockout or Svelte. However, I think the basics are important and peering beneath the layers of abstraction are key to growth as a developer. For example, knowledge of trees and graphs could help make understanding React's diffing and DOM reconciliation mechanisms easier.

To start off with, I had to establish some rules for common tasks. For example, how do we communicate updates to the DOM? For this, I'll be listening for any 'add' events and then cloning a sample node and then updating the cloned node before insertion into the DOM.

I also plan to leverage local storage as a key data store as the app does not require cloud persistence (yet)

Here are some concepts I've reviewed so far

• Retrieving child element(s) by class name
• The observer pattern

You can check Eazy Trckr out