AI Blog Title Generator | HTML CSS JavaScript

AI Blog Title Generator with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #13

Project Overview

An AI Blog Title Generator built using HTML, CSS, and JavaScript with a clean and responsive interface. The tool allows users to enter a topic or keyword and instantly generate multiple creative blog title ideas. 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-powered content tools work.

Key Features

Generate multiple blog title ideas from a single keyword
Simple input field for entering blog topic
Randomized title suggestions using JavaScript logic
Clean and responsive user interface
Instant title generation on button click
Copy title ideas for quick use
Interactive UI powered by JavaScript
Mobile-friendly design

HTML Code

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

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

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)

})

}