first commit

CharlesOsang017 · May 6, 2023 · e80c8d3 · e80c8d3
commit e80c8d3
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Quote Generator</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1 class="heading">Random Quote Generator</h1>
+        <h2 class="quote">
+            <i class="fa-solid fa-quote-left"></i>
+            <span id="quote"></span>
+            <i class="fa-solid fa-quote-right"></i>
+        </h2>
+        <p class="author" id="author">~ </p>
+        <button class="btn" id="btn">Get a Quote</button>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,33 @@
+const btnEl = document.getElementById('btn')
+const quoteEl = document.getElementById('quote')
+const authorEl = document.getElementById('author')
+
+
+const apiURL = "https://api.quotable.io/random"
+
+const getQuote = async() =>{
+    try {
+        btnEl.innerText = 'Loading...';
+        btnEl.disabled = true;
+        const response = await fetch(apiURL)
+        const data = await response.json();
+        const quoteContent = data.content;
+        const quoteAuthor = data.author;
+        quoteEl.innerText = quoteContent;
+        authorEl.innerText = '~ ' + quoteAuthor;
+        btnEl.innerText = 'Get a quote';
+        btnEl.disabled = false;
+        // console.log(data.content);
+    } catch (error) {
+        // console.log(error);
+        quoteEl.innerText = 'An error happened, try again later';
+        authorEl.style.display = 'none';
+        btnEl.innerText = 'Get a quote';
+        btnEl.disabled = false;
+    }
+
+}
+
+getQuote()
+btnEl.addEventListener('click', getQuote)
+
diff --git a/style.css b/style.css
@@ -0,0 +1,48 @@
+body{
+    margin: 0;
+    display: flex;
+    min-height: 100vh;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Courier New', Courier, monospace;
+    background: linear-gradient(to left bottom, lightgreen, lightblue);
+}
+.container{
+    background-color: rgba(255,255,255, .1);
+    box-shadow: 0 6px 10px rgba(0,0,0,.3);
+    padding: 30px;
+    border-radius: 15px;
+    width: 90%;
+    margin: 10px;
+    text-align: center;
+}
+.heading{
+    font-size: 25px;
+    font-weight: 600;
+}
+.quote{
+    font-size: 25px;
+    font-weight: 600;
+}
+.author{
+    font-size: 25px;
+    margin: 10px;
+    font-style: italic;
+}
+.btn{
+    font-size: 18px;
+    border-radius: 5px;
+    cursor: pointer;
+    padding: 10px;
+    margin-top: 15px;
+    background-color: rgba(255,255,255, .3);
+    border-color: rgba(255,255,255, .6);
+    text-transform: uppercase;
+    width: 300px;
+}
+.btn:hover{
+    background-color: rgba(255,255,255, .6);
+    box-shadow: 0 4px 4px rgba(0,0,0,.3);
+    transition: all 300ms ease-in-out;
+    color: green;
+}