How to create a JavaScript-based portfolio or resume builder?
13/03/2024
•
5
min
Creating a JavaScript-based portfolio or resume creator involves several steps, such as structuring the HTML content, styling it using CSS, and writing JavaScript code for user interactions. Here are the steps in detail:
Step 1: Setting Up the HTML Structure
We start by structuring our resume builder. Below we create a simple form capturing information usually present on a resume. Each input data represents a section on the resume itself. The id names and labels are self-explanatory.
<!DOCTYPE html>
<html>
<head>
<title>Resume Builder</title>
</head>
<body>
<form id="resumeForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="text" id="phone" name="phone"><br>
<label for="address">Address:</label><br>
<input type="text" id="address" name="address"><br>
<label for="summary">Summary:</label><br>
<input type="text" id="summary" name="summary"><br>
<input type="submit" value="Generate Resume">
</form>
<div id="resumeOutput"></div>
</body>
</html>
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Step 2: Styling with CSS
You're free to style your form and resume however you like, the following are just some simple samples of how you might go about it.
<style>
#resumeForm label {
font-weight:bold;
}
#resumeOutput {
border: 1px solid black;
padding: 20px;
margin-top: 20px;
}
</style>
Step 3: Writing the JavaScript Code
We handle the form submission event to extract form data and generate the resume.
<script>
document.getElementById('resumeForm').addEventListener('submit', function(e){
e.preventDefault();
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
var address = document.getElementById('address').value;
var summary = document.getElementById('summary').value;
var resumeHtml =
'<h1>' + name + '</h1>' +
'<h2>Contact</h2>' +
'<p>Email: ' + email + '</p>' +
'<p>Phone: ' + phone + '</p>' +
'<p>Address: ' + address + '</p>' +
'<h2>Summary</h2>' +
'<p>' + summary + '</p>';
document.getElementById('resumeOutput').innerHTML = resumeHtml;
});
</script>
Here, we are attaching an event to the submit button, so when clicked it takes in all values and puts them into the respective variables. These variables are later used to structure the content of the resume in an HTML format which is later output on the page.
Remember, the above example is a simple, basic, demonstration. To further enhance your portfolio/resume generator, you might want to add functionalities such as:
- More details, such as education, skills, and experience.
- A way to add multiple education or experience items.
- Better styling for the final resume.
- Option to download the resume as a PDF.
- Validations for the form inputs.
- Interactive user interface, using libraries such as React.js or Vue.js.
- Storing user resumes for later editing.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.