Midterm Machine Project #1 Solution
<!--------------------------------------------------------------------------------------------------------
Machine Problem 1
Project Name: None
Project Files: Gymnastic.html, Gymnastic.js
Project Description: Find the low score, high score, and average score among seven judge's score in gymnastic competition.
Programmer: Jun Y. Ercia
Language: JavaScript
Date Created: 7/26/2019
Date Modified: 7/26/2019
---------------------------------------------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Machine Problem 2</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style type="text/css">
body {
margin: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="col-sm-2">
<div class="card text-center">
<div class="card-header">
Gymnastic Competition
</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="score1" class="col-sm-4 col-form-label">Score 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score1" >
</div>
</div>
<div class="form-group row">
<label for="score2" class="col-sm-4 col-form-label">Score 2</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score2" >
</div>
</div>
<div class="form-group row">
<label for="score3" class="col-sm-4 col-form-label">Score 3</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score3" >
</div>
</div>
<div class="form-group row">
<label for="score4" class="col-sm-4 col-form-label">Score 4</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score4" >
</div>
</div>
<div class="form-group row">
<label for="score5" class="col-sm-4 col-form-label">Score 5</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score5" >
</div>
</div>
<div class="form-group row">
<label for="score6" class="col-sm-4 col-form-label">Score 6</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score6" >
</div>
</div>
<div class="form-group row">
<label for="score7" class="col-sm-4 col-form-label">Score 7</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score7" >
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="calculate()">Calculate</button>
<button type="button" class="btn btn-danger" onclick="clearFields()">Clear</button>
</div>
</div>
</form>
</div>
<div class="card-footer text-muted">
<div id="high_score">High Score : ?</div>
<div id="low_score">Low Score : ?</div>
<div id="average_score">Average Score : ?</div>
</div>
</div>
</div>
<script type="text/javascript">
let scores
const NO_JUDGES = 7
function checkValid(score) {
return !isNaN(score)
}
function readScores() {
scores = []
for (let i = 1; i <= NO_JUDGES; i++) {
score = parseFloat(document.getElementById("score" + i).value)
if (checkValid(score))
scores.push(score)
else {
alert(`Error! Score ${i} should be numeric`)
return false
}
}
return true
}
function calculate() {
if (readScores()) {
scores.sort((a,b) => a - b)
document.getElementById("high_score").textContent = `High Score : ${scores[6].toFixed(2)}`
document.getElementById("low_score").textContent = `Low Score : ${scores[0].toFixed(2)}`
document.getElementById("average_score").textContent = `Average Score : ${average().toFixed(2)}`
}
}
function average() {
return scores.slice(1,6).reduce((sum, current) => sum + current, 0) / 5;
}
function clearFields() {
for (let i = 1; i <= NO_JUDGES; i++)
document.getElementById("score" + i).value = ""
}
</script>
</div>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Machine Problem 1
Project Name: None
Project Files: Gymnastic.html, Gymnastic.js
Project Description: Find the low score, high score, and average score among seven judge's score in gymnastic competition.
Programmer: Jun Y. Ercia
Language: JavaScript
Date Created: 7/26/2019
Date Modified: 7/26/2019
---------------------------------------------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Machine Problem 2</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style type="text/css">
body {
margin: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="col-sm-2">
<div class="card text-center">
<div class="card-header">
Gymnastic Competition
</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="score1" class="col-sm-4 col-form-label">Score 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score1" >
</div>
</div>
<div class="form-group row">
<label for="score2" class="col-sm-4 col-form-label">Score 2</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score2" >
</div>
</div>
<div class="form-group row">
<label for="score3" class="col-sm-4 col-form-label">Score 3</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score3" >
</div>
</div>
<div class="form-group row">
<label for="score4" class="col-sm-4 col-form-label">Score 4</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score4" >
</div>
</div>
<div class="form-group row">
<label for="score5" class="col-sm-4 col-form-label">Score 5</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score5" >
</div>
</div>
<div class="form-group row">
<label for="score6" class="col-sm-4 col-form-label">Score 6</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score6" >
</div>
</div>
<div class="form-group row">
<label for="score7" class="col-sm-4 col-form-label">Score 7</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="score7" >
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="calculate()">Calculate</button>
<button type="button" class="btn btn-danger" onclick="clearFields()">Clear</button>
</div>
</div>
</form>
</div>
<div class="card-footer text-muted">
<div id="high_score">High Score : ?</div>
<div id="low_score">Low Score : ?</div>
<div id="average_score">Average Score : ?</div>
</div>
</div>
</div>
<script type="text/javascript">
let scores
const NO_JUDGES = 7
function checkValid(score) {
return !isNaN(score)
}
function readScores() {
scores = []
for (let i = 1; i <= NO_JUDGES; i++) {
score = parseFloat(document.getElementById("score" + i).value)
if (checkValid(score))
scores.push(score)
else {
alert(`Error! Score ${i} should be numeric`)
return false
}
}
return true
}
function calculate() {
if (readScores()) {
scores.sort((a,b) => a - b)
document.getElementById("high_score").textContent = `High Score : ${scores[6].toFixed(2)}`
document.getElementById("low_score").textContent = `Low Score : ${scores[0].toFixed(2)}`
document.getElementById("average_score").textContent = `Average Score : ${average().toFixed(2)}`
}
}
function average() {
return scores.slice(1,6).reduce((sum, current) => sum + current, 0) / 5;
}
function clearFields() {
for (let i = 1; i <= NO_JUDGES; i++)
document.getElementById("score" + i).value = ""
}
</script>
</div>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Comments
Post a Comment