Pagina responsiva creada con html, css y javaScript
Design comparison
Solution retrospective
Me encanto poder darle estilos muy diferentes a los que se tienen por defecto.
What challenges did you encounter, and how did you overcome them?me costo un poco ls creacion de la password pero al final lo logre creando un solo array e ir metiendo de poco en poco.
What specific areas of your project would you like help with?Me encataria que me dijeran que mas puedo cambiar
Community feedback
- @codercreativePosted 17 days ago
Hola @JJorgeMS13,
I love your solution! 🥳🥳🥳
The only thing, I would change is to show a confirmation message "Copied!" next to the copy icon or in the password field instead of showing an alert. This will help enhance the user experience.
Just as an example, this is how I solved it:
// COPY PASSWORD FUNCTION
copyIcon.addEventListener("click", copyPassword);
function copyPassword() { const passwordText = generatedPassword.textContent; console.log(passwordText);
if (passwordText === "P4$5W0rD!" || passwordText === "Tick at least 1 box") { return; }
navigator.clipboard .writeText(passwordText) .then(() => { const originalText = generatedPassword.textContent; generatedPassword.textContent = "Copied!"; generatedPassword.classList.add("copied");
setTimeout(() => { generatedPassword.textContent = originalText; generatedPassword.classList.remove("copied"); }, 2000); }) .catch((err) => { console.log("Failed to copy: ", err); });
}
Happy Coding!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord