diff --git a/Components/Forms/QR-Code-Generator-Form/index.html b/Components/Forms/QR-Code-Generator-Form/index.html
new file mode 100644
index 00000000..8020e99f
--- /dev/null
+++ b/Components/Forms/QR-Code-Generator-Form/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+ QR Code Generator Form
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Components/Forms/QR-Code-Generator-Form/main.css b/Components/Forms/QR-Code-Generator-Form/main.css
new file mode 100644
index 00000000..22fcffea
--- /dev/null
+++ b/Components/Forms/QR-Code-Generator-Form/main.css
@@ -0,0 +1,100 @@
+:root{
+ background: linear-gradient(45deg, #010758, #490d61);
+ --primary-color: #403d84;
+ --border-radius: 8px;
+ --secondary-color: #fff;
+ --border-color: #7fb7c9;
+}
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: sans-serif;
+}
+
+body{
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--bcg-color);
+}
+
+.box{
+ background-color: var(--primary-color);
+ padding: 30px;
+ width: 400px;
+ border-radius: var(--border-radius);
+}
+
+.qr-header h1{
+ font-size: 26px;
+ text-align: center;
+ color: var(--secondary-color);
+ margin-bottom: 24px;
+ text-transform: uppercase;
+}
+
+.qr-header input{
+ width: 100%;
+ margin-block: 12px;
+}
+
+.qr-header input, select{
+ padding: 8px;
+ border-radius: var(--border-radius);
+ font-size: 18px;
+ outline: none;
+ border: 2px solid var(--border-color);
+}
+
+.qr-header label{
+ color: var(--secondary-color);
+ font-size: 20px;
+}
+
+.qr-header div{
+ display: flex;
+ justify-content: space-between;
+}
+
+.qr-footer{
+ display: flex;
+ justify-content: center;
+}
+.qr-footer a{
+ background-color: var(--secondary-color);
+ text-decoration: none;
+ font-size: 20px;
+ padding: 14px 36px;
+ margin-inline: 2px;
+ color: var(--primary-color);
+ font-weight: 600;
+ border-radius: var(--border-radius);
+}
+
+.qr-body{
+ display: grid;
+ place-items: center;
+ padding:20px;
+}
+
+.qr-body img{
+ max-width: 100%;
+ max-height: 100%;
+ margin-block: 10px;
+ padding: 20px;
+ border: 0.5px solid var(--border-color);
+ border-radius: var(--border-radius);
+}
+
+@media screen and (max-width:520px){
+ .box{
+ width: 80%;
+ }
+ .qr-footer a{
+ padding: 12px;
+ font-size: 16px;
+ }
+}
diff --git a/Components/Forms/QR-Code-Generator-Form/script.js b/Components/Forms/QR-Code-Generator-Form/script.js
new file mode 100644
index 00000000..8e5c9dc5
--- /dev/null
+++ b/Components/Forms/QR-Code-Generator-Form/script.js
@@ -0,0 +1,42 @@
+const qrText = document.getElementById('qr-text');
+const sizes = document.getElementById('sizes');
+const generateBtn = document.getElementById('generateBtn');
+const downloadBtn = document.getElementById('downloadBtn');
+const qrContainer = document.querySelector('.qr-body');
+
+let size = sizes.value;
+generateBtn.addEventListener('click',(e)=>{
+ e.preventDefault();
+ isEmptyInput();
+});
+
+sizes.addEventListener('change',(e)=>{
+ size = e.target.value;
+ isEmptyInput();
+});
+
+downloadBtn.addEventListener('click', ()=>{
+ let img = document.querySelector('.qr-body img');
+
+ if(img !== null){
+ let imgAtrr = img.getAttribute('src');
+ downloadBtn.setAttribute("href", imgAtrr);
+ }
+ else{
+ downloadBtn.setAttribute("href", `${document.querySelector('canvas').toDataURL()}`);
+ }
+});
+
+function isEmptyInput(){
+ qrText.value.length > 0 ? generateQRCode() : alert("Enter the text or URL to generate your QR code");;
+}
+function generateQRCode(){
+ qrContainer.innerHTML = "";
+ new QRCode(qrContainer, {
+ text:qrText.value,
+ height:size,
+ width:size,
+ colorLight:"#fff",
+ colorDark:"#000",
+ });
+}
diff --git a/Components/Forms/Text-To-Voice-Form/index.html b/Components/Forms/Text-To-Voice-Form/index.html
new file mode 100644
index 00000000..2345629e
--- /dev/null
+++ b/Components/Forms/Text-To-Voice-Form/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+ Text To Voice Form
+
+
+
+
+
+
+
+
+
+
diff --git a/Components/Forms/Text-To-Voice-Form/main.js b/Components/Forms/Text-To-Voice-Form/main.js
new file mode 100644
index 00000000..cd226f22
--- /dev/null
+++ b/Components/Forms/Text-To-Voice-Form/main.js
@@ -0,0 +1,57 @@
+const textarea = document.querySelector("textarea"),
+voiceList = document.querySelector("select"),
+speechBtn = document.querySelector("button");
+
+let synth = speechSynthesis,
+isSpeaking = true;
+
+voices();
+
+function voices(){
+ for(let voice of synth.getVoices()){
+ let selected = voice.name === "Google US English" ? "selected" : "";
+ let option = ``;
+ voiceList.insertAdjacentHTML("beforeend", option);
+ }
+}
+
+synth.addEventListener("voiceschanged", voices);
+
+function textToSpeech(text){
+ let utterance = new SpeechSynthesisUtterance(text);
+ for(let voice of synth.getVoices()){
+ if(voice.name === voiceList.value){
+ utterance.voice = voice;
+ }
+ }
+ synth.speak(utterance);
+}
+
+speechBtn.addEventListener("click", e =>{
+ e.preventDefault();
+ if(textarea.value !== ""){
+ if(!synth.speaking){
+ textToSpeech(textarea.value);
+ }
+ if(textarea.value.length > 80){
+ setInterval(()=>{
+ if(!synth.speaking && !isSpeaking){
+ isSpeaking = true;
+ speechBtn.innerText = "Convert To Speech";
+ }else{
+ }
+ }, 500);
+ if(isSpeaking){
+ synth.resume();
+ isSpeaking = false;
+ speechBtn.innerText = "Pause Speech";
+ }else{
+ synth.pause();
+ isSpeaking = true;
+ speechBtn.innerText = "Resume Speech";
+ }
+ }else{
+ speechBtn.innerText = "Convert To Speech";
+ }
+ }
+});
\ No newline at end of file
diff --git a/Components/Forms/Text-To-Voice-Form/style.css b/Components/Forms/Text-To-Voice-Form/style.css
new file mode 100644
index 00000000..79885024
--- /dev/null
+++ b/Components/Forms/Text-To-Voice-Form/style.css
@@ -0,0 +1,107 @@
+/* Import Google Font - Poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+}
+body{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: linear-gradient(45deg, #010758, #490d61);
+}
+::selection{
+ color: #fff;
+ background: #5256AD;
+}
+
+.wrapper{
+ width: 370px;
+ padding: 25px 30px;
+ border-radius: 7px;
+ background: #fff;
+ box-shadow: 7px 7px 30px rgba(209, 203, 203, 0.745)
+}
+.wrapper header{
+ font-size: 28px;
+ font-weight: 500;
+ text-align: center;
+}
+.wrapper form{
+ margin: 35px 0 20px;
+}
+form .row{
+ display: flex;
+ margin-bottom: 20px;
+ flex-direction: column;
+}
+form .row label{
+ font-size: 18px;
+ margin-bottom: 5px;
+}
+form .row:nth-child(2) label{
+ font-size: 17px;
+}
+form :where(textarea, select, button){
+ outline: none;
+ width: 100%;
+ height: 100%;
+ border: none;
+ border-radius: 5px;
+}
+form .row textarea{
+ resize: none;
+ height: 110px;
+ font-size: 15px;
+ padding: 8px 10px;
+ border: 1px solid #999;
+}
+form .row textarea::-webkit-scrollbar{
+ width: 0px;
+}
+form .row .outer{
+ height: 47px;
+ display: flex;
+ padding: 0 10px;
+ align-items: center;
+ border-radius: 5px;
+ justify-content: center;
+ border: 1px solid #999;
+}
+form .row select{
+ font-size: 14px;
+ background: none;
+}
+form .row select::-webkit-scrollbar{
+ width: 8px;
+}
+form .row select::-webkit-scrollbar-track{
+ background: #fff;
+}
+form .row select::-webkit-scrollbar-thumb{
+ background: #888;
+ border-radius: 8px;
+ border-right: 2px solid #ffffff;
+}
+form button{
+ height: 52px;
+ color: #fff;
+ font-size: 17px;
+ cursor: pointer;
+ margin-top: 10px;
+ background: #675AFE;
+ transition: 0.3s ease;
+}
+form button:hover{
+ background: #4534fe;
+}
+
+@media(max-width: 400px){
+ .wrapper{
+ max-width: 345px;
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html
index 21fe30d6..a24d9947 100644
--- a/assets/html_files/forms.html
+++ b/assets/html_files/forms.html
@@ -326,6 +326,32 @@ Newsletter Subscription-2 Form
+
+
Text To Voice Form
+
+
+
+
QR Code Generator Form
+
+
+
+
+ 
+
+