Skip to content
OverviewSolutions
16
Comments
36

Chiemeka Okongwu

@Chiemeka2006Trans Amadi Gardens, Peter Odili Road, Port Harcourt550 points

I am a fullstack web developer in training

Latest solutions

View more solutions

Latest comments

  • Chrision Wynaar•340
    @Clipzorama
    What are you most proud of, and what would you do differently next time?

    I'm mostly proud of finishing the whole entire design and also incorporating the mobile perspective as well. For next time, I would want to do this solution using the grid layout.

    .all-content {
    width: 100%;
    height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.container {
    width: 300px;
    height: 500px;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: space-around;
    padding: 40px;
}
    What challenges did you encounter, and how did you overcome them?

    Challenges that I encountered was fitting all of the containers in a column structure, while still showing all of the contents. I realized that for the @media query, I had to put the height on auto so everything shows and there is space between everything.

    @media only screen and (max-width: 600px) {
    .all-content {
        margin: 40px 0 40px 0;
        flex-direction: column;
        height: auto;
    }

    .container {
        border-radius: 0 !important;
        height: 400px !important;
    }

    .container p {
        line-height: 1.5rem;
    }
}
    What specific areas of your project would you like help with?

    Finding a more optimal way to do this. If there is anything that I could've done to make my code shorter, i'd appreciate the help.

    Frontend Mentor | 3-Column Preview Card Component Solution

    1
    Chiemeka Okongwu•550
    @Chiemeka2006

    firstly its better if you leave the height of the container unset or even if you want to add a height you should make it a min-height.

    .container { width: 300px; display: flex; flex-flow: column wrap; align-items: flex-start; justify-content: space-around; padding: 40px; }

    so basically you omit the height property like i did.

    then for your all-content u should have made it a min-height: 95vh; that way in the media query u dont have to set height: auto; and most importantly avoid using !important. Hope this helps

    Marked as helpful
  • UnsuspectedNoob•230
    @UnsuspectedNoob
    What are you most proud of, and what would you do differently next time?

    I actually like the hover on the circle borders for the tasks. I did not know they could work like that. I'm most proud of the drag and drop, obviously. Dnd-Kit worked its magic, I could actually do it from scratch as well.

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

    The theming was a slight issue, because I was hard-coding the tailwind classes. I overcame by abstracting the colors, and implementing them into the tailwind.config.js and index.css.

    I also had problems with dnd-kit, it wasn't allowing the first inputted task to be draggable, but it fixed itself when I made the first index of the task start from 1 not 0.

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

    When the tasks get to the amount which they exceed the height of the screen, how do I not make it not get a scroll bar horizontally ?

    React.JS Todo App with Drag and Drop

    #react#tailwind-css
    3
    Chiemeka Okongwu•550
    @Chiemeka2006

    also to your question "When the tasks get to the amount which they exceed the height of the screen, how do I not make it not get a scroll bar horizontally ?" you can set the parent of the lists to have the property of overflow-y: auto; and also give the parent a max-height property, how i decided the value i was gonna put for this property was by using the inspector tool to view the height of 1 list then multiply by 6. in your case the height of 1 list is 56px so u should set max-height to 336px; . Then how to get rid of the scrollbar that will appear in the parent container due to the overflow-y: auto; lets say ur parent element is a ul you do : ul::-webkit-scrollbar { display: none; scrollbar-width: 0rem; }

  • UnsuspectedNoob•230
    @UnsuspectedNoob
    What are you most proud of, and what would you do differently next time?

    I actually like the hover on the circle borders for the tasks. I did not know they could work like that. I'm most proud of the drag and drop, obviously. Dnd-Kit worked its magic, I could actually do it from scratch as well.

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

    The theming was a slight issue, because I was hard-coding the tailwind classes. I overcame by abstracting the colors, and implementing them into the tailwind.config.js and index.css.

    I also had problems with dnd-kit, it wasn't allowing the first inputted task to be draggable, but it fixed itself when I made the first index of the task start from 1 not 0.

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

    When the tasks get to the amount which they exceed the height of the screen, how do I not make it not get a scroll bar horizontally ?

    React.JS Todo App with Drag and Drop

    #react#tailwind-css
    3
    Chiemeka Okongwu•550
    @Chiemeka2006

    this is a really good project, why dont you make sure to save the todo lists to local storage and also make the theme switcher to be saved to local storage, thats sure to bring more reality and life to your project. ill be uploading my own todo list u can check it out although i might not do the drag and drop, but i might try to find a ibrary out there that could help me accomplish that

    Marked as helpful
  • Chiemeka Okongwu•550
    @Chiemeka2006

    @yishak abrham splendid solution u have hear i love how unique u made it really hope i can get as good as you are rn

  • Chiemeka Okongwu•550
    @Chiemeka2006

    @bezies why don t u use grid for this it willl be much easier and it will make it look better

    Marked as helpful
  • Chiemeka Okongwu•550
    @Chiemeka2006

    @alex why dont u add transitions to things like the register hyperlink it will make it look a bit neater . you could add a transiition that has a duration of 200ms and a timing function of ease-in-out. Hope this helps <£ <£ <3 :D

View more comments