JSFiddle - React, Tailwind, and code Playground

by Lilian Guimarães

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <title>New Brazilian Forest Code Tooll</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="../NewForestCodeToll/css/style.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


    <link rel="stylesheet" type="text/css" href="../NewForestCodeToll/css/style.css">
</head>

<body>
    <!-- explanatory slider-->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img style="width:20%" class="d-block w-100" src="../NewForestCodeToll/images/APP/app-info.png" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="../NewForestCodeToll/images/reservalegal/reserva-legal.png" alt="Second slide">
            </div>
            <div...

JavaScript

const data = {
    "MG": [{ "slug": "belo-horizonte", "nome": "Belo Horizonte", "num": 20 }],
    "SP": [{ "slug": "sao-paulo", "nome": "São Paulo", "num": 20 }]
}
var selectState = document.querySelector('select[id=country');
// populate select with data structure
for (var key in data) {
    selectState.options[selectState.options.length] = new Option(key, key)
}

let selectMunicipies = document.querySelector('select[id=state]');
let selectInputModule = document.querySelector('input[id=module]')
let fiscalModule = document.querySelector('select[id=fiscalModule]');
let isMinifundio = fiscalModule.options[fiscalModule.selectedIndex].value == 'minifundio' ? true : false;
let isSmallPropertie = fiscalModule.options[fiscalModule.selectedIndex].value == 'small_propertie' ? true : false;
let isMediumPropertie = fiscalModule.options[fiscalModule.selectedIndex].value == 'medium_propertie' ? true : false;
let isBigPropertie = fiscalModule.options[fiscalModule.selectedIndex].value == 'bigPropertie' ? true : false;

// populate select with data structure
for (var key of Object.keys(data)) {
    for (var city of data[key]) {
        selectMunicipies.options[selectMunicipies.options.length] = new Option(city.nome, city.slug)
        $('#module').text('O valor do módulo fiscal da sua região é de ' + city.num);
    }
}

//get value = num in the object (module of propertie)
//calculate area (ha) of rural property
//classify propertie

if (isMinifundio) {
    var minifundio = city.num;
    $('#module').val(minifundio);
    $('#dimension').val(minifundio);
} else if (isBigPropertie) {
    console.log(isBigPropertie, 'isBigPropertie')
    var big_propertie = (city.num * 10)
    $('#module').val(big_propertie);
    $('#propertieClassification').text('grande propriedade rural (latifúndio');

}