prof3ssorSt3v3 · August 29, 2026 14:58
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Exercise Two</title>
    <!-- Google Font preconnects and links go here -->
    <link rel="stylesheet" href="css/main.css" />
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <header>
      <h1>Exercise Two</h1>
      <h2>My Name Here</h2>
    </header>
    <main>
      <div>
        <button id="btnAdd">Add A Paragraph</button>
      </div>
      <section class="paragraphs"></section>
    </main>
  </body>
 </html>
diff --git a/main.css b/main.css
 @layer normalize, main;

 :root {
  --black: #222;
  --white: #e4e4e4;
  --min-card-width: 250px;
  --radius: 0.5rem;
 }

 @layer normalize {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Prevent font size inflation */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    line-height: 1.5;
  }

  /* Remove default margin in favour of better control in authored CSS */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  ol,
  ul,
  dl,
  dd {
    margin: 0 0 1.5rem;
  }

  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
  }

  /* Set core body defaults */
  body {
    min-height: 100vh;
    margin: 0;
  }

  /* Set shorter line heights on headings and interactive elements */
  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }

  /* Balance text wrapping on headings */
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: #36bf7f;
  }

  a:not([class]):hover,
  a:not([class]):focus-visible {
    color: #d96666;
  }

  /* Make images easier to work with */
  img,
  picture,
  svg {
    max-width: 100%;
    display: block;
  }

  svg {
    fill: currentColor;
  }

  svg:not(:root) {
    overflow: hidden;
  }

  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }

  /* Update default button cursor to indicate interactivity */
  button {
    cursor: pointer;
  }

  /* Make sure textareas without a rows attribute are not tiny using lh unit if supported */
  textarea:not([rows]) {
    min-height: 8rem;
    min-height: 6lh;
  }

  /* Anything that has been anchored to should have extra scroll margin */
  :target {
    scroll-margin-block: 3rem;
  }

  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
 }

 @layer main {
  html {
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.6;
  }
  html,
  body {
    background-color: var(--white);
  }
  h1,
  h2,
  h3,
  h4 {
    font-family: serif;
  }
  header,
  main {
    max-inline-size: 1200px;
    margin-inline: auto;
    padding: 1rem 2rem;
  }
  button {
    border: 0;
    border-radius: var(--radius);
    padding: 0.25rem 2rem;
  }
 }
diff --git a/main.js b/main.js
 document.addEventListener('DOMContentLoaded', init);

 function init() {
  //this function runs when page loads
  //add a click event listener to the `btnAdd` button to call `addParagraph`
 }

 function addParagraph(ev) {
  //create a new paragraph with Lorem Ipsum style text inside `<section class="paragraphs">`
  //add a click listener to the new paragraph which will call `removeParagraph`
 }

 function removeParagraph(ev) {
  //remove the clicked element from the page if it is a Paragraph element.
 }
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Exercise Two</title>
	<!-- Google Font preconnects and links go here -->
	<link rel="stylesheet" href="css/main.css" />
	<script type="module" src="js/main.js"></script>
	</head>
	<body>
	<header>
	<h1>Exercise Two</h1>
	<h2>My Name Here</h2>
	</header>
	<main>
	<div>
	<button id="btnAdd">Add A Paragraph</button>
	</div>
	<section class="paragraphs"></section>
	</main>
	</body>
	</html>
	@layer normalize, main;

	:root {
	--black: #222;
	--white: #e4e4e4;
	--min-card-width: 250px;
	--radius: 0.5rem;
	}

	@layer normalize {
	/* Box sizing rules */
	*,
	*::before,
	*::after {
	box-sizing: border-box;
	}

	/* Prevent font size inflation */
	html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	line-height: 1.5;
	}

	/* Remove default margin in favour of better control in authored CSS */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	figure,
	blockquote,
	ol,
	ul,
	dl,
	dd {
	margin: 0 0 1.5rem;
	}

	/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
	ul[role='list'],
	ol[role='list'] {
	list-style: none;
	}

	/* Set core body defaults */
	body {
	min-height: 100vh;
	margin: 0;
	}

	/* Set shorter line heights on headings and interactive elements */
	h1,
	h2,
	h3,
	h4,
	button,
	input,
	label {
	line-height: 1.1;
	}

	/* Balance text wrapping on headings */
	h1,
	h2,
	h3,
	h4 {
	text-wrap: balance;
	}

	/* A elements that don't have a class get default styles */
	a:not([class]) {
	text-decoration-skip-ink: auto;
	color: #36bf7f;
	}

	a:not([class]):hover,
	a:not([class]):focus-visible {
	color: #d96666;
	}

	/* Make images easier to work with */
	img,
	picture,
	svg {
	max-width: 100%;
	display: block;
	}

	svg {
	fill: currentColor;
	}

	svg:not(:root) {
	overflow: hidden;
	}

	/* Inherit fonts for inputs and buttons */
	input,
	button,
	textarea,
	select {
	font-family: inherit;
	font-size: inherit;
	}

	/* Update default button cursor to indicate interactivity */
	button {
	cursor: pointer;
	}

	/* Make sure textareas without a rows attribute are not tiny using lh unit if supported */
	textarea:not([rows]) {
	min-height: 8rem;
	min-height: 6lh;
	}

	/* Anything that has been anchored to should have extra scroll margin */
	:target {
	scroll-margin-block: 3rem;
	}

	/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
	@media (prefers-reduced-motion: reduce) {
	html:focus-within {
	scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
	}
	}
	}

	@layer main {
	html {
	font-family: sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	}
	html,
	body {
	background-color: var(--white);
	}
	h1,
	h2,
	h3,
	h4 {
	font-family: serif;
	}
	header,
	main {
	max-inline-size: 1200px;
	margin-inline: auto;
	padding: 1rem 2rem;
	}
	button {
	border: 0;
	border-radius: var(--radius);
	padding: 0.25rem 2rem;
	}
	}
	document.addEventListener('DOMContentLoaded', init);

	function init() {
	//this function runs when page loads
	//add a click event listener to the `btnAdd` button to call `addParagraph`
	}

	function addParagraph(ev) {
	//create a new paragraph with Lorem Ipsum style text inside `<section class="paragraphs">`
	//add a click listener to the new paragraph which will call `removeParagraph`
	}

	function removeParagraph(ev) {
	//remove the clicked element from the page if it is a Paragraph element.
	}