Get Day Name Form Week | find the day of the week in JavaScript?

Get Day Name Form Week | find the day of the week in JavaScript?

Get Day Name Form Week | find the day of the week in JavaScript?


Welcome🎉 to Code With Random blog. In this blog, we learn how we create Get Day Name Form Week. We use HTML, Css, and javascript for this Get Day Name Form Week. I hope you enjoy our blog so let's start with a basic HTML structure for the Get Day Name Form Week.

HTML Code

 <div class="container">  
  <div class="date" id="printDate"></div>  
  <div class="date" id="printDay"></div>  
  <div class="date" id="printTime"></div>  
 </div>  
There is all the HTML code for the Get Day Name Form Week. Now, you can see an output with getting Day Name Form Week then we write javascript for Get Day Name Form Week.
output
Get Day Name Form Week | find the day of the week in JavaScript?


Simple Blank Output with Blank Html Tag

CSS code

 * {  
       margin: 0;  
       padding: 0;  
       box-sizing: border-box;  
 }  
  .container {  
       display: flex;  
       justify-content: center;  
       align-items: center;  
       min-height: 100vh;  
       background: #efefef;  
       font-family: 'Lato', sans-serif;  
 }  
  .container .date {  
       font-size: 24px;  
       font-weight: 500;  
       font-family: 'Lato', sans-serif;  
 }  
  .container .date#printDate {  
       color: #e74c3c;  
 }  
  .container .date#printDay {  
       margin: 0 20px;  
       color: #2ecc71;  
 }  
  .container .date#printTime {  
       color: #9b59b6;  
 }  
Css Updated output

Get Day Name Form Week | find the day of the week in JavaScript?

Javascript code

 var date = new Date();  
 const elementDate = document.getElementById("printDate");  
 const elementDay = document.getElementById("printDay");  
 const elementTime = document.getElementById("printTime");  
 const listOfDays = [  
  "Sunday",  
  "Monday",  
  "Tuesday",  
  "Wednesday",  
  "Thursday",  
  "Friday",  
  "Saturday"  
 ];  
 function printDate() {  
  var day = date.getDate();  
  var month = date.getMonth();  
  var year = date.getFullYear();  
  elementDate.innerHTML = day + " / " + month + " / " + year;  
 }  
 function printDay() {  
  date = new Date();  
  var numberOfDay = date.getDay();  
  var day = listOfDays[numberOfDay];  
  elementDay.innerHTML = day;  
 }  
 function printTime() {  
  date = new Date();  
  var hours = date.getHours();  
  var minutes = date.getMinutes();  
  var seconds = date.getSeconds();  
  if (seconds < 10) {  
   seconds = "0" + seconds;  
  }  
  if (minutes < 10) {  
   minutes = "0" + minutes;  
  }  
  if (hours > 12) {  
   hours = hours - 12;  
   elementTime.innerHTML = hours + " : " + minutes + " : " + seconds + " PM ";  
  } else if (hours < 12) {  
   elementTime.innerHTML = hours + " : " + minutes + " : " + seconds + " AM ";  
  } else if (hours = 12) {  
   elementTime.innerHTML = hours + " : " + minutes + " : " + seconds + " PM ";  
  }  
 }  
 setInterval(function() {  
  printTime();  
  printDate();  
  printDay();  
 }, 1000);  
Final output
Get Day Name Form Week | find the day of the week in JavaScript?


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Get Day Name Form Week. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Get Day Name Form Week using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post