# Hybrid Exercise List

# 1. Install VSCode

Download and install VSCode on your MacBook Pro.

Then install the list of recommended extensions in the MAD9013 course website.

Take a screenshot with shift + ⌘ + 3 that shows your VSCode installed and the extensions panel open showing the installed extensions.

# Submission

Due Date

Monday Sep 14 by 5pm

Open BS LMS and go to the Activities > Assignments > Exercises page.

Go to the VSCode assignment and submit the screenshot.

# 2. Install NodeJS

Visit the NodeJS website, download and install version 12 of NodeJS.

Open your Terminal App. (Click ⌘ + space and type Terminal then hit return.)

Type node -v and hit return.

Take a screenshot with shift + ⌘ + 3 that shows the results of the installed version in the Terminal.

# Submission

Due Date

Monday Sep 14 by 5pm

Open BS LMS and go to the Activities > Assignments > Hybrids page.

Go to the NodeJS assignment and submit the screenshot.

# 3. Install Git

Visit the Git website, download and install the Git program for MacOS.

Then open your Terminal App (same as previous exercise) and type git --version.

Take a screenshot with shift + ⌘ + 3 that shows the results of the installed version in the Terminal.

# Submission

Due Date

Monday Sep 14 by 5pm

Open BS LMS and go to the Activities > Assignments > Hybrids page.

Go to the NodeJS assignment and submit the screenshot.

# 4. Website Research

For this exercise you will be finding a list of websites and web components that you find appealing or NOT appealing. This list will be used later in the semester for other work.

It is important that you do this research before we start teaching you UI and UX design skills and start changing the way you look at the web. Be sure to include brief statements about why you like or do not like each feature. This assignment will be used in MAD9013.

Find:

ONE websites where you LIKE the colours used.
ONE websites where you do NOT like the colours.
ONE website where you find it EASY to navigate.
ONE website where you find it DIFFICULT to navigate.
ONE website where you like the images and graphics.
ONE website where you do NOT like the images or graphics
ONE website that you feel performs well.
ONE website that you feel does NOT perform well.

These are all about your personal feelings and opinions. We want your gut reactions.

All the answers should be for EIGHT DIFFERENT websites.

# Submission

Due Date

Monday Sep 21 by 5pm (Week 3)

Open BS LMS and go to the Activities > Assignments > Hybrids page.

Go to the NodeJS assignment and submit the screenshot.

# 5. Times and Dates

For this Hybrid activity you need to watch these videos about times and dates in JavaScript.

After watching those videos, create a folder called dates and inside create a JavaScript file called main.js.

When this file is run with NodeJS, it needs to create a variable called today and be assigned the current date and time.

Then use the setDate, setMonth, and setFullYear methods to change the date inside today to October 31, 2010.

Finally, use different methods from the Date.prototype to output

The timestamp version of the variable today
The TIME portion of today
The DATE portion of today
Both the DATE and TIME from today

# Submission

Due Date

Monday Sep 28 by 5pm (Week 4)

Open BS LMS and go to the Activities > Assignments > Hybrids page.

Go to the Dates assignment and a zipped compressed copy of your dates folder containing the JavaScript file.

# 6. JS Namespaces

Once you are comfortable using functions and variables in the global scope, then it is time to start using namespaces to contain parts of your code.

Watch the first part of this video that talks about creating namespaces. You can watch the whole thing if you want 😁.

Here is another video about just JS namespaces.

Create a new JS file and copy this code into your file:

let firstName = 'Your first name here';
let lastName = 'Your last name here';
function hello() {
  console.log(`Hello. My name is ${firstName} ${lastName}.`);
  didWhat();
}
function didWhat() {
  console.log(`You killed my father.`);
  nowWhat();
}
function nowWhat() {
  console.log(`Prepare to die.`);
}
hello();

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Make sure that your finished version of the code will run when loaded with the same output as the original and that all the functions and variables are contained inside the namespace.

Princess Bride

# Submission

Due Date

Monday Oct 5 by 5pm (Week 5)

Open BS LMS and go to the Activities > Assignments > Hybrids page.

Go to the Namespaces assignment copy paste a copy of your whole JS file with the new namespaced version of the code.

UPDATE The assignment submission page in BS LMS was set up to accept file submissions. Since a couple people submitted actual files before I had a chance to change it, now it is stuck as that submission type. So, everyone, please submit your JavaScript file.

# 7. Git Cloning

This exercise will test your ability to clone a repo and then point the contents at a repo of your own.

Start with this public repo. Follow the instructions listed in the ReadMe file, on the home page of the repository.

