document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!doctype html>
  2.  
  3. <html lang="en">
  4. <head>
  5.   <meta charset="utf-8">
  6.  
  7.   <title>counter</title>
  8.   <meta name="description" content="The HTML5 Herald">
  9.   <meta name="author" content="SitePoint">
  10.  
  11.   <link rel="stylesheet" href="css/styles.css?v=1.0">
  12.  
  13.   <!--[if lt IE 9]>
  14.    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  15.  <![endif]-->
  16. </head>
  17. <style>
  18. body {
  19.     background-color: #eee;
  20. }
  21.   .btn-3d {
  22.   position: relative;
  23.   display: inline-block;
  24.   font-size: 22px;
  25.   padding: 20px 60px;
  26.   color: white;
  27.   margin: 20px 10px 10px;
  28.   border-radius: 6px;
  29.   text-align: center;
  30.   transition: top .01s linear;
  31.   text-shadow: 0 1px 0 rgba(255,0,0,1);
  32.   }
  33.   .btn-3d.red:hover    {background-color: #FF0000;}
  34.   .btn-3d:active {
  35.   top: 9px;
  36.   }
  37.   .btn-3d.red {
  38.   background-color: #FF0000;
  39.   box-shadow: 0 0 0 1px #111111 inset,
  40.         0 0 0 2px rgba(0,0,0,1) inset,
  41.         0 8px 0 0 #FF0000,
  42.         0 8px 0 1px rgba(0,0,0,1),
  43.         0 8px 8px 1px rgba(0,0,0,1);
  44.   }
  45.   .btn-3d.red:active {
  46.   box-shadow: 0 0 0 1px #c63702 inset,
  47.         0 0 0 2px rgba(0,0,0,1) inset,
  48.         0 0 0 1px rgba(0,0,0,1);
  49.   }
  50. body
  51.  
  52. .center-div
  53. {
  54.   position: absolute;
  55.   margin: auto;
  56.   top: 0;
  57.   right: 0;
  58.   bottom: 0;
  59.   left: 0;
  60.   width: 260px;
  61.   height: 325px;
  62.   background-color: #111111;
  63.   border-radius: 3px;
  64. }
  65. button:focus {outline:0;}
  66. #countainer1 {
  67.  
  68. }#TheBTN {
  69.  display:block;
  70.  display:inline-block;
  71.  background-color:#111111;
  72.  border: 2p solid #black;
  73.  border-radius:8px;
  74.  color: #FF0000;
  75.  padding:5px 24px;
  76.  margin-bottom:30px;
  77.  font-size: 12px;
  78.  transition-duration: 0.4s;
  79. }/*#counter {
  80.  background-color:#c1cdcd;
  81.  margin:10px;
  82.  display: block;
  83.     display: inline-block;
  84.  padding:3px;
  85.  border-radius: 5px;
  86. */
  87. }#svg {
  88.  display:block;
  89.  display:inline-block
  90.  float:left;
  91.  border:1px solid black;
  92.  
  93. }#text1 {
  94.  color:#FF0000;
  95.  display:inline-block;
  96.  margin-right:5px;
  97. }#text2 {
  98.  color:#13FF0F;
  99.  display:inline-block;
  100. }#box1 {
  101.  
  102. }#container2 {
  103.  
  104. }svg.circle {
  105.  box-shadow:0 12px 16px 0 rgba(244,0,0,1), 0 17px 50px 0 rgba(4,0,244,1);
  106. }
  107. </style>
  108. <body>
  109. <script>
  110. //main counter variable
  111. var counter=0;
  112. //counter element for increasing the number
  113. var e;
  114. //variable holding the binary of the counter
  115. var b;
  116. //increase counter when button is clicked but check if it is at limit of 63, then update html to display counter
  117. function f() {
  118. if (counter<63)
  119. counter++;
  120. else
  121. counter = 0;
  122. e = document.getElementById("counter");
  123. e.innerHTML = counter;
  124. updateColor()
  125.  
  126. //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
  127. } function updateColor() {
  128. //convert counter to binary
  129. b = counter.toString(2);
  130. //convert binary to array
  131. b = b.split("");
  132. //log current array to console
  133. console.log(b);
  134. //reset all the circles to red for the next number
  135. for (var i=0;i<6;i++)
  136.  document.getElementById("c"+i).setAttribute("fill","#ff0000");
  137. //check if each element in the array is 1 or 0 and then change the color to either red or blue
  138. for (var i=0;i<b.length;i++) {
  139.  if (b[i]==1)
  140.   document.getElementById("c"+i).setAttribute("fill","#13FF0F");
  141.  else
  142.   document.getElementById("c"+i).setAttribute("fill","#ff0000");
  143. }
  144. }
  145. //not needed for the main function of the code
  146. function secret() {
  147. counter=60;
  148. e = document.getElementById("counter");
  149. e.innerHTML = counter;
  150. }
  151.  
  152. </script>
  153. <center>
  154.  
  155.  
  156.  <div class="center-div"><div class="btn-container">
  157.   <a href="#"><button class="btn-3d red" onClick="f()">COUNT</button></a>
  158.   <h3 class="btn-3d red" onclick="secret()" id="counter">0</h3>
  159. </div>
  160.  
  161. <svg height="70" width="140" id="svg">
  162.  
  163.   <circle cx="40" cy="20" id="c0" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
  164.   <circle cx="70" cy="20" id="c1" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
  165.   <circle cx="100" cy="20" id="c2" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
  166.   <circle cx="40" cy="50" id="c3" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
  167.   <circle cx="70" cy="50" id="c4" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
  168.   <circle cx="100" cy="50" id="c5" r="10" stroke="black" stroke-width="3" fill="#FF0000" />
  169.   Browser no support.
  170. </svg>
  171. <div id="container2">
  172.   <p id="text1">RED = 0</p>
  173.   <p id="text2">GREEN = 1</p>
  174. </div>
  175. </center>
  176. </div>
  177. </body>
  178. </html>
');