JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<form action="">
  <div id="box1">

    <p>Type a country or a currency</p>

    <p>
      <label for="txtList">
        <input type="text" id="txtList1" placeholder="United States Dollars (USD)" list="currencies" />
        <datalist id="currencies">
          <option value="United States Dollars (USD)">
            <option value="Euro(EUR)">
              <option value="Albania (LEK)">
                <option value="Paunds (PAUND)">

        </datalist>
      </label>
    </p>
    <nav>Browse All
      <ul>
        <li><a href="#">United States Dollars (USD)</a></li>
        <li><a href="#">Euro(EUR)</a></li>
        <li><a href="#">Albania (LEK)</a></li>
        <li><a href="#">Paunds (PAUND)</a></li>

      </ul>
    </nav>
    <p>Please enter an amount </p>
    <p>
      <label>Currency:
        <input name="name" type="text" id="first" size="15" maxlength="10" />
      </label>
    </p>
  </div>
  <input type="button" value="=" onclick="convert()" />
  <div id="box2">
    <p>Type a country or a currency</p>

    <p>
      <label for="txtList">
        <input type="text" id="txtList2" placeholder="Euro (EUR)" list="currencies" />
        <datalist id="currencies">
          <option value="United States Dollars (USD)">
            <option value="Euro(EUR)">
              <option value="Albania (LEK)">
                <option value="Paunds (PAUND)">

        </datalist>
      </label>
    </p>
    <nav>Browse All
      <ul>
        <li><a href="#">United States Dollars (USD)</a></li>
        <li><a href="#">Euro(EUR)</a></li>
        <li><a href="#">Albania (LEK)</a></li>
        <li><a href="#">Paunds (PAUND)</a></li>

      </ul>
    </nav>
    <p>Please enter an amount </p>
    <p>
      <label>Currency:
        <input name="name" type="text" id="second" size="15" maxlength="10">

      </label>
    </p>
  </div>
</form>

CSS

div {
  width: 600px;
  height: 300px;
  background-color: blue;
  margin-right: 120px;
  margin-top: 40px;
}

#box1 {
  width: 200px;
  height: 200px;
  background-color: red;
}

#box2 {
  width: 200px;
  height: 200px;
  background-color: red;
}

p {
  font-size: 12pt;
  font-family: arial, sans-serif;
}

nav {
  font-weight: bold;
  color: white;
  border: 2px solid royalblue;
  text-align: center;
  width: 10em;
  background-color: royalblue;
}

nav ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  border-top: 2px solid royalblue;
  background-color: white;
  width: 10em;
  color: black;
}

nav ul li:hover {
  background-color: powderblue;
}

a {
  text-decoration: none;
}

JavaScript

function convert() {
   if (document.getElementById("txtList1").value == 'Euro(EUR)' && document.getElementById("txtList2").value == 'Albania(LEK)') {
     var eur = document.getElementById("first");
     var e = parseFloat(eur.value);
     if (!validateForm())
       return;
     var l = e * 135.82;
     var lek = document.getElementById("second");
     lek.value = l;
   }
   if (document.getElementById("txtList1").value == 'Albania(LEK)' && document.getElementById("txtList2").value == 'Euro(EUR)') {
     var lek = document.getElementById("first");
     var l = parseFloat(lek.value);
     if (!validateForm())
       return;
     var e = l * 138.92;
     var eur = document.getElementById("second");
     lek.value = l;
   }
 }

 function validateForm() {
   var f = document.getElementById("first");
   if (f.value == "") {
     alert("Jepni nje vlere");
     f.focus();
     return false;
   }
   if (isNaN(f.value)) {
     alert("Vlera qe dhate nuk eshte numer");
     f.focus();
     return false;
   }
   return true;
 }