kyle.belanger/top-javascript-projects
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update js functions add styling to css

Browse source
This commit is contained in:
kyle 2025-01-04 08:18:56 -05:00
parent 7a89d1a4c5
commit 9344c536aa
3 changed files with 35 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
library-app/css/styles.css
View file

@ -0,0 +1,3 @@
#main {
text-transform: capitalize;
}

5
library-app/index.html
View file

@ -6,10 +6,10 @@
<title>Library App</title> <title>Library App</title>
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="js/javascript.js"></script>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">
<div class="container grid grid-cols-3 gap-4 mx-auto p-6"> <div class="container grid grid-cols-3 gap-4 mx-auto p-6" id="main">
<div class="p-6 border border-slate-300 bg-white rounded-xl shadow-xl flex flex-col gap-x-4"> <div class="p-6 border border-slate-300 bg-white rounded-xl shadow-xl flex flex-col gap-x-4">
<h3>Book Title</h3> <h3>Book Title</h3>
<p>Book Author</p> <p>Book Author</p>
@ -24,5 +24,6 @@
</div> </div>
</div> </div>
<script src="js/javascript.js"></script>
</body> </body>
</html> </html>

28
library-app/js/javascript.js
View file

@ -1,4 +1,5 @@
const myLibrary = []; const myLibrary = [];
const container = document.getElementById("main");
function Book(title, author, pages, read) { function Book(title, author, pages, read) {
this.title = title; this.title = title;
@ -16,6 +17,33 @@ function addBookToLibrary(title,author,pages,read) {
} }
function createCard (book){
const card = document.createElement("div");
const classList = ["p-6", "border", "border-slate-300",
"bg-white", "rounded-xl", "shadow-xl", "flex", "flex-col", "gap-x-4"];
card.classList.add(...classList);
Object.keys(book).forEach((element) => {
if (element == 'title') {
let item = document.createElement('h2');
item.textContent = `${book[element]}`;
item.classList.add(...["font-bold", "text-2xl"])
card.appendChild(item);
} else {
let item = document.createElement('p');
item.textContent = `${element}: ${book[element]}`;
card.appendChild(item);
}
})
container.appendChild(card);
}
console.log(myLibrary) console.log(myLibrary)
addBookToLibrary("Test Book", "Kyle", "300", true) addBookToLibrary("Test Book", "Kyle", "300", true)
console.log(myLibrary) console.log(myLibrary)
myLibrary.forEach((book) => createCard(book))