Skip to content

Commit

Permalink
Update function to handle edge cases
Browse files Browse the repository at this point in the history
  • Loading branch information
ajay.meena committed Feb 8, 2024
1 parent be3f946 commit 9924915
Show file tree
Hide file tree
Showing 3 changed files with 344 additions and 366 deletions.
369 changes: 3 additions & 366 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,165 +11,7 @@
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
body {
font-family: "fira code", sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* background: rgb(128, 128, 128);
background: radial-gradient(
circle,
rgba(128, 128, 128, 1) 0%,
rgba(28, 212, 0, 1) 100%
); */

background-color: black;
/* background: rgb(128, 128, 128);
background: linear-gradient(
180deg,
rgba(128, 128, 128, 1) 0%,
rgba(28, 212, 0, 1) 100%
); */
}
body {
overflow: hidden;
}

canvas {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#container {
background-color: black;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 250px;
height: 150px;
zoom: 300%;
border-top: 1px solid #1cd400;
border-bottom: 1px solid #1cd400;
position: relative;
z-index: 1;
}
#title {
color: rgb(24, 70, 19);
background-color: black;
font-family: fira code;
font-size: 16px;
}
#title .title-color {
color: #1cd400;
}

#title .title-color:hover {
color: rgb(24, 70, 19);
}
#title .title-color.grey-color {
color: rgb(24, 70, 19);
}

#password {
margin: 10px auto;
background-color: black;
padding: 10px;
font-size: 14px;
border: 1px solid #1cd400;
border-radius: 20px;
width: 200px;
text-align: center;
outline: none;
font-weight: 500;
font-family: fira code;
}
.uppercase {
color: rgb(24, 70, 19);
}
.lowercase {
color: rgb(24, 70, 19);
}
.number {
color: #808080;
}
.symbol {
color: #1cd400;
}
::selection {
color: #1cd400;
background: rgb(24, 70, 19);
}

#password:hover {
cursor: pointer;
border: 1px solid rgb(24, 70, 19);
}

#password:active {
border: 1px solid #1cd400;
}

#refreshButton {
background-color: black;
color: #1cd400;
border: 3px solid rgb(24, 70, 19);
border-radius: 50%;
/* width: 35px;
height: 35px; */
font-size: 20px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
/* Added transform transition */
}
#refreshButton:hover {
border: 3px solid #1cd400;
color: grey;
/* font-size: 18px; */
}
.rotate {
transform: rotate(-180deg); /* Added rotate transform */
}
#copyMessage {
font-size: 8px;
color: #1cd400;
margin-top: 8px;
display: block;
background-color: black;
}
#countTypes {
font-size: 8px;
color: #1cd400;
margin-top: 8px;
display: block;
background-color: black;
}
/* .grey-text {
color: grey;
} */
#question-mark {
background-color: black;
color: gray;
}

#question-mark:hover {
color: #1cd400;
}

#question-mark.question-mark-color {
color: #1cd400;
}

/* #title.grey-color {
color: grey;
} */
</style>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
Expand All @@ -181,216 +23,11 @@ <h1 id="title">
><span title="fuk uuu!" id="question-mark">...?</span>
</h1>
<p title="click to copy!" id="password" readonly></p>
<!-- <br /> -->
<br />
<button title="click me!" id="refreshButton">&#8634;</button>
<small id="countTypes"></small>
<small id="copyMessage" hidden></small>
</div>

<script>
function generatePassword() {
const characterSet = {
uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
lowercase: "abcdefghijklmnopqrstuvwxyz",
number: "0123456789",
symbol: "!@#$%^&*([{_;:,.?/<'>}])",
};

let password = "";
const passwordLength = 21;
// Helper function to get a random character from a given character set.
function getRandomCharacter(charSet) {
return charSet.charAt(Math.floor(Math.random() * charSet.length));
}
// Ensure at least one character from each category is included, fill the rest with random characters.
for (let i = 0; i < passwordLength; i++) {
if (i % 4 == 0 && i < passwordLength - 4) {
for (const type in characterSet) {
password += getRandomCharacter(characterSet[type]);
}
}
}
// Fill the rest of the password with random characters.
for (let i = password.length; i < passwordLength; i++) {
let randomType =
Object.keys(characterSet)[
Math.floor(Math.random() * Object.keys(characterSet).length)
];
password += getRandomCharacter(characterSet[randomType]);
}

// Function to shuffle a string randomly.
function shuffleString(string) {
return string
.split("")
.sort(() => Math.random() - 0.5)
.join("");
}
// Shuffle the password to make it more random.
password = shuffleString(password);

document.getElementById("password").textContent = password;
updatePasswordStyle(password);
document.getElementById("copyMessage").textContent = "";
}

