PickShapeApp 0.3

HTML

<p>Click the shape</p>

<h1 id="IdShapeTitle"></h1>

<div id="showShapes"></div>
<p>Are you Correct? <span id="myAnswer"></span>

</p>
<p>Score: <span id="score">0</span>

</p>
<button onclick="btnContPlay()">Continue Playing</button>
<button onclick="btnStartOver()">Start Over</button>

CSS

#square {
    width: 200px;
    height: 200px;
    background-color: red;
}
#rect {
    width: 400px;
    height: 200px;
    background-color: green;
}

JavaScript

var shapeName = ["Square", "Rectangle"];
var score = 0;

var cssIdSquare = "<div id='square' onclick='sqrClick()'></div>";
var cssIdRec = "<div id='rect'onclick='rectClick()' ></div>";

var docMyAnswer = document.getElementById("myAnswer");
var docMyScore = document.getElementById("score");

var answerCorrect = "CORRECT!";
var answerWrong = "WRONG!";

// Random Shape to Select Title

var shapesTitle = shapeName[Math.floor(Math.random() * shapeName.length)];
document.getElementById("IdShapeTitle").innerHTML = shapesTitle.toString();

///// Function Shape Logic

function showAllShapes() {

    ///// Show both shapes
    document.getElementById("showShapes").innerHTML = cssIdSquare + "<br>" + cssIdRec;
}

function sqrClick() {
    if (shapesTitle === "Square") {
        docMyAnswer.innerHTML = answerCorrect;
        score += 1;
        docMyScore.innerHTML = score;
    }
    if (shapesTitle === "Rectangle") {
        docMyAnswer.innerHTML = answerWrong;
    }
}

function rectClick() {
    if (shapesTitle === "Rectangle") {
        docMyAnswer.innerHTML = answerCorrect;
        score += 1;
        docMyScore.innerHTML = score;
    }
    if (shapesTitle === "Square") {
        docMyAnswer = answerWrong;
    }
}

showAllShapes();


// Continue Playing Button
function btnContPlay() {
 shapesTitle = shapeName[Math.floor(Math.random() * shapeName.length)];
document.getElementById("IdShapeTitle").innerHTML = shapesTitle.toString();
showAllShapes();

}



// Start Over Button
function btnStartOver() {
    score = 0; // reset score to 0
    document.getElementById("score").innerHTML = score;
    location.reload();
}

///// test code  //////
/*

*/