Index: Sr. No. Contents Page No. Annexure I - Micro Project Proposal 1-2

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 14

Index

Sr. No. Contents Page No.

Annexure I– Micro Project Proposal 1-2

1. Aim of the Micro-Project 1

2. Course Outcome Addressed 1

3. Proposed Methodology 1
1

4. Action Plan 2

5. Resources Required 2

6.Names of Team Members with Roll No.’s: 2

Annexure II– Micro Project Report 3-10

1.Rationale 3

2.Aim of the Micro-Project 3

3.Course Outcome Achieved 3

4.Literture Review 4
2
5.Actual Methodology Followed 5-9

6. Actual Resources Used


9

7. Output of micro project 10

8. Skill developed / Learning out of the Micro-


11
Project

9. Applications 11

1
Annexure I
Micro-Project Proposal
G-mail Login

1. Aim of the Micro-Project:


The goal of 'g-mail login’ is to automate to login in the Google and its related
operation and functionality. The objective of the initiative is to provide support to the Google
account and providing a faster, transparent and easy way of keeping records and use them for
reference and further proceedings. It is used in various purposes like (School, Colleges,
Universities) are causing tremendous pressure on the administrative body of the Google to
manage and arrange the G-mail process manually. It is difficult now to conduct the process
accurately and in timely manner. Hence, the need for admission form is inevitable.

2. Course Outcome Addressed:

a) Create interactive web pages using program flow control structure.

b) Implement array and function in Java script.

c) Create event base web forms using Java script.

d) Use java script for handling cookies

e) Create interactive webpage using regular expression for validation.

f) Create menu and navigation in web pages.

3. Proposed Methodology
The proposed system aims to automate the Google G-mail system, pre-checking the
inclusion of all required material and automatically ranking each based on a Google
Account. These Account include the ranking of entrance exam score, their scores in
intermediate level etc. The data used by the system is stored in a database that will be the
center of all information held about users and the base for the remainder of the process
after the initial application has been made. This enables things to be simplified and
considerably quickened, making the jobs of the people involved easier. It supports the
current process but centralizes it and makes it possible for decisions to be made earlier and
easier way.

2
4.Action Plan

Sr. Planned Planned Name of Responsible


Details of Activity
No. Start date Finish date Team Members
1 Search the topic 30/08/2022 13/09/2022
3:30pm – 5:30pm 3:30pm -5:30pm
2 Choosing the topic for 13/09/2022 27/09/2022
microproject 3:30pm – 5:30pm 3:30pm – 5:30pm
3 Search the information 29/09/2022 11/10/2022
3:30pm – 5:30pm 3:30pm – 5:30pm
4 Working on the code of 11/10/2022 25/10/2022
given topic 3:30pm – 5:30pm 3:30pm – 5:30pm Shewalkar Rohini
5 Testing and correcting 25/10/2022 08/11/2022 Suryakant
the code 3:30pm – 5:30pm 3:30pm – 5:30pm
6 Talking screenshots of 08/11/2022 22/11/2022
the outputs 3:30pm – 5:30pm 3:30pm – 5:30pm
7 Making index and 22/11/2022 06/12/2022
certificate of project 3:30pm – 5:30pm 3:30pm – 5:30pm
8 Finalization Project 06/12/2022 13/12/2022
with its report 3:30pm – 5:30pm 3:30pm – 5:30pm

5. Resources Required

Sr. Name of resource/material Specification Quantity Remarks


No
1. Laptop Window 11, 1
RAM 8GB,512
SDD

2. Operating System Window 11 1

3. Browser Google, Notepad 1

6.Names of Team Members with Roll No.’s:

3
Sr.
No. Enrollment No. Name of Team Member Roll No.

1 2010950111 Shewalkar Rohini Suryakant 32

Ms. Kachare S.M.


Name and Signature of the Teacher

Annexure – II

Micro-Project Report
G-mail Login
1.Rationale
JavaScript is limited featured client-side programming language. JavaScript runs at the
client end through the user’s browser without sending message back and forth to the server. It
is widely used by the web developers to do things such as build dynamic web pages, respond
to events create interactive forms, validate data that the visitor enters into a form, control the
browser etc. this course helps student to create highly interactive web pages using these
features.

2.Aim of the Micro-Project


The goal of 'g-mail login’ is to automate to login in the Google and its related operation
and functionality. The objective of the initiative is to provide support to the Google account
and providing a faster, transparent and easy way of keeping records and use them for
reference and further proceedings. It is used in various purposes like (School, Colleges,
Universities) are causing tremendous pressure on the administrative body of the Google to
manage and arrange the G-mail process manually. It is difficult now to conduct the process
accurately and in timely manner. Hence, the need for admission form is inevitable.

3.Course Outcomes Achieved

a) Create interactive web pages using program flow control structure.

b) Implement array and function in Java script.

c) Create event-based web forms using Java script.

d) Use java script for handling cookies

4
e) Create interactive webpage using regular expression for validation.

f) Create menu and navigation in web pages.

4. Literature Review

