AI Business Name Generator | HTML CSS JavaScript AI Tool

AI Business Name Generator with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #18

Project Overview

The AI Business Name Generator is an AI-powered web tool that helps entrepreneurs create creative brand and startup names instantly. Users enter a keyword describing their business, and the application sends the request to an AI model which generates multiple business name suggestions. This project demonstrates AI API integration, asynchronous JavaScript requests, dynamic UI updates, and modern tool interfaces.

Key Features

AI-generated business name ideas
Keyword-based brand name suggestions
Real-time AI API integration
Clean modern interface
Copy business names easily
Responsive layout
Dynamic results rendering
Startup-friendly name suggestions

HTML Code

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

<body>

<div class="container">

<h1>AI Business Name Generator</h1>

<input id="keyword" placeholder="Enter business keyword (e.g. tech, food)">

<button onclick="generateNames()">Generate AI Names</button>

<div id="result"></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;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:600px;
text-align:center;
}

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

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

button:hover{
background:#1d4ed8;
}

#result{
margin-top:20px;
text-align:left;
background:#f1f5f9;
padding:15px;
border-radius:6px;
}

Javascript Code

async function generateNames(){

const keyword = document.getElementById("keyword").value
const result = document.getElementById("result")

if(keyword.trim() === ""){
result.innerText = "Please enter a keyword."
return
}

result.innerText = "Generating AI business names..."

const response = await fetch("https://openrouter.ai/api/v1/chat/completions",{

method:"POST",

headers:{
"Content-Type":"application/json",
"Authorization":"Bearer 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"
},

body:JSON.stringify({

model:"openai/gpt-4o-mini",

messages:[
{
role:"user",
content:`Generate 10 creative startup business names for a company related to "${keyword}". Only return the names in a list.`
}
]

})

})

const data = await response.json()

result.innerText = data.choices[0].message.content

}