Scribd
Upload
31 views11 pages

Doctype HTML

This document contains code for a book library web application. It includes a Book constructor, Display constructor and associated methods to add, clear and validate books. It also includes event handlers for form submission that create a new Book, add it to the UI if valid, and show success or error messages. The application allows users to add books by name, author and type to a table, but needs to be improved by storing data, adding a delete option, and adding scrolling.

Uploaded by

talmiankinyanjui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views11 pages

Doctype HTML

This document contains code for a book library web application. It includes a Book constructor, Display constructor and associated methods to add, clear and validate books. It also includes event handlers for form submission that create a new Book, add it to the UI if valid, and show success or error messages. The application allows users to add books by name, author and type to a table, but needs to be improved by storing data, adding a delete option, and adding scrolling.

Uploaded by

talmiankinyanjui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

<!

doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap
.min.css"

integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9
JvoRxT2MZw1T" crossorigin="anonymous">

<title>Welcome to Library</title>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Book Library</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse"


id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a>
</li>

</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="searchTxt"
type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>

<div id="message"></div>

<div class="container my-3">


<h1>Manage Library</h1>
<hr>
<form id="libraryForm">
<div class="form-group row">
<label for="bookName" class="col-sm-2 col-form-
label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control"
id="bookName" placeholder="Book Name">
</div>
</div>
<div class="form-group row">
<label for="Author" class="col-sm-2 col-form-
label">Author</label>
<div class="col-sm-10">
<input type="text" class="form-control"
id="author" placeholder="Author">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-
0">Type</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input"
type="radio" name="type" id="fiction" value="fiction"
checked>
<label class="form-check-label"
for="fiction">
Fiction
</label>
</div>
<div class="form-check">
<input class="form-check-input"
type="radio" name="type" id="programming"
value="programming">
<label class="form-check-label"
for="programming">
Computer Programming
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input"
type="radio" name="type" id="cooking" value="cooking">
<label class="form-check-label"
for="cooking">
Cooking
</label>
</div>
</div>
</div>
</fieldset>

<div class="form-group row">


<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Add
Book</button>
</div>
</div>
</form>

<div id="table">
<h1>Your books</h1>

<table class="table table-striped">


<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Author</th>
<th scope="col">Type</th>
</tr>
</thead>
<tbody id='tableBody'></tbody>
</table>
</div>
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- <script src="index.js"></script> -->
<script data-two_delay_id="two_65ca567d46011" data-
two_delay_src="indexes6.js"></script>
<script data-two_delay_id="two_65ca567d46022" data-
two_delay_src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8a
btTE1Pi6jizo"
crossorigin="anonymous"></script>
<script data-two_delay_id="two_65ca567d4602e" data-
two_delay_src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/
1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script data-two_delay_id="two_65ca567d4603b" data-
two_delay_src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/
bootstrap.min.js"

integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4
x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>

</html>
index.js
console.log("This is index.js");
// Todos"
// 1. Store all the data to the localStorage
// 2. Give another column as an option to delete the book
// 3. Add a scroll bar to the view

// Constructor
function Book(name, author, type) {
this.name = name;
this.author = author;
this.type = type;
}

