The labs described below are a selection of what I learned in my introductory JavaScript course, which I took in the fall of 2022 at Portland Community College. Specific projects were outlined for each lab, though we were encouraged to create our own programs as long as they met the requirements. I took the opportunity to create my own program for nearly every lab (more info about this is found in the descriptions below). The titles I've given for each lab reflect each lab's learning objective.
CSS styling was not a requirement for any of the labs, though after the first lab I realized I could create a cohesive look for all labs, and at the end of the course be left with a record of my learning progress. To that end, every lab linked to below has been left as it was when I turned it in, which explains their lack of navigation links to this page or to other labs. This index page was not a requirement of the course—it was created as a hub for the labs at the end of the term. And though I wanted a cohesive look for all labs, I intentionally kept my CSS styling to a minimum in order to keep the focus on JavaScript.
Also of note: Lab 1 consisted only of software installation and set-up, and so is not represented here; I did not include Labs 6 or 7 in my selection below for no better reason than that I did not enjoy them as much as the other ones; the Bonus Lab was optional. The code for each lab is viewable at my GitHub repository via the links below.
- Lab 2: "Cheat sheet"
- We were tasked to create a web page consisting of HTML tables containing information that might be useful for us as a reference as we learned JavaScript. We were given values, operations, etc., to assess, with the results to be determined using JavaScript. CSS-wise, this lab established the look of all remaining labs.
- Visit page | View code
- Lab 3: Branching and loops
- For this lab we needed to use at least one branching statement and at least one looping statement in our code. The page we created had to respond dynamically to user input in some way for both the branching and looping statements. From somewhere the idea came to me to write a program about HTML colors. It was a theme that would continue for the next two labs.
- Visit page | View code
- Lab 4: Refactoring
- For Lab 4 we simply needed to refactor our code from Lab 3, giving special attention to creating cohesive functions, as well as creating separate files for our HTML and JavaScript code (and CSS if we had it). Since we were given the option to create a new program instead, as long as it met the requirements, I took the opportunity to do so. I honored Lab 3, though, by expanding on its theme.
- Visit page | View code
- Lab 5: Object oriented programming
- For Lab 5 we were tasked to create a survey-type form using object-oriented principles such as parent and subclasses, and inheritance. We were also required to include at least three different types of question (e.g., multiple choice, multiple select, short answer). Finally, we were required to get the submitted answers to all of the questions in JSON format. I found it fitting to create a quiz based on the theme of my prior two labs.
- Visit page | View code
- Bonus Lab: String symmetry
- For the optional bonus lab, we were given six phrases and tasked with writing a program that would check to see if they read the same backward as forward. Though HTML was not a requirement of the lab, I wanted to create a record of the lab similar to that of all of the previous ones. I also wanted to create a more interactive program, so I included the ability to type in a string of text that could also be checked for symmetry, the results of which would then be viewable in a table.
- Visit page | View code