Javascript-форум - Показать сообщение отдельно

underground · #1 (**permalink**) 24.08.2022, 13:37

Доброго времени суток уважаемые форумчане! Задача над которой пытаюсь работать: "Создать html-страницу для магазина книг. Пользователь должен иметь возможность выбрать книгу, указать количество экземпляров, ввести свое имя, дату доставки, адрес доставки и комментарий. После заполнения формы необходимо вывести на экран: «Имя покупателя, спасибо за заказ. Такой-то товар будет доставлен в такую-то дату по такому-то адресу»(пользоваться html, css, javascript)". Помогите пожалуйста разобраться с JS кодом.

<!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>Book store</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="first_book">
            <h2>Книга-1</h2>
            <button>
                выбрать
            </button>
        </div>
        <div class="second_book">
            <h2>Книга-2</h2>
            <button>
                выбрать
            </button>
        </div>
        <div class="third_book">
            <h2>Книга-3</h2>
            <button>
                выбрать
            </button>
        </div>
        <div class="shopping_window">
            <form action="">
                <label for="title"> 
                    <span>Книга:</span>
                    <input type="text" id="title" name="title" disabled>
                </label>
                <label for="quantity"> 
                    <span>Количество:</span>
                <input type="number" id="quantity" name="quantity">
                </label>
                <label for="nam">
                    <span>Имя:</span>
                    <input type="text" id="nam" name="nam" placeholder="Ваше Имя">
                </label>
                <label for="deliveryAddress"> 
                    <span>Адрес доставки:</span>
                    <input type="text" id="deliveryAddress" name="deliveryAddress">
                </label>
                <label for="deliveryDate"> 
                    <span>Дата доставки:</span>
                    <input type="date" id="deliveryDate" name="deliveryDate">
                </label>
                <label for="comment"> 
                    <span>Комментарий:</span>
                    <textarea name="comment" id="comment" cols="21" rows="10"></textarea>
                </label>
                <input type="submit" value="Отправить">
            </form>
        </div>
    </div>
    <div class="message_user">
        <span>Имя Покупателя</span> 
        <p>спасибо за заказ.</p>
        <span>Книга-1</span>
        <p> будет доставлен </p>
        <span>в такую-то дату</span>
        <p>по адресу</p>
        <span> адрес покупателя </span>
    </div>
<script src="script.js"></script>
</body>
</html>

.wrapper {
    display: flex;
}

label {
    display:block;
}

label span{
    display:inline-block;
    width: 170px;
}

label input{
    display:inline-block;
    width: 170px;
}

textarea {
    resize: none;
}

.first_book {
    border: 1px solid black;
    width: 23%;
    height: 300px;
}

.second_book {
    border: 1px solid black;
    width: 23%;
    height: 300px;
}

.third_book {
    border: 1px solid black;
    width: 23%;
    height: 300px;
}

.shopping_window {
    border: 1px solid black;
    width: 31%;
    height: 300px;
}

.message_user {
    visibility: hidden;
    opacity: 0;
}