Lost in Thought

by Brock Callahan

HTML

<p id="instructions">instructions</p>
<div id="timer">
  <p id="min" class="clock">0</p>
  <p id="colon" class="clock">:<span id="extraZero">0</span></p>
  <p id="sec" class="clock">00</p>
</div>

<h1 id="heading">"Lost in Thought" counter</h1>
<h6 id="subheading">press enter to begin</h6>
<p id="counter"></p>

<div id="howToUse">
  <p>Every time you find yourself lost in thought, simply press the spacebar. At the end of your session, you can see just how many times you got lost in thought. Hit the backspace to start over. You can also If you reach zero, that's either really good
    or really bad.</p>
  <button id="closeInstructions">Okay</button>
</div>

<ul id="imgChoices">
  <li id="buddha">Buddha Cave |&nbsp</li>
  <li id="shiva">Shiva |&nbsp</li>
  <li id="clouds">Clouds</li>
</ul>

CSS

body {
  background-image: url('http://resources0.news.com.au/images/2014/02/24/1226835/816804-6dfba632-9854-11e3-a5ad-5f99c6c437b4.jpg');
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: none;
  color: #fff;
  font-family: 'Helvetica', sans-serif;
}

#counter {
  font-size: 112px;
  text-shadow: 2px 2px 2px #fff;
  text-align: center;
}

#instructions,
#closeInstructions {
  cursor: pointer;
}

#instructions {
  opacity: .5;
}

#heading,
#subheading {
  text-align: center;
}

#reset {
  float: right;
}

#howToUse {
  background: #fff;
  color: #333;
  visibility: hidden;
  width: 300px;
  padding: 20px;
  margin: auto;
}

#imgChoices {
  opacity: .5;
}

#imgChoices > li {
  text-align: center;
  cursor: pointer;
  list-style: none;
  float: left;
}

#timer {
  float: right;
}

.clock {
  float: left;
  position: relative;
  top: -50px;
}

#extraZero {
  display: none;
}

JavaScript

// variables
var counter = 0;
var sec = 60;

// Choose image
document.getElementById('shiva').onclick = function() {
  document.getElementsByTagName('body')[0].style.backgroundImage = 'url("https://upload.wikimedia.org/wikipedia/commons/4/4d/The_Magnificent_Siva_Lingam,_Hampi.jpg")';
};


document.getElementById('buddha').onclick = function() {
  document.getElementsByTagName('body')[0].style.backgroundImage = 'url("http://resources0.news.com.au/images/2014/02/24/1226835/816804-6dfba632-9854-11e3-a5ad-5f99c6c437b4.jpg")';
};

document.getElementById('clouds').onclick = function() {
  document.getElementsByTagName('body')[0].style.backgroundImage = 'url("http://core0.staticworld.net/images/article/2013/02/clouds-100027375-gallery.jpg")';
};

// Keyboard events
window.onkeydown = function(event) {
  var x = event.which || event.keyCode;
  if (x === 13) {
    document.getElementById('subheading').style.display = 'none';
    var sessionLength = prompt('How many minutes will your session last? (enter a number, ex. 5, 10, 15, 20)');
    var min = sessionLength - 1;
    var sessionTimer = setInterval(function() {
      if (min < 0) {
        document.getElementById('timer').innerHTML = "<p>" + sessionLength + " minute session is over.<p>";
        clearInterval(sessionTimer);
      }
      sec--;
      document.getElementById('min').innerText = min;
      if (sec === 9) {
        document.getElementById('extraZero').style.display = 'initial';
      }
      if (sec < 0) {
        sec = 59;
        min--;
        document.getElementById('extraZero').style.display = 'none';
        document.getElementById('min').innerText = min;
        document.getElementById('sec').innerText = sec;
      } else {
        document.getElementById('sec').innerText = sec;
      }
    }, 1000);
  } else if (x === 32) {
    counter++;
    document.getElementById('counter').innerHTML = counter;
  } else if (x === 8) {
    event.preventDefault();
    counter = 0;
   ...