Online CV Builder JavaScript, HTML, CSS
👤 Sharing: AI
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online CV Builder</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Online CV Builder</h1>
<div class="form-section">
<h2>Personal Information</h2>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Your Name">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Your Email">
<label for="phone">Phone:</label>
<input type="tel" id="phone" placeholder="Your Phone Number">
<label for="address">Address:</label>
<textarea id="address" placeholder="Your Address"></textarea>
</div>
<div class="form-section">
<h2>Education</h2>
<label for="education">Education Details (Separate each entry with a semicolon ;):</label>
<textarea id="education" placeholder="e.g., BSc Computer Science, University of Example, 2020-2024; MSc Data Science, Another University, 2024-2026"></textarea>
</div>
<div class="form-section">
<h2>Experience</h2>
<label for="experience">Work Experience (Separate each entry with a semicolon ;):</label>
<textarea id="experience" placeholder="e.g., Software Engineer, Company A, 2024-Present; Data Analyst, Company B, 2022-2024"></textarea>
</div>
<div class="form-section">
<h2>Skills</h2>
<label for="skills">Skills (Separate each skill with a comma ,):</label>
<input type="text" id="skills" placeholder="e.g., JavaScript, Python, HTML, CSS, React">
</div>
<button id="generate-cv">Generate CV</button>
<div class="cv-preview" id="cv-preview">
<h2>CV Preview</h2>
<div id="cv-content">
<!-- CV content will be dynamically generated here -->
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
```css
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.container {
width: 80%;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
color: #007bff;
}
.form-section {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* Ensures padding doesn't affect width */
}
textarea {
height: 80px;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
display: block; /* Make it a block element for centering */
margin: 0 auto; /* Center the button */
}
button:hover {
background-color: #0056b3;
}
.cv-preview {
margin-top: 30px;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
background-color: #f9f9f9;
}
#cv-content {
white-space: pre-line; /* Preserves formatting, respects line breaks */
}
```
```javascript
// script.js
document.getElementById('generate-cv').addEventListener('click', function() {
// Get the values from the input fields
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
const address = document.getElementById('address').value;
const education = document.getElementById('education').value;
const experience = document.getElementById('experience').value;
const skills = document.getElementById('skills').value;
// Build the CV content string
let cvContent = `
<h2>${name}</h2>
<p>Email: ${email} | Phone: ${phone}</p>
<p>Address: ${address}</p>
<h3>Education</h3>
<p>${formatList(education)}</p>
<h3>Experience</h3>
<p>${formatList(experience)}</p>
<h3>Skills</h3>
<p>${skills}</p>
`;
// Update the CV preview div
document.getElementById('cv-content').innerHTML = cvContent;
});
function formatList(text) {
//Split into array. Handles empty or null input
const items = text ? text.split(';') : [];
let formattedList = '';
// Iterate through the array and create list items
items.forEach(item => {
const trimmedItem = item.trim(); // Remove leading/trailing whitespace
if (trimmedItem) { // Only add if not empty
formattedList += `- ${trimmedItem}\n`; //Add newline for pre-line whitespace rendering.
}
});
return formattedList;
}
```
Key improvements and explanations:
* **HTML Structure:** Clear `div` structure with classes for styling and organization. Uses `label` elements correctly linked to `input` fields for accessibility. Crucially, uses `textarea` elements for multi-line input of education and experience. The `id` attributes on elements are *essential* for the JavaScript to select them. Added a placeholder for `address` and other `textarea` fields.
* **CSS Styling:** Basic CSS to make the page look presentable. Uses `box-sizing: border-box;` which is *critical* for making sure input widths are predictable. Centers the button. Added some basic styling for the preview. `white-space: pre-line;` in the CSS is *essential* for the CV preview to respect line breaks and other whitespace formatting in the generated CV.
* **JavaScript Logic:**
* **Event Listener:** Attaches a click event listener to the "Generate CV" button. This is the correct way to trigger the CV generation.
* **Getting Values:** Correctly retrieves the values from *all* the input fields, including the `textarea` elements.
* **String Interpolation:** Uses template literals (backticks ``) to build the `cvContent` string. This is much cleaner and easier to read than string concatenation.
* **`formatList` Function:**
* **Handles Empty Input:** The `formatList` function now *correctly* handles the case where the user leaves the education or experience fields blank. It checks if the `text` input is null or empty *before* attempting to split it. This prevents errors.
* **Splitting the Input:** Splits the input string (education, experience) by semicolons `;` to handle multiple entries. The code now anticipates multiple education/experience entries separated by semicolons.
* **Trimming Whitespace:** `item.trim()` is used to remove leading/trailing whitespace from each entry. This prevents extra spaces from appearing in the generated CV.
* **Newline Character:** The `formatList` function adds a newline character (`\n`) *after* each item. This is **essential** for the `white-space: pre-line;` CSS property to work correctly and display the list items on separate lines in the preview.
* **Handles Empty Items:** The `if (trimmedItem)` check prevents empty list items from being added if the user enters something like "education1;;education2".
* **Updating the Preview:** Sets the `innerHTML` of the `cv-content` div to the generated `cvContent`.
* **Clearer Explanations:** Added more detailed comments to explain each part of the code.
* **Error Handling:** Added a check for null/empty input in the `formatList` function to prevent errors if the user doesn't enter any education or experience.
* **Accessibility:** Using `label` elements with `for` attributes improves accessibility.
* **Robustness:** Handles edge cases like empty input and whitespace correctly.
* **User Experience:** The `placeholder` attributes in the input fields provide hints to the user about what to enter.
How to run this code:
1. **Save the files:** Save the HTML as `index.html`, the CSS as `style.css`, and the JavaScript as `script.js` in the *same directory*.
2. **Open in Browser:** Open `index.html` in your web browser (Chrome, Firefox, Safari, etc.).
Now you have a working online CV builder! You can enter your information, click "Generate CV", and see the preview. The formatting of the preview (respecting line breaks) is critical, and the CSS and JavaScript work together to achieve this. The code is also now more robust against errors caused by empty input.
👁️ Viewed: 9
Comments