Форум

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;
}

ksa · #2 (**permalink**) 24.08.2022, 14:35

Сообщение от underground

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

Обработай отправку формы... Прочитай значения нужных полей... Вставь значения полей в текст "ответа".
Вот и весь скрипт...

Rise · #3 (**permalink**) 24.08.2022, 16:37

underground,
Как минимум должно быть три блока: Витрина, Корзина, Заказ (Касса). Начни с этого.

Для отправки заказа на почту нужен будет php, какой-нибудь mail класс.

ksa · #4 (**permalink**) 24.08.2022, 17:19

Rise, так ему может чисто лабораторку какую сделать...

underground · #5 (**permalink**) 24.08.2022, 19:29

Сообщение от Rise

underground,
Как минимум должно быть три блока: Витрина, Корзина, Заказ (Касса). Начни с этого.

Для отправки заказа на почту нужен будет php, какой-нибудь mail класс.

Нет, php я еще не проходил. В условии пользоваться только html, css, JavaScript.

underground · #6 (**permalink**) 24.08.2022, 19:30

Сообщение от ksa

Rise, так ему может чисто лабораторку какую сделать...

Да, это лабораторка.

underground · #7 (**permalink**) 24.08.2022, 19:47

Получается застрял на этапе вставки значения полей в текст "ответа". Дальше пока что-то тупик.....

<!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">
        <form action="">
            <div class="first_book">
                <h2>Книга-1</h2>
                <input type="button" value="выбрать" onclick="optionAdd(this.form.screen, 'Книга-1')"/>
            </div>
            <div class="second_book">
                <h2>Книга-2</h2>
                <input type="button" value="выбрать" onclick="optionAdd(this.form.screen, 'Книга-2')"/>
            </div>
            <div class="third_book">
                <h2>Книга-3</h2>
                <input type="button" value="выбрать" onclick="optionAdd(this.form.screen, 'Книга-3')"/>
            </div>
            <div class="shopping_window">
                    <label for="title"> 
                        <span>Книга:</span>
                        <input type="text" name="screen" id="result" 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="Отправить" id="send">
            </div>
        </form>
    </div>
    <div id="field" class="invisible">
        <span id="buyerName"></span> 
        <p>спасибо за заказ.</p>
        <span id="book"></span>
        <p> будет доставлен </p>
        <span id="deliveryDate" ></span>
        <p>по адресу</p>
        <span id="buyerAddress" ></span>
    </div>
<script src="script.js"></script>
</body>
</html>

<style>
.wrapper form {
    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;
}

.invisible {
    visibility: hidden;
    opacity: 0;
}
</style>

<script>
function optionAdd(input, character) {
    if(input.value == null) { 
        input.value = character
    } else {
        input.value += character 
        }
}

let invisibleVisible = document.getElementById("field");
let anotherOn = document.getElementById("send");
anotherOn.addEventListener("click", function() {
    event.preventDefault();
    if (invisibleVisible.classList.contains("invisible")) {
        invisibleVisible.classList.remove("invisible");
    }
});

let buyerName = document.querySelector('#buyerName');
let book = document.querySelector('#book');
let deliveryDate = document.querySelector('#deliveryDate');
let buyerAddress = document.querySelector('#buyerAddress');
</script>

ksa · #8 (**permalink**) 24.08.2022, 20:55

Сообщение от underground

застрял на этапе вставки значения полей в текст "ответа".

У формы есть событие ее отправки - submit.
На него нужно повесить функцию-обработчик. В этой функции прочитать поля. Потом их значения вставлять в текст ответа.

Rise · #9 (**permalink**) 24.08.2022, 21:00

underground,
Тебе еще надо примитивную базу данных сделать, типа:

const database = {
  books: {
    N001: {
      title: 'title1',
      author: 'author1',
      description: 'description1',
      cover: '/images/cover1.jpg',
      price: 100
    },
    N002: {
      title: 'title2',
      author: 'author2',
      description: 'description2',
      cover: '/images/cover2.jpg',
      price: 200
    },
  },
  orders: {
    // ...
  },
};

// Чтение:
// database.books.N001.title
// database.books.N002.title

рони · #10 (**permalink**) 24.08.2022, 21:21

underground,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .wrapper form {
            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;
        }
        .invisible {
            visibility: hidden;
            opacity: 0;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const form = document.querySelector(".wrapper form");
            form.addEventListener("click", function(event) {
                event.preventDefault();
                let target = event.target;
                if (target.closest(".book")) {
                    this.screen.value = target.dataset.name;
                };
                if (target.closest("#send")) {
                    buyerName.textContent = this.nam.value;
                    book.textContent = `${this.screen.value} в кол-ве ${this.quantity.value}шт.`;
                    date.textContent = this.deliveryDate.value;
                    buyerAddress.textContent = this.deliveryAddress.value;
                    field.classList.remove("invisible");
                }
            });
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <form action="">
            <div class="first_book">
                <h2>Книга-1</h2>
                <input type="button" value="выбрать" class="book" data-name="Книга-1" />
            </div>
            <div class="second_book">
                <h2>Книга-2</h2>
                <input type="button" value="выбрать" class="book" data-name="Книга-2" />
            </div>
            <div class="third_book">
                <h2>Книга-3</h2>
                <input type="button" value="выбрать" class="book" data-name="Книга-3" />
            </div>
            <div class="shopping_window">
                <label for="title">
                        <span>Книга:</span>
                        <input type="text" name="screen" id="result" 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="Отправить" id="send">
            </div>
        </form>
    </div>
    <div id="field" class="invisible">
        <span id="buyerName"></span>
        <p>спасибо за заказ.</p>
        <span id="book"></span>
        <p> будет доставлен </p>
        <span id="date"></span>
        <p>по адресу</p>
        <span id="buyerAddress"></span>
    </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript