Help fix my Java Code: This is my current calendar:[ fig : 1]  --------------------------------- Display an annual calendar in the header section place buttons that will move forward and backward by a year place a button in the header that will allow the user to return to the current day (or current month What the calendar needs to look like: [ fig 2 ]    My current code is in seperate files the js file, html file, and css file. The code needs to stay in the seperate files. How do I modify my current code to display the new calendar? js file code: var thisDay = new Date(); var currentDay = thisDay;   /* Write the calendar to the element with the id "calendar" */ document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay);   function createAnnualCalendar(calDate) { var calendarHTML = ""; calendarHTML += putControlBar(); calendarHTML += ""; for (var i = 0; i < 12; i++) { calDate.setMonth(i); calendarHTML += "" + createCalendar(calDate) + ""; } calendarHTML += ""; return calendarHTML; }   function createCalendar(calDate) { var calendarHTML = ""; calendarHTML += calCaption(calDate); calendarHTML += calWeekdayRow(); calendarHTML += calDays(calDate); return calendarHTML; }   function calCaption(calDate) { var monthName = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var thisMonth = calDate.getMonth(); var thisYear = calDate.getFullYear(); return "" + monthName[thisMonth] + " " + thisYear + ""; }   function calWeekdayRow() { var dayName = ["S", "M", "T", "W", "T", "F", "S"]; var rowHTML = ""; for (var i = 0; i < dayName.length; i++) { rowHTML += "" + dayName[i] + ""; } rowHTML += ""; return rowHTML; }   function daysInMonth(calDate) { var dayCount = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var thisYear = calDate.getFullYear(); var thisMonth = calDate.getMonth(); if (thisYear % 4 === 0) { dayCount[1] = 29; if ((thisYear % 100 != 0) || (thisYear % 400 === 0)) { dayCount[1] = 29; } } return dayCount[thisMonth]; }   function calDays(calDate) { var day = new Date(calDate.getFullYear(), calDate.getMonth(), 1); var weekDay = day.getDay(); var htmlCode = ""; for (var i = 0; i < weekDay; i++) { htmlCode += "" } var totalDays = daysInMonth(calDate); var highlightDay = calDate.getDate(); for (var i = 1; i <= totalDays; i++) { day.setDate(i); weekDay = day.getDay(); if (weekDay === 0) { htmlCode += ""; } if (i === highlightDay) { if (weekDay === 0 || weekDay === 6) { htmlCode += "" + i + ""; } else { htmlCode += "" + i + ""; } } else { if (weekDay === 0 || weekDay === 6) { htmlCode += "" + i + ""; } else { htmlCode += "" + i + ""; } } if (i == totalDays) { if (weekDay < 6) { for (var x = weekDay; x < 6; x++) { htmlCode += ""; } } } if (weekDay === 6) htmlCode += ""; } return htmlCode; }   function putControlBar() { var cbarHtml = ""; cbarHtml += " "; cbarHtml += " Previous Year "; cbarHtml += " < "; cbarHtml += " Today "; cbarHtml += " > "; cbarHtml += " Next Year "; cbarHtml += " "; return cbarHtml; }   function moveYearBackward() { var curYear = currentDay.getFullYear(); var newDate = new Date(curYear - 1, 0, 1); currentDay = newDate; document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay); }   function moveYearForward() { var curYear = currentDay.getFullYear(); var newDate = new Date(curYear + 1, 0, 1); currentDay = newDate; document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay); }   function moveToCurrent() { currentDay = new Date(); document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay); }   html file code: css file code: td, th { text-align: center; }   caption { color: white; background-color: black; }   #controlbar { background-color: antiquewhite; width: 200px; }   #calendar_table { background-color: antiquewhite; width: 200px; }   #calendar_today { color: red; background-color: powderblue; }   .calendar_weekdays { background-color: grey; color: white; }   .weekend { background-color: powderblue; }   .padcell { background-color: antiquewhite; }   caption { color: white; background-color: black; padding: 0; margin: 0; }

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question

Help fix my Java Code:

This is my current calendar:[ fig : 1] 

---------------------------------

  • Display an annual calendar
  • in the header section place buttons that will move forward and backward by a year
  • place a button in the header that will allow the user to return to the current day (or current month

What the calendar needs to look like: [ fig 2 ] 

 

My current code is in seperate files the js file, html file, and css file. The code needs to stay in the seperate files. How do I modify my current code to display the new calendar?

js file code:

var thisDay = new Date();

var currentDay = thisDay;

 

/* Write the calendar to the element with the id "calendar" */

document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay);

 

function createAnnualCalendar(calDate) {

var calendarHTML = "";

calendarHTML += putControlBar();

calendarHTML += "<table id='calendar_table'>";

for (var i = 0; i < 12; i++) {

calDate.setMonth(i);

calendarHTML += "<tr><td>" + createCalendar(calDate) + "</td></tr>";

}

calendarHTML += "</table>";

return calendarHTML;

}

 

