I am trying to develop a simple web site where a user will input a date value XX/XX/XX and im gonna take only the month information to make my algorithm calculate how many days left till Christmas.
How can i do that(take only the month data out of input)?
let MyString = document.querySelector(".sss");
let exampleIn = document.querySelector('input[type="date"]');
MyString.innerHTML = exampleIn.value;
body{
background-color: black;
}
p{
color: white;
font-size: 30px;
}
button{
cursor: pointer;
height: 30px;
width: 100px;
}
input{
width: 300px;
text-align: center;
}
/*block style to my question*/
.block-Style{
display: block;
}
/*most outer flex content to my page*/
.most-outer-content{
display: flex;
flex-direction: column;
align-content: space-around;
flex-wrap: wrap;
gap:2rem 0rem;
}
/*inner contets*/
.answer{
display: flex;
justify-content: space-around;
margin: 5px;
}
.calculate-div-block{
display: flex;
justify-content: space-around;
margin: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Firs One</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='css8.css'>
<script src='8ex.js' defer></script>
</head>
<body>
<div class="block-Style">
<div class="most-outer-content">
<div class="my-question">
<p class="question-P">1) Write a JavaScript program to calculate the days left before Christmas.</p>
</div>
<div class="answer">
<input type="date" name="info" id="infId" value="" placeholder="Type your curretly date" min="1950-01-01" max="2030-12-31">
</div>
</div>
<div class="calculate-div-block">
<button type="button">Calculate</button>
</div>
<p id="sss"></p>
</div>
</body>
</html>
i was thinking that it would be easy like i have done so far, with only innerHTML(i know that there some problems in using innerHTML, but im just using it for debuggig matters)