AI Code Explainer UI | HTML CSS JavaScript

AI Interview Question Generator with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #15

Project Overview

An AI Interview Question Generator built using HTML, CSS, and JavaScript with a clean and responsive interface. The tool allows users to enter a job role or topic and instantly generate relevant interview questions for practice. It demonstrates frontend concepts such as user input handling, dynamic content generation, array manipulation, and DOM updates, making it a useful beginner project for understanding how AI-based interview preparation tools work.

Key Features

Generate interview questions based on job roles or topics
Simple input field to enter job position
Instant question generation on button click
Multiple question suggestions for practice
Clean and responsive user interface
Interactive UI powered by JavaScript
Mobile-friendly layout
Click questions to copy for quick use

HTML Code

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

<body>

<div class="container">

<h1>AI Interview Question Generator</h1>

<input id="roleInput" placeholder="Enter job role (e.g. Frontend Developer)">

<button onclick="generateQuestions()">Generate Questions</button>

<div id="questions"></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:650px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
text-align:center;
}

h1{
margin-bottom:20px;
}

input{
width:100%;
padding:10px;
margin-bottom:10px;
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;
}

#questions{
margin-top:20px;
text-align:left;
}

.question-card{
background:#f1f5f9;
padding:12px;
border-radius:6px;
margin-bottom:10px;
cursor:pointer;
}

.question-card:hover{
background:#e2e8f0;
}

Javascript Code

function generateQuestions(){

const role = document.getElementById("roleInput").value.trim()
const container = document.getElementById("questions")

if(role === ""){
container.innerHTML = "Please enter a job role."
return
}

const templates = [

`What are the key responsibilities of a ${role}?`,
`What skills are required to become a successful ${role}?`,
`Explain a challenging project you worked on as a ${role}.`,
`How do you stay updated with the latest trends in ${role}?`,
`What tools and technologies do you use as a ${role}?`,
`How do you handle problem solving in your role as a ${role}?`,
`Describe your workflow when working as a ${role}.`,
`What are common mistakes beginners make in ${role}?`,
`How would you improve performance in a ${role} project?`,
`Why should we hire you as a ${role}?`

]

container.innerHTML=""

templates.forEach(q => {

const div = document.createElement("div")

div.className = "question-card"

div.innerText = q

div.onclick = () => {
navigator.clipboard.writeText(q)
alert("Question copied!")
}

container.appendChild(div)

})

}