The README file instructions on GitHub have been updated

# Submission

Due Date

Tuesday Oct 13 by 5pm (Week 6)

There are two parts to the submission of this assignment. Open BS LMS and go to the Activities > Assignments > Hybrids page. Go to the Git assignment and submit the URL for your own private repo.

Next go to your PRIVATE repo and go to the Settings tab. Click on the Manage Access tab on the left side. Click the invite a collaborator button and invite griffis@algonquincollege.com to your repo.

# 8. Arrays of Objects

Create a new GitHub private repo called hybrid8. Include a README.md file in the repository. Clone the new hybrid8 repo on your MacBook Pro.

Copy the data.js file from your hybrid7 folder from the last Hybrid exercise. Add it to your local hybrid8 repo.

Add a new JavaScript file called main.js.

At the top of the new main.js file add a comment block with your name, student email address and the date.

Use the NodeJs require() method to import your data.js file, like this:

const data = require('./data');

With that line at the top of your main.js file, you can now use the data object from the data.js file as if it were actually inside main.js.

Now, use the Array.filter() method to create a new Array called chars which holds all the characters from data.characters EXCEPT the ones whose race starts with "s".

Output the new Array called chars.

Next, use the Array.sort() method and do a custom sort of the chars Array which will sort the objects by the value of their name property.

Last, output the updated chars Array.

Once you have finished writing your script and testing it, we need to update our hybrid8 repo on Github. Run the following commands:

git add -A
git commit -m "your message about the script"
git push origin main

1
2
3

# Submission

Due Date

Monday Oct 19 by 5pm (Week 7)

There are two parts to the submission of this assignment. Open BS LMS and go to the Activities > Assignments > Hybrids page. Go to the Object Array assignment and submit the URL for your own private repo.

# READING WEEK

# 9. DOM Manipulation

Create a folder called DOM-manipulation. Inside that folder create a css folder and a js folder. Add an index.html file to the root and main.css inside the css folder and main.js to the js folder.

In the HTML file, inside the <body>, create 6 <p> elements with Lorem Ipsum text. Add your <script> element below the paragraphs.

In the CSS provide some default styles for your page and the paragraphs.

In your JS file, use the document.querySelectorAll() method to find all the paragraphs on the page. Then use the Array.forEach() method to loop through the array of paragraphs and add two listeners to each element. Each paragraph needs both a mouseover and a mouseout listener.

The mouseover listener function, find the target of the event and change it's textContent to an uppercase version of that text. Use the toLocaleUpperCase() method.

The mouseout listener function, find the target of the event and change it's textContent to an lowercase version of that text. Use the toLocaleLowerCase() method.

There are a few playlists that you can use to help you find answers about this code:

You won't need to watch the entire playlists but scroll through the topics looking for the right videos.

# Submission

Due Date

Monday Nov 9 by 5pm (Week 8)

Zip your modal folder with all the files inside it. Open BS LMS and go to the Activities > Assignments > Hybrids page. Go to the DOM Manipulation assignment and submit a zipped copy of your DOM-manipulation folder 📂.

# 10. Event Targeting

Create a new folder called targeting. Inside that folder create a css folder, an img folder and a js folder. Add an index.html file to the root and main.css inside the css folder and main.js to the js folder.

In the HTML file, inside the <body>, create 6 <p> elements. Inside each paragraph, add an <img> element. Download your images from either the picsum.photos or unsplash website. So, the src value of each image should point to the copy of your image inside the img folder. Don't forget the alt attribute on each image.

Resize and save the images so they are ~200kb in size and roughly half the width of your screen. Use Photoshop to do this and optimize the quality with the smaller file size.

We want to have the name of the photographer or name of the image embedded inside each paragraph. We can use data- properties to achieve this. Eg:

<p data-photographer="Bryan Adams" class="active">
  <img src="./img/myphoto.jpg" alt="Sample Image" />
</p>

1
2
3

Add your <script> element below the paragraphs.

In the CSS provide some default styles for your page and the paragraphs and images. Center the images in the paragraphs. Make the images fill 100% the width of the paragraph.

In your JS file, you need to add a click listener to the <body> element. It will call a function when the user clicks on the body. The function needs to check the target of the event to see if the user clicked on an img element. The target property will be an HTMLElement object. All HTMLElement objects have a property called TagName which will be an uppercase String telling what the element is. Eg: P, BODY, or IMG.

If the user clicked on an img then we want to add an overlay that displays the value from the data-photographer attribute... or whatever data- attribute you used. The overlay should be the same width as the image and should cover roughly the bottom third of the image. See the sample CSS for how this is done.

