ermogenes/Aula-25-05.cs

## Aula-25-05.cs
using Swashbuckle.AspNetCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSwaggerGen();
builder.Services.AddEndpointsApiExplorer();

var app = builder.Build();

app.UseSwagger();
app.UseSwaggerUI();

app.MapGet("/soma", (int a, int b) =>
{
    int soma = a + b;
    var resultado = new
    {
        soma,
        a,
        b,
        resultado = $"{a} + {b} = {soma}"
    };
    return Results.Ok(resultado);
});

app.MapGet("/divisao", (double a, double b) =>
{
    double quociente;

    if (b == 0)
    {
        return Results.BadRequest(new
        {
            a,
            b,
            erro = "O denominador é zero."
        });
    }

    quociente = a / b;
    var resultado = new
    {
        quociente,
        a,
        b,
        resultado = $"{a} / {b} = {quociente}"
    };
    return Results.Ok(resultado);
});

app.Run();

## index.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form>
        <label for="a">A:</label>
        <input type="number" id="a" name="a">

        <label for="b">B:</label>
        <input type="number" id="b" name="b">

        <button id="calcular">Divisão</button>
    </form>
    <div id="mensagem"></div>
    <div id="erro"></div>

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

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

    const valorA = document.getElementById("a").value;
    const valorB = document.getElementById("b").value;

    const msg = document.getElementById("mensagem");
    const erro = document.getElementById("erro");

    const url = `/divisao?a=${valorA}&b=${valorB}`;

    const resposta = await fetch(url);
    if (!resposta.ok) {
        erro.innerHTML = "Valor inválido";
        msg.innerHTML = "";
        return;
    }

    const resultado = await resposta.json();
    erro.innerHTML = "";
    msg.innerHTML = `${valorA} dividido por ${valorB} é ${resultado.quociente}`;
}

document.addEventListener("DOMContentLoaded", () => {
    const botao = document.getElementById("calcular");
    botao.addEventListener("click", calcular);
});

## style.css
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: 32px;
}

input, button {
    font-size: 32px;
}

form {
    display: flex;
    flex-direction: column;
    max-width: 200px;
}

form > * {
    margin: 5px;
}

#mensagem {
    color: blue;
}

#erro {
    color: red;
}
	using Swashbuckle.AspNetCore;

	var builder = WebApplication.CreateBuilder(args);

	builder.Services.AddSwaggerGen();
	builder.Services.AddEndpointsApiExplorer();

	var app = builder.Build();

	app.UseSwagger();
	app.UseSwaggerUI();

	app.MapGet("/soma", (int a, int b) =>
	{
	int soma = a + b;
	var resultado = new
	{
	soma,
	a,
	b,
	resultado = $"{a} + {b} = {soma}"
	};
	return Results.Ok(resultado);
	});

	app.MapGet("/divisao", (double a, double b) =>
	{
	double quociente;

	if (b == 0)
	{
	return Results.BadRequest(new
	{
	a,
	b,
	erro = "O denominador é zero."
	});
	}

	quociente = a / b;
	var resultado = new
	{
	quociente,
	a,
	b,
	resultado = $"{a} / {b} = {quociente}"
	};
	return Results.Ok(resultado);
	});

	app.Run();
	<!DOCTYPE html>
	<html lang="en">
	<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>Document</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<form>
	<label for="a">A:</label>
	<input type="number" id="a" name="a">

	<label for="b">B:</label>
	<input type="number" id="b" name="b">

	<button id="calcular">Divisão</button>
	</form>
	<div id="mensagem"></div>
	<div id="erro"></div>

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

	const valorA = document.getElementById("a").value;
	const valorB = document.getElementById("b").value;

	const msg = document.getElementById("mensagem");
	const erro = document.getElementById("erro");

	const url = `/divisao?a=${valorA}&b=${valorB}`;

	const resposta = await fetch(url);
	if (!resposta.ok) {
	erro.innerHTML = "Valor inválido";
	msg.innerHTML = "";
	return;
	}

	const resultado = await resposta.json();
	erro.innerHTML = "";
	msg.innerHTML = `${valorA} dividido por ${valorB} é ${resultado.quociente}`;
	}

	document.addEventListener("DOMContentLoaded", () => {
	const botao = document.getElementById("calcular");
	botao.addEventListener("click", calcular);
	});
	body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	font-size: 32px;
	}

	input, button {
	font-size: 32px;
	}

	form {
	display: flex;
	flex-direction: column;
	max-width: 200px;
	}

	form > * {
	margin: 5px;
	}

	#mensagem {
	color: blue;
	}

	#erro {
	color: red;
	}