Skip to content
OverviewSolutions
27
Comments
19

Yacine Kahlerras

@yacineKahlerrasAnnaba, Algeria820 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Yacine Kahlerras•820
    @yacineKahlerras

    Hey @Yunuscinar41 good job on the design i only have one suggestion that might make the card a little cooler which is the inner shadow for both the main-container and thank-you containers

    box-shadow: inset 0 -10rem 15rem #00000050;

    you can play around with the values till it feels right. hope that helps and happy coding !

    Marked as helpful
  • Yacine Kahlerras•820
    @yacineKahlerras

    Hi @Richard-Emmanuel great job on the challenge everything is set up perfectly, if i can add one small suggestion

    to improve the design and make it more responsive for smaller screens you can use the min() function in the css for the width so it'll get smaller than 305px but doesn't exceed it

    .container {
    background-color: hsl(0, 0%, 100%);
    border-radius: 0.8rem;
    width: min(100%, 305px);
    margin: 6rem auto 1rem;
    padding: 1rem;
    text-align: center;
}

    hope that was helpful and happy coding !

  • Yacine Kahlerras•820
    @yacineKahlerras

    Hey @abymani good job on the design i just have a few suggestions that might might be helpful

    • you can set the type of the input to number so it accepts numbers only without using any javascript code
    • i couldn't enter numbers using my numbers pad that's because in your form validation function you didn't include the numbers pad keycodes in the conditions
    • the math of the tip and the total amount should be divided by the numbers of people there
    let tipAmount = ( bil * tip /100 ) / persons;
let total = ( bil / persons ) + tipAmount;

    other than that good job on the challenge and happy coding !

    Marked as helpful
  • Yacine Kahlerras•820
    @yacineKahlerras

    Hi @roadblock37 just read your code and its excellent ! love that you commented it pretty well and I didn't have a hard time understanding it at all, well done. I just have a few suggestions that might be helpful

    • in the custom tip event listener you should get the latest radioChecked from the dom
    const radioChecked = document.querySelector("input[name='option']:checked")
// uncheck tip percentage if there is a custom amount input
if (radioChecked){
        radioChecked.checked = false;
}

    otherwise it will only get the radiochecked from when the page was first loaded (which is 5%).

    • in the computeTip the math side of it should be :
    perPersonTip = ( bill * (tip/100) ) / numPeople
totalAmountPerPerson = (bill / numPeople) + perPersonTip

    otherwise good job on the challenge and happy coding !

    Marked as helpful
  • Yacine Kahlerras•820
    @yacineKahlerras

    Hey @miller-vrg good job on the design, I have a few suggestions which might be helpful to you

    -add min-height: 100vh; to the body so it takes the minimum full height of your content.

    -add object-fit: cover; to both the images so it doesnt appear stretched.

    -so that the attribution don't affect you element's positioning add .attribution { font-size: 11px; text-align: center; position: absolute; bottom: 1rem; } this way it will be at the bottom of your page but doesn't effect anything

    Marked as helpful
  • Yacine Kahlerras•820
    @yacineKahlerras

    Hi @oguzhansenokur good job on the design i have one suggestion for the centering try adding min-height: 100vh; to the body and remove the margin-tops of both the 'ty-state' and 'rate' elements, that should center it perfectly. happy coding !

    Marked as helpful
View more comments