Wednesday, September 27, 2017

Camerons button with a string for each number

counter

0

Browser no support.

red = 0

Blue = 1


Custom Strings

at No comments:

Tuesday, September 26, 2017

My Version of Cameron's Button

Pastebin

Or see code below

<!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: 260px;
  height: 325px;
  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);
}
</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","#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()">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>
</div>
</center>
</div>
</body>
</html>
at No comments:

Cameron's code It's also in a comment!!!

<!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>
at No comments:

Monday, September 25, 2017

Stephen's JS BTN code

https://codepen.io/stbr10/pen/JrEyXJ
at No comments:

Wednesday, September 20, 2017

Play Button JS

Hey Everyone,

Here is the link the to codepen for the button that I presented in class: https://codepen.io/anon/pen/PJzZxW.

Feel free to copy it and play around with the code!

Matt
at 5 comments:

FOR TUESDAY JAVASCRIPT PRESET CHALLENGE

A webpage

1.) USER CLICKS A BUTTON
******[DESIGN THE BUTTON TO BE BADASS] cool nice designed fancy

2.) Page returns on click the VALUES [DATASTREAM] = 0 -63 0r 1 to 64
*********RETURN A VISUAL to THE CLICKER [USER] that shows THE VALUE and it APPEARS IN A WINDOW

3.) A 6 ELEMENT COLORED CIRCLE ARRAY is ILLUMINATED/DIMMED FOR A VISUAL COUNT

++EXTRA CREDIT ++ 64 unique "Strings" assoiciated with each PRESET


10 POINTS

Try this code

https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local_clickcount


at No comments:

Monday, September 18, 2017

My Button for class 09/18/17

Link to Google Drive Folder
at No comments:
Subscribe to: Posts (Atom)

Scripting for the Web Final

I spent a lot of time working on my updated portfolio website this semester. Here's an excerpt of the reflection post I wrote (because t...

  • CONNECT Nexus UI/UX to Tone.js
    https://tonejs.github.io/docs/r11/GrainPlayer https://nexus-js.github.io/ui/ https://github.com/nexus-js/ui/ Tone.GrainPlayer imple...
  • Tone JS UI/UX Project Buffer Shuffler
    https://tonejs.github.io/docs/ Tone.Buffer ↳ EXTENDS  Tone Buffer loading and storage. Tone.Buffer is used internally by all classe...