Introducción:
En este tutorial, aprenderemos cómo crear un contador simple utilizando JavaScript. Un contador es una excelente manera de practicar los fundamentos de JavaScript, como variables, operadores y funciones. Al final de este tutorial, habrás construido tu propio contador que puede aumentar y disminuir un valor. ¡Vamos a empezar!
Requisitos:
Conocimiento básico de HTML, CSS y JavaScript.
Un editor de código (puede ser Visual Studio Code u otro).
Paso a Paso:
Paso 1: Preparar el HTML y CSS
Crea un archivo HTML llamado contador.html.
Dentro del archivo HTML, agrega una estructura básica de HTML y un elemento <h1> con el texto “Contador Simple”.
Enlaza un archivo de estilo CSS para dar estilo al contador.
Define dos botones con los textos “+” y “-” respectivamente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Contador Simple</title>
</head>
<body>
<h1>Contador Simple</h1>
<button id="incrementar">+</button>
<button id="decrementar">-</button>
<div id="valor-contador">0</div>
<script src="contador.js"></script>
</body>
</html>
Paso 2: Crear el JavaScript
Crea un archivo JavaScript llamado contador.js.
Dentro del archivo JavaScript, declara una variable llamada contador y asigna el valor inicial de 0.
Accede a los elementos de los botones utilizando document.querySelector() y asigna eventos click a cada botón.
Dentro de las funciones de evento click, incrementa o decrementa el valor de la variable contador según corresponda.
Actualiza el contenido de un elemento HTML con el valor del contador.
Paso 3: Conectar JavaScript con HTML
Enlaza el archivo JavaScript (contador.js) al archivo HTML (contador.html) utilizando la etiqueta <script> al final del cuerpo del documento.
Asegúrate de enlazar el archivo JavaScript después de que se hayan cargado los elementos del DOM.
let contador = 0;
const botonIncrementar = document.getElementById('incrementar');
const botonDecrementar = document.getElementById('decrementar');
const valorContador = document.getElementById('valor-contador');
botonIncrementar.addEventListener('click', () => {
contador++;
valorContador.textContent = contador;
});
botonDecrementar.addEventListener('click', () => {
if (contador > 0) {
contador--;
valorContador.textContent = contador;
}
});
Paso 4: Estilizar el Contador
Utiliza el archivo de estilo CSS para dar estilo a los botones y al elemento donde se mostrará el valor del contador.
Puedes cambiar los colores, tamaños y márgenes para que el contador luzca atractivo.
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
button {
font-size: 18px;
padding: 10px 20px;
margin: 0 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
#valor-contador {
font-size: 24px;
margin-top: 20px;
}
Resultado Final:
Al seguir estos pasos, habrás creado un contador simple que puede aumentar y disminuir su valor cuando se hacen clic en los botones correspondientes. Este ejercicio te ayudará a entender cómo funcionan las variables, los eventos y las funciones en JavaScript.
Espero que este tutorial te haya ayudado a comprender mejor cómo trabajar con JavaScript y cómo aplicar tus conocimientos en la creación de proyectos simples. ¡Anímate a explorar más y a crear tus propios proyectos emocionantes! Si tienes alguna pregunta o necesitas más explicaciones, ¡no dudes en preguntar en los comentarios!
Curso Práctico de JavaScript
