diff --git a/Projects/mylibrary/index.html b/Projects/mylibrary/index.html new file mode 100644 index 0000000..cb515b5 --- /dev/null +++ b/Projects/mylibrary/index.html @@ -0,0 +1,113 @@ + + + + + + + + + + Apni Library + + + + +
+
+

Apni Library

+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+ Type +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ +
+
+
+ + +

Your Books

+ + + + + + + + + +
NameAuthorType
+
+ + + + + + + + \ No newline at end of file diff --git a/Projects/mylibrary/index.js b/Projects/mylibrary/index.js new file mode 100644 index 0000000..4b1595a --- /dev/null +++ b/Projects/mylibrary/index.js @@ -0,0 +1,101 @@ +console.log("This is index.js"); +// Todos" +// 1. Store all the data to the localStorage +// 2. Give another column as an option to delete the book +// 3. Add a scroll bar to the view + +// Constructor +function Book(name, author, type) { + this.name = name; + this.author = author; + this.type = type; +} + +// Display Constructor +function Display() { + +} + +// Add methods to display prototype +Display.prototype.add = function (book) { + console.log("Adding to UI"); + tableBody = document.getElementById('tableBody'); + let uiString = ` + ${book.name} + ${book.author} + ${book.type} + `; + tableBody.innerHTML += uiString; +} + +// Implement the clear function +Display.prototype.clear = function () { + let libraryForm = document.getElementById('libraryForm'); + libraryForm.reset(); +} + +// Implement the validate function +Display.prototype.validate = function (book) { + if (book.name.length < 2 || book.author.length < 2) { + return false + } + else { + return true; + } +} +Display.prototype.show = function (type, displayMessage) { + let message = document.getElementById('message'); + message.innerHTML = ``; + setTimeout(function () { + message.innerHTML = '' + }, 2000); + +} + + +// Add submit event listener to libraryForm +let libraryForm = document.getElementById('libraryForm'); +libraryForm.addEventListener('submit', libraryFormSubmit); + +function libraryFormSubmit(e) { + console.log('YOu have submitted library form'); + let name = document.getElementById('bookName').value; + let author = document.getElementById('author').value; + let type; + let fiction = document.getElementById('fiction'); + let programming = document.getElementById('programming'); + let cooking = document.getElementById('cooking'); + + if (fiction.checked) { + type = fiction.value; + } + else if (programming.checked) { + type = programming.value; + } + else if (cooking.checked) { + type = cooking.value; + } + + let book = new Book(name, author, type); + console.log(book); + + let display = new Display(); + + if (display.validate(book)) { + + display.add(book); + display.clear(); + display.show('success', 'Your book has been successfully added') + } + else { + // Show error to the user + display.show('danger', 'Sorry you cannot add this book'); + } + + e.preventDefault(); +} \ No newline at end of file