JSFiddle - React, Tailwind, and code Playground

by bornasepic

HTML

<div class="wrap">
  <h2>How Long Till?</h2>
  <form action="">
    <div class="year">
      <h5>Year</h5>
      <input class="input" type="number" id="year-input" value="">
    </div>
    <div class="month">
      <h5>Month</h5>
      <input class="input" type="number" id="month-input" value="">
      <button id="solve" type="button">How long?</button>
      <p id="solution">Solution</p>
    </div>
    <div class="day">
      <h5>Day</h5>
      <input class="input" type="number" id="day-input" value="">
    </div>
  </form>

  <div class="js-console">
  </div>
</div>

CSS

body {
  width: 960px;
  margin: auto;
  background-color: #e3e3e3;
  font-family: sans-serif;
  font-size: 14px;
}

#solution {
  margin-left: 50px;
}

#solve {
  margin-left: 50px;
}

.input {
  margin-bottom: 10px;
}

.day h5,
.year h5 {
  padding-right: 12px;
}

.year h5 {
  padding-right: 11px;
}

.year h5,
.input {
  display: inline-block;
}

.month h5,
.input,
#solution {
  display: inline-block;
}

.day h5,
.input {
  display: inline-block;
}

JavaScript

function ready(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

function writeOut(text) {
  document.querySelector('.js-console').innerHTML = text;
}

function program() {
  var y = parseInt(document.getElementById('year-input').value);
  var m = parseInt(document.getElementById('month-input').value);
  var d = parseInt(document.getElementById('day-input').value);

  //////*conditons*//////  
  if (m > 12) {
    m = 12;
  } else if (m < 1) {
    m = 1;
  }

  if (d > 31) {
    d = 31;
  } else if (d < 1) {
    d = 1;
  }

}

ready(function() {
  var start = document.getElementById('solve');

  start.addEventListener('click', program);
});