index.html

<!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">
    <title>Projet 4 DesCodeuses</title>
    <!-- Link to cdn bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <header class="p-3"><h4>DesCodeuses</h4></header>
    
    <div class="container">
        <!-- #items section -->
        <section id="items" class="my-3">
            <h3 class="text-center"># Items Section</h3>

            <!-- JS will diplay items cards in this div -->
            <div class="row" id="items-list"></div>

            <div class="row">
                <div class="col-10 mx-auto">
                    <!-- JS handle this create form for #item -->
                    <!-- To handle form in JS, make sure you have named all fields -->
                    <!-- Documentation HTML Form https://developer.mozilla.org/fr/docs/Learn/Forms/Your_first_form -->
                    <form class="mt-5" id="item-form">
                        <div class="form-group">
                            <label for="item-name">Item Name</label>
                            <input type="text" class="form-control" id="item-name" name="name" placeholder="Enter item name" required>
                        </div>
                        <div class="form-group">
                            <label for="item-price">Item Price</label>
                            <input type="text" class="form-control" id="item-price" name="price" placeholder="Enter item price" required>
                        </div>
                        <div class="form-group">
                            <label for="item-description">Item Category</label>
                            <input type="text" class="form-control" id="item-category" name="category" placeholder="Enter item category" required>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-sm my-3" id="add-item">Add Item</button>
                        </div>
                    </form>
                    <!-- end form -->
                </div>
            </div>
        </section>
        <!-- end items section -->

        <!-- #laptops section -->
        <section id="laptops" class="my-3">
            <h3 class="text-center"># Laptops Section</h3>
            <div class="row my-3 mx-auto">
                <!--- JS listenning change event on this select and fetch data by user choice from server -->
                <select class="form-select" aria-label="selectionner un type de produit" id="category">
                    <option selected value="">Select a category</option>
                    <option value="linux-laptops">Linux Laptops</option>
                    <option value="mini-computers">Mini Computers</option>
                    <option value="accessories">Accessories</option>
                </select>
            </div>

            <!-- JS will diplay items cards in this div -->
            <div class="row" id="laptops-list"></div>

        </section>
        <!-- end laptops section -->

        <!-- #posts section -->
        <section id="posts" class="my-3">
            <h3 class="text-center"># Posts Section</h3>

            <!-- JS will diplay items cards in this div -->
            <div class="row" id="posts-list"></div>

        </section>
        <!-- end posts section -->
    </div>
    

    <!-- JS SCRIPTS & CDN -->
    <!-- JS scripts always come at the end of file, just before the end of the body because code is always read from the top to the bottom so,
    if JS need to handle something on an html element, this element should being read before JS file. -->

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

    <!-- AXIOS CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js" integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <!-- Local JS -->
    <script src="assets/js/dom-function.js"></script>
    <script src="assets/js/function.js"></script>
    <script src="assets/js/main.js"></script>
</body>
</html>