// lab1.js

/*
** alert boxes create checkpoints to monitor your progress.
** After each box displays the correct information,
** comment it out and move on the next instruction,
** un-commenting that alert box.
**
** Except for declaring variables and the "Compute answers for the rest..." section,
** each instruction requires only one line of code.
*/

/**********   Add script tag below comment in lab1.html to link to lab1.js   **********/
// alert("Start");

/**********   Declare variables   **********/
// Use var keyword to declare: MathLI, MathProblem, ProblemSections, Answer, and AnswerFormatted.
// Use var keyword to declare: Total, and initialize it to 0.
var MathLI;
var MathProblem;
var ProblemSections;
var Answer;
var AnswerFormatted;
var Total = [0];

// alert("Variables declared");

/*///////////////////////////START PROBLEM 1///////////////////////////*/
/***********************************************************************/
/**********   Compute answer for first math problem   **********/
// Assign the first li tag inside "MathProblems" to MathLI.  Hint: [0];
MathLI = (document.getElementById("MathProblems").getElementsByTagName("LI")[0]);
// alert("MathLIs");

// Assign the innerHTML of MathLI to: MathProblem.
MathProblem = (MathLI.innerHTML);
// alert("MathProblem");

// Use the split method of the string object to separate MathProblem into an array (separated by " ")
// and assign it to: ProblemSections.
ProblemSections = MathProblem.split(" ");
// alert("ProblemSections.length");

// Assign the sum of the 2 numbers to: Answer.  Hint: parseInt().
// Don't forget to use array notation to select the proper ProblemSections elements.
Answer = (parseInt(ProblemSections[0]) + parseInt(ProblemSections[2]));
// alert("Answer");

// Increment Total by the value of Answer
Total[0] = Answer;
// alert("Total");

// Using string concatenation, place Answer between opening and closing span tags
// and assign that to: AnswerFormatted.  Note: include a leading space before Answer.
AnswerFormatted = ("<span>" + " " + Answer + "</span>");
// alert("AnswerFormatted");

// Append AnswerFormatted to the innerHTML MathLI".
MathLI.innerHTML += (AnswerFormatted);
// alert("Finished with problem 1");
/*********************************************************************/
/*///////////////////////////END PROBLEM 1///////////////////////////*/



// Does your HTML page display correctly so far?

/**********   Compute answers for the rest of the math problems   **********/
// Use (re-use) the same variables that you declared above.
// Basically, copy and paste code, changing [0] to [1] as required, and so on...
// Don't forget to increment Total by Answer for each math problem.

// Note 1: Notice that math problems 4 and 5 require more than just adding 2 numbers.
// Note 2: For problem number 5 that has parentheses,
// use substr(1,1) and and substr(0,1) to extract the numbers from the appropriate ProblemSections array elements.
// Note 3: Don't forget to correctly use () in your calculation for math problem 5.

// Explore: The described use of substr in note 2 works because we know the number is only one digit.
// How could you use substr to accommodate any size number?
// Hint: Leverage the length property of the string object for the appropriate ProblemSections array elements.




/*///////////////////////////START PROBLEM 2///////////////////////////*/
/***********************************************************************/
/**********   Compute answer for second math problem   **********/
// Assign the first li tag inside "MathProblems" to MathLI.  Hint: [0];
MathLI = (document.getElementById("MathProblems").getElementsByTagName("LI")[1]);
// alert("MathLIs");

// Assign the innerHTML of MathLI to: MathProblem.
MathProblem = (MathLI.innerHTML);
// alert("MathProblem");

// Use the split method of the string object to separate MathProblem into an array (separated by " ")
// and assign it to: ProblemSections.
ProblemSections = MathProblem.split(" ");
// alert("ProblemSections.length");

// Assign the sum of the 2 numbers to: Answer.  Hint: parseInt().
// Don't forget to use array notation to select the proper ProblemSections elements.
Answer = (parseInt(ProblemSections[0]) + parseInt(ProblemSections[2]));
// alert("Answer");

// Increment Total by the value of Answer
Total[1] = Answer;
// alert("Total");

// Using string concatenation, place Answer between opening and closing span tags
// and assign that to: AnswerFormatted.  Note: include a leading space before Answer.
AnswerFormatted = ("<span>" + " " + Answer + "</span>");
// alert("AnswerFormatted");

// Append AnswerFormatted to the innerHTML MathLI".
MathLI.innerHTML += (AnswerFormatted);
// alert("Finished with problem 1");
/*********************************************************************/
/*///////////////////////////END PROBLEM 2///////////////////////////*/



/*///////////////////////////START PROBLEM 3///////////////////////////*/
/***********************************************************************/
/**********   Compute answer for third math problem   **********/
// Assign the third li tag inside "MathProblems" to MathLI.  Hint: [0];
MathLI = (document.getElementById("MathProblems").getElementsByTagName("LI")[2]);
// alert("MathLIs");

