Загрузить файлы в «/»

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

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 = '';
+    });
+});

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