Create WiFi Card Generator Using HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to create a WiFi card generator with QR code functionality using HTML, CSS, and JavaScript.

Join us on Telegram
create-wifi-card-generator-using-html-css-and-javascript.webp
Read Alsohow to create a responsive navbar with hamburger menu using html, css and javascript.pngHow to Create a Responsive Navbar with Hamburger Menu Using HTML, CSS and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Creating a WiFi card generator is a fun and useful project to learn HTML, CSS, and JavaScript. It allows you to quickly generate WiFi QR codes that users can scan to connect to a network without entering details manually.

This project is perfect for beginners who want to explore web development and learn how JavaScript interacts with QR code libraries. By the end of this guide, you'll have a fully functional WiFi card generator with a sleek design.

Prerequisites

Before starting, ensure you have the following:

  1. Basic knowledge of HTML, CSS, and JavaScript.
  2. A text editor like Visual Studio Code.
  3. QRious library: This library simplifies QR code generation.

Source Code

Step 1 (HTML Code):

Write the basic HTML structure to create input fields, buttons, and a container for the QR code.

Here's a breakdown of its structure and components:

1. Basic Structure

  • <!DOCTYPE html>: Declares the document type as HTML5.
  • <html lang="en">: Sets the language of the document to English.
  • <head> Section: Contains metadata and linked resources.
    • <meta charset="UTF-8">: Specifies the character encoding as UTF-8.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive on all devices.
    • <title>: Defines the title of the page as "WiFi Card Generator."
    • <link rel="stylesheet" href="styles.css">: Links an external CSS file for styling.
  • <body> Section: Contains the main content displayed to the user.

2. Main Content

Container

  • <div class="main-container">: Acts as a wrapper for the page content to help with layout and styling.

Card

  • <div class="card">: Represents the primary content box (like a card design).

Title and Subtitle

  • <h1 class="title">WiFi Card Generator</h1>: Displays the main title of the page.
  • <p class="subtitle">Create and share your WiFi credentials effortlessly</p>: Provides a brief description of the page's purpose.

3. Form for Input

  • <div class="form">: Contains the input fields for user data.

Form Groups

Each form group has a label and a corresponding input field for collecting user data:

  1. WiFi Name (SSID):
    • <label for="wifi-name">: Label for the WiFi name input field.
    • <input type="text" id="wifi-name" placeholder="Enter WiFi name">: Input field for the WiFi name.
  2. Password:
    • <label for="wifi-password">: Label for the password input field.
    • <input type="password" id="wifi-password" placeholder="Enter WiFi password">: Input field for the password.
  3. Encryption Type:
    • <label for="encryption-type">: Label for the encryption type selection.
    • <select id="encryption-type">: Dropdown menu with options for encryption:
      • WPA/WPA2
      • WEP
      • None

Generate Button

  • <button id="generate-btn" class="btn primary">Generate QR Code</button>: A button to generate the QR code.

4. QR Code Display

  • <div id="qr-container" class="qr-container"></div>: Placeholder for the QR code to be dynamically generated.

5. Action Buttons

  • <div class="actions">: Contains buttons for additional actions:
    • Copy Credentials:
      • <button id="copy-btn" class="btn secondary">Copy Credentials</button>: Copies the entered WiFi credentials to the clipboard.
    • Download QR Code:
      • <button id="download-btn" class="btn secondary">Download QR Code</button>: Downloads the generated QR code.

6. Scripts

  • External Scripts:
    • <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>: Links the QRious library for generating QR codes.
  • Custom Script:
    • <script src="script.js"></script>: Links the custom JavaScript file for handling form input, QR code generation, and button actions.
Read AlsoHow to Create a Ripple Effect Button Using HTML and CSS.jpgHow to Create a Ripple Effect Button Using HTML and CSS

Step 2 (CSS Code):

Create a modern look using CSS.

Here's a detailed explanation of the CSS code:

1. Universal Selector (*)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  • margin: 0: Removes any default margins from all elements.
  • padding: 0: Removes default padding from all elements.
  • box-sizing: border-box: Ensures that padding and borders are included in the element’s total width and height.

2. Body Styling

