Exercises

1. Github Exercise

Start by downloading this project in a .zip file.

You will be turning this project into your own hosted Github website. Since the code is provided, there is no reason to use any AI.

Expand the zip folder and open the folder in VSCode.

Next, edit the index.html file and add your name in the <header> <h2>. Then save the edits.

Next, you will need to turn this project folder into a Git project by opening the Terminal panel in VSCode and running the git init command. Now your project IS a git repository.

Now add a .gitignore file at the root of your project folder. The .gitignore file should contain this line:

.DS_Store

Then run the git add and git commit commands so Git will be tracking your project files and recording the changes.

Now you need to set up a connection between Github and this Git repository. Do this by visiting the Github website. Make sure you are logged in to the website using the Github account that you created with your @algonquinlive.com email address.

Create a new PUBLIC Github Repository WITHOUT a Readme file and WITHOUT any licence information.

Save the URL of your new public github repository and go back to VSCODE.

Run the command in the terminal panel:

git remote add origin <URL-OF-YOUR-GITHUB-REPO>

Once you have added the remote url to your local git repo, now you can upload the project to Github from the Terminal panel. Here is the command to upload your project

git push origin main

You should be able to refresh the Github repository webpage in the browser and immediately see the uploaded files.

Now in your index.html file under the main create a section and add the following information:

An image of yourself
Description list with the following information
1. Student number
2. Name of the Program that you are taking
3. Course code and name in which you are completing this assignment
4. one interesting fact about you

Proceed by repeating the stages of staging, committing, and pushing your recent changes to the GitHub repository. This action will result in a new commit.

Next, go to the Settings tab for your Github copy of the repository and look for the menu entry called Pages. It should look like this:

Github pages screenshot

Set it to point to your main branch at the /root and click Save.

The page should display the URL for the hosted version of the project.

Within a couple minutes you should be able to see the actual hosted version of the project. If you click on the actions tab at the top, then you can see if the creation of the site is pending, being processed, or complete.

Submission

See the instructions on BS LMS for submission details.

Due in Week 5

2. Midterm Project Exercise

Use an AI chat tool or agent to create three files.

A JavaScript file that has a const Array containing 20 objects. Each object needs a unique id and three other properties. All the objects should be about your favourite TV show(s) or movie(s). This data will be used in the midterm Project. The file should be called data.js.
An HTML file which will be the only page in the midterm Project. It should have <link> elements for a main.css file and a sans-serif Google Font of your choice. The <body> should contain a <header>, <footer>, <nav><form></form></nav>, and a <main>. Inside the <main> element there should be a few placeholder cards. Each card needs a title and a few placeholder fields. The file should be called index.html. Inside the <form> you can manually add, or generate, a <select> element and a <button>.
A CSS file called main.css which defines a colour scheme for your page. The colour scheme should have a near black shade, a near white shade, a medium grey, and three other colours. The scheme should be appropriate for the show or movies that your page is will about. It should style the cards and all the elements on your page. The footer should stick to the bottom of the body.

See the image below as an example of what the HTML and CSS could look like.

Sample

Submission

See the instructions on BS LMS for submission details.

Due in Week 6

3. Async Exercise

This exercise is to practice your skills for working with Asynchronous code in JavaScript.

No AI to be used for this exercise.

Start by creating a PUBLIC Github Repo first.

Then git init locally and run the git remote add origin command to add the URL for your repo locally. Do this before you start adding code.

The HTML for this exercise is as follows. You may add Google Fonts and CSS as you desire.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/main.js" type="module"></script>
  </head>
  <body>
    <header>
      <h1>Async Programming</h1>
    </header>
    <main>
      <h2>Main Section</h2>
    </main>
  </body>
</html>

Follow these steps to create the script.

In the script, add a DOMContentLoaded event listener which will call an init function. The init function will add an event listener that waits for the user to click on something on the body.
The function which is called on click will generate a random number between zero and one which gets rounded off to decide whether to call one of two functions.
The two functions being called after the click will each return a new Promise. Inside the Promise will be a call to setTimeout that waits for one or two seconds before resolving the Promise.
When one of the functions resolves it should return a randomly generated hex value. This hex value is returned by the resolve method and will be used inside the then() method to set a new background color for the <body>.
When the other function resolves it should return a string message through the resolve method. The returned string will be used inside the then() method to add a new <p></p> that contains the string inside the <main> element.

Working version will be demoed in class.

Remember to make lots of git commit commands while working on your code.

Submission

When finished writing and testing your code, push the finished version to Github and submit the URL in BS.

See the instructions on BS LMS for submission details.

Due in Week 10

4. Final Project Exercise

The Final Project will be to build a multi-page Quiz web app with many online and offline features.

The exercise portion will be to create the HTML interface pages and the starter CSS styling.

You MAY use any AI tool or agent to help you create the HTML and styling.

Reference the description of the final project to help you complete this exercise.

This version of the project will just be a static version with no JavaScript needed. It should be a full web app with working navigation, allowing a user to move between all the screens.

Create the initial private Github repo and invite your instructor to the repo.

Use the main branch and have it deploying the static site through Github Pages.

Submission

See the instructions on BS LMS for submission details.

Due in Week 14