A Year in Pixels - Part 2

In the first part we talked about the initiative A Year In Pixels and we exposed the benefits it has from our point of view. Now, we want to talk about a possible implementation with HTML, CSS and JS using localStorage.

NOTE: The first time you access to the demo you will have no data saved and the calendar will be empty but once you save a mood your browser will remember your choices no matter if you reload the page.

HTML

We used a <table> to simplify the reading of the data. If you think about it, it is just tabulated data, so this structure is the one which best fits to our purpouses. And we used PUGJS to build our <table> easiest.

Each <td> has two custom attributes, [data-day] works as an id, so we could store the information and then retrieve it easily, and [data-mood] is for styling the cell according to the mood selected.

[data-day] is an unique id, built using the number of the day and the number of the month, tied with a #, so the id for the first of January will be 1#1 and the id for the 28th of July will be 28#7.

The table has a <caption> that works as a title and it is a best practice to avoid the user has to extract the meaning of what we are representing on the table analyzing its content. And this is hepful no matter of the user, I mean that is helpful if the user has visual or cognitive difficulties or not. The cells that represent the legend of colors at the <tfoot> has a [title] just to show the mood that each color represents.

CSS

Not many surprises.

:root {
  --default-color: 0, 0%, 87%;
}
caption {
  padding: 0.5rem 0.5rem 1.5rem;
  font-size: clamp(1.5rem, 50ch, 5vw);
  font-weight: 700;
}
[data-mood="happy"] {
  background-color: var(--happy-color);
}

JavaScript

It is easy. When the page loads the script tries to retrieve data from the localStorage. If there is data, it will fill the cells with the moods selected, if not, a calendar will be created and save.

LocalStorage

localStorage is an simple API to work with. It could be volatile because the data saved could be deleted if the users clears the information saved at his browser. But it is perfect for the demo because of its low complexity and which user clears oftenly the data saved by the browser but those whom works on web development?. Futhermore, since the information is stored in your personal browser becomes more personal if possible.

Cells

Each cell is reponsible to handle its state. Each one has an handler with a counter within used to move throught the different moods. The cell will create or update its mood depending on the coincidence or not of data with its unique id, and finally each cell with modify and save the object on the localStorage.

Tech debts

There are at least a couple of things that I could improve on the demo, I write them down if you feel collaborative and want to participate with me or fork the demo:

comments powered by Disqus

If you find it interesting

If you have any doubt or you want to talk about this topic, if the content or our profiles are interesting to you and you think we could something together, do not hesitate to contact us on twitter or trough the email address hola@mamutlove.com

We are currently open to new collaboration proposals