Hybrid

Hybrid Exercises

Module Still Under Development

Hybrid Exercises

JavaScript Class Exercise

The purpose of the first Hybrid exercise is to make sure that you are capable of working with JavaScript objects using the class syntax. You will be creating your own JavaScript file that contains your class.

Create an HTML page that loads a main.js file with type="module".

Your main.js file needs to import your class JavaScript file, which needs to import the base class that you select from this Gist (opens new window). Then create your own JavaScript class which extends your selected base class.

Features that your class script needs to have:

1. It must extend the imported base class.
2. It must called the super method from the constructor and pass the required parameters.
3. It must call each of the methods from the extended class at least once.
4. Your class must have at least one public property and one private property.
5. Your class must have at least one static method or property.
6. Your class must have one property that uses a getter and/or setter.

Your main.js needs to instantiate at least one instance of your own class and then access the available properties and methods from your class and the base class to demonstrate that they all work properly.

Submission

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 - prof3ssorSt3v3 to be a collaborator on your private Github repo.

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

Custom Web Component Exercise

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

Your component will be a dialog box that could be used to show messages to the user. When something happens on the page, like an error or the user interacting with something, then the dialog appears with a message. The dialog has a close button which the user can click to dismiss the dialog. It's like an alert() that can be styled with CSS.

You will have a web page called index.html which loads ./css/main.css and ./js/main.js files. Add some lorem ipsum text to your HTML file plus TWO copies of your custom web component.

Create your own custom dialog web component named after yourself. Eg: <YOU-dialog>. Create your own javascript module named after the component. Eg: YOU-dialog.js. This will be imported by main.js, which is loaded as a module by your index.html.

Your component needs the following basic structure:

<YOU-dialog action="func" level="info" label="hello">
  <span slot="title">Message Title</span>
  <span slot="message">Message to user</span>
</YOU-dialog>

You can pick the attribute names yourself. There are three possible values for the level attribute - info, success, and error. Based on the value of the level attribute there should be a different background color and text color in the dialog. (The CSS is set by the value of the level).

The action attribute will be the name of a function from your main.js script. The function in your main.js file only needs to display a message in the console, but it can do something additionally if you want it too. The label attribute is to be used as the text on a button that is displayed at the bottom of your dialog. When clicked, the button should run the function that was passed through the action attribute.

The content inside the title slot element needs to be used for the dialog title and shown as an h1 or h2 element. The h1 or h2 element must use #191a1b as the text color.

The content inside the message slot element needs to be used for the dialog message (shown as a p element).

Your custom component should have two built-in methods - open() and close(). By default a <YOU-dialog> component will be styled as display: none, so the user does not see it. In your main.js file, add an event listener for a click event to call the open() method. When the <YOU-dialog>'s open method is called from your own event listener, add a click event listener to the <YOU-dialog> which will call the close method when the user clicks anywhere on the dialog.

You will need at least TWO things for the user to click on in your HTML. Each item will call the open method for a different dialog.

Click Listeners

All event listeners must be added through your Javascript, using addEventListener.

If you put onclick attributes in your HTML, you will automatically lose 20% of your grade. One percent for each year since this approach was the recommended way to add event listeners.

Example project structure:

/index.html
  /js
    - main.js
    - YOU-dialog.js
  /css
    - main.css

All the CSS, JavaScript, and HTML for the component should be inside your YOU-dialog.js file. The main.css file will be styling for your index.html file. Be sure to add default styling including fonts and colors to your main.css. This is to prove that the CSS in your component is using its own styles.

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 - prof3ssorSt3v3 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.

With the Lit component library you will create a custom ToDo Item web component and then integrate that into a web page.

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

<ul>
  <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" />
</ul>

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 for some 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 some other approach.

Each todo-item should also have an icon that the user clicks to remove itself from the parent on the page. It is best if you use an icon set like FontAwesome (opens new window) or Google Material Icons (opens new window), or you can use a single icon that you include inside the component as an inline image (svg or base-64 image).

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

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 - prof3ssorSt3v3 to be a collaborator on your private Github repo.

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