Chapter 2 Exercises

What is wrong with this (FizzBuzz)? It shows error…

for(var i = 0; i <= 100; i++ ){

if(i % 3 === 0){
console.log(“Fizz”);
}

else if(i % 5 === 0){
console.log(“Buzz”);
}

else if(i % 5 === 0 && i % 3 === 0){
console.log(“FizzBuzz”);

else{
console.log(" + i + ");

}

}

}

FizzBuzz

for (let i = 1; i<=100; i++) {
  if(i%3===0 && i%5===0) {
    console.log('FizzBuzz');
  } else if (i%3===0) {
    console.log('Fizz');
  } else if (i%5===0) {
    console.log('Buzz');
  } else {
    console.log(i);
  }
}

It seems that you are using different types of quotes:
and are not valid quotes
you should use "

Other than that is seems that your last else statement does not follow a closed if statement.

Also, as a note, you might want to log i without quotes:
console.log(i);

After this you can continue with the exercise :slight_smile:

Thank you for your help.

The console shows the error in the last if else :slight_smile:

My solutions to the exercises were as follows:

<script>
            // Triangle exercise
            for (let bottom  = 0; bottom < 10; bottom++){
                let row = '';
                for(let i = 1; i <= bottom; i++){
                    row += '#';
                }
                document.write("<p>" + row + "</p>");
            }


            // FizzBuzz exercise
            for (let count = 1; count <= 100; count++) {

                if (count % 3 == 0 && count % 5 == 0) {
                    document.write("<p>FizzBuzz</p>");
                } else if (count % 3 == 0) {
                    document.write("<p>Fizz</p>");
                } else if (count % 5 == 0) {
                    document.write("<p>Buzz</p>");
                } else {
                    document.write("<p>" + count + "</p>");
                }
            }

            // Checkboard exercise
            let checkboard = "";
            for (let row = 1; row <= 8; row ++) {
                
                for (let column = 1; column <= 8; column++) {
                    if (row % 2 != 0 && column % 2 == 0) {
                        checkboard += "#";
                    } else if (row % 2 == 0 && column % 2 != 0) {
                        checkboard += "#";
                    } else {
                        checkboard += " ";
                    }
                }
                checkboard += "\n";
            }
            console.log(checkboard);
        </script>
1 Like

Hey there you’ve got a Syntax error, since you declared

else if{
console.log(i);
}

The interpreter expects there to be a Boolean expression that you don’t declare. That’s why you get that error.

You can fix it by just having an else statement like this :slight_smile:

else {
   console.log(i)
}
// Looping a Triangle
var num_rows = 7;
for (row = 0; row < num_rows; row ++){
  var hash = "#";
  for (col = 0; col < row; col ++){
    hash += "#";
  }
console.log(hash);
}

// FizzBuzz
for (count = 1; count <= 100; count++){
  if (count % 3 == 0 && count % 5 == 0) {
    console.log("FizzBuzz");
  }
  else{
    if (count % 3 == 0){
      console.log("Fizz");
    }
    if (count % 5 == 0){
      console.log("Buzz");
    }
}
  if (count % 3 != 0 && count % 5 != 0) {
    console.log(count);
  }
}

// Chessboard
var num_rows = 8;
var num_cols = 8;
var board = "";
for (row = 0; row < num_rows; row ++){
  for (col = 0; col < num_cols; col ++){
    if((row % 2 != 0 && col % 2 == 0) || (row % 2 == 0 && col % 2 !=0)){
      board += "#";
    }
      else{
        board += " ";
    }
  }
  board += "\n";
}
console.log(board);

Thanks for your help, but the syntax error seems to show up anyway…

You need to close the preceding if else block, you’re missing a }

else if(i % 5 === 0 && i % 3 === 0){
     console.log("FizzBuzz");
}

else {
     console.log(i);
}

Thanks, it works now. Why do I have to close the brackets for the if else and else expressions immediately? With (for) I do it only at the end.

It is because each if, if else, else declaration are their own separate blocks of code that are only executed if the condition is met. Because of this, the computer needs to know when one block stops and another begins. It does it in javascript by enclosing each block in curly braces { }. This is just a design choice for javascript as there are other languages that omit this and instead rely on something else, such as whitespace, to denote where code starts and stops for a block.

Okay :slight_smile: I’m getting a deeper understanding of the logic behind Java Script

1 Like

Chessboard:

var size = 8;
var board = " ";
for(var y = 0; y <=size; y++){

for(var x=0; x<=size; x++){
if((x+y) % 2 == 0){
board+= " ";
}
else{
board += “#”;
}

}
board += "\n ";
}
console.log(board);

1 Like

CHESSBOARD

Uses Repeat function
from here
https://www.w3schools.com/jsref/jsref_repeat.asp

