prof3ssorSt3v3/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.0" />
    <title>DOM Content</title>
    <link rel="stylesheet" href="./main.css" />
    <script type="module" src="./main.js"></script>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>DOM Content Exercise</h1>
        <h2>Your Name Here</h2>
      </header>
      <form id="dom-form">
        <p>
          <label for="tag">HTML Tag</label>
          <select id="tag" name="tag">
            <option value="a">Anchor</option>
            <option value="img">Image</option>
            <option value="p">Paragraph</option>
            <option value="h2">Heading</option>
          </select>
        </p>
        <p>
          <label for="content">Content</label>
          <input type="text" id="content" name="content" />
        </p>
        <p>
          <label for="url">URL</label>
          <input type="url" id="url" name="url" />
        </p>
        <p>
          <button type="submit">Build A Tag</button>
        </p>
      </form>
      <main>
        <!-- Add all your new elements inside this main element -->
      </main>
    </div>
  </body>
</html>

## main.css
* {
  box-sizing: border-box;
  margin: 0;
}
html {
  color-scheme: dark light;
  font-size: 20px;
  font-family: system-ui;
  font-weight: 300;
}
body {
  padding: 0;
}
header {
  padding: 1rem;
}
img {
  margin: 1rem;
}
p,
h2 {
  margin: 1rem;
}
a {
  padding: 1rem;
}
form p {
  display: grid;
  grid-template-columns: 15ch 1fr;
}

label,
input,
select,
option {
  font-size: 1rem;
  font-family: inherit;
  max-width: 300px;
}
button {
  font-size: 1rem;
  font-family: system-ui;
}

## main.js
(() => {
  //this function runs when the page loads
  //add your event listeners here
  document.getElementById('dom-form').addEventListener('submit', handleSubmit);
})();

function handleSubmit(ev) {
  ev.preventDefault();
  //get the values from the three form fields
  //make sure they are not empty
  //create a new element
  //set the property attributes and property values
  //append the new element to the <main> element
  //clear the form
}

function showError(msg) {
  //display a <dialog> or <popover> with details about
  //any error that happened
}
	<!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>DOM Content</title>
	<link rel="stylesheet" href="./main.css" />
	<script type="module" src="./main.js"></script>
	</head>
	<body>
	<div class="container">
	<header>
	<h1>DOM Content Exercise</h1>
	<h2>Your Name Here</h2>
	</header>
	<form id="dom-form">
	<p>
	<label for="tag">HTML Tag</label>
	<select id="tag" name="tag">
	<option value="a">Anchor</option>
	<option value="img">Image</option>
	<option value="p">Paragraph</option>
	<option value="h2">Heading</option>
	</select>
	</p>
	<p>
	<label for="content">Content</label>
	<input type="text" id="content" name="content" />
	</p>
	<p>
	<label for="url">URL</label>
	<input type="url" id="url" name="url" />
	</p>
	<p>
	<button type="submit">Build A Tag</button>
	</p>
	</form>
	<main>
	<!-- Add all your new elements inside this main element -->
	</main>
	</div>
	</body>
	</html>
	* {
	box-sizing: border-box;
	margin: 0;
	}
	html {
	color-scheme: dark light;
	font-size: 20px;
	font-family: system-ui;
	font-weight: 300;
	}
	body {
	padding: 0;
	}
	header {
	padding: 1rem;
	}
	img {
	margin: 1rem;
	}
	p,
	h2 {
	margin: 1rem;
	}
	a {
	padding: 1rem;
	}
	form p {
	display: grid;
	grid-template-columns: 15ch 1fr;
	}

	label,
	input,
	select,
	option {
	font-size: 1rem;
	font-family: inherit;
	max-width: 300px;
	}
	button {
	font-size: 1rem;
	font-family: system-ui;
	}
	(() => {
	//this function runs when the page loads
	//add your event listeners here
	document.getElementById('dom-form').addEventListener('submit', handleSubmit);
	})();

	function handleSubmit(ev) {
	ev.preventDefault();
	//get the values from the three form fields
	//make sure they are not empty
	//create a new element
	//set the property attributes and property values
	//append the new element to the <main> element
	//clear the form
	}

	function showError(msg) {
	//display a <dialog> or <popover> with details about
	//any error that happened
	}