Css Report

A
Project Report
On
“Registration Portal for Various Internship Domain”

Submitted to
Amrutvahini Polytechnic, Sangamner
Department of Information Technology
In partial fulfilment of the requirement for the diploma in
Information Technology
Submitted By
Roll no Name of Student Enrollment No
09] Lohote Shravani Dashrath (2100800487)

24] Bodake Tanvi Vilas (2100800865)
42] Kshirsagar Kiran Subhash (2100800938)
Under The Guidance Of

Prof. Kadlag S.U.

(Approved by AICTE, NEW DELHI and affiliated To MSBTE)
2023-2024
Department of Information Technology
CERTIFICATE
This is to that the project report entitled,
“Registration Portal for Various Internship Domain”

It is benefited work carrier out by,
In partial fulfilment of the requirement for the diploma in

Information Technology
During the academic year 2023-2024
Prof. Kadlag S.U Prof.Chaudhari N.K

(Project Guide) (H.O.D) IT
ACKNOWLEDGEMENT
We have taken lots of efforts in this project. However, it would have been possible
without the kind support and help of many individuals and organization. We would to kind to
extend our sincere thanks to all of them.
First and foremost we want to thanks Prof. N.K. Chaudhari H.O.D (Information
Technology) Amrutvahini Polytechnic
Sangamner for giving us an opportunity to work on this project.
We are highly indebted to Prof. Kadlag S.U (Project Guide) for his guidance and
constant supervision as well as for providing necessary information regarding the project and
also for his support in the project.
We would like to express our gratitude towards our parents and members of
Information Technology department for their kind
Co-operation and encouragement which helps us in completion of this micro project.
Our thanks and appreciations also go to our colleagues in developing the micro-
project and people who have willingly helped us with their abilities.

INDEX
Sr.No Contents Page No.
1. Rationale
2. Aims and Benefits
3. Course Outcomes
4. Literature Review
5. Actual Methodology Followed
6. Conclusion
7. Reference
8. Actual resources used
9. Skill developed/learning outcomes of the micro-
project
MICROPROJECT
Registration Portal for Various Internship Domain
1. RATIONALE: -
registration portals for various internship domains serve as a central hub for managing users within various
domains, offering benefits related to security, personalization, communication, and user management. They
help organizations and communities control access to their resources, gather valuable data, and maintain a
secure and engaging online environment.
2. AIMS AND BENEFITS: -

AIM: - Registration Portal For Various Internship Domains.
BENEFITS: -
i. Saving on time.
ii. Mobile Compatibility
iii. Improved User Experience
iv. Efficient Internship Management
v. Streamlined Registration Process
vi. highly secured
3. COURSE OUTCOMES: -
CI505.1 Use different program flow control structure for design interactive web pages.
CI505. Exceute programs on Arrays and functions in Java script.
2
CI505.5 Implement Menus and navigations in web Pages.
4.
LITERATURE REVIEW: -
Registration portals are a common feature in web development. Many web applications and platforms
utilize user registration to control access and personalize user experiences. JavaScript, often combined with
HTML and CSS, is widely used for creating user interfaces and registration forms. Researchers have
extensively explored best practices and frameworks for building registration systems that are user-friendly,
secure, and responsive.
5. ACTUAL METHODOLOGY FOLLOWED: -
To implement a Registration Portal for Various Internship Domain microproject using JavaScript, one might
follow this methodology:
1. Project Planning:
Define Scope: Clearly outline the project's objectives, functionalities, and required features for the
registration portal.
Technology Selection: Choose appropriate technologies, such as HTML, CSS, and JavaScript, to build
the front-end.
2. Design & Development:
Create Registration Form: Develop an HTML form to collect user information (name, email, password,
etc.).
Style with CSS: Design the form and page layout using CSS for an appealing and user-friendly
interface.
3. Front-End Logic:
Client-Side Validation: Implement JavaScript for form validation to ensure the correctness of user
input before submission.
Event Handling: Write JavaScript functions to manage form submission, error handling, and user
interaction.
Storage Handling: Utilize local Storage or mock server-side methods to simulate data storage for user
registrations.
JavaScript Form Validation
It is important to validate the form submitted by the user because it can have inappropriate values. So,
validation is must to authenticate user.
JavaScript provides facility to validate the form on the client-side so data processing will be faster than
server-side validation. Most of the web developers prefer JavaScript form validation.
Through JavaScript, we can validate name, password, email, date, mobile numbers and more fields.
JavaScript email validation

