ermogenes/Program.cs

## appsettings.json
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "Kestrel": {
    "Endpoints": {
      "Http": {
        "Url": "http://localhost:5000"
      }
    }
  },
  "AllowedHosts": "*"
}

## 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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Frontend</h1>
    <div>Vermelho = <span id="vermelho">?</span></div>
    <div>Branco = <span id="branco">?</span></div>
    <div>Azul = <span id="azul">?</span></div>

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

## index.js
const atualizarPlacar = async () => {
  const response = await fetch("/placar");

  if (response.ok) {
    const result = await response.json();

    document.getElementById("vermelho").innerText = result.vermelho;
    document.getElementById("branco").innerText = result.branco;
    document.getElementById("azul").innerText = result.azul;
  }
};

document.addEventListener("DOMContentLoaded", async () => {
  await atualizarPlacar();
});

## Program.cs
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.UseDefaultFiles();
app.UseStaticFiles();

app.MapGet("/placar", () =>
{
    PlacarDTO placar = new() { vermelho = 5, branco = 4, azul = 6 };
    return Results.Ok<PlacarDTO>(placar);
});

app.Run();

public class PlacarDTO
{
    public int vermelho { get; set; }
    public int branco { get; set; }
    public int azul { get; set; }
}

## style.css
div {
  margin: 10px;
}

#vermelho {
  background-color: red;
  color: white;
  padding: 5px;
}

#branco {
  background-color: white;
  color: black;
  padding: 5px;
}

#azul {
  background-color: blue;
  color: white;
  padding: 5px;
}
	{
	"Logging": {
	"LogLevel": {
	"Default": "Information",
	"Microsoft.AspNetCore": "Warning"
	}
	},
	"Kestrel": {
	"Endpoints": {
	"Http": {
	"Url": "http://localhost:5000"
	}
	}
	},
	"AllowedHosts": "*"
	}
	<!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>Document</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<h1>Frontend</h1>
	<div>Vermelho = <span id="vermelho">?</span></div>
	<div>Branco = <span id="branco">?</span></div>
	<div>Azul = <span id="azul">?</span></div>

	<script src="index.js"></script>
	</body>
	</html>
	const atualizarPlacar = async () => {
	const response = await fetch("/placar");

	if (response.ok) {
	const result = await response.json();

	document.getElementById("vermelho").innerText = result.vermelho;
	document.getElementById("branco").innerText = result.branco;
	document.getElementById("azul").innerText = result.azul;
	}
	};

	document.addEventListener("DOMContentLoaded", async () => {
	await atualizarPlacar();
	});
	var builder = WebApplication.CreateBuilder(args);
	var app = builder.Build();

	app.UseDefaultFiles();
	app.UseStaticFiles();

	app.MapGet("/placar", () =>
	{
	PlacarDTO placar = new() { vermelho = 5, branco = 4, azul = 6 };
	return Results.Ok<PlacarDTO>(placar);
	});

	app.Run();

	public class PlacarDTO
	{
	public int vermelho { get; set; }
	public int branco { get; set; }
	public int azul { get; set; }
	}
	div {
	margin: 10px;
	}

	#vermelho {
	background-color: red;
	color: white;
	padding: 5px;
	}

	#branco {
	background-color: white;
	color: black;
	padding: 5px;
	}

	#azul {
	background-color: blue;
	color: white;
	padding: 5px;
	}