Skip to content
OverviewSolutions
20
Comments
38

Darko

@dtomicic980 points

IT student

Latest solutions

View more solutions

Latest comments

  • Darko•980
    @dtomicic

    First of all I wanna say nice job on the project.

    You should set the width of the image in percentage since you've set the first image's width in rem your whole website goes out of viewport on mobile devices (see here) and this is how it looks like when you set the width of it to 100%. On bigger screens you would have to adjust accordingly.

    Other than that everything looks nice besides some smaller mistakes but those shouldn't bother your. Good job and keep it up 👍

    Marked as helpful
  • Darko•980
    @dtomicic

    Congrats on finishing your second project.

    I've taken a look at your project and everything looks good except a few things with your JS.

    First you should avoid changing the style the way you did with element.style.display = "none", instead what you should do is make a class in CSS (for example class show) and then you toggle that class to an element through JS like this:

    CSS

    .element {
   display: none;
}

.show {
   display: flex;
}

    JS

    element.classList.toggle("show");

    So now when you click the submit button your element will go from display:none; to display:flex; and if you click the submit button again (which isn't possible in this design but I'm telling you for future reference) the element would have an attribute display:none; so basically you're toggling between two states. You can read more about it in depth here

    Also another thing I've found is that no matter what rating you pick in the end screen it always show you picked out 5/5 since you've hardcoded that part, what I would suggest is make on submit check which button was selected (was it the one with the rating 1, rating 2 etc.) and then depending on that set the rating on the end screen (you can do that with innerHtml and some if/else statement).

    And the last thing I would recommend is to seperate your JS from your HTML meaning you should write JS in it's own file no matter how little of JS code you have.

    Once again congrats and keep on learning 👍

    Marked as helpful
  • Darko•980
    @dtomicic

    Hey, I don't know if you are done with this project or just posting for help but if you're done you might consider looking into why none of the buttons work (they don't calculate anything). But since I'm guessing you're still not done and you're just asking for help you can check out this link for the solution to your problem, it's simpler than what you've done, it checks on keyup if the character that was inserted has a length of 0 (meaning it's the first character) and then checks the ASCII code if it matches 48 (which is 0 in ASCII table).

    Hope this helps a bit, design looks good you just miss the functionality and you'll be all set. Keep it up

  • Darko•980
    @dtomicic

    Congrats on finishing the project, the picture shows up for me (if you're talking why there isn't a picture in the design comparison that sometimes messes up due to paths and stuff like that but no need to worry that's why there is a live preview of the site) as for the other stuff everything looks pretty nice, the card and everything else is responsive and looks good on small and big screens.

    Only thing I would recommend is to avoid adding <br> tags when you're trying to break up text (here) because when you get to bigger screens and the text naturally goes into a new line it will break up on the <br> tag and wont look nice after (this is how it looks on bigger screens). What I would recommend is to set the width of the text container or font-size until the text breaks into new line naturally and then you'll get a nice look and can easily adjust it.

    Overall good job 👍

  • Darko•980
    @dtomicic

    Hey, congrats on finishing your projects, just wanted to let you know that it is not necessary to host the JSON file anywhere you can read it from your folders (like I did here). As for the scaling of the page it's not perfect but it looks quite good, a little bit of work on some stuff and you should be done, but overall it looks good and what's most important it functions.

    Great job keep it up 👍

  • Darko•980
    @dtomicic

    Congrats on doing the challenge, I've just done it myself and I can confirm that it is a bit harder so no worries if you didn't manage to make everything look exactly as the design, I don't know if you followed the provided design in Figma and/or Sketch but you should have exact font sizes, margins etc. in there so you should check it out (since I see some of your stuff is a bit bigger than it should be).

    Other than that as I said no need to be worried about little details you can always go and fix problems one by one.

    Good job 👍

View more comments