We can validate the email by the help of JavaScript.
There are many criteria that need to be follow to validate the email id such as:
 email id must contain the @ and . character
 There must be at least one character before and after the @.
 There must be at least two characters after . (dot).
What are Cookies ?

Web Browsers and Servers use HTTP protocol to communicate and HTTP is a stateless protocol. But
for a commercial website, it is required to maintain session information among different pages. For
example, one user registration ends after completing many pages. But how to maintain users' session
information across all the web pages.
In many situations, using cookies is the most efficient method of remembering and tracking
preferences, purchases, commissions, and other information required for better visitor experience or
site statistics.
How It Works ?
Your server sends some data to the visitor's browser in the form of a cookie. The browser may accept
the cookie. If it does, it is stored as a plain text record on the visitor's hard drive. Now, when the visitor
arrives at another page on your site, the browser sends the same cookie to the server for retrieval. Once
retrieved, your server knows/remembers what was stored earlier.
Cookies are a plain text data record of 5 variable-length fields −
 Expires − The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits
the browser.
 Domain − The domain name of your site.
 Path − The path to the directory or web page that set the cookie. This may be blank if you want to
retrieve the cookie from any directory or page.
 Secure − If this field contains the word "secure", then the cookie may only be retrieved with a secure
server. If this field is blank, no such restriction exists.
 Name=Value − Cookies are set and retrieved in the form of key-value pairs
Cookies were originally designed for CGI programming. The data contained in a cookie is
automatically transmitted between the web browser and the web server, so CGI scripts on the server
can read and write cookie values that are stored on the client.
JavaScript can also manipulate cookies using the cookie property of the Document object. JavaScript
can read, create, modify, and delete the cookies that apply to the current web page.
Storing Cookies
The simplest way to create a cookie is to assign a string value to the document.cookie object, which
looks like this.
document.cookie = "key1 = value1;key2 = value2;expires = date";
Here the expires attribute is optional. If you provide this attribute with a valid date or time, then the
cookie will expire on a given date or time and thereafter, the cookies' value will not be accessible.
Note − Cookie values may not include semicolons, commas, or whitespace. For this reason, you may
want to use the JavaScript escape() function to encode the value before storing it in the cookie. If you
do this, you will also have to use the corresponding unescape() function when you read the cookie
value.
Reading Cookies
Reading a cookie is just as simple as writing one, because the value of the document.cookie object is
the cookie. So you can use this string whenever you want to access the cookie. The document.cookie
string will keep a list of name=value pairs separated by semicolons, where name is the name of a
cookie and value is its string value.
Regular Expressions
A regular expression is an object that describes a pattern of characters.

The JavaScript RegExp class represents regular expressions, and both String and RegExp define
methods that use regular expressions to perform powerful pattern-matching and search-and-replace
functions on text.
Syntax
A regular expression could be defined with the RegExp () constructor, as follows −
var pattern = new RegExp(pattern, attributes);
or simply
var pattern = /pattern/attributes;
Here is the description of the parameters −
 pattern − A string that specifies the pattern of the regular expression or another regular expression.
 attributes − An optional string containing any of the "g", "i", and "m" attributes that specify global,
case-insensitive, and multi-line matches, respectively.
4. User Interaction:
Testing: Perform tests to verify the registration form's functionality and ensure proper user interaction.
Debugging & Refinement: Debug and refine the code to address any issues found during testing.
 Project Code: -
 Index Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amrutvahini Internships</title>

<link rel="stylesheet" href="CSS/style.css">

<link rel="stylesheet" href="CSS/bootstrap.min.css">

<link rel="stylesheet" href="CSS/all.min.css">
</head>
<body onload="DisplayBanners()">

