stanwmusic

<input id="hi" value="hi" name="state" style="display: none;"><input id="ak" value="ak" name="state" style="display: none;"><input id="fl" value="fl" name="state" style="display: none;"><input id="sc" value="sc" name="state" style="display: none;"><input id="ga" value="ga" name="state" style="display: none;"><input id="al" value="al" name="state" style="display: none;"><input id="nc" value="nc" name="state" style="display: none;"><input id="tn" value="tn" name="state" style="display: none;"><input id="ri" value="ri" name="state" style="display: none;"><input id="ct" value="ct" name="state" style="display: none;"><input id="ma" value="ma" name="state" style="display: none;"><input id="me" value="me" name="state" style="display: none;"><input id="nh" value="nh" name="state" style="display: none;"><input id="vt" value="vt" name="state" style="display: none;"><input id="ny" value="ny" name="state" style="display: none;"><input id="nj" value="nj" name="state" style="display: none;"><input id="pa" value="pa" name="

stanwmusic

Analog Clock

For this analog clock, I used JavaScript only for getting the current time at load then used CSS animation to run the clock from there.

A Pen by Stan Williams on CodePen.

License.

stanwmusic

Piano

Fully functional piano plays Ludovico Einaudi - Una Mattina. This is not an audio track! It plays live : )

If you know a webaudio library that reads notes with the correct timing please let me know. Original soundtrack here : https://www.youtube.com/watch?v=0Bvm9yG4cvs

A Pen by Stan Williams on CodePen.

License.

stanwmusic

<header>
  <form id="search">
    <input id="search-box" type="search" placeholder="Find something...">
    <input id="search-btn" type="submit" value="Search">
  </form>
  <nav>
    <ul>
      <li class="current">
        <a href="#home">Home</a>
      </li>

stanwmusic

Analog Clock

For this analog clock, I used JavaScript only for getting the current time at load then used CSS animation to run the clock from there.

A Pen by Stan Williams on CodePen.

License.

stanwmusic

<nav>
    <ul>
        <li>
            <a href="#">
              <!-- SVG code for Home icon -->
              <svg class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
                <polygon fill="#fff" points="15,0 0,10.5 4.5,10.5 4.5,30 11.35,30 11.352,17.626 18.55,17.609 18.55,30 25.5,30 25.5,10.5 
                30,10.5 "/>
              </svg>

stanwmusic

<div class="time">
  <span class="hms"></span>
  <span class="ampm"></span>
  <br>
  <span class="date"></span>
</div>

stanwmusic

AngularJS Contact Form

Just for experimenting with dynamic contact form validation using AngularJS

A Pen by Stan Williams on CodePen.

License.

stanwmusic

<div class="quadrant">
  <div class="pattern"></div>
</div>
<div class="quadrant">
  <div class="pattern"></div>
</div>
<div class="quadrant">
  <div class="pattern"></div>
</div>
<div class="quadrant">

stanwmusic

- var ticks = 120;
- var tickLabels = 12;
- var tickInc = ticks / tickLabels;
main
	.speedometer
		.speedometer-inner
				- for (var i = 0; i < ticks + 1; ++i) {
						.tick
							- for (var j = 0; j <= tickLabels; ++j) {
								- if (i == tickInc * j) {