Hello and welcome to today’s tutorial. In today’s tutorial, we will learn how to find – what day of the week it is today. To create this project, we need HTML, CSS and Javascript. This is a beginner-friendly javascript mini-project. It would be helpful for anyone who is trying to learn the basics of Date() in javascript.
I have 50+ javascript project tutorials on my youtube channel. All of them come along with downloadable source code. You can check them out here if you are trying to find projects to improve your javascript skills.
Video Tutorial:
If you like to learn by coding along to a video tutorial, check out the video here down below. It is the video version of this same tutorial. Also, be sure to subscribe to my youtube channel, where I post a new tutorial every alternate day.
Project Folder Structure:
Let us create the project folder structure before we start the actual coding. We begin by creating a project folder – Day Of The Week. This folder comprises three files – index.html, style.css and script.js. They are the HTML document, stylesheet and script file, respectively.
HTML:
We start with the HTML. Do copy the code below and paste it into your HTML file.
The HTML code consists of just an h1 element. We set an Id of day to this h1 element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
<title>Day Of The Week</title>
</head>
<body>
<h1 id="day"></h1>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we add style to this h1 element using CSS. Now copy the code provided below and paste it into your stylesheet. If your main goal is just to learn – how to find the day of the week, you may skip the CSS.
In CSS, we start removing paddings and margins from all the elements and setting the box-sizing to the border-box.
We set the height of the body to 100vh and add a gradient as the background for the body. This gradient comes with solid stops.
Other Tutorials You Might Like:
Now coming to the h1 element, we add a background colour and set the width to 80vmin. In the next step, we use transforms to centre this element. We use a few font properties to make the text look more attractive. Finally, we add a box shadow to this h1 element to make it stand out.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(#f5b201 50%, #15191f 50%);
}
#day {
background-color: #242831;
width: 80vmin;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
font-size: 6vmin;
color: #ffffff;
font-family: "Poppins", sans-serif;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2px;
padding: 1em 0;
box-shadow: 0 -30px 60px rgba(5, 0, 0, 0.1);
}
#day span {
color: #f5b201;
}
Javascript:
To add functionality to this code, we use javascript. We start by creating the dayRef variable. This element selects the h1 element with id – day.
In the next step, we create an array that consists of days of the week from Sunday to Saturday in proper order.
Now we create a dateToday variable that stores a date object. We use a new Date() to create this object. This object returns the current date and time in the form of a string.
Next, we declare a variable called dayToday and assign it the getDay() to get the weekday in form of a number. Here Sunday is 0 while Saturday is 6. We use this number to display the corresponding day from the array.
let dayRef = document.getElementById("day");
let DaysOfWeek = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
let dateToday = new Date();
let dayToday = dateToday.getDay();
dayRef.innerHTML = `Today is <span>${DaysOfWeek[dayToday]}</span>`;
That’s it for this tutorial. I hope you enjoyed it. If you have any issues while creating this code download the source code by clicking on the download button below. Also don’t forget to drop your ideas, comments and suggestions below.
