Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from MahdiSohaily/create-SPA
Create Single Page Application
- Loading branch information
Showing
9 changed files
with
249 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| src/js/modules/*.js | ||
| src/js/modules/*.js | ||
| src/js/components/*.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| export default class Contact { | ||
| constructor() { | ||
| this._content = ` | ||
| <section class="card" aria-labelledby="project-name"> | ||
| <h1 id="project-name" class="text-center primary-heading">Contact Information</h1> | ||
| <div className="into"> | ||
| <h2 class="secondary-heading">Find the best answer to your technical question, Reach out to us through the following contacts:</h2> | ||
| <ul class="my-3"> | ||
| <li>Our email: Mahdi@gmail.af</li> | ||
| <li>Our phone number: +2349182566</li> | ||
| <li>Our Address: Lorem ipsum dolor sit amet.</li> | ||
| </ul> | ||
| </div> | ||
| </section> | ||
| `; | ||
| } | ||
|
|
||
| get content() { | ||
| return this._content; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import Book from '../modules/Books.js'; | ||
|
|
||
| export default class Form { | ||
| constructor() { | ||
| this._content = ` | ||
| <section class="card" aria-labelledby="project-name"> | ||
| <div class="data-form"> | ||
| <h2 class="text-center secondary-header">Add a new book</h2> | ||
| <form action="javascript:void(0)" method="post" class="form"> | ||
| <div class="form-control my-3"> | ||
| <input class="input-form border" type="text" required minlength="3" name="title" id="book-title" aria-label="book-title" placeholder="Title"> | ||
| </div> | ||
| <div class="form-control my-3"> | ||
| <input class="input-form border" type="text" required minlength="3" name="author" id="book-Author" aria-label="book-Author" placeholder="Author"> | ||
| </div> | ||
| <div class="form-control my-3"> | ||
| <button type="submit" class="btn border">Add | ||
| <img width="20" height="20" class="icon" src="./src/icon/submit-icon.svg" alt="submit-icon"> | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </section> | ||
| `; | ||
| } | ||
|
|
||
| get content() { | ||
| return this._content; | ||
| } | ||
|
|
||
| active() { | ||
| const form = document.querySelector('form'); | ||
| const title = document.getElementById('book-title'); | ||
| const author = document.getElementById('book-Author'); | ||
|
|
||
| form.addEventListener('submit', () => { | ||
| const bookTitle = title.value; | ||
| const bookAuthor = author.value; | ||
| const newBook = new Book(bookTitle, bookAuthor); | ||
| newBook.addBook(); | ||
| console.log(newBook); | ||
| title.value = ''; | ||
| author.value = ''; | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import BooktoDom from '../modules/BookController.js'; | ||
|
|
||
| export default class List { | ||
| constructor() { | ||
| this._content = ` | ||
| <section class="card" aria-labelledby="project-name"> | ||
| <h1 id="project-name" class="text-center primary-heading">All Awesome Books</h1> | ||
| <table class="table my-3 px-3 py-3 border"> | ||
| <thead> | ||
| <tr> | ||
| <th>NO</th> | ||
| <th>Title</th> | ||
| <th>Author</th> | ||
| <th>Actions</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody class="books-list"> | ||
| <!-- Books list will be appended here --> | ||
| </tbody> | ||
| </table> | ||
| </section> | ||
| `; | ||
| } | ||
|
|
||
| get content() { | ||
| return this._content; | ||
| } | ||
|
|
||
| active() { | ||
| const dataStored = localStorage.getItem('books'); | ||
| const books = JSON.parse(dataStored); | ||
| const listContainer = document.querySelector('.books-list'); | ||
| if (books) { | ||
| for (const item in books) { | ||
| listContainer.innerHTML += BooktoDom.append(item, books[item]); | ||
| } | ||
| } else { | ||
| listContainer.innerHTML = | ||
| '<tr> <td colspan="4">Nothing to show </td> <tr>'; | ||
| } | ||
| } | ||
| deleteBook() { | ||
| const delBtn = document.querySelectorAll('.delete-btn'); | ||
| delBtn.forEach((element, index) => { | ||
| element.addEventListener('click', () => { | ||
| element.parentNode.parentNode.remove(); | ||
| const books = JSON.parse(localStorage.getItem('books')); | ||
| books.splice(index, 1); | ||
| localStorage.setItem('books', JSON.stringify(books)); | ||
| }); | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,48 @@ | ||
| import Book from './modules/Books.js'; | ||
| import BooktoDom from './modules/BookController.js'; | ||
| // DOM Address to run handel events | ||
| const form = document.querySelector('form'); | ||
| const title = document.getElementById('book-title'); | ||
| const author = document.getElementById('book-Author'); | ||
| const listContainer = document.querySelector('.books-list'); | ||
| // Page components | ||
| import List from './components/List.js'; | ||
| import Contact from './components/Contact.js'; | ||
| import Form from './components/Form.js'; | ||
|
|
||
| window.addEventListener('load', () => { | ||
| BooktoDom.checkStorage(listContainer); | ||
| }); | ||
| // new DOM Elements | ||
| const pages = document.querySelectorAll('.list-item'); | ||
| const container = document.getElementById('app'); | ||
| const myList = new List(); | ||
| container.innerHTML = myList.content; | ||
| myList.active(); | ||
| myList.deleteBook(); | ||
|
|
||
| pages.forEach((item) => { | ||
| item.addEventListener('click', (e) => { | ||
| const page = e.target.getAttribute('data-display'); | ||
| switch (page) { | ||
| case 'list': | ||
| { | ||
| const myList = new List(); | ||
| container.innerHTML = myList.content; | ||
| myList.active(); | ||
| myList.deleteBook(); | ||
| } | ||
| break; | ||
| case 'form': | ||
| { | ||
| const myForm = new Form(); | ||
| container.innerHTML = myForm.content; | ||
| myForm.active(); | ||
| } | ||
|
|
||
| form.addEventListener('submit', () => { | ||
| const bookTitle = title.value; | ||
| const bookAuthor = author.value; | ||
| const newBook = new Book(bookTitle, bookAuthor); | ||
| newBook.addBook(); | ||
| BooktoDom.checkStorage(listContainer); | ||
| title.value = ''; | ||
| author.value = ''; | ||
| break; | ||
| case 'contact': | ||
| { | ||
| const myContact = new Contact(); | ||
| container.innerHTML = myContact.content; | ||
| } | ||
| break; | ||
| default: { | ||
| const defaultPage = new List(); | ||
| container.innerHTML = defaultPage.content; | ||
| defaultPage.active(); | ||
| defaultPage.deleteBook(); | ||
| } | ||
| } | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters