JSFiddle - React, Tailwind, and code Playground

by Luan Gabriel Costa Rodrigues

HTML

<div class="todo">
  <div id="button-container">
    <button class="btn" onclick="anterior()">Anterior</button>
    <button class="btn" onclick="proximo()">Próximo</button>
  </div>
  <div id="principal"></div>
</div>

CSS

.todo {
  background-color: black;
  width: 500px;
  height: 300px;
  padding: 15px;
}
#button-container {
  width: 100%;
  height: 30px;
}
.btn {
  background-color: white;
  color: black;
  border-radius: 5px;
  border: 0px;
  outline: none;
  cursor: pointer;
}
#principal {
  border: 2px solid white;
  width: calc(100% - 4px);
  height: calc(100% - 34px);
  max-width: calc(100% - 24px);
  max-height: calc(100% - 54px);
  overflow-y: auto;
  padding: 10px;
  color: white;
}

JavaScript

var listaObj = [
	{
  	nome : "Astolfo",
    sobrenome : "Berlado",
    idade : 25
  },{
  	nome : "Ester",
    sobrenome : "Pérola",
    idade : 29
  },{
  	nome : "Serj",
    sobrenome : "Harakiri",
    idade : 34
	}
]

var posicaoLista = 0

function clearTheArea(){
	document.getElementById("principal").innerHTML = ""
}

function proximo(){
	if (posicaoLista != (listaObj.length - 1)){
  	posicaoLista++
    clearTheArea()
    processaLista()
  }
}

function anterior(){
	if (posicaoLista != 0){
  	posicaoLista--
    clearTheArea()
    processaLista()
  }
}

function processaLista(){
	var Obj = listaObj[posicaoLista]
  var containerNome, containerSNome, containerIdade
  var textNome, textSNome, textIdade
  var elPrincipal = document.getElementById("principal")
  
  containerNome = document.createElement("div")
  containerSNome = document.createElement("div")
  containerIdade = document.createElement("div")
  
  textNome = document.createTextNode("Nome: " + Obj.nome)
  textSNome = document.createTextNode("Sobrenome: " + Obj.sobrenome)
  textIdade = document.createTextNode("Idade: " + Obj.idade)
  
  containerNome.appendChild(textNome)
  containerSNome.appendChild(textSNome)
  containerIdade.appendChild(textIdade)
  
  elPrincipal.appendChild(containerNome)
  elPrincipal.appendChild(containerSNome)
  elPrincipal.appendChild(containerIdade)
}

processaLista()