Skip to content

Commit

Permalink
"Updated HTML, CSS, and JavaScript files to refactor password generat…
Browse files Browse the repository at this point in the history 
…or UI and functionality, added theme toggle, and included SweetAlert library."
  • Loading branch information
@Ali-Cheikh
Ali-Cheikh committed Jul 17, 2024
1 parent 41ed2f6 commit cce6d75
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 105 deletions.
1 change: 1 addition & 0 deletions .anima/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
cache
7 changes: 0 additions & 7 deletions .gitignore
View file

This file was deleted.

88 changes: 55 additions & 33 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,69 @@
<!-- PG : Stands for Password Generation -->

<!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://avatars.githubusercontent.com/u/57839971?s=96&v=4" type="image/x-icon">
<title>🔐 Password Generator</title>
<!-- Include Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<!-- Include SweetAlert CSS -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>🔐| Password Generator</title>
</head>
<body>
<div class="container">
<h1>Password Generator</h1>
<form id="passwordForm">
<label for="length">Password Length:</label>
<input type="number" id="length" name="length" min="4" max="128" required>
<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>

<label>
<input type="checkbox" name="uppercase" checked>
Include Uppercase Letters
</label>
<label>
<input type="checkbox" name="lowercase" checked>
Include Lowercase Letters
</label>
<label>
<input type="checkbox" name="digits" checked>
Include Digits
</label>
<label>
<input type="checkbox" name="special" checked>
Include Special Characters
</label>
<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>

<button type="button" id="generateButton">Generate Password</button>
<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">
<h2>Generated Password:</h2>
<p id="generatedPassword"></p>
<button id="copyButton">Copy to Clipboard</button>
<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>

<script src="script.js"></script>
<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;">&#60;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://avatars.githubusercontent.com/u/57839971?s=96&v=4" alt="avatar" ></center></a></u></h4>
</div>
<!-- Include SweetAlert JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="script.js"></script>
</body>
</html>
</html>
89 changes: 78 additions & 11 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,47 @@
// script.js

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); // Ensure length does not go below 4
updateLengthDisplay();
}

function updateLengthDisplay() {
document.getElementById('lengthDisplay').textContent = length;
}

function generatePassword() {
const length = document.getElementById('length').value;
const includeUppercase = document.querySelector('input[name="uppercase"]').checked;
const includeLowercase = document.querySelector('input[name="lowercase"]').checked;
const includeDigits = document.querySelector('input[name="digits"]').checked;
const includeSpecial = document.querySelector('input[name="special"]').checked;
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' + 'UWU';
if (includeLowercase) charset += 'abcdefghijklmnopqrstuvwxyz' + 'uwu';
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);
Expand All @@ -28,8 +54,49 @@ function generatePassword() {
function copyToClipboard() {
const password = document.getElementById('generatedPassword').textContent;
navigator.clipboard.writeText(password).then(() => {
alert('Password copied to clipboard!');
Swal.fire({
icon: 'success',
title: 'Copied!',
text: 'Password copied to clipboard!'
});
}).catch(err => {
console.error('Failed to copy password: ', 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';
}
}

// Check internet connection on load and show alert if offline
if (!navigator.onLine) {
Swal.fire({
icon: 'error',
title: 'No Internet Connection',
text: 'You cannot use this feature right now. Please check your internet connection.'
});
}

// Add event listeners for online and offline events
window.addEventListener('offline', () => {
Swal.fire({
icon: 'error',
title: 'No Internet Connection',
text: 'You cannot use this feature right now. Please check your internet connection.'
});
});


// Initial display update
updateLengthDisplay();
82 changes: 28 additions & 54 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,36 @@

: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 {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: var(--bg-color);
color: var(--text-color);
}

.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}

h1 {
margin-bottom: 20px;
}

form label {
display: block;
margin: 10px 0 5px;
}

form input[type="number"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ddd;
background-color: var(--container-bg);
}

form label input {
margin-right: 10px;
input, button {
background-color: var(--input-bg);
border-color: var(--input-border);
}

button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
cursor: pointer;
background-color: var(--button-bg);
color: var(--text-color);
}

button:hover {
background-color: #0056b3;
}

.result {
margin-top: 20px;
}

#generatedPassword {
font-weight: bold;
word-wrap: break-word;
}
background-color: var(--button-hover-bg);
}

0 comments on commit cce6d75

Please sign in to comment.