Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip calculator App using HTML, CSS and Javascript.

@RISQUAT123

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@sivakumars

Posted

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
Discord logo

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