<script>


    var size = 8


    for(var counter = 0; counter<size; counter++){

      var spacestart = "&nbsp#";
      var hashstart = "#&nbsp";

      var line1 = spacestart.repeat(size)
      var line2 = hashstart.repeat(size)



        document.write(line1);
        document.write("</BR>");
        document.write(line2);
        document.write("</BR>");
    }


</script>

FIZZBUZZ

<script>


    for(var counter = 1; counter<100; counter++){

             document.write("<H2>  Another bloody loop </H2>" );

            document.write("<h3> the counter is now " + counter + "</h3>" );

             if (counter % 3 == 0) { document.write("<h3> the counter is now FIZZ </h3>"); }

             if (counter % 5 == 0) { document.write("<h3> the counter is now BUZZ </h3>"); }

            if (counter % 5 == 0 && counter % 3 == 0) { document.write("<h3> the counter is now FIZZBUZZ </h3>"); }

    }


</script>

Triangle

     /* Triangle */
            let round = 1;
            while (round < 7) {
                let hash = "#";
                for (let i = 0; i < round; i++) {
                    document.write(hash) + "<br>";
                }
                document.write("<br>");
                round++;
            }

FizzBuzz

/* FizzBuzz */
        for (let i = 1; i < 101; i++) {
            let fizzbuzz = "";
            if (i % 3 == 0) {
                let result = "fizz";
                if (i % 5 == 0) {
                    console.log(result + " fizzbuzz");
                } else {
                    console.log(result);
                }
            } else if (i % 5 == 0) {
                let result = "buzz";
                console.log(result);
            } else {
                console.log(i);
            }

        }

Chessboard

let chessboard = "";
        let size = 9;
        let num_col = size * 2;
        let num_raw = size;
        for (let raw = 0; raw < num_raw; raw++) {
            if (raw % 2 == 0) {
                chessboard += " ";
            }
            for (let col = 0; col < num_col; col++) {
                if (col % 2 == 0) {
                    chessboard += "#";
                } else {
                    chessboard += " ";
                }
            }
            chessboard += "\n";
        }
        console.log(chessboard);

How can I create a black square in the chessboard? I want to make white and black surfaces that resemble a chessboard…

Hey Danny,
My response comes a bit late but hope it helps nonetheless.

the “+” is used to “concatenate”(glue) values.

In this example, you’re “glueing” values together with the +.
console.log(“this is a value made up of all sorts of characters!@#$!@#$1234, also known as a string” + aDefinedValue + anotherDefinedValue);

console.log(“value 1” + value2 + value3);

where value2 and value3 are already defined values. As are your counter and texttodisplay.

var counter = 7;
var texttodisplay = "Don’t give up. ";

console.log(“value 1 " + value2 + value3”);

would output
value1 7 Don’t give up.

Cheers,

You inspired me to write one that displays the checkerboard onto the page as a graphical representation, if you are interested in seeing it:

A thing to note is that this code requires jquery to function:

//Just include this before you include the checkboard script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//Checkboard with div elements and css
        <script>
            
            
            for (let row = 1; row <= 8; row ++) {
                //Each row we create a container element using the built in document object method
                let rowDiv = document.createElement("div");
                //We set the CSS display property so that these rows will be on top of each other
                //Then we set the height to display the rows in the proper spacing to our squares' height
                //margin and padding are set so there is no additional space added within or without our element
                $(rowDiv).css("display", "block").css("margin", "auto").height(36).width("100%").css("padding", 0);
                for (let column = 1; column <= 8; column++) {
                    //Each time we make a column we create elements that we set the CSS properties of so that
                    //they display as either a white or black square.
                    //This is done because these values get thrown away at the end of every iteration of the loop
                    let black = document.createElement("div");
                    $(black).css("background-color", "black").css("float", "left").height(30).width(30).css("border-style", "solid");
                    let white = document.createElement("div");
                    $(white).css("background-color", "white").css("float", "left").height(30).width(30).css("border-style", "solid");
                    //We do our check and append either a black or white square to the row
                    if (row % 2 != 0 && column % 2 == 0) {
                        $(rowDiv).append(black);
                    } else if (row % 2 == 0 && column % 2 != 0) {
                        $(rowDiv).append(black);
                    } else {
                        $(rowDiv).append(white);
                    }
                }
                // After the row is built we use jquery to append the row directly to the body element of the page
                $("body").append(rowDiv);
            }
        </script>

fizz buzz
for (let n = 1; n <= 100; n++) {
let output = “”;
if (n % 3 == 0) output += “Fizz”;
if (n % 5 == 0) output += “Buzz”;
console.log(output || n);
}

chessboard
let size = 8;

let board = “”;

for (let y = 0; y < size; y++) {
for (let x = 0; x < size; x++) {
if ((x + y) % 2 == 0) {
board += " ";
} else {
board += “#”;
}
}
board += “\n”;
}

console.log(board);