Description

5/5 - (1 vote)

WEB222 Assignment 1

Introduction

This assignment will help you learn and practice JavaScript syntax and use built-in and user-defined functions. It will also help you set up your web development environment and learn some industry-standard tooling for JavaScript.

You must do this and all future assignments on your own. You should not work in partners/groups, not use ChatGPT, Copilot, or other AI coding assistants, and all code must be written by you. Gaining experience with JavaScript and the web takes a lot of personal practice and working on these problems yourself will help build your skill.

If you get stuck, please speak with your professor. Do not copy other student work. It is important that you learn and understand the concepts in the assignment.

You can also watch a video on YouTube that shows how to setup and work on this assignment, see: https://www.youtube.com/watch?v=8RuLrmVDOw8

Submission

To hand in your work, see the “Submitting your Assignment” section below. There are two ways to complete this assignment:

A) Finish all problem sets (npm run test should return 100%).

B) Select one problem to solve and create a video explaining the logic behind your code solution. The video should be uploaded to YouTube as an “Unlisted” link (audio and screenshare only).

Only select one!

Setup

This assignment uses a technique called “Unit Testing,” and relies on a number of dependencies, which must be installed on your computer. A dependency is a library, tool, or other piece of software that is needed in order to build, test, and run another piece of software.

JavaScript and web projects often rely on hundreds or thousands of dependencies, and getting used to installing and using them is an important step.

In order to install these dependencies, you must first install Node.js on your computer. See installation instructions at:

https://nodejs.org/en/

You can install the LTS (Long Term Support) version of node.js, which is currently 18.17.1, although any 18.x.x version should work.

Install Dependencies

Open a command line terminal (e.g., cmd.exe) and navigate (i.e., cd) to the directory where you have unzipped the assignment files. When you type dir (Windows) or ls (Linux/macOS) you should see the src directory, package.json file, etc.

In this directory, install the assignment dependencies using the Node.js Package Manager command, named npm. The npm command is installed along with node.js. In your terminal, type the following:

npm install

This will download and save all the necessary dependency files to a folder named node_modules/ in the current directory. You should see a node_modules folder next to your package.json.

If you have trouble getting “npm install” to work:

Did you install node.js?
If you type “node –version” in your terminal, does it print the version?
Are you in the right directory (you must cd into the correct directory)

If you need help, ask your professor for help.

Install a Proper Editor

You will need a proper code editor to develop for the web. The most popular choice is Microsoft Visual Studio Code (aka, VSCode). VSCode runs on Windows, Linux, and macOS. You can download and install it for free from:

https://code.visualstudio.com/

NOTE: VSCode is not the same as Visual Studio. You should have both installed

A number of extensions are available that will work automatically with the scripts and configuration in this project, and are recommended:

When you open this project’s folder, VSCode should offer to install these recommended extensions. Once these are installed VSCode will automatically show you errors as you type, automatically format your code when you save, and show you spelling mistakes in your code comments and names.

If you want to use a different editor, that’s fine. Confirm with your professor that it will work for our needs. You may not use Notepad, for example.

Learn how to Navigate the Code

The assignment has a mix of project configuration and source code. All of the config files are in the project root, and the source code is contained in the src/ directory (this is a common pattern). Your code goes in the src/solution.js file. The other files in this directory are unit tests, which you should read, but don’t need to modify.

Learn how to Run the Assignment Tests

You are asked to complete the code in the file src/solutions.js. A basic file layout has already been created with various functions and variables. Also, detailed comments have been left above each function you need to implement.

In addition, unit tests have been written for each function. They are named src/problem-00.test.js, src/problem-01.test.js and so on. A Unit Test tests the smallest possible unit of a software system or component, and we write many small Unit Tests to prove that our implementation works as we expect.

For example, we expect 2 + 2 to return 4, not 5. We can write a unit test for this to confirm that our code does what we expect. See http://softwaretestingfundamentals.com/unit-testing/ for more info about unit tests.

These tests will help you determine if your code is working correctly: running the tests should produce the output that the tests expect, and the tests will either pass or fail.

To run the tests, use the npm command:

npm test

Your goal is to get all of the tests to pass correctly. If a test fails, pay attention to the error messages that get produced, what was expected vs. what was actually returned, and make corrections to your code in assignment1.js.

Different Ways to Run Tests

If you are going to run your tests over and over as you make changes to src/solutions.js, you can run the tests so they automatically watch for changes, and re-run whenever you save your file:

