MAD9022
Hybrid

Hybrid Exercises

Module Still Under Development

# JavaScript Class Quiz

The first Hybrid deliverable is the Hybrid Class Quiz on Brightspace.

# Submission

See BS LMS for the exact due date.

Go to the Activites > Quizzes section of your MAD9022 course on BS LMS to complete the quiz.

Follow the instructions provided on BS LMS to complete and submit the quiz.

# Custom Web Component Exercise

The second Hybrid exercise is to create your own two custom Web Components without using any Web Component library like Lit and without using any AI generation tool.

The components that you will build are enhanced <input> and <textarea> elements which will keep track of the number of characters typed by the user. Each of the elements needs a required attribute to hold the maximum number of allowed characters. The number of characters typed needs to be displayed beside the <input> or <textarea> control.

The custom components could have names like <capped-input> or <max-textarea> or <limited-input>. So, the developer who is using your components could use something that looks something like this:

<div class="formBox">
  <label for="fullname">Full Name</label>
  <capped-input name="fullname" id="fullname" limit="60" placeholder="Full name" />
</div>
1
2
3
4

Each class should have a private instance property to hold the number of characters typed. The default value of the property needs to be zero. All private class properties should include a day of the week in the name. An internal listener for the input event will update this property and the display of the number of typed characters and its styling. The input event must use an addEventListener method to attach the event.

The display of the typed characters needs to include 3 colors - a base color that is appropriate for the website (same as the color used on form labels), then an amber hue for warning that the user has reached 80% of the max length, and finally a red hue when the user reaches the max length. Additionally, you can update the form control's border-color or background-color.

In addition to the color changes there should be another visual indicator of the progress towards the max length. Examples include an SVG circle with an arc around the edge that shows how much of the max length has been filled or a box along the top or bottom edge of the form control that fills in to represent the percentage of the max length typed. The colors used in the visual indicators should match the color used for displaying the number of characters typed.

# Customizing Colors

The web developer who wants to use your components in their website should be able to customize the colors used in the progress displays. This feature needs to be integrated into your components in one of two ways.

  1. The components should each have optional HTML attributes to hold string values for the colors used as the amber and red hues in the max length displays.
  2. The parent website can set the colors through CSS variables in the main CSS file for the website. The variables and their values will be inherited by the components. So, the CSS inside the component will use the variables to set the colors in its own HTML and SVG.

# Containing Website

Finally, you need to build a website that includes a contact form with full name, email, and comment fields. The name and email fields will use your custom input component and the comment field will use your custom textarea component.

Your project should have the following structure.

- index.html
- css/
  - main.css (your website CSS)
- js/
  - main.js (your website JS file)
- components/
  - capped-input.js (or whatever your component is called)
  - capped-textarea.js (or whatever your component is called)
1
2
3
4
5
6
7
8

Test Your Work

Before you submit your work, be sure to test it.

Also make sure that all of your import paths are relative, so that they work on any server.

# Submission

Due week 6. See BS LMS for the exact due date.

Create a Git repo with your project. The HTML file and the folders for your JS and CSS MUST be at the root of the Git repo.

Create a private Github repo to hold the project repo.

Invite your professor - shah0150 to be a collaborator on your private Github repo.

Submit the URL of your private repo to the Hybrid - Component exercise in BS LMS.

# Lit-based Component Exercise

The third Hybrid exercise is to create your own custom Web Component using the Lit web component library.

As with all component projects, you need to approach this as if there are two different developers. One developer who is building the website and a second developer who is building the component to be used on any website. The component should be designed in a way that the website developer only has to import a single JS file to be able to use the component.

Using the Lit component library you will create a custom ToDo Item web component and then integrate that into a web page. To be clear, this component is NOT the list. It is a component to hold an individual item.

Your component script file should import the Lit library directly from the full CDN URL https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js.

In the finished web page you will have something similar to this:

<div id="myTodos">
  <todo-item text="Buy a burger" complete="false" />
  <todo-item text="Eat a burger" complete="false" />
  <todo-item text="Dream about a burger" complete="true" />
  <todo-item text="Cook a burger" complete="true" />
</div>
1
2
3
4
5
6

Internally each todo-item needs a String property that holds it's text value, another Boolean property that indicates whether or not it is marked as complete.

Each todo-item needs to listen internally for two click events. One click event to be able to toggle the checked status. When the item is set as complete, then the text should be displayed with a less saturated version of your text color plus a strike-through style. The toggle of the complete status could be done with a checkbox or a button or clicking on the text.

The second click event is for removing the todo-item from the page. It should be triggered by the user clicking on a delete button that has a delete icon. To add the icon for the delete you can use a single icon that you include inside the component as an inline image (svg or base-64 image). If you use the SVG or base-64 approach, you can put the SVG into the component CSS or directly into the HTML template. The base-64 image approach can use the base-64 string as a background image or be added as the src attribute value for an <img> tag inside the delete button.

As an example of a background SVG icon image in the CSS:

.todo button span {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E ... %3C/svg%3E");
}
1
2
3
4
5
6

As an example of an SVG icon image in the HTML:

<div class="todo">
  <button>
    <span
      ><svg class="delete-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <!-- svg contents go here -->
      </svg></span
    >
  </button>
</div>
1
2
3
4
5
6
7
8
9

If you want to use an icon for the checked status too, then you can do that too.

Only Import One File

When building a component, never force the developer who is using your component to import more than just the one JavaScript file. No extra image, CSS, font, or SVG files, unless they can be imported by the component JS file from an external URL.

# Containing Webpage

You need to build a containing website that uses the component. The HTML should include a containing <div> element that holds the todo list items. The <div> should have one or two items when the page loads, like the following:

<div id="myTodos">
  <todo-item text="This is a bad example" complete="false" />
  <todo-item text="Add your own text" complete="false" />
</div>
1
2
3
4

# Data for the Todo List

In the website main.js file you should have an array of 2 - 4 initial items. Here is an example:

const initialData = [
  { id: crypto.randomUUID(), text: 'Eat', complete: false },
  { id: crypto.randomUUID(), text: 'Sleep', complete: false },
  { id: crypto.randomUUID(), text: 'Code', complete: false },
  { id: crypto.randomUUID(), text: 'Repeat', complete: false },
];
1
2
3
4
5
6

When the webpage loads, your main.js script should loop through the initial data array and ADD a series of <todo-item> elements on the page to the existing list in the HTML.

# Submission

Due week 10. See BS LMS for the exact due date.

Create a Git repo with your project. The HTML file and the folders for your JavaScript and CSS MUST be at the root of the Git repo.

Create a private Github repo to hold the project repo.

Invite your professor - shah0150 to be a collaborator on your private Github repo.

Submit the URL of your private repo to the Hybrid - Lit exercise in BS LMS.

Last Updated: 5/4/2024, 7:09:54 PM

← 1.1: Promises & Fetch →