body {
  font-family: 'Roboto', sans-serif;
  background: #825CFF;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: #fff;
}
  • font-family: 'Roboto', sans-serif;: Uses the Roboto font for the text on the page.
  • background: #825CFF;: Sets the background color to a purple shade.
  • display: flex;: Applies Flexbox layout to the body.
  • justify-content: center;: Centers content horizontally.
  • align-items: center;: Centers content vertically.
  • min-height: 100vh;: Ensures the body covers the full height of the viewport.
  • color: #fff;: Sets the text color to white.

3. Main Container Styling

.main-container {
  width: 90%;
  max-width: 400px;
  margin: auto;
}
  • width: 90%: Sets the container width to 90% of the viewport width.
  • max-width: 400px;: Restricts the container’s maximum width to 400px.
  • margin: auto;: Centers the container horizontally.

4. Card Styling

.card {
  background: #fff;
  border-radius: 15px;
  padding: 20px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
}
  • background: #fff;: Sets the background color of the card to white.
  • border-radius: 15px;: Rounds the corners of the card with a 15px radius.
  • padding: 20px 30px;: Adds padding inside the card (20px vertically, 30px horizontally).
  • box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);: Adds a shadow to the card for a 3D effect.
  • text-align: center;: Centers the text inside the card.

5. Title and Subtitle Styling

.title {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}
  • .title: Sets the font size of the title to 24px, with a dark gray color and a bottom margin of 10px.
  • .subtitle: Sets the font size of the subtitle to 14px, with a lighter gray color and a bottom margin of 20px.

6. Form Group Styling

.form-group {
  margin-bottom: 15px;
  text-align: left;
}
  • margin-bottom: 15px;: Adds space between form groups.
  • text-align: left;: Aligns form labels and inputs to the left.

7. Label Styling

label {
  font-size: 14px;
  color: #444;
  margin-bottom: 5px;
  display: block;
}
  • font-size: 14px;: Sets the font size of labels to 14px.
  • color: #444;: Applies a dark gray color to the label text.
  • margin-bottom: 5px;: Adds space between the label and the input.
  • display: block;: Makes the label a block-level element, so it takes up the full width of its container.

8. Input and Select Field Styling

input, select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: border 0.3s ease;
}
  • width: 100%;: Makes the input and select fields fill the full width of their container.
  • padding: 10px;: Adds padding inside the fields.
  • font-size: 14px;: Sets the font size of the text inside the fields.
  • border: 1px solid #ddd;: Gives the fields a light gray border.
  • border-radius: 5px;: Rounds the corners of the fields.
  • transition: border 0.3s ease;: Adds a smooth transition effect when the border color changes (on focus).