clicking on the img element needs to toggle the CSS class that you are using to display the overlay. In the HTML above, the class active was used to represent this.

Here is a reference about the data- properties:

Here is a video about the CSS attr() method:

The Event playlist from the previous Hybrid assignment may also be of help to you.

Here is an example of the CSS that you could use. You should customize this CSS to make it your own. Just remember to keep the image partially visible under the overlay while still keeping the text readable.

p {
  position: relative;
}
p img {
  width: 100%;
}
p.active::after {
  position: absolute;
  content: attr(data-photographer);
  bottom: 0;
  right: 0;
  left: 0;
  min-height: 3rem;
  font-size: 2rem;
  line-height: 3rem;
  padding: 0.5rem 2rem;
  z-index: 10;
  color: #fff;
  background-color: hsla(0, 0%, 0%, 0.7);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Submission

Due Date

Monday Nov 16 by 5pm (Week 9)

Zip your modal folder with all the files inside it. Open BS LMS and go to the Activities > Assignments > Hybrids page. Go to the Targeting assignment and submit a zipped copy of your targeting folder 📂.

# 11. prompt

Create a folder called prompt. Inside that folder create a css folder and a js folder. Add an index.html file to the root and main.css inside the css folder and main.js to the js folder.

In the HTML file, inside the <body>, create 4 different headings (h1..h4) with different text. Add your <script> element below the headings.

In the CSS provide some default styles for your page and the headings.

In your JS file, add a click listener to the <body> which will call a function to add a title attribute to whichever heading was clicked.

In the function you must check to make sure it was a heading element that was the target of the click. If it was, then use the window.prompt() method to ask the user for a label for the heading. If the user actually adds some text and clicks the OK button then add the title attribute to the target heading and set its value as what the user typed. If the user clicks the close button, or the cancel button, or the trimmed string from the input field was empty then just exit the function without adding a title attribute.

# Submission

Due Date

Thursday Nov 26 by 5pm (week 10)

Zip your modal folder with all the files inside it. Open BS LMS and go to the Activities > Assignments > Hybrids page. Go to the Prompt assignment and submit a zipped copy of your prompt folder 📂.

JavaScript in the browser provides 3 built-in modal dialogs through alert, prompt and confirm. However, it would be nice to be able to style modal dialogs in a way that matches your site, to use a custom title, to change the labels on the buttons.

This is what you are going to create. Start with a new project folder called modal. All your HTML, CSS, images, and JS go inside here.

Create a webpage with headings, paragraphs, images and a nav bar. Have enough content that it fills the majority of the screen. Don't worry about media queries or responsive layout. Use CSS to style all the elements on the page. Use a custom Google font with a full font-stack, and a colour scheme.

Add click listeners to your links in your Navbar which will launch a modal dialog.

There should be a partially transparent overlay between the page and the modal.

The modal dialog needs a custom title, a content area message, and two buttons. The button labels can be anything you want. One button should be a positive response and the other should be a negative response.

The title in the modal should be the same as the link text in the NavBar that the user clicked to make the modal appear.

Clicking on the overlay will hide the overlay AND the modal dialog.

There should be ONE function that gets called when the user clicks on either the overlay or the buttons in the modal dialog. This function should write to the console something that indicates which of the three things was clicked.

A good way to accomplish this would be with data- properties.

<button id="btnYes" data-message="more coffee">I want more coffee</button>
<button id="btnNo" data-message="want water">I want water</button>

1
2

You can read the values of the attributes as well as the id of the button through the event object that you get in your click handler function. Your overlay could be missing the data- property and that would be your indication that the user clicked on the overlay.

# Submission

Due Date

Monday Nov 30 by 5pm (Week 11)

Zip your modal folder with all the files inside it. Open BS LMS and go to the Activities > Assignments > Hybrids page. Go to the Modal assignment and submit a zipped copy of your modal folder 📂.

← MAD9014 Deliverables Exercise List →

# Hybrid Exercise List

# 1. Install VSCode

# Submission

# 2. Install NodeJS

# Submission

# 3. Install Git

# Submission

# 4. Website Research

# Submission

# 5. Times and Dates

# Submission

# 6. JS Namespaces

# Submission

# 7. Git Cloning

# Submission

# 8. Arrays of Objects

# Submission

# READING WEEK

# 9. DOM Manipulation

# Submission

# 10. Event Targeting

# Submission

# 11. prompt

# Submission

# 12. Modal

# Submission