Gmail is a free email service provided by Google. As of 2019, it had 1.5 billion active
users worldwide.  A user typically accesses Gmail in a web browser or the official mobile
app. Google also supports the use of email clients via the POP and IMAP protocols. At its
launch in 2004, Gmail provided a storage capacity of one gigabyte per user, which was
significantly higher than its competitors offered at the time. Today, the service comes with 15
gigabytes of storage. Users can receive emails up to 50 megabytes in size, including
attachments, while they can send emails up to 25 megabytes. In order to send larger files,
users can insert files from Google Drive into the message.

5.Actual Methodology Followed

The proposed system aims to automate the Google G-mail system, pre-checking the
inclusion of all required material and automatically ranking each based on a Google Account.
These Account include the ranking of entrance exam score, their scores in intermediate level
etc. The data used by the system is stored in a database that will be the center of all
information held about users and the base for the remainder of the process after the initial
application has been made. This enables things to be simplified and considerably quickened,
making the jobs of the people involved easier. It supports the current process but centralizes it
and makes it possible for decisions to be made earlier and easier way.

5.1. Source code:

Program

<html>

<head>

<title>Multi Step Form</title>

5
<link rel="stylesheet" href="C:\Users\Amar\OneDrive\Desktop\finally\style.css">

</head>

<body>

<div class="container">

<form id="Form1">

<h3>CREATE ACCOUNT</h3>

<input type="text" placeholder="Email" required>

<input type="password" placeholder="Password" required>

<input type="password" placeholder="Confirm Password" required>

<div class="btn-box">

<button type="button" id="Next1">Next</button>

</div>

</form>

<form id="Form2">

<h3>SOCIAL LINKS</h3>

<input type="text" placeholder="Github">

<input type="text" placeholder="Linkedin">

<div class="btn-box">

<button type="button" id="Back1">Back</button>

<button type="button" id="Next2">Next</button>

</div>

6
</form>

<form id="Form3">

<h3>PERSONAL INFO</h3>

<input type="text" placeholder="First Name" required>

<input type="text" placeholder="Last Name" required>

<input type="text" placeholder="Mobile No." required>

<div class="btn-box">

<button type="button id="Back2">Back</button>

<button type="Submit">Submit</button>

</div>

</form>

<div class="step-row">

<div id="progress"></div>

<div class="step-col"></div>

<div class="step-col"></div>

<div class="step-col"></div>

</div>

<script>

var Form1 = document.getElementById("Form1");

var Form2 = document.getElementById("Form2");

var Form3 = document.getElementById("Form3");

var Next1 = document.getElementById("Next1");

7
var Next2 = document.getElementById("Next2");

var Back1 = document.getElementById("Back1");

var back2 = document.getElementById("back2");

var Progress = document.getElementById("progress");

Next1.onclick = function(){

Form1.style.left = "-450px";

Form2.style.left = "40px";

progress.style.width = "240px";

Back1.onclick = function(){

Form1.style.left = "40px";

Form2.style.left = "450px";

progress.style.width = "120px";

Next2.onclick = function(){

Form2.style.left = "-450px";

Form3.style.left = "40px";

progress.style.width = "360px";

Back2.onclick = function(){

Form2.style.left = "40px";

Form3.style.left = "450px";

progress.style.width = "240px";

8
}

</script>

</body>

</html>

Style. Css
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}

body{
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(banner.jpg);
background-position: center;
background-size: cover;
}
.container{
width: 360px;
height: 400px;
margin: 8% auto;
background: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
}
h3{
text-align: center;
margin-bottom: 4-px;
color: #777;
}
.container form{
width: 280px;
position: absolute;
top: 100px;
left: 40px;
transition: 0.5s;
}

form input{
width: 100%;

9
padding: 10px 5px;
margin: 5px 0;
border: 0;
border-bottom: 1pxx soild #999;
outline: none;
background: transparent;
}
::Placeholder{
color: #777;
}
.btn-box{
width: 100%;
margin: 30px auto;
text-algin: center;
}
form button{
width: 110;
height: 35px;
margin:0 10px;
background: linear-gradient(to right, #ff105f, #ffad06);
border-radius: 30px;
border: 0;
outline: none;
color: #fff;
cursor: pointer;
}
#Form2{
left: 450px;
}
#Form3{
left: 450px;
}
.step-row{
width: 360;
height: 40;
margin: 0 auto;
display: flex;
align-items: center;
box-shadow: 0 -1px 5px-1px #000;
position: realtive;
}
.step-col{
width: 120px;

10
text-align: center;
color: #333;
position: relative;
}
#progress{
position: absolute;
height: 100%;
width: 120px;
background: linear-gradient(to right, #ff105f, #ffado6);
transition: 1s;
}
# progress :: after{
content: '';
height: 0;
width: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
position: absolute;
right: -20;
top: 0;
border-left: 20px solid #ffad06;
}

6.Actual Resources Used

Sr. Name of resource/material Specification Quantity Remarks


No
1. Laptop Window 11, 1
RAM 8GB,512
SDD
2. Operating System Window 11 1
3. Browser Google, Notepad 1

11
7.Output of the Micro-Project:
Output Screens:

12
8. Skill developed / Learning out of the Micro-Project
1.Learn to design a form which accepts input values.

13
2.Learn to implement function.
3.Learn to implement form events.
4.Learn to implement validation using regular expression.

9. Application of this Micro-Project:


1. Web Development.
2. Web Application.
3. Presentation.
4. Server Application.
5. Web Server

**************

14

You might also like