Fix footer positioning, add favicon and function to show library statistics

mooniiDev · mooniiDev · commit 9ffd3dd310a9 · 2021-02-14T00:10:30.000+02:00
diff --git a/css/styles.css b/css/styles.css
@@ -20,7 +20,7 @@
 
 #content {
   display: flex;
-  height: 100vh;
+  min-height: 100vh;
   font-family: "Montserrat-Regular", Arial, Helvetica, sans-serif;
   color: var(--blue);
 }
@@ -151,8 +151,9 @@ input[type=number] {
 }
 
 #footer {
-  position: absolute;
-  bottom: 30px;
+  position: fixed;
+  bottom: 0;
+  padding: 0 0 30px 0;
 }
 #crafted-by {
   margin-bottom: 0;
diff --git a/images/library-favicon.png b/images/library-favicon.png
diff --git a/index.html b/index.html
@@ -4,12 +4,13 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" type="image/jpg" href="images/library-favicon.png">
   <link type="text/css" rel="stylesheet" href="css/modern-normalize.min.css">
   <link type="text/css" rel="stylesheet" href="css/styles.css">
   <link href="css/fontawesome.min.css" rel="stylesheet">
   <link href="css/duotone.min.css" rel="stylesheet">
   <link href="css/solid.min.css" rel="stylesheet">
-  <title>📚 Library</title>
+  <title>Library</title>
 </head>
 
 <body id="content">
@@ -75,9 +76,9 @@ <h1 id="logo"><i class="fad fa-books theme-books"></i> Library</i></h1>
 
   <main id="library-content">
     <div id="library-info">
-      <p>BOOKS READ: <span>1</span></p>
-      <p>BOOKS UNREAD: <span>1</span></p>
-      <p>TOTAL BOOKS: <span>2</span></p>
+      <p>BOOKS READ: <span id="books-read"></span></p>
+      <p>BOOKS UNREAD: <span id="books-unread"></span></p>
+      <p>TOTAL BOOKS: <span id="total-books"></span></p>
     </div>
 
     <table id="books-list">
diff --git a/scripts.js b/scripts.js
@@ -15,6 +15,25 @@ function addBookToLibrary(title, author, pages, status) {
 addBookToLibrary('Sapiens: A Brief History of Humankind', 'Yuval Noah Harari', '464', 'read');
 addBookToLibrary('The Lady of the Lake', 'Andrzej Sapkowski', '544', 'unread');
 
+function showLibraryInfo() {
+  let readCounter = 0;
+  let unreadCounter = 0;
+  for (let i = 0; i < myLibrary.length; i += 1) {
+    if (myLibrary[i].status === 'read') {
+      readCounter += 1;
+      const booksRead = document.querySelector('#books-read');
+      booksRead.textContent = readCounter;
+    } else if (myLibrary[i].status === 'unread') {
+      unreadCounter += 1;
+      const booksUnread = document.querySelector('#books-unread');
+      booksUnread.textContent = unreadCounter;
+    }
+  }
+  const totalBooks = document.querySelector('#total-books');
+  totalBooks.textContent = myLibrary.length;
+}
+showLibraryInfo();
+
 function showBooksInLibrary() {
   for (let i = 0; i < myLibrary.length; i += 1) {
     const bookList = document.querySelector('#table-body');

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`
`21`	`21`	`#content {`
`22`	`22`	`display: flex;`
`23`		`- height: 100vh;`
	`23`	`+ min-height: 100vh;`
`24`	`24`	`font-family: "Montserrat-Regular", Arial, Helvetica, sans-serif;`
`25`	`25`	`color: var(--blue);`
`26`	`26`	`}`
`@@ -151,8 +151,9 @@ input[type=number] {`
`151`	`151`	`}`
`152`	`152`
`153`	`153`	`#footer {`
`154`		`- position: absolute;`
`155`		`- bottom: 30px;`
	`154`	`+ position: fixed;`
	`155`	`+ bottom: 0;`
	`156`	`+ padding: 0 0 30px 0;`
`156`	`157`	`}`
`157`	`158`	`#crafted-by {`
`158`	`159`	`margin-bottom: 0;`