diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/LibreFranklin-Italic-VariableFont_wght.ttf b/LibreFranklin-Italic-VariableFont_wght.ttf new file mode 100644 index 00000000..84931ce9 Binary files /dev/null and b/LibreFranklin-Italic-VariableFont_wght.ttf differ diff --git a/LibreFranklin-VariableFont_wght.ttf b/LibreFranklin-VariableFont_wght.ttf new file mode 100644 index 00000000..c1d1e31c Binary files /dev/null and b/LibreFranklin-VariableFont_wght.ttf differ diff --git a/OFL.txt b/OFL.txt new file mode 100644 index 00000000..3b5b080d --- /dev/null +++ b/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2020 The LibreFranklin Project Authors (https://github.com/impallari/Libre-Franklin) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/background.jpg b/background.jpg new file mode 100644 index 00000000..e6dddb2a Binary files /dev/null and b/background.jpg differ diff --git a/index.html b/index.html index e69de29b..7ac6fe84 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + + Book search + + +
+
+ +
+ +
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/logo booksearch.png b/logo booksearch.png new file mode 100644 index 00000000..697224ec Binary files /dev/null and b/logo booksearch.png differ diff --git a/main.js b/main.js index e69de29b..6354caf6 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,86 @@ +async function bookSearchByTitle() { + + const TextToSearch = document.getElementById('Text-to-search') + + function getBookByTitleQuery(text) { + return `?q=${encodeURIComponent(text)}`; + } + + const button = document.getElementById('Search'); + button.addEventListener('click', async ()=>{ + document.getElementById("logo").style.display = "flex"; + document.getElementById("logo").style.marginLeft = "20px"; + document.getElementById("logo").style.marginRight = "0px"; + document.getElementById("logo").style.marginTop = "20px"; + document.getElementById("logo").style.height = "100px"; + document.getElementById("logo").style.position = "absolute"; + document.getElementById("signature").style.padding = "18px 0px 0px 0px"; + document.getElementById("Search").style.margin = "25px 135px 50px 135px"; + document.getElementById("Div-to-search").style.padding = "20px 20px 0px 150px"; + const text = TextToSearch.value; + const query = getBookByTitleQuery(text); + const url = `https://openlibrary.org/search.json${query}`; + const response = await fetch(url); + const {docs, numFound} = await response.json(); + + + document.getElementById('Results').innerHTML=""; + + let NumberofResults = document.createElement('p'); + NumberofResults.classList.add('Number'); + NumberofResults.innerText="Number of Results for "+'"'+ TextToSearch.value +'"'+ " = " + numFound; + document.getElementById("Results").appendChild(NumberofResults); + + for (let i=0; i{ + bookSearchByTitle(); +}) + + + + + diff --git a/style.css b/style.css index e69de29b..dd7239ff 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,205 @@ +@font-face + +{ + +font-family: LibreFranklin; + +src:url(LibreFranklin-VariableFont_wght.ttf); + +} + + +#logo { + display:block; + margin-top: 20px; + margin-left: auto; + margin-right: auto; + height: 200px; +} + + +#Div-to-search { + display:block; + margin-left: auto; + margin-right: auto; + padding: 40px 60px 0px 60px; + min-width: 200px; + max-width: 1000px; +} +#Text-to-search { + display:block; + margin-left: auto; + margin-right: auto; + width: 100%; + text-align: center; + height: 50px; + box-sizing: border-box; + border: 1px solid #e0e0e0; + border-radius: 10px; + background-color: #edffff; + font-size: 20px; + font-weight: bold; + color: #003B9D; + resize: none; + font-family: LibreFranklin; + padding: 10px; +} + +textarea:focus { + outline: none !important; + border-color: #003B9D !important; +} + +#signature { + font-family: LibreFranklin; + font-size: 12px; + color: #000051; + font-weight: bold; + margin: 0px; + padding-top: 5px; +} + +#Search-div { + text-align: center; + margin-left: 90px; +} + +#Search { + background-color: #000051; + border: none; + color: white; + padding: 15px; + border-radius: 7px; + text-align: center; + text-decoration: none; + font-size: 16px; + cursor: pointer; + margin-top: 25px; + margin-bottom: 50px; + font-family: LibreFranklin; +} +#Results { + height: auto; + width: 500px; + display: block; + margin-left: auto; + margin-right: auto; +} + +@media only screen and (max-width: 600px) { + #Results { + width: 360px; + display: block; + margin-left: auto; + margin-right: auto; + padding: 0px; + } + #Search-div { + margin-left: 0px; + } + + } + +.Number { + font-family: LibreFranklin; + color: #003B9D; + font-size: 18px; + font-weight: bold; + text-align: center; +} + +.border{ + background-color: #C5CAE9; + height: 350px; + margin: 10px; + padding: 10px; + border-radius: 10px; +} + +.text { + font-family: LibreFranklin; + float: right; + height: auto; + width: 50%; + word-wrap: break-word; + margin: 10px; + font-size: 20px; + font-weight: 900 ; + color: #003B9D; +} + +.textAuthor { + font-family: LibreFranklin; + float: right; + height: auto; + width: 50%; + word-wrap: break-word; + margin: 10px; + font-size: 18px; + font-weight: bold; + color: #003B9D; +} + + +.textPublication { + font-family: LibreFranklin; + float: right; + height: auto; + width: 50%; + word-wrap: break-word; + margin: 10px; + font-size: 14px; + color: #003B9D; + +} + +.textPages { + font-family: LibreFranklin; + float: right; + height: auto; + width: 50%; + word-wrap: break-word; + margin: 10px; + font-size: 14px; + color: #003B9D; + +} + +.img { + padding: 14px; + vertical-align: top; + width: 30%; + max-height: 250px; + overflow:auto; +} + +.button { + float: right; + margin: 30px; + box-shadow: 0px 1px 0px 0px #f0f7fa; + background-color:#000051; + border-radius:7px; + cursor:pointer; + color:#ffffff; + font-family: LibreFranklin; + font-size:15px; + padding:6px 24px; + text-decoration:none; + text-shadow:0px -1px 0px #5b6178; + border: #000051; + +} +.button:hover { + background-color:#000051; +} +.button:active { + position:relative; + top:1px; +} + +body { + margin: 0px; + padding: 0px; + background-image: url("background.jpg"); + background-size:100%; +}