/Code_Lab_Excercises

A collection of work done for Code Labs Front End Development course.

Primary LanguageHTML

Code_Lab_Excercises

A collection of work done for Code Labs Front End Development course.

Class 1: Exercise #1 - Basic Aim: Create a new project (with only an HTML file) that uses JavaScript to change the color of a Heading element.

Create new folder with HTML file Add a Heading Element with text inside Create a <script></script> tag at the bottom of the page Write the logic to select a heading and change its color Exercise #2: Advanced Aim: Create a new project (with an HTML and JavaScript) that uses JavaScript to change the color of a Heading element on a button click.

Class 2: JavaScript Foundations - Part 1
  • Exercise #1: Basic Aim: Create a variable for every JavaScript Data Type Create a variable that holds a string value Create a variable that holds a number value Create a variable that holds a boolean value Create a variable that holds a null value Create a variable that holds an undefined value Create a variable that points to an object instance Create a variable that points to an array instance Create a variable that has no default value declaration
  • Exercise #2: Intermediate Aim: Dynamically display a list of food items and prices using HTML & JavaScript

    Create a LIST of OBJECTS, each object having a name and price property LOOP over that LIST, dynamically create a new list item with the food name inside, and append that item to an existing HTML UL element

  • Exercise #3: Advanced Aim: Create a function that takes two numbers as arguments (num, length) and returns an array of multiples of num until the array length reaches length. Notice that num included in the returned array.
Class 3: JavaScript Foundations - Part 2
  • Exercise #1: Basic Aim: Create a function that takes in an argument and uses string interpolation to print that arguments value somewhere in a text string

    Create a function Have that function take in an argument Print a statement that uses the variable along with some other text

  • Exercise #2: Intermediate Aim: Create an application that, on button click, runs a function that prints out a users name, age, and occupation

    Create the HTML with a button Create a function that takes in a user object Print each item in the user object out in a string to the console

  • Exercise #3: Advanced Aim: Create a function that takes an object and returns the keys and values as separate arrays. Return the keys sorted alphabetically and their corresponding values in the same order.
Class 4: Building Real Things
  • Exercise #1: Basic Aim: Create a button that changes the background and text color randomly when clicked
  • Exercise #2: Intermediate Aim: Create a function that returns the number of true values in an array. Examples countTrue([true, false, false, true, false]) ➞ 2

    countTrue([false, false, false, false]) ➞ 0

    countTrue([]) ➞ 0 Notes

    Return 0 if given an empty array. All array items are of the type bool (true or false).

  • Exercise #2: Advanced Aim: Create a working JavaScript Clock or any other project we created today.
Class 5: Bookmarking App Exercise #1: Intermediate Aim: Create an application that prints out users information on submission of a form and saves the results to local storage
Class 6: JavaScript Essential Concepts Exercise #1: Basic Aim: Create a function that calculates the area of a triangle given the base and height as arguments. Call the function a few times with different inputs.

Exercise #1: Intermediate Aim: Write a function that returns an array containing all the numbers inclusive to that range given the start and end values.

Notes

The resulting array's sort order is dependent on the input values. All inputs provided in the test scenarios are valid. If the start is greater than the end, return a descendingly sorted array; otherwise, ascendingly sorted. Exercise #3: Advanced Aim: Create a function that takes three collections of arguments and returns the sum of the product of the grouped numbers.

Clsas 7: JavaScript Intermediate Concepts
  • Exercise #1: Basic Aim: Write a function redundantReturn that takes in a string a parameter named str. This function should return another function that returns a message using the str variable. Print that message to the developer console.
  • Exercise #2: Intermediate Closures are functions that remember their lexical environments. Lexical environments mean the environment in which the function was declared.

    function parent(x) { return function closure() { // Closure is declared here. return x; }; }

    const remember = parent("remembers me"); // Seems like the variable x would be gone after // parent is executed, but it's not.

    closure(); // Return "remembers me" Aim: Fix the code to correctly implement the callback.

  • Exercise #3: Intermediate You will be given an array of drinks, with each drink being an object with two properties: name and price. Create a function with the drinks array as an argument and return the drinks objects sorted by price in ascending order.

    Assume that the following array of drink objects needs to be sorted:

    drinks = [ { name: "lemonade", price: 50 }, { name: "lime", price: 10 } ];

  • Exercise #4: Intermediate Aim: Create the function that takes an array with objects and returns the sum of people's budgets.
  • Exercise #5: Advanced Write a function that converts an object into an array, where each element represents a key-value pair in the form of an array.