Jack Smith• 350
@Clonephaze
Submitted
What are you most proud of, and what would you do differently next time?
Love how useful form and input elements are, I think I used them well here.
Jack Smith
@Clonephaze
All comments
- Jack Smith• 350
@Clonephaze
Posted
https://clonephaze.github.io/FEC-Mortgage-Calculator/assets/mortgageCalulatorDocs/index.html
JsDoc generated documentation for the script that powers the calculator.
0 @high-rolls
Submitted
I couldn't get the
<main>element to correctly center horizontally on the screen, it is slightly offset to the right. This is especially noticeable on small screen widths. If anyone knows why this happens I'd be grateful to learn it.Jack Smith• 350@Clonephaze
Posted
Solution looks good! I looked at the page, played around with it in responsive design mode at various sizes, and looked at your code for centering. Everything seems fine, on my screens everything is properly centered. Maybe a scrollbar was popping up and shifting things?
My one recommendation would be to set your width to something more like "width min(350px, 90vw)". min() is a fun one, allowing contents to adjust for different conditions. It was always choose the smallest value to work with, in this case it would allow your main content to take up to 90 percent of the width of the screen but never appear smaller than 350px. Responsive widths like that are great for designing content that can adapt to various screen sizes without needing to specify widths at specific viewport sizes.
Marked as helpful
1- Guilherme Aparecido• 110
@Guiilhermeap
Submitted
Jack Smith• 350@Clonephaze
Posted
Looks good! A couple things though
-
Your mobile design breaks at 375 as thats where frontend says it tests for, but for better practice you should put that media query at something like 480 as thats more standard, then set the max-width of your containing element to something like "90vw" which would be 90 percent of the entire view width of the screen. That will scale the box as required to make sure its never bigger than that. You'll probably need to tweak some other min-values to allow for proper scaling but you can do it!
-
Your input fields have "value="DD", which puts DD or similar in the field that need to be removed by the user. Instead use "placeholder=DD" and you'll get text in the box that automatically removes itself as the user starts typing. You can stylize this text with "input::placeholder {color: grey;Font-style: italic;}" for example.
You also seem to have accidentally posted twice, you should remove that other post so you don't have duplicates.
Marked as helpful
0 -
- Christopher Chacón• 300
@ale02code
Submitted
Jack Smith• 350@Clonephaze
Posted
Looks good! One thing though, for the pieces/tokens you're using divs. When you're creating something that you intend to be clicked, it should almost always be a button element instead. "<button type="button" aria-label="Paper" class="token-paper"></button>" for instance. You'll just need to style out the default border that buttons come with in your css.
The reason is that while both can be clicked and you get a result, button elements can also be tabbed to by default and "clicked" with the enter key which is more accessible.
Marked as helpful
0 - Yabsira• 710
@Yabsira21
Submitted
I feel there's an easier way to change between the themes suggestion are really appreciated!
Jack Smith• 350@Clonephaze
Posted
"I feel there's an easier way to change between the themes suggestion are really appreciated!"
Personally I would suggest creating a list of variables for the colors, then a new css class that redefines that list of colors for dark mode. Then have your javascript add or remove that class from your main body element. Allows for smooth transitions without writing animations, less javascript overall, and keeps an easily maintained/editable list of colors. That's how I approached it myself.
Marked as helpful
0 - 21bowler• 250
@21bowler
Submitted
Hey guys, nice challenge. I did finish it but was unable to add a border top color with the linear gradient on the Instagram card. However, if anyone knows how to I would much appreciate the help.
Jack Smith• 350@Clonephaze
Posted
Borderlines can't have gradients, so in this case you'd need to create a psuedo before element of the same size as the card and in the same spot, the raise it up a little and round the top. You would apply the gradient to that, as a background-image. You can also use "transition: all 250ms ease" on your elements that change colors so that the change isn't so jarringly abrupt. Good job on your solution.
0
