do tego kodu html w show-btn dodaj funkcjonalnosc pokazywania i ukrywania hasla. ukrywanie hasla ma sie wykonywac za pomoca klasy css i ma byc domyslnie wlaczone. oto kod html i javascript <html lang="pl">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Random Pass</title>
		<link rel="stylesheet" href="style.css" />
		<script
			src="https://kit.fontawesome.com/7d1bf8d33a.js"
			crossorigin="anonymous"></script>

		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
			rel="stylesheet" />
	</head>
	<body>
		<div class="container">
			<h1>Random password generator</h1>
			<div class="text">
				<p>
					Create strong and secure passwords to keep your account safe online.
				</p>
			</div>
			<div class="length-settings">
				<label for="length">Password Length:</label>
				<span id="pass-length"></span>
				<div class="length-range">
					<button id="decrement-btn">-</button>
					<input
						type="range"
						id="length"
						name="length"
						min="5"
						max="25"
						value="8" />
					<button id="increment-btn">+</button>
				</div>
			</div>
			<div class="copy-text">
				<div class="input-copy-text"></div>
				<div class="pass-settings">
					<button class="btn-copy" id="show-btn">
						<i class="none fa-regular fa-eye-slash"></i>
						<i class="fa-regular fa-eye"></i>
					</button>
					<button class="btn-copy" id="refresh-btn">
						<i class="fas fa-solid fa-rotate-left"></i>
					</button>
					<button id="copy-btn" class="btn-copy">
						<i class="far fa-clone"></i>
					</button>
				</div>
			</div>
		</div>
		<script src="index.js"></script>
	</body>
</html>
  const copyText = document.querySelector('.copy-text')
const input = document.querySelector('.input-copy-text')
const passLength = document.querySelector('#length')
const passLengthDisplay = document.querySelector('#pass-length')
const decrementBtn = document.querySelector('#decrement-btn')
const incrementBtn = document.querySelector('#increment-btn')
const refreshBtn = document.querySelector('#refresh-btn')
const copyBtn = document.querySelector('#copy-btn')

passLengthDisplay.textContent = passLength.value

passLength.addEventListener('input', () => {
	passLengthDisplay.textContent = passLength.value
	generatePassword(passLength.value)
})

decrementBtn.addEventListener('click', () => {
	if (passLength.value > 5) {
		passLength.value--
		passLengthDisplay.textContent = passLength.value
		generatePassword(passLength.value)
	}
})

incrementBtn.addEventListener('click', () => {
	if (passLength.value < 25) {
		passLength.value++
		passLengthDisplay.textContent = passLength.value
		generatePassword(passLength.value)
	}
})

refreshBtn.addEventListener('click', () => {
	generatePassword(passLength.value)
})

const copy = () => {
	navigator.clipboard.writeText(input.textContent).then(function () {
		copyText.classList.add('active')
		window.getSelection().removeAllRanges()
		setTimeout(() => {
			copyText.classList.remove('active')
		}, 2000)
	})
}
copyBtn.addEventListener('click', copy)

input.addEventListener('click', copy)

const generatePassword = (lengthOfPassword) => {
	const chars =
		'0123456789abcdefghijklmnopqrstuvwxyz!@#$%^_±&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ'
	let password = ''
	const array = new Uint32Array(lengthOfPassword)
	window.crypto.getRandomValues(array)
	for (let i = 0; i < lengthOfPassword; i++) {
		password += chars[array[i] % chars.length]
	}
	input.textContent = password
}

document.addEventListener('DOMContentLoaded', generatePassword(8))