React: Minor fixes and refactor

sadanandpai · Oct 8, 2023 · 79941ad · 79941ad
1 parent c296bad
commit 79941ad
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 85 deletions.
diff --git a/native/machine-coding/Footer/index.html b/native/machine-coding/Footer/index.html
@@ -1,49 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="../../logo.svg" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="../../helpers/challenges.js" type="module" defer></script>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css" />
     <title>Enhanced Responsive Footer</title>
     <script src="https://kit.fontawesome.com/61673b2d06.js" crossorigin="anonymous"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="container">
-        <footer>
-            <div class="footer-content">
-                <div class="footer-logo">
-                    <img src="logo.png" alt="Company Logo">
-                </div>
-                <div class="footer-links">
-                    <ul>
-                        <li><a href="#">Home</a></li>
-                        <li><a href="#">About Us</a></li>
-                        <li><a href="#">Services</a></li>
-                        <li><a href="#">Contact</a></li>
-                    </ul>
-                </div>
-                <div class="footer-social">
-                    <ul>
-                        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
-                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
-                        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="footer-contact">
-                <p>Contact Us: <a href="mailto:info@example.com">info@example.com</a></p>
-            </div>
-            <div class="footer-bottom">
-                &copy; 2023 Company Name. All rights reserved.
-            </div>
-        </footer>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-logo">
+            <img src="logo.png" alt="Company Logo" />
+          </div>
+          <div class="footer-links">
+            <ul>
+              <li><a href="#">Home</a></li>
+              <li><a href="#">About Us</a></li>
+              <li><a href="#">Services</a></li>
+              <li><a href="#">Contact</a></li>
+            </ul>
+          </div>
+          <div class="footer-social">
+            <ul>
+              <li>
+                <a href="#"><i class="fab fa-facebook"></i></a>
+              </li>
+              <li>
+                <a href="#"><i class="fab fa-twitter"></i></a>
+              </li>
+              <li>
+                <a href="#"><i class="fab fa-linkedin"></i></a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="footer-contact">
+          <p>Contact Us: <a href="mailto:info@example.com">info@example.com</a></p>
+        </div>
+        <div class="footer-bottom">&copy; 2023 Company Name. All rights reserved.</div>
+      </footer>
     </div>
     <script src="script.js"></script>
-</body>
+  </body>
 </html>
diff --git a/react/src/components/footer/footer.module.scss b/react/src/components/footer/footer.module.scss
@@ -2,8 +2,8 @@
   padding-top: 1rem;
   padding-bottom: 1rem;
   margin: 3rem 0 1rem;
+  color: white;
   text-align: center;
+  background-color: #6554ff;
   border-top: 2px solid lightgrey;
-  background-color: #6554FF;
-  color: white;
 }
