Submitted over 3 years ago

Calculator app with vanilla JS and flexbox

Halí V.•230

@halivert

Preview site View code

This is a solution for...Calculator app

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

How can I make the buttons squared and all equal sized? Do they look good?

Community feedback

Account deleted

Hi Halí V ! To make all the buttons squared and all equal-sized, you could use a flexbox. To understand better, I made a quick example :

HTML Content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="button">1</div>
        <div class="button">2</div>
        <div class="button">3</div>
        <div class="button">4</div>
        <div class="button">5</div>
        <div class="button">6</div>
        <div class="button">7</div>
        <div class="button">8</div>
        <div class="button">9</div>
        <div class="button">10</div>
    </div>
</body>
</html>

CSS Content

.container{
    border: 1px solid goldenrod;
    display: flex;
    flex-wrap: wrap;
    width: 30%;
}

.button{
    border:1px solid black;
    width: 15%;
    text-align: center;
    flex-grow: 1;
    margin-top: 1rem;
    margin-right: 1rem;
}

Flexbox works with a container, and inside the container are the items (which are the buttons in the example.) Then you declare that the container is a flexbox with "display: flex;" You can test the example, I don't think there is much to explain. Also, flexbox makes it easier to create responsiveness.

To go in-depth with flexbox, I can recommend you to read about flexbox here : https://www.w3schools.com/css/css3_flexbox.asp

I think you can also use CSS Grid but I haven't used them much, here's another link to learn about it: https://www.w3schools.com/css/css_grid.asp

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord