AI Blog Title Generator | HTML CSS JavaScript

AI Blog Title Generator with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #13

Project Overview

The AI Blog Title Generator is a simple frontend project built using HTML, CSS, and JavaScript. It allows users to enter a blog topic and instantly generates multiple title ideas based on that topic. Instead of creating titles manually, users can enter a subject and get a ready-made list of suggestions. It provides a single input field where users enter their desired blog topic. After clicking the Generate Titles button, JavaScript combines the topic with predefined title templates and displays ten different title suggestions.

Users can click any title to copy it directly to their clipboard, making it convenient to reuse the title in a blog, article, or content plan. It is useful for learning DOM manipulation, arrays, loops, template strings, event handling, and the Clipboard API.

Key Features

Blog Topic Input: Users can enter any desired blog topic into the input field. The entered topic becomes the base for generating multiple title suggestions.
Generate Titles Button: The Generate Titles button calls the generateTitles() function and starts the title generation process when clicked.
Input Validation: Before generating titles, JavaScript checks whether the topic field is empty. If no topic is entered, the application displays a message asking the user to enter a topic.
Multiple Title Suggestions: The application generates ten different title ideas using predefined templates. This gives users several options to choose from for their blog.
Predefined Title Templates: JavaScript combines the entered topic with different phrases such as “10 Powerful Tips for,” “The Ultimate Guide to,” and “Step-by-Step Guide to” to create title variations.
Dynamic Title Generation: The generated titles are not hardcoded into the HTML. JavaScript creates each title dynamically and adds it to the results section.
Title Cards: Every generated title is displayed inside a separate .title-card element. This makes each suggestion visually distinct and easy to interact with.
Clickable Titles: Users can click any generated title card. The click event triggers the copying functionality for that specific title.
Copy to Clipboard: The selected title is copied using navigator.clipboard.writeText(title). This allows users to quickly reuse their preferred title.
Copy Confirmation: After a title is successfully sent to the clipboard, an alert displays “Title copied!”, providing immediate feedback to the user.
Interactive Hover Effect: The .title-card:hover selector changes the background color when users hover over a title, making the cards feel interactive.
Clean User Interface: The application uses a centered white container, rounded corners, spacing, and a dark blue page background to create a simple content-generation interface.
Frontend-Only Implementation: The project uses only HTML, CSS, and JavaScript. The provided code does not connect to an actual AI model or AI API; the titles are generated from predefined templates.

What You'll Learn

How to create an interactive title-generation interface.
How to retrieve input values using document.getElementById().
How to remove unnecessary spaces using trim().
How to validate user input with conditional statements.
How to store multiple templates inside a JavaScript array.
How to use forEach() to process an array.
How to create HTML elements dynamically using document.createElement().
How to assign classes using className.
How to insert dynamic text using innerText.
How to add click events to dynamically created elements.
How to use navigator.clipboard.writeText() for copying text.
How to update page content using innerHTML.

HTML Code

The HTML creates the basic structure of the Blog Title Generator. The main application is placed inside a .container div, which contains the page heading, topic input, Generate Titles button, and an empty results container. The input field uses the id="topic" attribute so JavaScript can retrieve the blog topic entered by the user. The button uses onclick="generateTitles()" to execute the title generation function.

This <div id="titles"></div> element initially remains empty. JavaScript dynamically adds the generated title cards to this section after the user clicks the button and the external style.css file provides the visual styling, while script.js contains the title-generation and copy functionality.

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

<body>

<div class="container">

<h1>AI Blog Title Generator</h1>

<input id="topic" placeholder="Enter your blog topic">

<button onclick="generateTitles()">Generate Titles</button>

<div id="titles"></div>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

The CSS begins with a universal reset that removes default margins and padding and applies box-sizing: border-box to all elements. Arial is used as the main font. The body selector creates the overall layout with a dark blue background and Flexbox. The justify-content: center and align-items: center properties center the application within the viewport. The padding: 20px property also provides space around the container.

This .container class creates the main white card. It has 30px padding, a 600px width, rounded corners, a subtle shadow, and centered text, input selector styles the topic field with full width, padding, a light border, and rounded corners. The button selector creates the blue full-width Generate Titles button, while button:hover changes its background color when the user hovers over it.

The #titles selector adds spacing above the generated results and aligns them to the left. Each generated title uses the .title-card class, which provides a light background, padding, rounded corners, and spacing between cards. The .title-card:hover selector changes the background color to provide visual feedback when the user moves the cursor over a title.

*{
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);
text-align:center;
}

h1{
margin-bottom:20px;
}

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

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

button:hover{
background:#1d4ed8;
}

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

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

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

Javascript Code

The JavaScript functionality is contained inside the generateTitles() function. It first retrieves the topic entered by the user using document.getElementById("topic").value and removes unnecessary spaces with trim(). The function then checks whether the topic is empty. If it is, the application displays “Please enter a topic” inside the results section and stops the function using return.

Next, a templates array contains ten predefined title patterns. Each template uses the entered topic to construct a different blog title, such as "10 Powerful Tips for " + topic and "The Ultimate Guide to " + topic. Before displaying the new results, titlesDiv.innerHTML = "" clears any previously generated titles. The forEach() method then loops through every title in the array. For each title, JavaScript creates a new div using document.createElement("div"), assigns the title-card class, and places the title inside it using innerText.

A click event is then assigned to each card. When a user clicks a title, navigator.clipboard.writeText(title) copies that specific title to the clipboard, followed by an alert displaying “Title copied!”. Finally, appendChild() adds each generated card to the results container.

function generateTitles(){

const topic = document.getElementById("topic").value.trim()
const titlesDiv = document.getElementById("titles")

if(topic === ""){
titlesDiv.innerHTML = "Please enter a topic"
return
}

const templates = [

"10 Powerful Tips for " + topic,
"The Ultimate Guide to " + topic,
"How to Master " + topic + " in 2025",
"Beginner’s Guide to " + topic,
"7 Mistakes to Avoid in " + topic,
"Why " + topic + " is Important Today",
"Step-by-Step Guide to " + topic,
"Top Strategies for " + topic,
"The Future of " + topic,
"Everything You Need to Know About " + topic

]

titlesDiv.innerHTML=""

templates.forEach(title => {

const div = document.createElement("div")

div.className = "title-card"

div.innerText = title

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

titlesDiv.appendChild(div)

})

}