Time Tracking Dashboard with Vanilla JavaScript

Wat I learned:

I have learned how to add custom data to a <button> element with the data-* attribute. Data-* attribute attaches data to the button:

<button data-frequency="daily" class="btn">Daily</button>
<button data-frequency="weekly" class="btn">Weekly</button>
<button data-frequency="monthly" class="btn">Monthly</button>

I also learned about the clamp() method. This method is a reference to woodworking in which a clamp limits the movement of a saw. I have used this method on the font-size:

font-size: clamp(1.5rem, 2vw + 1rem, 5rem);

I have added +1rem to remain the zoom-in function of the browser.

This method takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

clamp(minimum, preferred, maximum);

This is how it works: When you decrease the size of the viewport, the viewport becomes smaller, thus the vw or % of the fontsize also becomes smaller. And vice versa for when you increase the viewport. The clamp()method essentially works the same as when you use width:100%, in this case the width will adjust to the viewport width size.

• Minimum: this absolute unit prevents the element from becoming smaller than the set value

• Preferred: prefered relative unit scalable value

• Maximum: this absolute unit prevents the element from being bigger than the set value

Example:

clamp(30px, 6vw, 72px);

Ones the browser hits 30px it will not go below that even if the viewportsize is decreasing. Ones the browser hits 72px it will not go beyond that even if the viewportsize is increasing.