function createCalendar(calDate) {

var calendarHTML = "";

calendarHTML += calCaption(calDate);

calendarHTML += calWeekdayRow();

calendarHTML += calDays(calDate);

return calendarHTML;

}

 

function calCaption(calDate) {

var monthName = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var thisMonth = calDate.getMonth();

var thisYear = calDate.getFullYear();

return "<caption>" + monthName[thisMonth] + " " + thisYear + "</caption>";

}

 

function calWeekdayRow() {

var dayName = ["S", "M", "T", "W", "T", "F", "S"];

var rowHTML = "<tr>";

for (var i = 0; i < dayName.length; i++) {

rowHTML += "<th class='calendar_weekdays'>" + dayName[i] + "</th>";

}

rowHTML += "</tr>";

return rowHTML;

}

 

function daysInMonth(calDate) {

var dayCount = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

var thisYear = calDate.getFullYear();

var thisMonth = calDate.getMonth();

if (thisYear % 4 === 0) {

dayCount[1] = 29;

if ((thisYear % 100 != 0) || (thisYear % 400 === 0)) {

dayCount[1] = 29;

}

}

return dayCount[thisMonth];

}

 

function calDays(calDate) {

var day = new Date(calDate.getFullYear(), calDate.getMonth(), 1);

var weekDay = day.getDay();

var htmlCode = "<tr>";

for (var i = 0; i < weekDay; i++) {

htmlCode += "<td class='padcell'></td>"

}

var totalDays = daysInMonth(calDate);

var highlightDay = calDate.getDate();

for (var i = 1; i <= totalDays; i++) {

day.setDate(i);

weekDay = day.getDay();

if (weekDay === 0) {

htmlCode += "<tr>";

}

if (i === highlightDay) {

if (weekDay === 0 || weekDay === 6) {

htmlCode += "<td class='calendar_dates weekend' id='calendar_today'>" + i + "</td>";

} else {

htmlCode += "<td class='calendar_dates' id='calendar_today'>" + i + "</td>";

}

} else {

if (weekDay === 0 || weekDay === 6) {

htmlCode += "<td class='calendar_dates weekend'>" + i + "</td>";

} else {

htmlCode += "<td class='calendar_dates'>" + i + "</td>";

}

}

if (i == totalDays) {

if (weekDay < 6) {

for (var x = weekDay; x < 6; x++) {

htmlCode += "<td class='padcell'></td>";

}

}

}

if (weekDay === 6) htmlCode += "</tr>";

}

return htmlCode;

}

 

function putControlBar() {

var cbarHtml = "";

cbarHtml += "<table id='controlbar'> <tr>";

cbarHtml += "<td> <button id='prevYearBtn' onclick='moveYearBackward()'>Previous Year</button> </td>";

cbarHtml += "<td> <button id='prevMonthBtn' onclick='moveMonth(-1)'>&lt;</button> </td>";

cbarHtml += "<td> <button id='todayBtn' onclick='moveToCurrent()'>Today</button> </td>";

cbarHtml += "<td> <button id='nextMonthBtn' onclick='moveMonth(1)'>&gt;</button> </td>";

cbarHtml += "<td> <button id='nextYearBtn' onclick='moveYearForward()'>Next Year</button> </td>";

cbarHtml += "</tr> </table>";

return cbarHtml;

}

 

function moveYearBackward() {

var curYear = currentDay.getFullYear();

var newDate = new Date(curYear - 1, 0, 1);

currentDay = newDate;

document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay);

}

 

function moveYearForward() {

var curYear = currentDay.getFullYear();

var newDate = new Date(curYear + 1, 0, 1);

currentDay = newDate;

document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay);

}

 

function moveToCurrent() {

currentDay = new Date();

document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay);

}

 

html file code:

<html>

<head>

<link href="calendar.css" rel="stylesheet" />

<script src="newcalendar.js" defer></script>

</head>

<body>

<div id="calendar"></div>

</body>

</html>

css file code:

td, th {

text-align: center;

}

 

caption {

color: white;

background-color: black;

}

 

#controlbar {

background-color: antiquewhite;

width: 200px;

}

 

#calendar_table {

background-color: antiquewhite;

width: 200px;

}

 

#calendar_today {

color: red;

background-color: powderblue;

}

 

.calendar_weekdays {

background-color: grey;

color: white;

}

 

.weekend {

background-color: powderblue;

}

 

.padcell {

background-color: antiquewhite;

}

 

caption {

color: white;

background-color: black;

padding: 0;

margin: 0;

}

