index.html

<!DOCTYPE html>
<html lang="en">
<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>get thing done</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="root">
        <button id="copy">copy</button>
        <h1 id="content">33if90samw[e3290rq3rjf</h1>
        <input type="number" min="6" max="20" value = 6 id="numletter" placeholder="code number"> 
        <ul><input type="checkbox" id="a" class="one" ><label for="a"> add uper case leter</label></ul>
        <ul><input type="checkbox" id="b" class="one"><label for="b">add lower case leter</label></ul>
        <ul><input type="checkbox" id="c" class="one" checked ><label for="c">add number</label></ul>
        <ul><input type="checkbox" id="d" class="one"><label for="d"> add symbol</label></ul>
        <button id="li" class="li">click</button>
    </div>
    <script src="app.js"> </script>
</body>
</html>