Conditional Practice

From Eloquent JS 02

by db_dev

HTML

<p>Simple While Loop</p>
<ul id="while" class="list-inline"></ul>

<p>Chess Board</p>
<div id="chessBoard"></div>

SCSS

ul {
    margin: 0;
    padding: 0;
}

.list-inline {
    li {
        display: inline-block;
        margin-right: 4px;
        &:last-child {
            margin-right: 0;
        }
    }
}
#chessBoard {
    border: solid 2px #47261b;
     display: inline-block;
}
.spacer{
    display: block;
    width:100%;
}
.chess {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-bottom: -4px;

    &.even {
        background-color: #47261b;
    }
    &.odd {
        background-color: #a3644b;
    }
}

JavaScript

// While-html list
var number = 0;
while (number <= 12) {
    $("#while").append("<li>" + number + "</li>");
    number = number + 2
}
// While 2-console
var result = 2;
var counter = 0;
while (counter < 10) {
    result = result * 2;
    counter = counter + 1;
}
console.log(result);

// Do - console will keep running until you enter something
/*
do {
var yourName = prompt("Who are you?");
} while (!yourName)
console.log(yourName);
*/

// For simple - console 
for (var forNumber = 0; forNumber <= 12; forNumber += 2)
    console.log("ForNumber = " + forNumber);

// For Simple 2 - Console
var result = 1;
for (var counter = 0; counter < 10; counter += 1) {
    result = result * 2
}
console.log("My Result = " + result)

// For break once condition is met - console
for (var current = 20; current <= 30; current++) {
    if (current % 7 == 0)
        break;
}
console.log(current);

// If statement
var whatSize = 102;
if (whatSize <= 10) {
    console.log("Small");
} else if (whatSize <= 100) {
    console.log("Medium");
} else {
    console.log("Large");
}
// Rewritten as Switch
switch (whatSize) {
    case (whatSize <= 10):
        console.log("Small");
        break;

    case (whatSize <= 100):
        console.log("Medium");
        break;

    default:
        console.log("Large");
        break;
}
// Chess Board

var number = 8;
var chessBoard = ""

for (var line = 1; line <= number; line++) {
   for (var chara=1; chara <= number; chara++ ) {
    	if ((chara + line) % 2 == 0) {
        // Missed everything but the chara + line bit. Thanks to SO.
        	//chessBoard = chessBoard + "#";
            chessBoard = chessBoard + "<div class='chess even'></div>"
        } else {
        	//chessBoard = chessBoard + " ";
            chessBoard = chessBoard + "<div class='chess odd'></div>"
        }
   }
    chessBoard = chessBoard + "<div class='spacer'></div>";
}
//console.log (chessBoard)
$(chessBoard).appendTo("#chessBoard");