Sanskar_CSS_Report

Part – B
Micro-Project Report on
“Webpage for Employee Satisfaction Survey using JavaScript”
1.0. Rationale:
We are going to build this simple webpage for Employee Satisfaction Survey. This is a
web-based application that provides an online platform to take survey for employee’s.
The main purpose of this simple project is to let the Employee can give survey about
company. The survey is easy to use and has a simple user-interface
2.0. Aims/Benefits:
• Aims: Webpage for Employee Satisfaction Survey using JavaScript
• Benefits:
a) Empower Teams.
b) Immediate Insights.
c) Improve Trust and Transparency.
d) Promote talent retention and reduces the costs of talent rotation.
e) Identify areas for improvement.
f) Create solutions adjusted to your reality.
g) Improve employee performance.
3.0 . Course Outcomes Addressed:

a) Create interactive web pages using program flow control structure.
b) Create event based web forms using Java script.
c) Create Menus and navigations in web Pages.
d) Implement functions in Java script.
Page | 1
4.0. Literature Review:
Book Name Author Name Publication Name
JavaScript Keogh, Jim McGraw-Hill, 2015, New Delhi

Demystified ISBN:0-07-
060347-2
Beginning Wilton, paul Wily India, New Delhi, 2015,
JavaScript ISBN:0- 7645-5587-1
JavaScript in Moncur, Michael Techmedia, New Delhi, 2015,

24 hours (SAMS ISBN:978-0- 672-33608-9
teach yourself)
5.0 . Actual Methodology Followed:
• The topic of micro-project on “Webpage For Online Grocery Ordering System

Using JavaScript” was decided under the guidance of Mr. Y. U. Bodhe.
• The researched-on needs of program and information related to the micro- project
was done by using internet and books.
• The reference from other professional software’s used in different programming
which are available on internet are also used.
• The working, structure and user-friendly interface were designed.
• After the research of one week. The implementation of the collected information
in program will be implanted.
• The creating of program for grocery ordering system using JavaScript is done.
• After testing, the finalization of the project and the report on Build a
Online Grocery Ordering System Using JavaScript
Page | 2
6.0. Actual Resources Used:
Sr. Name Of Specifications Qty Remarks

No. Resources
1 Computer Windows 11 OS i5 1 -
system processor
2 Operating Windows 11 1 -
system
3 Printer HP inkjet 1 -
4 Software Notepad, Microsoft word 1 -

2019, Vs code
5 Browser Chrome 1 -
7.0 . Learning outcome:

• How to create interactive web pages using JavaScript.
• How to implement function.
• How to do event handling and as well as to use regular expressions.
• To develop event-based web forms using JavaScript.
• To use and create menus and navigations on web pages by using JavaScript. • Outline
and assess the components of a business plan.
8.0. Source code:
Index.html
<!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="css/blobz.min.css">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Alfa Slab One' rel='stylesheet'>
<script src="js/index.js"></script>
<title>Employee Satisfaction Survey</title>
</head>
Page | 3
<body>
<div class="tk-blob">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440.7 428.7">
<path d="M410.6 78.8c36 52.5 36.1 126 19.2 194C412.9 340.7 379 403 330 421.9c-49 19-113.1-5.3-
178.6-34C85.8 359.2 18.7 326.1 3.5 276.4-11.7 226.7 25 160.3 71.7 105.3 118.3 50.3 174.8 6.8 239 .7c64.1-6
135.7 25.5 171.6 78.1z"></path>
</svg>
</div>
<form action="" id="frm1">

