HTML – Create a responsive CSS scoreboard with numeric values ​​on the left side of the bars

  • Home / Blog / HTML – Create…

HTML – Create a responsive CSS scoreboard with numeric values ​​on the left side of the bars

I’m trying to write a simple, responsive scoreboard with HTML and CSS. For each player (three totals), there will be one bar (height, width, and background color DV), and an instantaneous score immediately to the right of the bar.

I want the bars to be in the column flex container. The top bar will always carry the full width of the flex container. The width of the second bar can then be set relative to the first bar. If the other player scores half as many runs as the first, the width of his bar will be set at 50 to.

Is it possible to use this approach by immediately positioning the statistics score to the right of the bars? Earlier, I had tried to place each bar in a dove with the same number, but it has become very difficult to determine the width of the bars correctly.

Here is the code I have now. Thanks for taking a look:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">

        <style>
            span {
                font-family: Arial, sans-serif;
                color: #7B7B7B;
            }

            #container {
                height: 100%;
                width: 100%;
                display: flex;
            }

            #names {
                padding-right: 2%;
                display: flex;
                flex-direction: column;
            }

            #player1name, #player2name, #player3name {
                font-weight: bold;
                height: 2em;
                line-height: 2em;
            }

            #bars {
                flex: 1;

                display: flex;
                flex-direction: column;
            }

            #player1bar, #player2bar, #player3bar {
                height: 2em;
                flex: 1;
            }

            #player1bar {
                background-color: #4776d2;
                width: 100%;
            }

            #player2bar {
                background-color: #2a85b6;
                width: 50%;
            }

            #player3bar {
                background-color: #51636d;
                width: 7.5%;
            }

            #scores {
                padding-left: 2%;

                display: flex;
                flex-direction: column;
            }

            #player1score, #player2score, #player3score {
                height: 2em;
                line-height: 2em;
                font-weight: bold;
                text-align: left;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="names">
                <span id="player1name">Alice</span>
                <span id="player2name">Bob</span>
                <span id="player3name">Charlie</span>
            </div>

            <div id="bars">
                <div id="player1bar"></div>
                <div id="player2bar"></div>
                <div id="player3bar"></div>
            </div>

            <div id="scores">
                <span id="player1score">10,000</span>
                <span id="player2score">5,000</span>
                <span id="player3score">750</span>
            </div>
        </div>
    </body>
</html>

Write a Comment

Your email address will not be published. Required fields are marked *

x