Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
22
Comments
13
Quyt
@220100dungvan

All comments

  • P
    Stuart Roper•170
    @Ropenfold
    Submitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I was particularly happy with the error handling which I did through changing React state.

    What challenges did you encounter, and how did you overcome them?

    The main challenges I faced were as a result of working through the different states when a input field is active. This was a particular challenege

    What specific areas of your project would you like help with?

    I'm still a bit stuck on getting the interest rate to be a float. It seems to only want to be a integer number.

    Mortgage Calculator using Next.js and Tailwind

    1
    Quyt•350
    @220100dungvan
    Posted 15 days ago

    Good

  • Anjum Ali•20
    @anjumali10
    Submitted 8 months ago

    Responsive product list with cart using html, css and javascript

    1
    Quyt•350
    @220100dungvan
    Posted 15 days ago

    Good

  • mohamed khaled•140
    @mohamedkhaled18
    Submitted 19 days ago

    Responsive Score Results page using Flexbox

    1
    Quyt•350
    @220100dungvan
    Posted 17 days ago

    Good 👏🥳

  • Mohd Sadaf•1,160
    @MsadafK
    Submitted 3 months ago

    Room homepage

    1
    Quyt•350
    @220100dungvan
    Posted 3 months ago

    Good

  • P
    thawit•820
    @tacesept
    Submitted 3 months ago

    loopstudios landing page

    1
    Quyt•350
    @220100dungvan
    Posted 3 months ago

    Good ♥

  • P
    thawit•820
    @tacesept
    Submitted 3 months ago

    NFT preview

    1
    Quyt•350
    @220100dungvan
    Posted 3 months ago

    Great job, keep up the good work! 💪✨

  • khushi•320
    @khushi0433
    Submitted 3 months ago

    time tracking Dashboard using HTML CSS JS

    1
    Quyt•350
    @220100dungvan
    Posted 3 months ago

    Great job, keep up the good work! 💪✨

    Marked as helpful
  • P
    socratesioa•670
    @socratesioa
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    As a JS beginner I am very proud of being able to complete this challenge. I managed to meet the challenge requirements. I think next time I have to do a form validation things will be much easier.

    What challenges did you encounter, and how did you overcome them?

    The form validation was not very difficult since it was just one email field. But having never done a manual form validation before it was a bit challenging. After some research and some trial and error I managed to complete it. Displaying the appropriate error messages and states was also a bit difficult in the beginning.

    What specific areas of your project would you like help with?

    All feedback is always welcome!

    Newsletter Sign-Up Form with Success Message using HTML, CSS & JS

    1
    Quyt•350
    @220100dungvan
    Posted 3 months ago

    Your design is awesome! 😍👏 Congrats! 🎊💖

  • Kobe Werner•80
    @KobeW-1952857
    Submitted 3 months ago

    Product preview card component

    1
    Quyt•350
    @220100dungvan
    Posted 3 months ago

    your design is great

  • P
    Dean Anderson•250
    @Dean2424
    Submitted 5 months ago

    Article Preview Component using Visual Studio Code

    1
    Quyt•350
    @220100dungvan
    Posted 4 months ago

    Great, congratulations on completing the challenge

  • Marzia Jalili•8,850
    @MarziaJalili
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I've manage to use the useEffect function of React JS for the first time. You all know that, it is amazing working with React.

    What challenges did you encounter, and how did you overcome them?

    If I tell what I encountered you will Laugh at me. I just missspelled the name of the most important class in CSS and wondered what in the world was wrong for more than an hour.

    🤣🤣

    What specific areas of your project would you like help with?

    🤔 Feel free to threw any ruining criticism you want.

    Intro Section with Dropdown Navigation | React JS ⚛️ & Pure CSS 🎨

    2
    Quyt•350
    @220100dungvan
    Posted 5 months ago

    You've done a great job matching the design. 👍 I haven't learned React yet, but this dark mode is really interesting. 🌙 I think the dropdown should close if clicked outside of it.

    Marked as helpful
  • P
    David Pokrajac•560
    @DavidPokrajac
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I used TailwindCSS for this project. I didn't personally like it and will try to go with another CSS solution next time. And I also used GSAP for a little bit of animation. I also incorporated light and dark mode so that the user can toggle between those by checking an input checkbox.

    What specific areas of your project would you like help with?

    I would like to seek help in three things in particular.

    1.) When turning the dark mode on by checking the input checkbox, the dark mode will appear on screen, and it will persist on page refresh, as I set localStorage for it. However, input checkbox will go back to its unchecked state on page refresh, and the result is dark mode appearing although input checkbox is not checked (on page refresh). I tried to use localStorage so that on page refresh input checkbox stays toggled on based on the the value of the checked attribute but I still have not found any solution for that.

    2.) Second major problem I had is with gsap animation. I wanted to animate on each button click, that card component hides its content inside and then shrinks down to height of zero, and then wait 0.75 seconds to rise to its normal height, and then display its content again by making it visible. However, it seems that contentVisibility is not animatable (or atleast that is what i think). How could I successfully animate content inside parent to hide and reappear?

    3.) I used ref.current.clientHeight to calculate height of a card, when making gsap animation explained in second problem, but as I shrink the window the height is a bit different for mobile and laptop devices and it gets a little distorted. Is there a way that height would readjust dynamically when resizing? Is this something resize event listener would help?

    Animatable Time Tracking dashboard (with dark and light modes)

    #gsap#tailwind-css#accessibility
    2
    Quyt•350
    @220100dungvan
    Posted 5 months ago

    That’s amazing! 🌟 You’re really creative. 🎨 I noticed you’re using libraries and frameworks, but I haven’t learned any frameworks yet. Do you think I can achieve these things using just plain HTML, CSS, and JavaScript? 💻✨

  • Yenou Isaiah Ayomide•30
    @yenisaa
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Working on this project exposed me to working with external typography. The typeface used in this project is a Google font called OUTFIT. Initially, I didn't know how to work with it without downloading it to my laptop but after some research, I could do it successfully. I also learned how to use the font shorthand in CSS. I didn't know it was a thing until I read about it on W3school during my research

    What challenges did you encounter, and how did you overcome them?

    Initially, I didn't know how to embed the google font into the project without downloading the font to my laptop but with enough googling, I could do it successsfully.

    What specific areas of your project would you like help with?

    As a beginner, I don't know what too short or too long means yet, but I think I wrote too much CSS. I'm sure there are many more ways to work on this project without writing many lines of code. So if someone could review my code and share how I can make the code shorter, it would be nice.

    Thank you.

    QR Code Component Solution

    1
    Quyt•350
    @220100dungvan
    Posted 6 months ago

    size img and text-color is incorrect

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub