diff --git a/assets/css/style.css b/assets/css/style.css index 380dfd7..be9a3f1 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -166,7 +166,7 @@ body { font-size: var(--fontSize-body-4); font-weight: var(--weight-regular); line-height: var(--lineHeight-5); - overflow: hidden; + /* overflow: hidden; */ height: 300vh; } @@ -2051,4 +2051,34 @@ textarea.input-field { left: 0; } +} + + + +.reservation-online { + margin-block-start: -270px; + margin-top: 3%; +} +.reservation-online { + display: grid; + grid-template-columns: 1fr 0.5fr; +} + +.form-left, +.form-right { padding: 40px 20px 30px; } +textarea.input-field { + resize: none; + height: 60px; + padding-block: 20px; + line-height: var(--lineHeight-1); +} + + +#estimated-cost{ + display: flex; + justify-content: space-around; + padding-bottom: 1%; + margin-bottom: 1%; + border: 1px solid var(--gold-crayola); + } \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 6403e32..22c9c0b 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -24,7 +24,67 @@ const addEventOnElements = function (elements, eventType, callback) { } +const phoneInput = document.getElementById('number'); +const phoneErrorMessage = document.getElementById('phone-error-message'); + +// Event listener for phone number input +phoneInput.addEventListener('input', function() { + let phoneNumber = phoneInput.value; + const firstChar = phoneNumber.charAt(0); + const illegalChars = /[^0-9+\- ]/; // Allows numbers, +, -, and spaces only + const multipleDashes = /--+/; // Matches two or more consecutive dashes + + // Remove spaces and "-" for length check + const strippedNumber = phoneNumber.replace(/[\s\-]/g, ''); + + // Reset error message + phoneErrorMessage.style.display = 'none'; + phoneErrorMessage.textContent = ''; + + // Check for invalid "-" at the start or consecutive dashes + if (firstChar === '-' || multipleDashes.test(phoneNumber)) { + phoneErrorMessage.style.display = 'block'; + phoneErrorMessage.textContent = "Invalid Phone Number!"; + return; // Stop further validation + } + + // Check if the first character is "+" and adjust the max length dynamically + if (firstChar === "+") { + phoneInput.maxLength = 17; // Adjust maxLength to allow for spaces and dashes + if (strippedNumber.length < 12 || strippedNumber.length > 14) { + phoneErrorMessage.style.display = 'block'; + phoneErrorMessage.textContent = "Phone number must have 10 digits."; + } + } else { + phoneInput.maxLength = 13; // Adjust maxLength to allow for spaces and dashes + if (strippedNumber.length !== 10) { + phoneErrorMessage.style.display = 'block'; + phoneErrorMessage.textContent = "Phone number must have 10 digits."; + } + } + + // Check for illegal characters (anything other than 0-9, +, -, and space) + for (let char of phoneNumber) { + if (illegalChars.test(char) || (char === "+" && phoneNumber.indexOf(char) !== 0)) { + phoneErrorMessage.style.display = 'block'; + phoneErrorMessage.textContent = `'${char}' is not valid!`; + break; + } + } +}); + + + +const numberOfPeopleInput = document.getElementById('people'); + const estimatedCostMessage = document.getElementById('estimated-cost-message'); + + numberOfPeopleInput.addEventListener('input', () => { + const numberOfPeople = parseInt(numberOfPeopleInput.value) || 0; + const costPerPerson = 20; // Example cost per person + const totalCost = numberOfPeople * costPerPerson; + estimatedCostMessage.innerHTML = `Estimated Cost: $${totalCost}`; + }); /** * NAVBAR */ diff --git a/book.html b/book.html new file mode 100644 index 0000000..d65f67a --- /dev/null +++ b/book.html @@ -0,0 +1,153 @@ + + + + + + Grilli - Book a Table + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +

Book a Table

+ +

+ Booking request +88-123-123456 + or fill out the order form +

+ +
+ + + +
+ +
+ +
+ + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+
+

Estimated Cost:

+
+ + + + +
+ +
+ +

Contact Us

+ +

Booking Request

+ + +88-123-123456 + +
+ +

Location

+ +
+ Restaurant St, Delicious City,
+ London 9578, UK +
+ +

Lunch Time

+ +

+ Monday to Sunday
+ 11.00 am - 2.30pm +

+ +

Dinner Time

+ +

+ Monday to Sunday
+ 05.00 pm - 10.00pm +

+ +
+ +
+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index e97ba51..da9921a 100644 --- a/index.html +++ b/index.html @@ -308,7 +308,7 @@

- + booking icon Book A Table