tstelzer/index.html

## 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">
    <meta name="description" content="description">
    <meta name="author" content="Timm Stelzer">
    <link rel="stylesheet" href="./styles.css">
    <title>A Dungeons and Dragons Character Sheet</title>
</head>

<body>
    <main>
        <h1>D&D<br />Adventures<br />League</h1>
        <div class='layout-container'>
            <form>
                <input name="character-name" type="text" placeholder="Bob">
                <label for="character-name">Character Name</label>
            </form>
            <form>
                <select id="class">
                    <option value="rogue">Rogue</option>
                    <option value="cleric">Cleric</option>
                    <option value="barbarian">Barbarian</option>
                </select>
                <label for="class">Class</label>
            </form>
            <form>
                <input name="level" type="number" placeholder="1">
                <label for="level">Level</label>
            </form>
            <form>
                <input name="alignment" type="text" placeholder="True Neutral">
                <label for="alignment">Alignment</label>
            </form>
            <form>
                <input type="checkbox">
                <input type="number">
                <label>Acrobatics</label>
            </form>
        </div>
    </main>
    <script src="./index.js"></script>
</body>

</html>

## index.js
let yourName = 'Benni';
let characterLabel = document.querySelectorAll('form')[2].children[1];
let characterLevelInput = document.querySelectorAll('form')[2].children[0]

characterLabel.innerText = "Character Level";

characterLevelInput.addEventListener('change', ({target: {value}}) => {
  let theCurrentValue = value;
  console.log('the current value is ' + theCurrentValue);
})

## styles.css
@page {
  size: A4;
  margin: 0;
}

html {
  width: 210mm;
  height: 297mm;
  margin: 0;
  border: 1px solid gray;
}

main {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

h1 {
  font-size: 18px;
  margin: 10px;
}

input, select {
  margin-top: 1rem;
}

select {
  width: 100%;
  background: white;
  color: #5a5a5a;
}

label {
  display: block;
  color: #5a5a5a;
}

.bg-red { background-color: red; }
.c-yellow { color: yellow; }
	<!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">
	<meta name="description" content="description">
	<meta name="author" content="Timm Stelzer">
	<link rel="stylesheet" href="./styles.css">
	<title>A Dungeons and Dragons Character Sheet</title>
	</head>

	<body>
	<main>
	<h1>D&D<br />Adventures<br />League</h1>
	<div class='layout-container'>
	<form>
	<input name="character-name" type="text" placeholder="Bob">
	<label for="character-name">Character Name</label>
	</form>
	<form>
	<select id="class">
	<option value="rogue">Rogue</option>
	<option value="cleric">Cleric</option>
	<option value="barbarian">Barbarian</option>
	</select>
	<label for="class">Class</label>
	</form>
	<form>
	<input name="level" type="number" placeholder="1">
	<label for="level">Level</label>
	</form>
	<form>
	<input name="alignment" type="text" placeholder="True Neutral">
	<label for="alignment">Alignment</label>
	</form>
	<form>
	<input type="checkbox">
	<input type="number">
	<label>Acrobatics</label>
	</form>
	</div>
	</main>
	<script src="./index.js"></script>
	</body>

	</html>
	let yourName = 'Benni';
	let characterLabel = document.querySelectorAll('form')[2].children[1];
	let characterLevelInput = document.querySelectorAll('form')[2].children[0]

	characterLabel.innerText = "Character Level";

	characterLevelInput.addEventListener('change', ({target: {value}}) => {
	let theCurrentValue = value;
	console.log('the current value is ' + theCurrentValue);
	})
	@page {
	size: A4;
	margin: 0;
	}

	html {
	width: 210mm;
	height: 297mm;
	margin: 0;
	border: 1px solid gray;
	}

	main {
	max-width: 480px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	}

	h1 {
	font-size: 18px;
	margin: 10px;
	}

	input, select {
	margin-top: 1rem;
	}

	select {
	width: 100%;
	background: white;
	color: #5a5a5a;
	}

	label {
	display: block;
	color: #5a5a5a;
	}

	.bg-red { background-color: red; }
	.c-yellow { color: yellow; }