MAD9014

# Hybrid Exercise List

# 1. Install VS Code and Node.js

Download and install VS Code (opens new window) on your MacBook Pro.

Then install this list of recommended extensions.

  • Live Server by Ritwick Dei
  • Bracket Pair Colorizer 2 by CoenraadS
  • indent-rainbow by oderwat
  • Live Share by Microsoft
  • Prettier - Code formatter by Esben Petersen
  • SVG Preview by Simon Siefke
  • vscode-icons by VS Code Icons Team
  • GitLens - Git supercharger by Eric Amodio
  • Code Spell Checker by Street Side Software

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

Next, visit the Node.js website (opens new window), download and install version 16.x.x of Node.js. It will be the 'Current' version of Node that you are installing (the green box on the right-hand side of the download page). It is due to become the Long Term Support (LTS) version in October.

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

Week 2 (See BS LMS for exact date)

Open the MAD9014 course in your BS LMS and go to the Activities > Assignments page.

Go to the first hybrid assignment (H1) and submit the two screenshots.

# 2. Functions

Create a JavaScript file that contains 4 functions with similar functionality. All 4 must combine two values. The values can be two strings or two numbers, you decide.

All 4 functions must accept the values to be added as two parameters.

All 4 functions must return a single value - the result of the addition of the two values.

The four functions must meet the following additional requirements.

  1. One function must be a function expression.
  2. One function must be a function declaration.
  3. One function must have default values for both parameters.
  4. One function must be a function expression with an arrow function.

# Submission

Due Date

Week 3 (See BS LMS for exact date)

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

# 3. 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 July 31, 2015. The order that you use these methods may change the result. So be careful. Test your results after each step.

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

  1. The numeric timestamp version of the variable today.
  2. Only the TIME portion of today as a string.
  3. Only the DATE portion of today as a string.
  4. Both the DATE and TIME from today as a string.

# Submission

Due Date

Week 4 (See BS LMS for exact date)

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.

# 4. 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.

Here is a video about what JavaScript namespaces are and how to create one.

If you are still not sure about the differences between functions that are inside and outside of a namespace, then this next video has an initial part that talks about creating namespaces too. You can watch the whole thing if you want 😁.

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

Your assignment is to convert this into a namespaced version.

The two variables need to become properties inside your namespace object.

The three functions need to become method properties inside the same namespace object.

All the calls to the functions and the references to the properties(formerly variables) will need to be prefixed with the namespace object name.

Make sure that your finished version of the code will run when loaded with the same output as the original.

Princess Bride

# Submission

Due Date

Week 5 (See BS LMS for exact date)

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.

# 5. Write a tutorial about JavaScript

Create an account on the Dev.to website (opens new window) and then write and post a tutorial about one of the following topics. When you are done, share the link in the discussion board for your classmates to see and reference.

  • String.prototype.toUpperCase() vs. String.prototype.toLocaleUpperCase()
  • String.prototype.localeCompare()
  • String.prototype.replaceAll() vs String.prototype.replace()
  • String.prototype.indexOf() vs String.prototype.lastIndexOf()
  • String.prototype.substr() vs String.prototype.substring()
  • String.prototype.padEnd() and String.prototype.padStart()
  • String.prototype.split() and Array.prototype.join()
  • String.prototype.slice() and Array.prototype.slice()
  • Array.prototype.sort()
  • Array.prototype.slice() vs Array.prototype.splice()
  • Array.prototype.pop(), push(), shift(), and unshift()
  • Array.prototype.forEach()
  • Array.prototype.filter()
  • Array.prototype.map()
  • Array.prototype.reduce()
  • Number.toString()
  • Number.prototype.toFixed() and Number.prototype.toPrecision()
  • parseInt() and parseFloat()
  • Date.prototype.toLocaleString(), toLocaleDateString(), and toLocaleTimeString()
  • Number.NaN and isNaN()

# Submission

Due Date

Week 7 (See BS LMS for exact date)

Open BS LMS and go to the Activities > Discussions page.

Go to the Tutorial discussion and post the dev.to link to your written tutorial.

--

# READING WEEK

--

# 6. Git Cloning Practice

This exercise will test your ability to clone a repo and then turn it into a repo of your own both locally and on Github.

The process that you are mimicking is like forking a repo except that your new repo will not be connected to the original one in any way.

Start with this public repo (opens new window). Follow the instructions listed in the README file, on the home page of the repository.

# Submission

Due Date

Week 9 (See BS LMS for exact date)

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 rlmckenney to your repo.

# 7. Arrays of Objects

Create a new private repo on GitHub called import-data. Include a README.md file in the repository. Clone the new import-data repo from GitHub onto your MacBook Pro.

Copy the data.js file from your Documents/code/mad9014/hybrid folder (from the last Hybrid exercise). Add the data.js file to your local import-data repo. You can do this through Finder or via the Terminal.

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.

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

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

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.

Add an arrow function that will use an Array forEach method to loop through the Array contents and console.log() each object from the Array.

Once you have finished writing your script and testing it, we need to update our import-data 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

Week 10 (See BS LMS for exact date)

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.

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 rlmckenney to your repo.

# 8. Array Filter and Sort Methods

Your objective is to be able to use the Array filter and sort methods to create a new Array that is different from the original. All the code you write in this Hybrid exercise will be added to your Git Repo from the previous exercise.

There should be a series of commits with understandable, meaningful commit messages. These will reflect all the updates you made in the last exercise and in this one.

You are going to update the main.js file with the new functionality. This new functionality should be written inside the same existing function from last exercise. The code is to be written in addition to the older code.

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.

# Submission

Due Date

Week 11 (See BS LMS for exact date)

There are two parts to the submission of this assignment. Open BS LMS and go to the Activities > Assignments > Hybrids page. Go to the Filter Sort 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 rlmckenney to your repo. This should already have been done for the last exercise.

# 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 a <main> element which contains 6 <p> elements with Lorem Ipsum text. Add your <script> element below the paragraphs, or inside the head with a defer attribute.

In the CSS, provide some default styles for your page and the paragraphs. Make the page have a dark theme.

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.

Then add a click listener function to your <main> element. It needs to figure out, through the target which paragraph was clicked and then turn the background colour of the paragraph to a random color. You can use this function to generate the random colour.

function randomColour() {
  return `#${Math.random()
    .toString(16)
    .substr(2, 6)}`;
}
1
2
3
4
5

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

  1. All about the DOM playlist (opens new window)
  2. JavaScript Events playlist (opens new window)
  3. JavaScript Strings playlist (opens new window)
  4. Generating Random Hex Colours (opens new window)

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

# Submission

Due Date

Week 12 (See BS LMS for exact date)

Zip your DOM-manipulation 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. There is a bunch of needed CSS below.

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 (opens new window) or unsplash (opens new window) website or Pexels (opens new window). All of these sites that are free for your use.

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.

Be sure to add comments to your HTML or CSS file with the sources for your images.

The src value of each <img> should point to your copy of each image inside the img folder. Don't forget the alt attribute on each image.

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

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

# Functionality

Add your <script> element below the paragraphs.

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 that says 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.

p {
  position: relative;
  width: 80vw;
  margin: 1rem auto;
}
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
21
22

Just remember to keep the image partially visible under the overlay while still keeping the text readable. Using hsla() in your CSS for the background-color of the overlay. The overlay will be the ::after pseudo-element. The content property is reading the text from the data-photographer attribute in the HTML.

# Submission

Due Date

Week 13 (See BS LMS for exact date)

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

Last Updated: 9/7/2021, 5:01:48 PM

← Exercise List →