main.js

// Document Body Styling
document.body.style.fontFamily = "Tahoma, Arial";
document.body.style.margin = "0";

// ---------------------------Header---------------------------

// Create Header Elements
let headerDiv = document.createElement("header");
let h1 = document.createElement("h1");
let h1Text = document.createTextNode("Elzero");
let ul = document.createElement("ul");

// Append Header Text to h1 element
h1.appendChild(h1Text);

// Header h1 Style
h1.style.color = "rgb(35, 169, 110)";
h1.style.fontSize = "26px";

// Add h1 Class and title
h1.className = "logo";
h1.title = "Website Logo";

// Append h1 to Header Div
headerDiv.appendChild(h1);

// Nav Bar Links Array
let navLinks = ["Home", "About", "Service", "Contact"];

// Loop to create Header Links
for (let i = 0; i < navLinks.length; i++) {
  // Create nav bar Li and link
  let li = document.createElement("li");
  let a = document.createElement("a");

  // insert Link Content
  a.href = "#";
  a.textContent = navLinks[i];

  // Link style
  a.style.textDecoration = "none";
  a.style.color = "rgb(136, 136, 136)";

  // Append Link to his Li
  li.appendChild(a);

  // Append Li to Ul
  ul.appendChild(li);
}

// Ul (Nav Bar Links) Syling
ul.style.setProperty("list-style", "none");
ul.style.setProperty("display", "flex");
ul.style.setProperty("gap", "10px");

// Add Ul Class
ul.className = "menu";

// Append Ul (Nav Bar Links) to Header Div
headerDiv.appendChild(ul);

// Header Styling
headerDiv.style.cssText = `
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  height: 75px;
  box-sizing: border-box;
`;

// Add Header Class
headerDiv.className = "website-header";

// Append Header to Document Body
document.body.appendChild(headerDiv);

// ---------------------------Main Content---------------------------

// Create Main Content Div
let sectionDiv = document.createElement("section");

// Products Loop
for (let i = 0; i < 15; i++) {
  // Product Elements
  let product = document.createElement("div");
  let span = document.createElement("span");
  let spanText = document.createTextNode(i + 1);
  let productText = document.createTextNode("Product");

  // Span (Product Number) Styling
  span.style.fontSize = "40px";
  span.style.color = "black";

  // Append Text to Span
  span.appendChild(spanText);

  // Append span to product element
  product.appendChild(span);

  // Append product Text to product element
  product.appendChild(productText);

  // Product Styling
  product.style.cssText = `
    width: calc(33.3333% - 13.3333px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid rgb(221, 221, 221);
    color: rgb(136, 136, 136);
  `;

  // Add product Class
  product.className = "product";

  // Append Product to Main Content Div
  sectionDiv.appendChild(product);
}

// Main Content Div Styling
sectionDiv.style.cssText = `
  min-height: calc(-150px + 100vh);
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(236, 236, 236);
  padding: 20px;
  gap: 20px;
  box-sizing: border-box;
`;

// Add Main Content Class
sectionDiv.className = "content";

// Append Main Content to document body
document.body.appendChild(sectionDiv);

// ---------------------------Footer---------------------------

// Create footer Div
let footerDiv = document.createElement("footer");

// Footer Text Content
footerDiv.textContent = "Copyright 2024";

// Footer Styling
footerDiv.style.cssText = `
  background-color: rgb(35, 169, 110);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
  font-size: 26px;
`;

// Add Footer Class
footerDiv.className = "footer";

// Append Footer to document body
document.body.appendChild(footerDiv);

// Append script to the end of document body
document.body.appendChild(document.scripts[0]);