Skip to content
OverviewSolutions
6
Comments
2
dev-eli
@dev-eli

All comments

  • Lauryne•260
    @lauryne921Submitted about 2 years ago

    I still don't know how to make a good responsive, so I have different questions :

    1. How to bring a different image when it's on mobile ? I used in CSS (background-image: url();) but it didn't work.
    2. The space at the bottom of the text is very big when it comes to responsive so how do you make it smaller ?

    Responsive product preview card challenge

    1
    dev-eli•100
    @dev-eliPosted about 2 years ago

    You can use the CSS property "content" to change the src of the image like:

    img { content: url(); }

    This is probably the simplest way. If you use background-image:url() you also have to specify the width and height of the image in the same selector like:

    .img_container { background-image: url(); width: 300px; height: 300px; }

    0
  • tbrownlee•350
    @tbrownleeSubmitted about 2 years ago

    Tried to make the project as close to how an acutal tip calculator would work.

    Any simpler ways to do the js?

    Tip Calculator App

    1
    dev-eli•100
    @dev-eliPosted about 2 years ago

    Basically for the JS I just created event listeners for all the buttons or inputs, and every time one of them changed, I would attempt to calculate it in a separate function. If I could calculate it, great, if not, I would just keep the results at $0.00. I can include a link to my github repo and you can check out the script.js file there: https://github.com/dev-eli/tip-splitter/blob/main/script.js

    My code isn't as readable as yours I think but it might be simpler, up to you to decide.

    I liked how you included the form validation saying numbers only,I thought that was a nice touch. I accidentally restricted the input of non numbers by setting the value of the element to the value of the event and that would remove all the non numbers, which kind of makes it confusing.

    Anyway, I hope this helps.

    Best, Eli

    1