Skip to content
OverviewSolutions
27
Comments
19
Yacine Kahlerras
@yacineKahlerras

All comments

  • Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    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
    1
  • Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    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 !

    1
  • Abdul rehman•650
    @abymaniSubmitted about 2 years ago

    I couldn't understand the task properly. anyhow tried my best to accomplish the tasks. kindly reviews it and give your valuable suggestions.

    Tip calculator --jquery CSS HTML

    1
    Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    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
    1
  • Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    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
    0
  • Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    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
    1
  • Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    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
    1
  • Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    Hello good job on the design i have one suggestion you can center your card by adding min-height: 100vh to the body and removing the margin-top: 50% from your 'container-rating'. happy coding !

    Marked as helpful
    0
  • Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    Hey José good job on the challenge, i have one suggestion for better centering of the card you add this to the body body { min-height: 100vh; background-color: hsl(225, 100%, 94%); display: flex; justify-content: center; align-items: center; } and happy coding !

    Marked as helpful
    0
  • Prince Roy•1,210
    @iprinceroyySubmitted about 2 years ago

    Hey community members 👋, I hope you all are doing well now & then. I've completed this challenge with the additional feature i.e

    • Shake input elements if the given inputs are invalid.

    Any feedback to improve this is really appreciated. :)

    Responsive Tip Calculator

    1
    Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    Hey Roy good job on the challenge, I just have a few suggestions try adding the dollar sign to the result and tip amount and removing the "Can't be zero" error when clicking buttons or inputing values, also when clicking on one of the tip % buttons it shows results but after that I click the others it doesn't work. that's all happy coding !

    0
  • Amit Kumar•100
    @amit-kumar-18Submitted about 2 years ago

    Any Feedbacks are welcome, I'm hoping you can share some helpful tips and tricks i could use to improve this solution.

    Thanks.

    Product preview card component

    1
    Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    Hey Amit good job on the challenge, i have one suggestion for the border-radius, you can add border-radius: 1em; to the container, and border-radius: 1em 0 0 1em; to the desktop image to be closer to the design, you can also make media queries for the mobile view, happy coding !

    1
  • Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    Hello good job on the design i just have one suggestion on the box shadow, you can make it smoother by adding box-shadow: 1rem 2rem 5rem rgb(0 0 0 / 19%); to it. also you can change the body's background color to match with the design hsl(210, 46%, 95%) . happy coding !

    Marked as helpful
    1
  • Yacine Kahlerras•820
    @yacineKahlerrasPosted over 2 years ago

    Hi nice job on the challenge try adding object-fit: cover; to the image so it doesnt seem too stretched on the mobile view, happy coding !

    Marked as helpful
    0