From 707db9e9be57f3456c89f45f0a2d8fd5637b3934 Mon Sep 17 00:00:00 2001 From: Saimanjari777 Date: Mon, 3 Jun 2024 16:56:41 +0530 Subject: [PATCH] QR Code Generator I have added QR code generator --- .../Advanced/Qr-Code-Generator/.eslintrc.cjs | 21 ++++ .../Advanced/Qr-Code-Generator/README.md | 69 +++++++++++++ .../Advanced/Qr-Code-Generator/index.html | 13 +++ .../Advanced/Qr-Code-Generator/package.json | 26 +++++ .../Qr-Code-Generator/screenshot.webp | Bin 0 -> 12156 bytes .../Advanced/Qr-Code-Generator/src/App.css | 54 ++++++++++ .../Advanced/Qr-Code-Generator/src/App.jsx | 96 ++++++++++++++++++ .../Advanced/Qr-Code-Generator/src/main.jsx | 9 ++ .../Advanced/Qr-Code-Generator/vite.config.js | 7 ++ React-JS-Projects/README.md | 1 + database/react.json | 5 + 11 files changed, 301 insertions(+) create mode 100644 React-JS-Projects/Advanced/Qr-Code-Generator/.eslintrc.cjs create mode 100644 React-JS-Projects/Advanced/Qr-Code-Generator/README.md create mode 100644 React-JS-Projects/Advanced/Qr-Code-Generator/index.html create mode 100644 React-JS-Projects/Advanced/Qr-Code-Generator/package.json create mode 100644 React-JS-Projects/Advanced/Qr-Code-Generator/screenshot.webp create mode 100644 React-JS-Projects/Advanced/Qr-Code-Generator/src/App.css create mode 100644 React-JS-Projects/Advanced/Qr-Code-Generator/src/App.jsx create mode 100644 React-JS-Projects/Advanced/Qr-Code-Generator/src/main.jsx create mode 100644 React-JS-Projects/Advanced/Qr-Code-Generator/vite.config.js diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/.eslintrc.cjs b/React-JS-Projects/Advanced/Qr-Code-Generator/.eslintrc.cjs new file mode 100644 index 00000000..3e212e1d --- /dev/null +++ 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 new file mode 100644 index 00000000..44028301 --- /dev/null +++ b/React-JS-Projects/Advanced/Qr-Code-Generator/README.md @@ -0,0 +1,69 @@ +

đŸ’Ĩ QR CODE GENERATOR đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![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) +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+ +

This project is a react.js project that generates QR code which can be downloaded when an URL of a website is entered.

+
+ + + + +## :zap: How to run it? 🕹ī¸ + + +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 📸 + + + + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Sai Manjari 👧

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

