Skip to content
OverviewSolutions
5
Comments
19
Clarence Onumajulu
@clarencejulu

All comments

  • Leo•440
    @SouiciaSubmitted about 2 years ago

    Hello community!

    I completed my third JS challenge (yes, I'll count all of them).

    This challenge was definitely hard!!! Took me two weeks and two tries. Extra features added: localStorage for all interactive elements, and a small pop-up button when a pledge is finished to reset localStorage.

    Three questions:

    1. How to change the color of the inner logo inside the bookmark svg on click? Only figured out for background, not the inner logo.
    2. Why do you sometimes have to double click a button for it to work when its addeventlistener is only one click?
    3. Sometimes the count of my pledges (third section) does not decrement after a payment. Feels like it works whenever it wants to, if someone could tell me why, I'd appreciate it.

    Thanks for reading and answering!

    Crowdfund Landing Page

    1
    Clarence Onumajulu•400
    @clarencejuluPosted about 2 years ago

    Hey Leo, It's nice you went the extra mile to add localStorage to your project. You've done well.

    As regards to your 2nd and 3rd questions, I would like if you'd be more specific as to where the issue occurred so I could look into it.

    As for the 1st question, all you really have to do is check the structure of the svg so you'd know what to edit in your css. It could be the fill/ stroke/ opacity. As for the bookmark logo, this is how you'd edit it.

     .bookmarkIcon{
    path{
        fill: white;
    }
    circle{
        fill: $dark-cyan;
    }
}
    Marked as helpful
    1
  • Reddsito•210
    @ReddsitoSubmitted about 2 years ago

    Hi, I would appreciate any advice or tips about the project in order to improve it :D a doubt, is it normal to use many lines of code in css, or do I really have a bad practice? I would be grateful if you could tell me that question :D

    Dinamic and responsive page :D

    1
    Clarence Onumajulu•400
    @clarencejuluPosted about 2 years ago

    Hello Reddsito, Your project is good and all functionalities work well. However, I noticed that your modal view doesn't match what was shown in the design.

    I don't think you can easily achieve this with flex. You may have to change display to grid when the screen size is smaller and implement code similar to what I have pasted below

    .modalBox{
  grid-template-areas: 
    'circle heading heading heading'
    'description description description description'
    'amount-left . . .';
  grid-template-columns: 2.5rem 1fr 1fr 1fr;
}

    Other than that, good job!

    Marked as helpful
    0
  • Paweł•1,030
    @Pawel-GnatSubmitted about 2 years ago

    This project took me 37 hours of coding, thinking and searching for answers. I learned how to work with dialog html element and I practiced a lot of code with DOM manipulation. I created an object with my product items that is dynamically displayed inside my dialog element. From now on I will try to go further and start coding intermediate challenges.

    Crowdfunding product page

    1
    Clarence Onumajulu•400
    @clarencejuluPosted about 2 years ago

    I can tell you worked hard during this project and I must say; Welldone!

    One thing I'd like to add is only a suggestion to improve user experience and is not necessarily an issue. It would be nice if clicking 'select reward' takes you to the corresponding modal section. You can do this by using 'scrollIntoView()'. 'scrollIntoView()' would scroll the page to the corresponding id area.

    You could do something like this:

       if(selectRewardClicked){ document.getElementById(id).scrollIntoView(); }

    Feel free to reach out to me if you have any questions; Goodluck!

    Marked as helpful
    1
  • Kamil•120
    @kamilp522Submitted about 2 years ago

    Heeelo everyone!

    I've certainly learned a lot from tackling this challenge, even tough it's marked only as a junior level difficulty.

    I've got a few questions:

    1. How did you change the svg color? I've tried the method with css: filter; property, but it didn't work for some reason.

    2. What do you think about my project structure? I've tried to divide my code into more chunks for better readability. Do you have any tips or good sources on how to structure projects properly?

    Have a wonderful day/evening/night and happy coding!

    Crowdfunding Page Made with Vanilla JS / Sass / Modular Approach

    2
    Clarence Onumajulu•400
    @clarencejuluPosted about 2 years ago

    Hello Kamil, You did well on this project! To answer your question on styling the color of the bookmark button, implement this code below;

          .bookmarkIcon{
         path{
            fill: white;
         }
        circle{
            fill: $dark-cyan;
        }
      }

    Goodluck, Feel free to ask me any further questions!

    1
  • demy•190
    @DemyttenaereSubmitted about 2 years ago

    Hello everyone,

    Here is my solution for the " Crowdfunding product page" challenge.

    Any constructive comments are welcome.

    Good coding !

    Crowdfunding product page

    1
    Clarence Onumajulu•400
    @clarencejuluPosted about 2 years ago

    Hello demy, This is a good project. I like the fact you took the responsiveness seriously and got it looking very close to the design. However, I noticed that the numbers aren't updating after I select a reward. You could solve this by creating a function and attaching it to the event listener for the respective button. The function would then update the respective value by doing the necessary calculation. If you have any further questions, feel free to ask me.

    Goodluck!

    0
  • Clarence Onumajulu•400
    @clarencejuluPosted about 2 years ago

    Hello Abhishek, Your project looks really good and you did a good job. However, I noticed that when the lightbox comes up, the overlay does not cover the full height of the screen. I think it may be because your elements are too large and you may have done your coding on 90% or a smaller screen width.

    To solve the overlay problem, you should set your body element to have the following styling:

        min-height: 100vh;
    height: 100%;
    margin: 0;
    position: relative;

    and then the lightbox overlay should have thus:

        position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    Marked as helpful
    1
  • Clarence Onumajulu•400
    @clarencejuluPosted about 2 years ago

    Whats up Favour?, This is a very good project man. I really like the transition/animation you added to the cart and the functionality for changing the number of items in the cart after adding them.

    The only minor issues are with the mobile responsiveness.

    1. Firstly, for the heading you should allow it extend across the whole screen by putting it in a flexbox and setting the width to 100% of the screen.
    2. Finally, the images on smaller screens could look much better if you set the width also to 100% and then the background size to either 'cover' or a percentage suitable to allow a very good amount of the image's detail (shoes) to show properly.
    Marked as helpful
    1
  • Antoine C•1,210
    @mattari97Submitted over 2 years ago

    Hello everyone.

    This was a very nice project where i took the time to think about accessibility.

    I tried to give to the user the possibility so navigate with keyboard only. Using Shift, Shift+Tab, Enter & Escape keys.

    Please test it yourself and and let me know if i missed something.

    One thing i wonder is how does it feels to use a screen reader. It would be an amazing experience if i could try one but i have no idea how it works, or how to setup one and if there is an open-source screen reader.

    Anyway, feel free to share you thoughts on my design/code.

    Have a nice day/night. Peace

    Ecommerce Product Page w/ SvelteKit, Tailwind & Typescript.

    2
    Clarence Onumajulu•400
    @clarencejuluPosted over 2 years ago

    Hi Antoine, Your project is really impressive and looks so good to say the least. It's clear you put in a lot of time and effort. I really like what you did with the accessibility and it makes me want to add that to my future projects.

    Can I know how you added those sliding lines to your menu items by the way :)

    Keep up the good work man!

    Marked as helpful
    1
  • Clarence Onumajulu•400
    @clarencejuluPosted over 2 years ago

    Hello islombek, You did a good job getting the project to look really close to the design. However, I noticed that when I added products to the cart, it doesn't show the number of items I have in the cart.

    You can fix this problem by adding a span element into your 'cart' element. Position this span element absolute using (negative) top and right. To change the number within the span element, just store the number of items the user selected and add it to the span element using 'innerHTML or innerText'

    Goodluck!

    Marked as helpful
    0
  • Cody Mangham•60
    @CodyMangSubmitted over 2 years ago

    Hello, this is the second challenge I have completed. This was much more difficult than the last but I learned a lot and had fun. I think I could have done the animation a little better but I am happy with the result. This is also the first time I made a website with a mobile-first mentality.

    If I had to do it again, I would probably use SASS or another CSS pre-processor.

    ROCK PAPER SCISSORS with HTML, CSS, and JS

    1
    Clarence Onumajulu•400
    @clarencejuluPosted over 2 years ago

    Hello Cody, Good work in general but you should add a 'setTimeout()' before the application shows who won or lost.

    Goodluck.

    1
  • Katya Ru•100
    @RuKatyaSubmitted over 2 years ago

    I will be glad to know where and how to improve the code. Also, I had difficulty creating a responsive circle so if you have any advice on how best to create it, it would be great to know about it

    Rock, Paper, Scissors game solution

    2
    Clarence Onumajulu•400
    @clarencejuluPosted over 2 years ago

    Hi Katya, Your App works well and looks really good.

    However, You should consider changing when your 'Play Again button' drops lower because it could look better between a width of 990px to 751px . It's currently around 'max-width: 750px', I think it should drop lower at around 'max-width: 990px'.

    I think you should also use REM values and change the root font size when the screen reduces so your elements do not overlap.

    Marked as helpful
    1
  • Clarence Onumajulu•400
    @clarencejuluPosted over 2 years ago

    Hello, The game works very well, however your icons overlap each other. I think it would be a good idea if you remove the 'height: 100vh' setting on your body element. You could also use REM values and reduce the root font-size when the screen size reduces so the app looks better on small screens. The app looks good but could look better on smaller screens.

    Goodluck!

    0