Lab 1: HTML Holidays (4 Points)

Chris Tralie

Due Monday 1/31/2022

Overview / Logistics

The purpose of this lab is for you to brush up on your knowledge of methods and how they fit together while you also get some experience with C++ and makefiles. You will be converting data from one format (parallel arrays) to another format (HTML). Though it is often tedious, automating such data conversions is a common task in software engineering, so this is a valuable skill.

Furthermore, you will get experience making code that writes code!. This is also a common task, as we might have a higher level language with more context (like C++ in our example) that writes tons of code in a simpler language (assembly language) that would be very tedious to write out by hand.

Compared to 173, you will notice that the design of your methods is left a little bit more up to you. This is intentional. Students are moving more towards autonomy in their design in this course, so you should spend a little bit more time up front sketching out a plan on a piece of paper before you start coding. Of course, I am also happy to discuss your ideas! But just be sure to think before you code.

Click here to download the skeleton code for this assignment, which you can open and edit with Visual Studio Code. You will be editing holidays.cpp, dateutils.h, and dateutils.cpp.

Learning Objectives

  • Access elements in parallel arrays using loops
  • Use existing methods with provided documentation
  • Write methods that work together in concert to accomplish a task
  • Write a complete program with very little code in the main function
  • Programmatically convert data from one format to another

What to submit

When you are finished, you submit a .zip file with all of your code to canvas. Also, answer the two discussion questions below. We will return to these in the next unit

  1. What do you feel is advantageous about storing data in parallel arrays?
  2. What feels clunky about storing this kind of data in parallel arrays? (For instance, what is the process you would have to go through if you wanted to add a holiday?)

Background: HTML Tables

