smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-06-28 12:55:36 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: initial javascript complete

Browse source
This commit is contained in:
Smigz 2023-11-20 17:28:39 -05:00
parent fcb8e17d6b
commit ba35554e0e
3 changed files with 106 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

28
library/css/style.css
View file

@ -1,5 +1,33 @@
* {
margin: 0;
padding: 0;
}
:root {
--background-color: #000000;
}
.navbar { .navbar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-content: center; align-content: center;
} }
.navbar ul {
display: flex;
gap: 20px;
}
.book-cards {
display: flex;
justify-content: center;
flex-direction: column;
}
.card {
display: flex;
justify-content: center;
gap: 20px;
min-width: 200px;
min-height: 200px;
}

42
library/index.html
View file

@ -1,27 +1,41 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<title>Anonymous Library</title> <title>Anonymous Library</title>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<nav class="navbar"> <nav class="navbar">
<h1 class="header">Anonymous BookClub</h1> <h1 class="header">Anonymous BookClub</h1>
<ul> <ul>
<li>Search Books</li> <li>Add Book</li>
<li>Add Book</li> </ul>
</ul> </nav>
</nav> <div class="content">
<div class="content"> <div class="form">
<form action="" >
<input type="text" name="title" id="title">
<input type="text" name="author" id="author">
<button type="submit" id="btn">Submit</button>
</form>
</div>
<div class="book-cards">
</div>
</div>
<footer>
<div class="contact"></div>
<div class="icons"></div>
</footer>
</div> </div>
<footer> <script src="js/script.js"></script>
</footer>
</div>
<script src="js/script.js"></script>
</body> </body>
</html> </html>

52
library/js/script.js
View file

@ -1,20 +1,60 @@
const myLibrary = []; const myLibrary = [];
const booksDiv = document.querySelector('.book-cards');
const defaultData = new Book('James Clear', 'Atomic Habits', true);
function Book(title, author, pages, read) { function Book(title, author, read) {
this.title = title; this.title = title;
this.author = author; this.author = author;
this.pages = pages;
this.read = read; this.read = read;
this.info = function(){ this.info = function() {
// returns book info
let haveRead = this.read ? "have read" : "have not read"; let haveRead = this.read ? "have read" : "have not read";
return `${this.title}, by ${this.author}, ${this.pages} pages, ${haveRead}`; return `${this.title}, by ${this.author}, ${this.pages} pages, ${haveRead}`;
}; };
} }
function addBookToLibrary(book) { function addBookToLibrary(book) {
let newBook = new Book(book.title, book.author, book.pages, book.read);
myLibrary.push(newBook);
} }
function displayBooks(books) {
// Clear the screen before looping
booksDiv.innerHTML = "";
books.forEach((element, i) => {
const card = document.createElement('div');
card.classList.add('card');
card.classList.add(`data-card${i}`)
const title = document.createElement('p');
const author = document.createElement('p');
title.textContent = element.title;
author.textContent = element.author;
card.appendChild(title);
card.appendChild(author)
booksDiv.appendChild(card);
});
}
const button = document.querySelector('#btn');
button.addEventListener('click', event => {
const author = document.querySelector('#author').value;
const title = document.querySelector('#title').value;
const newBook = new Book(title, author, false);
addBookToLibrary(newBook);
displayBooks(myLibrary);
event.preventDefault();
})
// default data
myLibrary.push(defaultData)
// Load books on page load
displayBooks(myLibrary);