JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Currency exchange</title>
  </head>
  <body>
    <div class="container">
      <h1>Currency exchange</h1>
      <form id="formExchange">
        <div class="raw">
          <div class="col col-left">
            <div class="lable">From</div>
            <select id="selectFrom"> </select>
          </div>
          <div class="col col-right">
            <div class="lable">Rate</div>
            <input id="inputRate" type="text" readonly />
          </div>
        </div>
        <div class="raw">
          <div class="col col-left">
            <div class="lable">To</div>
            <select id="selectTo"> </select>
          </div>
          <div class="col col-right">
            <div class="lable">Value</div>
            <input id="inputConvert" type="number" min="0" />
          </div>
        </div>
        <div class="raw">
          <div class="col">
            <div id="resultArea" class="result">
              <div id="resultPart1"></div>
              <div id="resultPart2"></div>
            </div>
          </div>
        </div>
        <div class="raw">
          <div class="col">
            <button type="submit" id="btnCount">Count</button>
            <button id="btnClear">Clear</button>
          </div>
        </div>
      </form>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS

* {
  color: bisque;
}
.container {
  margin: 0 auto;
  width: 350px;
  background-color: green;
  text-align: center;
  border: 1px solid grey;
  border-radius: 8px;
}

.col select {
  width: 100px;
  color: black;
}
.col option {
  color: black;
}
.col input {
  width: 100px;
  color: black;
}
.col {
  display: inline-block;
}
.raw {
  margin-top: 10px;
}
.raw:last-child {
  margin-bottom: 30px;
}
.lable {
  width: 50px;
  float: left;
}
.result {
  width: 300px;
  height: 60px;
  background-color: #ccc;
  margin-top: 20px;
  text-align: left;
}
#resultPart1 {
  color: black;
}
#resultPart2 {
  color: black;
}
button {
  color: black;
}
.error {
  border-color: red;
}

JavaScript

/***
***
/// "DB"
***
***/
const dbModule = (() => {
  let currencies = [];
  // Check if date is actual
  const checkDateEqualCurent = dateToCheck => {
    const year = new Date().getFullYear();
    const date = new Date().getDate();
    const month = new Date().getMonth();
    return (
      year === dateToCheck.getFullYear() &&
      date === dateToCheck.getDate() &&
      month === dateToCheck.getMonth()
    );
  };
  // Read and Parse data from local storage
  const getData = () => {
    const data = localStorage.getItem("CURRENCIES_IN_STORAGE");
    const dataObj = JSON.parse(data);
    return dataObj;
  };
  // Read data from local storage, check is it exist and is all correct
  const checkLocalOnValue = () => {
    const data = getData();
    if (data && data.currencies.length > 0) {
      return checkDateEqualCurent(new Date(data.date));
    }
    return false;
  };
  // Read and fill currencies from local
  const updateFromLocal = () => {
    const data = getData();
    data.currencies.forEach(cur => {
      currencies.push(cur);
    });
  };
  return {
    currencies,
    addCurrency: curr => {
      currencies.push(curr);
    },
    checkLocal: () => {
      return checkLocalOnValue();
    },
    getLocalCurrencies: () => {
      updateFromLocal();
    },
    saveToLocal: () => {
      localStorage.clear();
      localStorage.setItem(
        "CURRENCIES_IN_STORAGE",
        JSON.stringify({
          currencies,
          date: new Date()
        })
      );
    }
  };
})();

/***
***
/// View
***
***/
const viewModule = (() => {
  let currencies = null; // List of currencies
  // UI elements
  const UI = {
    selectFrom: document.getElementById("selectFrom"),
    selectTo: document.getElementById("selectTo"),
    inputRate: document.getElementById("inputRate"),
    inputConvert: document.getElementById("inputConvert"),
    resultArea: document.getElementById("resultArea"),
    btnClear: document.getElementById("btnClear"),
    btnCount:...