DEV Community

Cover image for I made a simple weight tracker that displays progress in a graph - a web app without HTML/JS.
Erika Kacelnik
Erika Kacelnik

Posted on • Edited on

5 2

I made a simple weight tracker that displays progress in a graph - a web app without HTML/JS.

I’ve been learning Python for a few months, and really wanted to share one of my projects with friends and online. Learning HTML/CSS/JS or any framework for front-end seemed like a whole lot of work for such a simple wish.

I solved this by using Abstra's lib (full disclaimer: I've been working for them!). I was able to generate a UI and navigation from my script just by updating the commands, for example from “input” to “read”. The entire web app is just 1 Python file + 1 tsv file.

I used an authentication widget to share with friends, but opted for a simple username here so everyone could test it without hassle. Apart from the hackerforms library, I used Pandas and Plotly to build and display the graph.

It’s a really simple script, but I loved how it’s possible to build such a useful tool in just a few lines of code.

Click here to try out the tracker

Image description

Source code:

from hackerforms import *
import pandas as pd
from os.path import exists
import time
import datetime
import plotly.express as px

user = read("What's your username? Choose one and use it everytime to see your progress!")

option = read_multiple_choice(f'Hey {user}. What would you like to do?', ['Insert new weight', 'See progress'], button_text=None)

if not exists("weights.tsv"):
    with open("weights.tsv", "a") as f:
        f.write("user\tweight\tdate\n")


if option == 'Insert new weight':
    now = time.localtime()
    year = now.tm_year
    month = now.tm_mon
    day = now.tm_mday

    date = read_date("Add date of measurement", initial_value=datetime.date(year,month,day))

    weight = read_number("Fill your weight")

    with open("weights.tsv", "a") as f:
        f.write(f"{user}\t{weight}\t{date}\n")


df = pd.read_csv("weights.tsv", delimiter="\t")
df.date = df.date.astype('datetime64')
df = df.sort_values('date')
df = df[df.user == user]

fig = px.line(df, x='date', y='weight')
display_plotly(fig)
Enter fullscreen mode Exit fullscreen mode

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay