Skip to content
Submitted over 3 years ago

Interest rate calculator with HTML, CSS and Javascript

Fran•55
@FranciscoMi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Pardon this little license. To do something different, I decided to transform the tip calculator into a new version in Spanish.

On the other hand, to establish concepts, I chose not to use flexbox, in this way I settled basic knowledge

I recognize that I have had a big jam designing the CSS classes so that they can be organized. I have heard about the BEM methodology and I don't know if it would be appropriate to learn it. I would appreciate your most humble opinion. Thank you all

Community feedback

  • Candela Bramucci•680
    @bramuccciPosted over 3 years ago

    Hola! Noté algunas cosas, y las quería comentar. En primer lugar veo que el padding de la calculadora es muy poco, yo lo aumentaría y mantendría durante todo ese div (un div "calc" que encierre el contenido y tenga el padding). Aumentaría el font-weight de los label y les pondría un color gris. En segundo, la página no recalcula cada vez que un carácter es escrito. Esto se resuelve usando .addEventListener('click', ...). Esta guía me fue muy útil! https://developer.mozilla.org/es/docs/Learn/Forms/Form_validation Por último, BEM es una metodología muuuy útil una vez se aprende a usarla (aunque yo siga teniendo problemas) por lo que ampliamente recomiendo que la aprendas. Espero haber ayudado, me gusta mucho tu alternativa hispana para este reto :)

    Marked as helpful
    0
    Fran•55
    @FranciscoMiPosted over 3 years ago

    @Liltanie

    Muchas gracias. La verdad es que no conocía la página y es muy completa. Al tratar de hacer las modificaciones me he dado cuenta de lo que me queda por aprender. Muchas de ellas me obligan a replantearme un cambio desde cero. Voy a ver si consigo que la página recalcule los tipos cada vez que teclee un valor en todos los campos numéricos. Gracias

    1
    Candela Bramucci•680
    @bramuccciPosted over 3 years ago

    @FranciscoMi De nada!! Me alegra haber ayudado 🥰 suerte

    0
  • Ayoub1Dev•195
    @Ayoub1devPosted over 3 years ago

    Hola amig@, he econtrado un problema de accesibilidad muy molesto. Cambio a ingles : ) , para que otros tambien aprendan de este fallo

    PROBLEM

    The accessibility is that when any of the input fields is click the 0 stays on the input field.

    • Example If I try to type 21 euros the value typed is 210 instead of 21.

    WHAT CAUSED THE PROBLEM

    The problem is because you have set the value of the input to 0 in your HTML value="0"

    SOLUTION

    Remove the value atribute from your HTML and add a placeholder attribute. placeholder="0"

    chupado

    Marked as helpful
    0
    Fran•55
    @FranciscoMiPosted over 3 years ago

    @Ayoub1dev Thanks. Thanks a lot. Thank you very much for this solution. Simple and straightforward, but very, very effective.

    0
    Ayoub1Dev•195
    @Ayoub1devPosted over 3 years ago

    @FranciscoMi 😊👍

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord