<!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>
button:focus {outline:0;}
#countainer1 {
}#TheBTN {
display:block;
display:inline-block;
background-color:#c1cdcd;
border: 2p solid #green;
border-radius:8px;
color: #0e2f44;
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:#ae254a;
display:inline-block;
margin-right:5px;
}#text2 {
color:#00cdcd;
display:inline-block;
}#box1 {
}#container2 {
}svg.circle {
box-shadow:0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
</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
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","#ae254a");
//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","#00cdcd");
else
document.getElementById("c"+i).setAttribute("fill","#ae254a");
}
}
//not needed for the main function of the code
function secret() {
counter=60;
e = document.getElementById("counter");
e.innerHTML = counter;
}
</script>
<center>
<div id="container1">
<button id="TheBTN" onClick="f()">Increment</button>
<h3 onclick="secret()" id="counter">0</h3>
</div>
<hr>
<svg height="70" width="140" id="svg">
<circle cx="40" cy="20" id="c0" r="10" stroke="black" stroke-width="3" fill="#ae254a" />
<circle cx="70" cy="20" id="c1" r="10" stroke="black" stroke-width="3" fill="#ae254a" />
<circle cx="100" cy="20" id="c2" r="10" stroke="black" stroke-width="3" fill="#ae254a" />
<circle cx="40" cy="50" id="c3" r="10" stroke="black" stroke-width="3" fill="#ae254a" />
<circle cx="70" cy="50" id="c4" r="10" stroke="black" stroke-width="3" fill="#ae254a" />
<circle cx="100" cy="50" id="c5" r="10" stroke="black" stroke-width="3" fill="#ae254a" />
Browser no support.
</svg>
<div id="container2">
<p id="text1">red = 0</p>
<p id="text2">Blue = 1</p>
</div>
</center>
</body>
</html>
No comments:
Post a Comment