Scoreboard for personal games and keeping track
A Pen by James Robinson on CodePen.
Scoreboard for personal games and keeping track
A Pen by James Robinson on CodePen.
<meta name="viewport" content="width=device-width,initial-scale=1.0"> | |
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet"> | |
<div> | |
<header> | |
<h1 class="text-center">Score After Last Completed Stroke</h1> | |
</header> | |
<div class="scorecontainer"> | |
<div class="btncontainer"> | |
<h2>Dolphins</h2> | |
<div class="btn" id="team1">0</div> | |
<button class="scorebtn" id="homeplus10">+10</button> | |
<button class="scorebtn" id="homeplus">+1</button> | |
<button class="scorebtn" id="homeminus">-1</button> | |
<button class="scorebtn" id="homeminus10">-10</button> | |
</div> | |
<div class="btncontainer"> | |
<h2>Visitor</h2> | |
<div class="btn" id="team2">0</div> | |
<button class="scorebtn" id="awayplus10">+10</button> | |
<button class="scorebtn" id="awayplus">+1</button> | |
<button class="scorebtn" id="awayminus">-1</button> | |
<button class="scorebtn" id="awaymins10">-10</button> | |
</div> | |
</div> | |
</div> |
homeScore = 0, awayScore = 0; | |
$('document').ready(function() { | |
$('#homeplus').click(function() { | |
homeScore += 1; | |
$('#team1').text(homeScore); | |
}); | |
$('#homeplus10').click(function() { | |
homeScore += 10; | |
$('#team1').text(homeScore); | |
}); | |
$('#homeminus').click(function() { | |
if (homeScore > 0) { | |
homeScore -= 1; | |
$('#team1').text(homeScore); | |
} | |
}); | |
$('#homeminus10').click(function() { | |
if (homeScore > 0) { | |
homeScore -= 10; | |
$('#team1').text(homeScore); | |
} | |
}); | |
$('#awayplus').click(function() { | |
awayScore += 1; | |
$('#team2').text(awayScore); | |
}); | |
$('#awayplus10').click(function() { | |
awayScore += 10; | |
$('#team2').text(awayScore); | |
}); | |
$('#awayminus').click(function() { | |
if (awayScore > 0) { | |
awayScore -= 1; | |
$('#team2').text(awayScore); | |
} | |
}); | |
$('#awayminus10').click(function() { | |
if (awayScore > 0) { | |
awayScore -= 10; | |
$('#team2').text(awayScore); | |
} | |
}); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
.jumbotron { | |
background-color: transparent; | |
} | |
#app { | |
min-width: 247px; | |
} | |
.wrapper { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
body { | |
background-color: #333333; | |
} | |
header { | |
background-color: #555555; | |
padding: 10px 90px 15px 90px; | |
border-radius: 15px; | |
color: #dd2727; | |
width: 800px; | |
margin: 0 auto; | |
margin-top: -20px; | |
margin-bottom: 2em; | |
box-shadow: inset 0px -5px 1px #821616, 6px 7px 3px rgba(66, 66, 66, 0.5); | |
& h1 { | |
font-family: rubik; | |
font-weight: 800; | |
user-select: none; | |
} | |
} | |
.scorecontainer { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
height: 38em; | |
width: 90%; | |
margin-left: 5%; | |
background-color: #555555; | |
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: 390px; | |
cursor: default; | |
height: 250px; | |
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; | |
} | |
#team1 { | |
background-color: #000000; | |
color: #48f442; | |
box-shadow: inset 0 -5px 1px #37842f, 6px 7px 3px rgba(66, 66, 66, 0.5); | |
} | |
#team2 { | |
background-color: #000000; | |
color: #47ffff; | |
box-shadow: inset 0 -5px 1px #3ab2b2, 6px 7px 3px rgba(66, 66, 66, 0.5); | |
} | |
.btncontainer { | |
display: inline-block; | |
margin: 0px 45px 20px 45px; | |
text-align: center; | |
& h2 { | |
font-family: rubik; | |
font-size: 30px; | |
background-color: #000000; | |
color: #fffc68; | |
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: #777; | |
color: #ddd; | |
display: inline-block; | |
font-size: 32px; | |
border-radius: 10px; | |
box-shadow: inset 0 -4px 1px #383838, 4px 4px 3px rgba(66, 66, 66, 0.5); | |
border: 0; | |
top: -10px; | |
margin: 20px 5px 20px 5px; | |
width: 70px; | |
height: 70px; | |
transition: 0.5s; | |
&:active { | |
box-shadow: none; | |
} | |
&:focus { | |
outline: none; | |
} | |
} | |
@media (max-width: 1030px) { | |
.btn { | |
width: 250px; | |
height: 250px; | |
font-size: 170px; | |
} | |
.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; | |
& 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; | |
} | |
} | |
@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; | |
} | |
} | |
@media (max-width: 320px) { | |
header { | |
margin: 0 auto; | |
margin-bottom: 10px; | |
margin-top: -10px; | |
& h1 { | |
font-size: 25px; | |
} | |
} | |
.scorecontainer { | |
margin: 0; | |
width: 100%; | |
} | |
.btn { | |
width: 200px; | |
height: 200px; | |
} | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |