Easybuoy · ModupeVictoria · Jul 3, 2020 · Jul 7, 2020 · Jul 8, 2020 · Jul 14, 2020
diff --git a/week 5/The BookList/index.html b/week 5/The BookList/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>The BookList</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="container">
+        <h1 class="title">The BookList</h1>
+
+        <form id="book-form">
+            <label for="title">Title:</label>
+            <input id="title" type="text"><br><br>
+            <label for="genre">Genre:</label>
+            <input id="genre" type="text"><br><br>
+            <label for="author">Author:</label>
+            <input id="author" type="text"><br><br>
+            <label for="date">Date:</label>
+            <input id="date" type="date"><br><br>
+            <input type="submit" value="Add Book" class="btn">
+        </form>
+        <table id="table-head">
+            <thead>
+                <tr>
+                    <th>Title</th>
+                    <th>Genre</th>
+                    <th>Author</th>
+                    <th>Date</th>
+                    <th>Read</th>
+                    <th>Last Read</th>
+                </tr>
+            </thead>
+            <tbody id="book-list"></tbody>
+        </table>
+        <div id="score" class="score">
+            <p>Books marked as read: 0</p>
+            <p>Books marked not read yet: 0</p>
+        </div>
+    </div>
+
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/week 5/The BookList/main.js b/week 5/The BookList/main.js
@@ -0,0 +1,147 @@
+
+// Book Class: Represents a book
+class Book{
+    constructor(title,genre,author,date){
+        this.title = title;
+        this.genre = genre;
+        this.author = author;
+        this.date = date;
+
+    }
+}
+
+// BookList Class: Handles BookList Tasks
+class BookList{
+    static displayBooks(){
+        const books = Store.getBooks();
+
+        // loop through the books
+        books.forEach(function(book){
+            BookList.addBookToList(book)
+        })
+
+
+    }
+    static addBookToList(book){
+        const list = document.getElementById('book-list');
+
+        // create a table row element
+
+        const row = document.createElement('tr');
+        row.innerHTML = `
+        <td>${book.title}</td>
+        <td>${book.genre}</td>
+        <td>${book.author}</td>
+        <td>${book.date}</td>
+        <td><input type="checkbox" id="read" name="read" class="completed complete-btn"></td>
+        <td><input type="checkbox" id="complete" name="complete" class="completed complete-btn"></td>
+        `;
+
+        // Append the row to the list
+
+        list.appendChild(row)
+
+    }
+
+
+    static readBook(el){
+       // const date = Date.now();
+        if(el.classList.contains('complete-btn')){
+           // el.parentElement.parentElement.classList.toggle('completed')
+          // el.parentElement.parentElement.innerHTML = `${book.date}`;
+        }
+    } 
+
+
+
+    //show alert
+    static showAlert(message,className){
+        const div =document.createElement('div');
+        div.className = `alert alert-${className}`
+        div.appendChild(document.createTextNode(message));
+        const container = document.querySelector('.container');
+        const form = document.getElementById('book-form');
+        container.insertBefore(div, form);
+        // Make alert vanish after 3 seconds
+        setTimeout(function(){
+            document.querySelector('.alert').remove()
+        }, 3000);
+
+    }
+
+    static clearFields(){
+        document.getElementById('title').value = '';
+        document.getElementById('genre').value = '';
+        document.getElementById('author').value = '';
+        document.getElementById('date').value = '';
+    }
+}
+
+//Store class: Handles storage
+class Store {
+    static getBooks(){
+        let books;
+        // check if there's a current 'book' item
+        if(localStorage.getItem('books') === null){
+            books = [];
+        }else{
+            //parse as json to be used as reg JS array of objs
+            books = JSON.parse(localStorage.getItem('books'));
+        }
+        return books;
+    }
+    static addBook(book){
+        // Get currently stored books
+        const books = Store.getBooks();
+
+        //Add new book to 'books' array
+        books.push(book);
+
+        //Set or save local storage with books array (converted to a string)
+        localStorage.setItem('books',JSON.stringify(books));
+    }
+
+}
+
+//Event: Display Books
+document.addEventListener('DOMContentLoaded',BookList.displayBooks)
+
+//Event: Add a Book
+document.getElementById('book-form').addEventListener('submit',function(e){
+    //Prevent default action
+
+    e.preventDefault();
+
+    //Get form values
+    const title = document.getElementById('title').value
+    const genre = document.getElementById('genre').value
+    const author = document.getElementById('author').value
+     const date = document.getElementById('date').value
+
+    // Validate form
+    if(title === '' || genre === '' || author === '' ||date === ''){
+        BookList.showAlert(`Please fill in all fields`, 'danger');
+    }else{
+        // Call book class
+    const book = new Book(title,genre,author,date);
+    //console.log(book);
+
+    // Add book to BookList
+    BookList.addBookToList(book);
+
+    //Add book to store
+    Store.addBook(book);
+
+    // Clear fields
+    BookList.clearFields();
+    }
+})
+
+//Event: To mark a Book as Read
+ document.getElementById('book-list').addEventListener('click',function(e){
+    BookList.readBook(e.target)
+    BookList.showAlert(`This is the current book being read`, 'success');
+}) 
+
+
+
diff --git a/week 5/The BookList/style.css b/week 5/The BookList/style.css
@@ -0,0 +1,94 @@
+.container{
+    margin-top: 20px;
+}
+.alert {
+    padding: 20px;
+    width: 70%;
+    color: white;
+    margin: auto;
+    text-align: center;
+  }
+  .alert-danger{
+      background-color: #f44336;
+  }
+  .alert-success{
+    background-color: #28a745;
+}
+.title{
+    color: blue;
+    text-align: center;
+}
+#book-form{
+    text-align: center;
+    padding: 10px;
+}
+input[type=text],input[type=date]{
+    width: 25%;
+    padding: 6px;
+}
+.btn{
+    background-color: blue;
+    color: #fff;
+    width: 25%;
+    padding: 7px;
+    border: none;
+    font-size: 20px;
+}
+.score{
+    display: grid;
+    grid-template-columns: auto auto;
+    font-size: 1.2rem;
+    color: #fff;
+
+}
+.score p:first-child{
+    background: #28a745;
+    padding: 10px;
+
+}
+.score p:last-child{
+    background: #f44336;
+    padding: 10px;
+
+}
+#table-head, #complete-table-head{
+    text-align: center;
+    margin:40px ;
+    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
+    border-collapse: collapse;
+    width: 70%;
+}
+#table-head th, #table-head td, #complete-table-head th, #complete-table-head td{
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+#table-head tr:nth-child(even){
+    background-color: #f2f2f2;
+}
+#table-head tr:hover,#complete-table-head tr:hover{
+    color: #ddd;
+}
+#table-head th{
+    padding-top: 12px;
+    padding-bottom: 12px;
+    background-color: rgb(52, 52, 221);
+    color: #fff;
+}
+#complete-table-head{
+    padding-top: 12px;
+    padding-bottom: 12px;
+    background-color: green;
+    color: #fff;
+}
+label{
+    font-size: 20px;
+}
+
+.complete-btn{
+    background-color: lightseagreen;
+    margin: 5px;
+}
+.completed{
+    text-decoration: line-through;
+    opacity: 0.7;
+}  
diff --git a/week 5/The Cat/index.html b/week 5/The Cat/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>The Cat</title>
+</head>
+<body>
+<h1 id="sleep"></h1>
+<h1 id="feed"></h1>
+<h1 id="feel"></h1>
+<h1 id="mood"></h1>
+
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/week 5/The Cat/main.js b/week 5/The Cat/main.js
@@ -0,0 +1,33 @@
+
+
+let cat = {
+    name: "Jack",
+    tiredness: "tired",
+    hunger: "hungry",
+    lonliness: "lonely",
+    happiness: "happy",
+
+    sleep(){
+        //console.log(`${this.name} is very ${this.tiredness}`)
+      return `${this.name} is very ${this.tiredness}`
+    },
+
+    feed(){
+        //console.log(`${this.name} is really  ${this.hunger}`)
+        return `${this.name} is really  ${this.hunger}`
+    },
+
+    feel(){
+        //console.log(`${this.name} feel so  ${this.lonliness}`)
+        return `${this.name} feel so  ${this.lonliness}`
+    },
+
+    mood(){
+        //console.log(`${this.name} is very  ${this.happiness}`)
+        return `${this.name} is very  ${this.happiness}`
+    }
+}
+document.getElementById('sleep').innerHTML = cat.sleep();
+document.getElementById('feed').innerHTML = cat.feed();
+document.getElementById('feel').innerHTML = cat.feel();
+document.getElementById('mood').innerHTML = cat.mood();
diff --git a/week 5/The Game(Roshambo)/index.html b/week 5/The Game(Roshambo)/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="modal.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
+
+    <title>Rock Paper Scissors</title>
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1>Rock Paper Scissors</h1>
+            <button id="restart" class="restart-btn">Restart Game</button>
+            <div id="score" class="score">
+                <p>Player: 0</p>
+                <p>Computer: 0</p>
+            </div>
+        </header>
+        <h2>Make a Selection</h2>
+        <div class="choices">
+            <i id="rock" class="choice fa fa-hand-rock fa-10x"></i>
+            <i id="paper" class="choice fa fa-hand-paper fa-10x"></i>
+            <i id="scissors" class="choice fa fa-hand-scissors fa-10x"></i>
+        </div>
+    </div>
+
+    <!--Modal-->
+    <div class="modal">
+        <div id="result" class="modal-content">
+        </div>
+    </div>
+    <script src="main.js"></script>
+</body>
+</html>