Aedify Community Page_v1

by Alex Cowan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Community Support</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav class="horizontal-nav">
      <ul>
        <li><a href="https://jsfiddle.net/bdibiagio/0anu45e9/124/show" class="active" id="">Home</a></li>
        <li><a href="#">Your calendar</a></li>
        <li><a href="https://jsfiddle.net/bdibiagio/05zqd1ym/9/show">Community</a></li>
        <li><a href="#">About Us</a></li>
        <!-- Add more items as needed -->
      </ul>
    </nav>
  </header>

  <div class="container">
    <nav class="horizontal-nav">
      <a href="#" class="active">
        <img src="https://media.licdn.com/dms/image/D5605AQFCgV24hQlP3g/videocover-low/0/1690726758340?e=2147483647&v=beta&t=dRdktyp_-BPjHdnh1NvKUaW5Rlpzor0Zh9R8_cQ_344" alt="Aedify Spaceship">
      </a>
      <h1>Have A Question?</h1>
      <div class="search-container">
        <input type="text" id="search" placeholder="Search...">
        <button type="submit" id="search1">Search</button>
      </div>
      <div>
        <p>Welcome to the Community!</p>
        <p>See what other Educators have been wondering...</p>
      </div>
      <div class="search-results">
        <button type="result" id="search2">What is the difference between a Roth IRA and 401k?</button>
      </div>
      <div class="search-results">
        <button type="result" id="search3">How should my class materials and quizzes be structured?</button>
      </div>
      <div class="search-results">
        <button type="result" id="search4">How should budgeting be introduced in the lesson plan?</button>
      </div>
      <div class="search-results">
        <button type="result" id="search5">Where can I connect with other teachers using Aedify?</button>
      </div>
    </nav>
  </div>
</body>
</html>

CSS

/* Common styles for both sections */
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  color: #000000;
}

.container {
  display: flex;
}

main {
  flex: 1;
  padding: 20px;
}

h1 {
  font-size: 1.5em;
  text-align: center;
}

p {
  font-size: 1.1em;
  text-align: center;
}

/* Horizontal navigation styles */
header {
  background-color: #0205D3;
  color: white;
  text-align: center;
  width: 900px;
  padding: 10px;
}

.horizontal-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.horizontal-nav li {
  display: inline;
  margin-right: 50px;
}

.horizontal-nav a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.horizontal-nav img {
  max-height: 200%;
  width: 920px;
}


.horizontal-nav a.active {
  background-color: #0205D3;
}

/* Vertical navigation styles */
.vertical-nav {
  background-color: #0205D3;
  color: white;
  width: auto;
  padding: 10px;
}

.vertical-nav a {
  display: block;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
}

.vertical-nav a img {
  display: center;
  max-width: 0%;
  background-color: #0205D3;
  color: white;
  margin-right: 0px;
}

.vertical-nav a:hover {
  background-color: #0205D3;
}

.vertical-nav a.active {
  background-color: #0205D3;
}

/* Search results styles */
.search-results {
  margin: 25px;
  flex: 15;
  padding: 15px 15px;
  float: left;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  width: 150px;
  height: 100px;
  line-height: 25px;
  display: table-cell;
  text-align: center; /* Center content horizontally */
  vertical-align: middle; /* Center content vertically */
  background-color: #0205D3;
  color: white;
  border-radius: 5px; /* Rounded borders applied */
}

button[type="result"] {
  padding: 20px 20px;
  border: 1px solid #ccc;
  border-radius: 0 0px 0px 0;
  color: white;
  background-color: #0205D3;
}

.search-container {
  display: flex;
  justify-content: center; /* Center the content horizontally */
 ...

JavaScript

// Attach a click event listener to the entire document
document.addEventListener("click", function(event) {
  // Store the clicked HTML element in a constant named 'clickedElement'
  const clickedElement = event.target;

  // Call the 'logEvent' function to handle logging and any other desired behavior
  logEvent(clickedElement);
});

// Attach a keypress event listener to the entire document
document.addEventListener("keypress", function(event) {
  // Store the element where the keypress event occurred in a constant named 'clickedElement'
  const clickedElement = event.target;

  // Call the 'logEvent' function to handle logging and any other desired behavior
  logEvent(clickedElement);
});

// Function to handle the logging logic for both click and keypress events
function logEvent(target) {
  // Store the ID of the target element (where the event occurred) in a constant named 'clickedElementId'
  const clickedElementId = target.id;

  // Store the ID of the parent element of the target element in a constant named 'parentElementID'
  const parentElementID = target.parentNode.id;

  // Check if the target element has an ID and log it to the console if it does
  if (clickedElementId !== "") {
    console.log(`User CT on element with ID: ${clickedElementId}`);

  // If the target element doesn't have an ID, check if its parent element has an ID and log it to the console if it does
  } else if (parentElementID !== "") {
    console.log(`User CT on element with parent ID: ${parentElementID}`);

  // If neither the target element nor its parent have an ID, log a generic message to the console
  } else {
    console.log('User clicked on element with no ID or parent ID.');
  }
}
// Attach a click event listener to the entire document
document.addEventListener("click", function(event) {
  // Store the clicked HTML element in a constant named 'clickedElement'
  const clickedElement = event.target;

  // Call the 'logEvent' function to handle logging and any other...