Brandefy test4

This page goes through the form, hides the form and displays products regardless of forms answers. Product page generation is delayed until the form is loaded to optimize speed

by Alex Cowan

HTML

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <div id="step-1" class="form-step active">
      <div class="background"></div>
      <div class="content">
        <header>
          <h1>brandefy.</h1>
          <h2>luxury skincare, deconstructed</h2>
          <h3>Find your personalized beauty regimen:</h3>
        </header>
        <div class="text-container">
          <input type="text" id="textInput" placeholder="Enter your name">
        </div>
        <div class="toggle-buttons-container">
          <button id="maleButton" class="toggle-button">Male</button>
          <button id="femaleButton" class="toggle-button">Female</button>
        </div>
        <div class="text-container">
          <button id="preferNotToSayButton" class="toggle-button">Prefer not to say</button>
        </div>
      </div>
      <div class="arrow-container">
        <button id="customizeButton" class="arrow-button">&#8594;</button>
      </div>
    </div>


    <div id="step-2" class="form-step hidden">
      <header class="brand-header">
        <h1 id="brand-title" class="brand-title">my brandefy</h1>
        <nav class="brand-navigation">
          <ul class="nav-list">
            <li id="restart-li" class="nav-item hidden"><a href="#" class="nav-link" onclick="restartFromBeginning()">Restart from the beginning</a></li>
          </ul>
        </nav>
      </header>

      <p>What is your skin type?</p>
      <label><input type="radio" name="skin-type" value="Combination"> Combination</label>
      <label><input type="radio" name="skin-type" value="Dry"> Dry</label>
      <label><input type="radio" name="skin-type" value="Normal"> Normal</label>
      <label><input type="radio" name="skin-type" value="Oily"> Oily</label>
      <button class="buttoncool" onclick="showStep(3)">Next</button>
    </div>

    <div id="step-3" class="form-step hidden">
      <header...

CSS

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato');

.background {
  background-image: url('https://hips.hearstapps.com/hmg-prod/images/gettyimages-1223714147-1-1617970723.jpg?crop=1.00xw:1.00xh;0,0&resize=2048:*');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.6;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
}

header h1 {
  text-align: center;
  font-family: 'Libre Baskerville', serif;
  font-style: bold;
  padding: 0;
  font-size: 60px;
  margin-bottom: -10px;
}

header h2 {
  text-align: center;
  font-family: 'Libre Baskerville', serif;
  padding: 0;
  font-size: 20px;
  }

header h3 {
  font-family: 'Lato', serif;
  text-align: center;
  font-size: 18px;
  font-style: bold;
  margin: 12px 0; /* Adjust the margin as needed */
  margin-top: 60px;
}

.text-container {
  text-align: center;
}

.text-container input[type="text"] {
  padding: 15px;
  border-radius: 4px;
  width: 220px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid black;
  font-size: 15px;
  font-family: 'Lato', sans-serif;
  font-style: bold;
}

.toggle-buttons-container {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.toggle-button {
  padding: 10px 10px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid black;
  background-color: #b9d7d4;
  font-family: 'Lato', sans-serif;
  color: #000000;
  cursor: pointer;
  font-weight: bold;
}

#maleButton,
#femaleButton {
  width: 123px;
  margin: 0 2px;
}

#preferNotToSayButton {
  width: 250px;
  margin-top: 4px;
}

.toggle-button:hover {
  background-color: #eaff9b;
  color: #000;
}

.arrow-container {
  text-align: center;
}

.arrow-button {
  font-size: 80px; /* Adjust the size of the arrow icon */
  font-style:bold;
  margin-top:...

JavaScript

// Get the buttons
var maleButton = document.getElementById("maleButton");
var femaleButton = document.getElementById("femaleButton");
var preferNotToSayButton = document.getElementById("preferNotToSayButton");

// Function to reset button colors
function resetButtonColors() {
  maleButton.style.backgroundColor = "#b9d7d4";
  femaleButton.style.backgroundColor = "#b9d7d4";
  preferNotToSayButton.style.backgroundColor = "#b9d7d4";
}

// Event listener for Male button
maleButton.addEventListener("click", function() {
  resetButtonColors();
  this.style.backgroundColor = "#eaff9b";
});

// Event listener for Female button
femaleButton.addEventListener("click", function() {
  resetButtonColors();
  this.style.backgroundColor = "#eaff9b";
});

// Event listener for Prefer not to say button
preferNotToSayButton.addEventListener("click", function() {
  resetButtonColors();
  this.style.backgroundColor = "#eaff9b";
});

// Get the arrow button
var customizeButton = document.getElementById("customizeButton");

// Get the form steps
var step1 = document.getElementById("step-1");
var step2 = document.getElementById("step-2");

// Event listener for the arrow button
customizeButton.addEventListener("click", function() {
  // Hide step-1
  step1.classList.remove("active");
  step1.classList.add("hidden");

  // Show step-2
  step2.classList.remove("hidden");
  step2.classList.add("active");
});

// Update the text for step 2 if we're moving from step 1 to step 2
if (step === 2) {
  var nameInput = document.querySelector('.text-container input[type="text"]');
  var name = nameInput.value.trim();
  var step2Question = document.querySelector('#step-2 p');
  step2Question.textContent = `What is your skin type, ${name}?`;

  var titleElement = document.getElementById('brand-title');
  if (name !== "") {
    titleElement.textContent = `${name}'s Brandefy`;
  } else {
    titleElement.textContent = "my brandefy";
  }
}

function finishForm() {
  // For demonstration purposes, just...