This repository has been archived on 2023-11-10. You can view files and clone it, but cannot push or open issues or pull requests.
freecodecamp-projects/7-quality-assurance/3-library/views/index.html

70 lines
2.3 KiB
HTML
Vendored

<html>
<head>
<title>Personal Library</title>
<link rel="icon" type="image/png" href="https://cdn.freecodecamp.org/universal/favicons/favicon-16x16.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/public/style.css">
<style>
code {
background-color: whitesmoke;
}
</style>
</head>
<body>
<header>
<h1>Personal Library</h1>
</header>
<br>
<div id ='sampleposting'>
<h2 style="text-align: left">Test API responses</h2>
<form action="/api/books" method="post" class="border">
<h4>Test post to /api/books</h4>
<label for="title" >Book Title</label>
<input type="text" id="title" name="title" value=""><br>
<input type="submit" value="Submit">
</form>
<form action="" method="post" id="commentTest" class="border">
<h4>Test post to /api/books/{bookid}</h4>
<label for="idinputtest">BookId to comment on</label>
<input type="text" name="id" value="" id="idinputtest"><br>
<label for="comment">Comment</label>
<input type="text" id="comment" name="comment" value=""><br>
<input type="submit" value="Submit">
</form>
</div>
<hr style='margin: 50px'>
<div id='sampleui'>
<h2 style="text-align: left">Sample Front-End</h2>
<form id="newBookForm" class="border">
<label for="bookTitleToAdd">New Book Title</label>
<input type="text" id="bookTitleToAdd" name="title" placeholder="Moby Dick" style="width: 295px">
<button type="submit" value="Submit" id="newBook">Submit New Book!</button>
</form>
<div id='display'></div>
<div id='bookDetail' class='border'>
<p id='detailTitle'>Select a book to see it's details and comments</p>
<ol id='detailComments'></ol>
</div>
<button id='deleteAllBooks'>Delete all books...</button>
</div>
<hr style='margin: 50px'>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
crossorigin="anonymous"></script>
<script src="/public/client.js"></script>
<script>
/*
* For #sampleposting to update form action url to test inputs book id
*/
$(function() {
$('#commentTest').submit(function(){
let id = $('#idinputtest').val();
$(this).attr('action', "/api/books/" + id);
});
});
</script>
</body>
</html>