Hey guys in this post, we will create Javascript form-based project for beginners. We will create this project step by step, follow this tutorial till the end to understand how to work with forms in javascript. The final version of the app is live on the internet.
Table of Contents
Topics covered
This application involves the following topics –
- Object-Oriented JavaScript
- JavaScript Constructor Functions
- JavaScript Prototypal Inheritance
- JavaScript CSS Manipulation
- JavaScript DOM Manipulation
Complete source code
The below image shows you the project structure –
Add styles to the application
Create a main.css
file and add the following content –
:root {
--mainWhite: #f7f9f9;
--mainBrown: #a76d60;
--darkBrown: #601700;
}
body {
background: var(--mainWhite);
}
.input-group-text {
background: var(--mainBrown);
color: var(--mainWhite);
border-color: var(--mainBrown);
}
.form-control {
border: 0.2rem solid var(--mainBrown);
}
.submitBtn {
color: var(--darkBrown);
background: var(--mainWhite);
border: 0.2rem solid var(--darkBrown);
transition: all 1s ease-in-out;
}
.submitBtn:hover {
background: var(--darkBrown);
color: var(--mainWhite);
}
.fail {
border-color: red;
}
.complete {
border-color: green;
}
.feedback {
display: none;
}
.loading {
display: none;
}
:disabled {
opacity: 0.2 !important;
}
.showItem {
display: block;
}
Add scripts to the application
Create an app.js
file and add the following content –
"use strict";
//Create an IIFE to close the app off from the global scope
(function(){
// check fields and hide the submit button
document.addEventListener('DOMContentLoaded', function(){
const display = new Display();
display.checkFields();
display.hideSubmit();
});
//add customer on submit
document.getElementById('customer-form').addEventListener('submit', function(event){
event.preventDefault();
const name = this.querySelector('.name');
const course = this.querySelector('.course');
const author = this.querySelector('.author');
const customer = new Customer(name.value, course.value, author.value);
const display = new Display();
display.feedback(customer);
display.clearFields();
});
//display
function Display(){
this.name = document.getElementById('name');
this.course = document.getElementById('course');
this.author = document.getElementById('author');
this.customers = document.querySelector('.customer-list');
}
//check fields
Display.prototype.checkFields = function(){
// console.log(this.name);
this.name.addEventListener('blur', this.validateField);
this.course.addEventListener('blur', this.validateField);
this.author.addEventListener('blur', this.validateField);
};
//validate each field
Display.prototype.validateField = function(){
// console.log(this);
if (this.value === ''){
this.classList.remove('complete');
this.classList.add('fail');
} else {
this.classList.add('complete');
this.classList.remove('fail');
}
const complete = document.querySelectorAll('.complete');
if(complete.length === 3){
document.querySelector('.submitBtn').disabled = false;
} else {
document.querySelector('.submitBtn').disabled = true;
}
};
//disable submit button
Display.prototype.hideSubmit = function(){
const btn = document.querySelector('.submitBtn');
btn.disabled = true;
};
//show loading and feedback
Display.prototype.feedback = function (customer) {
const feedback = document.querySelector('.feedback');
const loading = document.querySelector('.loading');
feedback.classList.add('showItem', 'alert', 'alert-success');
loading.classList.add('showItem');
const self = this;
self.hideSubmit();
setTimeout(function(){
feedback.classList.remove('showItem', 'alert', 'alert-success');
loading.classList.remove('showItem');
self.addCustomer(customer);
}, 3000);
};
Display.prototype.addCustomer = function(customer){
const random = this.getRandom();
const div = document.createElement('div');
div.classList.add('col-11', 'mx-auto', 'col-md-6', 'my-3', 'col-lg-4');
div.innerHTML = `<div class="card text-left">
<img src="./img/cust-${random}.jpg" class="card-img-top" alt="">
<div class="card-body">
<!-- customer name -->
<h6 class="text-capitalize "><span class="badge badge-warning mr-2">name :</span><span id="customer-name">${customer.name}</span></h6>
<!-- end of customer name -->
<!-- customer name -->
<h6 class="text-capitalize my-3"><span class="badge badge-success mr-2">course :</span><span id="customer-course">
${customer.course}
</span></h6>
<!-- end of customer name -->
<!-- customer name -->
<h6 class="text-capitalize"><span class="badge badge-danger mr-2">author :</span><span id="course-author">${customer.author}</span></h6>
<!-- end of customer name -->
</div>
</div>`
this.customers.appendChild(div);
}
//random number
Display.prototype.getRandom = function(){
let random = Math.floor(Math.random()*5+1);
return random;
};
Display.prototype.clearFields = function(){
this.name.value = '';
this.course.value = '';
this.author.value = '';
this.name.classList.remove('complete', 'fail');
this.course.classList.remove('complete', 'fail');
this.author.classList.remove('complete', 'fail');
};
//customer constructor function
function Customer(name, course, author){
this.name = name;
this.course = course;
this.author = author;
};
})()
Add HTML to the application
Create an index.html
file and add the following content –
<!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">
<!-- bootstrap css -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!-- main css -->
<link rel="stylesheet" href="./css/main.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="./css/all.css">
<title>OOP Course Form Project</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-11 mx-auto text-center my-5">
<form class="my-5" id="customer-form">
<h3 class="text-capitalize">get a free course</h3>
<div class="feedback text-center text-capitalize">
calculating.....
</div>
<!-- single input -->
<div class="input-group my-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control text-capitalize name" id="name" placeholder="customer name">
</div>
<!-- end of single input -->
<!-- single input -->
<div class="input-group my-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-book"></i></span>
</div>
<input type="text" class="form-control text-capitalize course" placeholder="course" id="course">
</div>
<!-- end of single input -->
<!-- single input -->
<div class="input-group my-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user-circle"></i></span>
</div>
<input type="text" class="form-control text-capitalize author" placeholder="author" id="author">
</div>
<!-- end of single input -->
<button type="submit" class="btn btn-block submitBtn text-uppercase mt-4">submit</button>
</form>
<div class="loading">
<img src="./img/loading.gif" alt="">
</div>
<div class="row customer-list">
<!-- single customer -->
<div class="col-11 mx-auto col-md-6 col-lg-4 my-3">
<div class="card text-left">
<img src="./img/cust-0.jpg" class="card-img-top" alt="">
<div class="card-body">
<!-- customer name -->
<h6 class="text-capitalize "><span class="badge badge-warning mr-2">name :</span><span id="customer-name"> john anderson</span></h6>
<!-- end of customer name -->
<!-- customer name -->
<h6 class="text-capitalize my-3"><span class="badge badge-success mr-2">course :</span><span id="customer-course">
css basics
</span></h6>
<!-- end of customer name -->
<!-- customer name -->
<h6 class="text-capitalize"><span class="badge badge-danger mr-2">author :</span><span id="course-author"> john anderson</span></h6>
<!-- end of customer name -->
</div>
</div>
<!-- single customer -->
</div>
</div>
</div>
</div>
</div>
<!-- jquery -->
<script src="./js/jquery-3.3.1.min.js"></script>
<!-- bootstrap js -->
<script src="./js/bootstrap.bundle.min.js"></script>
<!-- script js -->
<script src="./js/app.js"></script>
</body>
</html>
Screenshots
Download the complete source code from github repository
Original source https://jsbeginners.com/javascript-course-form-project/
That’s it for this post. Hope you liked it, if you did then please share this with your friends and colleagues. Also, share this post in your social media profiles. Thanks, I will see you in the next post.