Eae galera,estou tendo um erro no meu código,eu estou fazendo uma atividade de criar um site de uma calculadora de IMC mais quando eu clico no botão calcular ele tem que aparecer a frase "Seu IMC: 55 " mais ela não aparece, só reinicia o site
Codigo em HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de IMC</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<main id="conteiner">
<section id="img">
<img src="assets/imagens/personal.svg" alt="">
</section>
<section id="Calculator">
<form id="form">
<h1 id="title">
Calculadora - IMC
</h1>
<div class="input-box">
<label for="weight">
Peso em Kg
</label>
<div class="input-fielt">
<i class="fa-solid fa-weight-hanging"></i>
<input type="number" id="weight" required>
<span>
Kg
</span>
</div>
</div>
<div class="input-box">
<label for="height">
Altura em metros
</label>
<div class="input-fielt">
<i class="fa-solid fa-ruler"></i>
<input type="number" id="height" required>
<span>
m
</span>
</div>
<br>
<button id="calculate">
Calcular
</button>
</form>
<div id="infos">
<div id="result">
<div id="bmi" >
<span id="value">55</span>
<span>Seu IMC</span>
</div>
<div id="description">
<span>55</span>
</div>
<div id="more-ifon">
<a href="https://mundoeducacao.uol.com.br/saude-bem-estar/imc.htm" target="_blank">Mais sobre o
IMC <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
</div>
<div id="infos" class="hidden"></div>
</section>
</main>
<script src="assets/js/script.js"></script>
</body>
</html>
Codigo em CSS:
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background-color: #18181b;
}
#conteiner {
display: flex;
align-items: center;
gap: 3.5rem;
}
#img img {
width: 31rem;
}
#Calculator {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem;
color:white ;
background-color: #262626;
border-radius: 8px;
}
#form {
display: flex;
flex-direction: column;
gap: 2rem;
}
#tilte {
font-size:2.25rem ;
position: relative;
}
#title::after {
position: absolute;
content:'' ;
background-color: #16a341;
width: 8rem;
height: 3px;
bottom: 460px;
left: 681px;
border-radius: 3px;
}
.input-box label {
font-size: 1.1rem;
color: white;
font-weight: 500;
}
.input-fielt {
display: flex;
align-items: center;
justify-content: space-between;
background-color:#3f3f46 ;
padding: 0.3rem;
border-radius: 3px;
border-top: 3px;
}
.input-fielt span,
.input-fielt i {
color: #cbd5e1;
font-size: 1.3rem;
padding:0.6rem 1rem;
}
.input-fielt input {
background-color: transparent;
border: none;
width: 100%;
font-size: 1.3rem;
color: white;
}
.input-fielt input::-webkit-inner-spin-button,
.input-fielt input::-webkit-inner-spin-button {
appearance: none;
}
.input-field input:focus {
outline: none;
}
#calculate {
width: 550px;
font-size: 1.25rem;
font-weight: bold;
background-color: #16a341;
color: white;
padding: 0.5rem 0;
border-radius: 3px;
cursor:pointer ;
}
#result {
display: flex;
gap: 2rem;
align-items: center;
border-top: 1px solid #ffffff34;
padding:0.75rem 0 ;
}
#bmi {
display: flex;
align-items: center;
flex-direction: column;
font-size: 2.25rem;
}
#bmi span:last-child {
font-size: 0.875rem;
color: #cbd5e1;
}
#description {
width: 15.5rem;
}
#more-ifon {
}
#more-ifon a {
color: #16a341;
display: flex;
justify-content: center;
align-items: center;
gap: 0.6rem;
font-size: 0.875rem;
text-decoration: none;
transition: color 0.5;
}
#more-ifon a:hover {
color: white;
}
#resultado-imc {
display: none;
}
.hidden {
display: none;
}
#infos {
display: none;
}
Codigo em JAVASCRIPT:
const form = document.getElementById('form');
form.addEventListener('submit',function(event){
event.preventDefault()
const weight = document.getElementById('weight').value;
const height = document.getElementById('height').value;
const bmi = (weight / (height * height)).toFixed(2);
const value = document.getElementById('value');
let description = '';
document.getElementById('infos').classList.remove('hidden');
});
Vídeo da atividade que estou fazendo:https://www.youtube.com/watch?v=UBYqkpsafyI