sakshisuman25

🛠️ Devlog – Dice Game

I started this project to practice basic JavaScript concepts like DOM manipulation and event handling. First, I created the UI using HTML and styled it with CSS to make it simple and clean.

Then, I added functionality using JavaScript. I used Math.random() to generate a number between 1 and 6 and displayed the result when the button is clicked. I also updated the dice visually based on the number.

During the project, I faced small issues with updating elements on the screen, but I fixed them by checking my DOM selection and event listener code.

Overall, this project helped me understand how JavaScript interacts with the UI and how user actions (like clicks) can trigger changes on the page.

In this project, I worked on building a Student Decision App (UI) using HTML, CSS, and JavaScript. The main goal was to understand how the DOM works and how to handle user interactions using events.

At the beginning, I learned how to select elements using getElementById and querySelector. Then I used addEventListener to handle events like button clicks and user input. I created features where the app takes input from the user and shows results dynamically on the screen.

While working on this project, I faced some confusion in connecting JavaScript with HTML elements and updating the UI, but after practicing, I understood how DOM manipulation works.

Overall, this project helped me improve my understanding of JavaScript basics, DOM, and event handling, and gave me confidence to build interactive web applications.

🛠️ Devlog — Mini JS Tools

Built a small app with 3 features: emoji generator, calculator, and array processor using JavaScript DOM.

Learned event handling, functions, loops, and array methods like map, reduce, and filter.
Fixed a bug where results were appending instead of resetting.

Next: improve UI and styling 🚀

📓 Devlog

Day 1:
Started the project and designed the basic UI using HTML and CSS.

Day 2:
Built the Weather App using fetch API and displayed temperature, weather, and humidity.

Day 3:
Added the Joke Generator using an API and handled button click events.

Day 4:
Combined both apps on one page and improved layout using Flexbox.

Day 5:
Tested the project, fixed errors, and improved user experience.

🌸 Devlog – PCOD Care Project

Worked on developing the PCOD Care web application using HTML, CSS, and JavaScript. Designed a clean and responsive user interface suitable for both desktop and mobile devices.

Implemented key features including a BMI calculator to check health status, a PCOD risk checker based on symptoms like irregular periods, acne, and hair fall, and a habit tracker using local storage to help users maintain healthy routines.

Also improved user experience by adding interactive elements, fixing bugs, and organizing the layout properly. Tested the project and deployed it successfully using Netlify.

Overall, this project helped me improve my understanding of frontend development and JavaScript functionality.

🛠️ Devlog – Smart Attendance System:-

I started by creating a basic HTML structure with a heading, input box, and button. Then I added CSS to design the page and make the layout clean and centered.

After that, I used JavaScript to take the user’s name, get the current date and time, and display it on the screen. I used DOM methods to create and show each attendance record in a box format.

Finally, I tested the project, added input validation, and improved the user experience by clearing the input field after each entry.

✅ Result:-
A simple and working Smart Attendance System that displays name, date, and time.

📝 Devlog

While building the Solar System project, I started by creating the basic structure using HTML and then used CSS to design and position the Sun and planets. I used CSS animations to simulate the orbital movement of planets around the Sun, which made the project visually engaging.

Initially, I faced some challenges with positioning elements correctly and managing smooth animations, but after experimenting with CSS properties like transform and animation, I was able to achieve the desired effect. I also used JavaScript to add interactivity, such as displaying information about each planet.

This project helped me improve my understanding of animations, positioning, and DOM manipulation. Overall, it was a fun and creative learning experience.

📝 Devlog

While building the Quote Generator, I started by creating the basic structure using HTML and then styled it using CSS to make the interface simple and visually appealing. After that, I used JavaScript to add functionality for generating random quotes.

Initially, I faced some challenges with updating the content dynamically and handling button click events, but after practicing DOM manipulation, I was able to fix those issues. I also improved the UI to make it more responsive and user-friendly.

This project helped me understand how JavaScript interacts with HTML and CSS to create interactive web applications. Overall, it was a great learning experience and strengthened my basics in front-end development.

📘 Devlog – To-Do List App
🗓️ Day 1: Project Setup

Created basic HTML structure

Added heading and input field

Designed simple layout using CSS

🗓️ Day 2: Core Functionality

Implemented JavaScript for adding tasks

Displayed tasks dynamically on the screen

Learned DOM manipulation

🗓️ Day 3: Task Management

Added delete button for each task

Fixed issues with removing tasks

Improved UI for better readability

🗓️ Day 4: Local Storage Integration

Implemented local storage to save tasks

Ensured tasks remain after page refresh

Fixed bugs related to data saving

🗓️ Day 5: Final Improvements

Improved styling and layout

Tested all features

Fixed minor errors and optimized code

Devlog – Tip Calculator

Today I worked on building a Tip Calculator using HTML, CSS, and JavaScript. First, I created the basic structure of the page with HTML and added input fields for the bill amount, tip percentage, and number of people. Then I used CSS to style the page and place everything inside a clean box layout.

After that, I wrote the JavaScript code to calculate the tip and total amount. I also fixed some errors in the code and tested the calculator to make sure it works correctly. During this process, I practiced DOM manipulation and basic JavaScript calculations. I also used AI tools to help solve some coding errors and understand the logic better.

Overview

A simple interactive quiz app built with HTML, CSS, and JavaScript. Users answer multiple-choice questions and get instant feedback.

Features

10 questions, each with 4 options

Correct answers → green, Wrong answers → red

Score calculation at the end

“Next” button for navigation

Option to restart quiz

Implementation

HTML/CSS: Layout and styling

JavaScript: Dynamic question display, answer validation, and score tracking

Challenges

Highlighting answers correctly

Managing question flow and score updates

Future Plans

Add timer for each question

Randomize questions and options

Store scores in local storage