modifications

TheMahe · Jan 1, 2024 · 87214e6 · 87214e6
1 parent 22e304e
commit 87214e6
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Quote Generator</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
     <link rel="stylesheet" href="style.css">
+
 </head>
 <body>
 
@@ -18,15 +18,15 @@
             <span id="author">- Lorem ipsum</span>
         </div>
         <div class="button-container">
-            <button class="twitter-button" id="twitter" title="Tweet This!">
-                <i class="fab fa-twitter"></i>
-            </button>
+            <button class="x-button" id="x" title="Tweet This!">
+                <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>   </button>
             <button id="new-quote">New Quote</button>
         </div>
      </div>
 
      <div class="loader"></div>
     <!-- Script -->
+    <script src="https://kit.fontawesome.com/b276ed8c2d.js" crossorigin="anonymous"></script>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,7 +1,7 @@
 const quoteContainer = document.getElementById("quote-container");
 const quoteText = document.getElementById("quote");
 const authorText = document.getElementById("author");
-const twitterBtn = document.getElementById("twitter");
+const xBtn = document.getElementById("x");
 const newQuoteBtn = document.getElementById('new-quote');
 const loader = document.querySelector('.loader');
 
@@ -64,11 +64,11 @@ async function getQuotes() {
 
 // Tweet Quote
 function tweetQuote() {
-    const twitterUrl = `https://twitter.com/intent/tweet?text=${quoteText.textContent} - ${authorText.textContent}`;
-     window.open(twitterUrl, '_blank');
+    const xUrl = `https://twitter.com/intent/tweet?text=${quoteText.textContent} - ${authorText.textContent}`;
+     window.open(xUrl, '_blank');
 }
 
-twitterBtn.addEventListener('click', tweetQuote);
+xBtn.addEventListener('click', tweetQuote);
 
  // On load 
  getQuotes();   
diff --git a/style.css b/style.css
@@ -19,6 +19,8 @@ body {
   justify-content: center;
 }
 
+
+
 .quote-container {
   width: auto;
   max-width: 900px;
@@ -78,11 +80,11 @@ button:active {
   box-shadow: 0 0.1rem rgba(255, 255, 255, 0.0.65);
 }
 
-.twitter-button:hover {
-  color: #38a1f3;
+.x-button:hover {
+  color: rgba(0, 0, 0, 0.2);
 }
 
-.fa-twitter {
+.fa-x {
   font-size: 1.5rem;
 }
 
@@ -104,7 +106,7 @@ button:active {
 .loader {
   border: 16px solid #f3f3f3;
   border-radius: 50%;
-  border-top: 16px solid #3498db;
+  border-top: 16px solid #000;
   width: 120px;
   height: 120px;
   -webkit-animation: spin 2s linear infinite;