Assignment2: Course Planner

Assignment created by Daniel George

Hello, everybody! For Assignment2, we are going to build our first web-based application using HTML, CSS and (of course) Javascript: the Illinois Wesleyan Course Planner.

Starter Code

The starter code for this assignment can be found here. Here is what is included in the starter code:

Instead of the usual JsFiddle we have been running in class to test out your application, this time, we are going to do things more like development in the non-academic world: we are going to view our application locally ("locally" means "on our own computers"). To do this, download the project folder and save it to your computer. Then, navigate to the project and double-click the file called "index.html". This will open the file in your default browser. As you make changes to the html, css, and js files, you can refresh your browser to view exactly how those changes are rendered.

Project Requirements

Here are the requirements for the Course Planner:

To demonstrate the functionality required, please see the below screenshots and explanations.

To add a class, the Course Planner should be able to accept a string, such as "CS127", and when the "Add" button is clicked, render that string in a bulleted list below.

Before: After:

To delete a class, when the "Delete" button is clicked, for a given string provided in the input box, the Course Planner should delete that string from the bulleted list.

Before: After:

Finally, the course planner should be able to accept two strings each representing a class which has already been added to the list, and add a > character between them to show that one is a prerequisite of the other. This should be able to chain multiple classes together, like this:

Before: After:

Aside from these requirements, please make sure that your Course Planner looks as much as possible like the Course Planner in the screenshots. With regard to specific design and style, these instructions are a bit vague, on purpose! In "real" life software development, a BIG part of working out requirements and figuring things out is asking questions and creating conversations. So, please leverage Piazza, office hours, and email as much as possible to get everything cleared up, if you have any questions about style expectations and design (and you should have some!).


A note on code: we expect that you will turn in three files: an .html file, a .css file, and a .js file. The html and CSS files don't need to include comments (unless you want to, or if it helps you) but the JavaScript file MUST include at least function-level comments, meaning that there should be a comment above each function that you write describing what that function is expected to do, and what the inputs (parameters) and outputs should be.

Extra Points

Beyond that, there will be the opportunity to earn extra credit along with Assignment 2! Extra points will be granted for any effort that goes beyond the bare requirements. Some ideas are:

Getting Started

If this seems like a lot of work, please do NOT be discouraged! For starters, we have a LOT of resources for you: office hours, Piazza, email, and many online and other text resources about all of these technologies. Importantly, you should feel very proud about this, because in completing Course Planner you are doing real, live software development!! And by including good documentation and thinking about requirements, you are already thinking like a software engineer, and in fact are DOING software engineering!! Keep a curious, open mind with this...try lots of things, make little changes, keep hitting that "refresh" button to see how certain changes are rendered in the browser. If you are still feeling overwhelmed or don't know where to start, try these steps:

Due Date and Final Notes

Remember: being a software developer means being able to take a task that's very large and may be overwhelming, taking a deep breath, and breaking it down into smaller, achieveable sub-tasks. There's no "right" way to do this all, my version of Course Planner took about 180 lines of code. I want you to feel empowered to do well with this, so you have a full two weeks to complete it: Assignment 2 will be due on October 6, 2023 at 11:59pm CST. So please, start early, ask a LOT of questions, and above all...please have some fun, too!