<nav class="navbar shadow p-3 mb-3 bg-white rounded" style="height: 5.6rem;">
<div class="container-fluid h-100 d-flex align-items-center justify-content-center "
style="background-color: white;">
<a class="navbar-brand" href="#" style="color: #25c3ae; font-weight: 600; font-size: xx-
large; ">
<img src="Assets/Images/CodeClause-Recuirt-Logo.png" alt="Logo" width="68" height="60"
class="d-inline-block align-text-top">
</a>
<label style="color: #25c3ae; font-weight: 600; font-size: xx-large; font-family: Poppins-
regular; ">Amrutvahini Internship Program</label>
</div>
</nav>


<div class="head-container h-100 d-flex align-items-center justify-content-center " >
<h2 style="margin-top: 1.5rem; font-family: Poppins-medium;">Discover your Internship Domain
with us.</h2>
</div>


<div class="container mt-2">
<div class="row justify-content-center" style="margin-top: 1.2rem;">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-prepend">
</div>
<span class="input-group-text" id="addon-wrapping" style="background-color:
white; color: black;"><i class="fa fa-search"></i></span>
<input type="search" class="form-control search-input" placeholder="Search Job"
style="border-radius: 0%; font-family: Poppins-regular;">
</div>
</div>
</div>
</div>
<br>