diff --git a/react/src/helpers/challenges.ts b/react/src/helpers/challenges.ts
@@ -10,9 +10,9 @@ export const challenges = new Map([
     },
   ],
   [
-    'random-quote-generator',
+    'quote-generator',
     {
-      title: 'Random Quote Generator',
+      title: 'Quote Generator',
       link: 'quote-generator',
       difficulty: 'easy',
       developer: 'viditagrawal56',
@@ -40,6 +40,16 @@ export const challenges = new Map([
       tags: [],
     },
   ],
+  [
+    'qr-code-generator',
+    {
+      title: 'QR generator',
+      link: 'qr-code-generator',
+      difficulty: 'easy',
+      developer: 'Krishnakalani111',
+      tags: [],
+    },
+  ],
   [
     'table-colorizer',
     {
@@ -304,14 +314,4 @@ export const challenges = new Map([
       tags: [],
     },
   ],
-  [
-    'qr-code-generator',
-    {
-      title: 'QR code generator',
-      link: 'qr-code-generator',
-      difficulty: 'easy',
-      developer: 'Krishnakalani111',
-      tags: [],
-    },
-  ],
 ]);
diff --git a/react/src/machine-coding/qr-code-generator/App.jsx b/react/src/machine-coding/qr-code-generator/App.jsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import QRCodeGenerator from './QRCodeGenerator';
+import React from 'react';
 
 function App() {
   return (
     <div className="App">
-      <h1>QR Code Generator</h1>
       <QRCodeGenerator />
     </div>
   );

diff --git a/react/src/machine-coding/qr-code-generator/QRCodeGenerator.jsx b/react/src/machine-coding/qr-code-generator/QRCodeGenerator.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import QRCode from 'qrcode.react';
 import styles from './QRCodeGenerator.module.css'; // Import the CSS Modules
 
@@ -16,16 +17,11 @@ function QRCodeGenerator() {
 
   return (
     <div className={styles.QRCodeGenerator}>
-      <input
-        type="text"
-        placeholder="Enter text"
-        onChange={handleChange}
-        className={styles['input-field']}
-      />
+      <input type="text" placeholder="Enter text" onChange={handleChange} className={styles['input-field']} />
       <button onClick={generateQRCode} className={styles['generate-button']}>
         Generate QR Code
       </button>
-      {qrCodeValue && <QRCode value={qrCodeValue} className={styles.qrcode} />}
+      {qrCodeValue && <QRCode value={qrCodeValue} className={styles.qrcode} size={256} />}
     </div>
   );
 }

diff --git a/react/src/machine-coding/qr-code-generator/QRCodeGenerator.module.css b/react/src/machine-coding/qr-code-generator/QRCodeGenerator.module.css
@@ -10,19 +10,19 @@
   width: 100%;
   padding: 10px;
   margin-bottom: 10px;
+  font-size: 16px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  font-size: 16px;
 }
 
 .generate-button {
   padding: 10px 20px;
-  background-color: #007bff;
+  font-size: 16px;
   color: #fff;
+  cursor: pointer;
+  background-color: #007bff;
   border: none;
   border-radius: 5px;
-  font-size: 16px;
-  cursor: pointer;
 }
 
 .generate-button:hover {

diff --git a/react/src/machine-coding/quote-generator/App.tsx b/react/src/machine-coding/quote-generator/App.tsx
@@ -1,13 +1,18 @@
 import { useEffect, useState } from 'react';
+
 import axios from 'axios';
 import styles from './quote.module.css';
+
 const App = () => {
   const [inputValue, setInputValue] = useState<string>('');
   const [quote, setQuote] = useState<string | null>(null);
   const [author, setAuthor] = useState<string | null>(null);
+
   useEffect(() => {
     submitHandler(); // Generate Quotes when the page reloads
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
   const submitHandler = async (e?: React.FormEvent) => {
     if (e) {
       e.preventDefault(); //prevent page reload after clicking the button

diff --git a/react/src/machine-coding/quote-generator/quote.module.css b/react/src/machine-coding/quote-generator/quote.module.css
@@ -1,23 +1,9 @@
-:root {
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
 .container {
-  margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-width: 320px;
-  min-height: 100vh;
+  margin: 0;
   text-align: center;
 }
 
@@ -26,27 +12,30 @@
 }
 
 .quote {
+  margin: 1rem 0;
   font-size: 20px;
   font-weight: bold;
-  margin: 1rem 0;
 }
+
 .author {
+  margin: 1rem 0;
   text-decoration: underline;
   text-underline-offset: 5px;
-  margin: 1rem 0;
 }
 
 .generate-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
   padding: 0.6em 1.2em;
+  font-family: inherit;
   font-size: 1em;
   font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
+  color: white;
   cursor: pointer;
+  background-color: #1a1a1a;
+  border: 1px solid transparent;
+  border-radius: 8px;
   transition: all 0.25s;
 }
+
 .generate-button:hover {
   background-color: #646cff;
 }
diff --git a/react/src/pages/Challenge.tsx b/react/src/pages/Challenge.tsx
@@ -18,6 +18,8 @@ import Pagination from '@/machine-coding/pagination/App';
 import PasswordGenerator from '@/machine-coding/password-generator/App';
 import PasswordStrength from '@/machine-coding/password-strength/passwordStrength';
 import ProgressBar from '@/machine-coding/progressbar/App';
+import QRCodeGenerator from '@/machine-coding/qr-code-generator/App.jsx';
+import QouteGenerator from '@/machine-coding/quote-generator/App.tsx';
 import Stack from '@/machine-coding/stack-implementation/Stack';
 import StarRating from '@/machine-coding/star-rating/App';
 import Stopwatch from '@/machine-coding/stopwatch/App';
@@ -27,8 +29,6 @@ import TicTacToe from '@/machine-coding/tic-tac-toe/App';
 import Toast from '@/machine-coding/toast-popup/toast';
 import TodoList from '@/machine-coding/todo-list/todo';
 import TwentyfiveFiveClock from '@/machine-coding/25-5-clock';
-import QRCodeGenerator from '@/machine-coding/qr-code-generator/App.jsx';
-import QouteGenerator from '@/machine-coding/quote-generator/App.tsx';
 import { challenges } from '@/helpers/challenges';
 import { useParams } from 'react-router-dom';