All solutions

I wasn't sure how to display the page for a wide desktop screen without leaving whitespace on the margins. It'd be nice to know if there is a way to preserve the aspect ratio of the images and the proportions of the original design without leaving whitespace on the sides of the page.

I had a hard time organizing the CSS classes I used for this project and I think I created too many of them. In the future, I'd like to have a more clean and organized approach so that my CSS file is not so long and confusing to use.

I wouldn't ask anyone to torture themselves by looking at this page's code but if you have any tips about how to make this page better please let me know.

In the middle of the project I ended up having to create and add a bunch of CSS classes to the page elements in order to add the light and dark mode functionality. I should have prepared better in advance to figure out which elements had overlapping style rules and decided on an efficient way to organize the CSS classes so that I wouldn't need to spend a lot of time writing javascript code to add and remove classes.

For those who added the colored section in the upper part of the background, how did you do it? I figure one way would be to create a grid in the body elements and have the top row be the colored section but I'm sure there are other ways.

I'd be happy to hear any comments or critiques about this project. I'm sure there are many areas for improvements so if you get a chance let me know how I could improve.

I really wanted to add space between the caret and the input text for each of the inputs but I wasn't able to figure out how to do it. I have seen it suggested online to use the letter spacing property. I tried using a pseudo-element to select the first letter in the input and add letter spacing but that didn't seem to work. If you know how to do this let me know!

I found the most time-consuming part of the project to be writing the javascript to manage the input behavior. I wanted to add more specific error messages depending on the state of the input but I decided not to in the interest of saving time.

I'm not sure what the best settings are for the height of the body. I'd like to know how to vertically center the main content in the desktop view. I made the body a flexbox and I set justify-content to center but it still seems like it's sitting high up on the page.

I'd be curious to know what decision other people made about how many characters to allow for each input. I only allowed three characters for the custom tip input, six for the bill input, and four for the number of people input.

I hope you liked this one. Please let me know what improvements could be made.

I couldn't tell exactly but in the example pictures it looked like there was a pattern of horizontal lines in the background. I haven't added that to my project yet but I'd be curious if anyone else had tried to do it. Maybe it can be done with CSS repeating-linear-gradient?

In my solution the box changes size depending on the amount of text in the response from the API. I'm not sure if that's a good practice or if it would be better to have the box remain a fixed size and instead resize the font to make the text fit.

I'd also be curious to know if anyone has a preferred ordering for their CSS properties. Mine are a spaghetti mess but I know there are conventions to follow, I just haven't been following them.

I'd like to know how to make the grid take up a larger section of the screen in the desktop view. Right now, it seems like the grid looks a little small and has a lot of space on the left and right margins.

I'd also like to know if there is a way to make the profile picture look higher resolution. I think it looks kind of pixely right now. Maybe it's possible to use an anti-aliasing or smoothing property in CSS to do this?

I'd be happy to hear any suggestions about how to improve this project. I know an easy one would be to have more organized code. If you look at the code, everything has been pretty much hacked together. It seems to display correctly, at least on my end, but the CSS is a horrible frankenstein mess.

How do you make the page fit perfectly height-wise on a mobile screen so that there's no room to scroll up or down?