diff --git a/index.html b/index.html new file mode 100644 index 0000000..43ca5e8 --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + Random Quote Generator + + + + +
+

+ + + +

+

+ +
+
+ + +
+
+ + + \ No newline at end of file diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..63069af --- /dev/null +++ b/scripts.js @@ -0,0 +1,31 @@ +const text=document.getElementById("quote"); +const author=document.getElementById("author"); +const tweetButton=document.getElementById("tweet"); + +const getNewQuote = async () => +{ + //api for quotes + var url="https://type.fit/api/quotes"; + + // fetching the data from api + const response=await fetch(url); + console.log(typeof response); + //convert the responses to json and storing in array + const allQuotes = await response.json(); + const indx = Math.floor(Math.random()*allQuotes.length); + const quote=allQuotes[indx].text; + const auth=allQuotes[indx].author; + + if(auth==null) + { + author = "Anonymous"; + } + text.innerHTML=quote; + author.innerHTML="~ "+auth; + + //tweet the quote + tweetButton.href="https://twitter.com/intent/tweet?text="+quote+" ~ "+auth; + +} + +getNewQuote(); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..374385a --- /dev/null +++ b/styles.css @@ -0,0 +1,89 @@ +*{ + margin:0; + padding:0; + box-sizing: border-box; +} + +body{ + min-height:100vh; + transition: 0.5s; + transition-timing-function: ease-in; + background-image: linear-gradient(to right bottom, rgb(88, 29, 105), #b88fe988); + display: flex; + align-items: center; + justify-content: center; + +} + +.container +{ + display: flex; + flex-direction: column; + align-items: center; + padding: 30px; + box-shadow: 0 4px 10px rgba(45, 6, 71, 0.653); + border-radius: 15px; + width: 600px; + background-color: rgba(241, 202, 249, 0.397); + margin: 10px; + +} +.fa-quote-left, .fa-quote-right { + font-size: 20px; + color: rgb(82, 16, 106); +} +.quote +{ + text-align: center; + font-size: 40px; + font-weight: bold; +} +.author +{ + + margin:10px; + text-align: right; + font-size: 25px; + font-style: italic; + font-family: cursive; +} +hr { + margin: 10px 0; + width: 100%; + border: 1px solid black; + background-color: black; +} +.buttons { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 9px; +} +.twitter +{ + border:1px solid rgb(102, 179, 255); + border-radius: 4px; + background-color: rgb(102, 179, 255); + color: white; + text-align: center; + font-size: 1.8em; + width: 60px; + height: 35px; + line-height: 40px; +} +.next +{ + font-size:18px; + border-radius: 5px; + cursor:pointer; + padding: 10px; + margin-top: 5px; + font-weight: bold; + color: rgb(247, 236, 255); + background-image: linear-gradient(to right bottom, rgb(92, 18, 112), #4b1659a8); +} +.container:hover +{ + box-shadow: 0 10px 10px rgb(51, 6, 67); +} \ No newline at end of file