How to build a QR code generator app using JavaScript and React.js

QR code generator:- A app that allows users to create QR codes by entering desired information, such as text, URLs click for demo

QR code generator using JavaScript Dom manipulation and web API:- api.qrserver.com.

<div>
    <h1>QR Code Generator</h1>
    <label for="text-input">Enter text or URL:</label>
    <input type="text" id="text-input" placeholder="Enter text or URL">
    <button onclick="generateQRCode()">Generate QR Code</button>
    <div id="qr-code"></div>
    <p id="input-value"></p>
</div>

 function generateQRCode() {
      var textInput = document.getElementById('text-input').value;
      var qrCodeContainer = document.getElementById('qr-code');
      var inputValueParagraph = document.getElementById('input-value');
      
      // Check if the input field is empty
      if (textInput.trim() === '') {
        alert('Please enter text or URL before generating QR code.');
        return;
      }

      // Clear existing QR code and input value
      qrCodeContainer.innerHTML = '';
      inputValueParagraph.textContent = '';

      // Generate QR code using API
      var apiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${textInput}`;
      var img = document.createElement('img');
      img.src = apiUrl;
      qrCodeContainer.appendChild(img);

      // Display input value below the QR code
      inputValueParagraph.textContent = textInput;
    }

QR code generator using React.js and web API:- api.qrserver.com.

import React, { useState } from 'react';

const QRCodeGenerator = () => {
  const [textInput, setTextInput] = useState('');
  const [qrCode, setQRCode] = useState('');

  const generateQRCode = () => {
    // Check if the input field is empty
    if (textInput.trim() === '') {
      alert('Please enter text or URL before generating QR code.');
      return;
    }

    // Generate QR code using API
    const apiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${textInput}`;
    setQRCode(apiUrl);
  };

  return (
    <div>
      <h1>QR Code Generator</h1>
      <label htmlFor="text-input">Enter text or URL:</label>
      <input
        type="text"
        id="text-input"
        placeholder="Enter text or URL"
        value={textInput}
        onChange={(e) => setTextInput(e.target.value)}
      />
      <button onClick={generateQRCode}>Generate QR Code</button>
      <div>
        {qrCode && <img src={qrCode} alt="QR Code" />}//qr image at intial load
      </div>
      <p >{textInput}</p>
    </div>
  );
};

export default QRCodeGenerator;