<div class="container">
	<div>
			<h1 class="page-title">
		Calculadora de Média e Conversor de Temperatura</h1>
	<p class="page-subtitle">
		Descubra qual a sua média de nota de todas as provas!
	</p>
	<img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/logo-imersao-conversor-de-moedas.svg" class="page-logo" alt="">
	<button class="botaoOpcao" id="media-button">Calcular Média</button>
	<button class="botaoOpcao" id="termostato-button">Termostato</button>
	</div>
	
	
	<div id="calcular-media" class="calcular-media">
			<p>
				<label>Nota 1o Bimestre</label>
				<input class="notas" id="nota1" type="number" />
			</p>
			<p>
				<label>Nota 2o Bimestre</label>
				<input class="notas" id="nota2" type="number" />
			</p>
			<p>
				<label>Nota 3o Bimestre</label>
				<input class="notas" id="nota3" type="number" />
			</p>
			<p>
				<label>Nota 4o Bimestre</label>
				<input class="notas" id="nota4" type="number" />
			</p>
			<p class="resultado"><span id="resultado"></span></p>
			<button id="media" onclick="calcular()">Calcular Média</button>	
		</div>

<div id="termostato" class="termostato">
		<h2> Conversor: Fahrenheit -> Celsius <h2>
			<p>
				<label>Temperatura:</label>
				<input class="termostato" id="temperatura" type="number" />ºF
			</p>
			<button id="tempo" onclick="toCelsius()">Celsius</button>
			<button id="tempo" onclick="toFahrenheit()">Fahrenheit</button>
			<p class="conversao"><span id="conversao"></span></p>
		</div>
</div>
body {
	font-family: "Roboto Mono", monospace;
	min-height: 25px;
	background-image: url("https://cdn-icons-png.flaticon.com/512/3898/3898089.png");
	background-color: #b9f6ca;
	background-size: 25vh;
	background-position: bottom center;
	background-repeat: no-repeat;
}

.container {
	text-align: center;
	padding: 20px;
	height: 100vh;
}

.page-title {
	color: #1a237e;
	margin: 0 0 5px;
}

.page-subtitle {
	color: #004d40;
	margin-top: 5px;
}

.page-logo {
	width: 100px;
	position: absolute;
	top: 10px;
	left: 10px;
}

.alura-logo {
	width: 40px;
	position: bottom center;
	top: 10px;
	bottom: 10px;
}

a {
	text-decoration: none;
}

a.links {
	display: none;
}

.resultado {
	color: #004d40;
}

.content {
	color: #1a237e;
	width: 500px;
	margin: 0px auto;
	position: relative;
}

/* botao de opcao*/
.botaoOpcao {
	box-shadow: rgb(21 100 173) 3px 4px 0px 0px;
	background: linear-gradient(rgb(121, 187, 255) 5%, rgb(55, 141, 229) 100%)
		rgb(121, 187, 255);
	border-radius: 5px;
	border: 1px solid rgb(51, 123, 196);
	display: inline-block;
	cursor: pointer;
	color: rgb(255, 255, 255);
	font-family: Arial;
	font-size: 17px;
	font-weight: bold;
	padding: 12px 44px;
	text-decoration: none;
	text-shadow: rgb(82 142 204) 0px 1px 0px;
}

/* cabeçalho */
h1 {
	font-size: 48px;
	color: #066a75;
	padding: 10px 0;
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	padding-bottom: 30px;
}
h1:after {
	content: " ";

	width: 100%;
	height: 2px;
	margin-top: 10px;
	background: -webkit-linear-gradient(
		left,
		rgba(147, 184, 189, 0) 0%,
		rgba(147, 184, 189, 0.8) 20%,
		rgba(147, 184, 189, 1) 53%,
		rgba(147, 184, 189, 0.8) 79%,
		rgba(147, 184, 189, 0) 100%
	);
	background: linear-gradient(
		left,
		rgba(147, 184, 189, 0) 0%,
		rgba(147, 184, 189, 0.8) 20%,
		rgba(147, 184, 189, 1) 53%,
		rgba(147, 184, 189, 0.8) 79%,
		rgba(147, 184, 189, 0) 100%
	);
}
// obtendo as DIVs que terão funcionalidades
const mediaDiv = document.getElementById("calcular-media");
const termostatoDiv = document.getElementById("termostato");

// Criando os botões para selecionar as DIVs
const mediaButton = document.getElementById("media-button");
const termostatoButton = document.getElementById("termostato-button");

// Ocultando as DIVs com funcionalidades;
termostatoDiv.style.display = "none";
mediaDiv.style.display = "none";

// botes para alternar entre as DIVs
termostatoButton.onclick = function () {
	termostatoDiv.style.display = "block";
	mediaDiv.style.display = "none";
};

mediaButton.onclick = function () {
	termostatoDiv.style.display = "none";
	mediaDiv.style.display = "block";
};

// Funcoes
function calcular() {
	var nota1oBimetre = parseFloat(document.getElementById("nota1").value);
	var nota2oBimetre = parseFloat(document.getElementById("nota2").value);
	var nota3oBimetre = parseFloat(document.getElementById("nota3").value);
	var nota4oBimetre = parseFloat(document.getElementById("nota4").value);
	var notaFinal =
		(nota1oBimetre + nota2oBimetre + nota3oBimetre + nota4oBimetre) / 4;

	if (notaFinal >= 6.0) {
		document.getElementById("resultado").innerHTML =
			"Aprovado com média: " + notaFinal.toFixed(1);
	} else {
		document.getElementById("resultado").innerHTML =
			"Reprovado com média: " + notaFinal.toFixed(1);
	}
}

function toCelsius() {
	var fahrenheit = parseFloat(document.getElementById("temperatura").value);
	var celsius = (fahrenheit - 32) / 1.8;
	document.getElementById('conversao').innerHTML = celsius.toFixed(1) + "ºC";
}

function toFahrenheit() {
	var celsius = parseFloat(document.getElementById("temperatura").value);
	var fahrenheit = celsius * 1.8 + 32;
	document.getElementById('conversao').innerHTML = celsius.toFixed(1) + "ºF";
}



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.