Skip to content

Commit 7c1c6c1

Browse files
Nivedita-coderNivedita-coder
authored
Merge pull request Nivedita-coder#4 from Asim-Amitav-Swain/library
Create A collage Library Project
2 parents 8efaef6 + acd24cd commit 7c1c6c1

2 files changed

Lines changed: 222 additions & 0 deletions

File tree

‎collage_library/index.html‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
9+
<!-- Bootstrap CSS -->
10+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
11+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
12+
13+
<title>Welcome to Collage Library</title>
14+
</head>
15+
16+
<body>
17+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
18+
<a class="navbar-brand" href="#">Collage Library</a>
19+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
20+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
21+
<span class="navbar-toggler-icon"></span>
22+
</button>
23+
24+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
25+
<ul class="navbar-nav mr-auto">
26+
<li class="nav-item active">
27+
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
28+
</li>
29+
30+
</ul>
31+
<form class="form-inline my-2 my-lg-0">
32+
<input class="form-control mr-sm-2" id="searchTxt" type="search" placeholder="Search"
33+
aria-label="Search">
34+
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
35+
</form>
36+
</div>
37+
</nav>
38+
39+
<div id="message"></div>
40+
41+
42+
<div class="container my-3">
43+
<h1>Collage Library</h1>
44+
<hr>
45+
<form id="libraryForm">
46+
<div class="form-group row">
47+
<label for="bookName" class="col-sm-2 col-form-label">Name</label>
48+
<div class="col-sm-10">
49+
<input type="text" class="form-control" id="bookName" placeholder="Book Name">
50+
</div>
51+
</div>
52+
<div class="form-group row">
53+
<label for="Author" class="col-sm-2 col-form-label">Author</label>
54+
<div class="col-sm-10">
55+
<input type="text" class="form-control" id="author" placeholder="Author">
56+
</div>
57+
</div>
58+
<fieldset class="form-group">
59+
<div class="row">
60+
<legend class="col-form-label col-sm-2 pt-0">Type</legend>
61+
<div class="col-sm-10">
62+
<div class="form-check">
63+
<input class="form-check-input" type="radio" name="type" id="fiction" value="fiction"
64+
checked>
65+
<label class="form-check-label" for="fiction">
66+
Fiction
67+
</label>
68+
</div>
69+
<div class="form-check">
70+
<input class="form-check-input" type="radio" name="type" id="programming"
71+
value="programming">
72+
<label class="form-check-label" for="programming">
73+
Computer Programming
74+
</label>
75+
</div>
76+
<div class="form-check disabled">
77+
<input class="form-check-input" type="radio" name="type" id="cooking" value="cooking">
78+
<label class="form-check-label" for="cooking">
79+
Cooking
80+
</label>
81+
</div>
82+
</div>
83+
</div>
84+
</fieldset>
85+
86+
<div class="form-group row">
87+
<div class="col-sm-10">
88+
<button type="submit" class="btn btn-primary">Add Book</button>
89+
</div>
90+
</div>
91+
</form>
92+
93+
<div id="table">
94+
<h1>Your books</h1>
95+
96+
<table class="table table-striped">
97+
<thead>
98+
<tr>
99+
<th scope="col">Name</th>
100+
<th scope="col">Author</th>
101+
<th scope="col">Type</th>
102+
</tr>
103+
</thead>
104+
<tbody id='tableBody'></tbody>
105+
</table>
106+
</div>
107+
</div>
108+
109+
<!-- Optional JavaScript -->
110+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
111+
<!-- <script src="index.js"></script> -->
112+
<script src="indexes6.js"></script>
113+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
114+
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
115+
crossorigin="anonymous"></script>
116+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
117+
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
118+
crossorigin="anonymous"></script>
119+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
120+
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
121+
crossorigin="anonymous"></script>
122+
</body>
123+
124+
</html>

‎collage_library/indexes6.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
console.log('This is ES6 version of Project 2');
2+
class Book {
3+
constructor(name, author, type) {
4+
this.name = name;
5+
this.author = author;
6+
this.type = type;
7+
}
8+
}
9+
10+
class Display {
11+
add(book) {
12+
console.log("Adding to UI");
13+
let tableBody = document.getElementById('tableBody');
14+
let uiString = `<tr>
15+
<td>${book.name}</td>
16+
<td>${book.author}</td>
17+
<td>${book.type}</td>
18+
</tr>`;
19+
tableBody.innerHTML += uiString;
20+
}
21+
22+
clear() {
23+
let libraryForm = document.getElementById('libraryForm');
24+
libraryForm.reset();
25+
}
26+
27+
validate(book) {
28+
if (book.name.length < 2 || book.author.length < 2) {
29+
return false
30+
}
31+
else {
32+
return true;
33+
}
34+
}
35+
36+
show(type, displayMessage) {
37+
let message = document.getElementById('message');
38+
let boldText;
39+
if(type==='success'){
40+
boldText = 'Success';
41+
}
42+
else{
43+
boldText = 'Error!';
44+
}
45+
message.innerHTML = `<div class="alert alert-${type} alert-dismissible fade show" role="alert">
46+
<strong>${boldText}:</strong> ${displayMessage}
47+
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
48+
<span aria-hidden="true">×</span>
49+
</button>
50+
</div>`;
51+
setTimeout(function () {
52+
message.innerHTML = ''
53+
}, 5000);
54+
55+
}
56+
}
57+
58+
// Add submit event listener to libraryForm
59+
let libraryForm = document.getElementById('libraryForm');
60+
libraryForm.addEventListener('submit', libraryFormSubmit);
61+
62+
function libraryFormSubmit(e) {
63+
console.log('YOu have submitted library form');
64+
let name = document.getElementById('bookName').value;
65+
let author = document.getElementById('author').value;
66+
let type;
67+
let fiction = document.getElementById('fiction');
68+
let programming = document.getElementById('programming');
69+
let cooking = document.getElementById('cooking');
70+
71+
if (fiction.checked) {
72+
type = fiction.value;
73+
}
74+
else if (programming.checked) {
75+
type = programming.value;
76+
}
77+
else if (cooking.checked) {
78+
type = cooking.value;
79+
}
80+
81+
let book = new Book(name, author, type);
82+
console.log(book);
83+
84+
let display = new Display();
85+
86+
if (display.validate(book)) {
87+
88+
display.add(book);
89+
display.clear();
90+
display.show('success', 'Your book has been successfully added')
91+
}
92+
else {
93+
// Show error to the user
94+
display.show('danger', 'Sorry you cannot add this book');
95+
}
96+
97+
e.preventDefault();
98+
}

0 commit comments

Comments
 (0)