working prototype

jaywar · Oct 10, 2019 · 9626339 · 9626339
commit 9626339
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>QuoteBox</title>
+     <link href="https://fonts.googleapis.com/css?family=Pacifico|Permanent+Marker&display=swap" rel="stylesheet"> 
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+      <div class="main">
+          <h1> QuoteBox </h1>
+          <hr>
+      <div class="quotebox">
+          <div clas="quote-body" id="quote-body"> </div>
+          <div id="quote-speaker"> </div>
+      </div>
+      <button id="inspireme">Inspire Me!</button>
+      <br><br>
+      <small>🚀 Made By PALASH 👻 </small>
+      </div>
+
+
+
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/quotes.json b/quotes.json
@@ -0,0 +1,12 @@
+[
+    {
+        "quote" : "Even Fiction Becomes Real When You Start Believing It",
+        "speaker" : "Palash Bauri"
+    },
+
+    {
+        "quote" : "The present is theirs; the future, for which I really   worked, is mine.",
+        "speaker" : "Nikola Tesla"
+    }
+
+]
diff --git a/script.js b/script.js
@@ -0,0 +1,27 @@
+let JSON_SOURCE = window.location.protocol + "//" + window.location.hostname + "/quotes.json"
+
+let fetchJSON = (a) => {
+    let f=new XMLHttpRequest;
+    f.open("GET",a,false);
+    f.send(null);
+    return f.responseText
+}
+
+let quotes = JSON.parse(fetchJSON(JSON_SOURCE))
+
+let setQuote = () =>{
+let QuoteRandomNumber = Math.floor(Math.random() * quotes.length)
+
+let randomQuote = quotes[QuoteRandomNumber]
+
+document.getElementById("quote-body").innerText = randomQuote.quote;
+
+document.getElementById("quote-speaker").innerText = "~" +randomQuote.speaker;
+
+}
+
+document.getElementById("inspireme").onclick = function(){
+ setQuote();
+}
+
+setQuote();
diff --git a/style.css b/style.css
@@ -0,0 +1,125 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
+  margin: 2em;
+  margin: auto;
+  text-align: center;
+  background: whitesmoke;
+}
+
+#quote-body{
+    margin: 0.5em 10px;
+  padding: 0.5em 10px;
+  quotes: "\201C""\201D""\2018""\2019";
+    font-family: 'Permanent Marker', cursive;
+    font-size: 32px;
+
+}
+
+
+#quote-body:before {
+  color: skyblue;
+  content: open-quote;
+  font-size: 4em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+
+
+
+#quote-speaker{
+    font-family: 'Pacifico', cursive;
+    font-size: 24px;
+    padding-bottom: 20px;
+    color : #242424;
+
+}
+
+h1,
+.h1 {
+  color: rgb(3, 56, 56);
+
+}
+
+.h1 a {
+  color: #102E87;
+  text-decoration: none
+}
+
+.h1 a:visited {
+  color: #102E87;
+  text-decoration: none
+}
+
+.bold {
+  font-weight: bold;
+}
+
+p {
+  max-width: 600px;
+}
+
+form,
+.form {
+  margin-bottom: 10px;
+  padding: 15px;
+  background-color: #1337a5;
+  border: 1px solid #d6d6d6;
+  box-shadow: 3px 3px 0px #bababa;
+  display: inline-block;
+  width: 98%;
+  max-width: 380px;
+}
+
+.main {
+  margin-bottom: 25px;
+  padding: 0px 10px 5px 10px;
+  margin: 8px auto 8px;
+  border: 2px solid skyblue;
+  box-shadow: 5px 6px 0px skyblue;
+  width: 95%;
+  max-width: 600px;
+}
+
+input {
+  display: block;
+  margin-bottom: 10px;
+  padding: 5px;
+  width: 100%;
+  border: 1px solid lightgrey;
+  border-radius: 3px;
+  font-size: 16px;
+}
+
+button {
+  font-size: 20px;
+  border-radius: 5px;
+  color: #0e2877;
+  background-color: lightseagreen;
+  border: 0px solid grey;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: cyan;
+}
+
+button:active {
+  box-shadow: none;
+}
+
+li {
+  margin-bottom: 5px;
+}
+
+footer {
+  color: #0e2877;
+}
+
+small, .small {
+  color:blue;
+}