@Ratified
Latest solutions
Latest comments
- @daniel-web-developer
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.
- @PriskinZsuzsanna@daniel-web-developer
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-outfrom the:hoverand add it either to the normal class or, in the case of the buttons, add a class to the button with the propertytransition: all 0.3s ease-in-out, or maybe just addtransition: all 0.3s ease-in-outto all buttons.Marked as helpful - @GHNetCode@daniel-web-developer
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 - @DimitarK13@daniel-web-developer
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 - @diana12337@daniel-web-developer
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 - @LordY1sus@daniel-web-developer
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
