Frontend Mentor - Multi-step form solution

This is a solution to the Multi-step form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Demo
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Run my source code locally
• Author
• My recent works
• Acknowledgments

Overview

The challenge

Users should be able to:

• Complete each step of the sequence
• See a summary of their selections on the final step and confirm their order
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Demo

Desktop version

desktop-demo.mp4

Mobile version

mobile-demo.mp4

Links

• Solution URL: My github multi-step-form repo
• Live Site URL: Visit my live site

My process

Built with

• HTML form elements
• CSS custom properties
• CSS Flexbox
• CSS Grid
• Responsive web design
• Vanilla Javascript
• LESS or Leaner style sheet
• VueJS
• Vue Router

What I learned

HTML

<!-- Vertically align div (works on all browsers) -->
<div class="outer">
  <div class="middle">
    <div class="inner">
      <div class="inner-most" />
    </div>
  </div>
</div>

<style>
  .outer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .middle {
    display: table-cell;
    vertical-align: middle;
  }
  .inner {
    margin-left: auto;
    margin-right: auto;
  }
</style>

CSS

/* To change checkbox color */
.input-type-checkbox {
  accent-color: red;
}

Javascript

const store = {
  addMultiplayer: true,
  addLargerStorage: true,
  addCustomTheme: false,
  get chosenAddOns() {
    const array = [];
    if (this.addMultiplayer) array.push("multiplayer");
    if (this.addLargerStorage) array.push("largerStorage");
    if (this.addCustomTheme) array.push("customTheme");

    return array;
  },
}

Bash

# git push -f [email protected]:Binh2/multi-step-form.git main:gh-pages
# master instead of main branch because default name for local branch is master
git push -f [email protected]:Binh2/multi-step-form.git master:gh-pages

Continued development

If I were to continue working on this project, I would try to:

• Make components and views CSS style more independent from each other.
• Make font-size dynamically change based on screen width on mobile so text doesn't wrap too much and cause container to be too big.
• Change line-height based on what font is used so text doesn't get too close to each other on Arial font and sans-serif font.
• Currently, the layout breaks on mobile landscape mode. Maybe, make components and views scale based on screen width and height.

Useful resources

• VueJS - This helped me learn VueJS.
• Vue Router - This helped me learn Vue Router.
• Vue CLI deploy to Github - This article help me deploy my project to Github Pages, although, it's outdated and doesn't work. Checkout how I fix it

Run my source code locally

Clone my project to your local machine

git clone https://github.com/Binh2/multi-step-form.git

Project setup (Download JS dependencies)

npm install

Lints and fixes files

npm run lint

Compiles and hot-reloads for development

npm run serve

How to deploy to my Github Pages (btw, you can't do this without my permission unless you fork my project).

Compiles and minifies for production (Call npm run deploy will run this command automatically so you don't need to run this command).

npm run build

Deploy to my Github Page (If you decided to fork your own project from mine then you might have to reconfigure /deploy.sh and /vue.config.js. Check out Vue CLI deploy to Github)

npm run deploy

Need more info on customizing Vue CLI configuration

See Configuration Reference.

Author

• Frontend Mentor - @Binh2
• Twitter - @hgqbinh2002
• LinkedIn - hgqbinh2002

My recent works

News homepage

• Solution URL: Check out my solution
• Live Site URL: My live webpage

A blog template

• The source code: Checkout my source code
• Live Site URL: My live webpage

Acknowledgments

• Big thanks to Frontend Mentor to give me the idea to do this project.
• Thanks to Nikola D for suggesting me to reset CSS on my previous solution, aka News homepage.