MICROPROJECT_CSS resume.pdf client side scripting

Amrutvahini Polytechnic, Sangamner
Academic Year: 2023 -2024
Report
On
Micro Project
TITLE:- Resume Building Using JavaScript
Program Code: Computer Technology Department
Course Name: Client Side Scripting Language
Course Code: 22519
Submitted by
Roll No. – 02 Name. – Sham Sanjay Pawar
Roll No. – 08 Name. -Krushna Vilas Pansare
Roll No. – 09 Name. -Phad Vaijanath Changdev
Submitted to
Ms. Baheti S.S.

MAHARASHTRA STATE BOARD OF
TECHNICAL EDUCATION
Certificate
This is to certify that Mr. Phad Vaijanath Changdev
Roll No. 09 of fifth Semester Diploma in Computer Technology Dept(CM5I) of
Amrutvahini Polytechnic (0080) has completed the Microproject satisfactory in
Subject Client Side Scripting Language (22519) for the academic year 2023 to 2024 as
prescribed in the MSBTE curriculum.
Place: Sangamner Enrollment No.: 2100800293
Date: Exam Seat No.:
Subject Teacher Head of the Department Principal
Seal of
Institutio
n

Annexure – II
Micro-Project Report
Title of Micro-Project: - TO DO LIST WEB APPLICATION
1.0 Rationale
This project aims to provide a practical hands-on experience in web
development forstudents, combining fundamental web technologies such as
HTML, CSS, and JavaScript to create a functional and user-friendly
application. A to-do list application is a widely used for Resume building ,
enhancing productivity and organization skills. This project allows students to
explore the principles of responsive web design, interactivity, and user
experience, which are essential skillsin modern web development. Ultimately,
the report will document the learning process, challenges, and outcomes,
serving as a valuable reference for both studentsand educators interested in
web development education.
2.0 Aims/Benefits of the Micro-Project:-
Aims:- The aim of a resume generator in JavaScript is to automate and streamline the
process of creating professional resumes. It provides a user-friendly interface where
individuals can input their information, and the generator uses JavaScript code to forma
t and arrange the content into a well-structured resume template. This saves time and
ensures consistency in formatting. Additionally, it may allow for customization options,
enabling users to choose different layouts, styles, and sections to suit their needs.
Ultimately, the goal is to make it easier for individuals to create high-quality resumes
efficiently.
Benefits:
1. Efficiency: It streamlines the resume creation process, saving time and effort compared to
manually formatting a resume.
2. Consistency: It ensures uniform formatting and styling, preventing inconsistencies that can
occur when creating a resume from scratch.
3. Customization: Users can typically choose from various templates and styles, allowing
them to tailor their resume to specific industries or preferences.
4. Ease of Update: It's usually easy to update information in a generator, making it
convenient for individuals to keep their resumes current.
5. Interactivity: JavaScript can enable features like interactive elements that make the resume
more engaging for viewers

3.0 Course Outcomes Addressed
Co. No. Course Outcome Statement
CI505.1 Use3 different program flow control structure for design interactive web pages .
CI505.2 Exceute3 programs on Arrays and functions in Java script.
CI505.3 Implement3 event based web forms and handling cookies using Java script.
CI505.4 Apply3 regular expressions for validations to design interactive webpages.
CI505.5 Implement3 Menus and navigations in web Pages.
4.0 Literature Review
A literature review for a resume-building micro-project would typically involve
researching and summarizing relevant literature on topics related to resume writing,
career development, and micro-projects. Here's a brief overview of what such a literature
review might include:
1. Resume Writing and Best Practices: - Explore academic and professional articles that
discuss the best practices for resume writing, such as formatting, content, and style.
2. Career Development and Employability:- Investigate studies on the impact of effective
resume writing on career development and employability.
3. Micro-Projects in Education:- Research literature on micro-projects as a pedagogical
tool, how they enhance learning, and their effectiveness in teaching
resume-building skills.
4. Digital Tools and Platforms:- Examine sources that discuss the role of digital tools and
online platforms in simplifying resume creation and whether they aid the learning process.
5. User Experience and Design:- Consider research on the user experience (UX)
and design aspects of resume-building tools, which can impact their effectiveness.
6.Psychological Aspects of Resume Writing:- Review studies that explore the
psychological factors involved in crafting a compelling resume,
including self-presentation and self-efficacy.
7. Feedback and Peer Review:- Investigate the impact of peer review and feedback
mechanisms in micro-projects for improving resume quality.

5.0 Actual Methodology Followed :
1. Design the User Interface (UI): Plan the layout with sections like personal information,
education,work experience, skills, etc. Use HTML for structuring the UI elements.
2. Implement Data Storage: Decide how and where user data will be stored. This can be in-
memory(not persistent) or using technologies like localStorage, sessionStorage,
or a backend database ifyou're building a full-stack application.
3. Collect User Input: Use HTML forms to collect information like personal details,
education, workexperience, etc.
2. Validate User Input: Implement JavaScript functions to validate the data entered by
the user. This ensures that the information provided is accurate and complete.
3. Create Template: Design different resume templates using HTML and CSS. You can
use CSS for styling and layout, and placeholders (like `{{name}}`, `{{education}}`,
etc.) that will be replaced with actual user data.
4. Generate the Resume: Write JavaScript functions to take the user's input and populate
thecorresponding fields in the chosen template.
5. Export Options: Provide options to export the resume. This can be in formats like PDF
or Word documents. You might need to use additional libraries or APIs for this.
6. User Feedback and Improvement: Gather user feedback and make improvements to
enhance the user experience.
6.0 Actual Resources
Sr.
No.
Name of Resource/material Specifications Quantity Remarks
1.
Computer System with broad
specifications
MacBook Air M1
1
2. Operating System Mac OS
3. Software VS Code
4. Keyboard -
5. Mouse -

7.0 Outputs of the Micro-Projects:
//CODE
//HTML CODE (resume.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Resume Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<nav class = "navbar bg-white">
<div class="container">
<div class = "navbar-content">
<div class = "brand-and-toggler">
<a href = "index.html" class = "navbar-brand">
<img src = "assets/images/curriculum-vitae.png" alt = "" class = "navbar-brand-icon">
<span class = "navbar-brand-text">build <span>resume.</span>
</a>
<button type = "button" class = "navbar-toggler-btn">
<div class = "bars">
<div class = "bar"></div>
</div>
</button>
</div>
</div>
</div>
</nav>
<section id = "about-sc" class = "">
<div class = "container">
<div class = "about-cnt">
<form action="" class="cv-form" id = "cv-form">
<div class = "cv-form-blk">
<div class = "cv-form-row-title">
<h3>about section</h3>
</div>
<div class = "cv-form-row cv-form-row-about">
<div class = "cols-3">
<div class = "form-elem">
<label for = "" class = "form-label">First Name</label>
<input name = "firstname" type = "text" class = "form-control firstname"
id = "" onkeyup="generateCV()" placeholder="enter the first name">
<span class="form-text"></span>
</div>
<label for = "" class = "form-label">Middle Name <span class = "opt-
text"> (optional)</span> </label>
<input name = "middlename" type = "text" class = "form-control middlename" id = ""
onkeyup="generateCV()" placeholder="enter the middle name">
</div>
<label for = "" class = "form-label">Last Name</label>

<input name = "lastname" type = "text" class = "form-control lastname" id = ""
onkeyup="generateCV()" placeholder="enter the last name">
</div>
</div>
<div class="cols-3">
<label for = "" class = "form-label">Your Image</label>
<input name = "image" type = "file" class = "form-control image" id = ""
accept = "image/*" onchange="previewImage()">
</div>
<label for = "" class = "form-label">Designation</label>
<input name = "designation" type = "text" class = "form-control
designation" id = "" onkeyup="generateCV()" placeholder="enter the designation">
</div>
<label for = "" class = "form-label">Address</label>
<input name = "address" type = "text" class = "form-control address" id = ""
onkeyup="generateCV()" placeholder="enter the adress">
</div>
</div>
<label for = "" class = "form-label">Email</label>
<input name = "email" type = "text" class = "form-control email" id = ""
onkeyup="generateCV()" placeholder="e.g. johndoe@gmail.com">
</div>
<label for = "" class = "form-label">Phone No:</label>
<input name = "phoneno" type = "text" class = "form-control phoneno" id = ""
onkeyup="generateCV()" placeholder="+91 7757037797">
</div>
<label for = "" class = "form-label">Summary</label>
<input name = "summary" type = "text" class = "form-control summary" id = ""
onkeyup="generateCV()" placeholder="e.g. Doe">
</div>
</div>
</div>
</div>
<div class="cv-form-blk">
<h3>achievements</h3>
</div>
<div class = "row-separator repeater">
<div class = "repeater" data-repeater-list = "group-a">
<div data-repeater-item>
<div class = "cv-form-row cv-form-row-achievement">
<label for = "" class = "form-label">Title</label>
<input name = "achieve_title" type = "text" class = "form-control achieve_title"
id = "" onkeyup="generateCV()"placeholder="title">
</div>
<label for = "" class = "form-label">Description</label>

