Skip to content

Commit

Permalink
Botão home
Browse files Browse the repository at this point in the history
  • Loading branch information
@RoodneyMoraes
RoodneyMoraes committed Jun 30, 2024
1 parent b97c62c commit 9319fca
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 104 deletions.
8 changes: 7 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simulados para as Certificações da Microsoft Azure</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
<style>
.card {
transition: transform 0.3s ease-in-out;
}
Expand All @@ -21,6 +21,12 @@
.card-body a:hover {
text-decoration: none;
}

@media (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
Expand Down
256 changes: 153 additions & 103 deletions src/pages/az-104.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
</head>
<header>
<div class="container">
<h1 id="tituloPagina">ExamTopics | Topic 1</h1>
<h1 id="tituloPagina"></h1>
<h6 id="descricaoProgresso"></h6>
</div>
</header>
Expand All @@ -81,6 +81,8 @@ <h6 id="descricaoProgresso"></h6>
</div>
<div>
<button id="btnAnterior" class="btn btn-primary" onclick="paginaAnterior()">Anterior</button>
<!-- Botão Home adicionado aqui -->
<button id="btnHome" class="btn btn-primary" onclick="confirmarVoltarHome()">Home</button>
<button id="btnProxima" class="btn btn-primary" onclick="proximaPagina()">Próxima</button>
</div>
<div>
Expand All @@ -98,128 +100,176 @@ <h6 id="descricaoProgresso"></h6>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
fetch('../data/az-104.json')
.then(response => response.json())
.then(data => {
let topicos = Object.keys(data).filter(key => key !== 'title').map(key => ({ Titulo: key, Itens: data[key] }));
let paginaAtual = 0;

function contarTotalDeLinks() {
let totalLinks = 0;
topicos.forEach(topico => {
totalLinks += topico.Itens.length;
});
return totalLinks;
}
async function carregarDados() {
try {
const response = await fetch('../data/az-104.json');
const data = await response.json();
console.log('Dados carregados com sucesso', data);
return data;
} catch (error) {
console.error('Erro ao carregar os dados', error);
}
}

function marcarComoVisitado(link) {
const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
if (!visitados.includes(link)) {
visitados.push(link);
localStorage.setItem('simulado-az-104', JSON.stringify(visitados));
}
atualizarBarraDeProgresso();
}
async function iniciar() {
const data = await carregarDados();
if (!data) return;

function foiVisitado(link) {
const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
return visitados.includes(link);
}
let topicos = Object.keys(data).filter(key => key !== 'title').map(key => ({ Titulo: key, Itens: data[key] }));
let paginaAtual = 0;

function exibirTopicos() {
if (topicos.length === 0) return;
const topicoAtual = topicos[paginaAtual];
const container = document.getElementById("topicos");
const tituloPagina = document.getElementById("tituloPagina");
tituloPagina.textContent = topicoAtual.Titulo;
container.innerHTML = "";

topicoAtual.Itens.forEach(item => {
const elemento = document.createElement("a");
elemento.href = item.link;
elemento.classList.add("list-group-item", "list-group-item-action");
elemento.target = "_blank";
elemento.textContent = item.title;
if (foiVisitado(item.link)) {
elemento.style.backgroundColor = "lightgreen";
}
elemento.addEventListener('click', (e) => {
e.target.style.backgroundColor = "lightgreen";
marcarComoVisitado(item.link);
});
container.appendChild(elemento);
});
atualizarInfoPagina();
atualizarBotoes();
atualizarBarraDeProgresso();
}
function contarTotalDeLinks() {
let totalLinks = 0;
topicos.forEach(topico => {
totalLinks += topico.Itens.length;
});
return totalLinks;
}

function proximaPagina() {
if (paginaAtual < topicos.length - 1) {
paginaAtual++;
exibirTopicos();
}
function marcarComoVisitado(link) {
const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
if (!visitados.includes(link)) {
visitados.push(link);
localStorage.setItem('simulado-az-104', JSON.stringify(visitados));
}
atualizarBarraDeProgresso();
}

function foiVisitado(link) {
const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
return visitados.includes(link);
}

function paginaAnterior() {
if (paginaAtual > 0) {
paginaAtual--;
exibirTopicos();
function exibirTopicos() {
if (topicos.length === 0) return;
const topicoAtual = topicos[paginaAtual];
const container = document.getElementById("topicos");
const tituloPagina = document.getElementById("tituloPagina");
tituloPagina.textContent = topicoAtual.Titulo;
container.innerHTML = "";

topicoAtual.Itens.forEach(item => {
const elemento = document.createElement("a");
elemento.href = item.link;
elemento.classList.add("list-group-item", "list-group-item-action");
elemento.target = "_blank";
elemento.textContent = item.title;
if (foiVisitado(item.link)) {
elemento.style.backgroundColor = "lightgreen";
}
}
elemento.addEventListener('click', (e) => {
e.target.style.backgroundColor = "lightgreen";
marcarComoVisitado(item.link);
});
container.appendChild(elemento);
});
atualizarInfoPagina();
atualizarBotoes();
atualizarBarraDeProgresso();
}

function atualizarInfoPagina() {
const infoPagina = document.getElementById("infoPagina");
infoPagina.textContent = `Página ${paginaAtual + 1} de ${topicos.length}`;
function proximaPagina() {
if (paginaAtual < topicos.length - 1) {
paginaAtual++;
exibirTopicos();
}
}

function atualizarBotoes() {
const btnAnterior = document.getElementById("btnAnterior");
const btnProxima = document.getElementById("btnProxima");
btnAnterior.disabled = paginaAtual === 0;
btnProxima.disabled = paginaAtual >= topicos.length - 1;
function paginaAnterior() {
if (paginaAtual > 0) {
paginaAtual--;
exibirTopicos();
}
}

function atualizarBarraDeProgresso() {
const topicoAtual = topicos[paginaAtual];
const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
const totalItens = topicoAtual.Itens.length;
const itensVisitados = topicoAtual.Itens.filter(item => visitados.includes(item.link)).length;
const percentualVisitado = (itensVisitados / totalItens) * 100;
const textoDescricao = `Você acessou ${Math.round(percentualVisitado)}% porcento (${itensVisitados} de ${totalItens}) dos links abaixo - Total de Perguntas: (${contarTotalDeLinks()})`;
const descricaoProgresso = document.getElementById("descricaoProgresso");
descricaoProgresso.textContent = textoDescricao;
}
function atualizarInfoPagina() {
const infoPagina = document.getElementById("infoPagina");
infoPagina.textContent = `Página ${paginaAtual + 1} de ${topicos.length}`;
}

function limparLocalStorage() {
$('#confirmacaoModal').modal('show');
}
function atualizarBotoes() {
const btnAnterior = document.getElementById("btnAnterior");
const btnProxima = document.getElementById("btnProxima");
btnAnterior.disabled = paginaAtual === 0;
btnProxima.disabled = paginaAtual >= topicos.length - 1;
}

$(document).ready(function () {
$('body').append(`
<div class="modal fade" id="confirmacaoModal" tabindex="-1" aria-labelledby="confirmacaoModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmacaoModalLabel">Confirmação</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Deseja realmente reiniciar todo o progresso? Ao confirmar será excluido todo o historico de acesso aos links de cada tópico que está armazenado no Local Storage, essa ação irá fazer você voltar ao tópico 1.
function atualizarBarraDeProgresso() {
const topicoAtual = topicos[paginaAtual];
const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
const totalItens = topicoAtual.Itens.length;
const itensVisitados = topicoAtual.Itens.filter(item => visitados.includes(item.link)).length;
const percentualVisitado = (itensVisitados / totalItens) * 100;
const textoDescricao = `Você acessou ${Math.round(percentualVisitado)}% porcento (${itensVisitados} de ${totalItens}) dos links abaixo - Total de Perguntas: (${contarTotalDeLinks()})`;
const descricaoProgresso = document.getElementById("descricaoProgresso");
descricaoProgresso.textContent = textoDescricao;
}

window.limparLocalStorage = function() {
$('#confirmacaoModal').modal('show');
};

window.proximaPagina = proximaPagina;
window.paginaAnterior = paginaAnterior;

// Função para confirmar volta ao menu principal
window.confirmarVoltarHome = function() {
$('#voltarHomeModal').modal('show');
};

$(document).ready(function () {
$('body').append(`
<div class="modal fade" id="confirmacaoModal" tabindex="-1" aria-labelledby="confirmacaoModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmacaoModalLabel">Confirmação</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Deseja realmente reiniciar todo o progresso? Ao confirmar será excluido todo o historico de acesso aos links de cada tópico que está armazenado no Local Storage, essa ação irá fazer você voltar ao tópico 1.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-danger" onclick="localStorage.removeItem('simulado-az-104'); $('#confirmacaoModal').modal('hide'); location.reload();">Reiniciar o Progresso</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-danger" onclick="localStorage.removeItem('simulado-az-104'); $('#confirmacaoModal').modal('hide'); location.reload();">Reiniciar o Progresso</button>
</div>
</div>
`);

// Modal de confirmação para voltar ao menu principal
$('body').append(`
<div class="modal fade" id="voltarHomeModal" tabindex="-1" aria-labelledby="voltarHomeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="voltarHomeModalLabel">Voltar ao Menu Principal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Tem certeza que deseja voltar ao menu principal? Ao confirmar você será redirecionado para a página "Simulados para as Certificações da Microsoft Azure".
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary" onclick="window.location.href='../../index.html';">Confirmar</button>
</div>
</div>
</div>
</div>
</div>
`);
});
`);

exibirTopicos();
});

exibirTopicos();
}

iniciar();
</script>
</body>

Expand Down

0 comments on commit 9319fca

Please sign in to comment.