Charlie-robin · November 20, 2023 09:16 · Charlie-robin · Aug 17, 2023
diff --git a/nology-conference-starter b/nology-conference-starter
 <html>
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Lato&family=Poppins&display=swap" rel="stylesheet" />
    <style>
      h1,
      h2,
      h3,
      h4,
      h5 {
        font-family: "Poppins";
      }
      * {
        font-family: "Lato";
      }
      .valid {
        border: 1px solid green;
      }
      .invalid {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <main>
      <!-- Welcome/Title -->
      <section id="welcome">
        <h1 id="welcome-title">Welcome to Nology Conference!</h1>
        <p>Amazing talks from amazing people.</p>
      </section>

      <!-- Register your interest -->
      <section id="contact">
        <h3>Register your interest!</h3>
        <form>
          <div class="form-group">
            <label class="form-label">Name</label>
            <input class="form-input" onchange="handleInputChange(event)" />
          </div>
          <div class="form-group">
            <label class="form-label">Email</label>
            <input class="form-input" />
          </div>
          <button>Send</button>
        </form>
      </section>
    </main>

    <!-- Script -->
    <script defer>
      // 1. Change the welcome innerHTML to 'Welcome to Nology Conference 2021!'

      // 2. Add an 'active' class to first form-input

      // 3. Create a handleRegister function to run when the form is submitted, a simple pop please.

      // 4. Create a handleInputChange function to validate the input
         // Can you add the class 'valid' if it has a value?
         // Can you  add the 'invalid' class if it does not?

      // EXTENSION Dynamically add a ul/li list beneath the form with summary points of the conference.
    </script>
  </body>
 </html>
	<html>
	<head>
	<link rel="preconnect" href="https://fonts.gstatic.com" />
	<link href="https://fonts.googleapis.com/css2?family=Lato&family=Poppins&display=swap" rel="stylesheet" />
	<style>
	h1,
	h2,
	h3,
	h4,
	h5 {
	font-family: "Poppins";
	}
	* {
	font-family: "Lato";
	}
	.valid {
	border: 1px solid green;
	}
	.invalid {
	border: 1px solid red;
	}
	</style>
	</head>
	<body>
	<main>
	<!-- Welcome/Title -->
	<section id="welcome">
	<h1 id="welcome-title">Welcome to Nology Conference!</h1>
	<p>Amazing talks from amazing people.</p>
	</section>

	<!-- Register your interest -->
	<section id="contact">
	<h3>Register your interest!</h3>
	<form>
	<div class="form-group">
	<label class="form-label">Name</label>
	<input class="form-input" onchange="handleInputChange(event)" />
	</div>
	<div class="form-group">
	<label class="form-label">Email</label>
	<input class="form-input" />
	</div>
	<button>Send</button>
	</form>
	</section>
	</main>

	<!-- Script -->
	<script defer>
	// 1. Change the welcome innerHTML to 'Welcome to Nology Conference 2021!'

	// 2. Add an 'active' class to first form-input

	// 3. Create a handleRegister function to run when the form is submitted, a simple pop please.

	// 4. Create a handleInputChange function to validate the input
	// Can you add the class 'valid' if it has a value?
	// Can you add the 'invalid' class if it does not?

	// EXTENSION Dynamically add a ul/li list beneath the form with summary points of the conference.
	</script>
	</body>
	</html>