Age Calculator not working correctly HTML, JS
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
So, I made a age calculator which tells how much old are you and when is your next birthday how many minutes, hours, weeks, days, old are you. But it is not working correctly I made it using HTML, CSS, and JS. I guess it is a JS error.
If you can ix it or make it better pls tell
Any suggestions would be thankful!
HTML and JS:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<link rel=”shortcut icon” href=”../Img/cake (2).png” type=”image/x-icon”>
<title>Age</title>
</head>
<body>
<input type=”text” value=”18″ autocomplete=”on” placeholder=”Date (dd)” name=”dd” id=”dd”>
<input type=”text” value=”08″ autocomplete=”on” placeholder=”Month (mm)” name=”mm” id=”mm”>
<input type=”text” value=”2004″ autocomplete=”on” placeholder=”Year (yyyy)” name=”yy” id=”yy”>
<button onclick=”ds()”>Submit</button>
<span class=”box”></span>
<h1 class=”ag”>Age</h1>
<p id=”yr”>17</p>
<h2 class=”yr”>years</h2>
<h3 class=”mn”>months |</h3>
<h3 class=”dd”>days</h3>
<span class=”nb”></span>
<h2 class=”nb”>Next Birthday</h2>
<div class=”b2″><img src=”../Img/cake.png” alt=””></div>
<h3 class=”mn2″>months</h3>
<h2 class=”sum”>Summary</h2>
<h4 class=”y2″>Years</h4>
<h4 class=”mn1″>Months</h4>
<h4 class=”wk”>Weeks</h4>
<h4 class=”dd2″>Days</h4>
<h4 class=”hr”>Hours</h4>
<h4 class=”mi”>Minutes</h4>
<p id=”m2″>10</p>
<p id=”d2″>21</p>
<p id=”yr2″>17</p>
<p id=”mn”>214</p>
<p id=”wk”>933</p>
<p id=”dy”>6534</p>
<p id=”hr”>156816</p>
<p id=”mi”>9408960</p>
<p id=”ndy”>Thursday</p>
<p id=”nmn”>1</p>
</span>
<script>
function ds() {
var dd = document.getElementById(“dd”).value;
var mm = document.getElementById(“mm”).value – 1;
var yy = document.getElementById(“yy”).value;
var d = new Date(yy, mm, dd);
var e = new Date()
var f = e – d
var g = new Date(f)
var d2 = g.getDay() //Age Date
var m2 = g.getMonth() //Age Month
with(Math) {
var sec = round(f / 1000)
var mi = round(sec / 60) //Minute
var hr = round(mi / 60) //Hour
var yr = round(mi / 525600) //Year
var mn = round(mi / 43800) //Month
var wk = round(mi / 10080) //Week
var dy = round(mi / 1440) //Day
}
var nyr = new Date(2023, mm, dd); //Next year’s birthday
var weekday = [“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”]; // Days
var ndy = weekday[nyr.getDay()]; //Day on birthday next year
var em = 12 – e.getMonth()
var dm = nyr.getMonth()
var nmn = (em + dm) – 1 //Month on birthday next year
document.getElementById(“yr”).innerHTML = yr;
document.getElementById(“m2”).innerHTML = m2;
document.getElementById(“d2”).innerHTML = d2;
document.getElementById(“yr”).innerHTML = yr;
document.getElementById(“yr2”).innerHTML = yr;
document.getElementById(“mn”).innerHTML = mn;
document.getElementById(“wk”).innerHTML = wk;
document.getElementById(“dy”).innerHTML = dy;
document.getElementById(“hr”).innerHTML = hr;
document.getElementById(“mi”).innerHTML = mi;
document.getElementById(“ndy”).innerHTML = ndy;
document.getElementById(“nmn”).innerHTML = nmn;
}
</script>
</body>
</html>
CSS:
@import url(‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap’);
* {
padding: 0;
font-weight: normal;
margin-left: 10px;
}
body {
background-color: #202124;
color: #fff;
font-family: ‘Roboto’, sans-serif;
}
input[type=”text”] {
background-color: #202124;
border: 3px solid rgb(124, 225, 243);
border-radius: 35px;
height: 30px;
width: 70px;
text-align: center;
color: white;
margin-top: 15px;
}
input::placeholder {
color: rgb(216, 216, 216);
position: relative;
left: 10px;
}
button {
background-color: #202124;
color: lightgreen;
border: 3px solid lightgreen;
width: 100px;
height: 35px;
border-radius: 35px;
transition: 0.5s ease;
font-weight: bold;
cursor: pointer;
}
button:hover {
background-color: lightgreen;
color: #202124;
}
.ag {
font-size: 40px;
font-weight: normal;
}
p#yr {
position: absolute;
font-size: 67px;
font-weight: 300;
top: 70px;
left: 20px;
color: #fff984;
}
.yr {
position: absolute;
font-weight: normal;
left: 110px;
top: 150px;
}
.nb {
position: absolute;
color: #fff984;
font-weight: normal;
font-size: 20px;
top: 75px;
left: 210px;
}
.mn {
position: absolute;
top: 200px;
left: 36px;
}
.dd {
position: absolute;
top: 200px;
left: 140px;
}
p#ndy {
position: absolute;
left: 234px;
top: 170px;
font-size: 20px;
}
.b2 {
position: absolute;
height: 60px;
width: 60px;
top: 120px;
left: 240px;
border-radius: 50%;
background-color: #fff984;
}
img {
position: absolute;
top: 7px;
width: 40px;
}
p#m2 {
position: absolute;
font-size: 18px;
top: 202px;
left: 12px;
color: #fff984;
}
p#d2 {
position: absolute;
font-size: 18px;
top: 202px;
left: 115px;
color: #fff984;
}
.mn2 {
position: absolute;
left: 245px;
top: 200px;
}
p#nmn {
position: absolute;
top: 206px;
left: 222px;
color: #fff984;
}
.sum {
position: absolute;
top: 260px;
left: 140px;
color: #fff984;
}
.y2 {
position: absolute;
top: 310px;
left: 42px;
font-size: 19px;
}
p#yr2 {
position: absolute;
top: 320px;
left: 42px;
font-size: 40px;
color: #fff984;
}
.mn1 {
position: absolute;
top: 310px;
left: 158px;
font-size: 19px;
}
p#mn {
position: absolute;
top: 320px;
left: 155px;
font-size: 40px;
color: #fff984;
}
.wk {
position: absolute;
top: 310px;
left: 290px;
font-size: 19px;
}
p#wk {
position: absolute;
top: 320px;
left: 286px;
font-size: 40px;
color: #fff984;
}
.dd2 {
position: absolute;
top: 410px;
left: 45px;
font-size: 19px;
}
p#dy {
position: absolute;
top: 435px;
left: 31px;
font-size: 30px;
color: #fff984;
}
.hr {
position: absolute;
top: 410px;
left: 165px;
font-size: 19px;
}
p#hr {
position: absolute;
top: 435px;
left: 138px;
font-size: 30px;
color: #fff984;
}
.mi {
position: absolute;
top: 410px;
left: 285px;
font-size: 19px;
}
p#mi {
position: absolute;
top: 435px;
left: 262px;
font-size: 30px;
color: #fff984;
}
أضف إجابة