added qr code generator project

Author: Boobeshkumar56

App.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import './index.css'
+
+import { useState } from 'react'
+
+const App = () => {
+const[img,setimg]=useState("");
+const[loading,setloading]=useState(false)
+const[data,setdata]=useState("");
+const[size,setsize]=useState(200);
+function downlode(){
+ fetch(img).then((response)=>response.blob()).then((blob)=>{
+ const link=document.createElement('a');
+ link.href=URL.createObjectURL(blob);
+ link.download="qrcode.png";
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ })
+}
+async function generateQr(){
+ 
+ setloading(true);
+ try {
+ setimg(encodeURI(`https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${data}`))
+ } catch (error) {
+ console.error("Error in generating qr code");
+ 
+ }
+ finally{
+ setloading(false)
+ }
+
+}
+ return (
+ <>
+ <div id="container">
+ {loading && <h1>Please wait ...</h1>}
+ {img && <img src={img} alt="Qr code" />}
+ <h1>Data for the Qr code</h1>
+ <input type="text" placeholder='Enter your content to generate Qr' autoFocus onChange={(e)=>{setdata(e.target.value)}}/>
+ <h1>size of the Qr code</h1>
+ <input type="text" placeholder='Enter the size of the QrCode'autoFocus onChange={(e)=>{setsize(e.target.value);console.log(e.target.value)}}/><br />
+ <button className='generate' onClick={generateQr} disabled={loading}>GENERATE </button>
+ <button className='downlode' onClick={downlode}>DOWNLODE</button>
+ 
+ <p>&#9400; Designed by BoobeshKumar</p>
+ 
+ </div>
+ </>
+ )
+}
+
+export default App

index.css

@@ -0,0 +1,57 @@
+*{
+ font-family: 'Courier New', Courier, monospace;
+}
+#container{
+ width:600px;
+ height:700px;
+ max-height: max-content;
+margin:auto;
+border:auto solid black;
+text-align: center;
+border-radius: 20px;
+ }
+ input{
+
+ width:450px;
+ height:40px;
+ border-radius: 10px;
+ border:1px solid black;
+ font-family: 'Courier New', Courier, monospace;
+ font-size: large;
+ text-align: center;
+ }
+ 
+img{
+ 
+ margin-top:30px;
+ border: 3px solid black;
+}
+button{
+ margin:60px 0px 0 0;
+ width:200px;
+ height:50px;
+ border-radius: 10px;
+ letter-spacing: 2px;
+ 
+}
+.generate{
+ color:white;
+ background-color: rgba(10, 177, 10, 0.712);
+ border:2px solid green
+}
+.downlode{
+ margin-left: 100px;
+ color:white;
+ background-color: rgb(16, 16, 121);
+ border:2px solid rgb(70, 22, 202);
+
+}
+input:focus{
+ border-color:seagreen;
+ background-color: aliceblue;
+ color:black
+
+}
+p{
+ margin-top:70px;
+}

main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+
+
+createRoot(document.getElementById('root')).render(
+ <StrictMode>
+ <App />
+ </StrictMode>,
+)