Git Product home page Git Product logo

counter-project's Introduction

El contador colorido

Este contador muestras los números en verde cuando son positivos, en rojo cuando son negativos, y en casi negro cuando es un 0. Implementa la funcionalidad de la Demo

Pasos a seguir

  1. Renombra el fichero app.js; que contiene la solución al ejercicio. Crea uno nuevo.
  2. Intenta primero simplemente recuperar los dos elementos del DOM al que debes aplicar el evento click
  3. Comprueba que eres capaz de aplicarlo, haciendo una prueba simple, como por ejemplo, que al hacer clic, en uno de los botones, muestre una cosa. Y al hacer clic en otro botón, muestre un mensaje diferente por consola.
  4. Vas a necesitar una variable para almacenar el valor del contador. Piensa bien donde debe ir.
  5. La función invocada por el evento click de LOWER COUNT debe decrementar la variable que has definido, y además, actualizar el valor en el elemento del DOM adecuado. Por otro lado, ADD COUNT debe incrementarla. No lo hagas todo a la vez. Primero comprueba que eres capaz de actualizar el valor de la variable y mostrarlo por consola. Y luego, lleva el valor de dicha variable al elemento del DOM que le corresponda.
  6. Finalmente, investiga que propiedad de style es necesario cambiar para modificar el color del texto. Piensa que vas a tener que aplicar un condicional para poner el texto en un color u otro.
  7. BONUS Una solución quizás más modular es, en vez de cambiar el color a través de la propiedad style, sea añadir o eliminar una clase al elemento del DOM adecuado. De esta manera, solo cambiando el fichero CSS, podríamos modificar que colores corresponden a los números negativos, y qué colores corresponden a los números positivos. Investiga como eliminar o añadir clases a un elemento del DOM.

Finalmente, en js/solution_provided.js tienes una solución del autor original.

Restricciones

  1. NO copies/pegues una línea de código. Ni siquiera de tu ejercicio anterior. El objetivo es que obtengas soltura y entendimiento en los datos que estás tratando.

counter-project's People

Contributors

omiras avatar romeojeremiah avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.