src/02-dom/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./index.css">
    <title>Dom Exercise</title>
</head>
<body>
    <div id="idContainerA">
        <div id="idContainerA1">
            <h1>Basic DOM</h1>
            <h6 class="indentList">This is a list of stuff</h6>
            <ol id="idList">
                <li class="classLi">Item 1</li>
                <li class="classLi">Item 2</li>
                <li class="classLi">Item 3</li>
            </ol>
            <button id="idBtnShow">Show in Console</button>
            <div id="idAddBtns">
                <input id="idInputPos" type="number" placeholder=# min=1 max=4>
                <input id="idInput" type="text" placeholder="Item">
                <button id="idBtnAdd">Add</button>
            </div>
        </div>
    </div>
    <hr>

    <!-- *** Part 2 *** -->

    <div id="idContainerB">
        <h2>Working with Cards</h2>
        <div id="idContainerB1">
            <div id="idLeftPanel" class="panel">
                <button id="idBtnAddCard" class="classButton">Add Card</button>

            </div>
            <div id="idRightPanel" class="panel">
                <div class="classCard">
                    <h3>Right Side1</h3>
                </div>

                <div class="classCard">
                    <h3>Right Side2</h3>
                </div>

                <div class="classCard">
                    <h3>Right Side3</h3>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="./scripts/main.js"></script>
</body>
</html>