JSFiddle - React, Tailwind, and code Playground

by Elender Gallas

HTML

<form>
        <p>Matrícula</br>
        <input type="text" name="" id="matricula" placeholder="GOL1234" maxlength="10"></input>
        </p>
        <p>Origem</br>
        <input type="text" name="" id="origem" placeholder="SBSP" maxlength="4"></input>
        </p>
        <p>Destino</br>
        <input type="text" name="" id="destino" placeholder="SBRJ" maxlength="4"></input>
        </p>
        <p>Nível</br>
        <input type="text" name="" id="nivel" placeholder="F145" maxlength="4"></input>
        </p>
        <p>Hora</br>
        <input type="text" name="" id="hora" placeholder="0843" maxlength="4"></input>
        </p></br>
        <button type="button" onclick="CriaAeronave()"><u>A</u>dicionar</button>
        <button type="button" onclick="ExibirAeronaves()"><u>E</u>xibir Aeronaves Adicionadas</button>
        <button type="button" onclick="ApagarAeronave()"><u>D</u>eletar Aeronave</button>
    </form>
    <p id="lista"></p>

CSS

form{
            border: 1px solid black;
            width:70%;
        }
        input{
            text-transform: uppercase;
            font-weight: 700;
            width: 70px;
        }
        p{
            margin-left: 5px;
            display:inline-block;
            font-size:12px;
        }
        button{
            margin-left: 5px;
            margin-bottom: 5px;
        }

JavaScript

var matricula = document.getElementById('matricula').value.toUpperCase();
var origem = document.getElementById('origem').value.toUpperCase();
var destino = document.getElementById('matricula').value.toUpperCase();
var nivel = document.getElementById('nivel').value.toUpperCase();
var hora = document.getElementById('hora').value;

 function CriaAeronave(matricula, origem, destino, nivel, hora){
    this.matricula = matricula;
    this.origem = origem;
    this.destino = destino;
    this.nivel = nivel;
    this.hora = hora; 
}

aeronave = new CriaAeronave(matricula, origem, destino, nivel, hora);

function ExibirAeronaves(){
    var lista = document.getElementById('lista').innerText;
    lista = aeronave.matricula;
}

function ApagarAeromave(matricula){
    delete aeronave.matricula;
}