HTML code for simple page showing a graphic filling a square

May 15, 2023

I’ve never written a webpage and know zippola about HTML code but I’m reading some newbie guides and starting to learn.
My question is how would I make a simple vertical rectangle with say 10 squares stacked together. Then depending on the input those squares would go from white to green depending on a specific input (This input would come from a microcontroller which is another piece of my overall project).

I just need to know what’s the html code to do something like the picture I’m attaching. The microcontroller I’ll be using 10 GPIO’s as simple True/False input so when 1 GPIO = TRUE I want that corresponding square to turn green.

I haven’t tried anything since I honestly have no idea where to start. Not looking for anything fancy literally just a blank webpage that has the vertically stacked squares (so they all look connected)

>Solution :

This is the answer for the question about HTML. It contains embedded CSS for the size and color of the squares, but uses separate CSS rules (as opposed to inline styles at the DIVs) to make the styles easier to change. This answer does not deal with how the GPIOs are connected to the computer or how the values arrive in software — depending on that, you might need code that generates the HTML, or javascript code in the HTML that reads the signals from the GPIOs, or a different solution.

<html>
<head>
    <style type="text/css">
        .square0, .square1 {
            border: 1px solid black;
            width: 50px;
            height: 50px;
        }
        .square0 {
            background-color: white;
        }
        .square1 {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="square0"></div>
    <div class="square0"></div>
    <div class="square1"></div>
    <div class="square0"></div>
    <div class="square1"></div>
    <div class="square1"></div>
    <div class="square0"></div>
    <div class="square1"></div>
    <div class="square1"></div>
    <div class="square1"></div>
</body>
</html>