tanishathakur25

Project Name:

User Details Form

Date:

March 18, 2026

Description:

This project is a simple user form built with HTML, CSS, and JavaScript. The form takes multiple inputs from the user, such as name, age, place, father’s name, hobby, gender, mobile number, email, skills, and favorite subject. Upon submission, the entered data is displayed dynamically on the page.

Features Implemented:

Created a clean and user-friendly form interface

Took multiple inputs from the user

Added JavaScript DOM to handle form submission

Displayed the user’s details dynamically after submission

Styled the form with CSS to make it visually appealing

I started building my online resume by planning its structure and deciding on the key sections: About Me, Education, Skills, Experience, and Contact. I wrote the HTML layout using semantic tags and added headings, paragraphs, and lists to present my information clearly. My goal was to make it simple, professional, and easy to read.

Next, I focused on styling with CSS. I chose a clean blue-and-white color scheme, added the Poppins font, and used box shadows and rounded corners for a modern look. I implemented flexbox for the skills badges, added hover effects for interactivity, and ensured the layout is responsive on both desktop and mobile. Finally, I refined the content and design for clarity and visual appeal.

Day 1 – Project Idea

I decided to build an AI Quiz Generator that can create quiz questions based on a topic entered by the user. The goal of this project was to learn how to integrate AI APIs into a web application and create an interactive learning tool.

Day 2 – Building the UI

I created the basic structure of the project using HTML and CSS.
I designed a clean interface with:

A heading

An input box for entering the topic

A button to generate the quiz

A result area to display the question and answer.

I also added hover effects and card styling to make the interface look modern and user-friendly.

Day 3 – Adding JavaScript Logic

I added JavaScript to make the application interactive.
When the user clicks the Generate Question button:

The program reads the topic entered by the user.

It checks if the input field is empty.

If empty, it shows a message asking the user to enter a topic.

Day 4 – Integrating AI

I connected the project with the Gemini API provided by Google.

The application sends a request to the API with a prompt asking it to generate:

One quiz question

The correct answer

The response from the AI is then displayed on the webpage.

Day 5 – Testing and Deployment

I tested the application with different topics to ensure it generates questions correctly.
After testing, I uploaded the project to GitHub and deployed it using GitHub Pages so the app can run online.

🚀 Final Result

The final project is a simple AI-powered quiz generator that allows users to quickly create quiz questions for learning and practice.

I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.