Valor da Hipotenusa.html

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<title>Valor da Hipotenusa</title>
	</head>
	<body>
		<main class="main">
	  <section class="calc-hipotenusa">
	    <h1>Valor da Hipotenusa</h1>
	    <form class="form" id="form">
	      <label for="co">
	        Cateto oposto
	        <input name="co" id="co" placeholder="Entre com o valor" type="number" />
	      </label>
	      <label for="ca">
	        Cateto adjacente
	        <input name="ca" id="ca" placeholder="Entre com o valor" type="number" />
	      </label>
	      <label for="hipotenusa">
	        Hipotenusa
	        <input disabled="disabled" name="hipotenusa" id="hipotenusa" />
	      </label>
	      <button>Calcular</button>
	    </form>
	  </section>
		</main>
		<script>
			const $form = document.querySelector("form");
		const $ca = document.querySelector("#ca");
		const $co = document.querySelector("#co");
		const $hipotenusa = document.querySelector("#hipotenusa");

		function hipotenusa() {
		  const ca = $ca.value;
		  const co = $co.value;

		  if (!co) {
		    createAlert("Insira o valor do cateto oposto");
		  } else if (!ca) {
		    createAlert("Insira o valor do cateto adjacente");
		  } else if (ca <= 0 || co <= 0) {
		    createAlert("Entre com valores maiores que 0");
		  } else {
		    $hipotenusa.value = Math.hypot(ca, co).toFixed(2);
		  }
		}

		function createAlert(msg) {
		  document
		    .querySelector("body")
		    .insertAdjacentHTML("beforebegin", `<div class='alert'>${msg}</div>`);

		  setTimeout(function () {
		    deleteAlert();
		  }, 3000);
		}

		function deleteAlert() {
		  const list = document.querySelectorAll(".alert");
		  for (const item of list) {
		    item.remove();
		  }
		}

		$form.addEventListener("submit", function (event) {
		  event.preventDefault();
		  hipotenusa();
		});


		alert("Criado por: Carlos Guilherme")
		</script>
	</body>
</html>