ermogenes/index.html

## index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aula DOM</title>
    <style>
        form > * {
            display: block;
        }
    </style>
</head>
<body>
    <h1>Aula DOM</h1>
    <form>
        <label for="nota1">Nota 1</label>
        <input type="text" id="nota1" name="nota1">

        <label for="nota2">Nota 2</label>
        <input type="text" id="nota2" name="nota2">

        <button id="calcula">Calcular Média</button>

        <label for="media">Média</label>
        <input type="text" readonly id="media" name="media">
    </form>

    <h2>Histórico</h2>
    <div id="historico"></div>

    <script src="index.js"></script>
</body>
</html>

## index.js
const cliqueNoBotao = (event) => {
    event.preventDefault();

    const campoNota1 = document.getElementById('nota1');
    const campoNota2 = document.querySelector('#nota2');

    const nota1 = parseFloat(campoNota1.value);
    const nota2 = parseFloat(campoNota2.value);

    const media = (nota1 + nota2) / 2;

    const campoMedia = document.getElementById('media');

    campoMedia.value = media;

    // histórico
    const historico = document.getElementById('historico');

    const mensagem = `<div>A média entre ${nota1} e ${nota2} é ${media}.</div>`;

    historico.insertAdjacentHTML('afterbegin', mensagem);
};

const iniciar = () => {
    const botao = document.getElementById('calcula');
    botao.addEventListener('click', cliqueNoBotao);
};

document.addEventListener('DOMContentLoaded', iniciar);
	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Aula DOM</title>
	<style>
	form > * {
	display: block;
	}
	</style>
	</head>
	<body>
	<h1>Aula DOM</h1>
	<form>
	<label for="nota1">Nota 1</label>
	<input type="text" id="nota1" name="nota1">

	<label for="nota2">Nota 2</label>
	<input type="text" id="nota2" name="nota2">

	<button id="calcula">Calcular Média</button>

	<label for="media">Média</label>
	<input type="text" readonly id="media" name="media">
	</form>

	<h2>Histórico</h2>
	<div id="historico"></div>

	<script src="index.js"></script>
	</body>
	</html>
	const cliqueNoBotao = (event) => {
	event.preventDefault();

	const campoNota1 = document.getElementById('nota1');
	const campoNota2 = document.querySelector('#nota2');

	const nota1 = parseFloat(campoNota1.value);
	const nota2 = parseFloat(campoNota2.value);

	const media = (nota1 + nota2) / 2;

	const campoMedia = document.getElementById('media');

	campoMedia.value = media;

	// histórico
	const historico = document.getElementById('historico');

	const mensagem = `<div>A média entre ${nota1} e ${nota2} é ${media}.</div>`;

	historico.insertAdjacentHTML('afterbegin', mensagem);
	};

	const iniciar = () => {
	const botao = document.getElementById('calcula');
	botao.addEventListener('click', cliqueNoBotao);
	};

	document.addEventListener('DOMContentLoaded', iniciar);