LIvro js html

Ferramenta criar livro

<!DOCTYPE html>

<head>

<pre>

<title>Meu Livro de </title>

<style>

/* Estilos para a paginação e layout do livro */

body {

font-family: Arial, sans-serif;

line-height: 1.6;

margin: 0;

padding: 0;

}

.page {

width: 100%;

height: 100%;

padding: 20px;

box-sizing: border-box;

display: none;

}

.page.active {

display: block;

}

</style>

</head>

<h2 style="color:#8B008B;">Você pode escrever! Criar aqui o seu livro</h2>

<body>

<h1>Página 1</h1>

<p>Conteúdo da página 1...</p>

</div>

<h1>Página 2</h1>

<p>Conteúdo da página 2...</p>

</div>

<button onclick="previousPage()">Anterior</button>

<button onclick="nextPage()">Próxima</button>

let currentPage = 0;

const pages = document.querySelectorAll('.page');

function showPage(pageIndex) {

pages.forEach((page, index) => {

if (index === pageIndex) {

page.classList.add('active');

} else {

page.classList.remove('active');

}

});

}

function nextPage() {

if (currentPage < pages.length - 1) {

currentPage++;

showPage(currentPage);

}

function previousPage() {

if (currentPage > 0) {

currentPage--;

showPage(currentPage);

}

</script>

</body>

</pre>

</html>

SLIDE SHOW COD

<!DOCTYPE html>

<head>

<pre>

<style>

.slideshow-container {

position: relative;

max-width: 1000px;

margin: auto;

}

.mySlides {

display: none;

}

.prev, .next {

cursor: pointer;

position: absolute;

top: 50%;

width: auto;

margin-top: -22px;

padding: 16px;

color: white;

font-weight: bold;

font-size: 20px;

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

}

.next {

right: 0;

border-radius: 3px 0 0 3px;

}

</style>

<title>Slide Show</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

showSlides(slideIndex += n);

}

function showSlides(n) {

var i;

var slides = document.querySelectorAll(".mySlides");

if (n > slides.length) {slideIndex = 1}

if (n < 1) {slideIndex = slides.length}

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

slides[slideIndex-1].style.display = "block";

}

</script>

<h1 style="color:purple;">Meu verso sentido!</h1>

Comecei no sentir,

nada, mesmo pedir.

Agua límpida em mar aberto,

ondas descritas no descrever.

Vida!

Intenso viver.

Energia sobrenatural,

junção de magneticos eletrons.

O som, o descrever,

sentimento é a verdade do acrescentar.

Liberta libertando,

quando se aprende amor,

comparece a sobremacia do amando.

Amar, sentindo.

No lugar de chorando!

</body>

</pre>

</html>

CALCULADORA ANCHI LETRAS

<!DOCTYPE html>

<html>

<pre>

<title>Calculadora de letras e frases com números</title>

Faça o seu melhor,

PROGRAME SIMPLES, mas eficiente!

<h1>Calculadora de letras e frases com números</h1>

<h2>Calcular o código ASCII de uma letra</h2>

<button onclick="calcularLetras()">Calcular</button>

<h2>Escrever frases com números</h2> <input type="text" id="frase" placeholder="Digite uma frase"> <button onclick="escreverFrases()">Escrever</button> <p id="fraseNumerica"></p>

function calcularLetras() {

// Recebe a letra do input

var letra = document.getElementById("letra").value;

// Calcula o código ASCII da letra

var codigoAscii = letra.charCodeAt(0);

// Mostra o código ASCII da letra

document.getElementById("resultado").innerHTML = "O código ASCII da letra " + letra + " é " + codigoAscii; }

function escreverFrases() {

// Recebe a frase do input

var frase = document.getElementById("frase").value;

// Converte a frase para letras maiúsculas

frase = frase.toUpperCase();

// Substitui as vogais por números

frase = frase.replace(/A/g, "4");

frase = frase.replace(/E/g, "3");

frase = frase.replace(/I/g, "1");

frase = frase.replace(/O/g, "0");

frase = frase.replace(/U/g, "2");

// Mostra a frase com números

document.getElementById("fraseNumerica").innerHTML = "A frase com números é: " + frase;

}

</script>

</body>

</pre>

</html>

COD genio da matematica!

<!DOCTYPE html>

<html>

<pre>

<head>

<title>Genio da Matemática</title>

<style>

input[type="number"] {

width: 100px;

padding: 10px;

}

</style>

</head>

<body>

<h1>Genio da Matemática</h1>

Genio da matemática, você pode ser esse genio!

Seja feliz por favor!

<p>Escolha dois números e veja a mágica acontecer!</p>

<button onclick="calcular()">Calcular</button>

function calcular() {

var numero1 = parseInt(document.getElementById("numero1").value);

var numero2 = parseInt(document.getElementById("numero2").value);

var resultado = "O genio calculou que a soma é " + (numero1 + numero2) +

" e a subtração é " + (numero1 - numero2) +

" e o produto é " + (numero1 * numero2) +

" e a divisão é " + (numero1 / numero2);

document.getElementById("resultado").innerHTML = resultado;

}

</script>

</body>

</pre>

</html>

CURL REQUEST SITE

<!DOCTYPE html>

<html>

<head>

<title>Exemplo de cURL puro em HTML</title>

function fazerRequisicao() {

var url = "https://www.bde.es/wbe/en/"; // URL a ser acessada

var xhr = new XMLHttpRequest(); // Objeto XMLHttpRequest

xhr.open("GET", url, true); // Configura o método GET e a URL

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) { // Verifica se a requisição foi concluída com sucesso

var resposta = xhr.responseText; // Obtém a resposta da requisição

console.log(resposta); // Exibe a resposta no console (você pode exibir em outro lugar se preferir)

}

};

xhr.send(); // Envia a requisição

}

</script>

</head>

<body>

<button onclick="fazerRequisicao()">Fazer Requisição</button>

</body>

</html>