function updatePasswordStyle(password) {
var passwordElement = document.getElementById("password");
const characterTypes = {
uppercase: /[A-Z]/,
lowercase: /[a-z]/,
number: /\d/,
symbol: /[^A-Za-z0-9]/,
};
let countTypes = {};

// Style the password based on character types
let styledPassword = "";
for (const char of password) {
let charClass = "";
for (const type in characterTypes) {
if (characterTypes[type].test(char)) {
charClass = type;
countTypes[type] = countTypes[type] + 1 || 1;
break;
}
}
styledPassword += `<span class="${charClass}">${char}</span>`;
}

passwordElement.innerHTML = styledPassword;
document.getElementById("countTypes").innerHTML = Object.keys(
countTypes
)
.map(
(type) =>
`<span class="${type}">${type}: ${countTypes[type]}</span>`
)
.join(" ");
}

function copyToClipboard() {
// var copyText = document.getElementById("password");
// copyText.select();
// copyText.setSelectionRange(0, 99999);
// document.execCommand("copy");
var range = document.createRange();
range.selectNode(document.getElementById("password"));
window.getSelection().removeAllRanges(); // Clear previous selections
window.getSelection().addRange(range); // Select the text
document.execCommand("copy"); // Copy the selected text
document.getElementById("copyMessage").textContent =
"Password copied to clipboard!";
setTimeout(() => {
document.getElementById("copyMessage").textContent = "";
window.getSelection().removeAllRanges(); // Clear previous selections
}, 1000);
}

// Generate password on page load
generatePassword();

// Button event listener
document
.getElementById("refreshButton")
.addEventListener("click", function () {
generatePassword();
document.getElementById("refreshButton").classList.add("rotate");
//question mark color change to green
document
.getElementById("question-mark")
.classList.add("question-mark-color");

// Add a class to the grey-text span to change the color to grey
Array.from(document.getElementsByClassName("title-color")).forEach(
(element) => {
element.classList.add("grey-color");
}
);
setTimeout(() => {
document.getElementById("refreshButton").classList.remove("rotate");
document
.getElementById("question-mark")
.classList.remove("question-mark-color");

Array.from(document.getElementsByClassName("title-color")).forEach(
(element) => {
element.classList.remove("grey-color");
}
);
}, 600);
});

// Copy password on click
document
.getElementById("password")
.addEventListener("click", function () {
copyToClipboard();
document.getElementById("countTypes").textContent = "";
});

//css animation
let img;
const mouses = [];
let noise;
function preload() {
img = loadImage(
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/mouse.png"
);
}

function setup() {
createCanvas(windowWidth, windowHeight);
noise = new SimplexNoise();
noStroke();
for (let i = 0; i < 500; i++) {
mouses.push(new Mouse());
}
}

class Mouse {
constructor() {
this.x = 0;
this.y = 0;
this.randomX = Math.random() * 300;
this.randomY = Math.random() * 300;
this.speed = Math.random() * 0.00015 + 0.00001;
this.width = Math.random() * 15 + 5;
this.height = this.width * (img.height / img.width);

// Load the pixels of the image and modify them to make the image green
img.loadPixels();
for (let i = 0; i < img.pixels.length; i += 4) {
img.pixels[i + 1] = 255; // set green channel to maximum, making it green
}
img.updatePixels();
}

update() {
this.x =
((noise.noise3D(this.randomX, 0, millis() * this.speed) + 1) / 2) *
width;
this.y =
((noise.noise3D(this.randomY, 0, millis() * this.speed) + 1) / 2) *
height;
}

draw() {
image(img, this.x, this.y, this.width, this.height);
}
}

function draw() {
clear();
mouses.forEach((mouse) => {
mouse.update();
mouse.draw();
});
}

function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
</script>
<script src="script.js"></script>
</body>
</html>
Loading

0 comments on commit 9924915

Please sign in to comment.