index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="styles.css"> 
    <title>Password Generator</title>
</head>
<body>
    <div class="container">
        <h1 class="title">Password Generator</h1>
        <h3 class="password-display" id="passwordDisplay">password</h3>
        <h4>Select Parameters</h4>
        <form id="passwordGeneratorForm" class="form">
            <label for="characterAmountNumber">Number Of Characters</label>

            <div class="character-amount-container">
                <input type="range" min="1" max="50" value="10" id="characterAmountRange">
                <input class="number-input" type="number" min="1" max="50" value="10" id="characterAmountNumber">
            </div>

            <label for="includeUppercase">Include Uppercase</label>
            <input type="checkbox" id="includeUppercase">

            <label for="includeNumbers">Include Numbers</label>
            <input type="checkbox" id="includeNumbers">

            <label for="includeSybols">Include Symbols</label>
            <input type="checkbox" id="includeSymbols">

            <button type="submit" class="btn">Generate Password</button>
        </form>
    </div>
</body>
</html>