<div class="container">
<div>
<h1>Employee Satisfaction Survey</h1>
<hr>
</div>
<div class="cont1">
<label for="t1" id="l1"> First Name</label>
<div>
<input type="text" name="" id="t1" onblur="checkTextField(this)">
</div>
<div>
<label for="" id="t1error"></label>
</div>
</div>
<div class="cont2">
<label for="t2" id="l2">Middle Name</label>
<div>
</div>
<div>
</div>
</div>
<div class="cont3">
<label for="t3" id="l3">Last Name</label>
<div>
</div>
<div>
</div>
</div>
<div class="cont4">
<label for="t4" id="l4">Date</label>
<div>
<input type="date" name="" id="t4" onblur="checkDateField()">
</div>
<div>
</div>
</div>
Page | 4
<div class="cont5">
<label for="" id="l5">How would you describe your overall level of job satisfaction?</label>
<div>
<input type="radio" id="r1" name="reply" value="Very Satisfied"> <label for="r1">Very
Satisfied</label>
</div>
<div>
<input type="radio" id="r2" name="reply" value="Somewhat Satisfied"> <label
for="r2">Somewhat
Satisfied</label>
</div>
<div>
<input type="radio" id="r3" name="reply" value="Neutral"> <label for="r3">Neutral</label>
</div>
<div>
<input type="radio" id="r4" name="reply" value="Somewhat Dissatisfied"> <label
for="r4">Somewhat
Dissatisfied</label>
</div>
<div>
<input type="radio" id="r5" name="reply" value="Very Dissatisfied"> <label for="r5">Very
Dissatisfied</label>
</div>
</div>
<div class="cont6">
<label for="" id="l6">How would you rate the following?</label>
</div>
<div class="cont7">
<table class="content-table">
<thead>
<tr>
<th>Points</th>
<th>Very Poor</th>
<th>Poor</th>
<th>Average</th>
<th>Good</th>
<th>Excellent</th>
</tr>
</thead>
<tbody>
<tr>
<th>Salary</th>
<th><input type="radio" id="r6" name="what" value="Very Poor"></th>
<th><input type="radio" id="r7" name="what" value="Poor"></th>
<th><input type="radio" id="r8" name="what" value="Average"></th>
<th><input type="radio" id="r9" name="what" value="Good"></th>
<th><input type="radio" id="r10" name="what" value="Excellent"></th>
</tr>
<tr>
<th>Overall benefits</th>
<th><input type="radio" id="r11" name="what1" value="Very Poor"></th>
<th><input type="radio" id="r12" name="what1" value="Poor"></th>
<th><input type="radio" id="r13" name="what1" value="Average"></th>
Page | 5
<th><input type="radio" id="r14" name="what1" value="Good"></th>
<th><input type="radio" id="r15" name="what1" value="Excellent"></th>
</tr>
<tr>
<th>Health benefits</th>
</tr>
<tr>
<th>Physical work environment</th>
</tr>
<tr>
<th>Senior leadership</th>
</tr>

<div class="tk-blob" style="--fill: #e91e63;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451.6 385.5">
<path d="M381.4 86.5c43.5 48 77.5 110.3 68.8 168.7-8.6 58.4-59.9 113-114.8 126.7-54.9
13.6-113.4-13.7-176.6-40.6-63.1-27-130.7-53.5-151.5-102.8-20.9-49.2 5.1-121.1 50.3-169.5C102.8 20.7 167.1-
3.9 225.9.5c58.8 4.5 111.9 38.1 155.5 86z"></path>
</svg>
</div>
<tr>
<th>Individual management</th>
</tr>
<tr>
<th>Performance feedback</th>
</tr>
<tr>
Page | 6
<th>Employee evaluations</th>
</tr>
<tr>
<th>Recognition</th>
</tr>
<tr>
<th>Training opportunities</th>
</tr>
<tr>
<th>Opportunities for advancement</th>
</tr>
</tbody>
</table>
</div>
<div class="cont8">
<label for="" id="l7">Do you feel valued at work?</label>
<div>
<input type="radio" id="r1" name="reply1"> <label for="r1">Yes</label>
</div>
<div>
<input type="radio" id="r2" name="reply1'"> <label for="r2">No</label>
</div>
</div>
<div class="cont8">
<label for="" id="l8">Do you have the resources you need to perform your job well?</label>
<div>
</div>
<div>
<input type="radio" id="r2" name="reply2"> <label for="r2">No</label>
Page | 7
</div>
</div>

