<h1>Date Counter</h1>

<form>
  <fieldset>
    <h2>Number of days since:</h2>
    
    
    
    <label for="day1">day</label>
    <input type="number" min="1" max="31" id="day1" name="day1" placeholder="dd" value="10">
    
    <label for="month1">month</label>
    <input type="number" min="1" max="12" id="month1" name="month1" placeholder="mm" value="12">
    
    <label for="year1">year</label>
    <input type="number" min="1919" max="2019" id="year1" name="year1" placeholder="yyyy" value="1993">
    
    <p class="format">dd/mm/yyyy</p>
    
    <p><span class="result" id="result1">xxx</<span></p>
  </fieldset>
</form>

<form>
  <fieldset>
    <h2>Date in x days:</h2>
    
    <label for="day2">days</label>
    <input type="number" min="1" max="100000" id="day2" name="day2" placeholder="days" value="7">
    
    <p class="format">dddd</p>
    
    <p><span class="result" id="result2">xxx</<span></p>
  </fieldset>
</form>

<form>
  <fieldset>
    <h2>Days between two dates:</h2>
    
    <label for="day3">day</label>
    <input type="number" min="1" max="31" id="day3" name="day3" placeholder="dd" value="10">   
    <label for="month3">month</label>
    <input type="number" min="1" max="12" id="month3" name="month3" placeholder="mm" value="12">    
    <label for="year3">year</label>
    <input type="number" min="1919" max="2019" id="year3" name="year3" placeholder="yyyy" value="1993">
    <br><br>
    <label for="day4">day</label>
    <input type="number" min="1" max="31" id="day4" name="day4" placeholder="dd" value="12">
    <label for="month4">month</label>
    <input type="number" min="1" max="12" id="month4" name="month4" placeholder="mm" value="12">    
    <label for="year4">year</label>
    <input type="number" min="1919" max="2019" id="year4" name="year4" placeholder="yyyy" value="1993">
    
    <p class="format">dd/mm/yyyy</p>
    
    <p><span class="result" id="result3">xxx</<span></p>
  </fieldset>
</form>

<footer>
  <p>Created by <a href="https://remybeumier.be" target="_blank">Rémy Beumier</a> with love</p>
</footer>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: arial;
  background: #673AB7;
  background: linear-gradient(to top left, #34495e, #9b59b6);
/*   background-attachment: fixed; */
  background-size: 200%;
  color: white;
  text-align: center;
}

h1 {
  text-align: center;
  letter-spacing: 3px;
  padding: 20px;
  font-weight: normal;
  font-size: 36px;
}

h2 {
  font-weight: normal;
  font-size: 20px;
}

form {
  padding-bottom: 20px;
}

fieldset {
  border: none;
  background: rgba(0, 0, 0, 0.3);
  width: 80%;
  margin: auto;
  padding: 20px;
  border-radius: 2px;
}

.format {
  opacity: 0;
  margin-top: 5px;
  margin-bottom: 20px;
}

input:focus ~ .format {
  opacity: 1;
}

label {
  display: none;
/*   min-width: 100px; */
}

select, input {
  margin-top: 20px;
  padding: 5px 10px;
  min-width: 100px;
  border: none;
  background: white;
  color: #333;
  font-size: 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease;
}

[type="button"]:hover {
  background: #9b59b6;
  color: whitesmoke;
}

p span.result {
  font-size: 24px;
  border: solid 2px;
  border-radius: 2px;
  padding: 5px 10px;
  min-width: 100px;
  display: inline-block;
}

footer {
  padding: 5px;
  font-size: 14px;
  color: white;
}

footer a {
  color: #aaa;
  text-decoration: none;
}
footer a:hover {
  color: white;
  text-decoration: underline;
}

// be smarter with selectors and events
// fix days in month --> can't have 31 feb

var day1 = document.querySelector("#day1");
var month1 = document.querySelector("#month1");
var year1 = document.querySelector("#year1");

var result1 = document.querySelector("#result1");

day1.addEventListener("input", dateProcess1);
month1.addEventListener("input", dateProcess1);
year1.addEventListener("input", dateProcess1);

function dateProcess1() {
  var comb = month1.value + "/" + day1.value + "/" + year1.value;
  var d = new Date(comb);
  var now = new Date();
  result1.innerHTML = dateDiff(d, now);
}

dateProcess1();



var day2 = document.querySelector("#day2");

var result2 = document.querySelector("#result2");

day2.addEventListener("input", dateProcess2);

function dateProcess2() {
  var days = parseInt(day2.value, 10);
  var now = new Date();
  var newDate = new Date(now.getFullYear(), now.getMonth(), now.getDate()+days);
  if (days > 0) result2.innerHTML = convertDate(newDate);
}

dateProcess2();



var day3 = document.querySelector("#day3");
var month3 = document.querySelector("#month3");
var year3 = document.querySelector("#year3");
var day4 = document.querySelector("#day4");
var month4 = document.querySelector("#month4");
var year4 = document.querySelector("#year4");

var result3 = document.querySelector("#result3");
var result3 = document.querySelector("#result3");

day3.addEventListener("input", dateProcess3);
month3.addEventListener("input", dateProcess3);
year3.addEventListener("input", dateProcess3);
day4.addEventListener("input", dateProcess3);
month4.addEventListener("input", dateProcess3);
year4.addEventListener("input", dateProcess3);

function dateProcess3() {
  var comb1 = month3.value + "/" + day3.value + "/" + year3.value;
  var comb2 = month4.value + "/" + day4.value + "/" + year4.value;
  var d1 = new Date(comb1);
  var d2 = new Date(comb2);
  result3.innerHTML = dateDiff(d1, d2);
}

dateProcess3();



function dateDiff(d1, d2) {
  return Math.floor( (d2 - d1) / (1000 * 60 * 60 * 24) );
}

function convertDate(inputFormat) {
  function pad(s) { return (s < 10) ? '0' + s : s; }
  var d = new Date(inputFormat);
  return [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join('.'); // dd.mm.yyyy
}