<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <section class="signup-flow">
        <div class="name-screen">
            <form class="name-form">
                <label for="name">Name</label>
                <input type="text" id="name" name="name">
                <button>Next</button>
            </form>
        </div>

        <div class="email-screen hidden">
            <div class="back-button"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
                        clip-rule="evenodd" />
                </svg>Back</div>
            <form class="email-form">
                <label for="email">Email</label>
                <input type="email" id="email" name="email">
                <button>Next</button>
            </form>
        </div>

        <div class="birthday-screen hidden">
            <div class="back-button"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
                        clip-rule="evenodd" />
                </svg>Back</div>
            <form class="birthday-form">
                <label for="birthday">Birthday</label>
                <input type="date" id="birthday" name="birthday">
                <button>Next</button>
            </form>
        </div>

        <div class="password-screen hidden">
            <div class="back-button"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
                        clip-rule="evenodd" />
                </svg>Back</div>
            <form class="password-form">
                <label for="password">Password</label>
                <input type="password" id="password" name="password">
                <button>Submit</button>
            </form>
        </div>

        <div class="success-screen hidden">
            <img src="https://i.ibb.co/KrQS1yq/green-check.png" alt="">
        </div>
    </section>








    <script src="app.js"></script>
</body>

</html>
// CSS Rest

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
  box-sizing: border-box;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  width: 100%;
}

/* —————————————————————————————————— */

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

form {
  width: 20rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  font-weight: 900;
  font-size: 2rem;
}

input {
  padding: 0.5em 1em;
}

button {
  width: 10rem;
  padding: 0.5em 0;
}

.back-button {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.back-button:hover {
  color: red;
  cursor: pointer;
}

svg {
  width: 1.5rem;
  margin-right: 0.2em;
}

.success-screen {
  text-align: center;
  user-select: none;
}

.success-screen img {
  width: 15rem;
}

.greet {
  font-size: 2rem;
}

.hidden {
  display: none;
}

const userInformation = {
  name: "",
  email: "",
  birthday: "",
  password: "",
};
const allScreens = {
  nameScreen: document.querySelector(".name-screen"),
  emailScreen: document.querySelector(".email-screen"),
  birthdayScreen: document.querySelector(".birthday-screen"),
  passwordScreen: document.querySelector(".password-screen"),
};

const successScreen = document.querySelector(".success-screen");
function handleSubmit(user) {
  const newH1 = document.createElement("h1");
  newH1.innerText = `Hey ${user.name}!`;
  newH1.classList.add("greet");
  successScreen.append(newH1);
  const newP = document.createElement("p");
  newP.innerText = "Thanks for signing up!";
  newP.classList.add("greet");
  successScreen.append(newP);
  successScreen.classList.toggle("hidden");
}

const allScreensArry = Object.values(allScreens);
for (let i = 0; i < 4; i++) {
  allScreensArry[i].addEventListener("submit", function (event) {
    event.preventDefault();
    userInformation[`${Object.keys(userInformation)[i]}`] =
      event.target.elements[0].value;
    this.classList.toggle("hidden");
    if (allScreensArry[i + 1]) {
      allScreensArry[i + 1].classList.toggle("hidden");
    } else {
      handleSubmit(userInformation);
    }
  });
}

const backButtons = document.querySelectorAll(".back-button");
for (let i = 0; i < 3; i++) {
  backButtons[i].addEventListener("click", () => {
    Object.values(allScreens)[i + 1].classList.toggle("hidden");
    Object.values(allScreens)[i].classList.toggle("hidden");
  });
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.