segue os codigo, completo do carrinho agora, com a solicitação 1 do hora da pratica
e abaixo segue o html e o JS das 5 tarefas do hora da pratica html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<form id="meuForm">
<label for="campoNome">Nome:</label>
<input type="text" id="campoNome" name="nome">
<label for="campoIdade">Idade:</label>
<input type="text" id="campoIdade" name="idade">
<button type="button" onclick="capturarValores()">Capturar Valores</button>
<div id='mostraNome'><span>Seu nome e idade irão aparecer aqui.</span></div>
<label for="campo1">Valor 1:</label>
<input type="text" id="campo1" name="campo1">
<label for="campo2">Valor 2:</label>
<input type="text" id="campo2" name="campo2">
<button type="button" onclick="capturarCampos()">Capturar Valores</button>
<div id='mostrasoma'><span>O resultado da soma aparecerá aqui.</span></div>
<label for="frase1">Insira a 1 frase:</label>
<input type="text" id="frase1" name="frase1">
<label for="frase2">Insira a 2 frase:</label>
<input type="text" id="frase2" name="frase2">
<button type="button" onclick="capturarFrases()">Capturar Valores</button>
<div id='splitFrases'><span>O resultado da soma aparecerá aqui.</span></div>
<label for="conjunto">Insira uma sequencia de numeros, separados por virgula:</label>
<input type="text" id="conjunto" name="conjunto">
<button type="button" onclick="capturarConjunto()">Capturar Valores</button>
<div id='splitConjunto'><span>O resultado da separação, ira aparecerá aqui.</span></div>
</form>
<script src="app.js"></script>
</body>
</html>
javaScript
function capturarValores(){
//2 - criar um formulario e coletar os values do campos no console
let nome = document.getElementById('campoNome').value;
let idade = document.getElementById('campoIdade').value;
console.log(`o nome do usuario é ${nome} e sua idade e ${idade} anos`);
//3 - modificar um elemento HTML com javascript
let resultado = document.getElementById('mostraNome');
resultado.textContent = `Seu nome é ${nome} e sua idade é ${idade} anos`;
}
//4 - receber 2 valores e somar, mostrar no console. com template string
function capturarCampos () {
let valor1 = document.getElementById('campo1').value;
let valor2 = document.getElementById('campo2').value;
let soma = parseInt(valor1) + parseInt(valor2)
let mostrarSoma = document.getElementById('mostrasoma');
mostrarSoma.textContent = `O resultado da soma de ${valor1} com ${valor2} e de ${soma}`;
return console.log(` A soma de ${valor1} com ${valor2} é de ${soma}`);
}
// 5 - receber duas frases, e usar o split para retornar frases menores com base em ponto ou virgula
function capturarFrases () {
let frase1 = document.getElementById('frase1').value;
let frase2 = document.getElementById('frase2').value;
let split1 = frase1.split(';');
console.log(split1[0]);
console.log(split1[1]);
let split2 = frase2.split(',');
console.log(split2[0]);
console.log(split2[1]);
let splitFrase = document.getElementById('splitFrases');
splitFrase.textContent = `A primeira parte da sua frase 1 é "${split1[0]}" é a segunda parte da sua 2 frase é "${split2[1]}"`;
}
// 6 - receber um conjunto de numero, separados por virugla, e usar o split para separar eles e exibir no console.
function capturarConjunto() {
let conjunto = document.getElementById('conjunto').value;
let conjuntoSplit = conjunto.split(',').map(item => item.trim());
if (conjuntoSplit.every(item => ! isNaN(item))) {
conjuntoSplit = conjuntoSplit.map(Number).sort((a,b) => a-b);
}else {
conjuntoSplit = conjuntoSplit.sort();
}
console.log(conjuntoSplit);
let splitConjunto = document.getElementById('splitConjunto');
splitConjunto.textContent = `os Valores digitados ficaria assim: ${conjuntoSplit.join('|')}`;
}
CSS
header {
text-align: center;
font-size: 30px;
color: #bcd0e1;
}
main, html {
margin: 0;
padding: 0;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #7295ba;
}
.container {
text-align: center;
color: #ccee0f;
}
.button {
padding: 10px 20px;
margin: 10px;
font-size: 24px;
border: none;
background-color: #3607ae;
cursor: pointer;
border-radius: 5px;
}
.button:hover {
background-color: #000000;
}
