Skip to content

Instantly share code, notes, and snippets.

@ChendrayanV

ChendrayanV/Index.pug

Created August 17, 2018 09:18
Show Gist options
  • Save ChendrayanV/7e6a824d9265c5f88c57332e97a850d9 to your computer and use it in GitHub Desktop.
Save ChendrayanV/7e6a824d9265c5f88c57332e97a850d9 to your computer and use it in GitHub Desktop.
Download ZIP
PUG Wizard Demo
Raw
button.js
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the crurrent tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[ n ].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[ currentTab ].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[ currentTab ].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[ i ].value == "") {
// add an "invalid" class to the field:
y[ i ].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[ currentTab ].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[ i ].className = x[ i ].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[ n ].className += " active";
}
Raw
Index.pug
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible", content="ie=edge")
title Wizard
style
include ./style/style.css
link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Raleway")
body
form#regForm(action='/userInformation',method="post")
h1 PUG Wizard Demo
// One "tab" for each step in the form:
.tab
p
input(placeholder='First name...', oninput="this.className = ''", name='fname')
p
input(placeholder='Last name...', oninput="this.className = ''", name='lname')
.tab
p
input(placeholder='E-mail...', oninput="this.className = ''", name='email')
p
input(placeholder='Phone...', oninput="this.className = ''", name='phone')
.tab
p
input(placeholder='dd', oninput="this.className = ''", name='dd')
p
input(placeholder='mm', oninput="this.className = ''", name='nn')
p
input(placeholder='yyyy', oninput="this.className = ''", name='yyyy')
.tab
p
input(placeholder='Username...', oninput="this.className = ''", name='uname')
p
input(placeholder='Password...', oninput="this.className = ''", name='pword', type='password')
div(style='overflow:auto;')
div(style='float:right;')
button#prevBtn(type='button', onclick='nextPrev(-1)') Previous
button#nextBtn(type='button', onclick='nextPrev(1)') Next
// Circles which indicates the steps of the form:
div(style='text-align:center;margin-top:40px;')
span.step
span.step
span.step
span.step
script
include ./js/button.js
Raw
server.js
var express = require('express');
var app = express();
var path = require('path');
var bodyparser = require('body-parser');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(bodyparser.urlencoded({ extended: true }));
app.get("/", function (request, response) {
response.render('index')
});
app.post("/userInformation", function (request, response) {
response.render('userInformation', {
fname: request.body['fname'],
lname: request.body['lname'],
email: request.body['email'],
phone: request.body['phone'],
dd: request.body['dd'],
nn: request.body['nn'],
yyyy: request.body['yyyy'],
uname: request.body['uname'],
pword: request.body['pword'],
})
});
app.listen(3000)
console.log("Your Application is running on port 3000");
Raw
style.css
* {
box-sizing: border-box
}
body{
background-color: #f1f1f1;
}
#regForm {
background-color: #ffffff;
margin: 100px auto;
font-family: Raleway;
padding: 40px;
width: 70%;
min-width: 300px;
}
h1 {
text-align: center;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
label {
font-style: italic;
font-family: Raleway;
font-weight: bold;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
button {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Raleway;
cursor: pointer;
}
button:hover {
opacity: 0.8;
}
#prevBtn {
background-color: #bbbbbb;
}
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
Raw
userinformation.pug
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible", content="ie=edge")
title Wizard
style
include ./style/style.css
link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Raleway")
body
p
label(for="fname") First Name
p
input(placeholder='First name...', oninput="this.className = ''", name='fname' , value=fname)
p
label(for="lname") Last Name
p
input(placeholder='First name...', oninput="this.className = ''", name='fname' , value=lname)
p
label(for="email") Email
p
input(placeholder='First name...', oninput="this.className = ''", name='fname' , value=email)
p
label(for="phone") Phone
p
input(placeholder='First name...', oninput="this.className = ''", name='fname' , value=phone)
p
label(for="dd") Date
p
input(placeholder='First name...', oninput="this.className = ''", name='fname' , value=dd)
p
label(for="nn") Month
p
input(placeholder='First name...', oninput="this.className = ''", name='fname' , value=nn)
p
label(for="yyyy") Year
p
input(placeholder='First name...', oninput="this.className = ''", name='fname' , value=yyyy)
p
label(for="uname") User Name
p
input(placeholder='First name...', oninput="this.className = ''", name='fname' , value=uname)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment