diff --git a/index.html b/index.html index 4426837..117718c 100644 --- a/index.html +++ b/index.html @@ -1,53 +1,54 @@ + + + + Library + + + + + + + + + + + + - - - - Library - - - - - - - - - - - - + +
+
+ +

Library

+
- -
-
- -

Library

-
- -
-

About

-

- It's a small project just for learnig purpose... - It's a simple webpage where you can add books to the library and the you can also display the as well. - -

- -
- -
- -
-
-

It's a beta version and still under development

-
-
- - - - \ No newline at end of file +
+

About

+

+ It's a small project just for learnig purpose... It's a simple webpage + where you can add books to the library and the you can also display + the as well. +

+ +
+ +
+ +
+ + diff --git a/script.js b/script.js index 12ebd3f..8bd3a1a 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,7 @@ // An Array for storing the book objects acts as a database.. let myLibrary = []; -// book class +// Book class class Book { constructor(title, author, pages, read) { this.title = title; @@ -11,126 +11,119 @@ class Book { } } -// function that will take data from the user , create book object from that data and store the object to the database(array) - +// Function to add a book to the library function addBookToLibrary(title, author, pages, read) { let book = new Book(title, author, pages, read); myLibrary.push(book); } // DOM element selection -// selects main content container -let mainContent = document.querySelector('.main-content'); - -// selects the newBook button -let newBook = document.querySelector('.newBook'); - -// selects display button -let displayBtn = document.querySelector('.displayBtn'); - -// selects the display container -let displayContainer = document.querySelector('.output-display'); - -// event listener to the newbook button -newBook.addEventListener('click', () => { - - let form = document.createElement('form'); - form.classList = 'data-form'; - - - // helper function - - function createInputElement(textLabel, id, type) { - - const label = document.createElement('label'); - label.textContent = `${textLabel}`; - label.setAttribute('for', id); - form.appendChild(label); - - const input = document.createElement('input'); - input.setAttribute('id', id); - input.setAttribute('type', type); - input.setAttribute('required', true); - form.appendChild(input); - } - - createInputElement('Title', 'title', 'text'); - createInputElement('Author', 'author', 'text'); - createInputElement('Pages', 'pages', 'number'); - createInputElement('Read', 'read', 'text'); - - // creates sub mission button - const submissionBtn = document.createElement('button'); - submissionBtn.textContent = 'Add Book'; - submissionBtn.setAttribute('type', 'submit'); - submissionBtn.setAttribute('class', 'subBtn'); - form.appendChild(submissionBtn); +let mainContent = document.querySelector(".main-content"); +let newBook = document.querySelector(".newBook"); +let displayBtn = document.querySelector(".displayBtn"); +let displayContainer = document.querySelector(".output-display"); + +// Event listener for the newBook button +newBook.addEventListener("click", () => { + let form = document.createElement("form"); + form.classList = "data-form"; + form.setAttribute("noValidate", true); + form.innerHTML = ` + + + + + + + + + + + + + + `; mainContent.append(form); - //hidding the newBook btn from the display - newBook.style.display = 'none'; - - submissionBtn.addEventListener('click', (e) => { - e.preventDefault(); - let title = document.querySelector('#title').value; - let author = document.querySelector('#author').value; - let pages = document.querySelector('#pages').value; - let read = document.querySelector('#read').value; - - addBookToLibrary(title, author, pages, read); - newBook.style.display = 'block'; - mainContent.removeChild(form); - - // showing the hidden displayBtn - displayBtn.style.display = 'block'; + newBook.style.display = "none"; + + const submissionBtn = form.querySelector(".subBtn"); + + form.addEventListener("submit", (event) => { + event.preventDefault(); + let valid = true; + const title = form.querySelector("#title"); + const author = form.querySelector("#author"); + const pages = form.querySelector("#pages"); + const read = form.querySelector("#read"); + + if (!title.value) { + valid = false; + showError(title, "Title is required"); + } + if (!author.value) { + valid = false; + showError(author, "Author Name is required"); + } + if (!pages.value) { + valid = false; + showError(pages, "Pages are required"); + } + if (!read.value) { + valid = false; + showError(read, "Read status is required"); + } + + if (valid) { + addBookToLibrary(title.value, author.value, pages.value, read.value); + newBook.style.display = "block"; + mainContent.removeChild(form); + + // Show the hidden displayBtn + displayBtn.style.display = "block"; + } }); + function showError(input, message) { + const errorSpan = input.nextElementSibling; + errorSpan.textContent = message; + errorSpan.style.color = "red"; + } }); -// added an event listener to display button -displayBtn.addEventListener('click', display); +// Event listener for the display button +displayBtn.addEventListener("click", display); -// function for displaying the books on the page +// Function for displaying the books on the page function display() { myLibrary.forEach((item) => { - let displayCards = document.createElement('div'); - displayCards.classList = 'display-card'; + let displayCards = document.createElement("div"); + displayCards.classList = "display-card"; createElements(displayCards, item); displayContainer.appendChild(displayCards); - displayBtn.style.display = 'none'; + displayBtn.style.display = "none"; myLibrary = []; - }); } -// its a helper function created for creating elements -// It's a helper function created for creating elements +// Helper function for creating elements function createElements(container, e) { - let title = document.createElement('p'); - let author = document.createElement('p'); - let pages = document.createElement('p'); - let read = document.createElement('p'); - - // Setting content in elements - title.textContent = `Book Name: ${e.title}`; - author.textContent = `Written By: ${e.author}`; - pages.textContent = `Contains ${e.pages} Pages`; - read.textContent = `Read? : ${e.read}`; - - container.appendChild(title); - container.appendChild(author); - container.appendChild(pages); - container.appendChild(read); - - let deletBtn = document.createElement('button'); - deletBtn.textContent = 'Delete'; - deletBtn.classList.add('delete-btn'); - container.appendChild(deletBtn); - - deletBtn.addEventListener('click', () => { + container.innerHTML = ` + +

Book Name: ${e.title}

+

Written By: ${e.author}

+

Contains ${e.pages} Pages

+

Read? : ${e.read}

`; + + let deleteBtn = document.createElement("button"); + deleteBtn.textContent = "Delete"; + deleteBtn.classList.add("delete-btn"); + container.appendChild(deleteBtn); + + deleteBtn.addEventListener("click", () => { container.remove(); - displayBtn.style.display = 'block'; + displayBtn.style.display = "block"; }); } diff --git a/style.css b/style.css index 1b6ce4a..55b687a 100644 --- a/style.css +++ b/style.css @@ -47,18 +47,17 @@ h6 { isolation: isolate; } - .main-container { width: 100%; display: grid; grid-template-columns: 1fr 3fr 1fr; gap: 15px; grid-template-areas: - 'header header header' - 'mainContent mainContent mainContent' - 'displayBtn displayBtn displayBtn' - 'output output output' - 'footer footer footer'; + "header header header" + "mainContent mainContent mainContent" + "displayBtn displayBtn displayBtn" + "output output output" + "footer footer footer"; } .header-section { @@ -83,7 +82,7 @@ h6 { } .main-title { - font-family: 'Ga Maamli'; + font-family: "Ga Maamli"; color: #67e8f9; letter-spacing: 5px; align-self: center; @@ -96,7 +95,6 @@ h6 { grid-template-columns: repeat(1, auto); gap: 30px; padding: 30px 20px; - } .description { @@ -146,7 +144,6 @@ h6 { color: #0f172a; transform: skew(40deg, 0); transition: 1.8s all; - } .data-form { @@ -172,7 +169,6 @@ h6 { color: #997272; font-family: roboto mono; font-size: 1.3rem; - } .data-form input:valid { @@ -201,7 +197,6 @@ h6 { gap: 20px; grid-area: output; padding: 100px 20px; - } .display-card { @@ -216,21 +211,19 @@ h6 { font-family: roboto; font-size: 1.2rem; color: #67e8f9; - } .footer { grid-area: footer; background: #064e3b; text-align: center; - height: 300%; + height: 100%; display: grid; place-content: center; - } .footer p { color: #67e8f9; font-size: 2rem; font-family: roboto mono; -} \ No newline at end of file +}