Merge pull request #234 from Saimanjari777/qr-code

QR Code Generator
Avdhesh-Varshney · Jun 3, 2024 · 00f20ea · 00f20ea
2 parents 93555b7 + 707db9e
commit 00f20ea
Show file tree

Hide file tree

Showing 11 changed files with 301 additions and 0 deletions.
diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/.eslintrc.cjs b/React-JS-Projects/Advanced/Qr-Code-Generator/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/README.md b/React-JS-Projects/Advanced/Qr-Code-Generator/README.md
@@ -0,0 +1,69 @@
+<h1 align='center'><b>💥 QR CODE GENERATOR 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+  ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>This project is a react.js project that generates QR code which can be downloaded when an URL of a website is entered.</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+To run this project locally, follow these steps:
+
+1. Fork the repository.
+
+2. Clone the repository to your local computer:
+    git clone https://github.com/your-username/Qr-Code-Generator-Clone.git
+
+3. Open the project folder in your preferred code editor, now you can view website in live.
+
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+
+<img src='./screenshot.webp'>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Sai Manjari</i></b> 👧</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/saimanjari777/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/Saimanjari777'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/index.html b/React-JS-Projects/Advanced/Qr-Code-Generator/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/package.json b/React-JS-Projects/Advanced/Qr-Code-Generator/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "qr-code-generator",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/screenshot.webp b/React-JS-Projects/Advanced/Qr-Code-Generator/screenshot.webp
diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/src/App.css b/React-JS-Projects/Advanced/Qr-Code-Generator/src/App.css
@@ -0,0 +1,54 @@
+@import url('http://fonts.cdnfonts.com/css/lilly'); 
+.App{ 
+display: flex; 
+flex-direction: column; 
+justify-content: center; 
+align-items: center; 
+gap: 50px; 
+padding-top: 30px; 
+
+} 
+h1{ 
+font-family: 'Lilly', sans-serif; 
+font-size: 50px; 
+} 
+.gen input{ 
+height: 35px; 
+width: 350px; 
+font-size: 20px; 
+padding-left: 5px; 
+} 
+button{ 
+position: relative; 
+height: 38px; 
+width: 100px; 
+top: -2px; 
+font-size: 18px; 
+margin-left: 10px;
+border: none; 
+color: whitesmoke; 
+background-color: forestgreen; 
+box-shadow: 2px 2px 5px rgb(74, 182, 74); 
+cursor: pointer; 
+} 
+button:active{ 
+box-shadow: none; 
+} 
+.extra{ 
+padding-top: 20px; 
+display: flex; 
+justify-content: space-around; 
+gap: 10px; 
+} 
+input[type="color"]{
+  margin-top: 20px;
+}
+h5{
+  font-size: 1rem;
+}
+.output-box{ 
+display: flex; 
+flex-direction: column; 
+align-items: center; 
+gap: 40px; 
+}
diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/src/App.jsx b/React-JS-Projects/Advanced/Qr-Code-Generator/src/App.jsx
@@ -0,0 +1,96 @@
+
+import { useEffect, useState } from 'react';
+import './App.css';
+
+function App() {
+  const [temp, setTemp] = useState("");
+  const [url, setUrl] = useState("");
+  const [size, setSize] = useState(250);
+  const [bgColor, setBgColor] = useState("ffffff");
+  const [qrCode, setQrCode] = useState("");
+  const [showDownloadButton, setShowDownloadButton] = useState(false); 
+
+  // Changing the URL only when the user
+  // changes the input
+  useEffect(() => {
+    setQrCode(`http://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(url)}&size=${size}x${size}&bgcolor=${bgColor}`);
+  }, [url, size, bgColor]);
+
+  // Function to handle input change and validate URL
+  function handleInputChange(event) {
+    setTemp(event.target.value);
+  }
+
+  // Function to handle URL submission
+  function handleSubmit(event) {
+    event.preventDefault();
+    if (isValidUrl(temp)) {
+      setUrl(temp);
+      setShowDownloadButton(true); // Show the download button
+    } else {
+      alert("Invalid URL. Please enter a valid URL.");
+    }
+  }
+
+  // Function to check if a string is a valid URL
+  function isValidUrl(string) {
+    try {
+      new URL(string);
+      return true;
+    } catch (_) {
+      return false;
+    }
+  }
+
+  // Function to handle QR code download
+  function handleDownload() {
+    const downloadLink = document.createElement('a');
+    downloadLink.href = qrCode;
+    downloadLink.download = 'qrcode.png';
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+  }
+
+  return (
+    <div className="App">
+      <h1>QR Code Generator</h1>
+      <form onSubmit={handleSubmit}>
+        <div className="input-box">
+          <div className="gen">
+            <input
+              type="text"
+              value={temp}
+              onChange={handleInputChange}
+              placeholder="Enter URL to encode"
+            />
+            <button type="submit" className="button">Generate</button>
+          </div>
+          <div className="extra">
+            <h5>Background Color:</h5>
+            <input
+              type="color"
+              onChange={(e) => { setBgColor(e.target.value.substring(1)) }}
+            />
+            <h5>Dimension:</h5>
+            <input
+              type="range"
+              min="200"
+              max="600"
+              value={size}
+              onChange={(e) => { setSize(e.target.value) }}
+            />
+          </div>
+        </div>
+      </form>
+      <div className="output-box">
+        <img src={qrCode} alt="" />
+        {showDownloadButton && qrCode && ( // Conditionally render the download button
+          <button onClick={handleDownload}>Download</button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/src/main.jsx b/React-JS-Projects/Advanced/Qr-Code-Generator/src/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/vite.config.js b/React-JS-Projects/Advanced/Qr-Code-Generator/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/React-JS-Projects/README.md b/React-JS-Projects/README.md
@@ -29,6 +29,7 @@
 |   2   | [To Do List](./Basic/ToDo-List) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
 |   3   | [Weather App](./Basic/Weather-App) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
 |   4   | [Cryptocurrency Finder](./Intermediate/Cryptocurrency-Finder/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
+|   5   | [QR Code Generator](./Advanced/Qr-Code-Generator/) | ![Advanced](https://img.shields.io/badge/Advanced-FF0000?style=for-the-badge) |
 
 
 </div>

diff --git a/database/react.json b/database/react.json
@@ -4,6 +4,11 @@
 		"title": "Cryptocurrency Finder",
 		"description": "Cryptocurrency Finder is a React-JS project which displays different crypto coins using API."
 	},
+	{
+		"tag": "Advanced",
+		"title": "QR Code Generator",
+		"description": "This is React JS project which generates QR code to open the website when url is entered and also it can be downloaded."
+	},
 	{
 		"tag": "Basic",
 		"title": "To Do List",