Digital calender

                     Design A Digital Calender

Design a code for accesing and designing calender.

#CODE

                      

                                    <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Calender UI</title>

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Lobster:wght@200;300;400;500;600;700;800;900&display=swap');

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Lobster', sans-serif;

}

body{

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background-color: black;

background-size: cover;

background-position: center;

}

.calender{

position: relative;

width: 200px;

background:#ffffff;

text-align: center;

border-radius: 8px;

overflow: hidden;

-webkit-box-reflect : below 5px linear-gradient(transparent,transparent,white);

box-shadow: 5px 5px 22px #cfcfcf,

-5px -5px 22px #ffffff;

}

.calender #monthName{

position: relative;

padding: 5px 10px ;

background:#ff6331;

color: #fff;

font-size: 30px;

font-weight: 700;

}

.calender #dayName{

margin-top: 20px;

font-size: 20px;

font-weight: 300;

color: #999;

}

.calender #dayNumber{

margin-top: 0px;

line-height: 1em;

font-size: 80px;

font-weight: 700;

color: #333;

}

.calender #year{

margin-bottom: 20px;

font-size: 20px;

font-weight: 500px;

color: #999;

}

</style>

</head>

<body>

<div class="calender">

<p id="monthName"></p>

<p id="dayName"></p>

<p id="dayNumber"></p>

<p id="year"></p>

</div>

<script type="text/javascript">

const lang = navigator.language;

let date = new Date();

let dayNumber  = date.getDate();

let month = date.getMonth();

let dayName = date.toLocaleString(lang,{weekday: 'long'})

let monthName = date.toLocaleString(lang,{month: 'long'})

let year = date.getFullYear()

document.getElementById('monthName').innerHTML = monthName;

document.getElementById('dayName').innerHTML = dayName;

document.getElementById('dayNumber').innerHTML = dayNumber;

document.getElementById('year').innerHTML = year;

</script>

</body>

</html>

#OUTPUT: