Skip to content
OverviewSolutions
32
Comments
95
Clément Creusat
@ccreusat

All comments

  • Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hi ! Nice job!

    To set the modal backdrop (background), you can add a React.Fragment in your file Bamboo.jsx to wrap your modal className="modal-oculto ..." and add a new div in position:fixed right after your modal.

    I did something like this for my challenge :

    .modal-backdrop {
position: fixed;
inset: 0;
z-index: 1;
background-color: rgb(0 0 0 / 50%);
}

    Ejemplo :

    {mostrarModal && (
 <div className='modal-oculto ...'>...</div>
 <div className="modal-backdrop"></div>
)}

    Hope my comment helps :)

    Marked as helpful
    0
  • Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hello !

    • Everything @besttlookk said is super helpful!

    I will add some stuffs to improve :

    • reply to a comment should open the right input below the comment, not in the same view used to write a comment
    • I'm not sure about the sticky position for the current user input. It's a bit weird on responsive.
    • Maybe put a fixed width to the upvote/downvote component. Behavior is a little weird
    • On .comments-container I would go for a max-width rather than putting a width. It behaves better

    Hope this helps !! Keep coding ! =)

    Marked as helpful
    0
  • Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hello IHSAN!

    It seems that the app.js is not working or loaded. I can't switch between timeframes (daily, weekly, monthly)

    If you don't have access to the design files (sketch or figma), I would suggest to install Figma. Use the designs provided in the folder and put the desktop version inside a Figma's file. Then do a screenshot of your solution and add it to the same Figma's file. Put your solution above the design with the Layer option to 50% opacity. You will be able to compare what to adjust or not (like fonts, ...)

    One improvement could be going into responsive view earlier in your breakpoint setting. It's a little be smashed between 440px until 800px.

    For centering your solution, take a look at link

    Enjoy coding!

    0
  • Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hi ! Nice challenge done !

    You should fix to things :

    • line-height of your <label> numbers (seems to not be centered)

    check your code because you are putting align-items: center on the labels but not using flex or inline-flex (I saw display:inline-block)

    • Text of the Thanks screen should be centered. I did the same mistake : display:flex and align/justify: center won't centered the text.

    Hope this helps & enjoy coding!

    0
  • Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hello !

    This is a really good work ! It's 99% perfect ;-)

    One thing I noticed tho.. When you submit without selecting a value, there is a strange thing happening. You should add a verification IF a value is selected before submitting. IF NOT, display an error or an alert('') explaining user has to choose one value :)

    Enjoy coding!

    Marked as helpful
    0
  • Jose manuel osorio•60
    @jmblack15Submitted over 2 years ago

    Hello everyone!

    please let me know how I did, and any feedback is welcome, I would also like you to share any resources to learn how to manipulate the DOM

    Thank you very much!

    Interactive rating component

    2
    Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hi! Nice job! It's pretty closed to the design :)

    I would suggest few things as improvements:

    • not setting height on your .card but adding a gap: 2rem (~) on your card-ranking
    • width of .card should be max. 412px on desktop
    • submit button has ~30px border-radius; not 15px :)
    • add a bigger line-height on your texts.

    hope this helps. enjoy coding!

    1
  • Abhilash S Hathwar•20
    @Abhilash437Submitted over 2 years ago

    I am a beginner in web development but I have tried my best to comping up with a solution for this challenge, it has a lot of bugs but somehow it still works. Feel free to provide some insights on my solution.

    Responsive NFT preview card component

    3
    Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hello ! Good job :)

    It looks nice but you can improve your solution if you wants :

    • about your markup, try to stick to the same convention (Title, active, Image, ...): title, active, image, .. Take a look at BEM, OOCSS methodologies
    • Get rid of your width % for your component .container, make it with max-width: 350px and remove height so it could breathe :)
    • max-width: 100% on your main image is a better practice than width: 90%
    • For better UI, you could put your <div class="active"> element inside your <div class="image"> and modify the CSS to :
    .active {
cursor: pointer;
    background-color: hsl(178, 100%, 50%,50%);
    border-radius: 5%;
    text-align: center;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    display: none;
}
    • Take it in consideration than your .active element could be a link and leads to another page (maybe change the div to a <a>)

    And when hovering it, change display:none by display:flex > .Image:hover .active

    • Replace all your border-radius with other unit (rem/em/px) but % has a weird behavior .

    Hope it helps and Enjoy Coding!

    0
  • Ciceron•940
    @MarcusTuliusCiceronSubmitted over 2 years ago

    This is my first react app, it was really comfuse at fisrt so I decided to scrap all the the code and started again from scratch, I think the structure is much better and easier to work with on this second attempt.

    I noticed I never used componentdidmount and componentdidunmount methods, is this ok to not use those methods ?

    Also my react component page is holding a lot of infos through its state, I didn't find any other way to be able to reuse info from one subcomponent to another.

    SCSS is defintely not that clean.

    If you find anything not working properly or if you have any suggestion feel free to give a feedback.

    React crowdfunding product page app

    2
    Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hello! Great job, its working really well :)

    Some advices if you want to improve your solution :

    • On mobile, you could replace the values of transform-origin with : transform-origin: 0. I think the cross will have a better UI this way.
    • I think you could get rid of all the width setted for your components (width: 325px; width: 730px on desktop). Add max-width: 730px, margin: 0 auto on desktop and margin: 0 24px on mobile. Let it breathe :) It will look more fluid

    Then:

    • When you click on "select reward", try to select the right pledge component (if you click on the $75, select it when modal opens and try to focus the input with a default value of 75)
    • Pledge with no reward should not give the possibility to enter an amount > it's a free one (it will just add +1 backer to the total of backers)

    About the code : it's really great. Just two thing :

    • Export your components (for instance, class ModalPledge extends React.Component {} as a new file (ModalPledge.js) and Import it in your app.js. It will look something like this : import ModalPledge from "./ModalPledge"
    • You will get props the same way
    • Use it <ModalPledge props={...}/>, pass the props you needs, etc...

    And last thing, React is supposed to stop support for ES6 JS CLASS. Take a look at React Hooks Link

    Hope it will help and Enjoy Coding!

    Marked as helpful
    1
  • Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hi ! Good job there :)

    As @isprutfromua said, fix your html and a11y issues. Take care of his advices too.

    For the positioning on your component, you are using Flex on <body> with flex-direction:column. It lacks of centering because when using flex-direction:column, the "axis" changed. align-items: center is not positioning on the Y axis but on the X axis. So to fix your design, add justify-content: center; to center your component on the Y axis

    Hope it will help :)

    Enjoy coding!

    Marked as helpful
    0
  • turtlecrab•550
    @turtlecrabSubmitted over 2 years ago

    My first project here! This site is awesome! I'm in my n-th attempt to learn frontend stuff and this community is just perfect for that!

    So problems/questions I got during this project:

    • What's the best way to make a button in a situation like this? Is it ok to just put img inside a button? I suspect the way I did is not great for accessibility.
    • I couldn't make attribution footer behave normally in mobile view(so i just hid it). I tried to overwrite position: absolute with static, but couldn't find proper flexbox parameters so it would stick to the bottom or scroll when the advice is long. Probably I shouldn't have positioned it absolutely in the desktop view(and should've started with mobile-first approach).

    Advice generator with native js and parcel as a simple bundler

    1
    Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hello and Nice job!

    Hope it will help :

    • For the button, for accessibility purpose, I would add aria-label="text" on the button. "text" could be something like "generate random advice"
    • For the position of the footer, maybe remove the position:absolute and add a gap:4rem (more or less) on the <body>. I think for the demo of this challenge, would be enough :)

    Enjoy coding!

    Marked as helpful
    0
  • Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hello !

    Nice job! Seems ok to me :)

    Some improvements :

    • You can replace your <div class="title"> by a <h1>, this will fix your acc. issue
    • Check the design if you can have a bigger line-height for the text.
    • You could change how to handle margin on title and description as well: -- For instance, you can remove all margin on .title and .description -- Add a padding: 24px on your .text -- Add this to your code :
    .title + .description {
    margin-top: 24px;
}
    Marked as helpful
    0
  • Clément Creusat•1,655
    @ccreusatPosted over 2 years ago

    Hi ! You almost got it :)

    You could :

    • check color for the icon background and your buttons background-color too.
    • add a title to your page (right now is "document")
    • fix the "badge" component displaying "You selected x out of 5"
    padding: 0.5rem 1.2rem;
color: hsl(25, 97%, 53%);
font-size: 1.4rem;
border-radius: 22px;
background-color: hsl(213, 19%, 18%);
    Marked as helpful
    1