Skip to content
OverviewSolutions
12
Comments
3
Erick Melchor
@Melchor16

All comments

  • Endo_hr•60
    @EndoHrSubmitted over 1 year ago

    Hi, I have a problem with the desktop version, how do I make their heights equal? I'm pleased to have all of your feedback.

    Result-summary-component-main

    1
    Erick Melchor•220
    @Melchor16Posted over 1 year ago

    Hey, about your problem with the heights: You can put your two divs ('component' and 'summary') inside another div, then you just need to assign the height you want to the parent div and for the children just put height: 100%

    something like this:

    <div class='parent'>
    <div class='component'></div>
    <div class='summary'></div>
</div>

    CSS:

        .parent{ height: 30rem }
    .component{ height: 100% }
    .summary{ height: 100% }

    With this you can also assign 50% of the width to both of you children divs and just adjust your parent total width.

    Hope this is useful for you, regards ;)

    Marked as helpful
    0
  • Arnold927•70
    @Arnold927Submitted over 1 year ago

    I need some help on how to display the "Total/ person" correctly and to use the "Reset button" to reset everything back to default.

    #javascript

    1
    Erick Melchor•220
    @Melchor16Posted over 1 year ago

    Hey, I can't see your solution but about your questions:

    for the Total /person text you can make a div with the two elements and use flexbox or you can even put all the elements of that section including the results and use css grid to align them. To reset all the values you just need to add an event listener to the "reset" button and inside that listener you just set all the element's values to an empty string, for example: document.getElementByID('bill').value = ''

    Hope this is helpful for you, regards.

    Marked as helpful
    1
  • Erick Melchor•220
    @Melchor16Posted over 1 year ago

    Hi Mutalic! I'm still a beginner but here's something that may be useful:

    You can make it all in one single html file, you just need to have two sections, one for the rating screen and another with the success screen, then you just have to hide one of them with display: none in your CSS file and then toggle it with javascript.

    maybe you already knew this but it's just an obsevation.

    Regards!

    0