Skip to content

Commit 373def4

Browse files
HuXn-WebDevHuXn-WebDev
committed
BookList Project HTML, CSS, JAVASCRIPT
1 parent f245290 commit 373def4

File tree

3 files changed

+145
-0
lines changed

3 files changed

+145
-0
lines changed

‎084. BookList Project/app.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const title = document.getElementById("title");
2+
const author = document.getElementById("author");
3+
const year = document.getElementById("year");
4+
const bookList = document.getElementById("book-list");
5+
const btn = document.querySelector(".btn");
6+
7+
btn.addEventListener("click", function (e) {
8+
e.preventDefault();
9+
10+
if (title.value == "" && author.value == "" && year.value == "") {
11+
alert("Fill The Form");
12+
} else {
13+
const newRow = document.createElement("section");
14+
15+
// Creating new Title
16+
const newTitle = document.createElement("div");
17+
newTitle.innerHTML = title.value;
18+
newRow.appendChild(newTitle);
19+
20+
// Creating new Author
21+
const newAuthor = document.createElement("div");
22+
newAuthor.innerHTML = author.value;
23+
newRow.append(newAuthor);
24+
25+
// Creating new Year
26+
const newYear = document.createElement("div");
27+
newYear.innerHTML = year.value;
28+
newRow.appendChild(newYear);
29+
30+
bookList.appendChild(newRow);
31+
}
32+
});

‎084. BookList Project/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>BookList App</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="container">
11+
<form id="book-form">
12+
<div>
13+
<label for="title">Book Title</label>
14+
<input type="text" id="title" />
15+
</div>
16+
<div>
17+
<label for="author">Book Author</label>
18+
<input type="text" id="author" />
19+
</div>
20+
<div>
21+
<label for="year">Published Year</label>
22+
<input type="number" id="year" />
23+
</div>
24+
<button type="submit" class="btn">Add Book</button>
25+
</form>
26+
27+
<section class="table">
28+
<section class="table-section">
29+
<div>Title</div>
30+
<div>Author</div>
31+
<div>Year</div>
32+
</section>
33+
34+
<section id="book-list"></section>
35+
</section>
36+
</section>
37+
38+
<script src="app.js"></script>
39+
</body>
40+
</html>

‎084. BookList Project/style.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #080809;
9+
background: linear-gradient(blueviolet, rgb(82, 5, 154));
10+
display: flex;
11+
flex-direction: column;
12+
justify-content: center;
13+
align-items: center;
14+
height: 100vh;
15+
font-family: sans-serif;
16+
}
17+
18+
.container {
19+
width: 80%;
20+
height: 600px;
21+
padding: 20px;
22+
color: white;
23+
position: relative;
24+
}
25+
26+
input {
27+
width: 100%;
28+
padding: 10px;
29+
margin-top: 4px;
30+
margin-bottom: 20px;
31+
outline: none;
32+
border: none;
33+
border-radius: 5px;
34+
}
35+
36+
.table {
37+
background: crimson;
38+
width: 100%;
39+
}
40+
41+
.table-section {
42+
display: flex;
43+
justify-content: space-around;
44+
padding: 10px;
45+
}
46+
47+
#book-list {
48+
display: flex;
49+
flex-direction: column;
50+
list-style: none;
51+
overflow: hidden;
52+
word-wrap: break-word;
53+
background: #fff;
54+
color: #000;
55+
}
56+
57+
#book-list > section {
58+
display: flex;
59+
align-items: center;
60+
text-align: center;
61+
justify-content: space-around;
62+
border-bottom: 1px solid #ccc;
63+
padding: 10px;
64+
}
65+
66+
.btn {
67+
background: deeppink;
68+
border: none;
69+
color: #fff;
70+
margin-bottom: 20px;
71+
padding: 10px 20px;
72+
cursor: pointer;
73+
}

0 commit comments

Comments
 (0)