AI Study Planner Generator | HTML CSS JavaScript

AI Study Planner Generator with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #17

Project Overview

The AI Study Planner Generator is a web application that helps students organize their study time effectively. Users can enter subjects, available study hours, and study days, and the tool automatically generates a structured study plan. This project demonstrates frontend concepts such as form handling, dynamic schedule generation, array manipulation, and DOM updates, making it a useful beginner project for building productivity tools.

Key Features

Generate personalized study plans
Input subjects and available study hours
Automatic distribution of study time
Dynamic study schedule generation
Clean and responsive interface
Interactive UI powered by JavaScript
Easy-to-use student productivity tool
Mobile-friendly design

HTML Code

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

<body>

<div class="container">

<h1>AI Study Planner Generator</h1>

<input id="subjects" placeholder="Subjects (comma separated)">

<input id="hours" type="number" placeholder="Study hours per day">

<input id="days" type="number" placeholder="Number of days">

<button onclick="generatePlan()">Generate Study Plan</button>

<div id="plan"></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;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

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;
}

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

.day-card{
background:#f1f5f9;
padding:12px;
border-radius:6px;
margin-bottom:10px;
}

Javascript Code

function generatePlan(){

const subjects = document.getElementById("subjects").value
.split(",")
.map(s => s.trim())
.filter(s => s !== "")

const hours = parseInt(document.getElementById("hours").value)

const days = parseInt(document.getElementById("days").value)

const planDiv = document.getElementById("plan")

if(subjects.length === 0 || !hours || !days){
planDiv.innerHTML = "Please enter all fields."
return
}

planDiv.innerHTML=""

let subjectIndex = 0

for(let d=1; d<=days; d++){

let content = ""

for(let h=1; h<=hours; h++){

const subject = subjects[subjectIndex]

content += `<li>${subject}</li>`

subjectIndex++

if(subjectIndex >= subjects.length){
subjectIndex = 0
}

}

planDiv.innerHTML += `

<div class="day-card">

<h3>Day ${d}</h3>

<ul>

${content}

</ul>

</div>

`

}

}