Password Generator

Solution retrospective
I like how I handled styling the range input with a linear gradient that changes dynamically with a bit of JavaScript.
const handleSliderInput = (e) => { const { min, max, value } = rangeSlider; const total = Number(max) - Number(min); const percent = ((Number(value) - Number(min)) / total) * 100; const offset = thumbWidth / 2 / 100; e.target.style.background = `linear-gradient(to right, var(--lime-green) 0%, var(--lime-green) ${ percent - offset }%, var(--black) ${percent - offset}%, var(--black) 100%`; sliderValue.textContent = value; };
However, any suggestions on a better way to do this would be appreciated!
What challenges did you encounter, and how did you overcome them?One challenge that I encountered were default styling on checkboxes for Safari. I solved this by explicitly setting border radius to 0.
.checkbox { -webkit-appearance: none; appearance: none; border-radius: 0; width: 1.25rem; height: 1.25rem; }
What specific areas of your project would you like help with?Any suggestions on how to generate passwords better or how to solve the problem of styling the range input would be appreciated!
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Josh Kahlbaugh's solution.
Join 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