<input name = "achieve_description" type = "text" class = "form-control
achieve_description" onkeyup="generateCV()" placeholder="discriptioyour achievements">
</div>
</div>
<button data-repeater-delete type = "button" class = "repeater-remove-btn">-</button>
</div>
</div>
</div>
<button type = "button" data-repeater-create value = "Add" class = "repeater-add-
btn">+</button>
</div>
</div>
<h3>experience</h3>
</div>
<div class = "repeater" data-repeater-list = "group-b">
<div class = "cv-form-row cv-form-row-experience">
<div class = "form-elem"
<label for = "" class = "form-label">Title</label>
<input name = "exp_title" type = "text" class = "form-control exp_title"
id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">Company / Organization</label>
<input name = "exp_organization" type = "text" class = "form-control
exp_organization" id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">Location</label>
<input name = "exp_location" type = "text" class = "form-control
exp_location" id = "" onkeyup="generateCV()">
</div>
</div>
<label for = "" class = "form-label">Start Date</label>
<input name = "exp_start_date" type = "date" class = "form-control
exp_start_date" id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">End Date</label>
<input name = "exp_end_date" type = "date" class = "form-control
exp_end_date" id = "" onkeyup="generateCV()">
</div>
<input name = "exp_description" type = "text" class="form-control exp_description"
</div>
</div>
</div>

</div>
</div>
<button type = "button" data-repeater-create value = "Add" class = "repeater-add-
btn">+</button>
</div>
</div>
<h3>education</h3>
</div>
<div class = "repeater" data-repeater-list = "group-c">
<label for = "" class = "form-label">College</label>
<input name = "edu_school" type = "text" class = "form-control
edu_school" id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">Degree</label>
<input name = "edu_degree" type = "text" class = "form-control edu_degree" id = ""
onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">City</label
<input name = "edu_city" type = "text" class = "form-control edu_city"
</div>
</div>
<label for = "" class = "form-label">Start Date</label>
<input name = "edu_start_date" type = "date" class = "form-control
edu_start_date" id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">End Date</label>
<input name = "edu_graduation_date" type = "date" class = "form-control
edu_graduation_date" id = "" onkeyup="generateCV()">
</div>
<input name = "edu_description" type = "text" class = "form-control edu_description"
</div>
</div>
</div>
</div>
</div>
<button type = "button" data-repeater-create value = "Add" class = "repeater-add-btn">+</button>
</div>
</div>

<h3>projects</h3>
</div>
<div class = "repeater" data-repeater-list = "group-d">
<label for = "" class = "form-label">Project Name</label>
<input name = "proj_title" type = "text" class = "form-control proj_title" id = ""
</div>
<label for = "" class = "form-label">Project link</label>
<input name = "proj_link" type = "text" class = "form-control proj_link" id = ""
</div>
<input name = "proj_description" type = "text" class = "form-control proj_description"
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>skills</h3>
</div>
<div class = "repeater" data-repeater-list = "group-e">
<div class = "cv-form-row cv-form-row-skills">
<label for = "" class = "form-label">Skill</label>
<input name = "skill" type = "text" class = "form-control skill"
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
<section id = "preview-sc" class = "print_area">

<div class = "preview-cnt">
<div class = "preview-cnt-l bg-green text-white">
<div class = "preview-blk">
<div class = "preview-image">
<img src = "" alt = "" id = "image_dsp">
</div>
<div class = "preview-item preview-item-name">
<span class = "preview-item-val fw-6" id = "fullname_dsp"></span>
</div>
<div class = "preview-item">
<span class = "preview-item-val text-uppercase fw-6 ls-1" id = "designation_dsp"></span>
</div>
</div>
<div class = "preview-blk-title">
<h3>about</h3>
</div>
<div class = "preview-blk-list">
<span class = "preview-item-val" id = "phoneno_dsp"></span>
</div>
<span class = "preview-item-val" id = "email_dsp"></span>
</div>
<span class = "preview-item-val" id = "address_dsp"></span>
</div>
<span class = "preview-item-val" id = "summary_dsp"></span>
</div>
</div>
</div>
<h3>skills</h3>
</div>
<div class = "skills-items preview-blk-list" id = "skills_dsp">

