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 beginner-friendly productivity project built with HTML, CSS, and JavaScript. It helps students create a simple study schedule by entering their subjects, daily study hours, and number of study days. It takes the entered subjects and distributes them across the selected days. For example, if a student enters multiple subjects and chooses several study hours per day, JavaScript automatically creates a day-by-day study plan.

Moreover, this project gives beginners practical experience with form handling, arrays, loops, DOM manipulation, and dynamic HTML generation. Although the project is named an AI Study Planner Generator, the current implementation uses JavaScript logic rather than an external AI API.

Key Features

Subject Input: Users can enter multiple subjects in the input field by separating them with commas and JavaScript then processes each subject individually and uses them while creating the study schedule.
Daily Study Hours: It allows users to enter the number of hours they want to study each day. The application uses this value to determine how many study sessions should appear in the daily plan.
Study Duration: Users can specify the total number of days for their study plan. JavaScript then creates a separate schedule for each selected day.
Automatic Study Plan: After the user enters the required information, JavaScript automatically generates a study plan. It distributes the subjects across the selected days instead of requiring users to create the schedule manually.
Subject Distribution: It cycles through the subjects while creating the schedule. Therefore, when it reaches the last subject, it starts again from the first subject to continue filling the study sessions.
Dynamic Day Cards: Each day is displayed in its own card. The card shows the day number along with the subjects planned for that day, making the generated schedule easier to read.
Input Validation: Before generating the plan, JavaScript checks whether the subject, study hours, and number of days fields contain valid values. If any required information is missing, the application displays a message instead of generating an incomplete schedule.
Instant Plan Generation: Generate Study Plan button creates the schedule immediately after the user clicks it. As a result, the page does not need to reload.
Dynamic DOM Updates: JavaScript inserts the generated study cards directly into the #plan element. This allows the application to update the results whenever the user creates a new plan.
Simple User Interface: The project uses a clean layout with input fields, a button, and generated study cards. Consequently, students can enter their information and understand the resulting plan without unnecessary interface elements.
Responsive Layout: The main container uses flexible sizing and spacing so that the planner remains usable on different screen sizes. Therefore, users can also access the study planner on smaller devices.

What You'll Learn

How to create a study planner interface using HTML.
How to collect and validate user input with JavaScript.
How to split comma-separated values using split().
How to clean input values using trim() and filter().
How to convert input values into numbers using parseInt().
How to use for loops to generate a study schedule.
How to dynamically create HTML content using template literals.
How to update the DOM and display generated study plans.

HTML Code

HTML creates the main structure of the Study Planner Generator. The .container holds the complete application, including the heading, input fields, Generate Study Plan button, and result area.

The #subjects input allows users to enter multiple subjects separated by commas. Next, the #hours input collects the number of study hours per day, while the #days input collects the number of days for the study plan. Generate Study Plan button calls the generatePlan() function when clicked. Finally, the #plan element provides an empty area where JavaScript dynamically inserts the generated schedule.

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

CSS controls the appearance of the study planner. First, the universal selector resets the default margin and padding and applies box-sizing: border-box. The body uses Flexbox to center the application on the screen and in addition, it uses a dark blue background and page padding to create space around the main container, .container creates a white card with padding, rounded corners, a fixed width, and a subtle shadow. Therefore, the form and generated plan remain visually organized.

The input fields use full width, padding, borders, and rounded corners. Meanwhile, the button uses a blue background with white text and changes its background color when the user hovers over it. Finally, the .day-card class styles each generated study day. It adds a light background, padding, rounded corners, and spacing between the different days.

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

JavaScript handles the input values and generates the study schedule. First, the generatePlan() function gets the subjects, study hours, and number of days from the HTML inputs. Next, JavaScript uses split(), trim(), and filter() to turn the comma-separated subjects into a clean array. It also converts the hours and days into numbers using parseInt().

Before creating the schedule, the function checks whether all required values are available. If something is missing, it displays a message asking the user to enter all fields and after that, nested for loops distribute the subjects across the selected days and study hours. JavaScript keeps track of the current subject with subjectIndex. When it reaches the end of the subjects array, it starts again from the first subject.

Finally, the function creates a separate day card using template literals and inserts the generated content into the #plan element. As a result, users immediately see their complete study schedule without reloading the page.

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>

`

}

}