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 uses predefined question templates and dynamically inserts the entered job role into each question. It generates ten questions covering responsibilities, skills, projects, trends, tools, problem-solving, workflow, common mistakes, performance, and hiring-related topics.

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

Job Role Input: Users can enter the job role they want to prepare for, such as Frontend Developer or Software Engineer. JavaScript uses this value to create questions specifically around the selected role.
Generate Questions Button: Users can start the question-generation process with a single click. The button calls the generateQuestions() function and displays the generated questions below the input area.
Input Validation: The application checks whether the user has entered a job role before generating any questions. If the field is empty, it displays “Please enter a job role.” instead of showing blank results.
Role-Based Question Generation: JavaScript inserts the entered role into different predefined question templates. Therefore, the same templates can generate questions for different positions without changing the HTML.
Ten Interview Questions: The project provides ten question templates covering different interview topics. These include responsibilities, skills, projects, trends, tools, problem-solving, workflow, mistakes, performance, and hiring.
Dynamic Question Creation: JavaScript creates each question card when the user clicks the Generate Questions button. This approach keeps the HTML structure simple while allowing the results to change based on the user’s input.
Question Cards: Every generated question appears inside its own .question-card element. The separate cards make the list easier to scan and give each question a clear visual boundary.
Copy Question Functionality: Users can click any question card to copy its text to the clipboard. The project uses navigator.clipboard.writeText() to handle the copying directly in the browser.
Copy Confirmation: After the user clicks a question, an alert displays “Question copied!”. This provides immediate feedback and confirms that the copy action has been triggered.
Interactive Hover Effect: The question cards change their background color when users move the cursor over them. This small interaction makes the clickable cards easier to recognize.
Dynamic DOM Manipulation: JavaScript uses createElement(), className, innerText, and appendChild() to build the question cards. Consequently, users can generate a fresh set of questions without manually changing the page structure.
Clean User Interface: The project uses a dark blue page background and a centered white container with rounded corners. Blue controls and light question cards create a simple interface that keeps attention on the generated questions.
Frontend-Only Implementation: The provided code does not use a backend, database, AI model, or external API. Instead, JavaScript generates the questions locally from predefined templates.

What You'll Learn

How to create an interview question generator interface.
How to retrieve user input using document.getElementById().
How to validate input using conditional statements.
How to remove unnecessary spaces using trim().
How to create arrays containing multiple question templates.
How to use template literals for dynamic text.
How to insert user-provided values into predefined questions.
How to loop through an array using forEach().
How to create HTML elements dynamically using createElement().
How to assign CSS classes using className.
How to add text using innerText.
How to use appendChild() to add elements to the page.
How to implement copy-to-clipboard functionality with navigator.clipboard.writeText().

HTML Code

The HTML creates the basic structure of the AI Interview Question Generator. The main interface is placed inside the .container element, which contains the heading, job role input, Generate Questions button, and questions output area. The input field uses id="roleInput" so JavaScript can retrieve the role entered by the user. The button calls generateQuestions() through the onclick attribute when clicked.

This <div id="questions"></div> element is initially empty. JavaScript dynamically creates the question cards and inserts them into this container after the user generates the questions and the HTML also connects the external style.css file for the interface design and script.js file for the question-generation functionality.

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

The CSS starts with a universal reset that removes the default margin and padding. It also applies box-sizing: border-box and sets Arial as the main font. Next, the body selector creates the page layout with Flexbox. The dark blue #042354 background fills the viewport, while justify-content and align-items center the application.

The .container class creates the main white card. It adds 30px padding, a 650px width, rounded corners, and a subtle shadow. In addition, text-align: center keeps the heading and form controls centered, input selector styles the job role field with full width, padding, a light border, and rounded corners. Meanwhile, the button selector creates a full-width blue button with white text and bold font weight.

When users hover over the button, the button:hover selector changes its background from #2563eb to #1d4ed8. Similarly, .question-card:hover changes the background of a question card during hover. Finally, #questions adds space above the generated results and aligns them to the left. The .question-card class adds padding, a light background, rounded corners, and spacing between individual questions.

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

The JavaScript controls the question-generation and copy functionality. First, the generateQuestions() function retrieves the job role from the roleInput field. The trim() method removes unnecessary spaces before the application processes the value.

Next, JavaScript checks whether the user entered a role. If the field remains empty, the function displays “Please enter a job role.” and stops execution with return. After validation, the templates array stores ten predefined interview questions. Each template uses a template literal, so JavaScript can insert the selected job role dynamically. Therefore, entering a different role produces questions containing that specific role.

Before displaying new results, container.innerHTML = "" clears any previously generated questions. Then, forEach() loops through the templates array and creates a new div for every question. Each div receives the question-card class through className. The innerText property then adds the question text to the card. After that, JavaScript adds a click event to each card.

When users click a question, navigator.clipboard.writeText(q) copies its text to the clipboard. An alert then displays “Question copied!” as confirmation. Finally, appendChild() adds each question card to the results container.

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)

})

}