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

The AI Resume Skill Analyzer is an interactive frontend project built using HTML, CSS, and JavaScript. It helps users compare their resume content with the skills required for a particular job. Users can paste their resume into a text area and enter required job skills in a comma-separated format. When users click the Analyze Resume button, JavaScript scans the resume text and checks whether it contains each required skill. The application then calculates a Skill Match Score based on the number of matched skills and displays the results dynamically.

Matched skills appear as blue tags, making them easy to identify and this project uses keyword matching rather than an actual AI model or machine learning system. It is useful for learning string manipulation, arrays, loops, conditional statements, DOM manipulation etc.

Key Features

Resume Text Input: Users can paste their resume content into a large textarea and it uses this text as the basis for comparing skills with job requirements.
Required Skills Input: Users can enter the skills required for a job in a comma-separated format, such as HTML, CSS, JavaScript, React, and Node.js.
Resume Analysis: The Analyze Resume button triggers the analyzeResume() function. JavaScript processes the resume and required skills to identify matching keywords.
Case-Insensitive Matching: Both resume text and required skills are converted to lowercase. This allows the application to match skills without considering uppercase or lowercase differences.
Skill Separation: The required skills input is divided into individual values using the split(",") method. The map() method then removes unnecessary spaces using trim().
Matched Skills Detection: JavaScript checks whether the resume contains each required skill using the includes() method. Matching skills are added to the matchedSkills array.
Skill Match Score: It calculates a percentage score based on the number of matched skills divided by the total number of required skills. The result is rounded using Math.round().
Dynamic Results Display: The result section is updated using innerHTML. It displays the skill match percentage and a list of matched skills.
Skill Tags: Each matched skill appears inside a rounded blue tag. These tags help users identify which required skills were found in their resume.
Input Validation: If the resume or required skills field is empty, the application displays a message asking users to enter both values.
Simple User Interface: The CSS creates a centered white card with a dark blue background, rounded corners, padding, and a subtle shadow.
Responsive Container Sizing: The main container uses a fixed width of 600px and page padding. The provided CSS does not include a dedicated mobile media query.

What You'll Learn

How to collect textarea and input values with JavaScript.
How to convert text into lowercase using toLowerCase().
How to split comma-separated values using split().
How to remove extra spaces using trim().
How to use forEach() to loop through required skills.
How to search text using the includes() method.
How to store matched values in an array.
How to calculate percentages using JavaScript.
How to round numerical results with Math.round().
How to generate dynamic HTML using template literals.
How to display skill tags using the map() and join() methods.
How to validate form inputs and update the DOM.

HTML Code

The HTML structure creates the Resume Skill Analyzer interface inside the .container element. It includes a heading, a textarea for resume content, an input field for required job skills, and an Analyze Resume button. The textarea uses the resumeText ID, while the required skills input uses the jobSkills ID and these IDs allow JavaScript to retrieve the values entered by the user.

The button uses the onclick="analyzeResume()" attribute to call the analysis function when clicked. Below the button, the result div provides an empty container where JavaScript displays the skill match score and matched skills. Finally, the HTML file connects the external CSS and JavaScript files to style the interface and handle the analysis functionality.

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

The CSS code creates a clean and centered resume analysis interface. The universal selector resets the margin and padding, applies box-sizing: border-box, and sets Arial as the font family. The body selector uses a dark blue background and Flexbox properties to center the application and the height: 100vh property makes the layout occupy the full viewport height, while padding: 20px provides spacing around the page.

This .container class styles the main card with a white background, 30px padding, a width of 600px, rounded corners, and a box shadow. This creates a structured area for the resume input and results, textarea selector defines the resume input’s width and height. It also adds padding, a border, rounded corners, and bottom spacing also, the input selector applies similar styling to the required skills field.

The button selector creates a full-width blue button with white text, rounded corners, and bold font weight. The button:hover selector changes the background color when the user hovers over the button and the .result class adds spacing above the results section. The .skill class styles matched skills as inline-block tags with blue backgrounds, white text, rounded edges, and small font size. Finally, .score increases the score’s font size and weight to make it more visible.

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

The JavaScript code handles resume analysis, skill matching, score calculation, and dynamic result generation. The analyzeResume() function begins by selecting the resume text and converting it to lowercase using toLowerCase(). Next, the required skills input is converted to lowercase and separated into an array using split(","), map() method trims unnecessary spaces from each skill.

After validation, the matchedSkills array is created to store the skills found in the resume. The forEach() method loops through each required skill. During every iteration, the includes() method checks whether the resume contains the current skill. If a match is found, the skill is added to the matchedSkills array using push(). The skill score is calculated by dividing the number of matched skills by the total number of required skills and multiplying the result by 100. The Math.round() method rounds the final percentage to the nearest whole number.

Finally, the function updates the results container using a template literal. It displays the Skill Match Score and creates skill tags using matchedSkills.map(). The join("") method combines the generated tags into one HTML string, which is then inserted into the results section using innerHTML.

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>

`

}