diff --git a/book1.jpg b/book1.jpg new file mode 100644 index 0000000..a97e0a1 Binary files /dev/null and b/book1.jpg differ diff --git a/book2.jpg b/book2.jpg new file mode 100644 index 0000000..5f71549 Binary files /dev/null and b/book2.jpg differ diff --git a/book3.jpg b/book3.jpg new file mode 100644 index 0000000..7f23403 Binary files /dev/null and b/book3.jpg differ diff --git a/book4.jpg b/book4.jpg new file mode 100644 index 0000000..d01dcd2 Binary files /dev/null and b/book4.jpg differ diff --git a/bookShopImg.jpg b/bookShopImg.jpg new file mode 100644 index 0000000..c1a1325 Binary files /dev/null and b/bookShopImg.jpg differ diff --git a/books shop.html b/books shop.html new file mode 100644 index 0000000..5729176 --- /dev/null +++ b/books shop.html @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/books shop.js b/books shop.js new file mode 100644 index 0000000..b5d128c --- /dev/null +++ b/books shop.js @@ -0,0 +1,465 @@ +let body = document.querySelector('body'); +let divHead = document.createElement('div'); + divHead.classList.add('divHead'); + + let myImg = document.createElement('img'); + myImg.setAttribute('src', 'bookshopImg.jpg'); + divHead.appendChild(myImg); + + let pWelcome = document.createElement('p'); + pWelcome.innerText = 'Welcome to amazing books shop!'; + pWelcome.classList.add('pWelcome'); + divHead.appendChild(pWelcome) + +let mainContainer = document.createElement('div'); +let orderBooks = document.createElement('div'); +orderBooks.classList.add('order_books'); +let divBookContainer = document.createElement('div'); +divBookContainer.classList.add('books_container'); +divBookContainer.appendChild(orderBooks); +mainContainer.appendChild(divBookContainer); +mainContainer.appendChild(orderBooks); +mainContainer.classList.add('main_container'); + + + + + + +let pOrderBooks = document.createElement('p'); + pOrderBooks.classList.add('book_shop'); + pOrderBooks.innerText ='Order Books'; + orderBooks.appendChild(pOrderBooks); + + + let pBookCatalog = document.createElement('p'); + pBookCatalog.classList.add('book_shop'); + pBookCatalog.innerText ='Book shop'; + divBookContainer.appendChild(pBookCatalog); + + let divBookCatalog1 = document.createElement('div') + divBookCatalog1.classList.add('catalog'); + + let imgBook1 = document.createElement('img'); + imgBook1.setAttribute('src', 'book1.jpg'); + divBookCatalog1.appendChild(imgBook1); + imgBook1.style.width = '350px'; + + let book1Discr = document.createElement('div'); + book1Discr.classList.add('discription'); + + divBookCatalog1.appendChild(book1Discr); + let authorName1 = document.createElement('p'); + authorName1.innerText = 'Dante Alighieri' + book1Discr.appendChild(authorName1); + + let bookName1 = document.createElement('p'); + bookName1.innerText = 'The Divine Comedy'; + book1Discr.appendChild(bookName1); + + let price1 = document.createElement('p'); + let num1 = 230; + price1.innerText = 'Price: $'+num1; + book1Discr.appendChild(price1); + + let moreInfo = document.createElement('div'); + moreInfo.classList.add('more_info'); + + let showMore = document.createElement('p'); + showMore.classList.add('show_more'); + moreInfo.appendChild(showMore); + book1Discr.appendChild(moreInfo); + showMore.innerText = 'Show more'; + showMore.classList.add('open_popup'); + + + let addToBagButton = document.createElement('button'); + addToBagButton.classList.add('add_button'); + addToBagButton.innerText = 'Add to bag'; + moreInfo.appendChild(addToBagButton); + + + let divBookCatalog2 = document.createElement('div'); + divBookCatalog2.classList.add('catalog'); + + let imgBook2 = document.createElement('img'); + imgBook2.setAttribute('src', 'book2.jpg'); + imgBook2.classList.add('catalog_js'); + divBookCatalog2.appendChild(imgBook2); + imgBook2.style.width = '350px'; + + let book2Discr = document.createElement('div'); + book2Discr.classList.add('discription'); + + divBookCatalog2.appendChild(book2Discr); + let authorName2 = document.createElement('p'); + authorName2.innerText = 'Jacob Grimm, Wilhelm Grimm'; + book2Discr.appendChild(authorName2); + + let bookName2 = document.createElement('p'); + bookName2.innerText = 'Grimms Complete Fairy Tales'; + book2Discr.appendChild(bookName2); + + let price2 = document.createElement('p'); + let num2 = 125; + price2.innerText = 'Price: $'+num2; + book2Discr.appendChild(price2); + + let moreInfo2 = document.createElement('div'); + moreInfo2.classList.add('more_info'); + + let showMore2 = document.createElement('p'); + showMore2.classList.add('show_more'); + moreInfo2.appendChild(showMore2); + book2Discr.appendChild(moreInfo2); + showMore2.innerText = 'Show more'; + showMore2.classList.add('open_popup'); + + let addButton2 = document.createElement('button'); + addButton2.classList.add('add_button'); + addButton2.innerText = 'Add to bag'; + moreInfo2.appendChild(addButton2); + + + let divBookCatalog3 = document.createElement('div'); + divBookCatalog3.classList.add('catalog'); + + let imgBook3 = document.createElement('img'); + imgBook3.setAttribute('src', 'book3.jpg'); + divBookCatalog3.appendChild(imgBook3); + imgBook3.style.width = '350px'; + + let book3Discr = document.createElement('div'); + book3Discr.classList.add('discription'); + let authorName3 = document.createElement('p'); + authorName3.innerText = 'Alex Michaelides'; + book3Discr.appendChild(authorName3); + + let bookName3 = document.createElement('p'); + bookName3.innerText = 'The Silent Patient'; + book3Discr.appendChild(bookName3); + + let price3 = document.createElement('p'); + let num3 = 450; + price3.innerText = 'Price: $'+num3; + book3Discr.appendChild(price3); + + let divBookCatalog4 = document.createElement('div') + divBookCatalog4.classList.add('catalog'); + + let imgBook4 = document.createElement('img'); + imgBook4.setAttribute('src', 'book4.jpg'); + divBookCatalog4.appendChild(imgBook4); + imgBook4.style.width = '350px'; + + let moreInfo3 = document.createElement('div'); + moreInfo3.classList.add('more_info'); + + let showMore3 = document.createElement('p'); + showMore3.classList.add('show_more'); + moreInfo3.appendChild(showMore3); + book3Discr.appendChild(moreInfo3); + showMore3.innerText = 'Show more'; + + let addButton3 = document.createElement('button') + addButton3.classList.add('add_button'); + addButton3.innerText = 'Add to bag'; + moreInfo3.appendChild(addButton3); + + let book4Discr = document.createElement('div'); + book4Discr.classList.add('discription'); + + let authorName4 = document.createElement('p'); + authorName4.innerText = 'Harper Lee'; + book4Discr.appendChild(authorName4); + + let bookName4 = document.createElement('p'); + bookName4.innerText = 'To Kill a Mockingbird'; + book4Discr.appendChild(bookName4); + + let price4 = document.createElement('p'); + let num4 = 245; + price4.innerText = 'Price: $'+num4; + book4Discr.appendChild(price4); + + let moreInfo4 = document.createElement('div'); + moreInfo4.classList.add('more_info'); + + let showMore4 = document.createElement('p'); + showMore4.classList.add('show_more'); + moreInfo4.appendChild(showMore4); + book4Discr.appendChild(moreInfo4); + showMore4.innerText = 'Show more'; + + let addButton4 = document.createElement('button'); + addButton4.classList.add('add_button'); + addButton4.innerText = 'Add to bag'; + moreInfo4.appendChild(addButton4); + + + let popup_bg = document.createElement('div'); + popup_bg.classList.add('popup_bg'); + + let popup = document.createElement('div'); + popup.classList.add('popup'); + + + let closeImg = document.createElement('img'); + closeImg.classList.add('close_img'); + + closeImg.setAttribute('src', 'close.svg'); + popup.appendChild(closeImg); + + + popup_bg.appendChild(popup); + + let popupTitle = document.createElement('p'); + popupTitle.innerText = 'The Divine Comedy'; + popup.appendChild(popupTitle); + + let popupContent = document.createElement('p'); + popupContent.innerText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' + popup.appendChild(popupContent); + +let firstOrder = document.createElement('div'); +firstOrder.classList.add('first_order'); + +let closeOrderImg = document.createElement('img'); +closeOrderImg.setAttribute('src', 'close.svg'); +closeOrderImg.classList.add('close_order_img'); +firstOrder.appendChild(closeOrderImg); +orderBooks.appendChild(firstOrder); + +let orderImg1 = document.createElement('img'); +orderImg1.classList.add('order_img_1'); +orderImg1.setAttribute('src', 'book1.jpg'); +firstOrder.appendChild(orderImg1); + +let book1OrderDiscr = document.createElement('div') +firstOrder.appendChild(book1OrderDiscr); + +let orderAuthor1 = document.createElement('p') +orderAuthor1.innerText= 'Dante Alighieri'; +book1OrderDiscr.appendChild(orderAuthor1); + +let bookNameOrder1 = document.createElement('p'); +bookNameOrder1.innerText = 'The Divine Comedy'; +book1OrderDiscr.appendChild(bookNameOrder1); + + +let firstOrder2 = document.createElement('div'); + +let closeOrderImg2 = document.createElement('img'); +closeOrderImg2.setAttribute('src', 'close.svg'); +closeOrderImg2.classList.add('close_order_img'); +firstOrder2.appendChild(closeOrderImg2); +firstOrder2.classList.add('first_order'); +orderBooks.appendChild(firstOrder2); + +let orderImg2 = document.createElement('img'); +orderImg2.classList.add('order_img_1'); +orderImg2.setAttribute('src', 'book2.jpg'); +firstOrder2.appendChild(orderImg2); + +let book2OrderDiscr = document.createElement('div') +firstOrder2.appendChild(book2OrderDiscr); + +let orderAuthor2 = document.createElement('p') +orderAuthor2.innerText= 'Jacob Grimm, Wilhelm Grimm'; +book2OrderDiscr.appendChild(orderAuthor2); + +let bookNameOrder2 = document.createElement('p'); +bookNameOrder2.innerText = 'Grimms Complete Fairy Tales'; +book2OrderDiscr.appendChild(bookNameOrder2); + + +let firstOrder3 = document.createElement('div'); +firstOrder3.classList.add('first_order'); +orderBooks.appendChild(firstOrder3); + +let closeOrderImg3 = document.createElement('img'); +closeOrderImg3.setAttribute('src', 'close.svg'); +closeOrderImg3.classList.add('close_order_img'); +firstOrder3.appendChild(closeOrderImg3); + +let orderImg3 = document.createElement('img'); +orderImg3.classList.add('order_img_1'); +orderImg3.setAttribute('src', 'book3.jpg'); +firstOrder3.appendChild(orderImg3); + +let book3OrderDiscr = document.createElement('div') +firstOrder3.appendChild(book3OrderDiscr); + +let orderAuthor3 = document.createElement('p') +orderAuthor3.innerText= 'Alex Michaelides'; +book3OrderDiscr.appendChild(orderAuthor3); + +let bookNameOrder3 = document.createElement('p'); +bookNameOrder3.innerText = 'The Silent Patient'; +book3OrderDiscr.appendChild(bookNameOrder3); + +let firstOrder4 = document.createElement('div'); +firstOrder4.classList.add('first_order'); +orderBooks.appendChild(firstOrder4); + +let closeOrderImg4 = document.createElement('img'); +closeOrderImg4.setAttribute('src', 'close.svg'); +closeOrderImg4.classList.add('close_order_img'); +firstOrder4.appendChild(closeOrderImg4); + +let orderImg4 = document.createElement('img'); +orderImg4.classList.add('order_img_1'); +orderImg4.setAttribute('src', 'book4.jpg'); +firstOrder4.appendChild(orderImg4); + +let book4OrderDiscr = document.createElement('div') +firstOrder4.appendChild(book4OrderDiscr); + +let orderAuthor4 = document.createElement('p') +orderAuthor4.innerText= 'Harper Lee'; +book4OrderDiscr.appendChild(orderAuthor4); + +let bookNameOrder4 = document.createElement('p'); +bookNameOrder4.innerText = 'To Kill a Mockingbird'; +book4OrderDiscr.appendChild(bookNameOrder4); + +let confirmOrder = document.createElement('div'); +confirmOrder.classList.add('confirm_order'); +let confirmTotal = document.createElement('p'); +let result = document.createElement('input'); +result.classList.add('result'); +confirmTotal.innerText = 'Total: '; +let confirmButton = document.createElement('a'); +confirmButton.setAttribute('href', 'deliveryform.html'); +confirmButton.classList.add('confirm_button'); +confirmButton.innerText = 'Confirm order'; +confirmOrder.appendChild(confirmTotal); +confirmOrder.appendChild(confirmButton); +orderBooks.appendChild(confirmOrder); +confirmTotal.appendChild(result); + + + +divBookContainer.appendChild(divBookCatalog1); +divBookContainer.appendChild(divBookCatalog2); +divBookContainer.appendChild(divBookCatalog3); +divBookContainer.appendChild(divBookCatalog4); +divBookCatalog1.appendChild(book1Discr); +divBookCatalog2.appendChild(book2Discr); +divBookCatalog3.appendChild(book3Discr); +divBookCatalog4.appendChild(book4Discr); + + + + +body.appendChild(divHead); +body.appendChild(mainContainer); +body.appendChild(popup_bg); + + + + +closeOrderImg.addEventListener('click',() => { + firstOrder.classList.remove('active'); + result.value = +result.value - +num1; +}) + +closeOrderImg2.addEventListener('click',() => { + firstOrder2.classList.remove('active'); + result.value = +result.value - +num2; +}) + +closeOrderImg3.addEventListener('click',() => { + firstOrder3.classList.remove('active'); + result.value = +result.value - +num3; +}) + +closeOrderImg4.addEventListener('click',() => { + firstOrder4.classList.remove('active'); + result.value = +result.value - +num4; +}) + +addButton2.addEventListener('click',() => { + confirmOrder.classList.add('active'); + firstOrder2.classList.add('active'); + result.value = +result.value + +num2; +}) + +addButton3.addEventListener('click',() => { + confirmOrder.classList.add('active'); + firstOrder3.classList.add('active'); + result.value = +result.value + +num3; +}) + +addButton4.addEventListener('click',() => { + confirmOrder.classList.add('active'); + firstOrder4.classList.add('active'); + result.value = +result.value + +num4; +}) + +addToBagButton.addEventListener('click',() => { + confirmOrder.classList.add('active'); + firstOrder.classList.add('active'); + result.value = +result.value + +num1; +}) + +showMore.addEventListener('click',(event)=>{ + event.preventDefault(); + popupTitle.innerHTML = 'The Divine Comedy'; + popup_bg.classList.add('active'); + popup.classList.add('active'); +}); + +showMore2.addEventListener('click',(event)=>{ + popupTitle.innerHTML = 'Grimms Complete Fairy Tales'; + event.preventDefault(); + popup_bg.classList.add('active'); + popup.classList.add('active'); +}); + +showMore3.addEventListener('click',(event)=>{ + event.preventDefault(); + popup_bg.classList.add('active'); + popup.classList.add('active'); + popupTitle.innerHTML = 'The Silent Patient'; +}); + +showMore4.addEventListener('click',(event)=>{ + event.preventDefault(); + popup_bg.classList.add('active'); + popup.classList.add('active'); + popupTitle.innerHTML = 'To Kill a Mockingbird'; +}); + +let closePopup = document.querySelector('.close_img'); + closePopup.addEventListener('click',(event)=> { + event.preventDefault(); + popup_bg.classList.remove('active'); + popup.classList.remove('active'); + }) + +document.addEventListener('click',(event)=>{ + if (event.target === popup_bg){ + popup_bg.classList.remove('active'); + popup.classList.remove('active'); + } +}) + +window.onload = function() { + addButton4.onclick = function() { + this.disabled = 'disabled'; + } + addButton3.onclick = function() { + this.disabled = 'disabled'; + } + addButton2.onclick = function() { + this.disabled = 'disabled'; + } + addToBagButton.onclick = function() { + this.disabled = 'disabled'; + } +} + +window.onload = function() { + result.value = ''; +} \ No newline at end of file diff --git a/bookshop.css b/bookshop.css new file mode 100644 index 0000000..c9b3a8d --- /dev/null +++ b/bookshop.css @@ -0,0 +1,168 @@ +.divHead { + display: flex; + align-items: center; + margin-left: 35px; + gap: 250px; +} + +.popup_bg { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background: rgba(0,0,0,0.5); + opacity: 0; + pointer-events: none; + transition: 0.5s all; +} + +.popup { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%) scale(0); + background: #fff; + width: 600px; + padding: 15px; +} + +.popup.active{ + transform: translate(-50%,-50%) scale(1); + transition: 0.8s all; +} + +.close_img { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; + width: 30px; +} + +.popup_bg.active{ + opacity: 1; + pointer-events: all; + transition: 0.5s all; +} + +.show_more { + cursor: pointer; + color:deepskyblue; + font-style: italic; +} + +.pWelcome { + font-size: 32px; + font-weight: bold; + align-items: center; + color: brown; +} + +.catalog { + display:flex; +} + +.discription { + margin-left: 25px; + font-family: Verdana, Helvetica, Arial, sans-serif; +} + +.add_button { + cursor: pointer; + background-color: white; + color: black; + border: 4px solid #e7e7e7; + border-radius: 15px; + font-family: Verdana, Helvetica, Arial, sans-serif; +} + +.add_button:hover { + background-color: #e7e7e7; +} + +.more_info { + display: flex; + gap:10px; +} + +.book_shop { + font-weight: bold; + font-family: Verdana, Helvetica, Arial, sans-serif; + font-size: 24px; + text-align: center; +} + +.books_container { + margin-left: 35px; + display: flex; + flex-direction: column; + gap: 35px; + width:50%; +} + +.main_container { + display: flex; +} + +.order_books { + width: 50%; + border-left: 2px solid black; +} + +.first_order { + display: none; + position: relative; +} + +.first_order.active { + display: flex; + position: relative; + width: 450px; +} + +.order_img_1 { + width: 200px; +} + +.close_order_img { + cursor: pointer; + position: absolute; + top: 5px; + right: 5px; + width: 25px; +} + +.confirm_order { + display:none; +} + +.confirm_order.active { + display:block; +} + +.order_hide { + display: none; +} + +.result { + pointer-events: none; +} + +.confirm_button { + cursor: pointer; + background-color: white; + color: black; + border: 4px solid #e7e7e7; + border-radius: 15px; + font-family: Verdana, Helvetica, Arial, sans-serif; + text-decoration: none; +} + +.confirm_button:hover{ + background-color: #e7e7e7; +} + +.hide { + display: none; +} \ No newline at end of file diff --git a/close.svg b/close.svg new file mode 100644 index 0000000..ffad211 --- /dev/null +++ b/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/deliveryform.html b/deliveryform.html new file mode 100644 index 0000000..3cb3201 --- /dev/null +++ b/deliveryform.html @@ -0,0 +1,47 @@ + + + + + Delivery Form + + + +
+ Delivery information + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+ + + \ No newline at end of file diff --git a/deliveryform.js b/deliveryform.js new file mode 100644 index 0000000..e509675 --- /dev/null +++ b/deliveryform.js @@ -0,0 +1,104 @@ +const FORM = document.getElementById('delivery-form'); + +const nameInput = document.getElementById('name-input'); +const surnameInput = document.getElementById('surname-input'); +const deliveryDate = document.getElementById('delivery-date'); +const address = document.getElementById('address'); +const houseNumber = document.getElementById('house-number'); +const flatNumber = document.getElementById('flat-number'); +const result = document.getElementById('result'); +const btn = document.getElementById('submitButton') +btn.setAttribute('disabled','disabled'); +const emptyStr = ''; + + +const checkParametrs = () => { + const nameInputValue = nameInput.value; + if (nameInputValue.length < 4) return false; + + return true; + +} + + +FORM.addEventListener('submit', (event) => { + event.preventDefault(); + + const isValid = checkParametrs(); + + if (!isValid) return; + + const survey = `

The order created

+

The delivery address is: ${document.getElementById('address').value + ' ' + document.getElementById('house-number').value+ ' ' + document.getElementById('flat-number').value}

+

Customer: ${document.getElementById('name-input').value}

+

Delivery date: ${document.getElementById('delivery-date').value}

` + result.innerHTML = 'Success!' + survey; + +}) + +nameInput.addEventListener('change', (event) => { + const nameInputValue = nameInput.value; + const regExp = /[0-9]/; + const primer = regExp.test(nameInputValue); + if (nameInputValue.length < 4 || primer) { + event.target.classList.add('invalid'); + btn.setAttribute('disabled','disabled'); + }else { + event.target.classList.remove('invalid'); + } +}); + +surnameInput.addEventListener('change',(event) => { + const surnameInputValue = surnameInput.value; + const regExp = /[0-9]/; + const primer = regExp.test(surnameInputValue); + if (surnameInputValue.length < 5 || primer){ + event.target.classList.add('invalid'); + btn.setAttribute('disabled','disabled'); + }else { + event.target.classList.remove('invalid'); + } +}) + +flatNumber.addEventListener('change',(event)=>{ + const flatNumberValue = flatNumber.value; + const numflatNumberValue = Number(flatNumberValue); + const regExp = /[A-Za-z]/; + const primer = regExp.test(flatNumberValue); + if (primer || numflatNumberValue <= 0){ + event.target.classList.add('invalid'); + btn.setAttribute('disabled','disabled'); + }else { + event.target.classList.remove('invalid'); + } +}) + +address.addEventListener('change',(event)=>{ + const addressValue = address.value; + if (addressValue.length < 5) { + event.target.classList.add('invalid'); + btn.setAttribute('disabled','disabled'); + + }else{ + event.target.classList.remove('invalid'); + } +}) + +houseNumber.addEventListener('change',(event)=>{ + const houseNumberValue = houseNumber.value; + const numhouseNumberValue = Number(houseNumberValue); + if(numhouseNumberValue <= 0){ + event.target.classList.add('invalid'); + btn.setAttribute('disabled','disabled'); + }else{ + event.target.classList.remove('invalid'); + } +}) + +function toggleButton() { + if(nameInput.value && surnameInput.value && address.value && houseNumber.value && flatNumber.value){ + btn.removeAttribute('disabled'); + }else{ + btn.setAttribute('disabled','disabled'); + } +} \ No newline at end of file diff --git a/deliverystyle.css b/deliverystyle.css new file mode 100644 index 0000000..2d49c3d --- /dev/null +++ b/deliverystyle.css @@ -0,0 +1,34 @@ +* { + padding: 0; + margin: 0; + font-family: Arial, Helvetica, sans-serif; +} + +body { + background-color: #ccc; + min-height: 100vh; +} + +input { + border-radius: 4px; + padding: 2px; + } + +.form-style{ + width: 500px; + margin:100px auto; + padding: 40px; + background-color: white; +} + +.questions { + display: grid; + grid-template-columns: 200px 200px; + border: 0; + gap: 10px 0; + justify-items: end; + } + + .invalid { + border: 2px solid red; + } \ No newline at end of file