I am currently learning Javascript and just finished the Date Objects and Methods section, so I decided to build something with it as that is the best way to solidify your learnings of a programming concept.

I designed and built a website that would show the current date & time, show how many months, weeks, days, hours and minutes we've spent so far in 2023.

Setting up the HTML, CSS & Custom Font

• I set up the usual HTML Boilerplate.

• Importing Custom Font (Clash Display): I used the Font Squirrel Font Generator to convert the Clash Display font file (.ttf) I had already downloaded into a usable Webfont Kit and then uploaded it to my CSS file. You can read more about Custom Webfonts here.

• CSS Styling & Background Image: I converted the .png background image exported from Figma to a .webp file to improve the load speed.

Javascript Logic for Time Tracking

I selected the elements to be used in the website and assigned variables to them accordingly:

const headerTime = document.querySelector('.header-time');
const months = document.querySelector('.months');
const weeks = document.querySelector('.weeks');
const days = document.querySelector('.days');
const hours = document.querySelector('.hours');
const mins = document.querySelector('.mins');

I set the start date to be used throughout the website to the first day of 2023:

const start2023 = new Date(2023, 0, 1);

Formatting & Displaying Current Date & Time

I created the function displayTime() and used template literals so I could comfortably use date methods to format the strings before displaying them:

function displayTime(){
    const now = new Date();

    // display current time & date
    headerTime.innerHTML = 
    `${now.toDateString()} \u00A0 - \u00A0 
    ${(now.getHours()<10?'0':'') + now.getHours()} : 
    ${(now.getMinutes()<10?'0':'') + now.getMinutes()} : 
    ${(now.getSeconds()<10?'0':'') + now.getSeconds()}`;

    // refresh time every (1) second
    refreshTime();
};

• new Date() returned the current date & time without any formatting.

• toDateString() method returns the date portion of a Date object (in this case, the now variable) as a string in your local timezone in English.

• getHours(), getMinutes(), getSeconds() methods return the hour, minute and second, respectively, according to the local time of the Date object (now).

• \u00A0 is used to add additional space.

• (now.getHours()<10?'0':'') is a ternary operator used to ensure that the hours, minutes and seconds stay at 2 digits instead of the default 1 digit.

• refreshTime() function refreshes the date/time every (1) second:

function refreshTime(){
    setTimeout(displayTime, 1000);
}

Logic, Displaying & Formatting Months, Weeks, Days, Hours & Minutes

I created a similar function/logic for the Months, Weeks, Days, Hours and Minutes, so I will be explaining the first one and just showing the code of the rest:

const calcMonthsPassed = (date1, date2) => Math.trunc(Math.abs((date1 - date2) / (1000 * 60 * 60 * 24 * 24)) - 1); // subtract 1 in order to get real-time months spent in 2023 so far

// display month
months.innerHTML = month;

I used an arrow function calcMonthsPassed with 2 parameters; date1 & date2.
The 2023 start date we had earlier created new Date(2023, 0, 1) which will be subtracted from the current date new Date() when the function is called.
The Math.trunc and Math.abs methods were used to get the integer part and absolute value of the result, respectively.
The innerHTML property was used to display the result.

Weeks, Days, Hours & Minutes Logic

// calculate days
const calcDaysPassed = (date1, date2) => Math.trunc(Math.abs((date1 - date2) / (1000 * 60 * 60 * 24))  - 1);

// calculate weeks
const calcWeeksPassed = (date1, date2) => Math.trunc(Math.abs((date1 - date2) / (1000 * 60 * 60 * 24 * 7)));

// calculate hours
const calcHrsPassed = (date1, date2) => Math.trunc(Math.abs((date1 - date2) / (1000 * 60 * 60)) - 24);

// calculate minutes
const calcMinsPassed = (date1, date2) => Math.trunc(Math.abs((date1 - date2) / (1000 * 60)) - 1);

// display weeks
weeks.innerHTML = week;

// display days
days.innerHTML = day;

Displaying & Formatting Hours and Minutes

The innerHTML property was used to display the result formatted with the already explained toLocaleString method:

// display current hour
function displayHour(){
    hours.innerHTML = hour.toLocaleString();
}
displayHour();

// display current minute
function displayMin(){
    mins.innerHTML = min.toLocaleString();
}
displayMin();

Here are some resources that were helpful to me in the process of building this website:

• Javascript Date MDN Docs

• Jonas Schmedtmann's Javascript Course

• I deployed the website on Vercel, try it here

• UI Design on Figma

• Github Repo

Thank you for following through to this point, your time means a lot to me.
Please feel free to tell me what you think about this website/article and how I can improve my code.

Probably also worth noting that this is my first ever attempt at writing a Technical Article (if this counts lol). Cheers 🥂