ホームページ > 記事 > ウェブフロントエンド > QR コード生成 Web サイトを構築する
開発者の皆さん、こんにちは!私の最新プロジェクト、QR コード ジェネレーター を紹介できることを嬉しく思います。このプロジェクトは、ユーザー入力に基づいて QR コードを動的に生成する方法に焦点を当て、JavaScript を詳しく学ぶのに最適な方法です。 Web 開発が初めての方でも、JavaScript のスキルを向上させたいと考えている方でも、この QR コード ジェネレーター プロジェクトは、何か役に立つものを学び、作成する絶好の機会です。
QR コード ジェネレーター は、ユーザーが任意のテキスト入力から QR コードを生成できる Web ベースのアプリケーションです。このプロジェクトでは、シンプルでインタラクティブなユーザー インターフェイスを作成し、サードパーティ API を統合し、ユーザー入力を効果的に処理する方法を示します。
プロジェクトの構造を簡単に見てみましょう:
QR-Code-Generator/ ├── index.html ├── style.css └── script.js
プロジェクトを開始するには、次の手順に従います:
リポジトリのクローンを作成します:
git clone https://github.com/abhishekgurjar-in/QR-Code-Generator.git
プロジェクト ディレクトリを開きます:
cd QR-Code-Generator
プロジェクトを実行します:
index.html ファイルは、QR コードを生成するための入力フィールドやボタンなど、QR コード ジェネレーターの基本構造を提供します。スニペットは次のとおりです:
8b05045a5be5764f313ed5b9168a17e6 49099650ebdc5f3125501fa170048923 93f0f5c25f18dab9d176bd4f6de5d30e 7c8d9f814bcad6a1d7abe4eda5f773e5 26faf3d1af674280d03ba217d87e9421 b2386ffb911b14667cb8f0f91ea547a7QR Code Generator6e916e0f7d1e588d4f442bf645aedb2f af75c476cdb7e6c074ca6da9b40841de 90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 4883ec0eb33c31828b7c767c806e14c7 8f9e4409b06fde1ff1d3a80f075ca0ed ae3978a23ba5cac816877cfe5cac86ec 4a249f0d628e2318394fd9b75b4636b1QR Code Generator473f0a7621bec819994bb5020d29372a e388a4556c0f65e1904146cc1a846beePaste text to create QR Code94b3e26ee717c64999d7867364b1b4a3 4d7ab0de9a42de71c682b0860bad1410 29e7d50c7ce157315e3900dfb0a4e328 306e6e849fa473d073ec3b364ee18ebd 01dc540c80e3b84203baf3b36f95a497Generate QR Code65281c5ac262bf6d81768915a4a77ac0 f5a47148e367a6035fd7a2faa965022e 28803f9c269550d42ecee4b94492a2e0 d7182983f39e1ed4f55567871920d692 4d7ab0de9a42de71c682b0860bad1410 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 ffd6ba4147bda351239915f463e46e38 e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
style.css ファイルは QR コード ジェネレーターのスタイルを設定し、モダンで使いやすいレイアウトを提供します。以下にいくつかの主要なスタイルを示します:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap"); :root { --primary: #47185c; --primary-dark: #14001d; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-family: "Poppins", sans-serif; } body { background-color: var(--primary); } .container { display: grid; place-items: center; height: 80vh; } .box { padding: 20px; width: 400px; background-color: white; } .upper h1 { font-size: 32px; font-weight: 400; line-height: 32px; } form { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; } form input { width: 100%; height: 40px; padding: 10px 15px; } form button { width: 100%; height: 40px; padding: 10px 15px; background-color: var(--primary); border: none; color: white; opacity: 0.9; transition: 0.3s ease-in; } .qr_container { border: 1px solid var(--primary); display: flex; justify-content: center; height: 0; opacity: 0; transition: opacity 0.3s ease-in, height 0.1s ease; } .qr_container.show { padding: 10px; height: 150px; opacity: 1; } .qr_container img { height: 100%; } .footer { color: white; margin: 50px; text-align: center; }
script.js ファイルは、QR コードを生成し、ユーザー インタラクションを処理するためのロジックを管理します。スニペットは次のとおりです:
const qrFormEl = document.getElementById("qrForm"); const qrImageEl = document.getElementById("qrImage"); const qrContainerEl = document.getElementById("qrContainer"); const qrInputTextEl = document.getElementById("qrInputText"); const generateBtnEl = document.getElementById("generateBtn"); const renderQRCode = (url) => { if (!url) return; generateBtnEl.innerText = "Generating QR Code..."; qrImageEl.src = url; qrImageEl.addEventListener("load", () => { qrContainerEl.classList.add("show"); generateBtnEl.innerText = "Generate QR Code"; }); }; qrFormEl.addEventListener("submit", (event) => { event.preventDefault(); const formData = new FormData(qrFormEl); const text = formData.get("qrText"); const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${text}`; renderQRCode(qrCodeUrl); }); qrInputTextEl.addEventListener("keyup", () => { if (!qrInputTextEl.value.trim()) { qrContainerEl.classList.remove("show"); } });
ここで QR コード ジェネレーターのライブ デモをチェックできます。
この QR コード ジェネレーターの構築は楽しくて勉強になる経験で、JavaScript と API を操作して動的な Web アプリケーションを作成する方法をより深く理解するのに役立ちました。このプロジェクトが、あなたも JavaScript で何か素晴らしいものを構築するきっかけとなることを願っています。コーディングを楽しんでください!
このプロジェクトは、JavaScript とユーザー インタラクションに焦点を当て、Web 開発スキルを向上させる私の旅の一環として開発されました。
以上がQR コード生成 Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。