极客教程使用HTML CSS和JavaScript创建动态简历生成器
为求职者创建一个设计精美、专业的简历可能是一项具有挑战性和耗时的任务。许多人在格式化、组织信息以及确保简历脱颖而出方面遇到困难。为了解决这个问题，开发了一个简历生成器项目，简化简历构建过程，为用户提供一个用户友好的界面，轻松生成有效的简历。
先决条件
方法
- 创建一个HTML表单，其中包含简历信息的输入字段。
- 使用JavaScript在输入表单和简历预览之间切换。
- 从表单中检索用户输入，并动态填充预览。
- 包含一个用于打印简历的按钮。
- 使用CSS为所需的布局和设计样式元素。
示例: 在本例中，我们将使用HTML，CSS和JavaScript来说明动态简历创建器。
HTML
<!-- 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" />
<title>Resume Creator</title>
<!-- style link here -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- input container starts here -->
<section class="resume-builder">
<div class="container">
<h1>Resume Creator</h1>
<div class="resume_container">
<form class="inputField">
<input type="text"
name="name"
placeholder="Your Name"
title="Enter Your Name" />
<input type="text"
name="title"
placeholder="Title/Sub Heading"
title="Enter Title/Sub Heading" />
<textarea name="work_experience"
placeholder="Work Experience"
cols="40" rows="3"
title="Enter Your Work Experience">
</textarea>
<textarea name="academic_details"
placeholder="Academic Details"
cols="40" rows="3"
title="Enter Your Academic Details">
</textarea>
<input type="text" placeholder="Objective"
title="Enter Your Objective"
name="objective" />
<textarea name="skills"
title="Enter Your Skills"
placeholder="Skills" cols="40"
rows="3">
</textarea>
<textarea name="projects"
title="Enter Your Projects"
placeholder="Projects"
cols="40"
rows="3">
</textarea>
<textarea name="achievements"
placeholder="Achievements"
cols="40" rows="3"
title="Enter Your Achievements">
</textarea>
<textarea name="contact"
placeholder="Contact Information"
cols="40" rows="3"
title="Enter Your Contact Information">
</textarea>
</form>
</div>
<p class="credit">
Created by
<a href=
"https://auth.geeksforgeeks.org/user/lunatic1/articles"
target="_blank">
lunatic1
</a>
</p>
<p class="tip">
**You can use markup in the text area for text decoration**
</p>
</div>
</section>
<!-- input container ends here -->
<!-- output container starts here -->
<div class="output_container"></div>
<!-- output container ends here -->
<!-- preview button -->
<button onclick="hide()">
Generate / Edit
</button>
<!-- script link here -->
<script src="script.js"></script>
</body>
</html>
CSS
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(rgb(30, 30, 30), rgb(80, 80, 80));
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
}
.resume-builder {
padding: 27px 100px;
}
.container {
padding: 10px 30px;
background: rgb(240, 240, 240);
border-radius: 10px;
height: auto;
width: 60%;
margin: auto;
}
.container h1 {
text-align: center;
background-color: rgb(50, 50, 50);
padding: 10px;
color: white;
margin-bottom: 20px;
}
input,
textarea {
background-color: transparent;
margin: 10px 0;
padding: 5px;
outline: none;
border: none;
border-bottom: 2px solid black;
display: block;
width: 100%;
}
button {
border: none;
background-color: white;
padding: 15px;
border-radius: 7px;
font-weight: bold;
cursor: pointer;
display: block;
margin: auto;
margin-bottom: 20px;
}
button:hover {
font-size: medium;
}
.output-container {
display: none;
width: 60%;
margin: 10px auto;
}
.output {
background-color: white;
border: 2px solid white;
margin-bottom: 10px;
}
.heading {
padding: 20px 10px;
text-align: center;
color: white;
background-color: rgb(50, 50, 50);
text-transform: uppercase;
}
.heading h4 {
color: rgb(200, 200, 200);
padding-top: 9px;
}
.info {
display: flex;
padding: 20px;
}
.left {
width: 40%;
border-right: 2px dashed black;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.right {
width: 60%;
padding-left: 20px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.box {
margin: 10px 0;
padding: 5px 10px;
height: auto;
overflow-wrap: break-word;
}
.box h2,
.box p {
margin-bottom: 5px;
}
.tip {
font-size: small;
color: gray;
text-align: center;
}
.credit {
text-align: center;
font-weight: bold;
padding: 10px 3px;
color: rgb(80, 80, 80);
}
a {
color: black;
}
a:hover {
color: rgb(247, 28, 12);
font-weight: bold;
}
/* media queries begin */
@media screen and (max-width: 920px) {
.container {
width: 100%;
}
.output-container {
width: 87%;
}
}
@media screen and (max-width: 600px) {
.resume-builder {
padding: 10px 30px;
}
h1 {
font-size: 160%;
}
.info {
flex-direction: column;
}
.left {
border-right: none;
width: 100%;
}
.right {
padding-left: 0;
width: 100%;
}
}
/* media queries end here */
Javascript
// script.js
// Taking elements from HTML
const inputField = document.querySelector(".inputField");
const main = document.querySelector(".resume-builder");
const outputContainer = document.querySelector(".output_container");
let isHidden = true;
// Function to toggle between input form and resume preview
function hide() {
if (isHidden) {
// Hide the input form and show the resume preview
main.style.display = "none";
isHidden = false;
outputContainer.style.display = "block";
outputContainer.innerHTML = `
<div class="output">
<div class="heading">
<h1>{inputField["name"].value}</h1>
<h4>{inputField["title"].value}</h4>
</div>
<div class="info">
<div class="left">
<div class="box">
<h2>Objective</h2>
<p>{inputField["objective"].value}</p>
</div>
<div class="box">
<h2>Skills</h2>
<p>{inputField["skills"].value}</p>
</div>
<div class="box">
<h2>Academic Details</h2>
<p>{inputField["academic_details"].value}</p>
</div>
<div class="box">
<h2>Contact</h2>
<p>{inputField["contact"].value}</p>
</div>
</div>
<div class="right">
<div class="box">
<h2>Work Experience</h2>
<p>{inputField["work_experience"].value}</p>
</div>
<div class="box">
<h2>Achievements</h2>
<p>{inputField["achievements"].value}</p>
</div>
<div class="box">
<h2>Projects</h2>
<p>${inputField["projects"].value}</p>
</div>
</div>
</div>
</div>
<button onclick="print()">Print Resume</button>
`;
} else {
// Show the input form and hide the resume preview
main.style.display = "block";
isHidden = true;
outputContainer.style.display = "none";
outputContainer.innerHTML = "";
}
}
输出:
