proj3 - sketch 3

by Josh Krauth-Harding

HTML

<h1 id="button">POST?</h1>
<h1 id="notification">It's been <span id="timer">00:00:00</span> since you made your post, and <span id="nobody">nobody's liked it.</span></h1>
<div id="alert">Delete it?</div>

<!-- Make it restart when you hit 'DELETE' -->

CSS

* {
   margin: 0;
   padding: 0;
}

html,
body {
   height: 100%;
}

body {
  background-color: black;
  color: white;
  font-family: sans-serif;
}

h1 {
  font-weight: lighter;
  text-transform: uppercase;
  font-size: 5.5em;
  line-height: 0.9;
  user-select: none;
}

#button,
#alert {
  cursor: pointer;
}

#notification {
  display: none;
}

#alert {
  position: absolute;
  border: 1px solid red;
  padding: 20px;
  background-color: black;
  bottom: rem;
  right: 2rem;
  display: none;
  font-size: 8em;
}

#timer,
#nobody {
  animation: toRed 60s;
  animation-fill-mode: forwards;
}

@keyframes toRed {
  from {
    color: white;
  }

  to {
    color: red;
  }
}

JavaScript

$('#button').on('click',() => {
  $('#notification').show();
  $('#button').hide();
  $('#alert').delay(60000).fadeIn(0);
});

$('#alert').on('click',() => {
	$('#notification').hide();
  $('#alert').hide();
});

/* ADAPTED FROM http://jsfiddle.net/gqf69wx4/3/ */

$(function(){
    $('#button').click(function(){
        startTimer();
    });
});

var timerCount = 0;
//var pumpLastTime = "";
//var pumpCounter = 0;
var second = "";
var minute = "";
var hour = "";
var sliceVal = 0;

function startTimer() {
    if (timerCount == 0) {
        var time = getTime();
        timerAction(0);
        timerCount = 1;
    }
    else {
        timerAction(1);
        timerCount = 0;
    }
}

function timerAction(action) {
    var counter = 0;
    var stopwatch = jQuery('#timer');
    var arr = jQuery('#timer').html().split(':');

    if (second == "") {
        second = parseInt("00");
    } else {
        second = arr[2];
    }

    if (minute == "") {
        minute = parseInt("00");
    } else {
        minute = arr[1];
    }

    if (hour == "") {
        hour = parseInt("00");
    } else {
        hour = arr[0];
    }

    if (action == 0) {
        pumpTimerId = setInterval(function () {
            counter++;
            second++;

            if (hour.toString().length == 4) {
                sliceVal = -4;
            }
            else if (hour.toString().length == 3) {
                sliceVal = -3;
            }
            else {
                sliceVal = -2;
            }

            if (second >= 60) {
                minute++;
                if (minute >= 60) {
                    hour++;
                    minute = 0;
                }
                second = 0;
                stopwatch.html(('0' + hour).slice(sliceVal) + ":" + ('0' + minute).slice(-2) + ":" + ('0' + second).slice(-2));
            } else {
                stopwatch.html(('0' + hour).slice(sliceVal) + ":" + ('0' + minute).slice(-2) + ":" + ('0' + second).slice(-2));
            }
      ...