npm run test-watch

You can stop the tests from running using CTRL+c

Next, you can run a single test instead of all tests:

npm test problem-00

This will only run the tests in problem-00.test.js, making it easier to work on only one problem at a time.

You can also watch a particular test, and re-run it when the code is saved:

npm run test-watch problem-00

Learn how to Lint your Code

In addition to running unit tests, you can also run a linter called eslint. Linting helps to find and remove common errors in code, for example, missing a semi-colon, or forgetting to declare a variable.

To run eslint, use the npm command:

npm run eslint

If there are no problems, there will be no output. If there is any output, pay attention to what it says, so you can make corrections. For example:

assignment1/assignment1.js
18:9 error ‘x’ is defined but never used no-unused-vars

Here, we see a lint error, which has various information:

The filename is listed first, assignment1/assignment1.js
The line number is listed next: 18
The column number on line 18 is listed next: 9
The actual error or warning comes next: error ‘x’ is defined but never used
The rule name comes last: no-unused-vars. You can lookup how to fix these errors using the rule name, for example: https://eslint.org/docs/rules/no-unused-vars

Your code should have no lint errors when you submit it.

Learn how to Properly Format your Code

Source code needs to be properly structured, use consistent indenting, semi-colons, etc. Doing so makes it easier to understand, read, and debug your code.

Your code must be properly and consistently formatted. You can do it by hand, or, you can use Prettier (https://prettier.io/) to do it automatically.

There are two ways to use Prettier. First, using the npm command:

npm run prettier

This will rewrite your files to use proper formatting. NOTE: running this command will overwrite your file, so make sure you have saved your work before you run it.

The second way to run Prettier is using the Prettier extension, and format-on-save. If you install the recommended extensions and settings for this project, saving your file will result in Prettier automatically fixing your code for you.

Debugging Code and Tests

You can also use VSCode’s built in debugging tools to run and debug your code,
or the test code, within the editor, step through code, inspect variables,
examine call stacks, etc. See the instructions at: https://github.com/microsoft/vscode-recipes/tree/master/debugging-jest-tests#debugging-all-tests

Submitting your Assignment

There are two ways to complete your assignment:

A) Full solution

Your assignment is complete when all tests are passing, and there are no more linting errors. When you have completed your assignment, you need to prepare your submission. To do so, use the npm command:

npm run prepare-submission

This will do a number of things automatically for you:

