title: HTML/CSS Countdown Timer
body: <p>I have a html page which takes hour and minute inputs for exams.
  - In another html or css document I would like to essentially run a countdown timer of HH:MM. i.e. if input was 1 hour and 10 min it would countdown from 01:10 to 00:00. I am assuming there is some way of calling the input values from one module to another.
  - I would also like to make this countdown start when a start button is pressed
  - The display module (Exam Display) is split into 4 quarters such that 4 exam timers can run concurrently. (I am hoping that in the case that there is no input value, when the start button is pressed nothing will happen with that particular timer)</p>
  
  <p>I am attaching both jsfiddle and the code.
  For ExamSetup.html &amp; ExamSetup.css
  -<a href="https://jsfiddle.net/vf113tux/1/" rel="nofollow">https://jsfiddle.net/vf113tux/1/</a>
  OR
  ExamSetup.html:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="ExamSetup.css" /&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="Exam 1"&gt;
  &lt;form class="pure-form pure-form-stacked"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Exam 1&lt;/legend&gt;
  
          &lt;label for="Exam Name"&gt;Name&lt;/label&gt;
          &lt;input id="Name1" type="text" placeholder="Name"&gt;
  
          &lt;label for="Exam Writing Time"&gt;Writing Time&lt;/label&gt;
          &lt;input id="Writing1H" type="number" placeholder="Hours" min="0" max="12"&gt;
          &lt;input id="Writing1M" type="number" placeholder="Minutes" min="0" max="60"&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="Exam 2"&gt;
  &lt;form class="pure-form pure-form-stacked"&gt;
      &lt;fieldset&gt;
           &lt;legend&gt;Exam 2&lt;/legend&gt;
  
          &lt;label for="Exam Name"&gt;Name&lt;/label&gt;
          &lt;input id="Name2" type="text" placeholder="Name"
  
          &lt;label for="Exam Writing Time"&gt;Writing Time&lt;/label&gt;
          &lt;input id="Writing2H" type="number" placeholder="Hours" min="0" max="12"&gt;
          &lt;input id="Writing2M" type="number" placeholder="Minutes" min="0" max="60"&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  
  &lt;/div&gt;
  
  &lt;div id="Exam 3"&gt;
  &lt;form class="pure-form pure-form-stacked"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Exam 3&lt;/legend&gt;
  
          &lt;label for="Exam Name"&gt;Name&lt;/label&gt;
          &lt;input id="Name3" type="text" placeholder="Name"&gt;
  
          &lt;label for="Exam Writing Time"&gt;Writing Time&lt;/label&gt;
          &lt;input id="Writing3H" type="number" placeholder="Hours" min="0" max="12"&gt;
          &lt;input id="Writing3M" type="number" placeholder="Minutes" min="0" max="60"&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="Exam 4"&gt;
  &lt;form class="pure-form pure-form-stacked"&gt;  
      &lt;fieldset&gt;
          &lt;legend&gt;Exam 4&lt;/legend&gt;
  
          &lt;label for="Exam Name"&gt;Name&lt;/label&gt;
          &lt;input id="Name4" type="text" placeholder="Name"&gt;
  
          &lt;label for="Exam Writing Time"&gt;Writing Time&lt;/label&gt;
          &lt;input id="Writing4H" type="number" placeholder="Hours" min="0" max="12"&gt;
          &lt;input id="Writing4M" type="number" placeholder="Minutes" min="0" max="60"&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;div class ="span7 text-center"&gt;
  &lt;a href="Display.html"&gt;&lt;button type="submit" button id="button" class="btn btn-lg btn-primary"&gt;Next&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;   
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>ExamSetup.css:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  html, body { height: 100%; padding: 0; margin: 0; }
  div { width: 50%; height: 50%; float: left; }
  
  button {
      text-align: center;
  }
  </code></pre>
  
  <p>For ExamDisplay.html &amp; ExamDisplay.css
  - <a href="https://jsfiddle.net/890e2dmq/" rel="nofollow">https://jsfiddle.net/890e2dmq/</a> (Note for backgrounds are there simply to show the quarter partitions)
  OR
  ExamDisplay.html:
      
      
      
          
          Untitled Document
          
      </p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="div1"&gt;
  &lt;/div&gt;
  &lt;div id="div2"&gt;
  &lt;/div&gt;
  &lt;div id="div3"&gt;
  &lt;/div&gt;
  &lt;div id="div4"&gt;
  &lt;/div&gt;
  
  &lt;button id="button" class="btn btn-lg btn-success"&gt;Start&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>ExamDisplay.css:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  html, body { height: 100%; padding: 0; margin: 0; }
  div { width: 50%; height: 50%; float: left; }
  #div1 { background: #DDD; }
  #div2 { background: #AAA; }
  #div3 { background: #777; }
  #div4 { background: #444; }
  </code></pre>
  
  <p>Thank you very much! And I have checked through quite extensively for the last day but have found it rather difficult to find a proper simple countdown that I require. Many of the developed programs out are mainly for dates or they are for DD:HH:MM:SS and I was unable to edit the code to incorporate only HH:MM.</p>