Skip to content
OverviewSolutions
3
Comments
8
Nika
@nikavolk

All comments

  • Syed Ali Mansoorβ€’460
    @syedalimansoorSubmitted over 2 years ago

    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
    @nikavolkPosted over 2 years ago

    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
    @ugochukwuuuSubmitted over 2 years ago

    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
    @nikavolkPosted over 2 years ago

    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
    @nikavolkPosted over 2 years ago

    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
    @nikavolkPosted over 2 years ago

    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
    @MatthijsvanderPlasSubmitted over 2 years ago

    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
    @nikavolkPosted over 2 years ago

    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
    @mcallec1Submitted over 2 years ago

    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
    @nikavolkPosted over 2 years ago

    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-charrierSubmitted over 2 years ago

    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
    @nikavolkPosted over 2 years ago

    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
    @DekiDexSubmitted over 2 years ago

    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
    @nikavolkPosted over 2 years ago

    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