</div>
</div>
</div>
<div class = "preview-cnt-r bg-white">
<h3>Achievements</h3>
</div>
<div class = "achievements-items preview-blk-list" id = "achievements_dsp"></div>
</div>
<h3>educations</h3>
</div>
<div class = "educations-items preview-blk-list"
id = "educations_dsp"></div>
</div>

<h3>experiences</h3>
</div>
<div class = "experiences-items preview-blk-list" id = "experiences_dsp"></div>
</div>
<h3>projects</h3>
</div>
<div class = "projects-items preview-blk-list" id = "projects_dsp"></div>
</div>
</div>
</div>
</div>
</section>
<section class = "print-btn-sc">
<button type = "button" class = "print-btn btn btn-primary"
onclick="printCV()">Print CV</button>
</div>
</section>

<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-
a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"
integrity="sha512-b
ZAXvpVfp1+9AUHQzekEZaXclsgSlAeEnMJ6LfFAvjqYUVZfcuVXeQoN5LhD7Uw0Jy4NCY9q3kbdEXbwhZUmUQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src = "assets/js/script.js"></script>

<script src="assets/js/app.js"></script>
</body>
</html>
/ /(index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<nav class = "navbar bg-white">
<div class = "navbar-content">
<div class = "brand-and-toggler">
<a href = "index.html" class = "navbar-brand">
<img src = "assets/images/curriculum-vitae.png" alt = "" class = "navbar-brand-icon">

<span class = "navbar-brand-text">build <span>resume.</span>
</a>
<button type = "button" class = "navbar-toggler-btn">
<div class = "bars">
</div>
</button>
</div>
</div>
</div>
</nav>
<header class = "header bg-bright" id = "header">
<div class = "header-content text-center">
<h6 class = "text-uppercase text-blue-dark fs-14 fw-6 ls-1">online resume builder</h6>
<h1 class = "lg-title">Only 2% of resumes make it pas the first round. Be in the top 2%</h1>
<p class = "text-dark fs-18">Use professional field-tested resume templates that
follow that exact 'resume rules'employers look for. Easy to use and done within
minutes - try now for free!</p>
<a href = "resume.html" class = "btn btn-primary text-uppercase">create my resume</a>
<img src = "assets/images/dublin-resume-templates.avif">
</div>
</div>
</header>
<div class="section-one">
<div class = "section-one-content">
<div class="section-one-l">
<img src = "assets/images/visual-
0c7080adf17f1f207276f613447c924f667dab34b7ac415cd7ef653172defd0b.svg">
</div>
<div class = "section-one-r text-center">
<h2 class = "lg-title">Use the best resume maker as your guide!</h2>
<p class = "text">Getting that dream job can seem like an impossible task.
We're here to change that. Give yourself a real advantage with
the best online resume maker: created by experts, imporved by data,
trusted by millions of professionals.</p>
<div class = "btn-group">
<a href = "resume.html" class = "btn btn-primary text-uppercase">create my resume</a>
<a href = "#" class = "btn btn-secondary text-uppercase">watch video</a>
</div>
</div>
</div>
</div>
</div>
<div class = "section-two bg-bright">
<div class="section-two-content">
<div class = "section-items">
<div class = "section-item">
<div class = "section-item-icon">
<img src = "assets/images/feature-1-
edf4481d69166ac81917d1e40e6597c8d61aa970ad44367ce78049bf830fbda5.svg" alt = "">
</div>
<h5 class = "section-item-title">Make a resume that wins interviews!</h5>
<p class = "text">Use our resume maker with its advanced creation tools to tell
professional story that engages recruiters, hiring managers and even CEOs.</p>
</div>

<img src = "assets/images/feature-2-a7a471bd973c
2a55d1b3f8aff578cd3c9a4c5ac4fc74423d94ecc04aef3492b.svg" alt = "">
</div>
<h5 class = "section-item-title">Resume writing made easy!</h5>
<p class = "text">Resume writing has never been this effortless. Pre-generated text,
visual designs and more - all already integrated into the resume maker.
Just fill in your details.</p>
</div>
<img src = "assets/images/feature-3-
4e87a82f83e260488c36f8105e26f439fdc3ee5009372bb5e12d9421f32eabdd.svg" alt = "">
</div>
<h5 class = "section-item-title">A recruiter-tested CV maker tool</h5>
<p class = "text">Our resume builder and its pre-generated content are
tested by recruiters and IT experts.+++ We help your CV become truly competitive in
the hiring process.</p>
</div>
</div>
</div>
</div>
</div>
<footer class = "footer bg-dark">
<div class = "footer-content text-center">
<p class="fs-15">©Copyright 2022. All Rights Reserved -
<span>build.resume</span></p>
</div>
</div>
</footer>
</body>
</html>

8. Skill Developed / Learning outcomes:
● Analyzing the problem
● Problem solving approach
● Planning
● Design skill
● Logical skill
● Programming
● Testing and Troubleshooting
● Presentation
● Report writing

9. Applications of the Micro-Project:
• Job Seekers: Create and update professional resumes to apply for various job
positions.
• Students: Develop resumes for internship applications and post-graduation
employment.
• Graduates: Craft effective resumes for entry-level positions.
• Career Changers: Modify resumes to highlight transferable skills and relevant
experience.
• Freelancers: Generate profiles that showcase skills and achievements.
• Recruiters: Create candidate profiles to maintain a database of potential hires.
• HR Departments: Standardize and format resumes for consistency in hiring
processes.
• Educational Institutions: Assist students in building academic and professional
resumes.
• Job Portals: Offer a resume-building feature for users to populate their profiles.
• Professional Development Services: Provide a tool to help clients create
compelling resumes.
Teacher Signature
(Ms. S.S.Baheti)

Amrutvahini Polytechnic, Sangamner
Computer Technology Department
Annexure –III & IV (Rubrics & Micro Project Evaluation Sheet)
Name of Student:Phad Vaijjanath Changdev Enrollment No:2100800293
Name of Program:Computer Tech Semester:5th
Course Title:CSSCode:22519
Title of Micro Project:Resume Building Using Javascript
Course Outcomes: Use3
different program flow control structure for design interactive web pages .
Exceute3
programs on Arrays and functions in Java script.
Implement3
event based web forms and handling cookies using Java script.
Apply3
regular expressions for validations to design interactive webpages.
Implement3
Menus and navigations in web Pages.
Criteria
Indicators for different levels of performance evaluation scale (1 to 2)
A) Process & Product Assessment (Performance in Group Activity Out of 6)
Poor (1) Marks Average (1.5) Marks Good (2) Marks
Literature
review /
Information
collection
No reference is used
only taken material
from Google and copy
pasted
At least one reference
website or book is referred
to collect literature or
information
At least two
references website
or book are referred
to collect literature
or information
a) Quality of
prototype/
model / chart /
drawing
b) Quality of
project report
(for study
project)
fabrication / assembly /
survey
b) Most of the content
is non-relevant. Report
/ drawing is not
formatted as per
instructions.
a) Just assembled /
fabricated, not in proper
shape, dimensions /
average survey
b) Most of the portion in
project report irrelevant
and is formatted but some
of the portion is remaining
to format.
a) Well assembled /
fabricated with
proper shape
dimensions / well
defined survey
b) Everything in the
project report is
formatted as per
the instructions
given.
Timely
submission.
No previous review and
submission after the
given date.
No previous review but
submission on or before
given date.
Reviewed &
submission on or
before given date.
Criteria
Indicators for different levels of performance evaluation scale (1 to 2)
B) Individual Presentation/Viva (Out of 4)
Poor (1) Marks Average (1.5) Marks Good (2) Marks
Presentation
of the micro
project
Major information is
not included,
information is not well
organized
Included major
information but not well
organized and not
presented well
Well organized,
included major
information, well
presented
Answer to
sample
questions
(Oral)
Could not reply to
considerable number
of question.
Replied to considerable
number of questions but
not very properly.
Replied most of the
questions properly.
(A)
Process & ProductAssessment
(06)
(B)
Individual Presentation/Viva
(04)
Total Marks
(10)
Comments/ Suggestions about team work/leadership/Inter-personal communication (if Any)
Name & Designation of the Teacher:
Dated Signature:

MICROPROJECT_CSS resume.pdf client side scripting

Recommended

Recommended

More Related Content

Similar to MICROPROJECT_CSS resume.pdf client side scripting

Similar to MICROPROJECT_CSS resume.pdf client side scripting (20)

Recently uploaded

Recently uploaded (20)

MICROPROJECT_CSS resume.pdf client side scripting