Home HTML Data Types DOM JavaScript JS Debugging

College Board Big Idea 1

Identifying and Correcting Errors (Unit 1.4)

Become familiar with types of errors and strategies for fixing them

  • Review CollegeBoard videos and take notes on blog
  • Complete assigned MCQ questions if applicable

Code Segments

Practice fixing the following code segments!

Segment 1: Alphabet List

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

Code:

%%html

<script>
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = [];

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

console.log(alphabetList);
</script>

What I Changed

I changed instead of having i being pushed into the list, we index the letter using its index from i.

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:

%%html

<script>
// Copy your previous code to built alphabetList here
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = [];

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

console.log(alphabetList);

let letterNumber = 4

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

// Should output:
// "e" is letter number 5 in the alphabet

</script>

What I Changed

I added my original list and changed letternumber to 4. I also changed the condition to alphabetList.length. I also changed the console.log to alphabetList[letterNumber] + “ is letter number “ + (letterNumber+1) + “in the alphabet”

Segment 3: Odd Numbers

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

Code:

%%html

<script>
let odds = [];
let i1 = 1;

while (i1 <= 10) {
  odds.push(i1);
  i1 += 2;
}

console.log(odds);
</script>

What I Changed

I changed the list to odds and changed to i to 1. Then it ouputs the odd numnbers.

BELOW NOT EDITED

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.
%%html

<script>
var newNumbers = [];

for (var i = 1; i <= 100; i++) {
    if (i % 5 === 0 || i % 2 === 0) {
        newNumbers.push(i);
    }
}

console.log(newNumbers);
</script>

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.

%%html

<script>
var menu = {
    "burger": 3.99,
    "fries": 1.99,
    "drink": 0.99
};

var selectedItems = []; 

// Show the user the menu and prompt them to select items
console.log("Menu");
for (var item in menu) {
    console.log(item + "  $" + menu[item].toFixed(2));
}

// Simulate user selecting items
selectedItems.push("burger"); // User selects a burger
selectedItems.push("fries");  // User selects fries
selectedItems.push("drink");  // User selects a drink

// Calculate the total cost based on selected items
var total = 0;
for (var i = 0; i < selectedItems.length; i++) {
    var selectedItem = selectedItems[i];
    if (menu[selectedItem]) {
        total += menu[selectedItem];
    }
}

console.log("Total: $" + total.toFixed(2)); // Display the total cost
</script>

Hacks

  • Fix the errors in the first three segments in this notebook and say what you changed in the code cell under “What I Changed” (Challenge is optional)