JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<!DOCTYPE html>
<html lang="ua">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Task 1</title>
   <link rel="stylesheet" href="css/null.css">
   <link rel="stylesheet" href="css/style.css">
   <script src="js/app.js"></script>
</head>

<body>

   <div class="wrapper">
      <main class="page">
         <section class="convert">
            <div class="convert__container">
               <h1 class="convert__title">Enter a number and select a unit of measure</h1>
               <div class="convert__from">

                  <input class="convert__from-input" type="text">
                  <select class="convert__from-select">

                  </select>
               </div>
               <div class="convert__to">
                  <div class="convert__to-text">Convert to</div>
                  <select class="convert__to-select">
                  </select>
               </div>
               <h2 class="convert__result">Result:</h2>
               <div class="convert__data">
                  <div class="convert__data-incoming"></div>
                  <div class="convert__data-output"></div>
               </div>
               <div class="convert__add-title">Add more metrics:</div>
               <div class="convert__add-items">
               </div>
            </div>
         </section>
      </main>
   </div>

</body>

</html>

CSS

* {
   padding: 0px;
   margin: 0px;
   border: 0px;
}
*,
*:before,
*:after {
   box-sizing: border-box;
}
:focus,
:active {
    outline: none;
}
a:focus,
a:active {
    outline: none;
}
html,
body {
   height: 100%;
   min-width: 320px;
}
body {
   line-height: 1;
   font-size: 16px;
   text-rendering: optimizeLegibility;
   -ms-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
input,
button,
textarea {
   font-size: inherit;
}
button {
   cursor: pointer;
   color: inherit;
   background-color: inherit;
}
a {
   color: inherit;
}
a:link,
a:visited {
   text-decoration: none;
}
a:hover {
   text-decoration: none;
}
ul li {
   list-style: none;
}
img {
   vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: inherit;
   font-size: inherit;
}

.wrapper {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 .wrapper > main {
   flex: 1 1 auto;
 }
 .wrapper > * {
   min-width: 0;
 }

 [class*=__container] {
   max-width: 73.125rem;
   box-sizing: content-box;
   margin: 0 auto;
   padding: 0 0.9375rem;
 }
 
 .convert {
   margin-top: 50px;
   
}
.convert__container {
   text-align: center;
}
.convert__title{
   text-align: center;
   margin-bottom: 15px;
   font-size: 1.5rem;
   font-weight: bold;
}
.convert__from {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 250px;
   margin: 0 auto;
   margin-bottom: 30px;
}
.convert__from input {
   width: 200px;
   height: 50px;
   border: 1px solid #ccc;
}
.convert__to {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 250px;
   margin: 0 auto 20px auto;
}
.convert__to-text {
   margin-right: 30px;
}

select{
   border: 2px solid #ccc;
   height: 50px;
}

.convert__result {
   text-transform: uppercase;
   margin-bottom: 20px;
   font-size: 1.2rem;
   font-weight: bold;
}
.convert__data...

JavaScript

let metrics = {
   "baseMetric": "cm",
   "convertRules": {
      "m": {
         "label": "meter",
         "baseMetric": "100",
         "type": "include"
      },
      "in": {
         "label": "inch",
         "baseMetric": "2.54",
         "type": "include"
      },
      "ft": {
         "label": "foot",
         "baseMetric": "30.48",
         "type": "include"
      },
      "mm": {
         "label": "Millimeter",
         "baseMetric": "0.1",
         "type": "add"
      },
      "km": {
         "label": "Kilometer",
         "baseMetric": "100000",
         "type": "add"
      },
      "yd": {
         "label": "Yard",
         "baseMetric": "91.44",
         "type": "add"
      }
   }
}


const convertFromSelect = document.querySelector('.convert__from-select');
const convertToSelect = document.querySelector('.convert__to-select');
const texetField = document.querySelector('.convert__from-input');

 function validateResult(result) {
      if (result.length === 0) {
         alert('Ошибка при загрузке данных');
      } else {
         addMetricsToSelect(result);
      }
   }
   
   validateResult(metrics);

   function addMetricsToSelect(result) {
      const checkboxRow = document.querySelector('.convert__add-items')
      for (let [key, value] of Object.entries(result.convertRules)) {
         if (value.type == "include") {
            let option = document.createElement('option');
            option.text = value.label;
            option.value = key;
            convertFromSelect.appendChild(option);
            convertToSelect.appendChild(option.cloneNode(true));
         } else if (value.type == "add") {
            checkboxRow.insertAdjacentHTML("beforeend", `<div class="convert__add-item"><input class="convert__checkbox" type="checkbox" id="${key}"><label for="${key}">${value.label}</label></div>`)
         } else {
            alert('Ошибка формата данных'); // Які можуть бути помилки?
            break
         }
      }
      // InputObject...