codeup-web-exercises/adding-removing-elements-simple.html at main · DeeDom50/codeup-web-exercises · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Adding & Removing Elements Simple</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
	      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
	<style>
		.page-wrapper {
			display: flex;
			flex-direction: column;
			min-height: 100dvh;
		}
		.box {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100px;
			width: 100px;
			background-color: grey;
			border-radius: 8px;
			font-weight: 800;
			color: #fff;
		}
	</style>
</head>

<body>
<div class="page-wrapper py-5">
	<div class="container d-flex flex-column gap-4">
		<div class="row gap-2" id="boxes">
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>
		<div class="row">
			<div class="col">
				<button class="btn btn-primary" id="addBox">Add Box</button>
			</div>
		</div>
	</div>
</div>
<script src="./js/adding-removing-elements-simple.js"></script>
</body>
</html>