From b7bdc592a17fd25580916df77aee78e6cc535379 Mon Sep 17 00:00:00 2001 From: xayana Date: Wed, 2 Apr 2025 18:33:55 +0200 Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=20=D0=B2=20=C2=AB?= =?UTF-8?q?/=C2=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.js | 76 +++++++++++++++++++++++++++++++ reg.js | 65 +++++++++++++++++++++++++++ style.css | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 273 insertions(+) create mode 100644 main.js create mode 100644 reg.js create mode 100644 style.css diff --git a/main.js b/main.js new file mode 100644 index 0000000..fdfdac2 --- /dev/null +++ b/main.js @@ -0,0 +1,76 @@ +document.addEventListener('DOMContentLoaded', () => { + const newProjectForm = document.getElementById('new-project-form'); + const tableBody = document.querySelector('.table tbody'); + + newProjectForm.addEventListener('submit', (event) => { + event.preventDefault(); + + const roomNumber = document.getElementById('room-number').value; + const roomType = document.getElementById('room-type').value; + const rate = parseFloat(document.getElementById('rate').value); + const guestName = document.getElementById('guest-name').value; + const guestPhone = document.getElementById('guest-phone').value; + const checkInDate = document.getElementById('check-in-date').value; + const checkOutDate = document.getElementById('check-out-date').value; + + try { + // Input Validation (Crucial for robust code) + if (!roomNumber || !roomType || isNaN(rate) || !guestName || !guestPhone || !checkInDate || !checkOutDate) { + throw new Error("Пожалуйста, заполните все поля корректно."); + } + + const newRow = document.createElement('tr'); + + const roomNumberCell = document.createElement('td'); + roomNumberCell.textContent = roomNumber; + + const roomTypeCell = document.createElement('td'); + roomTypeCell.textContent = roomType; + + const rateCell = document.createElement('td'); + rateCell.textContent = rate.toFixed(2); + + const availabilityCell = document.createElement('td'); + availabilityCell.textContent = 'Доступен'; + + const guestNameCell = document.createElement('td'); + guestNameCell.textContent = guestName; + + const guestPhoneCell = document.createElement('td'); + guestPhoneCell.textContent = guestPhone; + + const datesCell = document.createElement('td'); + datesCell.textContent = `${checkInDate} - ${checkOutDate}`; // Correct template literal + + const costCell = document.createElement('td'); + const checkInDateObj = new Date(checkInDate); + const checkOutDateObj = new Date(checkOutDate); + const timeDiff = checkOutDateObj.getTime() - checkInDateObj.getTime(); + const numNights = Math.ceil(timeDiff / (1000 * 3600 * 24)); + + if (isNaN(numNights) || numNights < 0) { + throw new Error("Неверные даты. Убедитесь, что дата выезда позже даты заезда."); + } + + const cost = numNights * rate; + costCell.textContent = cost.toFixed(2); + + newRow.appendChild(roomNumberCell); + newRow.appendChild(roomTypeCell); + newRow.appendChild(rateCell); + newRow.appendChild(availabilityCell); + newRow.appendChild(guestNameCell); + newRow.appendChild(guestPhoneCell); + newRow.appendChild(datesCell); + newRow.appendChild(costCell); + + tableBody.appendChild(newRow); + + newProjectForm.reset(); + + } catch (error) { + console.error("Произошла ошибка:", error); + alert("Произошла ошибка при обработке данных: " + error.message + ". Пожалуйста, проверьте введенные данные."); // Show error message to user + } + }); +}); \ No newline at end of file diff --git a/reg.js b/reg.js new file mode 100644 index 0000000..d88a722 --- /dev/null +++ b/reg.js @@ -0,0 +1,65 @@ +document.addEventListener('DOMContentLoaded', () => { + const usernameInput = document.getElementById('username'); + const emailInput = document.getElementById('email'); + const passwordInput = document.getElementById('password'); + const confirmPasswordInput = document.getElementById('confirmPassword'); + const registerButton = document.getElementById('registerButton'); + const messageEl = document.getElementById('message'); + const registrationForm = document.getElementById('registration-form'); + + registerButton.addEventListener('click', () => { + const username = usernameInput.value; + const email = emailInput.value; + const password = passwordInput.value; + const confirmPassword = confirmPasswordInput.value; + + messageEl.textContent = "Регистрация прошла успешно!"; + messageEl.style.color = "green"; + + if (!username) { + messageEl.textContent = "Пожалуйста, введите имя пользователя."; + messageEl.style.color = "red"; + return; + } + if (!email) { + messageEl.textContent = "Пожалуйста, введите email."; + messageEl.style.color = "red"; + return; + } + + if (!password || !confirmPassword) { + messageEl.textContent = "Пожалуйста, введите пароль и подтвердите его."; + messageEl.style.color = "red"; + return; + } + + if (password !== confirmPassword) { + messageEl.textContent = "Пароли не совпадают."; + messageEl.style.color = "red"; + return; + } + + if (password.length < 8) { + messageEl.textContent = "Пароль должен содержать не менее 8 символов!"; + messageEl.style.color = "red"; + return; + } + + const userData = { + username: username, + email: email, + password: password + }; + + + localStorage.setItem('user', JSON.stringify(userData)); + + messageEl.textContent = "Регистрация прошла успешно!"; + messageEl.style.color = "green"; + + usernameInput.value = ''; + emailInput.value = ''; + passwordInput.value = ''; + confirmPasswordInput.value = ''; + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..aa503f5 --- /dev/null +++ b/style.css @@ -0,0 +1,132 @@ +#new-project-form label { + display: block; + margin-bottom: 5px; +} + +#new-project-form input, +#new-project-form textarea, +#new-project-form select { + width: 30%; + padding: 5px; + margin-bottom: 10px; + border: 1px solid #ddd; + box-sizing: border-box; +} + +.submit { + background-color: #4fa6c0; + border-color: #90daf1; +} +.submit:active { + background-color: #999999; + border-color: #111111; +} + +.form-group { + margin-bottom: 15px; +} + +.form-group label { + display: block; + text-align: left; + margin-bottom: 5px; + font-weight: bold; +} +.container { + width: 80%; + margin: 20px auto; + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) +} + +.form-group input { + width: 100%; + padding: 8px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} + +.btn { + background-color: #007bff; + color: white; + padding: 10px 15px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.btn:hover { + background-color: #0056b3; +} + +#message { + margin-top: 10px; + font-weight: bold; +} + +.title { + margin: 20px; +} + +.header { + background-color: rgb(171, 241, 186); + display: flex; + justify-content: space-between; + align-items: center; + margin: 0px; + box-shadow: none; +} + +.menu { + display: flex; + justify-content: center; + align-items: center; + margin: 0px; + box-shadow: none; +} + +.registration { + font-family: Arial, sans-serif; + background-color: rgb(244, 244, 244); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0px; +} + +.registration__form { + background-color: #fff; + padding: auto; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 300px; + margin: auto; +} + +#new-project-form { + margin-bottom: 20px; + padding: 10px; + border: 1px solid #ccc; +} + +.table { + width: 100%; + margin-bottom: 20px; + border: 2px solid #999; + border-collapse: collapse; +} + +.table th { + font-weight: bold; + border: 2px solid #999; + padding: 8px; +} + +.table td { + border: 2px solid #999; + padding: 8px; +}