html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--
Created by Just@bit$mile
Edited for a question:
https://www.sololearn.com/Discuss/2756163/?ref=app
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Problem Code</title>
</head>
<body>
<section>
<div class="top">
<input type="date" autofocus id="date" value="2021-03-16">
<button class="button" >Calculate</button>
</div>
<div class="bottom">
<div class="box">
<h4 id="year">-</h3>
<span>Year</span>
</div>
<div class="box">
<h4 id="month">-</h3>
<span>Month</span>
</div>
<div class="box">
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Created by Just@bit$mile */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
-webkit-user-select: none;
user-select: none;
}
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #00f;
}
section {
position: relative;
width: 300px;
height: 270px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Created by Just@bit$mile
window.onload = () =>
{
// return reference(s) to HTML element(s)
const DOM = ( sel, plural ) =>
{
if( plural )
return document.querySelectorAll( sel );
return document.querySelector( sel );
}
// updates the content of #year, #month and #day
// based on #date value
const dateChangeHandler = () =>
{
const inputDate = new Date( DOM( "#date" ).value );
DOM( "#year" ).textContent = inputDate.getFullYear();
DOM( "#month" ).textContent = inputDate.getMonth() + 1;
DOM( "#day" ).textContent = inputDate.getDate();
}
// map dateChangeHandler to 'change' event of #date input
DOM( "#date" ).addEventListener ( 'change', dateChangeHandler );
// map dateChangeHandler to 'click' event of .button
DOM( ".button" ).addEventListener( "click", dateChangeHandler );
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run