JSFiddle - React, Tailwind, and code Playground

by Junior Thiesen

HTML

<label>Marca:</label>
<input class="w-input" type="text" id="marcas" placeholder="Selecione a Marca">
<input type="hidden" id="idmarcas">
<label>Veículo:</label>
<input class="w-input" type="text" id="veiculos" placeholder="Selecione o Modelo do Veiculo">
<input type="hidden" id="idveiculos">
<label>Ano:</label>
<input class="w-input" type="text" id="modelo" placeholder="Selecione o Ano">
<input type="hidden" id="idmodelo">
<label>Preço:</label>
<input class="w-input" type="text" id="preco" placeholder="Preço do Veículo">
<label>Codigo Fipe:</label>
<input class="w-input" type="text" id="fipe" placeholder="Codigo da Tabela Fipe">
<input class="button" type="button" value="Pesquisar">

CSS

body {
    font-family: Lato, sans-serif;
    color: #333;
    font-size: 14px;
    line-height: 20px;
}
.input {
    height: 38px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}
.w-input {
    display: block;
    width: 50%;
    height: 30px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}
.button {
    padding: 8px 12px;
}

JavaScript

$('#myDiv').click(function(recuperaDados){
    function recuperaDados() {
    var url = 'http://fipeapi.appspot.com/api/1/carros/veiculo/21/001267-0/2014-1.json';
    var req = $.getJSON(url);
    req.done(completaForm);
    req.fail(erro);
} else {
    alert("Invalido");
}
}

function erro(dado) {
    console.log(dado);
}


function completaForm(dado) {
    //alert(dado);
    $('#marca').val(dado.marca);
    $('#modelo').val(dado.name);
    $('#ano').val(dado.ano_modelo);
    $('#preco').val(dado.preco);
    $('#fipe').val(dado.fipe_codigo);
}
});