Skip to content

[WIP] FrontendMentor - Multi step form #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
d-Pixie wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

[WIP] FrontendMentor - Multi step form #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added 44 - frontendmentor multistep form/jonas/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added 44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Bold.ttf
View file
Open in desktop
Binary file not shown.
Binary file added 44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Medium.ttf
View file
Open in desktop
Binary file not shown.
Binary file added 44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Regular.ttf
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions 44 - frontendmentor multistep form/jonas/assets/images/bg-sidebar-desktop.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions 44 - frontendmentor multistep form/jonas/assets/images/bg-sidebar-mobile.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 44 - frontendmentor multistep form/jonas/assets/images/favicon-32x32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions 44 - frontendmentor multistep form/jonas/assets/images/icon-advanced.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions 44 - frontendmentor multistep form/jonas/assets/images/icon-arcade.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions 44 - frontendmentor multistep form/jonas/assets/images/icon-checkmark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions 44 - frontendmentor multistep form/jonas/assets/images/icon-pro.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions 44 - frontendmentor multistep form/jonas/assets/images/icon-thank-you.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions 44 - frontendmentor multistep form/jonas/assets/javasript/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
let current_step;

document.addEventListener("DOMContentLoaded", () => {
current_step = document.localStorage.getItem("current_step");
console.log("Current step:", current_step);
});

document.addEventListener("click", (event) => {
event.preventDefault();
console.log("Clicked:", event.target);

const class_list = event.target.classList;
const next_button = class_list.contains("next");
const prev_button = class_list.contains("prev");

if (next_button) {
current_step++;
} else if (prev_button) {
current_step--;
}

document.localStorage.setItem("current_step", current_step);
document.querySelectorAll(".step").forEach((step, index) => {
step.classList.toggle("active", index === current_step);
});
console.log("Current step:", current_step);
});
67 changes: 67 additions & 0 deletions 44 - frontendmentor multistep form/jonas/assets/style/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
@font-face {
font-family: "Ubuntu";
src: url("/assets/fonts/Ubuntu-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: "Ubuntu";
src: url("/assets/fonts/Ubuntu-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: "Ubuntu";
src: url("/assets/fonts/Ubuntu-Bold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}

/* Reset */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: "Ubuntu", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
/* center child */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.form {
width: 100%;
max-width: 500px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #f00;
display: grid;
grid-template-columns: 1fr 3fr;
}

/* sidebar */

.progress {
background-color: #f4f4f4;
z-index: 1000;
}

.step {
display: none;
}

.step--active {
display: block;
}
203 changes: 203 additions & 0 deletions 44 - frontendmentor multistep form/jonas/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->

<link
rel="icon"
type="image/png"
sizes="32x32"
href="/assets/images/favicon-32x32.png"
/>

<link rel="stylesheet" href="/assets/style/main.css" />

<title>Frontend Mentor | Multi-step form</title>
</head>
<body>
<main class="form">
<!-- Sidebar start -->
<aside class="progress">
<div class="progress-step">
<p class="progress-step__name">Step 1</p>
<h3 class="progress-step__description">Personal info</h3>
</div>
<div class="progress-step">
<p class="progress-step__name">Step 2</p>
<h3 class="progress-step__description">Select plan</h3>
</div>
<div class="progress-step">
<p class="progress-step__name">Step 3</p>
<h3 class="progress-step__description">Add-ons</h3>
</div>
<div class="progress-step">
<p class="progress-step__name">Step 4</p>
<h3 class="progress-step__description">Summary</h3>
</div>
</aside>

<!-- Sidebar end -->

<form name="multistep-form" action="#" method="POST">
<!-- Step 1 start -->
<section class="step step--active">
<h1 class="step__title">Personal info</h1>
<p class="step__subtitle">
Please provide your name, email address, and phone number.
</p>

<fieldset class="step__input-group">
<label for="name">Name</label>
<input
type="text"
id="name"
name="name"
required
placeholder="e.g. Stephen King"
/>
</fieldset>

<fieldset class="step__input-group">
<label for="email">Email Address</label>
<input
type="email"
id="email"
name="email"
required
placeholder="e.g. stephenking@lorem.com"
/>
</fieldset>

<fieldset class="step__input-group">
<label for="phone">Phone Number</label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="e.g. +1 234 567 890"
/>
</fieldset>

<button class="step__btn next">Next Step</button>
</section>
<!-- Step 1 end -->

<!-- Step 2 start -->
<section class="step">
<h1 class="step__title">Select your plan</h1>
<p class="step__subtitle">
You have the option of monthly or yearly billing.
</p>

<fieldset class="step__input-group">
<label for="arcade">Arcade</label>
<input
type="radio"
id="arcade"
name="plan"
value="arcade"
required
/>
<span>$9/mo</span>
</fieldset>

<fieldset class="step__input-group">
<label for="advanced">Advanced</label>
<input
type="radio"
id="advanced"
name="plan"
value="advanced"
required
/>
<span>$12/mo</span>
</fieldset>

<fieldset class="step__input-group">
<label for="pro">Pro</label>
<input type="radio" id="pro" name="plan" value="pro" required />
<span>$15/mo</span>
</fieldset>

<button class="step__btn back">Go Back</button>
<button class="step__btn next">Next Step</button>
</section>
<!-- Step 2 end -->

<!-- Step 3 start -->
<section class="step">
<h1 class="step__title">Pick add-ons</h1>
<p class="step__subtitle">
Add-ons help enhance your gaming experience.
</p>

<fieldset class="step__input-group">
<label for="online-service">Online service</label>
<input
type="checkbox"
id="online-service"
name="online-service"
value="online-service"
/>
<span>Access to multiplayer games +$1/mo</span>
</fieldset>

<fieldset class="step__input-group">
<label for="larger-storage">Larger storage</label>
<input
type="checkbox"
id="larger-storage"
name="larger-storage"
value="larger-storage"
/>
<span>Extra 1TB of cloud save +$2/mo</span>
</fieldset>

<fieldset class="step__input-group">
<label for="customizable-profile">Customizable Profile</label>
<input
type="checkbox"
id="customizable-profile"
name="customizable-profile"
value="customizable-profile"
/>
<span>Custom theme on your profile +$2/mo</span>
</fieldset>

<button class="step__btn back">Go Back</button>
<button class="step__btn next">Next Step</button>
</section>
<!-- Step 3 end -->

<!-- Step 4 start -->
<section class="step">
<h1 class="step__title">Finishing up</h1>
<p class="step__subtitle">
Double-check everything looks OK before confirming.
</p>

<!-- Dynamically add subscription and add-on selections here -->
<p>Total (per month/year)</p>

<button class="step__btn back">Go Back</button>
<button class="step__btn next">Confirm</button>
</section>
<!-- Step 4 end -->

<!-- Step 5 start -->
<section class="step">
<h1 class="step__title">Thank you!</h1>
<p class="step__subtitle">
Thanks for confirming your subscription! We hope you have fun using
our platform. If you ever need support, please feel free to email us
at support@loremgaming.com.
</p>
</section>
</form>
<!-- Step 5 end -->
</main>
</body>
</html>