// Display Constructor
function Display() {

// Add methods to display prototype


Display.prototype.add = function (book) {
console.log("Adding to UI");
tableBody = document.getElementById('tableBody');
let uiString = `<tr>
<td>${book.name}</td>
<td>${book.author}</td>
<td>${book.type}</td>
</tr>`;
tableBody.innerHTML += uiString;
}

// Implement the clear function


Display.prototype.clear = function () {
let libraryForm = document.getElementById('libraryForm');
libraryForm.reset();
}

// Implement the validate function


Display.prototype.validate = function (book) {
if (book.name.length < 2 || book.author.length < 2) {
return false
}
else {
return true;
}
}
Display.prototype.show = function (type, displayMessage) {
let message = document.getElementById('message');
message.innerHTML = `<div class="alert alert-${type} alert-
dismissible fade show" role="alert">
<strong>Messge:</strong> ${displayMessage}
<button type="button" class="close" data-
dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>`;
setTimeout(function () {
message.innerHTML = ''
}, 2000);

// Add submit event listener to libraryForm


let libraryForm = document.getElementById('libraryForm');
libraryForm.addEventListener('submit', libraryFormSubmit);

function libraryFormSubmit(e) {
console.log('YOu have submitted library form');
let name = document.getElementById('bookName').value;
let author = document.getElementById('author').value;
let type;
let fiction = document.getElementById('fiction');
let programming = document.getElementById('programming');
let cooking = document.getElementById('cooking');

if (fiction.checked) {
type = fiction.value;
}
else if (programming.checked) {
type = programming.value;
}
else if (cooking.checked) {
type = cooking.value;
}

let book = new Book(name, author, type);


console.log(book);

let display = new Display();

if (display.validate(book)) {

display.add(book);
display.clear();
display.show('success', 'Your book has been successfully
added')
}
else {
// Show error to the user
display.show('danger', 'Sorry you cannot add this book');
}

e.preventDefault();
}
index.js

console.log("This is index.js");
// Todos"
// 1. Store all the data to the localStorage
// 2. Give another column as an option to delete the book
// 3. Add a scroll bar to the view

// Constructor
function Book(name, author, type) {
this.name = name;
this.author = author;
this.type = type;
}

// Display Constructor
function Display() {

// Add methods to display prototype


Display.prototype.add = function (book) {
console.log("Adding to UI");
tableBody = document.getElementById('tableBody');
let uiString = `<tr>
<td>${book.name}</td>
<td>${book.author}</td>
<td>${book.type}</td>
</tr>`;
tableBody.innerHTML += uiString;
}

// Implement the clear function


Display.prototype.clear = function () {
let libraryForm = document.getElementById('libraryForm');
libraryForm.reset();
}

// Implement the validate function


Display.prototype.validate = function (book) {
if (book.name.length < 2 || book.author.length < 2) {
return false
}
else {
return true;
}
}
Display.prototype.show = function (type, displayMessage) {
let message = document.getElementById('message');
message.innerHTML = `<div class="alert alert-${type} alert-
dismissible fade show" role="alert">
<strong>Messge:</strong> ${displayMessage}
<button type="button" class="close" data-
dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>`;
setTimeout(function () {
message.innerHTML = ''
}, 2000);

// Add submit event listener to libraryForm


let libraryForm = document.getElementById('libraryForm');
libraryForm.addEventListener('submit', libraryFormSubmit);

function libraryFormSubmit(e) {
console.log('YOu have submitted library form');
let name = document.getElementById('bookName').value;
let author = document.getElementById('author').value;
let type;
let fiction = document.getElementById('fiction');
let programming = document.getElementById('programming');
let cooking = document.getElementById('cooking');

if (fiction.checked) {
type = fiction.value;
}
else if (programming.checked) {
type = programming.value;
}
else if (cooking.checked) {
type = cooking.value;
}

let book = new Book(name, author, type);


console.log(book);

let display = new Display();

if (display.validate(book)) {

display.add(book);
display.clear();
display.show('success', 'Your book has been successfully
added')
}
else {
// Show error to the user
display.show('danger', 'Sorry you cannot add this book');
}

e.preventDefault();
}
indexes6.js

console.log('This is ES6 version of Project 2');


class Book {
constructor(name, author, type) {
this.name = name;
this.author = author;
this.type = type;
}
}

class Display {
add(book) {
console.log("Adding to UI");
let tableBody = document.getElementById('tableBody');
let uiString = `<tr>
<td>${book.name}</td>
<td>${book.author}</td>
<td>${book.type}</td>
</tr>`;
tableBody.innerHTML += uiString;
}

clear() {
let libraryForm = document.getElementById('libraryForm');
libraryForm.reset();
}

validate(book) {
if (book.name.length < 2 || book.author.length < 2) {
return false
}
else {
return true;
}
}

show(type, displayMessage) {
let message = document.getElementById('message');
let boldText;
if(type==='success'){
boldText = 'Success';
}
else{
boldText = 'Error!';
}
message.innerHTML = `<div class="alert alert-${type} alert-
dismissible fade show" role="alert">
<strong>${boldText}:</strong> $
{displayMessage}
<button type="button" class="close"
data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>`;
setTimeout(function () {
message.innerHTML = ''
}, 5000);

}
}

// Add submit event listener to libraryForm


let libraryForm = document.getElementById('libraryForm');
libraryForm.addEventListener('submit', libraryFormSubmit);

function libraryFormSubmit(e) {
console.log('YOu have submitted library form');
let name = document.getElementById('bookName').value;
let author = document.getElementById('author').value;
let type;
let fiction = document.getElementById('fiction');
let programming = document.getElementById('programming');
let cooking = document.getElementById('cooking');

if (fiction.checked) {
type = fiction.value;
}
else if (programming.checked) {
type = programming.value;
}
else if (cooking.checked) {
type = cooking.value;
}

let book = new Book(name, author, type);


console.log(book);

let display = new Display();

if (display.validate(book)) {
display.add(book);
display.clear();
display.show('success', 'Your book has been successfully
added')
}
else {
// Show error to the user
display.show('danger', 'Sorry you cannot add this book');
}

e.preventDefault();
}
tut34.js

console.log("This is tutorial 34");

setTimeout(() => {
for (let index = 0; index < 4005; index++) {
const element = index;
console.log("This is index number" + index);

}
}, 100);

console.log('done printing');

You might also like