Project with updates_Community Page

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

<body>
 

   <main>
      <h1>Have A Question?</h1>
    </main>
     <div class="search-container">
    <input type="text" id="search" placeholder="Search...">
    <button type="submit" id="search1">Search</button>

  </div> 
  <main>
    <div>
      <p>Welcome to the Community! </p>
     <p>  See what other Educators have been wondering...</p>
     </div>
  <div class="search-results">
             <button type="submit" id="search2">What is the difference between a Roth IRA and 401k?</button>
						</div>			
        <div class="search-results">
        <button type="submit" id="search3">How should my class materials and quizzes be structured?</button>
						</div>			
        <div class="search-results"><button type="submit" id="search4">How should budgeting be...

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;
  padding: 10px;
}

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

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

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

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


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

/* Vertical navigation styles */
.vertical-nav {
  background-color: #0205D3;
  color: white;
  width: 100px;
  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: 1px;
  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;
}
.search-container {
  display: flex;
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center the content vertically */
  margin: 10px;
}

input[type="text"] {
  padding: 10px;
  width: 50%;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
}

button[type="submit"] {
  padding:...

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.');
  }
}