input:focus, select:focus {
  border: 1px solid #6a11cb;
  outline: none;
}
  • input:focus, select:focus: Changes the border color to purple (#6a11cb) when the input or select field is focused. Also removes the default outline.

9. Button Styling

.btn {
  padding: 10px 15px;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}
  • padding: 10px 15px;: Adds padding inside the button.
  • border: none;: Removes the default border from buttons.
  • border-radius: 25px;: Rounds the corners of the button with a 25px radius.
  • font-size: 14px;: Sets the font size for the button text.
  • cursor: pointer;: Changes the cursor to a pointer when hovering over the button.
  • transition: transform 0.2s ease, background 0.3s ease;: Adds a smooth transition effect for background and scaling when the button is hovered.

Primary Button Styling

.btn.primary {
  background: #6a11cb;
  color: #fff;
}
  • background: #6a11cb;: Sets the background color to purple.
  • color: #fff;: Sets the text color to white.
.btn.primary:hover {
  background: #2575fc;
  transform: scale(1.05);
}
  • background: #2575fc;: Changes the background color to blue when hovered.
  • transform: scale(1.05);: Slightly enlarges the button when hovered.

Secondary Button Styling

.btn.secondary {
  background: #f4f4f4;
  color: #333;
  margin-top: 10px;
}
  • background: #f4f4f4;: Sets the background color to light gray.
  • color: #333;: Sets the text color to dark gray.
  • margin-top: 10px;: Adds a margin above the button.
.btn.secondary:hover {
  background: #e0e0e0;
  transform: scale(1.05);
}
  • background: #e0e0e0;: Changes the background color to a slightly darker gray on hover.
  • transform: scale(1.05);: Slightly enlarges the button when hovered.

10. QR Code Container

.qr-container {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
  • margin: 20px auto;: Adds vertical spacing and centers the container horizontally.
  • display: flex;: Uses Flexbox to arrange QR elements.
  • justify-content: center;: Centers items horizontally.
  • align-items: center;: Centers items vertically.
  • flex-direction: column;: Arranges the items in a vertical column.

11. Canvas and Actions Styling

canvas {
  margin: 20px 0;
}
  • margin: 20px 0;: Adds vertical space around the canvas element (used for the QR code).
.actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
  • display: flex;: Uses Flexbox for layout.
  • justify-content: space-between;: Places buttons evenly with space between them.
  • gap: 10px;: Adds a gap of 10px between buttons.
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #825CFF;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: #fff;
}

.main-container {
  width: 90%;
  max-width: 400px;
  margin: auto;
}

.card {
  background: #fff;
  border-radius: 15px;
  padding: 20px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.title {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
  text-align: left;
}

label {
  font-size: 14px;
  color: #444;
  margin-bottom: 5px;
  display: block;
}

input, select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: border 0.3s ease;
}

input:focus, select:focus {
  border: 1px solid #6a11cb;
  outline: none;
}

.btn {
  padding: 10px 15px;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}

.btn.primary {
  background: #6a11cb;
  color: #fff;
}

.btn.primary:hover {
  background: #2575fc;
  transform: scale(1.05);
}

.btn.secondary {
  background: #f4f4f4;
  color: #333;
  margin-top: 10px;
}

.btn.secondary:hover {
  background: #e0e0e0;
  transform: scale(1.05);
}

.qr-container {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

canvas {
  margin: 20px 0;
}

.actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

Step 3 (JavaScript Code):

Use JavaScript to generate and display the QR code.

Here's an explanation of the code:

1. Event Listeners

document.getElementById("generate-btn").addEventListener("click", generateQRCode);
document.getElementById("copy-btn").addEventListener("click", copyCredentials);
document.getElementById("download-btn").addEventListener("click", downloadQRCode);
  • generate-btn: When the "Generate QR Code" button is clicked, it triggers the generateQRCode function.
  • copy-btn: When the "Copy Credentials" button is clicked, it triggers the copyCredentials function.
  • download-btn: When the "Download QR Code" button is clicked, it triggers the downloadQRCode function.

2. generateQRCode Function

function generateQRCode() {
  const ssid = document.getElementById("wifi-name").value.trim();
  const password = document.getElementById("wifi-password").value.trim();
  const encryption = document.getElementById("encryption-type").value.trim();

  if (!ssid) {
    alert("Please enter WiFi name (SSID)!");
    return;
  }

  const qrText = `WIFI:T:${encryption};S:${ssid};P:${password};;`;

  const qrContainer = document.getElementById("qr-container");
  qrContainer.innerHTML = "";

  const qr = new QRious({
    element: document.createElement("canvas"),
    value: qrText,
    size: 200,
    foreground: "#3a7bd5",
    background: "#ffffff",
  });

  qrContainer.appendChild(qr.element);
}
  • ssid, password, encryption: Retrieves the WiFi SSID (name), password, and encryption type from the input fields.
  • Validation: If the SSID is missing, an alert is shown, and the function exits early (return).
  • qrText: Creates a string in the format required for WiFi QR codes (WIFI:T:<encryption>;S:<SSID>;P:<password>;;).
  • Clear Previous QR: Clears any previously generated QR code by setting qrContainer.innerHTML = "".
  • QR Code Generation: A new QR code is generated using the QRious library:
    • The QR code is created using a canvas element.
    • The value (QR data) is set to qrText.
    • The size of the QR code is 200px.
    • The QR code's foreground color is set to blue (#3a7bd5), and the background is white (#ffffff).
  • Append QR Code: The generated QR code is added to the qrContainer element on the webpage.

3. copyCredentials Function

function copyCredentials() {
  const ssid = document.getElementById("wifi-name").value.trim();
  const password = document.getElementById("wifi-password").value.trim();

  if (!ssid) {
    alert("Please enter WiFi name (SSID)!");
    return;
  }

  const text = `SSID: ${ssid}\nPassword: ${password}`;
  navigator.clipboard.writeText(text).then(() => {
    alert("WiFi credentials copied to clipboard!");
  });
}
  • ssid, password: Retrieves the WiFi SSID and password from the input fields.
  • Validation: If the SSID is missing, an alert is shown, and the function exits early (return).
  • Text Creation: A text string is created with the WiFi SSID and password in a readable format (SSID: <ssid>\nPassword: <password>).
  • Copy to Clipboard: The navigator.clipboard.writeText() function is used to copy the text (WiFi credentials) to the user's clipboard.
  • Alert: After the credentials are copied, an alert is shown to inform the user that the credentials have been copied.

4. downloadQRCode Function

function downloadQRCode() {
  const qrCanvas = document.querySelector("#qr-container canvas");
  if (!qrCanvas) {
    alert("Generate a QR code first!");
    return;
  }

  const link = document.createElement("a");
  link.href = qrCanvas.toDataURL();
  link.download = "wifi-qr-code.png";
  link.click();
}
  • qrCanvas: Selects the canvas element inside the qr-container (this is where the QR code is generated).
  • Validation: If no QR code has been generated (i.e., the canvas element is not found), an alert is shown, and the function exits early.
  • Create Download Link: A new a (anchor) element is created.
    • The href is set to the QR code's image data using qrCanvas.toDataURL(), which converts the canvas to a data URL representing the image.
    • The download attribute is set to "wifi-qr-code.png", specifying the name of the downloaded file.
  • Trigger Download: The link.click() simulates a click on the anchor element, triggering the download of the QR code as a PNG image.
document.getElementById("generate-btn").addEventListener("click", generateQRCode);
document.getElementById("copy-btn").addEventListener("click", copyCredentials);
document.getElementById("download-btn").addEventListener("click", downloadQRCode);

function generateQRCode() {
  const ssid = document.getElementById("wifi-name").value.trim();
  const password = document.getElementById("wifi-password").value.trim();
  const encryption = document.getElementById("encryption-type").value.trim();

  if (!ssid) {
    alert("Please enter WiFi name (SSID)!");
    return;
  }

  const qrText = `WIFI:T:${encryption};S:${ssid};P:${password};;`;

  const qrContainer = document.getElementById("qr-container");
  qrContainer.innerHTML = "";

  const qr = new QRious({
    element: document.createElement("canvas"),
    value: qrText,
    size: 200,
    foreground: "#3a7bd5",
    background: "#ffffff",
  });

  qrContainer.appendChild(qr.element);
}

function copyCredentials() {
  const ssid = document.getElementById("wifi-name").value.trim();
  const password = document.getElementById("wifi-password").value.trim();

  if (!ssid) {
    alert("Please enter WiFi name (SSID)!");
    return;
  }

  const text = `SSID: ${ssid}\nPassword: ${password}`;
  navigator.clipboard.writeText(text).then(() => {
    alert("WiFi credentials copied to clipboard!");
  });
}

function downloadQRCode() {
  const qrCanvas = document.querySelector("#qr-container canvas");
  if (!qrCanvas) {
    alert("Generate a QR code first!");
    return;
}

  const link = document.createElement("a");
  link.href = qrCanvas.toDataURL();
  link.download = "wifi-qr-code.png";
  link.click();
}

Final Output:

create-wifi-card-generator-using-html-css-and-javascript.gif
Read Alsocreate a whatsapp web clone with html css.jpgCreate a WhatsApp Web Interface Clone using HTML and CSS

Conclusion:

Congratulations! You’ve created a working WiFi card generator using HTML, CSS, and JavaScript. This project taught you how to build a user-friendly layout, style it for a modern look, and use JavaScript to integrate the QRious library for QR code generation.

You can now customize the design, add more features like saving the QR code, or even host it online for others to use. This project is a great way to learn practical skills in web development.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a wifi card generator using javascript, generate qr codes for wifi networks with html and css, step-by-step guide to building a wifi card generator, create responsive wifi qr card using javascript, wifi card generator, html css javascript project, wifi qr generator, qr code generator
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