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

All comments

  • RatifiedGeorge•670
    @RatifiedSubmitted over 1 year ago

    I've used the fonts, Fraunce and Montserrat as directed in the styles guide, but when I compare them with the design, they look different. If you have any advice on this, please comment, thank you in advance.

    Product preview card component

    2
    Daniel•330
    @daniel-web-developerPosted over 1 year 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 over 1 year 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
  • GHNetCode•170
    @GHNetCodeSubmitted over 1 year ago

    Firstly a big thank you to FrontEndMentor for this challenge! I found it quite fun to put together using vanilla html,css(flexbox) and js. The most difficult part of this particular design i found was the logic on hiding various elements like when to hide the label etc when using the mobile touch events where the click events were allot more straight forward. I added "console.log("....") at various stages to track the progress and looks like i have managed ok though.. I would greatly appreciate any feedback you might have.

    Not sure if i have gone a little overboard here adding a sliding bar for mobile users to easily select the date but thought it logical considering it is much easier than manually entering in the digits. To top it off i also added have add animations where i found the UI to be quite simple, so making it as engaging as possible.

    I hope you enjoy this little app, and have a good day!

    Responsive Mob\Desk Design using HTML,CSS(flexbox),JS

    2
    Daniel•330
    @daniel-web-developerPosted over 1 year 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
  • Dimitar•60
    @DimitarK13Submitted over 1 year ago

    The most difficult part about this was calculating the days because of the different lengths of months. Have another solution, feel free to share it with me!!

    Responsive Age Calculator

    3
    Daniel•330
    @daniel-web-developerPosted over 1 year 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 over 1 year 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 over 1 year 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
  • Henry Andrew Baum•40
    @habminSubmitted over 1 year ago

    First attempt at a Level 2 challenge, wasn't too hard but certainly a lot more work going into it! Just Vanilla JS, HTML/CSS.

    My big question is how much time should a challenge/project like this be completed in? I didn't keep a good track of everything I did, but it took me roughly 3-4 days in my free time to implement everything, from the styling, creating and testing the calculation/logic, transition animations, final touches and documentation/commenting. It feels like it took longer than it should, mostly because I was trying to be a little bit extra, but what's a reasonable time estimate for something like this? Both from a junior to senior level would be helpful.

    Also jumping back into JS after a break for awhile, used setTimeout() and setInterval() for a lot of the animations. Feels like it might have been more overhead with timing the delays and durations, as opposed to using async/await with promises, but maybe fine in this case?

    Anyways, thanks in advance for checking out my submission and any comments! Let me know if there's anything else that seems to stick out!

    Quick thanks to:

    ApplePieGiraffe - Providing resources on using em/rem.

    Vanza Setia - Some tips on container styling and when to use ID attributes.

    Age Calculator with some transition animations (JS/HTML/CSS)

    1
    Daniel•330
    @daniel-web-developerPosted over 1 year 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
  • Darren-Coder34•350
    @Darren-Code34Submitted over 1 year ago

    This project allows me to work with the Date object. The tricky part is to calculate the exact age. If you have a tool or the best way to do that, please help me.

    Age calculator

    2
    Daniel•330
    @daniel-web-developerPosted over 1 year 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