Skip to content
OverviewSolutions
9
Comments
10

Rémy Boiré

@remyboireFrance350 points

Hi, I worked for ten years as Art Director, mostly in wine and spirits industry. I've always code a little and I decided to take another career path to become a creative developer. I'm currently seeking a remote job, and am looking for opportunities. Rémy

Latest solutions

View more solutions

Latest comments

  • Rémy Boiré•350
    @remyboire

    Hi Nicolas,

    great job finishing this challenge! About the hover effect, you can handle it simply in CSS.

    — pass the value you want to display for each bar with a data-value

    — display the value with a pseudo-element like :before and content:attr(data-value)

    — show the pseudo-element with CSS when his parent is hovered with something like .parent:hover:before { opacity : 1 }

    Hope this helps, do not hesitate to ask if it's unclear. Rémy

    Marked as helpful
  • Rémy Boiré•350
    @remyboire

    Hi @veeru-neerukonda, nice job completing this challenge!

    I don't know how axios works, but personnaly I used a basic fetch request with cache: no-cache as follow : let quote = await fetch('https://api.adviceslip.com/advice', { cache: 'no-cache' }) and it did the job!

    Hopes this helps,

    Rémy

    Marked as helpful
  • Rémy Boiré•350
    @remyboire

    Hi @nikasana, great job completing this challenge! Using radio buttons is in my opinion the best way to handle it, this way you don't have to prevent the default behavior as it does exactly what we need. Hope it helps! Do not hesitate to check my own solution if needed :)

  • Rémy Boiré•350
    @remyboire

    I @Alex-Korir, well done with your solution! To answer your question, the custom button is here for allowing the user to enter a custom percentage. You can check my solution here: https://remyboire.github.io/tip-calculator-app/public/

    Marked as helpful
  • Rémy Boiré•350
    @remyboire

    Hi @Aadv1k, as you request it, here is my feedback. Your integration looks nice and everything is working properly, great job! However, as an old art director, I would be worried by some little differences between the design and your integration: colors not always match (the current day bar is more of a blue and the section background is a cream), border radius are 20px on desktop and 10px on mobile (and for the bars, its 5px / 3px). There are also some breakpoints on padding, bar spacing, logo width… I also noticed that you used width: 14% on bars, which in my opinion not the best way because it assumes that we have 7 bars. This can become a problem in the future if you want to display more or less bars! Personally, I used width:100%, that way you can add or remove bars without breaking the layout. Regarding the tooltips, I think using :before and :hover would have been an easier way to handle it than with event listeners. You can put a data-attribute on the bar and access it from a pseudo-element like :before { content: attr(data-attribute) } and get rid of the span. Those are some minor details, but important in my opinion. :)

    Marked as helpful
  • Rémy Boiré•350
    @remyboire

    hi @hhenske,

    I didn't take a look at your code yet but for React with github you can use react-gh-pages. I used it for my last project and it's very easy. Do not forget to set your page to the gh-pages branch that will be created.

    Don't hesitate to ask me if needed.

View more comments