Add files via upload

crazyshrut · Feb 7, 2024 · f5e475f · f5e475f
commit f5e475f
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Random Quote Generator</title>
+        <link rel="stylesheet" href="styles.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
+    </head>
+    <body>
+        <div class="container">
+            <h1>
+            <i class="fas fa-quote-left"></i>
+            <span class="quote" id="quote"></span>
+            <i class="fas fa-quote-right"></i>
+            </h1>
+            <p class="author" id="author"></p>
+
+            <hr/>
+            <div class="buttons">
+                <a class="twitter" id="tweet" data-size="large" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
+                <button class="next" onclick="getNewQuote()">Next quote</button>
+            </div>
+        </div>
+        <script src="scripts.js"></script>
+    </body>
+</html>
diff --git a/scripts.js 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();
diff --git a/styles.css 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);
+}