Neste tutorial, vamos criar uma Calculadora de Ganhos do YouTube simples, que ajuda a estimar os ganhos de um canal com base em visualizações e CPM (Custo Por Mil Impressões). Usaremos HTML, CSS e JavaScript para implementar a funcionalidade e o design da ferramenta.
Veja o projeto em funcionamento neste link. Calculadora de Ganhos do YouTube.
Veja o vídeo no YouTube:
1. Estrutura HTML
Primeiro, vamos criar a estrutura básica da calculadora com HTML. O código abaixo define os campos necessários para o cálculo, incluindo inscritos, visualizações do canal, visualizações do vídeo e CPM.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Ganhos do YouTube</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="youtube-calculadora">
<h1>Calculadora de Ganhos do YouTube</h1>
<button class="theme-toggle" onclick="toggleTheme()">Alternar Tema</button>
<div class="form">
<label for="subscribers">Inscritos:</label>
<input type="number" id="subscribers" placeholder="Número de inscritos">
<label for="channelViews">Visualizações do Canal:</label>
<input type="number" id="channelViews" placeholder="Total de visualizações do canal">
<label for="videoViews">Visualizações do Vídeo:</label>
<input type="number" id="videoViews" placeholder="Total de visualizações do vídeo">
<label for="cpm">CPM ($):</label>
<input type="number" id="cpm" placeholder="CPM médio (ex: 2)" step="0.01">
<button class="calculate" onclick="calculateEarnings()">Calcular Ganhos</button>
</div>
<div class="result">
<h2>Ganhos Estimados:</h2>
<p id="earnings">$ 0.00</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. Estilizando com CSS
Agora, vamos adicionar estilo à nossa calculadora com CSS. Isso inclui a definição de um layout responsivo e a aplicação de um tema claro e escuro para a interface do usuário. O código abaixo aplica estilos ao formulário, botões e resultados.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f9f9f9;
transition: background-color 0.3s, color 0.3s;
padding: 20px;
}
.youtube-calculadora {
width: 100%;
max-width: 500px;
min-width: 280px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
transition: background-color 0.3s, color 0.3s;
}
h1 {
color: #ff0000;
}
.form label {
display: block;
margin-top: 10px;
text-align: left;
}
input[type="number"] {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1em;
}
button {
padding: 12px;
width: 100%;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
margin-top: 10px;
}
button.theme-toggle {
background-color: #444;
color: #fff;
margin-bottom: 10px;
}
button.theme-toggle:hover {
background-color: #333;
}
button.calculate {
background-color: #ff0000;
color: #fff;
}
button.calculate:hover {
background-color: #e60000;
}
.result {
margin-top: 20px;
}
.result h2 {
font-size: 1.2em;
color: #333;
}
.result p {
font-size: 1.5em;
font-weight: bold;
color: #000;
}
body.dark {
background-color: #121212;
color: #e0e0e0;
}
.youtube-calculadora.dark {
background-color: #333;
color: #e0e0e0;
}
.youtube-calculadora.dark button.theme-toggle {
background-color: #ff0000;
}
.youtube-calculadora.dark button.theme-toggle:hover {
background-color: #e60000;
}
.youtube-calculadora.dark input[type="number"] {
background-color: #444;
color: #e0e0e0;
border: 1px solid #666;
}
.youtube-calculadora.dark .result p {
color: #fff;
}
@media (min-width: 768px) {
.youtube-calculadora {
padding: 30px;
}
input[type="number"] {
font-size: 1.1em;
padding: 12px;
}
button {
font-size: 1.1em;
}
}
3. Funcionalidade com JavaScript
Por fim, vamos adicionar a lógica da calculadora com JavaScript. Este código calcula os ganhos estimados com base nas visualizações do canal e o CPM fornecido, além de alternar entre os temas claro e escuro.
function calculateEarnings() {
const subscribers = parseInt(document.getElementById("subscribers").value);
const channelViews = parseInt(document.getElementById("channelViews").value);
const videoViews = parseInt(document.getElementById("videoViews").value);
const cpm = parseFloat(document.getElementById("cpm").value);
if (isNaN(subscribers) || isNaN(channelViews) || isNaN(videoViews) || isNaN(cpm)) {
document.getElementById("earnings").innerText = "Por favor, preencha todos os campos.";
return;
}
const monetizedViews = channelViews * 0.6;
const earnings = (monetizedViews / 1000) * cpm;
document.getElementById("earnings").innerText = `$ ${earnings.toFixed(2)}`;
}
function toggleTheme() {
document.body.classList.toggle("dark");
document.querySelector(".youtube-calculadora").classList.toggle("dark");
}
4. Explicação do Código
HTML: Criamos os campos para inserir o número de inscritos, visualizações do canal, visualizações do vídeo e o valor do CPM. Um botão para calcular os ganhos e outro para alternar entre temas claro e escuro.
CSS: Estilizamos a interface para torná-la atraente e responsiva. Também implementamos a alternância de tema claro e escuro.
JavaScript: A função
calculateEarningscoleta os valores dos inputs e calcula os ganhos estimados com base na fórmulamonetizedViews / 1000 * cpm. A funçãotoggleThemepermite alternar entre os temas claro e escuro.
Se preferir, os códigos estão no meu Repositório no GitHub.
5. Conclusão
Com essa calculadora, agora você pode estimar os ganhos de um canal do YouTube de forma simples. Além disso, a implementação de um tema alternativo melhora a experiência do usuário, tornando a ferramenta mais personalizável.
Comentários
Postar um comentário
Obrigado pelo seu feedback!