Skip to content
OverviewSolutions
24
Comments
32

szam

@k-stopczynskaPoland800 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

  • szam•800
    @k-stopczynskaPosted over 2 years ago

    Hi! Great job on finishing the challenge!

    Since you feel pretty good in CSS and HTML I have suggestions for you.

    Firstly: try adding transitions on active elements like navbars/ hamburger buttons (it can be simple like opacity and scale, or moving from one side using translate X or Y with transitions ease-in/ ease-in-out).

    When you feel comfortable with it, try some cubic-bezier effects: here is a playground for it: https://cubic-bezier.com.

    After that try animations (like rotating some elements when clicked or sth like that).

    When you do that and your projects will become more dynamic- it will be time for some preprocessor like Sass.

    Hope this helps, happy codind!

    Marked as helpful
    0
  • szam•800
    @k-stopczynskaPosted over 2 years ago

    Hi,

    to answer your question: it's a good practice to start from mobile view and it won't be tyresome, it's less lines of code and fun:)

    happy coding!

    0
  • szam•800
    @k-stopczynskaPosted over 2 years ago

    Hi!

    Congratulations on finishing the challenge!

    You did good job with JS part of validation but please consider that if you share your code on a forum it needs to be cleaned up. Especially if you use such colorful console.logs: DDDD you wouldn't want to share this with someone who would want to hire you.

    I would also try not to style anything through JS. It may cause problems in the future because JS styles overwrite CSS styles and it's hard to find in bigger projects. In JS add some class and style this class in CSS.

    I would also try to improve responsiveness and get some layout for tablet version and screens bigger than 1440px.

    Also fix links in documentation. I know it's a small project but it's a good habit to have (still working on it: D).

    Overall good job, you overcome the problems, learn how to search for solutions and get very close to the design:)

    Happy coding!

    Marked as helpful
    1
  • szam•800
    @k-stopczynskaPosted over 2 years ago

    Hi!

    Congratulations on finishing this challenge!

    One question from user's point of view: why is there a default score? Wouldn't it be better not to submit at all and get some error message if the user haven't had picked any score?

    I reviewed your repo and must admit: very nice and clean code, good documentation and close to design: )

    Keep up the good work and happy coding!

    Marked as helpful
    0
  • szam•800
    @k-stopczynskaPosted over 2 years ago

    Hi!

    congratulations on completing the challenge!

    It sure looks good although could be centered as in design. Nice job with theme switcher.

    Just tested the live version and there are 4 things that shouldn't be happening:

    --if you subtract by 0 you should get an error not Infinity --if a user type 18 signs or more- it starts to overflow in X axis -- if a user try to get even 6 decimal digits and subtract it by another decimal- it starts to overflow in Y axis -- there is a problem with big numbers (I didn't get the result as in my calculator) And from user point of view- calculator should have an option to use with keybord.

    Hope this helps:) Happy coding!

    Marked as helpful
    0
  • szam•800
    @k-stopczynskaPosted over 2 years ago

    Hi! Congratulations on completing this challenge! Looks nice!

    I've reviewed your code and have few pointers to improve it in the future:

    Remove predefined styles from HTML file. If you use something like styles.css you should keep all the styles in this place. HTML is for markup, css for styling, JS for user experience.

    I don't really get why but every markup element is in it's own div. It's bad for accessibility. These tags are really important for search engines and screen readers. Also keep track of your headings, don't fit them to design (like you did with h6)- you can always change fontsize, fit them to their purpose. Also 'Mark all as read' is actually a button.

    You left empty classess in few places. It's easier to read code without blanks.

    Try not to mix selectors in css, start from html tags and get deeper with specificity. or start from the top of document and get down, but try to maintain one method everywhere.

    There are also some conflicting styles like: all the headings get font-size .9rem (probably not the best practice either) and few lines after that class heading (which is on h1) gets font-size 1.3rem.

    Practice naming your functions and classes. Should be very descriptive like: function markAsReadHandler instead of read, class spandiel is hard to understand too.

    There is a place for a link to your FrontendMentor profile in attribution:)

    Good job with responsiveness and making it very close to design!

    Hope this helps, happy coding!

    Marked as helpful
    1
View more comments