create a submission/ directory, deleting an existing one if present
run prettier on the source
copy all files under src/ to submission/src
copy json to submission/package.json
run eslint and write the output to submission/eslint.log
run npm test and write the output to submission/test.log
zip the submission/* directory to zip

You can upload submission.zip to Blackboard for submission.

B) Single Solution and Video Explanation (audio and screenshare)

You will still need to zip your final submission to submit into Blackboard but only 1 problem (any problem 1-8, not problem 0) needs to be solved completely and you need to create a video explaining your solution and how it works. The video should be max 3 minutes in length and uploaded as an “Unlisted” video to YouTube (i.e., only the people you share the URL with will be able to see it). Please note which problem you have chosen in the Blackboard submission box.

NOTE: Please make sure to indicate which method A) or B) you have chosen in the submission box and include the appropriate links during Blackboard submission!

Discussion of Other Assignment Files

You may be wondering about some of the other files in this project. While you don’t need to modify them, or use them directly, here is what each one does:

node_modules/ – the installed dependencies necessary to run prettier, eslint, etc., installed when your run npm install.

.eslintrc.js – configuration for eslint, see https://eslint.org/docs/user-guide/configuring

.prettierrc.js – configuration settings for prettier, see https://prettier.io/docs/en/configuration.html

package.json – node.js package info, dependencies, build scripts, see https://docs.npmjs.com/files/package.json

package-lock.json – a generated file with dependency version information, see https://docs.npmjs.com/files/package-lock.json

WEB222 Assignment 2

Introduction

If you get stuck, please speak with your professor. Do not copy other student work. It is important that you learn and understand the concepts in the assignment.

You can also watch a video on YouTube that shows how to setup and work on this assignment, see: https://www.youtube.com/watch?v=8RuLrmVDOw8

Submission

To hand in your work, see the “Submitting your Assignment” section below. There are two ways to complete this assignment:

A) Finish all problem sets (npm run test should return 100%).

B) Select one problem to solve and create a video explaining the logic behind your code solution. The video should be uploaded to YouTube as an “Unlisted” link (audio and screenshare only).

Only select one!

Setup

JavaScript and web projects often rely on hundreds or thousands of dependencies, and getting used to installing and using them is an important step.

In order to install these dependencies, you must first install Node.js on your computer. See installation instructions at:

https://nodejs.org/en/

You can install the LTS (Long Term Support) version of node.js, which is currently 18.17.1, although any 18.x.x version should work.

Install Dependencies

In this directory, install the assignment dependencies using the Node.js Package Manager command, named npm. The npm command is installed along with node.js. In your terminal, type the following:

npm install

This will download and save all the necessary dependency files to a folder named node_modules/ in the current directory. You should see a node_modules folder next to your package.json.

If you have trouble getting “npm install” to work:

Did you install node.js?
If you type “node –version” in your terminal, does it print the version?
Are you in the right directory (you must cd into the correct directory)

If you need help, ask your professor for help.

Install a Proper Editor

https://code.visualstudio.com/

NOTE: VSCode is not the same as Visual Studio. You should have both installed

A number of extensions are available that will work automatically with the scripts and configuration in this project, and are recommended:

If you want to use a different editor, that’s fine. Confirm with your professor that it will work for our needs. You may not use Notepad, for example.

Learn how to Navigate the Code

Learn how to Run the Assignment Tests

These tests will help you determine if your code is working correctly: running the tests should produce the output that the tests expect, and the tests will either pass or fail.

To run the tests, use the npm command:

npm test

Different Ways to Run Tests

If you are going to run your tests over and over as you make changes to src/solutions.js, you can run the tests so they automatically watch for changes, and re-run whenever you save your file:

npm run test-watch

You can stop the tests from running using CTRL+c

Next, you can run a single test instead of all tests:

npm test problem-00

This will only run the tests in problem-00.test.js, making it easier to work on only one problem at a time.

You can also watch a particular test, and re-run it when the code is saved:

npm run test-watch problem-00

Learn how to Lint your Code

To run eslint, use the npm command:

npm run eslint

If there are no problems, there will be no output. If there is any output, pay attention to what it says, so you can make corrections. For example:

assignment1/assignment1.js
18:9 error ‘x’ is defined but never used no-unused-vars

Here, we see a lint error, which has various information:

The filename is listed first, assignment1/assignment1.js
The line number is listed next: 18
The column number on line 18 is listed next: 9
The actual error or warning comes next: error ‘x’ is defined but never used
The rule name comes last: no-unused-vars. You can lookup how to fix these errors using the rule name, for example: https://eslint.org/docs/rules/no-unused-vars

Your code should have no lint errors when you submit it.

Learn how to Properly Format your Code

Source code needs to be properly structured, use consistent indenting, semi-colons, etc. Doing so makes it easier to understand, read, and debug your code.

Your code must be properly and consistently formatted. You can do it by hand, or, you can use Prettier (https://prettier.io/) to do it automatically.

There are two ways to use Prettier. First, using the npm command:

npm run prettier

This will rewrite your files to use proper formatting. NOTE: running this command will overwrite your file, so make sure you have saved your work before you run it.

Debugging Code and Tests

Submitting your Assignment

There are two ways to complete your assignment:

A) Full solution

npm run prepare-submission

This will do a number of things automatically for you:

create a submission/ directory, deleting an existing one if present
run prettier on the source
copy all files under src/ to submission/src
copy json to submission/package.json
run eslint and write the output to submission/eslint.log
run npm test and write the output to submission/test.log
zip the submission/* directory to zip

You can upload submission.zip to Blackboard for submission.

B) Single Solution and Video Explanation (audio and screenshare)

NOTE: Please make sure to indicate which method A) or B) you have chosen in the submission box and include the appropriate links during Blackboard submission!

Discussion of Other Assignment Files

You may be wondering about some of the other files in this project. While you don’t need to modify them, or use them directly, here is what each one does:

node_modules/ – the installed dependencies necessary to run prettier, eslint, etc., installed when your run npm install.

.eslintrc.js – configuration for eslint, see https://eslint.org/docs/user-guide/configuring

.prettierrc.js – configuration settings for prettier, see https://prettier.io/docs/en/configuration.html

package.json – node.js package info, dependencies, build scripts, see https://docs.npmjs.com/files/package.json

package-lock.json – a generated file with dependency version information, see https://docs.npmjs.com/files/package-lock.json

WEB222 Assignment 3

Objective:

Practice writing HTML Markup, Using Media Elements, Writing for the Web, and Using Open Archives.

Overview:

You are asked to create an educational/informational website about one of your favourite Books, Television Shows, or Movies. You will pick a Book/TV Show/Movie and research it online. You will then create a multimedia website that uses resources about your chosen musical artiste/genre (e.g., images, audio, and video) from open web archives.

The web is full of both proprietary and open-licensed resources. The former cannot be reused by you: you can’t take an image or logo from someone else’s site and use it on your own. This is a copyright violation. However, there are also many open resources that you can copy and reuse. Learning how to find and use these correctly is important when building your own web content.

A high value will be placed on academic integrity and adherence to copyright law in your work on this assignment. Please take it seriously.

Requirements:

Step 1. Choose a Book/TV Show/Movie

Pick a Book/TV Show/Movie that you like.

It can be modern or historical, popular, or obscure. Ideally you should choose something that has meaning to you so that you can bring your own experience into play. You must work on your own (i.e., you can’t partner with other students in the course or other sections). Given the number of possible options, it would be surprising if two students chose the same one.

Step 2. Research

Research your chosen Book/TV Show/Movie. Learn as much as you can. Take notes to help you with the creation of your website. You may NOT copy any text word-for-word, only use it as background material.

Use at least 4 separate web resources in your research (i.e., you can’t use Wikipedia and be assume you’ve done enough). Try to find reputable sources of information. Take notes as you do your research on these sites and keep track of all the sites/URLs you use. You will need to properly cite these in your about.html page (see below).

Step 3. Write a Research Summary

Write a 750-to-1000 word summary of your research. Your goal is to educate a general audience about your chosen artist/genre, who likely won’t know anything. Give the reader an overview and summary, but also include specific details, quotes, etc. You should define any terms you use, and help your reader understand the concepts you discuss.

You may NOT copy/paste any text or use AI. All words must be written by you.

Step 4. Convert to Markup

Convert your text to HTML5 markup. Make use of any and all appropriate HTML elements https://developer.mozilla.org/en-US/docs/Web/HTML/Element. For example, if you use lists or acronyms, quotes or technical terms, dates or definitions, etc. you should make use of the associated HTML5 elements. You will be graded on the appropriate use of HTML5 elements—you can’t make everything a <p> or <div>.

In your final markup, you should try to use most of the following HTML5 semantic elements below (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element):

<meta> tags for document, author, topic details
<title> for the document’s title
<article>, <header>, <footer> for the structure of your document
<nav>, <li> for navigation links
Headings <h1>, <h2>, …
Definitions using <dfn>
Figures using <figure>, <figcaption>
Lists using <ol>, <ul>, <li>
Paragraphs <p>
Hyperlinks <a>
Abbreviations <abbr>
Quotes and Citations using <q>, <blockquote>, <cite>
Data and Time using <time>, <data>
Inline text with <em>, <strong>

You will be marked on your knowledge and use of these elements, and how well you have used them to markup your text. You may NOT submit a series of plain text paragraphs with no other elements. Spend some time choosing and implementing your markup.

Step 5. Add Media

Find supporting media resources to help educate the reader on your topic. Media helps tell a story and is one of the secret powers that the web has over other print media.

Here’s an example web page from the Globe and Mail newspaper that uses a mix of text and media well:

https://www.theglobeandmail.com/canada/article-the-last-lighthouse-keeper-why-a-nova-scotian-couple-refused-to-leave/

In this site you see all of the following HTML5 and media being used:

Text Headings and Paragraphs
Images with captions
Audio
Video, both looping/muted in the background, and also embedded
Graphics (e.g., Interactive Map)

Your site doesn’t need to be this elaborate, but hopefully you get some ideas to help guide your use of text and media.

You can use any open licensed media resource that allows reuse but may not use copyright materials. How do you know if something is copyright? Everything is copyright by default! Unless you are told you can reuse something that you find, assume that you can’t. Open licensed materials will be marked as such.

Here are some links to help you find open licensed media:

You are asked to include the following open licensed resources on your page:

At least 3 images
At least 1 video (i.e., using the <video> element) or YouTube embed (i.e., using an <iframe>)
At least 2 audio resources (i.e., using the <audio> element) or audio embeds.

Use appropriate HTML to include these resources in your site along with the text you have written. You may link to external URLs where applicable (i.e., you don’t have to download and use resources if they are publicly hosted). Make sure you do the following:

All images should have alt text included and used captions to describe the image and give credit
Videos and Audio should include controls
Use appropriate file sizes for all media. You can use a tool like https://squoosh.app/ to reduce the size of an image that is very big to download.

Step 6. Add A Basic Stylesheet

This assignment is not about the page’s style (fonts, colours, etc). We will focus on style when we look at CSS later in the course.

However, you are encouraged to use one of the various “class-less” CSS stylesheets described here: https://css-tricks.com/no-class-css-frameworks/ These stylesheets can be included in the <head></head> of your document, for example:

<head>

Try experimenting with some of these stylesheets to find one that makes your page look good to you.

Coding:

Use the website starter project in the assignment ZIP file. Install all dependencies by running the following command in the root of the assignment (e.g., in the same directory as package.json):

npm install

Your code should all be placed in the src/ directory. You will find 3 HTML files there now, which should be updated by you as follows:

src/index.html – Your main web page should go here. Be sure to create a proper HTML5 document and also include hyperlinks to the about.html and honesty.html pages.

src/about.html – Include information about yourself (the author). Be sure to create a proper HTML5 document as well as links to index.html and honesty.html.

src/honesty.html – Include the standard text for student submissions, as well as credits for any and all resources you used in your site (e.g., citations for images, videos, etc). Be sure to create a proper HTML5 document, as well as links to index.html and about.html.

NOTE: you are welcome to create other pages if you need them. Just remember to link all of your pages together.

Running a Web Server:

You can start a local web server to test your code in a browser by running the following command:

npm start

This will start a server on http://localhost:3000, which you can open in your web browser

To stop the server, use CTRL + C

Submission:

When you are finished, run the following command to create your submission ZIP file:

npm run prepare-submission

This will generate submission.zip, which you can hand in on Blackboard.

WEB222 Assignment 4

Overview

This assignment is designed to have you practice working with HTML and the DOM in order to create both static and dynamic web content.

You are asked to prototype a fictional Music App. Your app will focus on a specific music genre and allow users to browse different artists and find specific songs. Because your app’s artists and songs will change frequently, we often separate our data from its UI representation. This allows us to quickly make changes and have the app always use the most current music catalogue.

NOTE: in a real music app, our data would be stored in a database. We will simulate working with a database by using JavaScript Objects and Arrays in separate files.

Pick Your Music Genre and Artists, Songs

You need to decide on the following details for your app:

Music Genre: your music app is going to focus on a particular type of music. What is it? You could use the same type of music as you chose in Assignment 3 or pick another.

Name: what is your app called? Pick something unique and relevant to your chosen music genre.

Slogan: what is your app’s slogan (i.e., a short description)? This will help a user to determine if your music app is worth using.

Artists: which music artists/bands does your app include? Based on your chosen music genre, pick at least 3 artists that make this type of music. No two students can use the exact same set of artists.

Songs: pick a minimum of 20 songs by your chosen artists. Each song will belong to one of the artists.

Modelling your App’s Data

Artists

Each artist needs three things:

artistId: a unique String that identifies this artist. If two artists have the same name, we need a way to tell them apart. In this assignment, we’ll use the following format for all artistIds: /^AID-\d+$/ For example: “AID-5678” or “AID-123451”. The start of every artistId will be “AID-“ and will then be followed by 1 or more digits.

name: a human-readable String meant for display. While the artistId is a unique key for the data used by programs, the name is meant to be shown to a user.

urls: an Array of Objects containing one or more links for this artist. Maybe they have their own web site, social media, Wikipedia page, etc. Make sure each artist has at least 2 links. Each Object in this Array will have the following properties:

url – a String with a URL (e.g., an Instagram URL)
name – a String with a friendly name for what the link is (e.g., “Instagram”)

Here’s an example of what an artist might look like:

{

artistId: “AID-51234”,

name: “Artist Name”,

urls: [

{ url: “https://link-to-website.com”, name: “Website” },

{ url: “https://instagram.com/name”, name: “Instagram” }

]

}

Songs

Each song needs the following things:

songId: a unique String that identifies this song. The format is /^SID-\d+$/ For example: “SID-1234” or “SID-712343”. The start of every songId will be “SID-“ and will then be followed by 1 or more digits.

artistId: a String that indicates which artist this song belongs to (e.g., “AID-51234”)

title: a short String that names the song

year: a String with the year (4 digits) that the song was recorded

duration: a Number of seconds (i.e., an Integer value) for the song’s length. When we store time values, we often store them in whole numbers (seconds) vs. floats, and convert them to minutes and seconds in the UI for display.

url: a String with a URL to a site where the user can listen to the song. This might be YouTube or SoundCloud or another site that hosts it.

explicit: a Boolean that indicates whether this song has been flagged as explicit in the system, and should NOT be shown to users. Make sure at least 2 of your songs have explicit set to true.

Here’s an example of what a song might look like:

{

songId: “SID-13423453”,

artistId: “AID-51234”,

title: “Song Title”,

year: “2020”,

duration: 196,

url: “https://www.youtube.com/watch?v=dQw4w9WgXcQ”,

explicit: true

}

Your artist and song data will go in `src/artists.js` and `src/songs.js` respectively. See these files for technical details about how to code your data.

Take some time now to enter all of your app’s data.

App Web Site HTML

Your app’s HTML file is located in `src/index.html`. A brief HTML skeleton has been created, and you are asked to fill in the rest using your information above.

Some of your site will be static (i.e., coded in HTML directly in index.html) and never change. Other parts of the site will be dynamic (i.e., created using DOM API calls at run-time) and will update in response to various events and user actions.

Here is a basic wireframe of what your site needs to include, and which parts are static or dynamic. NOTE: don’t worry too much about how it looks. Focus on the structure and functionality.

App Name

Slogan/Description…

Artist1 Artist2 Artist3 …

Artist1 Name (Twitter, Instagram, SoundCloud)

Song Name	Year Recorded	Duration (mm:ss)
Song 1 name…	1976	1:45
Song 2 name…	2015	13:33
Song 3 name…	2021	6:05
…	…	…

Dynamic Content

All of your app’s dynamic content will be written in JavaScript in the `src/app.js` file. Here is a list of the tasks you need to complete:

Create an event handler to run when the page is loaded. Make sure you don’t do anything to the DOM until it’s fully loaded. Your function should do the following:
1. Create all of the buttons for your app’s Artists
  1. Loop through all of your Artist objects and create a <button> element for each, adding it to the <nav id=”menu”>…</nav>
  2. Use each Artist’s name for the button’s text

When the button is clicked, show that Artist’s Name, Links, and Songs. See below for more details.

Show a list of Songs in the <tbody>…</tbody> of your Table. By default, you should use your first Artist on load. See below for more details

Write a function that will show a list of songs in the <tbody>…</tbody> based on the chosen Artist:
1. Update the text of the Selected Artist above your table with the Artist’s Name and create anchor elements for all of the Artists Links (i.e., you should be able to open these links to see more info about the artist)
2. Clear the current <tr>…</tr> rows from the <tbody>…</tbody>. HINT: innerHTML = “”
3. Filter your Songs Array (i.e., use Array.prototype.filter()) to get:
  1. All Songs for the chosen Artist. HINT: use Array.prototype.includes()
  2. All Songs that are NOT flagged
4. Loop (use Array.prototype.forEach()) over your filtered song list and add them to the table’s body using DOM methods (i.e., not innerHTML):
  1. Create a <tr> element
    1. Add a click handler to your <tr> that will console.log() the song whenever the user clicks it
  2. Create <td> elements for the song’s name, year, and duration.

Make the song’s title a link to the URL for the song, which opens in a new tab or window

Convert the duration in seconds to a value in mintues:seconds (e.g., 120 seconds would become 2:00)
Append these <td> elements to the <tr>
Append this <tr> to the <tbody>

In your solution, you will likely require all of the following:

log() and NOTE that you can log Objects like so: console.log({ object })
querySelector() to find elements in the DOM
createElement() to create new DOM elements
appendChild() to add an element as a child of a DOM node
innerHTML to modify the HTML content of an element. Don’t overuse this!

You are encouraged to use what you learned in the first 3 assignments and write proper functions and semantic HTML.

Coding:

Use the website starter project in the assignment ZIP file. Install all dependencies by running the following command in the root of the assignment (e.g., in the same directory as package.json):

npm install

Your code should all be placed in the src/ directory.

Running a Web Server:

You can start a local web server to test your code in a browser by running the following command:

npm start

This will start a server on http://localhost:1234, which you can open in your web browser

To stop the server, use CTRL + C

Submission:

When you are finished, run the following command to create your submission ZIP file:

npm run prepare-submission

This will generate submission.zip, which you can hand in on Blackboard.

WEB222 Assignment 5

Overview

This assignment is designed to have you practice building more complex HTML and CSS layouts. We will continue to iterate on your previous Assignment 4 Music App static and dynamic web content.

You are asked to update the design of your fictional Music App. This time, instead of displaying your products in an HTML table, you will create visual product “cards” that show an image, song name, year, and duration.

You must do all the work for this assignment on your own. You may consult your notes, use the web for inspiration, but you should not copy code directly from other sites, or other students. If you need help, ask your professor.

Cards

Cards on the web, much like trading- or playing cards, are rectangular areas that allow you to visually present a lot of related data. We often see them used in online stores, social media, and anywhere that we want to mix images, titles, and text in a rectangle. Here are some real-world examples from Spotify, Amazon, SoundCloud, and AirBNB:

There are lots of resources you can use to learn more about creating a card, for example:

Update Your Store to Use Cards

Modify your solution to Assignment 4 in order to replace the HTML table with rows of cards. To do this, you should follow these steps:

Create a copy of your Assignment 4 project, so you don’t lose your previous work.

Start simple. In your HTML file, create a single product card (i.e., a <div>) that includes an <img> of the Song/Artist, a heading (e.g., <h2> or <h3>) for the Song Name, a <time> for the Year Recorded, and <span> for the Duration (you can modify the HTML elements you use, these are just suggestions).

Use CSS classes on your card’s elements in order to apply colours, fonts, margins, padding, borders, etc. until you have something that you think looks good.

Create rows of cards. Use Flexbox or CSS Grid to create rows that repeat your cards across and down. For now, you can copy and paste your card from step 1 over and over in order to repeat it. Make your page look good with rows of 3 or 4 cards. Adjust the spacing, size, etc. until you’re happy with how it looks.

Find at least 4 images to use in your cards. You don’t have to find an image for every single song (i.e., you can repeat the same ones), but you should have at least 3 unique images.

Make sure you optimize the images so they are not too big to download (i.e., don’t use a 5000×6000 image in a card that uses 400×200).

You can use https://squoosh.app/ for images that you download. Or you can also use a trick with https://unsplash.com/ images to resize them automatically via the URL. For example, this bike image https://unsplash.com/photos/tG36rvCeqng. Here’s the full-sized image https://images.unsplash.com/photo-1485965120184-e220f721d03e (it’s 3.8M in size, and 4440×2960). We can reduce that image by adding some parameters to the image URL: ?auto=format&fit=crop&w=750&q=80 to crop and resize it to 750 pixels wide, and reduce the quality a bit to 80%, like this: https://images.unsplash.com/photo-1485965120184-e220f721d03e?auto=format&fit=crop&w=750&q=80 See https://unsplash.com/documentation#dynamically-resizable-images for more details.

Update your `src/songs.js` file so that each Song Object has an `imageUrl` property. This imageUrl should be the URL or filename (i.e., relative path) of an image to use for this product in your card. Multiple songs can use the same image URL if you don’t have enough unique images for each of the songs.

Remove the card’s HTML you wrote earlier and write a function in JavaScript that creates them dynamically instead. Your function should accept a song Object from your songs array and create a card in the DOM, using the HTML and class names you wrote above. Here’s some code to get you started:

function createSongCard(song) {

// Create a <div> to hold the card

const card = document.createElement(‘div’);

// Add the .card class to the <div>

card.classList.add(“card”);

// Create a song image, use the .card-image class

const songImg = document.createElement(‘img’);

songImg.src = song.imageUrl;

songImg.classList.add(“card-image”);

songImg.appendChild(songImg);

// … rest of your card building code here

// Return the card’s <div> element to the caller

return card;

}

Modify your page load and button click events so that instead of creating table rows for each song, you call your `createSongCard()` function and get back the card’s <div>…</div> element, which you can now place in the DOM (e.g., using appendChild()). Clicking your artist buttons should show the correct song cards on the page.
Clicking on the card’s image should open the `url` of the song in a new browser tab.

Unlike in previous assignments, the CSS and visual styling of your assignment does matter this time. Take your time to make something visually pleasing and functionally complete.

Coding:

Use your copy of the website starter project in the assignment-4 ZIP file. Install all dependencies by running the following command in the root of the assignment (e.g., in the same directory as package.json):

npm install

Your code should all be placed in the src/ directory.

Running a Web Server:

You can start a local web server to test your code in a browser by running the following command:

npm start

This will start a server on http://localhost:8080, which you can open in your web browser

To stop the server, use CTRL + C

Submission:

When you are finished, run the following command to create your submission ZIP file:

npm run prepare-submission

This will generate submission.zip, which you can hand in on Blackboard.

WEB222 Assignment 6

Overview

This assignment is designed to have you practice working with HTML Forms via HTML, CSS, and JavaScript. We will continue to iterate on your previous Assignment 4 and 5 Music App.

You are asked to update the design of your fictional Music App. This time, you will add some HTML Forms, including:

A form for users to sign-up for the Music App’s newsletter
A form for users to request a new Artist be added to the App

You must do all the work for this assignment on your own. You may consult your notes, use the web for inspiration, but you should not copy code directly from other sites, use AI, or work with other students. If you need help, ask your professor.

Newsletter Sign-up Form

A common requirement of many websites today is the ability to have users sign up for a newsletter. This is a simple form that allows a user to enter their Email address and subscribe. Here are a few examples for you to consider:

Create a footer in your main page and include a simple form that allows the user to sign up for a newsletter. Make sure that the user can’t submit invalid data.

To simulate submitting a form, you should POST to https://httpbin.org/post (see https://httpbin.org for info).

Requesting a New Artist

Add a new page, and links from the main page, to allow a user to Request a New Artist. On this page, create a form that allows the user to specify the artist they would like to see added to the app. This should include:

Artist’s name
Music Genre, which should use a <datalist> for autocomplete with 10 pre-defined musical genres. Allow the user to specify a different genre if the one they want isn’t available
Multiple URLs (support any number) for their social media. Use a single `input` element for all URLs
Multiple URLs (support any number) for example songs and videos by this artist. Show one `input` element and have an `Add` button that dynamically adds another `input` element below it, so the user can include as many song/video links as they want.
A checkbox to specify if the artist’s music includes explicit lyrics
A description of why the user thinks this artist should be added (arbitrarily long text)

Make sure your form uses proper labels, types, attributes, names, don’t allow the user to input invalid data, etc.

Also make sure your form is styled properly so it is easy to read and use. You will be marked on the design and effectiveness of your form.

To simulate submitting a form, you should POST to https://httpbin.org/post (see https://httpbin.org for info).

Coding:

Use a copy of the website starter project in the assignment-4 ZIP file. Install all dependencies by running the following command in the root of the assignment (e.g., in the same directory as package.json):

npm install

Your code should all be placed in the src/ directory.

Running a Web Server:

You can start a local web server to test your code in a browser by running the following command:

npm start

This will start a server on http://localhost:8080, which you can open in your web browser

To stop the server, use CTRL + C

Submission:

When you are finished, run the following command to create your submission ZIP file:

npm run prepare-submission

This will generate submission.zip, which you can hand in on Blackboard.

WEB222 Assignment Answers (1-6)

Download Details:

Description

WEB222 Assignment 1

Introduction

Submission

Setup

Install Dependencies

Install a Proper Editor

Learn how to Navigate the Code

Learn how to Run the Assignment Tests

Different Ways to Run Tests

Learn how to Lint your Code

Learn how to Properly Format your Code

Submitting your Assignment

Discussion of Other Assignment Files

WEB222 Assignment 2

Introduction

Submission

Setup

Install Dependencies

Install a Proper Editor

Learn how to Navigate the Code

Learn how to Run the Assignment Tests

Different Ways to Run Tests

Learn how to Lint your Code

Learn how to Properly Format your Code

Submitting your Assignment

Discussion of Other Assignment Files

WEB222 Assignment 3

Objective:

Overview:

Requirements:

Coding:

Running a Web Server:

Submission:

WEB222 Assignment 4

Overview

Pick Your Music Genre and Artists, Songs

Modelling your App’s Data

Artists

Songs

App Web Site HTML

Dynamic Content

Coding:

Running a Web Server:

Submission:

WEB222 Assignment 5

Overview

Coding:

Running a Web Server:

Submission:

WEB222 Assignment 6

Overview

Coding:

Running a Web Server:

Submission:

Related products

WEB222 Assignment 6 Solved

SOLVED:WEB222 Assignment 5

WEB222 Assignment 5 Solved