<script language="Javascript" type="text/javascript">
Banners = new Array('Assets/Images/image1.jpg','Assets/Images/image2.jpg','Assets/Images/
image3.jpg','Assets/Images/image4.jpg','Assets/Images/image5.jpg','Assets/Images/image6.jpg')
BannerLink = new Array(
'Pages/basic_details.html?jobid=12345&position=Artificial%20Intelligence','Pages/
basic_details.html?jobid=12345&position=Web%20Development', 'Pages/basic_details.html?
jobid=12345&position=Python%20Development','Pages/basic_details.html?jobid=12345&position=Android
%20Developer','Pages/basic_details.html?jobid=12345&position=Java%20Development','Pages/
basic_details.html?jobid=12345&position=Data%20Science');
CurrentBanner = 0;
NumOfBanners = Banners.length;
function LinkBanner()
{
document.location.href =
"" + BannerLink[CurrentBanner];
}
function DisplayBanners() {
if (document.images) {
CurrentBanner++
if (CurrentBanner == NumOfBanners) {
CurrentBanner = 0
}
document.RotateBanner.src= Banners[CurrentBanner]
setTimeout("DisplayBanners()",2000)
}
}
</script>
<center>
<a href="javascript: LinkBanner()"><img src="Assets/Images/image1.jpg"
width="600" height="600" name="RotateBanner" /></a>
</center>

<div class="container mt-2">
<div class="row">
<div class="col-sm col-md col-lg mt-4 custom-column ">
<div class="card" style="width: 100%; ">
<div class="card" style="width: 100%; height: 0.4rem; background-color: #25c3ae;
border-color: #25c3ae;">
</div>
<div class="card-body">
<h4 class="card-title mb-3" style="padding-top: 5%;font-family: Poppins-semibold;
margin-top: 0.4rem;">Android Deveoper</h4>
<h5 style="font-family: Poppins-medium; font-size: 1.1rem; margin-top:
1.3rem;"class="card-subtitle mb-3 ">App Development</h5>
<h6 style="font-family: Poppins-medium; margin-top: -0.2rem;"class="card-subtitle
mb-3 ">Job Type- Internship</h6>
<a href="Pages/basic_details.html?jobid=12345&position=Android%20Developer"
class="card-link" style="font-family: Poppins-semibold; color: #25c3ae; text-decoration: none;
">Apply Now &nbsp <i class="fas fa-arrow-right arrow-animation" style="padding-top: 5%;"></i></a>
</div>
</div>
</div>
</div>
margin-top: 0.4rem;">Artificial Intelligence</h4>
1.3rem;"class="card-subtitle mb-3 ">AI & ML</h5>
<a href="Pages/basic_details.html?jobid=12345&position=Artificial%20Intelligence"
</div>
</div>
</div>

</div>
margin-top: 0.4rem;">Python Development</h4>
1.3rem;"class="card-subtitle mb-3 ">Development</h5>
<a href="Pages/basic_details.html?jobid=12345&position=Python%20Development"
</div>
</div>
</div>
</div>
<div class="row">
</div>
margin-top: 0.4rem;">Web Development</h4>
1.3rem;"class="card-subtitle mb-3 ">fronend and backend Development</h5>
<a href="Pages/basic_details.html?jobid=12345&position=Web%20Development"
</div>
</div>
</div>
</div>
margin-top: 0.4rem;">Java Development</h4>
1.3rem;"class="card-subtitle mb-3 ">Application Development</h5>
<a href="Pages/basic_details.html?jobid=12345&position=Java%20Development"
</div>
</div>
</div>
</div>
margin-top: 0.4rem;">Data Science</h4>
1.3rem;"class="card-subtitle mb-3 ">Data Analysis & ML</h5>
<a href="Pages/basic_details.html?jobid=12345&position=Data%20Science"
</div>
</div>
</div>
</div>
</div>


<div class="head-container h-100 d-flex align-items-center justify-content-center">
<h6 style="padding-top: 2%; color: #888888;">All Rights Reserved @Amrutvahini
Internships</h6>
</div>


<script>
var jobcode = document.getElementById("userSelectedJobId");
console.log(jobcode.textContent);
function setCookie(name, value, daysToExpire) {
var cookie = name + "=" + encodeURIComponent(value);
if (daysToExpire) {
var expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + daysToExpire);
cookie += "; expires=" + expirationDate.toUTCString();
}
document.cookie = cookie;
}
setCookie("username", "john_doe", 30); // Set a cookie named "username" with the value
"john_doe" that expires in 30 days
</script>
</body>
<script src="JavaScript/bootstrap.bundle.min.js" ></script>
</html>
 Output Of Program: -
 Index Page:
 Basic Details Page:
 Education Details Page:

 Additional Details Page:
 Review Details Page:

6. CONCLUSION:-
 The registration portal microproject aims to showcase a basic yet essential system for user registration.
It's designed to illustrate the interaction between users and a simple database structure, providing users
with a platform to create accounts and manage their registration information securely.
 Through this project, one can gain insights into form validation, event handling, and user
interactions using JavaScript, offering a foundation for more comprehensive web applications with real
server-side interactions.
7. REFERENCE:-
https://chat.openai.com/chat
https://www.geeksforgeeks.org/
https://www.w3schools.com/in/
8. ACTUAL RESOURCES USED:-
Sr Object Specification Quantity Remark

no.
01 Computer system Computer 1
(i5 preferable 8GB RAM
band onward)
02 Software VS Code and Browser 1
03 Any other resources MS word, Chrome 1
used.
9. SKILL DEVELOPED/LEARNING OUTCOMES OF THE MICRO-PROJECT: -

1. Debugging skills: During the development process, programmers will encounter errors and bugs that
require debugging. This process can help them learn how to debug their code and identify and fix
errors.
2. Problem-solving: Programming requires problem-solving skills to think through different scenarios
and come up with solutions to overcome potential obstacles.
Signature of teacher Signature of HOD

Prof. Kadlag. S. U Prof.Chaudhari N.K

Css Report

Uploaded by

Document Information

Original Title

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

Css Report

Uploaded by

Copyright:

Available Formats

A

“Registration Portal for Various Internship Domain”

09] Lohote Shravani Dashrath (2100800487)

Under The Guidance Of

Amrutvahini Polytechnic, Sangamner

“Registration Portal for Various Internship Domain”

In partial fulfilment of the requirement for the diploma in

Prof. Kadlag S.U Prof.Chaudhari N.K

Roll no Name of Student Enrollment No

Sr.No Contents Page No.

2. AIMS AND BENEFITS: -

JavaScript email validation

What are Cookies ?

A regular expression is an object that describes a pattern of characters.

<div class="col-sm col-md col-lg mt-4 custom-column ">

 Education Details Page:

 Review Details Page:

8. ACTUAL RESOURCES USED:-

Sr Object Specification Quantity Remark

9. SKILL DEVELOPED/LEARNING OUTCOMES OF THE MICRO-PROJECT: -

Signature of teacher Signature of HOD

You might also like