\ No newline at end of file diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/index.html b/React-JS-Projects/Advanced/Qr-Code-Generator/index.html new file mode 100644 index 00000000..0c589ecc --- /dev/null +++ b/React-JS-Projects/Advanced/Qr-Code-Generator/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/package.json b/React-JS-Projects/Advanced/Qr-Code-Generator/package.json new file mode 100644 index 00000000..137c6ab4 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..927b64764e135dae6d3cb50e6a6a0c475dc0c5a6 GIT binary patch literal 12156 zcmb7q18`=~_U#vav29ylY}=e@V%tt8*2K1LdnOaxwryu7esk~dzE}Txs`t8fb?rKJ zs?X`&d#&!hs#RqqC0&^T08I%|WesI+dCR{(vpVz|fCG77T6KRSh~zWd4L)rfl?Ci2 z?&&F3@wEHLE8<$GR7iK0UTu9b@-!(8Thf-sPYX{{7m{mDKTG^T7GG;5oN`DtdJ_PL z`e@IXyqp$c0WZNfNmcxcV!6B1#5!U%@$$-Td%v=GA&0Kd?v+-%_14Sc#-y=UZJivu zb@w@*61%OXZ=1w6myVN>Nn?t1>#dVxtx0EXMhra?>3+Is!oG6TsRK{NK4K?R8 zcId>mcP+BC;KVe|;(-AK*uGF}A+ER9therx0051rd4?Re>#g?dlAnYf3B}S0{q;9s zk%E+jzdtcXrz+%XW~FOXgpMqRW={$-E{6@x|2EGz{i@#|eRr(%xF6c6ojw#(8%cDP6}*3Kstom)0$Ies}M%mx$;j}0QRE}fhG zCaPK!8vT-WSHS5;BmPF}rm(hda4IWcS-8Hb68FYMgUWu~dPkg_x^?QQCL8lpa+kM_ zA*I%ZqBIAQyJfWrVg($K8uRqIT~D1ox!U?AONOt+9^xyYr*Zb<6aOisiD$jln$4r@q+uVqFL=${XX2|0N7nKh08jn|14oUO9zSk5 z2%Sojj7W@x-y4%;?{7LtRoe}Ywm9_^Ui)L^RTT3j?w0~TZ;Ah3O=itqgY#Ymxs|zL zsr*hr@0#ReUt7h8oTzv$3DI?B{?7Y?n9tyyU`TMluTnt!lbLPTtB#E}5Rxx@dj`{d zS#M7f=E8F#(lUlA=_&Wn!ObJlRN$!-u0f^NlJwOn}i=E^0S~ z_BR)DjMUeXSywnDndPmRc9N}AwAoCr-id#S?MSJvpoyL2ripT9R4P2JR~G78FxluN z?9*wKW3j~`eSI(ER7zv**u#z6TczM{EDvPgp>{eh@SL5!+Q}-~TfJ#B%yS|rk5#48 zKnrr&btNUioOO0qgX%y;QXLH-! z-${BO?w5iuA=B5%gIh-5>@${!i;9O;{8=?PxtAcoj6F@F*1@8gVeJ~K?~284hh-&O z^>srS@7|7^S9ECjPX!TEP^6Hw&T+cso~2ey01RWfKDO^_S*9W9tX9mrZA!@_s^hk@ zZyRIS_7lA(=(q|gbeVSFVG}N6`XXMF2YS_%12Bct#9*2UBky5JPbVaSsnMZyrY~14 zu}N}j9=`4Hou_LFanUV9t}DS?bnTEf_dpRZx{SK_2jUioD@Mnl={=g)lSkq0{Y z@ahiY9*PwZTlOV6Pi?Q9KnAGeH-CGQH?k2aogZXPxn(?K8}}MY!nSLqjgY&;ZTTtZ z9il>`Dt@H-j2pn7`6oJdX7ze@L_x?(j%zD~cu$2^|6l6O-j~McZCoF_*>?@%KMEue z@A2w?mF6T=twngSvAYjK6UA%Ua(H*8$C)V)S);A41^c``E!hHL7(`1?nLqo7l%-! zGK~zn%3noRd=vP1ir}{fN%EraB-;lX&?^I(9%w39W(DX9&8Uj%+B@DMRc&Yz_29jC zITZJ_epj@Eg+eDb=|N}q1qmOIwXDVuwFGD>=%fC` zobewwPRg!8IM|Gy+8|}#(~+u>q+{(*Gvy9+?LBe@75V@M2_Kl)WZoZ`A)8cgWTT$1|_SwU^t0k(>BC95iBSrG-Q zVc&PzkQ))ql#iUmDIgGrU2#B*xGR@6z|WIMO;dFOjGcy@@R@_7K&^^}@E6KKi!TFV z-TpG?At^iL366j?MI_WA>bljC(pU+d6R}?Rd$1C9jay{AOIjPkPpC-!>30|5uNHAj zy&}fCIrrktCTz;KdBX7%lXoNJ0pe7jPj|?9?pT2S);Ej%-4{DeBtoxz{A_fJT>#X9 zyH9&4t8(|ZvZdIK>jf^=%`mCa@O%-K*?2L&tQN?T^V~s;=2Mh9@I6eS!Va6UgrkC{ zA{Ll=6lY3P0)1axU-y_tXR`xG%&^(PeKHjL!0n8m{wzXvXJ3GDE~`6}aGxfO>muvl zXGm<|Ug3AW0wy9NAP}As5RUoLf+0ELYB_X{2&k>dQYtG!7-pgG!3Qk32b&WE(nd^0 z$c)owoD`&_#XreBB^9iRikE~-{MuMe$*B=VE0wvQ2Sa`o2-);4AuwSpRqHT^Um@>* zJKFOFKLrylG9w-(LsF)plb*{>FI#`8lZ&bNjOWy0Gx4bo7(DWeM8NIO!X;EGzqg1} zv|c*q!O!AV(Whm)M<8^tOofgMBOBPs(^#8nVV$v@zX4dnP=p;}DjPf04B0woYi*)d zkIhsIkA3GLQ;jyvu&nO6$|OTV!D+F}+eU4unCv0exaq4j;<}7rcmA0zAvN$ODb~Y< zthifcTcvFWfu!arY2yDNy2eoSt=6R5cfrO z&NaUgG@Mb*4#0(0&U}*>Hcp2S(Hrmw?rlDZ5yF-gaAsEAD{M_t+-Pp<*^tUgl;L)H zeX8G9AdGX4%!)eGN{*zfD=eTS$nVP&1}cSc)3Kw#HpUgUS&dt{lvM&u2|y&J&nPmq zs%R9~!E}9J;F56JTI?nu_Ni zl#QX;a4w;F#%SR=4HW(qshBh|^j&vU&>4py%h_S8)Eu9F% zzB=Mh8`^=R7o3ihk}W&x3ykzsr!3oXNKi<2W}F>4{*)>lb|PSdjdpY$Gg?zecRC_T zW}}@jJ7-M06M+|xF7_-zO>pV~6wT57s!K*Ii;S)nEl8Q3sNm6Uwb3O?XeQmJZ!l0L zA@#3}`_OoOfK{6(6f%@Ebu~Bel50KNG1}85JZ8(R<+-qhW#%MrwY`AD6?~y?!OEi; zeT^7C5g*JE`D#x*;)Ld!$%le*WX)ETLO;iym7Ksi(O2gDm&X83UYTLW0(V$O;DodX zL(YK@Y2$sj@i_T&S*t2YPKvH8Yid7_>5_NKqnWc)DwPIYn^AITaG`6d)tD1Lsct zt~f$U#e1vrQTOe`pZjRUf&Cd53t88tHlXBzjREVI%_t#ukv5S@ztv?xp$8R*(9`{A z@cC{T>D`-F@uVtAcCrH)BQm*2I|9xdW?DWHjL4!@ZMO(Kv$0k7RGdJzS*f^xFbM;( z7q6rDu)s0^z0UPUkLe*o43U%0I^kM`(+gg0^wiudLPNYTI&r>;=`X)3RGzAkr@*ob zzlz31$|*yKkZ>A59Ty}I;$zDy(#A`MRV2O{JC1;I+b{Uq3Fr{_(i#m0zwngW@A2`d z6?pq=0Kd9;hHAB+P6ly}0Rs_8Y99h{*Gk1~H?>a%#S~Mef!7$Wm^q>(TzMuWWXHA( zhYN+{qe3BKaH!BYGm9Ltt~9XOJi3!c9ts3ahf{x=ekCcQq6-F>ioC0qHT%bNig%>N zqYlq)!ktA!IOTQlPR)~ZF1RLX4D$pN+l9JHY73*t9xE^|QXZ>Sc93i!=R z`|UzQMs$RmL>w#|GLUrp^8@JNmc1t8LizG1hURtWr;lDAr+S2Pck*)A&XR8J!K9m| z6itbA!Wwu&8QZecJJ75}vmQ;^9>{1Q1+&m^!{E9{usle&Lrtktjv=c`Pf-**4*M4w z0VvFEG}xU4jzO)(gf4{3IChQVZE7P{`*%4y)bB=;FdV8JsCQ{oUJ>owmUN6Z?}&S` z9NFAH+~wdU&HWqb4Wygv~M%87=EPRTF1g7BgnQn+n3kx7=GnOig_;KM@ALWJ9@&LQ!?k=&tflDm zc1bfAi#x;n}gjCXEX(= zeBpP?L%MVNp{m7vkK43c;h&tJh7N>+sSH2(d%cR_lM4JtzsVAMFsnpi%Y5gGULU>K zn^{e45a4`@4aZdmD%H$Pb1!t_pdo?cwanY#*5%15_6DbQvsYP-3jNtM23xN+XGBEn zRw%T$&vAYGhvik!p~0Y)qzWHdX0(>`(`Dt#dgg&fNeP2WoPRcT5Wt{E3eiOwvzi$u zlo&v-wV{F4(}qLh7G^gFv8a=1JsylaDdOh{tKu)%CIz*+IiIpy@E zwk{HW{&JZUu9D$ZvB^fx73u`ny0~~M?v|(rtq#atK9WGcA+!3VfPl;j(nvo2uQ=j1x6pv50e1zq zo3ZA>sX^~xhMLJ7%NhZ_?y|Y3jqT~nJI<|@{8R1(c>Yug=;cIv_lk2)v%H;+w$!Ad zp|--UEz<^kl-6T(rE{n0)aIkbReZt0C!?en|IDX8cs{Sihjk_)Tzvn!*JN`Uv`0cN zBp5=3cMj@J>Z0!l+=rTQb^>?i39;iy**hE6);@v)^{G}ts`oi-X56Zd;A-%TEh;@q zp4M4eLu~@QMwMqXMaPsHw*1`Z%Rx z^YTrR3~UZWnReZ&DaF%La-Lm##BqOK1+M(!er)d5Y9g?yZ+SUre^otLMnj&sipQLH zwzzo2bK#XBj8l1iuNm2_uL^+7;QsVbeJ#JG$6;h6r=wmkF6UbZ$_~3N(?P zJNK=5!#c7h9TlkbrhxIylI;Fcd)S>y!5uco62g}SvQ48PeB#fmgv(WQKy;&tN6@Ct zrWwkP0sTxmM((WD{PKMeJv0(Qb`>D9A+lcDn*=LPj_$G)yn_^LQz()oL&a?-0BLv3 zoi9mz6-CJ4)6*(2&RTc<5Zi3Ysm7r|47m>?N|T+Ho=0q16JPcNNpnTZb$8b=AD%!& z)5n9!#wsCn4Pfb9Cu{_S4RmmLh}AhOG=$esA^_}0P~_zHF1n>(JxqFlx_Vx`>?$Kq zDwZ&})074VxBz8#ah0pnWGJJLLsrh%*^pb9T!&OeCEc8%ePvY9r80_#N!zSJP4O=Y zKKKH{AkP^>IEYKm>~3~o$fJ6n^V7ZwIC&Q*J}N+Q+!Uy`utLE?E%VuLw0FjuBdd{_ z_=8s&@739^_)CbeW1MsL=#E;uzbC~9Ku$AWl17P=ft)+`>|3{471RYn0gcWcx8~cs zHhxu&bGi?Vo~cl@t%#PjoOW%Uy6Z28A7;ss)T&@U` zR1}%SkVApAapU2Fhu%O)(jdoz&p8FPFHL~@&nYGkQ(w9(sHp_cya@jw&h_)3|Sr>=`34#`c8+RLh4-kz84X)c4P@M zN|SJq)ONcYZZlm3aQ*MRSlUNY#1lFa%nD%;jEAd4qdDeabZ%$yQ%3sR+92htM$#&B zW4GGi3co2FU{jeBKDXjRQUZ#knTo-Dx79PVX1vdj7p1vjRNu3<%JY12Q=!s6riNvH z>6P(%`jt9uozQ@e!|{$Y)*9NgYn>m~h_SX8j!zDJvUC$``{|`l73#HiQQ%YFo>~FJ zxlru|I$uusfeML-lz?E^zUYRj`z^Yw3X>+8v|g<^OfO}|^1_Gn2wP8ruOZh5Iy2+w>|L@m*?#9S~7dCdy*Z8$MY z+i;gV+ptA!YqD5i9&fYa){Ir}C`3r#!D%=TYg*5|T#u+8MV?`gy*kNq=!CKcoiYww zU^D5M*pC@p$8Ph*hp_}Ze07+?$O3zak*0+=T>@4&+AtcfNeJehT7nXofPntckcC14 zKh#T8PKNw`#}m61NQySwXA|t+wI8pkQ}-0%j--^b4_XYrCcE`*0!$&tjbrUx9yjeL zap+Z^Vt4-tv7#FmFtNNCn{SP5qg(f6nr*4GZ_v*NlZSJi4^V;;wFO%2(A;X`W5AGc zypCS2Bi**og0SHQT(B?Akd~ng>{KW^+GDOeVc1Ni9iucNy*4U$^&vDEoRS?SyU(_3 z|1>5HKgJ-@f#>GHX;ZpxJs@1MwP-Sr@E65vk-X9(+3SjNTeepZ_)N6gEG`}-oN|!9)}1#%-`mK z$LU!(=KyYWmi1Uo%(db>Fznqe8=$yU0n)*BzGovJMsc)peK!e2xV2xPbxg?CRZ{gi zI_yBoe2Yy$nX-(_9I=jHX^|J2X$wmCxLc_EWgf1YySSrf!d2=u&|ue8>^m3zVjt`M ztx-GU=>5@c7qZeaqLBl);)~D5o!Hj%#ICqT_6<&|r+$!(Cw(UjbsAJ?dl|T$b4)_9 zXb3<56XXq{hQJS6nPOGZB>KnVr5-Kz90{DKWfW4Bh^sHrKwI@a@-yOBw8S^6&ehT1 z#Mlxyo}FiE_DbfcqIipVf}40SId)+On6BS^wDJ1DDd-g&C*i-K)X}iJ!CSX|@wvG2 zLnwpi3EO~as7Kkz^Y2g=e@K22j4Kb?kS+;1nxZ5vA7q}MBSFK|MZ3twm^EWdjh+UX z4eDe>l}62A1}x-z4JJxcnBk4(E9bEJXayYiO>EtJrcM+wf>Dg*l-bA5Pv(k#j0kjK^ngCv4Tkm1*N zVEjnOdN20l0ryiW(ytW15`FN(cr3$>g?RM4!S83^C{l!VSKeri%cnNp?YQn3QXrwp zXQIaNu?F6cQe{KW7$@Be?sLyvoD!e{7j{3=ucO7~H}gct#6!ur#j2y8gzG7GcKVKZ z!tKSj(G`z2erIPS$dpR8%UdEBt=y&%CmL-P{t%7uJcFERhz0p!au>r0kk6>Ud->CXPMcMWRr3oS1FR-4bTH z&+))y5hq<0hm*gor!Z%DG%@Ivg|MAhqd1*7PF*$Lybl-QUQTrol;xi-4L#b+i$19l zsCtBo-kV+#S8;gg%WFCMezZ z(}pOfxDzMK;j0aM<=B3Jd|hB8{t9M>EDS*vYNT5yUI)%A?-f^bfUA*X<6Y8#p{&wbMU;nUL-GCyGYaxiM&=w5#}S7*(Udb8v>{wW!cZ6$QIJ z_$tlF4R4JLW8$?+Y4d_BZjoO2%I>RahTxwaBQ|fwssIxWoQd3}2V&lG{im6p#sa*b zM*ba~4hFK)>k z?^;u9PeBe&AG6oArB6|uTQA$RKd(XOWcJ_k*)*9CYwE)9RD2yj)Ih`ssL{`buaX~I zC#k8XHeWJIqoAO`w66)h#s+$WTZ{NDt`f6FW4h>ClBFj^t#M$K3U`}rFV(RQU0D7{=9ay09W|93}8$O1t<}uKe?D*k2q8jJ!vZ712G$?sstn z{=1EbCg^a@apqu%rS1!f1Q!~6&!HQp#O&ne@zE8V+kMN#>Ul}lY4K*iImboiL(jWg z&D-3>^|3zgZ=0oa4*Q*(cCOTAX~$=X`>qR5nd4NAszc&m_U|BEIU~OQY?j|+qYkbF z_kof04!nBR53MJ8+nJKGZj@4VEK-g994a1xPEk$G!I1u=`CaE+o_B6)WczS2 z3t=(_cW3UL^PJlR-xqm@iD(o+({X4_iG+d=bu*xJs&Av$QfsN{)Y~&K=F(#I;#T=X zp4S3VuDQ!R!m>gtCB0rGyPpGqT#PniG*W~Z`%%+Ux#X}w7u&}D3l3HB$F5+#JMOh? zigxO43V$rRHfuSjr&3x5+LUjwln*Bd9^I0ghrWo=uq55O9aZERB)h0fEWztdDke#$ z6h-VXS~a#h;Ni4+)2oppAw_EeyI$igThtsSCEPS5(kRA1#B|AJv&eDby}N%AWno$7 zUgabhvwH)Nqe^Zzq{@^9!fmFA*gD454f2NE-bmeUr-pGd`D;45;`Wu4VQx<-G zg(q_bS#V|EKs5Q$Obx#AIl-w!(4c|q%z~TH;Y?1lLL$N-1S&gm2T{KS8-}zqVF)v< zW5`Smk+DstRpX8Y}a(JI>kjz~CKL{YHCh{((_&dB!0tRtc-L;;WC-X={}qQ3WQ}glAYLJ)=e-->OUT zIU-!~sPMS3_=P$G7jpha}%h9QjtoiF(}>n2JuTDwEZO15=wo}sGYk$p{ij)lm_%8}hbg|eKC>9AaZC47b-6x*_FbJzWFUz?G&mLVv< z5{OY2+5f{Ur5GD_>ea6uC^?77Vv^A431Wmg(hs56jrz#JK-lWn@YsDE%nLHS=tx0w zz1Zkj_#Tp^xt?0E=+=k@ZWLLIdkCl>gZ_W{=55${{_&9~s#E?!8^hUULc9lD0hbDW zW~MRV7bpm<(QXz2nzASL?V_ww zeXX?&(0lB1iSJR_3F@vq!;?G8E+l&Y4!F<vrDLxY-R8;B zh*$YrdQD95i99q%Kn|7~AyeT#{yeNZE@Dm&g% ztv>U#o4$#EB7({9s%q5BdNwT;WsHs)M?XtOh3HKBA9;s1(P>axw2O#!6NSGd)F?L{ zTO0f6d_h#Gm}i3_K&18-lOPZbfo>OC8p0C+TG$u@ni8Hu-%)u!-8MNJoz-8?wL`xj zF?_Xx)uJ618^;vut5|eJ{`Wwo&TDQOL6W+C5;fU>Qr-V+KSek-i%PbPU)wq)tz2cRFR5vZMhlf&MBSg)&W5; zg&moPdS!}5bz&RspLq}Jv9@rkBC;frdl)(q6^m+l|Kx1u!BIM`qw8#&ntB#NwMr~kmP5J2m_d=8zh7Z0G zu#E(r>b_8~;?Hz|x{9fdfGGCQz>+e zG92byw6gyhCkY+R9NSWJ2F`=@H6|*d2H^-nONSFzb0u`}s&Vw9gQxl)W+LUGZASxTH_7w_#3-A#bqAKARC@{X-Rr1IBD( zVm>`|_{qs1I~D;pzvpyoqJO{`IWIuGU10*6#u&&;(iT=IGIud7Q#Dfi8`Yp^+SPMZlSNik5Y<2{xT z1eIcC1V2G1Cp)D4zuBYG+-Ag-8m&TI?FZd{J19Jn(WRup6)gwn+EC9;Gc?1VzyX3FSMK*!;NeS5jZum;c#0mfGhpT98~;f4AOH}Hzg@` zjAO%pwyi%(f#^1?h`d_Irg5UpP%b(hu#(u&!Nz7ptn+&C=ZdK}#Ka^x%|tnyyx~kW zG;Z1ub3*YFq|98w+u-fBeJKASrBoZI?M7`|alrk~1x8@9GOTVzPeF&h{ zZz$~}w?+pUt!c;Ak#kHj_aI5INY4&josnFL(dPdGe9K|FZ;>rqsb1+|W%dfkK4&v< z{+k#-+TJMxN>1V3eI<%w3h33SV|Bn}10&M13Lc36wIEr2X!-uy+%R=lDkDD`ideKO z4DFL@elTSJkK1gtf6JQx<@}EUS?lhsSH4E{t-yL3HLNn`Cr+jNuxb99bEcBV%5VW? zZbscMp{YwT(3}t&-zENUm)>$~Hvwj5=le?0b&Ky}sO|73$(8LiA@aBT1BLJAp$XqpaAJPZarau>#jrIAmDj(mM;yk>cP?P-;(gHT&`KhvPY)m%k}S(SeD4W zP4g!6zpT4t#+wp}()sY}BkK68b`Cnh9L({rB&)4j?R96BA%8DP4grXqjxtjKiy-&R z%}gwQ_0@mEuyjj@4S*r3MJmS`3#<1k0s{?4JM9FuaT$XYil**s=~E&;!XYO4@}|8# zM;h!Z{)!6`Bt*r{D^A`FSibh6f3|#yn=|n*o8l~?~!6L#XZd~eB zW}iJaI6vs}pl2m367956H`d&EL+QkD@Pc+qbz;(E6XQkz0I7Ng0yd*JH8{^Y1q)Q*>Rg4s(drt|Xpk&7o)0rZ-LZe>*=zg>=9Zq`1(U0`uA-oN(7xXE z9zDL~3OgbR+aWZdkyJ_}afh852BC<^Cz>H#7*+YlD{6z+>u8LN_!6Px^(0bA7?qkP zZT-#&(;-_Bve$OLfSn=57+eJkBp$Ew8NYw!lAF&kh+IUwB@Q?x`LRmZpa_v@*1Y50 zb+f;J=KB$_VZ;q-UnT3_e@>qQjbARCS`{Dz1$=tYW#A7KP!60YYtZpTB!=i4Vj8*a zKmLOUIyR?0?56SGr(zc`{ju--A_=c)#;D`=8MigF23n2`75cc92i6}IXP z*mp`gO7(KkAJ5B#Xh(+B2YxOIL)B22!J#%9q1Q)Gk0Z(aLYLME^E9v@GoUIfKoIMy z3ixfKXg;XfDku1-1f^h63G(=+>A*%dnGb5b{35KELPk5(J%wBGmBDJ>o;lyO5@zGx zL<%+tuY(vsRMb1v2FOI|?yAs0Cv)_xRzj)`yt?oBD*@U!;WjMb3`_q@Xl7MwFonA` zaLZ=zp8(KqEDE!UE1*$Y{ZWv1Fk*!BzcVI6KS4ONh=QX%{Z0Ur< zAEHs>d+3a`9!CA=#AAV8$ZMyoer$|*4tcDy$sw-MwuiR(&ItBp-m-q;dqGVC(bIcZ zg { + 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 ( +
+

QR Code Generator

+
+
+
+ + +
+
+
Background Color:
+ { setBgColor(e.target.value.substring(1)) }} + /> +
Dimension:
+ { setSize(e.target.value) }} + /> +
+
+
+
+ + {showDownloadButton && qrCode && ( // Conditionally render the download button + + )} +
+
+ ); +} + +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 new file mode 100644 index 00000000..51a8c582 --- /dev/null +++ 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( + + + , +) diff --git a/React-JS-Projects/Advanced/Qr-Code-Generator/vite.config.js b/React-JS-Projects/Advanced/Qr-Code-Generator/vite.config.js new file mode 100644 index 00000000..5a33944a --- /dev/null +++ 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 index 5e185633..e2e20b9f 100644 --- 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) | diff --git a/database/react.json b/database/react.json index f54b8c39..f9406e5b 100644 --- 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",