So I'm working on a college project with my group and we decided to make a QR code generator with some faciltites here and there. The problem is that the HTML part was made by someone else and I'm unable to understnad why it won't run. The webpage opens nicely but it doesn't generate the QR.
This is the front-end code:
tailwind.config = { theme: { extend: { fontFamily: { sans: ['Poppins', 'sans-serif'], }, }, },};function updateInputFields() { const selectValue = document.getElementById("select").value; const urlInput = document.getElementById("url"); // Update input fields based on select value switch (selectValue) { case "url": urlInput.setAttribute("id", "url"); urlInput.setAttribute("placeholder", "Enter a URL"); urlInput.setAttribute("type", "url"); urlInput.setAttribute("name", "url"); break; case "text": urlInput.setAttribute("id", "url"); urlInput.setAttribute("placeholder", "Enter text"); urlInput.setAttribute("type", "text"); urlInput.setAttribute("name", "text"); break; case "email": urlInput.setAttribute("id", "url"); urlInput.setAttribute("placeholder", "Enter email"); urlInput.setAttribute("type", "email"); urlInput.setAttribute("name", "email"); break; case "sms": urlInput.setAttribute("id", "url"); urlInput.setAttribute("placeholder", "Enter SMS"); urlInput.setAttribute("type", "textbox"); urlInput.setAttribute("name", "sms"); break; case "phone": urlInput.setAttribute("id", "url"); urlInput.setAttribute("placeholder", "Enter phone number"); urlInput.setAttribute("type", "number"); urlInput.setAttribute("name", "phone"); break; case "wifi": urlInput.setAttribute("id", "url"); urlInput.setAttribute("placeholder", "Enter WIFI details"); urlInput.setAttribute("type", "text"); urlInput.setAttribute("name", "wifi"); break; case "youtube": urlInput.setAttribute("id", "url"); urlInput.setAttribute("placeholder", "Enter YouTube URL"); urlInput.setAttribute("type", "url"); urlInput.setAttribute("name", "youtube"); break; case "twitter": urlInput.setAttribute("id", "url"); urlInput.setAttribute("placeholder", "Enter Twitter URL"); urlInput.setAttribute("type", "url"); urlInput.setAttribute("name", "twitter"); break; default: break; }}.generated { width: 1000px; height: 1000px;}.body { height: 3000px;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" /><script src="https://cdn.tailwindcss.com"></script><script></script><title>QR CODE GENERATOR</title></head><body><header class="bg-blue-500 p-4 mb-10"><div class="max-w-5xl m-auto"><div class="text-xl font-bold text-white"> QR CODE GENERATOR </div></div></header><main><div class="flex flex-col-reverse align-center justify-center p-10 m-auto md:max-w-4xl md:flex-row"><div class="w-full md:w-2/3 mr-24"><h1 class="text-3xl font-bold mb-5 md:text-4xl">QR Code Generator</h1><p class="mb-4"> QR Codes allow smartphone users to access your website simply and quickly.</p><p> Enter your URL below to generate a QR Code and Download the image.</p><form id="generate-form" class="mt-4" action="/" method="post"><select id="select" name='type' class="w-full border-2 border-gray-200 rounded p-3 text-gray-dark mr-2 focus:outline-none" onchange="updateInputFields()"><option value="url" selected>URL</option><option value="text">Text</option><option value="email">E-Mail</option><option value="sms">SMS</option><option value="phone">Phone Number</option><option value="wifi">WIFI</option><option value="youtube">Youtube</option><option value="twitter">Twitter</option></select><input id="url" type="url" placeholder="Enter a URL" class="w-full border-2 border-gray-200 rounded p-3 text-gray-dark mr-2 focus:outline-none mb-5" name="typetext" value="" /><select id="size" name='size' class="w-full border-2 border-gray-200 rounded p-3 text-gray-dark mr-2 focus:outline-none"><option value="100">100x100</option><option value="200">200x200</option><option value="300" selected>300x300</option><option value="400">400x400</option><option value="500">500x500</option><option value="600">600x600</option><option value="700">700x700</option></select><button class="bg-gray-600 rounded w-full text-white py-3 px-4 mt-5 hover:bg-black" type="submit"> Generate QR Code</button></form></div><div class="w-full md:w-1/3 self-center"><img src="{{url_for('static', filename='image1.png')}}"></div></div><!--Generated QR Code--><div id="generated" class="max-w-5xl m-auto flex flex-col text-center align-center justify-center mt-20"><!--QR Code Output--><div id="qrcode" class="m-auto"><img src="{{data}}" alt=""></div></div></main><!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> --></body></html>and this is the python code I tried to make after looking at it
from flask import Flask, render_template, requestimport qrcodefrom io import BytesIOfrom base64 import b64encodeapp = Flask(__name__)@app.route('/')def home(): return render_template('index.html')@app.route('/', methods=['POST'])def genQR(): memory = BytesIO() type = request.form.get('type') match type: case "url": data = request.form.get('url') case "text": data = request.form.get('text') case "email": data = request.form.get('email') case "sms": data = request.form.get('sms') case "phone": data = request.form.get('phone') case "wifi": data = request.form.get('wifi') case "youtube": data = request.form.get('youtube') case "twitter": data = request.form.get('twitter') size = int(request.form.get('size')) img = qrcode.make(data) img.save(memory) memory.seek(0) base64_img = "data:image/png;base64,"+ b64encode(memory.getvalue()).decode('ascii') return render_template('index.html', data='base64_img')if __name__== '__main__': app.run(debug=True)p.s. my code is still incomplete (haven't started working on the size part) but I believe it has the necessary codes to give the output
I tried various ways and even checked youtube. I don't have much knowledge about tailwind css so thats an issue too.