Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Syed Ali Mansoorβ€’ 460

    @syedalimansoor

    Submitted

    Hello everyone! πŸ‘‹

    This challenge took longer than usual, but I had a lot of fun making it! I got the chance to learn Redux and integrate it with Typescript and styled-components. I experimented with animations and micro-interactions in this challenge, and you'll see them here and there.

    Here's the feature list:

    • Create, edit, and delete todos
    • Toggle todo status and filter by status
    • Toggle between light and dark theme
    • Create multi-line todos on desktop using Shift+Enter
    • Clear all completed todos
    • Retains selected theme and todo list
    • Installable as a progressive web app

    Do check out the app and let me know what you think!

    Todo App | React, Redux, Typescript, styled-components, vite

    1

    Nikaβ€’ 180

    @nikavolk

    Posted

    Hello!

    Checked out your solution and here's a few things to note:

    • love that you used Redux, I have to learn that still and it's difficult! πŸ˜…
    • love the animations!
    • when viewing on desktop, the filter "All, Active, Completed" should be within the items list (sandwiched between Items left and Clear completed)
    • input and each todo don't show special characters in full height when capitalized (like ČŽŠ)

    Great job! Gave me a lot of new ideas for CSS animations 😁

    Marked as helpful

    1
  • promiseβ€’ 520

    @ugochukwuuu

    Submitted

    Please I have a lot of things wrong with this project and would love it if someone can help me with the following areas: 1.How do I set the height of the image to be the view height? It seems that every-time I try to do this it just sets the profile card off balance. 2. How do I position the background image like how it was positioned in the demo? 3.How do I properly overlay the profile image on the bg-pattern? I am not happy with the way I did it, and plus it makes the profile image not to be responsive. Thank You very much

    css flexbox

    1

    Nikaβ€’ 180

    @nikavolk

    Posted

    Hello!

    #1 If you would like to set a height of any element to the full view height, you can do it by assigning height: 100vh. For a quick fix to your card positioning, what I did was replace the 3em max-height with height:100vh, and added to body {} display: flex; That should center the card.

    #3 I used position: absolute and the transform attribute to position the element in a similar project.

    No idea on the second point, maybe someone else could help with that 😊

    0
  • Nikaβ€’ 180

    @nikavolk

    Posted

    Hi Viktor!

    Beautifully done! The CSS is readable, the class names are understandable, great work!

    The only tiny, minor bug that I found was the background colour of the "main" div. From what I can see in the design brief, that background should be white while yours is a pale blue.

    Other than that, awesome work 😊

    Marked as helpful

    1
  • Nikaβ€’ 180

    @nikavolk

    Posted

    Hello Justin!

    I had a look through your code and there doesn't seem to be anything wrong on the JS side.

    However, in your HTML file, I think you would need to use <input type="radio"> for each choice and group them up, instead of using buttons for each rating. I believe doing it that way the chosen rating will stay selected upon clicking the Submit button.

    Marked as helpful

    1
  • Matthijs van der Plasβ€’ 30

    @MatthijsvanderPlas

    Submitted

    Beginner at work. I feel my code is still messy and probably very redundant. I think I am getting it to work as it should but would like to hear alternative's or where I need to improve.

    The Javascript is small and basic, I tried looking up how to access the actual value that is being submitted and feel this is not best practice.

    Styling still takes me more time then I would like.

    Any tips/recommendations are very welcome. Anything I need to improve on let me know.

    Responsive Interactive rating "app"

    1

    Nikaβ€’ 180

    @nikavolk

    Posted

    Hello Matthijs!

    Technically, the component works flawlessly and had no issues with it. Your JS code is very optimized and elegant, I really like it!

    Visually, there's only a few (very) minor things I've noticed:

    • the margins between elements are a touch too small
    • the rating buttons background colour is a bit off; what I did was reduce the opacity to get them look like in the brief
    • the ratings buttons aren't aligned to the edges of the innermost borders

    Other than those very small details, I love your solution. Great job!

    Marked as helpful

    0
  • Marcβ€’ 30

    @mcallec1

    Submitted

    This was my first time using Typescript and SASS. Still learning. I also sent props down two levels (prop drilling) instead of using context but I didn't think the overhead was worth it for such a small project.

    I'm also not sure that I handled media query breakpoints correctly with SASS. Seems like a bit of a hassle to locate the queries across multiple files if I need to change things. Maybe there's a better way.

    Interactive rating component - React / Typescript / SASS

    1

    Nikaβ€’ 180

    @nikavolk

    Posted

    Hello Marc!

    I've completed this project with React as well, so here's my input:

    Visually: looks great! I can't find any faults at all, really.

    Technically:

    • one minor bug in the ThankYouInner component on line 16 (rating {variable} out of 5).
    • choosing a rating and clicking submit works on every rating except for the first, might be just my device?
    • just my very personal opinion: there seems to be a lot of code for a rather simple component

    I loved your folder and file structure and will definitely work on making mine in a similar fashion (lots of small component files for each part of the app). As for SASS styles and files, I think they need to be imported into every child but honestly, I need to look into this myself.

    Great job!

    0
  • Elisaβ€’ 50

    @elisa-charrier

    Submitted

    Hi! This is my first JS project on the platform. Have you built this too? Tell me, I will check your solution. I tried to keep an eye on accessibility issues. What can I improve? Thanks to all who will leave a comment. See you to the next project!

    My first JS project: tip calculator app

    1

    Nikaβ€’ 180

    @nikavolk

    Posted

    Hello Elisa!

    I've not done this challenge yet, however I figured I could still test it out!

    Visually: I think the design is spot-on, looks great! Two (minor) things that I would perhaps implement myself when doing this challenge:

    1. disabling the Reset button when the input fields are empty
    2. when entering or selecting a value into the calculator, that same chosen or entered value is displayed. I think it would be better not to display anything when a correct entry is input.

    Technically: It might just be on my device, but the reset button doesn't work for me at all (doesn't clear the fields).

    Otherwise amazing job for your first project!

    Marked as helpful

    0
  • DekiDexβ€’ 290

    @DekiDex

    Submitted

    This time I changed regular buttons into radio buttons, and it seems to be a better option. Take a look, and give suggestions.

    HTML, CSS, JS

    1

    Nikaβ€’ 180

    @nikavolk

    Posted

    I think it looks great!

    The only thing I would suggest implementing, is a way to prevent the user being able to submit without choosing a rating 😊 I did it by disabling the submit button, but you could throw an error message instead.

    Marked as helpful

    1