Client side programming

Exercise #5 - Exam prep II

slides.com/jkohlin/jsx5/live

Important!

You will get an email, not from me,

 

asking to do a course evaluation for 

Web and user interface design.

 

PLEASE, do it!

What the test will look like

What the test will look like

Don't edit this code!!

Write your code here

Test your Code

resources

test environment

optional

test environment

optional

test environment

Run your code and compare the output to the expedted values

optional

Let's solve some problems

spaghetti recipe

Ingredients: 

  • 90g spaghetti
  • 0.5 teaspoon salt
  • 7.5 dl water

Create a function that takes a number as input (portions) and calculates the recipe for spaghetti. The return value should be an object.

{
    spaghetti: "180 g",
    salt: "1 tsp", 
    water: "15 dl"
}

What do we need to do?

  • figure out how much salt, water and pasta we need
  • multiply what we know with the incoming number
  • populate a new object with those values
  • return that object

Step 1

Create the function wrapper

function pasta(portions) {
  
}

make room for incoming value

Step 2

create variables and calculate each ingredient

function pasta(portions) {
  var spaghetti = portions * 90 // g
  var water = portions * 7.5 // dl
  var salt = portions * 0.5 // tsp
}

Step 3

create the object

function pasta(portions) {
  var spaghetti = portions * 90; // g
  var water = portions * 7.5; // dl
  var salt = portions * 0.5; // tsp
  var output = {
    "spaghetti": spaghetti,
    "water": water,
    "salt": salt
  };
}

Step 4

return the object

function pasta(portions) {
  var spaghetti = portions * 90; // g
  var water = portions * 7.5; // dl
  var salt = portions * 0.5; // tsp
  var output = {
    "spaghetti": spaghetti,
    "water": water,
    "salt": salt
  };
  return output;
}

Now you try!

In pairs

  • Create a function that takes an array of strings as input. 
  • Count all instances of the word "dracula" and return that value as an integer

star: make it case insensitive

https://scrimba.com/c/cv8Eagf2

One more

Create a function that takes an array of strings as input and returns the length of the longest string. 

Step 1

Create the function wrapper

function longestWordLength(words) {
  
}

make room for incoming value

Step 2

figure out what we need to do

  • loop through the array of words
  • compare the length of each to the previous longest word
  • I need a variable for the longest word
  • start by setting it to an empty string
  • return the length of the longest word

Step 2

figure out what we need to do

  • create a variable for the longest word
  • set it to an empty string
  • loop through the array of words
  • compare the length of each to the previous longest word
  • return the length of the longest word

Step 3

code your ideas

  • create a variable for the longest word
  • set it to an empty string
  • loop through the array of words
  • compare the length of each to the longest word
  • return the length of the longest word
function longestWordLength(words) {
  var longestWord = ""
}

Step 4

code your ideas

  • create a variable for the longest word
  • set it to an empty string
  • loop through the array of words
  • compare the length of each to the longest word
  • return the length of the longest word
function longestWordLength(words) {
  var longestWord = "";
  for (var i = 0; i < words.length; i++) {
    
  }
}

Step 5

code your ideas

  • create a variable for the longest word
  • set it to an empty string
  • loop through the array of words
  • compare the length of each to the longest word
  • return the length of the longest word
function longestWordLength(words) {
  var longestWord = "";
  for (var i = 0; i < words.length; i++) {
   if (words[i].length > longestWord-length) {
     longestWord = words[i];
   }
  }
}

Step 6

code your ideas

  • create a variable for the longest word
  • set it to an empty string
  • loop through the array of words
  • compare the length of each to the longest word
  • return the length of the longest word
function longestWordLength(words) {
  var longestWord = "";
  for (var i = 0; i < words.length; i++) {
   if (words[i].length > longestWord-length) {
     longestWord = words[i];
   }
  }
  return longestWord.length
}

Now you try

in pairs

  • Create a function that figures out whether or not coins can be split among a number of friends.
  • The function has two parameters, the first is the amount of coins, the second is the number of friends.
  • Expected output is a boolean

tip: check out the Modulo operator, %

Best of luck

❤️ 

Exam prep II

By Johan Kohlin

Exam prep II

Writing functions with parameters that return values

  • 895

More from Johan Kohlin