<div class="idea-generator">
  <h1>Random Demo Idea Generator</h1>

  <div class="results">
    <p class="idea">
      For a <span class="topic"></span> <span class="type"></span> site, build a <span class="text"></span>  <span class="component"></span> 
    </p>
    <div class="color-box">
      <p>Using the following colors:</p>
      <ul class="colors"></ul>
    </div>
  </div>
  <button class="refresh">Refresh</button>
</div>

@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@400;600&display=swap');

:root {
  --border: 2px solid dimgray;
}

.results {
  font-size: 2rem;
  border: var(--border);
  padding: 0 2rem;
  font-weight: 400;
  letter-spacing: 1px;
  align-self: end;
  background: white;
  box-shadow: 0 0 40px -10px silver;
}

.refresh {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  font-family: system-ui;
  background: #fff85b;
  border: var(--border);
  padding: 0.5rem;
  justify-self: end;
  margin-top: -2rem;
  margin-right: -1rem;
  transition: background 0.25s;
}

.refresh:hover,
.refresh:focus {
  background: orange;
  cursor: pointer;
}

.idea-generator {
  max-width: 500px;
  display: grid;
}

.colors {
  font-size: 80%;
  margin-top: -1rem;
}

.colors li:before {
  content: '';
  background-color: var(--color);
  border: 1px solid white;
  box-shadow: 2px 2px 5px silver;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
  height: 1em;
  aspect-ratio: 1 / 1;
}

h1 {
  font-size: 2em;
  display: inline-block;
  background: linear-gradient(-45deg, violet, deeppink, orange);
  margin: 2rem 0 -1rem -1rem;
  border: var(--border);
  padding: 1rem;
  width: 90%;
  text-align: center;
  z-index: 1;
}

body {
  font-family: 'Alumni Sans';
  font-size: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(45deg, lightgoldenrodyellow, wheat);
  height: 100vh;
}

const industry = ["Sports", "Fashion", "Art", "Gaming", "Event", "Cooking", "Lifestyle", "Pet", "Technology", "Travel", "Weather"];

const websiteTypes = ["E-commerce", "Personal Blog", "Portfolio", "Social network", "News", "Membership", "Nonprofit", "Forum", "Educational", "Dashboard"];

const components = {
  button: ["Add to cart", "Subscribe", "Share", "Download", "Buy now"],
  form: ["Contact", "Search", "Registration", "Login", "Feedback"],
  slider: ["Image carousel", "Product", "Testimonial", "Banner", "Price range"],
  modal: ["Newsletter signup", "Video player", "Image gallery", "Popup notification", "Product details"],
  menu: ["Dropdown", "Mega", "Hamburger", "Tab"],
  card: ["Product", "Callout", "Post"]
};

function clearElem(parent) {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}

function generateRandomColor() {
  // Generate random values for red, green, and blue (RGB)
  const red = Math.floor(Math.random() * 256);
  const green = Math.floor(Math.random() * 256);
  const blue = Math.floor(Math.random() * 256);

  // Construct the CSS color string
  const color = `rgb(${red}, ${green}, ${blue})`;

  // Return the color string
  return color;
}

function generateIdea() {
  // Get a random topic area
  const randomTopic= industry[Math.floor(Math.random() * industry.length)];
  
  // Get a random website type
  const randomWebsiteType = websiteTypes[Math.floor(Math.random() * websiteTypes.length)];

  // Get a random component
  const componentKeys = Object.keys(components);
  const randomComponent = componentKeys[Math.floor(Math.random() * componentKeys.length)];
  
  // Get a random idea from the chosen component
  const ideas = components[randomComponent];
  const randomIdea = ideas[Math.floor(Math.random() * ideas.length)];
  
  // Get a random color theme
  const randomColorTheme = [generateRandomColor(), generateRandomColor(), generateRandomColor()]
  
  // Color list
  const colorList = document.querySelector('.colors');
  clearElem(colorList);
  
  for (let color in randomColorTheme) {
    const newSwatch = document.createElement('li');
    newSwatch.textContent = randomColorTheme[color];
    newSwatch.style.setProperty('--color', randomColorTheme[color])
    colorList.appendChild(newSwatch);
  }
  
  // Text
  document.querySelector('.topic').innerText = randomTopic;
  document.querySelector('.type').innerText = randomWebsiteType;
  document.querySelector('.text').innerText = randomIdea;
  document.querySelector('.component').innerText = randomComponent;
}


document.querySelector('.refresh').addEventListener('click', () => { generateIdea() });

generateIdea()