Skip to content
OverviewSolutions
12
Comments
3

Erick Melchor

@Melchor16Monterrey, México220 points

Experienced Mechatronics Engineer with 7 years in mechanical design, now pursuing web development. Strong team player, self-taught in web development, and eager to apply problem-solving skills and engineering mindset to the field.

I’m currently learning...

-HTML -CSS -Javascript -React

Latest solutions

View more solutions

Latest comments

  • Erick Melchor•220
    @Melchor16Posted almost 2 years 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
  • Erick Melchor•220
    @Melchor16Posted almost 2 years 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 almost 2 years 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