Skip to content
OverviewSolutions
16
Comments
36
Chiemeka Okongwu
@Chiemeka2006

All comments

  • Chrision Wynaar•180
    @ClipzoramaSubmitted 2 months ago
    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
    @Chiemeka2006Posted 2 months ago

    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
    0
  • UnsuspectedNoob•230
    @UnsuspectedNoobSubmitted 2 months ago
    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

    3
    Chiemeka Okongwu•550
    @Chiemeka2006Posted 2 months ago

    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; }

    0
  • UnsuspectedNoob•230
    @UnsuspectedNoobSubmitted 2 months ago
    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

    3
    Chiemeka Okongwu•550
    @Chiemeka2006Posted 2 months ago

    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
    0
  • yishak abrham•2,150
    @yishak621Submitted almost 2 years ago

    Even if these type of E-commerce projects are done with frameworks to make life easier but i challenge myself to the extreme building the components by pure vanilla JS . the method that i use to make the whole project is using constructor functions as a component of JS since they will build the a whole functionality after i envoke(call) it for any place i want .. the components that i build with constructor function (located in module folder) 1.Modal(pc version only modal.js) 2.prev and next(mobile version constructorMob.js) 3.addToCart(card.js) 4.counter(counter.js)

    other components that help to build the project 1.array.js(host files locally to store images) 2.checkout.js(fetch data for countries select input API) 3.darkmode.js(for toggle darkmode ) 4.fixedNavBar.js(for toggle navbar fixed class scroll event) 5.localstorage.js(i will design these soon)

    i also added cool features like *page_loading_GIF *collection_cards_feature *Night_mode *checkout_page.

    for the checkout page in the country select input i use *API to load countries and add them in to our select input.....if u see some bugs please correct me(except the notification **bug after the item deleted i will fix that after completing the local storage function when i got time to do that) and also if u see something **new ask me

    E-commerce product page using Vanilla JS

    2
    Chiemeka Okongwu•550
    @Chiemeka2006Posted almost 2 years ago

    @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

    1
  • Chiemeka Okongwu•550
    @Chiemeka2006Posted almost 2 years ago

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

    Marked as helpful
    0
  • Chiemeka Okongwu•550
    @Chiemeka2006Posted almost 2 years ago

    @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

    0
  • Chiemeka Okongwu•550
    @Chiemeka2006Posted almost 2 years ago

    @john Omoke to prevent ur animation looking a bit choppy u should add this value to the animation property alternate

    Marked as helpful
    0
  • Jean Chris•160
    @john-coderproSubmitted almost 2 years ago

    here is my solution for the rock paper scissors game I have used another design for this, in fact I completed a while ago as an assignment from the odin project , the functionaties being almost the same, I submit my solution here, any feedbacks?

    Rock, Paper, Scissors game

    1
    Chiemeka Okongwu•550
    @Chiemeka2006Posted almost 2 years ago

    @Jean Chris i really love how u took the design and made ur own new desing i really loved this work and i hope i can be a s good as u one day <£ ,£ <£ <£ <£ <3 :D

    0
  • Chiemeka Okongwu•550
    @Chiemeka2006Posted almost 2 years ago

    love ur proejct @Austin

    0
  • Goran•500
    @GoranK89Submitted almost 2 years ago

    Hello again, this is how I did it, the CSS got quite long and messy towards the end. The scripting part I tried to solve with as many small functions as I'm currently capable of (reading Clean Code is already helping). Feedback & advice are always appreciated!

    Would also appreciate any unintended "features" you might find 🙂.

    Ecommerce Product Page - Vanilla JS

    1
    Chiemeka Okongwu•550
    @Chiemeka2006Posted almost 2 years ago

    @Goran im so inlove with your project this projecyt is so amazing keep up the good work <£ <3 :D

    0
  • Chiemeka Okongwu•550
    @Chiemeka2006Posted almost 2 years ago

    @nacvi And also u didnt create a media query for the mobile version

    0
  • Chiemeka Okongwu•550
    @Chiemeka2006Posted almost 2 years ago

    @navi u should give hte body these properties body {min-height:100vh; background-repeat: no-repeat; background-size: cover;}

    0