HTML Issues

trewyn15 · Apr 10, 2013

Hey guys, I'm having more trouble in the class that I had the Javascript issue in..

This calendar is supposed to show the date that is entered and bold that specific day.

Here is the assignment:

Here is my current code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendar - Trewyn</title>
</head>
<body>
<script type="text/javascript">
daysOfWeek  = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
daysInMonth  = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthsOfYear  = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October', 'November', 'December'];
currentDate  = new Date(); 
function Calendar(month, year) 
{
this.month = (isNaN(month) || month == null) ? currentDate .getMonth() : month;
this.year  = (isNaN(year) || year == null) ? currentDate .getFullYear() : year;
this.html = '';
}
Calendar.prototype.generateHTML = function()
{
  var firstDayOfMonth = new Date(this.year, this.month, 1);
  var startingDayOfMonth = firstDayOfMonth.getDay();
  var numberOfDaysInMonth = daysInMonth [this.month];
  if (this.month == 1) { // only for february
  if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0)
  {
  numberOfDaysInMonth = 29
  }
}
  var nameOfMonth = monthsOfYear [this.month]
  var html = '<table class="calendar-table">';
  html += '<tr><th colspan="7">';
  html +=  nameOfMonth + "&nbsp;" + this.year;
  html += '</th></tr>';
  html += '<tr class="calendar-header">';
  for(var i = 0; i <= 6; i++ )
  {
  html += '<td class="calendar-header-day">';
  html += daysOfWeek [i];
  html += '</td>';
  }
  html += '</tr><tr>';
  var day = 1;
  for (var i = 0; i < 9; i++) 
  {
    for (var j = 0; j <= 6; j++) 
    { 
      html += '<td class="calendar-day">';
      if (day <= numberOfDaysInMonth && (i > 0 || j >= startingDayOfMonth)) 
      {
      html += day;
      day++;
      }
      html += '</td>';
    }
    if (day > numberOfDaysInMonth) {
    break;
    } 
    else {
    html += '</tr><tr>';
    }
  }
  html += '</tr></table>';
  this.html = html;
}
Calendar.prototype.getHTML = function() {
return this.html;
}
function printCalendar(month, year, day)
{
var cal = new Calendar(month, year);
cal.generateHTML();
document.write(cal.getHTML());
}
function getInput()
{
var currentYear = document.getElementById("year").value;
var currentMonth = document.getElementById("month").value;
var currentDay = document.getElementById("day").value;
printCalendar(currentMonth, currentYear);
}
</script>
<form>
Day:&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="day" name="day"/> (1-31)<br/>
Month: <input type="text" id="month" name="month"/> (1-12)<br/>
Year:&nbsp;&nbsp; <input type="text" id="year" name="year"/> (4-Digits) <br/>
<input type="button" value="Submit" onclick="getInput()" /> <br/>
</form>
<br/>&nbsp;All values must be given 
within the limits of the numbers specified to the right of each text box, or the input will be 'undefined'.
</body>
</html>

I have most of it down, but I'm not sure how exactly to make the day that is typed in, bold.

Any help or hints would be greatly appreciated!

Cromewell · Apr 10, 2013

When you are generating the html table with days of the month in each cell, check if the day you are working on matches what was entered. If it does, wrap it in your tag of choice bold it, probably <b> for simplicity, but there are lots of "better" options.

trewyn15 · Apr 10, 2013

Okay, now I think I'm having trouble displaying December and various other months also

Cromewell · Apr 10, 2013

Arrays start at 0. When you are taking the input number from the user you have to account for the difference. 12 to me means the 12th element (i.e. December) but to your array, it means the 13th element because January is the 0th.

edit:

There are other things you could do as well, they may go beyond your assignment though.

If I say give me the 13th month, what do I actually mean? Maybe it's an error, but you could interpret it as asking for January of the next year. Or what if I want a day beyond the end of the month?

On the other hand, maybe just spit out an error instead

trewyn15 · Apr 11, 2013

I see what you're saying there but I think that would be going a bit beyond the point of this assignment, he's just keeping it basic for now, without teaching us... this program has basically been learn on my own and it's way over my head, thanks to a friend tho i've been able to get fairly far on it.

So would you say that I should change my code to this to work correctly for the months?

