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
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!
Hi @amutsamoses,
Your Tip Calculator looks awesome!
I just have a few suggestions:
Hover State:
Error message for input validation:
Reset button color:
Accessibility with fieldset:
fieldset to group related inputs together (I just learned about this myself today)Happy Coding!
Hi Rabel,
I love your solution! 💫
Perhaps consider...
-- using switch statements to replace your if statements for better clarity and efficiency.
-- using template literals to conditionally add an "s" to hrs when the value is not equal to 1.
-- adding comments in your code and ensuring consistent indentation and formatting for better readability.
Happy Coding! 🥳
Mobile-first design with extra time spent trying to match all the interactive design notes.
What challenges did you encounter, and how did you overcome them?Had to learn how to open and close dialog modals. Added code reset the form and modal after each useage.
What specific areas of your project would you like help with?I think I got fairly close to the design expectations... other than my decision to place the desktop modal visibly over the Newsletter, ie. instead of placing the modal over a dark-color background (visually by itself).
Hi Paul,
Christina here from Scrimba -- I am going through the JavaScript Path and your code came up for peer review on my path 😄
I love your take on the solution, especially how your JavaScript is short, to the point, and very readable.
Best, Christina
got a little hang of JS
What challenges did you encounter, and how did you overcome them?JS part, got help by alex the moderator
What specific areas of your project would you like help with?JS and media query
Good job! 🎉
With the following small fixes you can convert your project to mobile first and make it responsive: So for example in the class .main-content, add flex-direction: column and then play around with the max-width (e.g. 20rem) in both main and .product-image. Then, add a media query for desktop: @media (min-width: 1024px) { .main-content { flex-direction: row; } main { max-width: 57rem; } .product-image { max-width: 57rem; } }
Of course you may need/want to fine-tune further, but hopefully, the small adjustments above will be helpful to you.
All the best,
Christina
