Skip to content
OverviewSolutions
14
Comments
6
Jack Smith
@Clonephaze

All comments

  • Jack Smith•350
    @ClonephazePosted 4 months ago

    https://clonephaze.github.io/FEC-Mortgage-Calculator/assets/mortgageCalulatorDocs/index.html

    JsDoc generated documentation for the script that powers the calculator.

    0
  • Jack Smith•350
    @ClonephazePosted 10 months ago

    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
  • Jack Smith•350
    @ClonephazePosted 11 months ago

    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
  • Jack Smith•350
    @ClonephazePosted 11 months ago

    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
  • Jack Smith•350
    @ClonephazePosted 11 months ago

    "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
    @21bowlerSubmitted 11 months ago

    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.

    social-media-dashboard-with-theme-switcher

    1
    Jack Smith•350
    @ClonephazePosted 11 months ago

    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