Skip to content
OverviewSolutions
14
Comments
8
Daniel
@daniel-web-developer

All comments

  • Daniel•330
    @daniel-web-developerPosted almost 2 years ago

    I think what the problem is that you mistook one font for another in some elements. The Fraunces font family should be only in the main title of the product and price.

    Also, you should make sure that your font weights are correct.

    0
  • Daniel•330
    @daniel-web-developerPosted almost 2 years ago

    Nice work! I liked the animations.

    I've noticed something, though. The animations only work when the cursor starts hovering the element, but there's no "out" animation; it just comes back to the normal state as soon as you "hover off".

    To fix this, you need to remove transition: all 0.3s ease-in-out from the :hover and add it either to the normal class or, in the case of the buttons, add a class to the button with the property transition: all 0.3s ease-in-out, or maybe just add transition: all 0.3s ease-in-out to all buttons.

    Marked as helpful
    0
  • Daniel•330
    @daniel-web-developerPosted almost 2 years ago

    That's a really nice project with cool animations!

    There's a bug with the sliding bar, though. I tried inputting the numbers using only the slider and it said the fields were empty.

    I have one suggestion regarding the <input> fields. I don't know if you prefer this way, but you can remove the arrows from the <input> boxes. You could do it by adding this to your CSS file:

    input{
                appearance: textfield;
}

    I'm not sure this will work in every browser. MDN Web Docs says it works on the main browsers (Firefox, Chrome, Safari, and Edge).

    Last but not least, nice work!

    Marked as helpful
    0
  • Daniel•330
    @daniel-web-developerPosted almost 2 years ago

    I've also had a problem getting the dates right. After some research, I came across a JavaScript library called Datejs. This is how I've done it:

    • I got the dates (from today) using the Date library that comes with JavaScript and stored each in a different variable;
    • I then used a function from Datejs that adds (so you have to use a minus sign to subtract) the date entered by the user.

    That's pretty much it. Coming up with an algorithm is really hard and time consuming so I think it's better to just to use a library instead.

    Marked as helpful
    0
  • Daniel•330
    @daniel-web-developerPosted almost 2 years ago

    Nice one, but I have a couple of suggestions.

    The first suggestion is to add this to the button:

                            cursor: pointer;
}

    It'll transform the cursor from an arrow into that "pointing hand". I think it looks better when it's a button.

    The second suggestion would be to add a JavaScript library to calculate the date for you. I used Datejs. I'm saying this because I've tried using the calculator but it didn't work entirely (I tried '1' in every field and it returned the wrong results). I know it's a really hard algorithm to think by yourself and that's why I used the library.

    Lastly, nice job! Your project looks a lot like the design.

    Marked as helpful
    0
  • Daniel•330
    @daniel-web-developerPosted almost 2 years ago

    First of all, you did a good job in getting your design similar to the one proposed by Frontend Mentor.

    I'm not a very experienced developer, so instead of saying you should do something, I'll say how I'd do it, because I'm not sure my way is the best way.

    1 - I wouldn't comment on almost every element. It may be a good idea because it seems to make it easier for others to understand the code, but unless you have an absolute beginner coder, I don't think there's need for that much detail. This video from CodeAesthetic "advocates" for codes without any comments at all. It's rather interesting and I recommend it.

    2 - I'd add hover animations. I know animations may sound really advanced and scary but these are rather easy. For instance, you could write on your CSS file:

    a{
    ...
    transition: color 300ms ease-in-out;
    
    &:hover{
        color: var(--cyan);
    }
}

    This would gradually change (in 300ms) the color of the author's name, making it look cooler in my opinion. I recommend using a class instead of doing like I did in the example, since you may have multiple <a> elements and you probably won't want every single one of them to have the same behaviour.

    Marked as helpful
    1
  • Daniel•330
    @daniel-web-developerPosted almost 2 years ago

    It took me an afternoon and a morning to complete this challenge, but I implemented no animations and I used a library to calculate the time more efficiently and correctly. "Speedwise", I think I'm decent at HTML and Sass (CSS) but terrible at JavaScript. I had to research for the JS. It's true that part of the time I used to research a decent algorithm to calculate time span between two dates and trying to find a library that would do the maths instead, then I had to decide which library to use (I eventually went with Datejs https://github.com/datejs/Datejs).

    1
  • Daniel•330
    @daniel-web-developerPosted almost 2 years ago

    It's really hard to come up with an algorithm to calculate the time span, so I used the following library https://github.com/datejs/Datejs. It has a function that adds (so be attentive to this and remember to add a - (minus signal) before the input values) to a given date.

    In my code, I only had to get data from the user, get today's date (you can either use vanilla JavaScript or the Datejs library for that), use Datejs's .add() function, and return the values.

    0