Skip to content
OverviewSolutions
15
Comments
22

Jonatan Samuelsson

@jonatan-samuelssonUmeå, Sweden490 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Jonatan Samuelsson•490
    @jonatan-samuelssonPosted 1 day ago

    Looks really good, nice job!

    I'd like to hear your thoughts on hard coding the rating system using JS rather than using custom styled radiobuttons, what made you go for that approach?

    0
  • P
    Jonatan Samuelsson•490
    @jonatan-samuelssonPosted 4 days ago

    Well done, good-looking solution, well-structured code.

    Your content is rendered quite high up on the page, is that a conscius choice? Asking since it departs from the design.

    Also, no matter what quiz topic I choose, I get the HTML quiz. I didn't have to review your code enough to pinpoint the error, but you should look over your jason-fetching and data managment functions.

    Marked as helpful
    0
  • CodeWarlock•10
    @Bytehax21Submitted 17 days ago
    What are you most proud of, and what would you do differently next time?

    Making projects using Figma is way easier and faster than eyeballing the design stuff. I think i made it pretty close to original so no doubts on my work as of now.

    What challenges did you encounter, and how did you overcome them?

    I faced issues with applying CSS on Child elements like p tags as assigning ID to them and then writing CSS didn't work on them so, I did a workaround by assigning the child a class and then using css and the padding was different than mentioned in Figma design file

    What specific areas of your project would you like help with?

    Is my CSS good enough or how can i improve it like in applying padding margins and where to assign class or ID etc.

    Just Used CSS Flexbox

    2
    P
    Jonatan Samuelsson•490
    @jonatan-samuelssonPosted 17 days ago

    Hey.

    Looks good, well done. One thing I noticed is you're using padding-top to position the card. Another way to do it where it gets centered on the page no matter what is to give your main something like:

    display: flex;
justify-content: center;
align-items: center;
min-height: 100svh;

    For your issue with child p-elements, there are multiple solutions. First of all, i'd say that the first paragraph semantically should be a heading (say h2, h3 or such).

    If you still wanna keep it as paragraphs, you can either do the id thing like so:

    .text #para-1 {
 ...
} 
.text #para-2 {
...
}

    ...or, you could go for child selectors:

    .text > p:first-child {...}
.text > p:nth-child(2) {...}
...
.text > p:last-child {...}

    Finally, all of this can be nested to make the css more structured:

    .text {
 (some styles for text perhaps)
 p:nth-child(x) {
  (some style)
 }
 p:nth-child(x) {
  (some other style)
 }
}
    Marked as helpful
    0
  • P
    Jonatan Samuelsson•490
    @jonatan-samuelssonPosted 17 days ago

    I really like your solution, code is super clean and easy to read.

    Especially the JS is nicely commented and compartmentalized. I like the idea of using a class like you did, as it makes for better portability and reusability. My solution had a completely different approach, so it's nice to see all the various way to achieve the same functionality.

    Marked as helpful
    0
  • P
    Jonatan Samuelsson•490
    @jonatan-samuelssonPosted 18 days ago

    Really nice job!

    Your JS is fantastic, super clean and DRY. I really learned from this for future projects, and realized how I should have done this project if I did it again.

    For mine, I had trouble getting the inputs responsive in size and ended up hacking it via contenteditable divs. I don't know what you did differently, but you made it work.

    One small thing I noticed is that the totals do not reset when the reset button is clicked.

    Marked as helpful
    0
  • Donald-cmd-ops•40
    @Donald-cmd-opsSubmitted 19 days ago
    What are you most proud of, and what would you do differently next time?

    looks pretty close to the image

    What challenges did you encounter, and how did you overcome them?

    some minor difference between image and my developed html so spacing button size differences

    What specific areas of your project would you like help with?

    how to improve code to improve closeness to screenshot

    social link profile

    1
    P
    Jonatan Samuelsson•490
    @jonatan-samuelssonPosted 19 days ago

    Looks good!

    I see your problem with the likeness, and I think the easiest solution would be to get rid of the width: 40% on the card. Either set it to some fixed width or use min() to restrict its growth.

    Also, the way you center the .centered class is a bit overly complicated. A better way to do it is to have a full-viewport container (could just be the main) with display: grid and place-items: center. That way, the parent element controls the position of the card, which improves reusability.

    Happy coding!

    Marked as helpful
    0
View more comments