AI Cover Letter Generator UI | HTML CSS JavaScript

AI Cover Letter Generator UI with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #12

Project Overview

The AI Cover Letter Generator UI is an interactive project built using HTML, CSS, and JavaScript. It provides a simple interface where users can enter their personal and job-related information and instantly generate a professional cover letter. It collects details such as the user’s name, job role, company name, skills, and brief experience. After clicking the Generate Cover Letter button, JavaScript combines these inputs with a predefined cover letter template and displays the generated content inside an output textarea.

Users can also copy the generated cover letter, making it easy to reuse the content for job applications. This project is useful for learning form input handling, template literals, DOM manipulation, dynamic content generation, textarea handling, and clipboard-related functionality in JavaScript.

Key Features

Personal Information Input: Users can enter their name through a dedicated input field and the name is automatically included in the generated cover letter.
Job Role Input: It provides a field for the position the user wants to apply for. The selected role is dynamically inserted into the cover letter.
Company Name Input: Users can specify the company they are applying to. JavaScript uses this value throughout the generated letter where appropriate.
Skills Input: Users can provide their relevant skills in a comma-separated format. These skills are included in the experience section of the generated cover letter.
Experience Input: A textarea allows users to provide brief information about their experience. This information is inserted into the generated cover letter.
Generate Cover Letter: The Generate Cover Letter button calls the generateLetter() function, which collects all entered values and creates the letter using a predefined template.
Dynamic Cover Letter: JavaScript generates the letter dynamically using template literals. User-provided values are inserted into specific parts of the predefined content.
Generated Letter Preview: The generated content is displayed inside a separate textarea under the Generated Cover Letter heading, allowing users to view and edit the generated text.
Editable Output: Because the generated letter is placed inside a textarea, users can modify the content before copying or using it elsewhere.
Clean UI Design: The application uses a centered white container with rounded corners and a subtle box shadow over a dark blue page background.

What You'll Learn

How to create structured input fields for user information.
How to collect input values using document.getElementById().
How to generate dynamic text using JavaScript template literals.
How to insert user input into predefined content.
How to work with textareas in HTML and JavaScript.
How to update the value of a textarea dynamically.
How to create reusable JavaScript functions.
How to implement a copy-to-clipboard interaction.
How to use .select() to select textarea content.
How to use document.execCommand("copy").
How to create a clean card-based interface using CSS.
How to style buttons and add hover effects.

HTML Code

The HTML code creates the main structure of the cover letter generator. The .container holds the complete application, including the heading, input fields, generated output area, and buttons. Five input areas are provided for the user’s name, job role, company name, skills, and brief experience. Each field has a unique ID so that JavaScript can easily retrieve its value.

The Generate Cover Letter button calls the generateLetter() function when clicked. Below it, an <h2> heading introduces the generated letter section, followed by the output textarea where the generated content appears. A second button calls the copyLetter() function to copy the generated cover letter. The HTML also connects the external style.css and script.js files.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AI Cover Letter Generator</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h1>AI Cover Letter Generator</h1>

<input id="name" placeholder="Your Name">
<input id="role" placeholder="Job Role">
<input id="company" placeholder="Company Name">
<input id="skills" placeholder="Skills (comma separated)">

<textarea id="experience" placeholder="Brief Experience"></textarea>

<button onclick="generateLetter()">Generate Cover Letter</button>

<h2>Generated Cover Letter</h2>

<textarea id="output" placeholder="Your cover letter will appear here..."></textarea>

<button onclick="copyLetter()">Copy Letter</button>

</div>

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

</body>
</html>

CSS Code

The CSS starts with a universal reset that removes default margins and padding and applies box-sizing: border-box to all elements. Arial is used as the primary font and the body selector creates the overall layout using Flexbox. The dark blue #042354 background, justify-content: center, and align-items: center properties position the application in the center of the viewport.

This .container class creates the main white card with 30px padding, a 600px width, rounded corners, and a subtle box shadow. The h1 and h2 selectors provide spacing around the headings, input, textarea selector gives all form fields the same width, padding, border, and rounded corners, textarea selector then sets the height to 120px and disables resizing.

The button selector creates full-width blue buttons with white text, rounded corners, bold text, and a pointer cursor. Finally, button:hover changes the button background from #2563eb to #1d4ed8 when the user moves the cursor over it.

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
padding:20px;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:600px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

h1{
margin-bottom:20px;
}

h2{
margin-top:20px;
margin-bottom:10px;
}

input,textarea{
width:100%;
padding:10px;
margin-bottom:10px;
border-radius:6px;
border:1px solid #ddd;
}

textarea{
height:120px;
resize:none;
}

button{
width:100%;
padding:12px;
background:#2563eb;
border:none;
color:white;
border-radius:6px;
cursor:pointer;
font-weight:bold;
margin-top:5px;
}

button:hover{
background:#1d4ed8;
}

Javascript Code

The JavaScript contains two main functions: generateLetter() and copyLetter(). The generateLetter() function retrieves the values from the name, role, company, skills, and experience fields using document.getElementById(). A template literal is then used to construct the complete cover letter. Variables such as ${name}, ${role}, ${company}, ${skills}, and ${experience} allow the user’s information to be inserted dynamically into the predefined letter structure and the generated text is assigned to the value property of the output textarea, so the user can immediately view and edit the result.

The copyLetter() function selects the generated text using .select() and then calls document.execCommand("copy") to copy it. After the copy operation, an alert displays “Cover letter copied!” to provide feedback to the user.

function generateLetter(){

const name=document.getElementById("name").value
const role=document.getElementById("role").value
const company=document.getElementById("company").value
const skills=document.getElementById("skills").value
const experience=document.getElementById("experience").value

const letter = `Dear Hiring Manager,

My name is ${name}, and I am excited to apply for the ${role} position at ${company}.

With my experience in ${skills}, I believe I can contribute effectively to your team. ${experience}

I am passionate about delivering quality work and continuously improving my skills to support company goals.

I would welcome the opportunity to discuss how my skills and experience can benefit ${company}.

Thank you for your time and consideration.

Sincerely,
${name}
`

document.getElementById("output").value = letter

}

function copyLetter(){

const text=document.getElementById("output")

text.select()

document.execCommand("copy")

alert("Cover letter copied!")

}