Tutorial del proyecto JavaScript del contador de números

Archivos completos del proyecto

Créalo a partir del código fuente

Crea los archivos del proyecto, copia el código y abre el archivo HTML en tu navegador.

1Crea 3 archivos
→
2Copia el código
→
3Ejecuta index.html

Antes de ejecutarlo

Mantén todos los archivos del proyecto juntos en la misma carpeta.

Estructura del proyecto

counter/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Counter Project</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <div>
        <h1>Counter</h1>
        <span class="value">0</span>
        <div>
          <button class="btn btn-danger decrease"><i class="fa fa-minus" aria-hidden="true"></i></button>
          <button class="btn btn-secondary reset">Reset</button>
          <button class="btn btn-success increase"><i class="fa fa-plus" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </main>
    <script src="index.js"></script>
  </body>
</html>

Contador de números

Contador de números

Créalo a partir del código fuente

Practica con proyectos relacionados

Aplicación del tiempo

Barra de progreso de pasos

Interfaz de usuario de comentarios

Aplicación del tiempo

Barra de progreso de pasos

Interfaz de usuario de comentarios