├── README.md
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # DateAndTime
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Pradip Banjara || Date & Time
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | function displaytime(){
2 | var session = "";
3 | var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
4 | var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
5 |
6 | var today = new Date();
7 | var day = today.getDay();
8 | var date = today.getFullYear() + "/" + (today.getMonth()+1) + "/" + today.getDate();
9 | var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
10 |
11 | if(today.getHours() >= 12){
12 | session = "PM";
13 | }else{
14 | session = "AM";
15 | }
16 |
17 | document.getElementById("displayDate").innerHTML = daylist[day] + ", " + month[today.getMonth()] + " " + today.getDate();
18 | document.getElementById("displayDateTime").innerHTML = date + " " + time + " " + session;
19 | }
20 | setInterval(displaytime, 10);
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | background-image: radial-gradient(circle farthest-corner at 12.3% 19.3%, rgb(245, 0, 0) 0%, rgb(241, 2, 2) 100.2%);
3 | overflow: hidden;
4 | }
5 | .container{
6 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
7 | color: white;
8 | position: absolute;
9 | top: 50%;
10 | right: 50%;
11 | transform: translate(50%, -50%);
12 | font-size: 60px;
13 | white-space: nowrap;
14 | text-align: center;
15 | }
16 | @media screen and (min-width: 480px) {
17 | .container{
18 | font-size: 40px;
19 | }
20 | }
--------------------------------------------------------------------------------