<script type="text/javascript">
daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
daysInMonth = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthsOfYear = ['Blank', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October', 'November', 'December'];
currentDate = new Date();
function Calendar(month, year)
{

The first couple of months were messed up also, so I think that is probably that reason.

I still don't fully understand the bolding either lol

trewyn15 · Apr 11, 2013

I got that to work, but now December is showing the days for November, November the days for October and so on... Not sure why that is..

Cromewell · Apr 11, 2013

With the change you put in I am getting the right days for the month but the start day for the month is wrong.

For example, I picked April 2013 and it's showing me the 1st was a Wednesday. Which is next months....

trewyn15 · Apr 11, 2013

Cromewell said:
With the change you put in I am getting the right days for the month but the start day for the month is wrong.

For example, I picked April 2013 and it's showing me the 1st was a Wednesday. Which is next months....

Exactly, that's what I meant, I think I worded it wrong

I'm not sure why it's doing that, I feel like it's something I'm just overlooking but I can't find it right now

Cromewell · Apr 11, 2013

The fix is really quite simple. It's the same root cause as the other problem just in the opposite order

With your other fix in mind, this line is one possible spot to fix it.
var firstDayOfMonth = new Date(this.year, this.month, 1);

To bold the day entered, you'll need to provide the day that was entered to your generate html function. Once you do that it's a fairly easy thing to do as well

Just because I hate things that rewrite my entire page, try this out. I've only changed the display behaviour, the rest of the code is yours.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendar - Trewyn</title>
</head>
<body>
<script type="text/javascript">
daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
daysInMonth = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthsOfYear = ['Blank', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October', 'November', 'December'];
currentDate  = new Date(); 
function Calendar(month, year) 
{
this.month = (isNaN(month) || month == null) ? currentDate .getMonth() : month;
this.year  = (isNaN(year) || year == null) ? currentDate .getFullYear() : year;
this.html = '';
}
Calendar.prototype.generateHTML = function()
{
  var firstDayOfMonth = new Date(this.year, this.month, 1);
  var startingDayOfMonth = firstDayOfMonth.getDay();
  var numberOfDaysInMonth = daysInMonth [this.month];
  if (this.month == 1) { // only for february
  if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0)
  {
  numberOfDaysInMonth = 29
  }
}
  var nameOfMonth = monthsOfYear [this.month]
  var html = '<table class="calendar-table">';
  html += '<tr><th colspan="7">';
  html +=  nameOfMonth + "&nbsp;" + this.year;
  html += '</th></tr>';
  html += '<tr class="calendar-header">';
  for(var i = 0; i <= 6; i++ )
  {
  html += '<td class="calendar-header-day">';
  html += daysOfWeek [i];
  html += '</td>';
  }
  html += '</tr><tr>';
  var day = 1;
  for (var i = 0; i < 9; i++) 
  {
    for (var j = 0; j <= 6; j++) 
    { 
      html += '<td class="calendar-day">';
      if (day <= numberOfDaysInMonth && (i > 0 || j >= startingDayOfMonth)) 
      {
      html += day;
      day++;
      }
      html += '</td>';
    }
    if (day > numberOfDaysInMonth) {
    break;
    } 
    else {
    html += '</tr><tr>';
    }
  }
  html += '</tr></table>';
  this.html = html;
}
Calendar.prototype.getHTML = function() {
return this.html;
}
function printCalendar(month, year, day)
{
var cal = new Calendar(month, year);
cal.generateHTML();
var output = document.getElementById("output");
output.innerHTML = cal.getHTML();
}
function getInput()
{
var currentYear = document.getElementById("year").value;
var currentMonth = document.getElementById("month").value;
var currentDay = document.getElementById("day").value;
printCalendar(currentMonth, currentYear);
}
</script>
<form>
Day:&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="day" name="day"/> (1-31)<br/>
Month: <input type="text" id="month" name="month"/> (1-12)<br/>
Year:&nbsp;&nbsp; <input type="text" id="year" name="year"/> (4-Digits) <br/>
<input type="button" value="Submit" onclick="getInput()" /> <br/>
</form>
<br/>&nbsp;All values must be given 
within the limits of the numbers specified to the right of each text box, or the input will be 'undefined'.
<div id="output"></div>
</body>
</html>

trewyn15 · Apr 11, 2013

I like the new display

I see what you're saying with this line:

var firstDayOfMonth = new Date(this.year, this.month, 1);

I tried changing it a couple of times to:

var firstDayOfMonth = new Date(this.year, this.month, 0);

and

var firstDayOfMonth = new Date(this.year, this.month, 2);

But that didn't seem to help anything, I'm not sure if I'm missing the concept, but I thought since the number was changing above that it should also do so below?

This part has me stumped lol

Cromewell · Apr 11, 2013

The data object has 0 indexed months as well. Since your month is now 1 higher than expect, how might you solve that?

trewyn15 · Apr 11, 2013

I'm gonna be mad when I figure this out because I feel like it's extremely easy lol

I thought it may be this:

Code:

Calendar.prototype.generateHTML = function()
{
  var firstDayOfMonth = new Date(this.year, this.month, 2);
  var startingDayOfMonth = firstDayOfMonth.getDay();
  var numberOfDaysInMonth = daysInMonth [this.month];
  if (this.month == 2) {
  if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0)
  {

I then tried this which pushes it 2 months off, so December is showing October, I think I'm on the right path I just don't understand why it's making these weird changes lol

Code:

Calendar.prototype.generateHTML = function()
{
  var firstDayOfMonth = new Date(this.year, this.month, 0);
  var startingDayOfMonth = firstDayOfMonth.getDay();
  var numberOfDaysInMonth = daysInMonth [this.month];
  if (this.month == 0) {
  if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0)
  {

Cromewell · Apr 11, 2013

You're making it too hard for yourself.

var firstDayOfMonth = new Date(this.year, this.month - 1, 1);

trewyn15 · Apr 11, 2013

Thank you so much... you're right, I do tend to over think everything I do when it comes to coding, which is why I'm bad at it and not a huge fan of it lol

That works perfect!

Now just to get the bolding of the day to work, which I'm probably overthinking also lol

trewyn15 · Apr 12, 2013

With the help of a classmate I found the method he used to get it bold, but it's still not showing bold for me for some reason... it's right at the end of the table design:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendar - Trewyn</title>
</head>
<body>
<script type="text/javascript">
daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
daysInMonth = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthsOfYear = ['Blank', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October', 'November', 'December'];
currentDate  = new Date(); 
function Calendar(month, year) 
{
this.month = (isNaN(month) || month == null) ? currentDate .getMonth() : month;
this.year  = (isNaN(year) || year == null) ? currentDate .getFullYear() : year;
this.html = '';
}
Calendar.prototype.generateHTML = function()
{
  var firstDayOfMonth = new Date(this.year, this.month - 1, 1);
  var startingDayOfMonth = firstDayOfMonth.getDay();
  var numberOfDaysInMonth = daysInMonth [this.month];
  if (this.month == 0) {
  if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0)
  {
  numberOfDaysInMonth = 29
  }
  var elem = document.getElementById(day);
	elem.style.fontWeight = 'bold';
}
  var nameOfMonth = monthsOfYear [this.month]
  var html = '<table class="calendar-table">';
  html += '<tr><th colspan="7">';
  html +=  nameOfMonth + "&nbsp;" + this.year;
  html += '</th></tr>';
  html += '<tr class="calendar-header">';
  for(var i = 0; i <= 6; i++ )
  {
  html += '<td class="calendar-header-day">';
  html += daysOfWeek [i];
  html += '</td>';
  }
  html += '</tr><tr>';
  var day = 1;
  for (var i = 0; i < 9; i++) 
  {
    for (var j = 0; j <= 6; j++) 
    { 
      html += '<td class="calendar-day">';
      if (day <= numberOfDaysInMonth && (i > 0 || j >= startingDayOfMonth)) 
      {
      html += day;
      day++;
      }
      html += '</td>';
    }
    if (day > numberOfDaysInMonth) {
    break;
    } 
    else {
    html += '</tr><tr>';
    }
  }
  html += '</tr></table>';
  this.html = html;
}
Calendar.prototype.getHTML = function() {
return this.html;
}
function printCalendar(month, year, day)
{
var cal = new Calendar(month, year);
cal.generateHTML();
var output = document.getElementById("output");
output.innerHTML = cal.getHTML();
}
function getInput()
{
var currentYear = document.getElementById("year").value;
var currentMonth = document.getElementById("month").value;
var currentDay = document.getElementById("day").value;
printCalendar(currentMonth, currentYear);
}
</script>
<form>
Day:&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="day" name="day"/> (1-31)<br/>
Month: <input type="text" id="month" name="month"/> (1-12)<br/>
Year:&nbsp;&nbsp; <input type="text" id="year" name="year"/> (4-Digits) <br/>
<input type="button" value="Submit" onclick="getInput()" /> <br/>
</form>
<br/>&nbsp;All values must be given 
within the limits of the numbers specified to the right of each text box, or the input will be 'undefined'.
<div id="output"></div>
</body>
</html>

Cromewell · Apr 12, 2013

You are missing an html element by the id of day for it to work. There was a second part to your friends solution that is missing.

This is my solution for bolding the day. I'm just using <b> tags for simplicity, there's some comments around the parts to make it work

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendar - Trewyn</title>
</head>
<body>
<script type="text/javascript">
daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
daysInMonth = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthsOfYear = ['Blank', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October', 'November', 'December'];
currentDate  = new Date(); 
function Calendar(day, month, year) 
{
this.month = (isNaN(month) || month == null) ? currentDate .getMonth() : month;
this.year  = (isNaN(year) || year == null) ? currentDate .getFullYear() : year;
this.day = (isNaN(day) || day == null) ? currentDate .getDay() : day; //get the day provided by the user and store it, you could do this any number of other ways though
this.html = '';
}
Calendar.prototype.generateHTML = function()
{
  var firstDayOfMonth = new Date(this.year, this.month - 1, 1);
  var startingDayOfMonth = firstDayOfMonth.getDay();
  var numberOfDaysInMonth = daysInMonth [this.month];
  if (this.month == 1) { // only for february
  if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0)
  {
  numberOfDaysInMonth = 29
  }
}
  var nameOfMonth = monthsOfYear [this.month]
  var html = '<table class="calendar-table">';
  html += '<tr><th colspan="7">';
  html +=  nameOfMonth + "&nbsp;" + this.year;
  html += '</th></tr>';
  html += '<tr class="calendar-header">';
  for(var i = 0; i <= 6; i++ )
  {
  html += '<td class="calendar-header-day">';
  html += daysOfWeek [i];
  html += '</td>';
  }
  html += '</tr><tr>';
  var day = 1;
  for (var i = 0; i < 9; i++) 
  {
    for (var j = 0; j <= 6; j++) 
    { 
      html += '<td class="calendar-day">';
      if (day <= numberOfDaysInMonth && (i > 0 || j >= startingDayOfMonth)) 
      {
      if (this.day == day) { //when the day we are drawing matches what we have stored bold it
            html += "<b>" + day + "</b>";
      }
      else { //otherwise just print the day normally
            html += day;
      }
      day++;
      }
      html += '</td>';
    }
    if (day > numberOfDaysInMonth) {
    break;
    } 
    else {
    html += '</tr><tr>';
    }
  }
  html += '</tr></table>';
  this.html = html;
}
Calendar.prototype.getHTML = function() {
return this.html;
}
function printCalendar(month, year, day)
{
var cal = new Calendar(day, month, year);
cal.generateHTML();
var output = document.getElementById("output");
output.innerHTML = cal.getHTML();
}
function getInput()
{
var currentYear = document.getElementById("year").value;
var currentMonth = document.getElementById("month").value;
var currentDay = document.getElementById("day").value;
printCalendar(currentMonth, currentYear, currentDay);
}
</script>
<form>
Day:&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="day" name="day"/> (1-31)<br/>
Month: <input type="text" id="month" name="month"/> (1-12)<br/>
Year:&nbsp;&nbsp; <input type="text" id="year" name="year"/> (4-Digits) <br/>
<input type="button" value="Submit" onclick="getInput()" /> <br/>
</form>
<br/>&nbsp;All values must be given 
within the limits of the numbers specified to the right of each text box, or the input will be 'undefined'.
<div id="output"></div>
</body>
</html>

trewyn15 · Apr 12, 2013

Oh, I see where it is now, I think I was trying to over-complicate it than, as that's probably the most simple way it could be done, I was looking to bold it in the initial calendar design..

Thanks for your input, it really helps a ton and to be honest, I'm learning more from you than I am my professor. I appreciate it!

HTML Issues

trewyn15

New Member

Cromewell

Administrator

trewyn15

New Member

Cromewell

Administrator

trewyn15

New Member

trewyn15

New Member

Cromewell

Administrator

trewyn15

New Member

Cromewell

Administrator

trewyn15

New Member

Cromewell

Administrator

trewyn15

New Member

Cromewell

Administrator

trewyn15

New Member

trewyn15

New Member

Cromewell

Administrator

trewyn15

New Member