Previous
Year
1
- con
8
SMTWTFS
2 3
4 5 6 7
9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
S
M T
Today
January 2023
February 2023
March 2023
16
April 2023
May 2023
June 2023
July 2023
August 2023
September 2023
October 2023
November 2023
December 2023
Next
Year
W T F S
12
3 4
7 8
9 10 11
5
12
13 14 15
16 17 18
19 20 21 22 23 24 25
26 27 28
MIS
S M T W
T F S
1
2 3 4
5
6 7 8 9
10 11
12
13
14
15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
24 25 26 27 28 29
23
30
SMTWTF S
1 2
3 4 5 6
7
8 9
10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
30 31
Transcribed Image Text:Previous Year 1 - con 8 SMTWTFS 2 3 4 5 6 7 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 S M T Today January 2023 February 2023 March 2023 16 April 2023 May 2023 June 2023 July 2023 August 2023 September 2023 October 2023 November 2023 December 2023 Next Year W T F S 12 3 4 7 8 9 10 11 5 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 MIS S M T W T F S 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 S M T W T F S 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 24 25 26 27 28 29 23 30 SMTWTF S 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 30 31
S
M
T
S
1
2 3 4
5
6
7
8
9
10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29
30 31
7
13 14
No Wa
May
S M T W
T
F
S
1
2
3 4
5
8
9
10 11 12
15
16 17 18 19
22 23 24 25 26
29 30
31
6
20 21
27 28
S
NƠ
M
January
2 3
T W
F
9 10
16 17
4
5
11 12
18 19
23 24 25 26 27 28 29
30
September
T W T F S
1
6
7 8
13
14 15
20 21 22
February
S M T W T
1
7
8
14 15
4 5 6
11 12 13
18 19 20 21
25
26 27 28
3 4 5
6
11 12 13
10
17
18 19 20
24 25 26 27
June
S M T W T F
S
1
2
7
8
9
14 15 16
21 22 23
28 29 30
S M T
1
2
7
8
9
14 15 16
21 22 23
2
28 29
2
2018
F
S
2 3
9
10
16
17
22 23
24
October
W
T
F
S
3 4
5
6
10 11 12 13
17
18 19 20
25 26 27
24
30 31
March
S M T W T F
1
2
7 8
9
14
15 16
21
22 23
28 29 30
4 5 6
11 12 13
18 19 20
25
26 27
July
W
F
150
6
s
S M T
T
S
1 2 3
4
5
7
9 10
11 12
13 14
8
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
3
10
4 5 6 7
13 14
11 12
18 19
25 26
20 21
27 28 29 30
0
17
24
31
November
S M T W T
F
1
2
8 9 10
15 16 17
22 23 24
S
3
S
1
M T
2
3
9
10
15
16 17 18 19
22 23 24 25 26
29 30
00
S
S
April
W T F S
NOGM8
T
F
2
3 4
5 6 7 8
9
10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
27 28 29 30 31
26
16
4 5
11 12
M
August
M T W
1
6 7
13 14
20 21
27 28
S
1
3
4 5 6 7
8
10 11 12 13 14
15
17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
December
T W T F
s
Transcribed Image Text:S M T S 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 7 13 14 No Wa May S M T W T F S 1 2 3 4 5 8 9 10 11 12 15 16 17 18 19 22 23 24 25 26 29 30 31 6 20 21 27 28 S NƠ M January 2 3 T W F 9 10 16 17 4 5 11 12 18 19 23 24 25 26 27 28 29 30 September T W T F S 1 6 7 8 13 14 15 20 21 22 February S M T W T 1 7 8 14 15 4 5 6 11 12 13 18 19 20 21 25 26 27 28 3 4 5 6 11 12 13 10 17 18 19 20 24 25 26 27 June S M T W T F S 1 2 7 8 9 14 15 16 21 22 23 28 29 30 S M T 1 2 7 8 9 14 15 16 21 22 23 2 28 29 2 2018 F S 2 3 9 10 16 17 22 23 24 October W T F S 3 4 5 6 10 11 12 13 17 18 19 20 25 26 27 24 30 31 March S M T W T F 1 2 7 8 9 14 15 16 21 22 23 28 29 30 4 5 6 11 12 13 18 19 20 25 26 27 July W F 150 6 s S M T T S 1 2 3 4 5 7 9 10 11 12 13 14 8 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 3 10 4 5 6 7 13 14 11 12 18 19 25 26 20 21 27 28 29 30 0 17 24 31 November S M T W T F 1 2 8 9 10 15 16 17 22 23 24 S 3 S 1 M T 2 3 9 10 15 16 17 18 19 22 23 24 25 26 29 30 00 S S April W T F S NOGM8 T F 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 27 28 29 30 31 26 16 4 5 11 12 M August M T W 1 6 7 13 14 20 21 27 28 S 1 3 4 5 6 7 8 10 11 12 13 14 15 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 December T W T F s
Expert Solution
steps

Step by step

Solved in 5 steps with 8 images

Blurred answer
Knowledge Booster
Program on Numbers
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education