// Assign the innerHTML of MathLI to: MathProblem.
MathProblem = (MathLI.innerHTML);
// alert("MathProblem");

// Use the split method of the string object to separate MathProblem into an array (separated by " ")
// and assign it to: ProblemSections.
ProblemSections = MathProblem.split(" ");
// alert("ProblemSections.length");

// Assign the sum of the 2 numbers to: Answer.  Hint: parseInt().
// Don't forget to use array notation to select the proper ProblemSections elements.
Answer = (parseInt(ProblemSections[0]) + parseInt(ProblemSections[2]));
// alert("Answer");

// Increment Total by the value of Answer
Total[2] = Answer;
// alert("Total");

// Using string concatenation, place Answer between opening and closing span tags
// and assign that to: AnswerFormatted.  Note: include a leading space before Answer.
AnswerFormatted = ("<span>" + " " + Answer + "</span>");
// alert("AnswerFormatted");

// Append AnswerFormatted to the innerHTML MathLI".
MathLI.innerHTML += (AnswerFormatted);
// alert("Finished with problem 1");
/*********************************************************************/
/*///////////////////////////END PROBLEM 3///////////////////////////*/



/*///////////////////////////START PROBLEM 4///////////////////////////*/
/***********************************************************************/
/**********   Compute answer for fourth math problem   **********/
// Assign the fourth li tag inside "MathProblems" to MathLI.  Hint: [0];
MathLI = (document.getElementById("MathProblems").getElementsByTagName("LI")[3]);
// alert("MathLIs");

// Assign the innerHTML of MathLI to: MathProblem.
MathProblem = (MathLI.innerHTML);
// alert("MathProblem");

// Use the split method of the string object to separate MathProblem into an array (separated by " ")
// and assign it to: ProblemSections.
ProblemSections = MathProblem.split(" ");
// alert("ProblemSections.length");

// Assign the sum of the 2 numbers to: Answer.  Hint: parseInt().
// Don't forget to use array notation to select the proper ProblemSections elements.
Answer = (parseInt(ProblemSections[0]) + parseInt(ProblemSections[2]) * parseInt(ProblemSections[4]));
// alert("Answer");

// Increment Total by the value of Answer
Total[3] = Answer;
// alert("Total");

// Using string concatenation, place Answer between opening and closing span tags
// and assign that to: AnswerFormatted.  Note: include a leading space before Answer.
AnswerFormatted = ("<span>" + " " + Answer + "</span>");
// alert("AnswerFormatted");

// Append AnswerFormatted to the innerHTML MathLI".
MathLI.innerHTML += (AnswerFormatted);
// alert("Finished with problem 1");
/*********************************************************************/
/*///////////////////////////END PROBLEM 4///////////////////////////*/


/*///////////////////////////START PROBLEM 5///////////////////////////*/
/***********************************************************************/
/**********   Compute answer for fifth math problem   **********/
// Assign the fourth li tag inside "MathProblems" to MathLI.  Hint: [0];
MathLI = (document.getElementById("MathProblems").getElementsByTagName("LI")[4]);
// alert("MathLIs");

// Assign the innerHTML of MathLI to: MathProblem.
MathProblem = (MathLI.innerHTML);
// alert("MathProblem");

// Use the split method of the string object to separate MathProblem into an array (separated by " ")
// and assign it to: ProblemSections.
ProblemSections = MathProblem.split(" ");
// alert("ProblemSections.length");

// Assign the sum of the 2 numbers to: Answer.  Hint: parseInt().
// Don't forget to use array notation to select the proper ProblemSections elements.
Answer = (parseInt(ProblemSections[0].substr(1,1)) + parseInt(ProblemSections[2].substr(0,1))) * parseInt(ProblemSections[4]);
// alert("Answer");

// Increment Total by the value of Answer
Total[4] = Answer;
// alert("Total");

// Using string concatenation, place Answer between opening and closing span tags
// and assign that to: AnswerFormatted.  Note: include a leading space before Answer.
AnswerFormatted = ("<span>" + " " + Answer + "</span>");
// alert("AnswerFormatted");

// Append AnswerFormatted to the innerHTML MathLI".
MathLI.innerHTML += (AnswerFormatted);
// alert("Finished with problem 1");
/*********************************************************************/
/*///////////////////////////END PROBLEM 5///////////////////////////*/



//alert("Grand Total is: " + Total);

/**********   Display Total in the results div using an H3 tag  **********/
// Concatenate a string and assign it to the innerHTML of "ResultsDiv" to display
// The sum of all answers is: 223
// where 223 is the value of Total, not a literal number.
// Don't forget to display the string between opening and closing H3 tags.
var Rslts = document.getElementById("ResultsDiv");
Total = (parseInt(Total[0]) + parseInt(Total[1]) + parseInt(Total[2]) + parseInt(Total[3]) + parseInt(Total[4]));
Rslts.innerHTML = ("<h3>" + "The sum of all answers is: " + Total + "<h3>")
// alert("Finished!!!");