<div class="tk-blob" style="--fill: #fdd25d;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425.9 377">
<path d="M389.3 42c39.8 40.8 47.5 116.3 21.3 165.4-26.1 49.1-86 71.8-145.9 104.3-59.8 32.5-
119.6 74.8-168.9 63.4C46.5 363.7 7.6 298.5 1 235.7-5.5 173 20.3 112.5 59.8 71.9 99.3 31.2 152.4 10.2 215 2.8
277.5-4.7 349.5 1.2 389.3 42z"></path>
</svg>
</div>
<div class="cont8">
<label for="" id="l9">Does your job cause you stress or anxiety?</label>
<div>
</div>
<div>
</div>
</div>
<div class="cont8">
<label for="" id="l10">Are sufficient efforts being made to solicit colleague opinions and
feedback?</label>
<div>
</div>
<div>
</div>
</div>
<div class="cont9">
<label for="" id="l11">Please Provide Any Additional Feedback</label>
</div>
<div class="cont10">
<div>
<textarea name="" id="ta1"></textarea>
</div>
</div>
<hr>
<div class="btn">
<button id="b1" onclick="validateInputs()">Submit</button>
</div>
</div>
</form>
</body>
</html>
Page | 8
Style.css
body {
/* background-color: rgb(182, 136, 224); */
}
.container {
margin: auto;
width: 50%;
border: 3px solid rgb(251, 148, 97);
border-radius: 5px;
}
h1 {
color: rgba(3, 3, 59, 0.858);
text-align: center;
}
hr {
margin-bottom: 20px;
}
#l1 {
color: solid black;
margin-left: 30px;
margin-bottom: 0px;
font-weight: bold;
}
#t1 {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 30px;
box-sizing: border-box;
padding-right: 70px;
padding-bottom: 20px;
border: 1px solid black;
border-radius: 3px;
padding-left: 2px;
padding-top: 1px;
}
#l2 {
color: black;
margin-left: 30px;
font-weight: bold;
}
Page | 9
#t2 {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 30px;
border-radius: 3px;
padding-left: 2px;
padding-top: 1px;
#l3 {
color: black;
margin-left: 30px;
font-weight: bold;
}
#t3 {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 30px;
border-radius: 3px;
padding-left: 2px;
padding-top: 1px;
}
#l4 {
color: black;
margin-left: 70px;
font-weight: bold;
}
#t4 {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 60px;
padding-left: 20px;
border-radius: 3px;
text-align: center;
}
Page | 10
.cont1 {
float: left;
}
.cont2 {
float: right;
margin-right: 30px;
}
.cont3 {
float: left;
clear: both;
margin-right: 30px;
padding-top: 20px;
}
.cont4 {
/* float: right; */
clear: right;
margin-right: 30px;
padding-top: 20px;
}
.cont5 {
margin-left: 30px;
margin-top: 50px;
font-size: 20px;
}
#l5 {
font-weight: bold;
}
#l6 {
font-weight: bold;
}
.cont6 {
margin-top: 30px;
margin-left: 30px;
font-size: 20px;
}
.cont8 {
margin-top: 20px;
margin-left: 30px;
font-size: 20px;
}
#l7 {
Page | 11
font-weight: bold;
}
#l8 {
font-weight: bold;
}
#l9 {
font-weight: bold;
}
#l10 {
font-weight: bold;
}
#l11 {
font-weight: bold;
}
.cont9 {
margin-left: 30px;
margin-top: 20px;
font-size: 20px;
}
.cont10 {
margin-top: 20px;
margin-left: 30px;
font-size: 20px;
}
#ta1 {
width: 560px;
height: 163px;
}
.btn {
text-align: center;
margin-top: 50px;
}
#b1 {
border-radius: 5px;
padding-top: 10px;
padding-left: 30px;
}
Page | 12
#b1:hover {
background-color: rgb(5, 194, 62);
color: white;
}
#b1:visited {
color: white;
}
.cont7 {
margin-left: 7px;
}
.content-table{
border-collapse: collapse;
border: 1px solid #dddddd;
margin: 25px, 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 0 0 ;
overflow: hidden;
}
.content-table thead tr {
color: darkblue;
text-align: center;
font-weight: bold;
}
.content-table th,
.content-table td {
padding: 12px 15px;
}
.content-table tbody tr {
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-top: 1px solid #dddddd;
border: 1px solid #dddddd;
border-radius: 10px;
}
.content-table tbody tr:nth-of-type(even){

background-color: #f3f3f3;
}
.content-table tbody tr:last-of-type{

border-bottom: 2px solid rgb(233, 207, 177);;
}
Page | 13
.tk-blob {
position: absolute;
width: 60%;
z-index: -1;
left: 20%;
}
.input-control input:focus {
outline: 0;
}
.input-control.success input {
border-color: #09c372;
}
.input-control.error input {
border-color: #ff3860;
}
.input-control .error {
color: #ff3860;
font-size: 9px;
height: 13px;
}
#t1error {
margin-left: 30px;
padding-top: 0px;
color: #ac060e;
}
#t2error {
margin-left: 30px;
padding-top: 0px;
color: #ac060e;
}
#t3error {
margin-left: 30px;
padding-top: 0px;
color: #ac060e;
}
#t4error {
margin-left: 60px;
padding-top: 0px;
color: #ac060e;
}
Page | 14
Index.js
function validateInputs() {
var SelectedValue = document.querySelector('input[name="reply"]:checked');
var what = document.querySelector('input[name="what"]:checked');
var what1 = document.querySelector('input[name="what1"]:checked');
// var what11 = document.querySelector('input[name="what11"]:checked');
var reply1 = document.querySelector('input[name="reply1"]:checked');
if (t1.value === '' && t2.value === '' && t3.value === '' && t4.value === '') {
alert("Fill the Form!!")
}
else if (SelectedValue == null) {
alert("Fill the form!!!");

}
else if (what == null) {

}
else if (what1 == null) {

}

}

}
Page | 15

}

}

}

}

}

}

}
else if (reply1 == null) {

}

}

}

}
Page | 16
else {
alert("Form Submitted!!");
}
function checkTextField(field) {
if (field === t1) {
document.getElementById("t1error").innerText =
(field.value === "") ? "First Name is required" : "";
}
if (field === t2) {

(field.value === "") ? "Middle Name is required" : "";
}
if (field === t3) {

(field.value === "") ? "Last Name is required" : "";
}
}
function checkDateField() {
var valueDate = document.getElementById('t4').value;
(!valueDate) ? "Date is required." : "";
Page | 17
Output:
Page | 18
Page | 19
10.0. Conclusion:
In this micro-project we have learnt about JavaScript, CSS, and its simplicity,
ease to make GUI. This project made a place in my very starting interest of the
website development. Our project is only a humble venire to satisfy the needs to
manage their project work.
(Prof. Gayakar R. H.)

******************
Page | 20

Sanskar_CSS_Report

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

Sanskar_CSS_Report

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sanskar_CSS_Report

Uploaded by

Copyright:

Available Formats

Part – B

• Aims: Webpage for Employee Satisfaction Survey using JavaScript

3.0 . Course Outcomes Addressed:

Book Name Author Name Publication Name

JavaScript Keogh, Jim McGraw-Hill, 2015, New Delhi

JavaScript in Moncur, Michael Techmedia, New Delhi, 2015,

5.0 . Actual Methodology Followed:

• The topic of micro-project on “Webpage For Online Grocery Ordering System

Sr. Name Of Specifications Qty Remarks

4 Software Notepad, Microsoft word 1 -

7.0 . Learning outcome:

8.0. Source code:

<form action="" id="frm1">

.content-table tbody tr:nth-of-type(even){

.content-table tbody tr:last-of-type{

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

alert("Fill the form!!!");

if (field === t2) {

if (field === t3) {

(Prof. Gayakar R. H.)

You might also like