I need to do a HTML page using HTML form and JavaScript in which person enters their birth date in form dd.mm.yyyy. When the person clicks "Check" button, the program calculates his age and prints it as a year (like 32). (Rounding to the nearest year, upwards or backwards).
Rules are:
The input field is not allowed to be empty; it should include only numbers; the length of the value must be right; dd must be between 1-31; mm between 1-12 and yyyy between 1900 and 2019.
Here is my code so far and it it not working (I have not got more far yet). How could I improve this?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Check your age</title>
</head>
<style>
</style>
<script>
function check(){
let data = "dd/mm/yyyy";
let x = data.split("/");
if(x.value == "" || x.value == null || isNaN(data) || dd < 1 || dd > 31 || mm < 1 || mm > 12 || yyyy < 1900 || yyyy > 2019){
alert("Give a proper birth day!");
return false;
}
return true;
}
</script>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
<Date of birth : <input type="text" value="" id="dateofbirth" name="time" onclick="check()"/>
</form>
<button onclick="check();">Check the age</button>
</body>
</html>
You can use date input to get the date from the user. Once you get the value, you can then compare the difference in years and month from today's date.
var dob = document.getElementById('dateofbirth');
function check() {
var today = new Date();
var birthDate = new Date(dob.value);
var y = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
console.log(`${y} years and ${m} months`);
}
Date of birth : <input type="date" value="" id="dateofbirth" name="time" />
<button onclick="check();">Check the age</button>
I made one of these before. Here is the code which is functional and figures the age in years, months and days. It greets you as "Jesus" if you type in all zeros - feel free to use.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<meta charset="utf-8" />
<title>Age Calculator</title>
</head>
<body>
<style>
body {
background-image: url('cake.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
h1 {
font-family: 'Acme', sans-serif;
}
</style>
<script>
//document.body.style.backgroundImage = "url('../images/cake.jpg')";
//document.getElementById("myDiv").style.backgroundImage = "url('images/cake.jpg')";
let birthYear = prompt("Enter Your Birth Year");
let birthMonth = prompt("Enter Your Birth Month (As A Number)");
let birthDay = prompt("Enter Your Birth Day");
let date = new Date();
let currentYear = date.getFullYear();
let currentMonth = date.getMonth() + 1;
let currentDay = date.getDate();
let yearAge = currentYear - birthYear;
let monthAge = currentMonth - birthMonth;
let dayAge = currentDay - birthDay;
let monthPluralizer = "";
let dayPluralizer = "";
if (monthAge === 1) {
monthPluralizer = "Month";
} else {
monthPluralizer = "Months";
}
if (dayAge === 1) {
dayPluralizer = "Day";
} else {
dayPluralizer = "Days";
}
if (currentMonth < birthMonth) {
monthAge = monthAge + 12;
yearAge = yearAge - 1;
}
if (currentDay < birthDay) {
monthAge = monthAge - 1;
if (currentMonth === 1 || 3 || 5 || 7 || 8 || 10 || 12) {
dayAge = dayAge + 31;
} else if (currentMonth === 4 || 6 || 9 || 11) {
dayAge = dayAge + 30;
} else if (currentMonth === 2) {
dayAge = dayAge + 28;
}
}
if (currentMonth == birthMonth && currentDay < birthDay) {
monthAge = monthAge + 12;
yearAge = yearAge - 1;
}
document.write("<h1><p>Your Birth Date Is " + birthMonth + "/" + birthDay + "/" + birthYear + "</p></h1><br>");
document.write("<h1><p>Today's Date Is " + currentMonth + "/" + currentDay + "/" + currentYear + "</p></h1><br>");
document.write("<h1><p>You Are " + yearAge + " Years, " + monthAge + " " + monthPluralizer + " & " + dayAge +
" " + dayPluralizer + " Old.</p></h1><br>");
if (birthMonth == 0 && birthDay == 0 && birthYear == 0 ) {
document.write("<h1><p>Hello Jesus!<p></h1>")
} else if (birthMonth === null && birthDay === null && birthYear === null ) {
document.write("<h1><p>Hello Jesus!<p></h1>")
}
</script>
</body>
</html>
Related
I would like to get the following script to run when the window first loads.
var now = newDate();
var years = now.getFullYear();
var month = now.getMonth();
var days = now.getDate();
month = month +1;
var today = days + "." + month + "." + years;
var checkdate = 11.05.2020;
if (today >= checkdate)
{
alert("Today is the day");
document.location.href="today.html";
}
else
{
alert("Today is " + today);
}
Please help.
Try this.
function myFunction() {
var now = new Date();
var years = now.getFullYear();
var month = now.getMonth();
var days = now.getDate();
var today = days + "." + month + "." + years;
var checkdate = "11.05.2020";
if (today >= checkdate) {
alert("Today is the day");
document.location.href = "today.html";
} else {
alert("Today is " + today);
}
}
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
run the code after the page has been loaded
$(function() {
// ...Code goes here
});
or
$(document).ready(function() {
// ...Code goes here
});
Here is the code, i can't get an image of a cake on the body, or the entired html. I've tried HTML like body background, I've tried style , and I've tried js, nothing works. Funny thing, I've tested the image on other pages, loads fine. I've also tried modifying the background color using html, css, js, they all work fine. But the damn image won't load. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Age Calculator</title>
</head>
<body>
<style>
#myDiv {
background-image: url('images/cake.png');
background-size: cover;
}
</style>
<div id="myDiv">
<script>
//document.body.style.backgroundImage = "url('images/cake.jpg')";
//document.getElementById("myDiv").style.backgroundImage = "url('images/cake.jpg')";
let birthYear = prompt("Enter Your Birth Year");
let birthMonth = prompt("Enter Your Birth Month (As A Number)");
let birthDay = prompt("Enter Your Birth Day");
let date = new Date();
let currentYear = date.getFullYear();
let currentMonth = date.getMonth() + 1;
let currentDay = date.getDate();
let yearAge = currentYear - birthYear;
let monthAge = currentMonth - birthMonth;
let dayAge = currentDay - birthDay;
let monthPluralizer = "";
let dayPluralizer = "";
if (monthAge === 1) {
monthPluralizer = "Month";
} else {
monthPluralizer = "Months";
}
if (dayAge === 1) {
dayPluralizer = "Day";
} else {
dayPluralizer = "Days";
}
if (currentMonth < birthMonth) {
monthAge = monthAge + 12;
yearAge = yearAge - 1;
}
if (currentDay < birthDay) {
monthAge = monthAge - 1;
if (currentMonth === 1 || 3 || 5 || 7 || 8 || 10 || 12) {
dayAge = dayAge + 31;
} else if (currentMonth === 4 || 6 || 9 || 11) {
dayAge = dayAge + 30;
} else if (currentMonth === 2) {
dayAge = dayAge + 28;
}
}
if (currentMonth == birthMonth && currentDay < birthDay) {
monthAge = monthAge + 12;
yearAge = yearAge - 1;
}
document.write("<p>Your Birth Date Is " + birthMonth + "/" + birthDay + "/" + birthYear + "</p><br>");
document.write("<p>Today's Date Is " + currentMonth + "/" + currentDay + "/" + currentYear + "</p><br>");
document.write("<p>You Are " + yearAge + " Years, " + monthAge + " " + monthPluralizer + " & " + dayAge +
" " + dayPluralizer + " Old.</p><br>");
if (birthMonth == 0 && birthDay == 0 && birthYear == 0 ) {
document.write("<p>Hello Jesus!<p>")
} else if (birthMonth === null && birthDay === null && birthYear === null ) {
document.write("<p>Hello Jesus!<p>")
}
</script>
</div>
</body>
</html>
Your image path is wrong.
Try This:
#myDiv {
background-image: url('./images/cake.png');
background-size: cover;
}
If don't work let me know
You can read more about the HTML Paths here and see another post like yours in this question here
Your image path is not correct and you should change the path. you can see how to define the path in here
This is the current code I'm using for my clock (from a tutorial), and I'm wondering if there is a way to make the time appear above the date?
function renderTime(){
// Date
var mydate = new Date();
var year = mydate.getYear();
if(year < 1000){
year +=1900;
}
var day = mydate.getDay();
var month = mydate.getMonth();
var daym = mydate.getDate();
var dayarray = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var montharray = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
// Date End
// Time
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if( h == 24){
h = 0;
}
else if(h > 12){
h = h - 0;
}
// adding 0 infront of single digit values
if(h < 10){
h = "0" + h;
}
if(m < 10){
m = "0" + m;
}
if(s < 10){
s = "0" + s;
}
var myClock = document.getElementById("clockDisplay");
myClock.textContent = "" +dayarray[day]+ " " +montharray[month] + " " +daym+ " " +h+ ":" +m+ ":" +s;
myClock.innerText = "" +dayarray[day]+ " " +montharray[month] + " " +daym+ " " +h+ ":" +m+ ":" +s;
setTimeout("renderTime()", 1000);
// Time End
}
renderTime();
I'm not sure about what .textContent and .innerText does myself - I'm a beginner. HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body onLoad="renderTime()">
<div id="clockDisplay" class="container"></div>
</body>
<html>
CSS:
.container {
font-family: verdana;
font-weight: normal;
color: #000000;
text-align: right;
font-size: 20px;
}
I am trying to set Label text property based on the selection of dropdownlist data. I have a label control which stores current date and I am selecting number of days from dropdownlist to be added with current date and display the new date within another label control. While doing this I am getting
Uncaught ReferenceError: findDate is not defined.
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript">
function findDate() {
var selectvalid = $("select[id$=ddlvalid]").val();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 7);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
$("span[id$=lblenddt]").text(output);
}
else if (selectvalid == "Upto 15 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 15);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById("<%=lblenddt.ClientID%>").innerHTML = output;
}
else if (selectvalid == "Upto 30 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 30);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById("<%=lblenddt.ClientID%>").innerHTML = output;
}
};
window.onload = function() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById("<%=lblenqmdon.ClientID%>").innerHTML = output;
};
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Enquiry Made On:</td>
<td>
<label id="lblenqmdon" runat="server"></label>
</td>
</tr>
<tr>
<td>Enquiry Validity:</td>
<td><asp:DropDownList ID="ddlvalid" runat="server" ClientIDMode="static" onchange="javascript:findDate();">
<asp:ListItem>Select Validity</asp:ListItem>
<asp:ListItem>Upto 7 Days</asp:ListItem>
<asp:ListItem>Upto 15 Days</asp:ListItem>
<asp:ListItem>Upto 30 Days</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Enquiry Valid Upto:</td>
<td>
<label id="lblenddt" runat="server" ClientIDMode="static"></label>
</td>
</tr>
</table>
</asp:Content>
Please guide me where I am doing wrong?
Simply define a function findDate in javascript you have written $(function findDate() change it to function findDate() also you don't need to bind onchange again in javascript code you have already binded this in dropdown html onchange="javascript:findDate();"
function findDate() {
var selectvalid = $("#ddlvalid option:selected").text();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 7);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById("<%=lblenddt.ClientID%>").value = output;
}
else if (selectvalid == "Upto 15 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 15);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById("<%=lblenddt.ClientID%>").innerHTML = output;
}
else if (selectvalid == "Upto 30 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 30);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById("<%=lblenddt.ClientID%>").innerHTML = output;
}
}
window.onload = function() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById("<%=lblenqmdon.ClientID%>").innerHTML = output;
};
});
Edit
You have so set ClientIDMode="static" on dropdown and label to be found by javascript by exact id
I am having two Label controls and a dropdownlist on my web form. I am displaying current date in Label1 and I want to display Expiry Date in Label2 based on selection of dropdownlist. What I am trying to do is I want to display expiry date within Label2 on selecting data from dropdownlist i.e. if "Upto 7 Days" then 7Days will be added to current date and the new date will be displayed within Label2.
My aspx page-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
$("#ddlvalid").change(function () {
var selectvalid = $("#ddlvalid option:selected").text();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 7;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
else if (selectvalid == "Upto 15 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 15;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
else if (selectvalid == "Upto 30 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 30;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
});
window.onload = function show() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById('lblenqmdon').innerHTML = output;
};
</script>
<body>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Enquiry Made On:</td>
<td>
<label id="lblenqmdon" runat="server"></label>
</td>
</tr>
<tr>
<td>Enquiry Validity:</td>
<td><asp:DropDownList ID="ddlvalid" runat="server">
<asp:ListItem>Select Validity</asp:ListItem>
<asp:ListItem>Upto 7 Days</asp:ListItem>
<asp:ListItem>Upto 15 Days</asp:ListItem>
<asp:ListItem>Upto 30 Days</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Enquiry Valid Upto:</td>
<td>
<label id="lblenddt" runat="server"></label>
</td>
</tr></table>
</div></body>
</html>
My Javascript code is not working. Please guide me where I am doing wrong?
Try This
<script type="text/javascript">
function findDate() {
var selectvalid = document.getElementById("<%=ddlvalid.ClientID %>").value;
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 7;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
else if (selectvalid == "Upto 15 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 15;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
else if (selectvalid == "Upto 30 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 30;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
}
</script>
<script type="text/javascript">
window.onload = function () {
getDate();
};
function getDate() {
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth() + 1;
var year = dt.getFullYear();
document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
</script>
AND in Form
<asp:DropDownList ID="ddlvalid" runat="server" onchange="javascript:findDate();">
<asp:ListItem>Select Validity</asp:ListItem>
<asp:ListItem>Upto 7 Days</asp:ListItem>
<asp:ListItem>Upto 15 Days</asp:ListItem>
<asp:ListItem>Upto 30 Days</asp:ListItem>
</asp:DropDownList>
I managed to do the same like this-$(function () {
<script type="text/javascript">
$("#ddlvalid").change(function () {
var selectvalid = $("#ddlvalid option:selected").text();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 7);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
else if (selectvalid == "Upto 15 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 15);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
else if (selectvalid == "Upto 30 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 30);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
});
window.onload = function show() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById('lblenqmdon').innerHTML = output;
};
});
</script>