Modern web pages are formatted in a scripting language known as Hypertext Markup Language, or HTML for short. This code can be written up front and fixed for static web pages (like the one you're looking at now), but we very often want to generate it programmatically so we don't have to write it from scratch every time a small amount of data changes. This is the basis of server-side web languages such as PHP.

Every type of formatting occurs in what's known as a "tag." The web site w3schools.com has some nice tutorials on different HTML tags, but we will be just focusing on one set of tags today for HTML tables. You do not need any prior HTML language to do this lab. Just follow the rules I'm giving you here. You can read more about them at this link, but the example covers everything you need to know for this lab. In particular,

  • Every table tag begins with <table> and ends with </table>
  • Within the table, every row tag begins with <tr> and ends with </tr>
  • Within each row, every column tag begins with <td> and ends with </td>
  • The data for the table goes within the <td> ... </td> tags.

For example, the code below generates a table that looks like this

Course Title Course Name Prerequisites
CS 173 Intro To Computer Science None
CS 174 Object Oriented Programming CS 173
CS 476 Computer Graphics CS 174, Math 111

Lab 1 Task

In this lab, you will programmatically print out text containing all of code for a small HTML web page with a table of some major holidays in 2021/2022 (obtained from this link), and then you will pipe this output string to an HTML file in the command line, which you can open with a browser. You will not be writing any HTML code directly! Rather, you will be automatically creating HTML code using C++.

Data Format

The information about the holidays is provided in four pieces in the holidays.cpp file. The first is constant array of string values with the name of the holidays, as shown below:

Then, the months of each holiday are provided in an array of ints

and there are similar arrays HOLIDAY_DAYS and HOLIDAY_YEARS for days and years, respectively. These arrays are parallel, which means that corresponding indices refer to the same item. For instance

HOLIDAY_NAMES[1] is the string "Rosh Hashanah (New Year)"

HOLIDAY_DATES[1] is the number 9

So, the complete information for entry 1 is the name HOLIDAY_NAMES[1], the month HOLIDAY_NAMES[1], the day HOLIDAY_DAYS[1], and the year HOLIDAY_YEARS[1].

Formatting Specification

To generate the complete HTML web page, you will need to

  1. Print a string with the HTML header and the start table tag
  2. Loop through all of the elements in these arrays to print each row of the HTML table
  3. Print the end table tag and the code to end the HTML document

FOr each row, you should print out HTML code that creates 3 columns

  1. The name of the holiday
  2. The weekday of the holiday
  3. The full date of the holiday, in the format Month Day, Year
Here's an example of what the first row should look like

If all goes well, when you put all of the rows together and write them out to holidays.html, you should see a table with the following information:

HolidayWeekdayDate
Labor DayMondaySeptember 6, 2021
Rosh Hashanah (New Year)TuesdaySeptember 7, 2021
Yom Kippur (Day of Atonement)ThursdaySeptember 16, 2021
Sukkot (Feast of Tabernacles)TuesdaySeptember 21, 2021
Shemini AtzeretTuesdaySeptember 28, 2021
Simchat TorahWednesdaySeptember 29, 2021
Navratri/DussehraThursdayOctober 7, 2021
Indigenous Peoples DayMondayOctober 11, 2021
Mawlid al-Nabi (birthday of Mohammad)MondayOctober 18, 2021
DiwaliThursdayNovember 4, 2021
Veterans DayThursdayNovember 11, 2021
Thanksgiving DayThursdayNovember 25, 2021
Native American Heritage DayFridayNovember 26, 2021
Hanukkah (Chanukah)SundayNovember 28, 2021
Christmas DaySaturdayDecember 25, 2021
New Years DaySaturdayJanuary 1, 2022
Orthodox ChristmasFridayJanuary 7, 2022
Martin Luther King DayMondayJanuary 17, 2022
Lunar New YearTuesdayFebruary 1, 2022
Presidents' DayMondayFebruary 21, 2022
Maha ShivaratriTuesdayMarch 1, 2022
Beginning of LentWednesdayMarch 2, 2022
Ash WednesdayWednesdayMarch 2, 2022
PurimThursdayMarch 17, 2022
HoliFridayMarch 18, 2022
April Fool'sFridayApril 1, 2022
Beginning of RamadanSaturdayApril 2, 2022
RamanavamiSundayApril 10, 2022
Good FridayFridayApril 15, 2022
Passover (Pesach)SaturdayApril 16, 2022
EasterSundayApril 17, 2022
Orthodox Good FridayFridayApril 22, 2022
Orthodox EasterSundayApril 24, 2022
Lailat al-QadrThursdayApril 28, 2022
Eid al-Fitr (End of Ramadan)TuesdayMay 3, 2022
Memorial DayMondayMay 30, 2022
ShavuotSundayJune 5, 2022
JuneteenthSundayJune 19, 2022
Independence DayMondayJuly 4, 2022
Eid al-AdhaSundayJuly 10, 2022
Muharram (Al Hijrah New Year)SaturdayJuly 30, 2022
JanmashtamiThursdayAugust 18, 2022

Provided Helper Methods

The following methods are provided in holidays.cpp to help you out. You should look at the documentation in comments above each method

  • getHTMLStart(): This method prints out a string that should go at the beginning of your HTML file
  • getHTMLEnd(): This method prints out a string that should go at the end of your HTML file

The following method is provided in dateutils.h (and implemented in dateutils.cpp)

    string getWeekday(int year, int month, int day): Use this method to return the weekday as a string

C++ code you need to write

You should write two methods in holidays.cpp that work together to accomplish the task

  1. A method that outputs a string corresponding to a particular row of the table.
  2. A method that pieces the full HTML string together and then writes all of the HTML code to a file

You should also create a helper method in dateutils.cpp and dateutils.h that converts a month number into a string representing that month. HINT: Your code will be much shorter if you use an array to store and reference the month names instead of having a bunch of if statements or a switch statement.

Running the code

A makefile has been provided to automatically compile everything. To build the project, type make in your terminal in the project directory. To run the program and pipe the output text to an HTML file, type

Then, you should be able to open the file holidays.html in your browser.

Extra Credit (Up To +1)

Here are a few things you can do that are above and beyond
  • If all of the tags are there, the HTML will work properly, even if there is no whitespace in between the tags. But the code will be a big mess. Format the HTML code nicely with line breaks and tabs where appropriate
  • Stylize your table using CSS

Don't know where to start?

The easiest place to start would be to define the first method that takes in a number for the month and prints a string corresponding to that month.

Note also: To get your program to do anything, you'll have to have statements in the main. By themselves, the functions may work perfectly, but if you don't have code that runs in the main that eventually calls them, nothing will happen when you run your code.