Home • 20 min read

Home HTML Data Types DOM JavaScript JS Debugging

Segment 1: Alphabet List

Intended behavior: create a list of characters from the string contained in the variable alphabet

Code:

%%js

var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = [];

for (var i = 0; i < 26; i++) {
	alphabetList.push(alphabet[i]);
}

console.log(alphabetList);

What I Changed

The original code outputs a string of numbers instead of text. To combat this problem, I inserted the alphabet variable inside alphabetList.push and to make sure that each letter was iterated separetley, I added [i] after the alphabet variable.

I also changed i < 10 to i < 26 to make sure all 26 letters of the alphabe were listed.

Segment 2: Numbered Alphabet

Intended behavior: print the number of a given alphabet letter within the alphabet. For example:

"_" is letter number _ in the alphabet

Where the underscores (_) are replaced with the letter and the position of that letter within the alphabet (e.g. a=1, b=2, etc.)

Code:

%%js

var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = [];

let letterNumber = 5

for (var i = 0; i < 26; i++) {
	if (i === letterNumber) {
		console.log(alphabet[i-1] + " is letter number " + letterNumber +  " in the alphabet")
	}
}

What I Changed

Instead of using i < alphabetList, I switched it so say i < 26, which is simple way of making sure the code iterates through all 26 letter of the alphabets. The code itself was structurally sound, the thing that needd to be changed though was how the results were being logged in the console.

The first part of console.log need to output the letter. To do this we use alphabet[i-1]. Basically this means once i equals the letterNumber it will then print the current letter it’s on. The reason why we subtract by 1 and go back a number is because javascript starts counting at 0, while we start counting the alphabets by 1. Next we concatenate the rest of the sentence together so we can add both strings and variables.

Segment 3: Odd Numbers

Intended behavior: print a list of all the odd numbers below 10

Code:

%%js

for (i = 1; i<10; i++) {
  console.log(i);
}

What I Changed

To change this code to print all odd numbers, all one must do is change i from a starting of 0 to a starting value of 1. Doing that makes sure that all odd numbers are listed below 10. Also I changed the variables from evens to odds, which doesn’t affect the functionality of the code but it does make the variable more accurate to what it’s doing.

Segment 4: 1-100

The intended outcome is printing a number between 1 and 100 once, if it is a multiple of 2 or 5

  • What values are outputted incorrectly. Why?
  • Make changes to get the intended outcome.
%%js

var numbers = []
var newNumbers = []
var i = 1

while (i < 100) {
    numbers.push(i)
    i += 1
}
for (var i of numbers) {
    if (numbers[i] % 5 === 0 || numbers[i] % 2 === 0)
        newNumbers.push(numbers[i])
}
console.log(newNumbers)

What I Changed

There are two problems that can be observed when running the original code. First 0 is listed the selected range is 1-100. The second problem is numbers in the tens place are repeated twice, when they should only be repeated once. Remarkably, the solution is as bland as the issue.

To make sure 0 isn’t listed, just make it so i starts as 1.

To make sure numbers in the tens place aren’t repeated, instead of running two seperate if statements, combine them into one. So now the computer will see this if statement: if (numbers[i] % 5 === 0 || numbers[i] % 2 === 0). This means if this is true OR if this is true, run the following. When both values are true, it won’t print the same number twice like before, but just print it once.

Challenge

This code segment is at a very early stage of implementation.

  • What are some ways to (user) error proof this code?
  • The code should be able to calculate the cost of the meal of the user

Hint:

  • write a “single” test describing an expectation of the program of the program
  • test - input burger, expect output of burger price
  • run the test, which should fail because the program lacks that feature
  • write “just enough” code, the simplest possible, to make the test pass

Then repeat this process until you get program working like you want it to work.

%%js

//Define the Menu Object
let menu =  {
    burger: 3.99,
    fries: 1.99,
    drink: 0.99
    }

//Show Menu
console.log("Menu")
for (let item in menu) {
    console.log(item + "  $" + menu[item])
}

//Prompt User for Order
let burger = prompt("Would you like a Burger [Yes/No]");
let fries = prompt("Would you like Fries [Yes/No]");
let drink = prompt("Would you like a Drink [Yes/No]");

//Total must start at $0
let total = 0

//Adds cost of items to Menu if yes is selected
if (burger === "yes" || burger === "Yes") {
    total += menu.burger
}
if (fries === "yes" || fries === "Yes") {
    total += menu.fries
}
if (drink === "yes" || drink === "Yes") {
    total += menu.drink
}

//code should add the price of the menu items selected by the user 
if (total === 0) {
    console.log("You didn't buy anything!")
} else {
    console.log("The Total Cost will be $" + total.toFixed(2))
}

Changes

There are many changes to this code. Most of the code is new, while the rest have been modified. We’ll start with the first difference that can be noted from the menu object. Originally, burger, fries, and drink variables were strings instead of actual variables, which doesn’t work out when you’re trying to store a value. To fix this, just remove the quotes so it’s no longer a string, but an actual variable that can store values within itself.

You’ll see the Menu that appears is mostly the same with exception that .ToFixed(2) was removed as it served no purpose as the numbers wouldn’t have gone past 2 decimal places either way.

Next, we have the prompts. This part was nonexistent in the original code, and it prompts the user whether or not the users wants burger, fries, and/or drinks. The user simply has to type Yes or No has directed by the prompt.

Below this, the variable “total” is defined to have a starting value of 0. This is the same as before and it just makes sure that the user is getting a fair cost based off what they buy.

The next part of the code basically states if the user selected yes for the following menu items, add that to their cost. If they didn’t select yes, the code will be ignored and the cost for that item will not be added.

Finally, the last part of code outputs the cost of food in which the user bought. If they didn’t buy anything, a message will appear on such. If they did buy something they will be shown their total cost which was done by concanetating a sentence with the total variable. Also note that toFixed(2) was added to the total variable as without the number would some reason output a very long decimal (this only happened if all 3 items were bought).