How to Get Day Name of the Week in JavaScript

How to Get Day Name of the Week in JavaScript

Get Day Name of the Week in JavaScript

I created a Get Day Name of the Week project using the getDay () method. getDay () is a JavaScript method that allows you to collect Day’s information from your device.

This javascript get a day of month project is so easy that everyone can create it. This will basically help you know which day of the week is today. It will show the name of the day, not the date.

Information was first collected using date.getDay (). Then the name of day has been added using ‘case’. In the end, using innerHTML, the day’s information is displayed on the webpage.

Day of the week JavaScript

Earlier I created many types of digital clocks using this new Date () method. Follow the demo section above if you want to see a live preview.

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

Although this is not a very advanced project, it will help a lot of beginners. You can use it on different web pages where you need to show your date.

 As you can see, I made a simple box. Some basic tests have been used in this box.

How to get day name from date in javascript

You need to have an idea about HTML, CSS, and JavaScript to get the day name from the date. Even if you do not have advanced knowledge. Because all of the code here is based on the basic label.

Step 1: HTML of Get day name project

I have added all the information using the following HTML code. Here we have added all the HTML code together. You can add these codes directly to your HTML file.

<div class=”container”>
     <h1>Today is : </h1>
     <div class=”weekday”>
        <div class=”” id=”weekday”>
           Display Day of The Week.
        </div>
        <div id=”quote”>Display a quote</div>
    </div>
</div>

I have designed the webpage using the following CSS and created the basic structure of this get day name from the date element. The width of this box is: 400px and the background color is white.

* {
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  background: #0a9c93;
  font-family: sans-serif;
}
.container{
  background: white;
  border-radius: 7px;
  width: 400px;
  padding: 15px;
}

Step 2: Design all text using CSS

I have designed the information contained in the box by some CSS below.

h1 {
  font-size: 2rem;
  color: #3d353d;
}
#weekday {
  font-size: 2.3rem;
  color: #0650ac;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
}
#quote {
  font-size: 1.8rem;
  color: #133030;
  margin-top: 20px;
  text-align: center;
}
Design all text using CSS

Step 3: Activate it with JavaScript

Day Name from Date is now implemented by some JavaScript.

//new Date() to get a Date for the current time or Date
let date = new Date();
//getDay() method is used to fetch the day of a week
let dayNumber = date.getDay();
let theDayIs;
let quote;
switch(dayNumber){
//case 0 indicates the first day of the week
    case 0:
        theDayIs = ‘Sunday’;
        quote = ‘Time to chillax!’;
        break;
    case 1:
        theDayIs = ‘Monday’;
        quote = ‘Monday morning blues!’;
        break;
    case 2:
        theDayIs = ‘Tuesday’;
        quote = ‘Taco Time!’;
        break;
    case 3:
        theDayIs = ‘Wednesday’;
        quote = ‘Two more days to the weekend.’;
        break;
//Case 4, indicates the fourth day of the week
    case 4:
        theDayIs = ‘Thursday’;
        quote = ‘The weekend is almost here…’;
        break;
    case 5:
        theDayIs = ‘Friday’;
        quote = ‘Weekend is here!’;
        break;
    case 6:
        theDayIs = ‘Saturday’;
        quote = ‘Time to party 🎉’;
        break;
}
//innerHTML property can be used to write the dynamic html on the html document
let spanOfWeekday = document.getElementById(“weekday”);
spanOfWeekday.innerHTML = `${theDayIs}`;
let spanOfQuote = document.getElementById(“quote”);
spanOfQuote.innerHTML = `${quote}`;
day of the week javascript

I hope you have no problem creating this Get Day Name of the Week web project using the codes above. If there is any problem then you can let me know by commenting.

If you are non-technical and have difficulty attaching the above codes, use the button below. Please comment on how you like this project (Get the day name of date using JavaScript).