The walk through of my webapp
This HTML document creates a simple, responsive password generator application with a dark/light theme toggle. It uses Tailwind CSS for styling, SweetAlert for alert dialogs, and JavaScript for interactivity.
- Document Type and Language: Specifies the document type and language.
- Meta Tags: Defines character set and viewport settings for responsive design.
- Favicon: Adds a shortcut icon for the webpage.
- Title: Sets the webpage title to "🔐 Password Generator".
- CSS Links: Includes Tailwind CSS for styling and SweetAlert CSS for alert dialogs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="https://github.com/avatars/u/57839971?s=96&v=4" type="image/x-icon">
<title>🔐 Password Generator</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
...
</head>- Custom CSS Variables: Defines custom CSS variables for dark and light themes.
- Theme Styles: Sets background, text, container, button, and input styles based on the active theme.
- Body Class: Adds a class to the body for full-screen centering.
<style>
:root {
--bg-color: #1a202c;
--text-color: #edf2f7;
--container-bg: #2d3748;
--button-bg: #3182ce;
--button-hover-bg: #1e2522;
--input-bg: #4a5568;
--input-border: #4a5568;
}
.light-theme {
--bg-color: #ffe4c4;
--text-color: #151b27;
--container-bg: #ffae00;
--button-bg: #ff7857;
--button-hover-bg: #658a46;
--input-bg: #f7fafc;
--input-border: #cbd5e0;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
.container {
background-color: var(--container-bg);
}
input, button {
background-color: var(--input-bg);
border-color: var(--input-border);
}
button {
background-color: var(--button-bg);
color: var(--text-color);
}
button:hover {
background-color: var(--button-hover-bg);
}
</style>- Theme Toggle Button: Allows switching between dark and light themes.
- Password Generator Form: Contains inputs for password length, character type options, and a generate button.
- Result Display: Shows the generated password and a button to copy it to the clipboard.
- Footer: Displays a footer with a GitHub link and an avatar image.
<body class="flex items-center justify-center h-screen">
<div class="absolute top-4 right-4">
<button id="themeToggle" class="py-2 px-4 rounded-md focus:outline-none">Switch to Light Theme</button>
</div>
<div class="container p-8 rounded-lg shadow-lg w-full max-w-sm text-center">
<h1 class="text-2xl font-bold mb-6">Password Generator</h1>
<form id="passwordForm" class="space-y-4">
<div>
<label for="length" class="block text-left font-semibold">Password Length:</label>
<div class="flex justify-between items-center">
<button type="button" class="length-button px-4 py-2 bg-gray-600 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-length="4">4</button>
<button type="button" class="length-button px-4 py-2 bg-gray-600 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-length="8">8</button>
<button type="button" class="length-button px-4 py-2 bg-gray-600 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-length="12">12</button>
<button type="button" id="decreaseLength" class="px-3 py-2 bg-gray-600 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">-</button>
<span id="lengthDisplay" class="px-4 py-2 bg-gray-100 text-black rounded-md">8</span>
<button type="button" id="increaseLength" class="px-3 py-2 bg-gray-600 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">+</button>
</div>
</div>
<div class="flex items-center">
<input type="checkbox" name="uppercase" id="uppercase" checked class="mr-2">
<label for="uppercase" class="font-semibold">Include Uppercase Letters</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="lowercase" id="lowercase" checked class="mr-2">
<label for="lowercase" class="font-semibold">Include Lowercase Letters</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="digits" id="digits" checked class="mr-2">
<label for="digits" class="font-semibold">Include Digits</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="special" id="special" checked class="mr-2">
<label for="special" class="font-semibold">Include Special Characters</label>
</div>
<button type="button" id="generateButton" class="w-full py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">Generate Password</button>
</form>
<div class="result mt-6">
<h2 class="text-xl font-semibold">Generated Password:</h2>
<p id="generatedPassword" style="color: #000000;" class="bg-gray-100 p-3 rounded-md mt-2 break-words"></p>
<button id="copyButton" class="mt-4 py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">Copy to Clipboard</button>
</div>
</div>
<div class="absolute bottom-2 ">
<h4><b style="color: gold;font-size: larger;"><></b> with <b style="color: rgb(252, 100, 125);font-size: larger;"><3</b> by <u><a style="font-size: large;" href="https://github.com/Ali-Cheikh/-Password-Generator-" class="hover:bg-red-600"> unexpected <center><img width="15%" src="https://github.com/avatars/u/57839971?s=96&v=4" alt="avatar" ></center></a></u></h4>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
...
</body>- Event Listeners: Adds event listeners for generating the password, copying it to the clipboard, and toggling the theme.
- Password Generation Logic: Includes functions for setting password length, generating the password based on selected options, and updating the length display.
- Theme Toggle: Functionality to switch between dark and light themes.
- Internet Connection Check: Displays an alert if there is no internet connection.
<script>
document.getElementById('generateButton').addEventListener('click', generatePassword);
document.getElementById('copyButton').addEventListener('click', copyToClipboard);
document.getElementById('themeToggle').addEventListener('click', toggleTheme);
document.querySelectorAll('.length-button').forEach(button => button.addEventListener('click', setLength));
document.getElementById('increaseLength').addEventListener('click', () => changeLength(1));
document.getElementById('decreaseLength').addEventListener('click', () => changeLength(-1));
let length = 8;
function setLength(event) {
length = parseInt(event.target.getAttribute('data-length'));
updateLengthDisplay();
}
function changeLength(delta) {
length = Math.max(4, length + delta);
updateLengthDisplay();
}
function updateLengthDisplay() {
document.getElementById('lengthDisplay').textContent = length;
}
function generatePassword() {
const includeUppercase = document.getElementById('uppercase').checked;
const includeLowercase = document.getElementById('lowercase').checked;
const includeDigits = document.getElementById('digits').checked;
const includeSpecial = document.getElementById('special').checked;
let charset = '';
if (includeUppercase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
if (includeLowercase) charset += 'abcdefghijklmnopqrstuvwxyz';
if (includeDigits) charset += '0123456789';
if (includeSpecial) charset += '!@#$%^&*()_+[]{}|;:,.<>?';
if (charset === '') {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Please select at least one character type.'
});
return;
}
let password = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
password += charset[randomIndex];
}
document.getElementById('generatedPassword').textContent = password;
}
function copyToClipboard() {
const password = document.getElementById('generatedPassword').textContent;
navigator.clipboard.writeText(password).then(() => {
Swal.fire({
icon: 'success',
title: 'Copied!',
text: 'Password copied to clipboard!'
});
}).catch(err => {
Swal.fire({
icon: 'error',
title: 'Failed to copy',
text: 'Failed to copy password: ' + err
});
});
}
function toggleTheme() {
const body = document.body;
const themeToggleBtn = document.getElementById('themeToggle');
body.classList.toggle('light-theme');
if (body.classList.contains('light-theme')) {
themeToggleBtn.textContent = 'Switch to Dark Theme';
} else {
themeToggleBtn.textContent = 'Switch to Light Theme';
}
}
if (!navigator.onLine) {
Swal.fire({
icon: 'error',
title: 'No Internet Connection',
text: 'You cannot use this feature right now. Please check your internet connection.'
});
}
window.addEventListener('offline', () => {
Swal.fire({
icon: 'error',
title: 'No Internet Connection',
text: 'You cannot use this feature right now. Please check your internet connection.'
});
});
updateLengthDisplay();
</script>This HTML code sets up a password generator with a user-friendly interface, interactive elements, theme toggling capability, and responsive design. It leverages Tailwind CSS for styling and SweetAlert for alert messages, providing a modern and smooth user experience.
