Skip to content
OverviewSolutions
4
Comments
19
Theunis
@theYuun

All comments

  • Theunis•210
    @theYuunPosted 10 months ago

    Gosh, that's such a cool animation on the dice roll!

    3
  • Theunis•210
    @theYuunPosted 10 months ago

    You certainly have a way with animation! Very cool!

    1
  • Theunis•210
    @theYuunPosted 10 months ago

    Awesome! I didn't even think to reduce input count by removing the enter/space key to expand/collapse the answer. Also cool that the Tab key does not cross onto the page at all, but I left that in in case accessibility controllers use the key to navigate.

    1
  • Theunis•210
    @theYuunPosted 10 months ago

    Very cool use of grid

    0
  • Theunis•210
    @theYuunPosted 10 months ago

    Excellent and with nice, smooth transitions

    0
  • Theunis•210
    @theYuunPosted 10 months ago

    The answers do not collapse when you click on the button after expansion, so you are stuck with content on the page that you may no longer want to see. This would also increase the height of the section significantly when dealing with a large number of questions.

    0
  • Theunis•210
    @theYuunPosted 10 months ago

    Consider making the entire row an interactive object, so that you can click the text as well as the arrow to open the answer. Also, allow for greater tolerance on buttons. If you have smaller buttons, like a close button, add some width and height to the clickable area around the icon.

    0
  • Marley Semende•570
    @Marley-SemendeSubmitted 11 months ago

    Hey there! I finished another Frontend Mentor Challenge. I used HTML, CSS, and JavaScript for this one. I made sure the form input fields are validated using JavaScript, and I used Javascript to handle tip calculator functionality too as well as the cool custom button for users to choose their own percentage. I followed a mobile-first workflow throughout the project. If you've got any feeback or recommendations, I'd love to hear them! Feel free to share your thoughts, and I'm open to making improvements. Thanks a bunch! Happy Coding :)

    Tip-Calculator-App built with HTML, CSS and Javascript.

    1
    Theunis•210
    @theYuunPosted 10 months ago

    Your preview site links to an order summary site. May want to update that link.

    0
  • Marley Semende•570
    @Marley-SemendeSubmitted 10 months ago

    Hi Frontend Mentor Community 👋🏾. I've completed another challenge! I enjoyed building this advice-generator-app with :

    • 🚀Semantic HTML
    • 🚀CSS Flexbox
    • 🚀JavaScript fetch API

    For smaller screen sizes 📲, I've added @media query to handle the layout and styling

    Things I learnt building this project:

    • Using async programming to fetch and handle data from the AdviceSlip Advice API 👨🏾‍💻
    • Adding an addEventListener() that handled the advice display on button click. Feel free to leave me feedback on my code. Happy coding :)

    Advice-generator-App HTML, CSS, JavaScript 😃

    2
    Theunis•210
    @theYuunPosted 10 months ago

    Awesome! However, consider some smooth transitions between different quotes, like text cross-fading and also adding a transparency transition to the hover effect on the dice button.

    0
  • Marley Semende•570
    @Marley-SemendeSubmitted 10 months ago

    Hello Frontend Mentor community👋🏾. This is my solution for the age-calculator-app 📱. Working with the JavaScript date object was a bit challenging but I also learnt so much through this challenge. I built the project using:

    • 🚀HTML Semantic
    • 🚀CSS flexbox
    • 🚀Position Property
    • 🚀Animations
    • 🚀and JavaScript

    I enjoyed the process of combining these technologies to create a functional age calculator app. I have learnt and practised working with animation: and the @keyframe as well as the js addEventListner() and the dateObject.

    beyond the challenge I've added:

    • logic to calculate if it's user's birthday and dynamically display a happy birthday message🥳
    • animated age counter 👨🏾‍💻
    • and an animated birthday text(I just wanted to practise working with animations). For smaller screen sizes 📲, I've added @media query to handle the layout and styling. Feel free to leave me feedback.

    Age-Calculator-App built with HTML, CSS and JavaScript😃🔥

    2
    Theunis•210
    @theYuunPosted 10 months ago

    Gosh, what a cool project! Absolutely love the animated upward count of the numbers.

    0
  • Theunis•210
    @theYuunPosted 10 months ago

    Alexander did mention the filter by region alignment issue, but I also found that if you move your mouse straight down from the button to the dropdown list, you pass over the flag below the button and you hover over that flag, thereby also placing that flag over the dropdown list. Consider using z-index liberally, like z-index: 9999;, to avoid such issues in the future.

    Also allow your app to treat a dropdown like a modal, ensuring that other interactive elements do not steal focus from targeted elements. A cool way to do this is by adding a transparent div with a lower z-index below the dropdown that spans the screen and blocks mouse interactivity with anything lower down the z-order. A great alternative to using this input-blocking div is playing around with the event.stopPropagation(); function available to Javascript.

    Otherwise, amazing work!

    Marked as helpful
    0
  • Theunis•210
    @theYuunPosted 10 months ago

    Very cool! I especially like that you pushed the reviewer boxes to fit properly into the screen, as opposed to the reference image cutting them off.

    0