Skip to content
OverviewSolutions
20
Comments
37
P
Tsukimi
@hikawi

All comments

  • Tsukimi•780
    @hikawiPosted 15 days ago

    Me when I'm a level 50 going to level 1 area (you forgot the card's shadow)

    Marked as helpful
    1
  • Dylan Heslop•1,570
    @dylan-dot-cSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    This was an iteresting challenge, most proud of how I got to complete it though there are still alot of things that I can do better, but glad I got to complete it.

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

    The state management between ref and reactive was troubling, I had some issues like when you pass data as a prop thet wont be reactive anymore so I kinda had to work around that

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

    Refactoring my code and improving it

    Responsive Product List with Cart: Vue, TailwindCSS, Pinia, RWD

    1
    Tsukimi•780
    @hikawiPosted 20 days ago

    Ooo, I saw what you mean by the model's list being scrollable, that's a very clever way of dealing with that part. Your solution is also very well done, code is being split and super easy to follow, which is also why I like Vue a lot.

    I don't know about your issues passing data into props, it should be reactive fine, unless you try to reassign the data into another variable, and not directly accessing with props.data or using computed.

    I noticed that from screens 768px+, the buttons are too big and overlap each other really badly. Also, this is just my preferences, and might not be good practice, but decorative icons like the shopping cart and the carbon-neutral icon don't need alt text, since there is actual text content there explaining what that element is already. If there's just a button with a shopping cart icon, and nothing else, then alt text would be needed, that's what I assume.

    And about your question about frameworks, my favorite is probably Astro + Vue, which is like a SSR implementation, you can choose which part to make interactive and which to be static and rendered on server, and can integrate with UI frameworks like React, Vue, Svelte,... Because of Astro being compatible with all UI frameworks, I like Nanostores as my state management as it doesn't care about what framework. What about you? What's your favorite?

    Marked as helpful
    0
  • Tsukimi•780
    @hikawiPosted 20 days ago

    Great work!

    Although, you forgot that in the details section, bordering countries are buttons too and can be clicked to navigate to that country.

    Marked as helpful
    0
  • abedzeidan•340
    @Abed001Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I have finished a great challenge I used in this mortgage calculator solution: tailwind ,react ,context Api and also I worked on the SEO Part.

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

    there are many challenges such as: states management, components rendering on a certain condition and catching a specific states or attribute that need to be changed inside the project.

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

    first I want help regarding responsiveness there are a certain times where design on desktop are the same on tablet but when I use (lg:) in tailwind it does not specify anything regarding tablet size ,what can i do to make (lg:) works for medium and large devices regarding this project. second when I put the hsi colors it dosent work in my project. and finally I always have a problem working with any docs it always seems ambigiuos ,like i always cant find my condition inside the docs so if anyone could give an advice i couldn't finish this project without gemini althougth i didnt took solutions or copy paste any code, i work in a way where i know what i want so i request just that but this is after i try to read the docs so any help would be appreciated.

    Responsive Mortgage Calculator using tailwind, html, react, context

    1
    Tsukimi•780
    @hikawiPosted 22 days ago

    OK solution!

    Maybe it's just me, but I think you should split the code into smaller components because right now it reads like a headache. For example, you can split clicked ? <EmptyResultsView /> : <ResultsView result={result} />.

    You can put the entire hsl() function into tailwind's config, the same way you put the hex code correctly there.

    I don't know what you mean by the responsiveness. If you put p-6 md:p-10, it will mean that for any devices, it will default at p-6, but as soon as the screen's width is 768px (md level) or bigger it will become p-10. This essentially means that for mobiles, up until 767px, has p-6 class applied, and from tablets up until infinity will have p-10 applied.

    It's ok to ask AI for help, but make sure to read what the AI gives, and that you can understand it and know that it is correct. The AI likes to talk, but doesn't know if it talks correctly.

    1
  • Tsukimi•780
    @hikawiPosted 25 days ago

    Nice work, a fellow Vue lover.

    I noticed that the add to cart "buttons" are made with <div> and not the actual <button> element, which really hurts accessibility. I couldn't control anything without using a mouse.

    0
  • Tsukimi•780
    @hikawiPosted 29 days ago

    Great solution. Except that continue button does not have a hover state :p

    0
  • Tsukimi•780
    @hikawiPosted about 1 month ago

    I have nothing much to say, it's pretty great.

    It breaks down when you click the any font choices though, rip.

    0
  • Tsukimi•780
    @hikawiPosted about 1 month ago

    Great work overall!

    On the home page you're missing the hover states for the pictures and they are not interactive, I would prefer if they lead me to that section in the slideshow. The images here are stretched, probably because they appear in the wrong order.

    Doing all this in pure vanilla JS is a crazy feat, so congrats on that.

    0
  • Tsukimi•780
    @hikawiPosted about 1 month ago

    Really amazing work! The animations are great, sometimes it snaps left and right though.

    I had to dig deep to find any real issues, the only thing being missing aria-labels on some images like svg, or the clickable <li> elements not being able to tab to with keyboard.

    Marked as helpful
    0
  • Tsukimi•780
    @hikawiPosted about 1 month ago

    Solid solution! The slight animations make it really pleasing to see, with also a functional navigation bar.

    Only thing is that I would want to click on a question in the FAQ section and see it expanded also, not only the button.

    0
  • AdamullaOsas•800
    @AdamullaOsasSubmitted 2 months ago
    What challenges did you encounter, and how did you overcome them?

    responsiveness, from laziness I just did second file :D (I know it's bad)

    react tailwind quick and easy

    1
    Tsukimi•780
    @hikawiPosted about 2 months ago

    Great work! I like the little animations.

    Even though, on some screen sizes the about text overflows below the images, and looks kinda off.

    0
  • Tsukimi•780
    @hikawiPosted about 2 months ago

    Great work!

    There's really nothing I can comment on about the code style. Only problem I can see is the screen from 768px, the leader text overflows to the above section.

    1