Este es un componente de contador desarrollado con Svelte 5, utilizando Bootstrap 5 para el diseño y los estilos. Permite incrementar, decrementar y resetear el valor del contador con una interfaz limpia y funcional.
- Incrementar el contador.
- Decrementar el contador (evitando valores negativos).
- Resetear el contador.
- Botones deshabilitados según la lógica correspondiente.
- Estilo responsivo gracias a Bootstrap 5.
- Node.js (v16 o superior recomendado).
- Framework Svelte 5.
- Bootstrap 5 incluido en el proyecto.
-
Clona el repositorio:
git clone https://github.com/urian121/contador-con-svelte cd tu_repositorio -
Instala las dependencias:
npm install
-
Ejecuta el servidor de desarrollo:
npm run dev
-
Abre tu navegador en
http://localhost:5173para ver el proyecto.
<script>
let count = 0;
const increment = () => count++;
const decrement = () => count > 0 && count--;
const reset = () => count = 0;
</script>
<div class="row justify-content-center mt-5">
<div class="col-md-8 text-center">
<h3 class="fw-bold mb-4">
Contador: <span class="display-4">{count}</span>
</h3>
<div class="d-flex justify-content-center gap-2">
<button class="btn btn-success" on:click={increment}>
<i class="bi bi-plus-circle"></i> Aumentar
</button>
<button
class="btn btn-danger"
on:click={decrement}
disabled={count === 0}
aria-disabled={count === 0}
>
<i class="bi bi-dash-circle"></i> Disminuir
</button>
<button
class="btn btn-primary"
on:click={reset}
disabled={count === 0}
aria-disabled={count === 0}
>
<i class="bi bi-arrow-counterclockwise"></i> Resetear
</button>
</div>
</div>
</div>Comenta a otros sobre este proyecto 📢
Invita una cerveza 🍺 o un café ☕
Paypal [email protected]
Da las gracias públicamente 🤓.