Skip to content
Submitted almost 2 years ago

Tip calculator App using HTML, CSS and Javascript.

Risquat Adekoya•20
@RISQUAT123
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

It was an awesome experience trying out this challenge with my knowledge in HTML, CSS and JAVASCRIPT.

The difficult part of this challenge for me was using the CSS Grid, it was my first time using CSS Grid but am glad it came out nice . Another challenging part was resetting the values to zero after a calculation had been done.

I was unable to center align the custom button while also allowing the figures inputted to be shown from the right. I am open to suggestions and feedbacks on how best to do it.

Community feedback

  • Siva•210
    @sivakumarsPosted almost 2 years ago

    Hi, Risquat.

    To answer your question on how to center the placeholder text and right-align the input text, please consider using input::placeholder .

    The ::placeholder pseudo element targets only the placeholder text. You could use text-align : right for the input text.

    For that particular custom input box if you are targeting by tag, the code might look like the following.

    input::placeholder{
  text-align: center;
}

input{
  text:align: right;
}

    I hope this helps.

    Marked as helpful
    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