I've tried to search already where I've gone wrong and I'm just spinning my wheels trying to debug.
Goal is to pull from the system date, take the day numerical value and chose from an array list of 366 entries to match a famous birthday with whatever day the computer says it is.
System date comes up no problem but I can't figure out why Famous Date remains undefined I've attached a picture for a better visual.
HTML:
<html>
<head>
<!--
Filename:birthday.htm
-->
<title>Happy Birthday</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="js/functions.js"></script>
</head>
<body>
<div id="content">
<div id="pic">
<img src="image/logo.png" alt="happy birthday" />
</div>
<div id="star">
<p>Today is <br><span id="today"></span></p>
<p>Born today<br><span id="starBorn"></p>
<script type="text/javascript">
var date = showDate();
document.getElementById("today").innerHTML = date;
var famousBirthdate = showBirthDay(dayNumber());
document.getElementById("starBorn").innerHTML = famousBirthdate;
</script>
</div>
<!--opens the link in other window-->
<a href="#" rel="external" target="_blank">Enter</a><br><br>
</div>
</body>
</html>
** functions.js**
/*
Filename: function.js
Function List:
showDate
Used to display the date in the form "Weekday, Month Day, Year"
dayNumber
Used to calculate the day number (1 - 366) of a given date
showBirthDay
Used to display a famous birthday falling on a given date
*/
var births = [];
births[1] = "J.D. Salinger (1919) - Author";
births[2] = "Isaac Asimov (1920) - Author";
births[3] = "Clement Attlee (1883) - 42 Prime Minister";
births[4] = "Floyd Patterson (1935) - Heavyweight boxer";
births[5] = "King Camp Gillette (1855) - Invented safety razor";
//..................
births[352] = "Tommy Steele (1936) - Singer";
births[353] = "Cassius Clay (1942) - Heavyweight boxing champion";
births[364] = "Jude Law (1972) - Actor";
births[365] = "Rudyard Kipling (1865) - Author";
births[366] = "Bonnie Prince Charlie (1720) - Attempted to seize England";
function showDate() {
thisDate = new Date();
var thisWDay = thisDate.getDay();
var thisDay = thisDate.getDate();
var thisMonth = thisDate.getMonth();
var thisYear = thisDate.getFullYear();
var mName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var wdName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
return wdName[thisWDay] + ", " + mName[thisMonth] + " " + thisDay + ", " + thisYear;
}
function dayNumber() {
thisDate = new Date();
var leapYearDate = thisDate.setFullYear(2020);
var baseDate = new Date("January 1, 2023");
days = Math.floor((leapYearDate - baseDate) / (1000 * 60 * 60 * 24) + 1);
console.log(days);
return days;
}
function showBirthDay(dayNumber) {
return births[dayNumber];
Style.css not that it matters:
/*
Filename: style.css
*/
#content {
margin: 0 auto;
width: 50%;
background-color: #FEF943;
border: 2px solid black;
text-align: center;
}
#pic {
width: 100%;
margin-top: 20px;
}
#star {
padding: 20px;
margin: 40px;
background-color: #171f6d;
color: #FFFFFF;
/* box shadow */
-webkit-box-shadow: inset 0px 0px 0px 10px rgba(58, 57, 61, 1);
-moz-box-shadow: inset 0px 0px 0px 10px rgba(58, 57, 61, 1);
box-shadow: inset 0px 0px 0px 10px rgba(58, 57, 61, 1);
}
a {
color: blue;
}
Here's a screenshot
Pretty sure it's gone wrong here under functions.js:
function showBirthDay(dayNumber) {
return births[dayNumber];
but I have tried so many variables at this point the only thing I know if the current date and time work so it must be errored past that.
v.2.0
function showBirthDay(day) {
return births[day];
v3.0
function showBirthDay(days) {
return births[days];
v3.0
function showBirthDay(thisDate) {
return births[thisDate];
Appreciate any help anyone might be able to provide thank you all in advance either way for reading
