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

An AI Cover Letter Generator UI built using HTML, CSS, and JavaScript with a modern and responsive interface. The application allows users to enter details such as their name, job role, company name, and relevant skills to generate a professional cover letter format instantly. This project demonstrates frontend concepts such as form handling, dynamic content generation, DOM manipulation, and responsive UI design, making it a useful beginner project for understanding how AI-based writing tools work.

Key Features

Input form to enter personal and job-related details
Instant generation of a professional cover letter layout
Dynamic content rendering using JavaScript
Clean and modern user interface design
Responsive layout for desktop and mobile devices
User-friendly form experience
Editable generated cover letter text
Interactive UI powered by JavaScript DOM manipulation

HTML Code

<!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

*{
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

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!")

}