Skip to content

Instantly share code, notes, and snippets.

@matgargano

matgargano/round1.html

Last active November 16, 2018 14:33
Show Gist options
  • Save matgargano/d6de1e9b4115b42e91c83feb53d2b786 to your computer and use it in GitHub Desktop.
Save matgargano/d6de1e9b4115b42e91c83feb53d2b786 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript + JSON
Raw
round1.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<form id="tip-calculator">
<div>
<label for="bill">Bill total:</label><input name="bill" id="bill" type="number" />
</div>
<div>
<label for="service-rating">Service:</label>
<select name="service-rating" id="service-rating">
<option value="15">OK</option>
<option value="20">Good</option>
<option value="25">Superb</option>
</select>
</div>
<div><input type="submit" value="calculate" /></div>
<p>Total <span id="total"></span></p>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
<script src="js/round1.js"></script>
</body>
</html>
Raw
round1.js
jQuery(document).ready(function(){
$('#tip-calculator').on('submit', function(evt){
evt.preventDefault();
var $bill = $('#bill');
var bill = $bill.val();
var serviceRatingPercentage = $('#service-rating').val();
var total = parseInt(bill,10)+parseInt(bill*serviceRatingPercentage/100,10);
$('#total').html(total);
});
});
Raw
round2.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<form id="tip-calculator">
<div>
<label for="bill">Bill total:</label><input name="bill" id="bill" type="number" />
</div>
<div>
<label for="service-rating">Service:</label>
<select name="service-rating" id="service-rating">
<option value="ok">OK</option>
<option value="good">Good</option>
<option value="superb">Superb</option>
<option value="excellent">Excellent</option>
</select>
</div>
<div><input type="submit" value="calculate" /></div>
<p>Total <span id="total"></span></p>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
<script src="js/round2.js"></script>
</body>
</html>
Raw
round2.js
jQuery(document).ready(function(){
var serviceLevel = {
ok: 10,
good: 15,
superb: 20,
excellent: 50
}
$('#tip-calculator').on('submit', function(evt){
evt.preventDefault();
var $bill = $('#bill');
var bill = $bill.val();
var serviceRatingValue = $("#service-rating").val();
var serviceRatingPercentage = serviceLevel[serviceRatingValue]
var total = parseInt(bill,10)+parseInt(bill*serviceRatingPercentage/100,10);
$('#total').html(total);
});
});
Raw
round3.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<form id="tip-calculator">
<div>
<label for="bill">Bill total:</label><input name="bill" id="bill" type="number" />
</div>
<div>
<label for="service-rating">Service:</label>
<select name="service-rating" id="service-rating">
<option value="ok">OK</option>
<option value="good">Good</option>
<option value="superb">Superb</option>
<option value="amazing">Amazing</option>
</select>
</div>
<div><input type="submit" value="calculate" /></div>
<p>Total <span id="total"></span></p>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
<script src="js/round3.js"></script>
</body>
</html>
Raw
round3.js
jQuery(document).ready(function(){
$('#tip-calculator').on('submit', function(evt){
evt.preventDefault();
var $bill = $('#bill');
var bill = $bill.val();
var serviceRatingValue = $("#service-rating").val();
axios.get('https://statenweb.mockable.io/serviceLevels').then(function(result){
serviceRating = result.data[serviceRatingValue];
var total = parseInt(bill, 10) + parseInt(bill*serviceRating/100, 10);
$("#total").html(total);
});
});
});
Raw
scoreboard.css
body.loading {
opacity:0.5;
}
.jumbotron {
background-color: transparent;
}
#app {
min-width: 247px;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
body {
background-color: #90b9f9;
}
header {
background-color: #4385ef;
padding: 10px 90px 15px 90px;
border-radius: 15px;
color: #2c4b7c;
width: 613px;
margin: 0 auto;
margin-top: -20px;
margin-bottom: 2em;
box-shadow: inset 0px -5px 1px #234d8e, 6px 7px 3px rgba(66, 66, 66, 0.5);
}
header h1 {
font-family: rubik;
font-weight: 800;
user-select: none;
text-shadow: 2px 2px 2px;
}
.scorecontainer {
display: flex;
align-items: center;
justify-content: center;
height: 40em;
width: 80%;
margin-left: 10%;
background-color: #4385ef;
padding: 10px 90px 15px 90px;
border-radius: 10px;
position: absolute;
z-index: -10;
box-shadow: inset 0px -5px 1px #234d8e, 6px 7px 3px rgba(66, 66, 66, 0.5);
}
.btn {
width: 300px;
margin-top: 0px;
cursor: default;
height: 300px;
border: 0;
border-radius: 20px;
outline: none !important;
font-size: 200px;
font-family: rubik;
text-shadow: 3px 3px 5px;
display: block;
position: relative;
z-index: 5;
top: 15px;
}
#team1 {
background-color: #e85c5c;
box-shadow: inset 0 -5px 1px #842f2f, 6px 7px 3px rgba(66, 66, 66, 0.5);
}
#team2 {
background-color: #60e85c;
box-shadow: inset 0 -5px 1px #37842f, 6px 7px 3px rgba(66, 66, 66, 0.5);
}
.btncontainer {
display: inline-block;
margin: 0 45px 20px 45px;
text-align: center;
}
.btncontainer h2 {
font-family: rubik;
font-size: 30px;
background-color: #f7ff66;
color: #383838;
border-radius: 10px;
font-weight: 800;
padding: 10px 15px 15px 15px;
box-shadow: inset 0 -5px 1px #5a5e11, 6px 7px 3px rgba(66, 66, 66, 0.5);
}
.scorebtn {
background-color: #5e5e5e;
color: #ddd;
display: inline-block;
padding-top: 10px;
font-size: 45px;
border-radius: 10px;
box-shadow: inset 0 -4px 1px #383838, 4px 4px 3px rgba(66, 66, 66, 0.5);
border: 0;
top: -10px;
margin: 0px 10px 0px 10px;
width: 80px;
height: 80px;
transition: 0.5s;
}
.scorebtn:active {
box-shadow: none;
}
.scorebtn:focus {
outline: none;
}
#rounddisplay {
background-color: #383838;
text-align: center;
border-radius: 10px;
width: 70px;
padding: 15px 10px 10px 10px;
}
#rounddisplay p {
color: #ddd;
font-family: rubik;
}
#rounddisplay p:nth-child(2) {
font-size: 50px;
}
#roundcounter {
border-radius: 5px;
margin-bottom: 35px;
}
#roundplus,
#roundminus {
background-color: #383838;
margin: 0 auto;
border-radius: 5px;
text-align: center;
font-size: 30px;
height: 50px;
color: #ddd;
width: 100%;
border: none;
transition: 0.5s;
}
#roundplus:focus,
#roundminus:focus {
outline: none;
}
#roundplus span,
#roundminus span {
transition: 0.5s;
}
#roundplus {
margin-bottom: -20px;
width: 70px;
border-bottom-left-radius: 0;
border-bottom: 10px #383838 solid;
border-bottom-right-radius: 0;
}
#roundminus {
margin-top: -15px;
width: 70px;
box-shadow: inset 0px -4px 1px #232323;
}
#roundminus:active {
box-shadow: none;
}
@media (max-width: 1030px) {
.btn {
width: 250px;
height: 250px;
font-size: 170px;
}
#roundcounter {
width: 60px;
}
.btncontainer {
margin: 0 30px -30px 30px;
height: 480px;
}
.scorecontainer {
height: 470px;
}
}
@media (max-width: 850px) {
.btn {
width: 230px;
height: 230px;
font-size: 150px;
}
.btncontainer {
display: block;
margin-bottom: -20px;
margin-left: 20px;
margin-right: 15px;
}
.scorecontainer {
width: 90%;
margin-left: 5%;
height: 470px;
}
}
@media (max-width: 655px) {
.btn {
height: 210px;
width: 210px;
font-size: 140px;
}
header {
width: 80%;
}
.btncontainer {
height: 400px;
margin-top: 10px;
}
.scorecontainer {
height: auto;
}
}
@media (max-width: 585px) {
header {
width: 90%;
margin-top: -10px;
padding: 1px 0 10px 0px;
margin-bottom: 15px;
}
header h1 {
margin-top: 20px;
}
.scorecontainer {
flex-direction: column;
align-items: right;
height: auto;
}
.btn {
width: 300px;
}
.btncontainer {
display: inline-block;
width: auto;
margin: 0;
height: 440px;
}
#roundcounter {
display: flex;
border-radius: 0;
width: 303px !important;
margin: 0;
}
#roundplus,
#roundminus {
margin: 0;
height: 80px;
border-radius: 0;
box-shadow: none;
transition: 0s;
width: 1000px !important;
}
#roundplus {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border: 0;
}
#roundminus {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
#rounddisplay {
height: 80px;
padding: 5px;
margin: 0;
border-radius: 0;
}
#rounddisplay p {
color: #ddd;
font-family: rubik;
}
#rounddisplay p:nth-child(1) {
margin: 0;
display: block;
}
#rounddisplay p:nth-child(2) {
font-size: 40px;
display: inline-block;
}
}
@media (max-width: 400px) {
header {
min-width: 276px;
margin-left: 18px;
}
.scorecontainer {
padding: 20px;
min-width: 276px;
}
.btncontainer {
width: 99%;
height: auto;
margin-bottom: 15px;
}
.btn {
width: 240px;
height: 220px;
margin: 0 auto;
font-size: 120px;
}
#roundcounter {
width: 90% !important;
}
}
@media (max-width: 320px) {
header {
margin: 0 auto;
margin-bottom: 10px;
margin-top: -10px;
}
header h1 {
font-size: 25px;
}
.scorecontainer {
margin: 0;
width: 100%;
}
.btn {
width: 200px;
height: 200px;
}
}
Raw
scoreboard.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/scoreboard.css" />
<title>Hello, world!</title>
</head>
<body>
<input id="game-id" type="text">
<button id="get-game">Get Game</button>
<div>
<header>
<h1 class="text-center">Scoreboard</h1>
</header>
<div class="scorecontainer">
<div class="btncontainer">
<h2 id="team1Name">...Loading...</h2>
<div class="btn" id="team1Score">...Loading...</div>
<button class="scorebtn" id="homeplus">+</button>
<button class="scorebtn" id="homeminus">-</button>
</div>
<div id="roundcounter">
<button id="roundplus">+</button>
<div id="rounddisplay">
<p>Status</p>
<p id="gameStatus"><p>
</div>
<button id="roundminus">-</button>
</div>
<div class="btncontainer">
<h2 id="team2Name"></h2>
<div class="btn" id="team2Score"></div>
<button class="scorebtn" id="awayplus">+</button>
<button class="scorebtn" id="awayminus">-</button>
</div>
</div>
</div>
<button id="click">OK</button>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
<script src="js/scoreboard.js"></script>
</body>
</html>
Raw
scoreboard.js
jQuery(document).ready(function(){
var $body = $('body');
getGame(234); // when the site loads, get the game with an id of 234
$('#get-game').on('click', function(){
// when the user clicks #get-game, get the game with the ID of the
// element with #game-id
var gameId = $('#game-id').val();
getGame(gameId);
});
function getGame(id){
$body.addClass('loading');
axios.get('https://statenweb.mockable.io/scores/' + id).then(function(result){
var gameStatus = result.data.gameStatus;
var team1Name = result.data.team1;
var team1Score = result.data.team1Score;
var team2Name = result.data.team2;
var team2Score = result.data.team2Score;
var $gameStatus = $('#gameStatus');
var $team1Name = $('#team1Name');
var $team2Name = $('#team2Name');
var $team1Score = $('#team1Score');
var $team2Score = $('#team2Score');
$gameStatus.html(gameStatus);
$team1Name.html(team1Name);
$team2Name.html(team2Name);
$team1Score.html(team1Score);
$team2Score.html(team2Score);
$body.removeClass('loading');
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment