Can't get a background image on my HTML/JS page - javascript

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

Related

Add days in a date with Jquery

I need add days in dates inside an array, like the image below:
When select show Semanal (weekly), add 7 days on each date, but my code is adding the same day on all subsequent dates:
var number_installments = 10, frequency = 1;
for(let i = 1; i <= number_installments; i++){
// console.log('Frequencia: ' + frequency)
let data = new Date();
let dia = data.getDate(), mes = data.getMonth(), ano = data.getFullYear(), zero = '';
if((mes + i) <= 9){
zero = '0';
}
let due_date = dia + '/' + zero + (mes + i) + '/' + ano;;
//console.log(i)
if(frequency == 1 && i != 1){
dia = data.getDate() + 7;
due_date = dia + '/' + zero + (mes + 1) + '/' + ano;
}
console.log(due_date);
}
This is because you have initialised your "data" object in every iteration which will only give the current date and day. Which after adding 7 results the same.
May be that comes from data externally.
let data = new Date();
Instead of getting date like that you can use,
var today = date.toJSON().slice(0,10)
which would result in the full date. It would make your code simpler to read and change.
I managed to solve with the help of Abhay H Soningra
var number_installments = 10, frequency = 1;
let data = new Date();
let dia = data.getDate(), mes = data.getMonth(), ano = data.getFullYear(), zero = '0', max_days, max_months = 12;
if(dia % 2 == 0){
max_days = 31;
} else{
max_days = 30;
}
for(let i = 1; i <= number_installments; i++){
// console.log('Frequencia: ' + frequency)
if((mes + i) <= 9){
zero = '0';
}
let due_date = dia + '/' + zero + (mes + i) + '/' + ano;;
//console.log(i)
if(frequency == 1 && i != 1){
dia = dia + 7;
if(dia > max_days){
mes = mes + 1;
dia = data.getDate();
}
if((mes + 1) > max_months){
mes = data.getMonth();
ano = ano + 1;
}
due_date = dia + '/' + zero + (mes + 1) + '/' + ano;
}
console.log(due_date);
}

Calculating age and checking that values are ok

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>

How to replace a variable

i need to quit the zero of the value of mes1 mes2 and mes3 if the result is 010, 011 or 012
but when i use an if and run an alert of the new var the result is undefined
this is the function:
function getImpuestos() {
$.getJSON("https://soa.afip.gob.ar/av/v1/vencimientos/"+$("#cuit").val()+"", function(result){
for (var i = 0; i < result.data.length; i++) {
var fecha = result.data[i].vencimiento;
var periodo = fecha.substr(0,7);
var dt = new Date();
var year = dt.getFullYear();
var mes1 = year + "-0" + (dt.getMonth()+1);
var mes2 = year + "-0" + (dt.getMonth()+2);
var mes3 = year + "-0" + (dt.getMonth()+3);
if(mes1 > 7){
var mes1 = year + "-" + (dt.getMonth()+1);
}else if(mes2 > 7){
var mes2 = year + "-" + (dt.getMonth()+2);
}else if(mes3 > 7){
var mes3 = year + "-" + (dt.getMonth()+3);
}
if(periodo == mes1 || periodo == mes2 || periodo == mes3) {
$(".fa-spinner").css("display", "block");
$("#textobusqueda").css("display", "block");
console.log(result.data[i].idImpuesto);
alert(mes5);
buscarImpuesto(result.data[i].idImpuesto, result.data[i].vencimiento, result.data[i].tipoOperacion, periodo);
}
}
});
}
<label style="color:black" class="control-label">Ingresar CUIT Empresa</label>
<input id="cuit" type="text" class="form-control" onkeyup="searchCliente();">
You can use string.padStart instead of ifs:
var mes1 = year + "-" + (dt.getMonth()+1).padStart(2, "0");
var mes2 = year + "-" + (dt.getMonth()+2).padStart(2, "0");
var mes3 = year + "-" + (dt.getMonth()+3).padStart(2, "0");
And of course change mes5 in alert to something different.

JS AM/PM times always show AM

I am making a simple time calculator in javascript. I have converted the times into 12-hour instead of 24 hour time for simplicity, however the code I have for calculating am/pm always shows am. Any reason why this would be happening?
Here is my code:
function solveTime(x) {
var suffixSolve = (utcHours + x) % 24;
var suffix = "am";
if (utcHours > 12) {
var suffix = "pm";
}
if (utcMinutes == 0) {
utcMinutesLead = "00";
}
if (utcMinutes < 10) {
utcMinutesLead = "0" + utcMinutes;
}
var timeSolve = (((utcHours + x) + 11) % 12 + 1);
var timeTotal = timeSolve + ":" + utcMinutesLead + " " + suffix;
var utcMod = x;
if (utcMod > 0) {
utcMod = "+" + utcMod;
}
document.getElementById(x).innerHTML = "(UTC" + utcMod + ") " + timeTotal;
}
and here is the code behind utcHours
var masterTimeUTC = new Date();
var utcHours = masterTimeUTC.getUTCHours();
var utcMinutes = masterTimeUTC.getUTCMinutes();
var utcSeconds = masterTimeUTC.getUTCSeconds();
var utcMinutesLead = masterTimeUTC.getUTCMinutes();
Example here: http://codepen.io/markgamb/pen/gwGkbo
The issue is you should be checking whether suffixSolve is greater than 12 instead of utcHours, because utcHours does not change due to the value of x. Since you can shift the hours forward and backwards, I created a variable shift to handle that.
function solveTime(x) {
if (x < 0) {
var shift = 24 + x;
} else {
var shift = x;
}
var suffixSolve = (utcHours + shift) % 24;
var suffix = "am";
if (suffixSolve > 12) {
suffix = "pm";
}
if (utcMinutes == 0) {
utcMinutesLead = "00";
}
if (utcMinutes < 10) {
utcMinutesLead = "0" + utcMinutes;
}
var timeSolve = (((utcHours + x) + 11) % 12 + 1);
var timeTotal = timeSolve + ":" + utcMinutesLead + " " + suffix;
var utcMod = x;
if (utcMod > 0) {
utcMod = "+" + utcMod;
}
document.getElementById(x).innerHTML = "(UTC" + utcMod + ") " + timeTotal;
}
var masterTimeUTC = new Date();
var utcHours = masterTimeUTC.getUTCHours();
var utcMinutes = masterTimeUTC.getUTCMinutes();
var utcSeconds = masterTimeUTC.getUTCSeconds();
var utcMinutesLead = masterTimeUTC.getUTCMinutes();
solveTime(4);
solveTime(0);
solveTime(-8);
<div id="4"></div>
<div id="-8"></div>
<div id="0"></div>

How to set Label Text property based on data selection from DropDownlist using Javascript in Asp.net

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>

Categories