Pastebin
CODE BELOW TOO
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>counter</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<style>
body {
background-color: #eee;
}
.btn-3d {
position: relative;
display: inline-block;
font-size: 22px;
padding: 20px 60px;
color: white;
margin: 20px 10px 10px;
border-radius: 6px;
text-align: center;
transition: top .01s linear;
text-shadow: 0 1px 0 rgba(255,0,0,1);
}
.btn-3d.red:hover {background-color: #FF0000;}
.btn-3d:active {
top: 9px;
}
.btn-3d.red {
background-color: #FF0000;
box-shadow: 0 0 0 1px #111111 inset,
0 0 0 2px rgba(0,0,0,1) inset,
0 8px 0 0 #FF0000,
0 8px 0 1px rgba(0,0,0,1),
0 8px 8px 1px rgba(0,0,0,1);
}
.btn-3d.red:active {
box-shadow: 0 0 0 1px #c63702 inset,
0 0 0 2px rgba(0,0,0,1) inset,
0 0 0 1px rgba(0,0,0,1);
}
body
.center-div
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 280px;
height: 390px;
background-color: #111111;
border-radius: 3px;
}
button:focus {outline:0;}
#countainer1 {
}#TheBTN {
display:block;
display:inline-block;
background-color:#111111;
border: 2p solid #black;
border-radius:8px;
color: #FF0000;
padding:5px 24px;
margin-bottom:30px;
font-size: 12px;
transition-duration: 0.4s;
}/*#counter {
background-color:#c1cdcd;
margin:10px;
display: block;
display: inline-block;
padding:3px;
border-radius: 5px;
*/
}#svg {
display:block;
display:inline-block
float:left;
border:1px solid black;
}#text1 {
color:#FF0000;
display:inline-block;
margin-right:5px;
}#text2 {
color:#13FF0F;
display:inline-block;
}#box1 {
}#container2 {
}svg.circle {
box-shadow:0 12px 16px 0 rgba(244,0,0,1), 0 17px 50px 0 rgba(4,0,244,1);
}
#word {
color: white;
font-size: 25px;
}
</style>
<body>
<script>
//main counter variable
var counter=0;
//counter element for increasing the number
var e;
//variable holding the binary of the counter
var b;
//increase counter when button is clicked but check if it is at limit of 63, then update html to display counter
var words = [ "My", "Name", "Is", "Matthew", "What", "Is", "Your", "Name",
"Never", "Mind", "I", "Do", "Not", "Care", "Well", "I",
"Am", "Sorry", "That", "Was", "Mean", "I", "Did", "Not",
"Mean", "To", "Make", "You", "Cry", "Hold", "Up", "You",
"Are", "Not", "Crying", "My", "Mistake", "Homie", "I", "Guess",
"Those", "Tears", "Were", "Actually", "Coming", "From", "Me", "Because",
"I", "Was", "Afraid", "That", "Your", "Name", "Would", "Be",
"Awesomer", "Than", "Mine", "So", "Again", "I", "Am", "Sorry", ];
function updateString() {
document.getElementById("word").innerHTML = words[counter];
}
function f() {
if (counter<63)
counter++;
else
counter = 0;
e = document.getElementById("counter");
e.innerHTML = counter;
updateColor();
}
//convert counter to binary array and loop through each value, displaying a blue circle for 1 or a red circle for 0 after reseting all circles to 0 or red
function updateColor() {
//convert counter to binary
b = counter.toString(2);
//convert binary to array
b = b.split("");
//log current array to console
console.log(b);
//reset all the circles to red for the next number
for (var i=0;i<6;i++)
document.getElementById("c"+i).setAttribute("fill","#ff0000");
//check if each element in the array is 1 or 0 and then change the color to either red or blue
for (var i=0;i<b.length;i++) {
if (b[i]==1)
document.getElementById("c"+i).setAttribute("fill","#13FF0F");
else
document.getElementById("c"+i).setAttribute("fill","#ff0000");
}
}
//not needed for the main function of the code
function secret() {
counter=60;
e = document.getElementById("counter");
e.innerHTML = counter;
}
</script>
<center>
<div class="center-div">
<div class="btn-container">
<a href="#"><button class="btn-3d red" onClick="f(); updateString();">COUNT</button></a>
<h3 class="btn-3d red" onclick="secret()" id="counter">0</h3>
</div>
<svg height="70" width="140" id="svg">
<circle cx="40" cy="20" id="c0" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
<circle cx="70" cy="20" id="c1" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
<circle cx="100" cy="20" id="c2" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
<circle cx="40" cy="50" id="c3" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
<circle cx="70" cy="50" id="c4" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
<circle cx="100" cy="50" id="c5" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
Browser no support.
</svg>
<div id="container2">
<p id="text1">RED = 0</p>
<p id="text2">GREEN = 1</p>
<p id="word">Words</p>
</div>
</div>
</center>
</body>
</html>
