AI Content Summarizer | HTML CSS JavaScript AI Tool

AI Content Summarizer with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #19

Project Overview

The AI Content Summarizer is a beginner-friendly web application built with HTML, CSS, and JavaScript. It allows users to enter long text and generate a shorter summary with the help of an AI model. As a result, users can quickly understand the main points without reading the complete content.

The project demonstrates how a simple frontend interface can connect with an AI API. JavaScript collects the entered content, sends it to the API, processes the response, and displays the generated summary dynamically. Therefore, this project is useful for learning text processing, API integration, asynchronous JavaScript, and DOM manipulation. This challenge highlights text processing, input handling, and dynamic content rendering as its main concepts.

Key Features

Content Input: Users can enter or paste long text into the input area. This gives the application the content it needs to create a concise summary.
AI-Powered Summarization: The application sends the entered content to an AI model and requests a shorter version. Therefore, users can reduce lengthy content into easier-to-read information.
Simple User Interface: The project provides a straightforward interface with a text area, action button, and result section. As a result, users can focus on entering content and viewing the generated summary.
Dynamic Summary Display: After receiving the AI response, JavaScript updates the result section with the generated summary. The page does not need to reload during this process.
Input Handling: JavaScript reads the content entered by the user and prepares it before sending the request. This allows the application to process different types of text.
API Integration: The project uses JavaScript to communicate with an AI service. The request sends the user’s content along with instructions for creating a concise summary.
Loading Feedback: While the summary is being generated, the application can display a loading message. This lets users know that their request is being processed.
Error Handling: JavaScript can handle problems during the API request and display an appropriate message. Therefore, users receive feedback if the summary cannot be generated.
Dynamic DOM Updates: JavaScript changes the webpage content after receiving the API response. Consequently, the generated summary appears directly inside the application.
Responsive Layout: The interface uses a simple centered layout with flexible spacing. This helps the content summarizer remain easy to use across different screen sizes.

What You'll Learn

How to build an AI content summarizer with HTML, CSS, and JavaScript.
How to collect and validate text input using JavaScript.
How to send data to an AI API using fetch().
How to use async and await for API requests.
How to send structured data using JSON.stringify().
How to process and read JSON API responses.
How to update webpage content dynamically using the DOM.
How to handle loading states and API errors.

HTML Code

HTML creates the main structure of the AI Content Summarizer. The main container holds the project heading, text input area, summarize button, and result section. The text area provides a place where users can enter or paste their content. Next, the Summarize button starts the summarization process by calling the JavaScript function responsible for generating the summary.

Finally, the result section provides a dedicated area where JavaScript displays the generated summary. The HTML file also loads the JavaScript file so that the application can respond to user actions.

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

<body>

<div class="container">

<h1>AI Content Summarizer</h1>

<textarea id="inputText" placeholder="Paste your article or text here..."></textarea>

<button onclick="summarizeContent()">Summarize with AI</button>

<h2>Summary</h2>

<div id="result"></div>

</div>

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

</body>
</html>

CSS Code

CSS controls the appearance of the content summarizer. First, the universal selector resets the default margin and padding and applies box-sizing: border-box. It also sets the main font used throughout the page. The body creates the overall page layout and centers the application. Meanwhile, the main container uses a white background, padding, rounded corners, and a shadow to create a clean card-style interface.

The text area takes up the available width and provides enough space for entering longer content. In addition, the button uses a contrasting background, white text, padding, and rounded corners to make the main action easy to identify. Finally, the result section separates the generated summary from the input area. Therefore, users can easily distinguish between the original content and the AI-generated result.

*{
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);
}

h1{
margin-bottom:20px;
}

h2{
margin-top:20px;
margin-bottom:10px;
}

textarea{
width:100%;
height:180px;
padding:10px;
border-radius:6px;
border:1px solid #ddd;
margin-bottom:10px;
resize:none;
}

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

button:hover{
background:#1d4ed8;
}

#result{
background:#f1f5f9;
padding:15px;
border-radius:6px;
min-height:80px;
}

Javascript Code

JavaScript manages the text input, API request, and summary display. First, the code retrieves the user’s content from the text area and checks whether any text has been entered. Next, the application displays a loading message and uses fetch() to send the content to the AI API. The request includes instructions asking the AI model to summarize the provided text.

After the API responds, JavaScript converts the response into JSON and extracts the generated summary. It then places the summary inside the result section so users can read it immediately. Finally, the API request uses try...catch to handle errors. If something goes wrong, JavaScript displays an error message instead of leaving the result section empty.

async function summarizeContent(){

const text = document.getElementById("inputText").value
const result = document.getElementById("result")

if(text.trim() === ""){
result.innerText = "Please paste some text to summarize."
return
}

result.innerText = "Generating AI summary..."

try{

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:`Summarize the following content in a clear and concise paragraph:\n\n${text}`
}
]

})

})

const data = await response.json()

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

}catch(error){

result.innerText = "Error generating summary."

}

}