AI Resume Skill Analyzer | HTML CSS JavaScript Tool

AI Resume Skill Analyzer with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #11

Project Overview

An AI Resume Skill Analyzer built using HTML, CSS, and JavaScript that helps users evaluate how well their resume matches required job skills. Users can paste their resume content and enter the desired skills for a job role, and the tool analyzes the text to identify matching skills and calculate a skill match score. This project demonstrates concepts such as text processing, keyword matching, dynamic result generation, and DOM manipulation, making it a practical frontend project for learning how resume screening tools work.

Key Features

Paste resume text to analyze skills instantly
Enter job-required skills for comparison
Automatic detection of matching skills in the resume
Display skill match percentage score
Highlight detected skills as visual tags
Clean and responsive user interface
Real-time analysis using JavaScript logic
Interactive results generated through DOM manipulation

HTML Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AI Resume Skill Analyzer</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h1>AI Resume Skill Analyzer</h1>

<textarea id="resumeText" placeholder="Paste your resume here..."></textarea>

<input type="text" id="jobSkills" placeholder="Required Skills (comma separated)">

<button onclick="analyzeResume()">Analyze Resume</button>

<div class="result" id="result"></div>

</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;
}

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

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

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

button:hover{
background:#1d4ed8;
}

.result{
margin-top:20px;
}

.skill{
display:inline-block;
background:#2563eb;
color:white;
padding:5px 10px;
margin:5px;
border-radius:20px;
font-size:12px;
}

.score{
font-size:18px;
font-weight:bold;
margin-bottom:10px;
}

Javascript Code

function analyzeResume(){

const resumeText = document.getElementById("resumeText").value.toLowerCase()

const jobSkills = document.getElementById("jobSkills").value
.toLowerCase()
.split(",")
.map(skill => skill.trim())

const resultDiv = document.getElementById("result")

if(resumeText === "" || jobSkills.length === 0){
resultDiv.innerHTML = "Please enter resume and skills"
return
}

let matchedSkills = []

jobSkills.forEach(skill => {

if(resumeText.includes(skill)){
matchedSkills.push(skill)
}

})

let score = Math.round((matchedSkills.length / jobSkills.length) * 100)

resultDiv.innerHTML = `

<div class="score">Skill Match Score: ${score}%</div>

<h3>Matched Skills</h3>

<div>
${matchedSkills.map(skill => `<span class="skill">${skill}</span>`).join("")}
</div>

`

}