Как добавить корзину на сайт с помощью javascript

Question

Я только начинаю и я бы хотел что бы вы показали как это сделать на максимально простом примере я добавил кнопки при нажатии на + добавляется в корзину 1 блюдо и убирается при нажатии на - соответственно пожалуйста помогите

h1 {text-align: center;
font-size: 80px}

p {text-align: center;
font-size: 40px}

a:link {color: red;
background-color: transparent;
text-decoration: none}

a:visited {color: orange;
background-color: transparent;
text-decoration: none}

a:hover {color: purple;
background-color: transparent;
text-decoration: none}

a:active {color: black;
background-color: transparent;
text-decoration: none}

td {font-size: 20px;
text-align: center}

th {font-size: 20px;
text-align: center}

table.center {margin-left: auto; 
margin-right: auto}

table {table-layout: auto}

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href="Homework 2.css" />

    <title> First Courses </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>


<body>

    <table border="1" ; class="center">

        <tr>
            <th>Picture</th>
            <th>Food</th>
            <th>Cost</th>
            <th>Description</th>
        </tr>

        <tr>
            <td>
                <img src="Pasta Fagioli.jpg" alt="Pasta Fagioli" border=1 height=150 width=150> </img>
                <button class="add_item" data-id="1">+</button>
                <button class="add_item" data-id="1">-</button>
            </td>
            <td>Pasta Fagioli</td>
            <td>700</td>
            <td>Traditional Italian soup with beans and pasta</td>
        </tr>

        <tr>
            <td> <img src="Minestrone.jpg" alt="Minestrone" border=1 height=150 width=150> </img> 
                <button class="add_item" data-id="2">+</button>
                <button class="add_item" data-id="2">-</button>
            </td>
            <td>Minestrone</td>
            <td>900</td>
            <td>Thick soup with vegetables, pasta or rice</td>
        </tr>

        <tr>
            <td> <img src="Acquacotta.jpg" alt="Acquacotta" border=1 height=150 width=150> </img> 
                <button class="add_item" data-id="3">+</button>
                <button class="add_item" data-id="3">-</button>
            </td>
            <td>Acquacotta</td>
            <td>1200</td>
            <td>Hot broth-based bread soup</td>
        </tr>

    </table>


    <p>
        <a href="Cover Page.html">
            Cover Page
        </a>

        <a href="Menu Page 2.html">
            Second Courses
        </a>

        <a href="Menu Page 3.html">
            Drinks
        </a>

        <a href="Menu Page 4.html">
            Desserts
        </a>
    </p>

    <script src="script.js" ></script>
    
</body>

</html>

БЛОГ НА HUSL

Как добавить корзину на сайт с помощью javascript

Ответы (0 шт):