<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='style.css'/>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
  <section>
    <h1>Albion's New Year: this year, I'm going to:</h1>
    <ol>
      <li>
        <p></p>Learn a bit, maybe a lot, about making Android apps.</p>
        <p>... and JavaScript, PHP, Python, jQuery</p>
      </li>
    </ol>
    
    <section class="countdown">
      <div><div id="d"></div>days</div>
      <div><div id="h"></div>hours</div>
      <div><div id="m"></div>min</div>
      <div><div id="s"></div>sec</div>
    </section>

    <img src="https://dl.dropboxusercontent.com/u/44729745/android.png">
  </section>

  <script src='script.js'></script>
</body>
</html>
* { box-sizing: border-box; }

body {
    background: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #222;
}

h1 {
    font-weight: 300;
    font-size: 1.5em;
    padding-bottom: 0;
    margin-bottom: 6px;
}

h1:last-of-type {
    margin-top: 30px;
}

section > div {
    display: inline-block;
    margin: 0  4px;
}

section > div > div {
    background: white;
    padding: 8px;
    font-size: 1.2em;
}

section {
    padding: 2px;
    border-radius: 12px;
    text-align: center;
}

ol {
    padding: 0;
    margin: 0;
    margin-top: 18px;
}

li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

a {
    color: #222;
}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
// What year are we in now?
var now = new Date();
var current_year = now.getFullYear();
var next_year = current_year + 1;

// Set the date we're counting down to.
var target_date = new Date("Jan 1, " + next_year).getTime();
 
// Variables for time units.
var days, hours, minutes, seconds;
 
// Get the elements that will hold the numbers.
var $days = document.getElementById("d");
var $hours = document.getElementById("h");
var $minutes = document.getElementById("m");
var $seconds = document.getElementById("s");

// Calculate the countdown clock and set the HTML.
function update() {
    // Find the amount of "seconds" between now and target.
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // Do some time calculations.
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
     
    // Format the number strings and put them in the elements.
    $days.innerHTML = pad(days, 2);
    $hours.innerHTML = pad(hours, 2);
    $minutes.innerHTML = pad(minutes, 2);
    $seconds.innerHTML = pad(seconds, 2);
}

// Immediately update the HTML.
// The white boxes are blank otherwise.
update();

// Now update our number elements every 1 second.
setInterval(update, 1000); // 1000 milliseconds = 1 second

// This looks much better with leading zeros, don't you agree?
// If num has less than size digits, add enough 0s to the front.
function pad(num, size) {
    var s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}

Browse more Codebits

Code n' Tell

Last progress almost 4 years ago

196

30972

3D Transformations in CSS

Last progress over 4 years ago

1405

50328

Cool Drawing App

Last progress over 4 years ago

746

42487