<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";
}