Fatima Technology Walii

ROLL#RSLC#10
CODING TASK
DAY #25
The Fruit Catching Game is a fun, interactive, and engaging web-based game created using HTML, CSS, and JavaScript. This game is designed to test and improve the player’s hand–eye coordination, reaction speed, and focus while providing an enjoyable gaming experience. The player controls a basket that can be moved left and right using the keyboard arrow keys to catch fruits falling from the top of the screen.

At the start of the game, different fruits appear randomly at various positions and fall downwards at a constant speed. The player must quickly move the basket to the correct position to catch the fruits before they reach the bottom of the screen. Each successfully caught fruit increases the player’s score, encouraging quick reflexes and accurate movements. However, if a fruit is missed and falls beyond the basket, the missed count increases.

The game includes a defined limit for missed fruits. Once the player misses a certain number of fruits, the game automatically ends, adding a sense of challenge and competition. A game-over screen is displayed showing the final score, along with an option to restart the game and try again. This feature makes the game replayable and engaging for players of all ages.

From a technical perspective, HTML is used to structure the game elements such as the game container, basket, scoreboard, and game-over screen. CSS is responsible for designing the visual layout, colors, animations, and overall appearance of the game, creating an attractive and user-friendly interface. JavaScript handles the core game logic, including fruit generation, falling movement, collision detection between the basket and fruits, score calculation, missed fruit tracking, keyboard controls, and game state management.

This project is especially suitable for beginners and students who want to learn the fundamentals of JavaScript game development. It provides hands-on experience with DOM manipulation, event listeners, timers, conditional logic, and basic animation techniques. The game is lightweight, runs smoothly in modern web browsers, and does not require any external libraries or frameworks.

Overall, the Fruit Catching Game is an excellent practice project that demonstrates how simple web technologies can be combined to create an entertaining and functional game. It is ideal for showcasing skills in front-end development and can be easily extended with additional features such as increasing difficulty levels, sound effects, touch controls for mobile devices, or a high-score system.
#FruitCatchingGame
#JavaScriptGame
#HTMLCSSJavaScript
#WebGameDevelopment
#FrontendDevelopment
#BeginnerGameProject
#StudentProject
#CodingForBeginners
#GameDevelopment
#BrowserGame
#InteractiveGame
#DOMManipulation
#JavaScriptPractice
#PortfolioProject
#LearnWebDevelopment
claude.ai/public/artifacts/7634caab-dd02-420a-8fd9…

1 day ago | [YT] | 0

Fatima Technology Walii

ROLL#RSLC#10
CODING TASK
DAY#24
The Memory Card Matching Game is a fun and interactive web-based game developed using HTML, CSS, and JavaScript. This game is designed to improve memory, concentration, and logical thinking skills in an engaging way. Players flip cards one by one and try to find matching pairs. If two flipped cards match, they remain visible; otherwise, they flip back after a short delay.

The game features a clean and colorful user interface with smooth flip animations that make gameplay enjoyable. JavaScript handles the core logic, including shuffling cards, detecting matches, preventing invalid moves, and restarting the game. CSS is used for styling, layout, and card flip effects, while HTML provides the basic structure of the game.

This project is beginner-friendly and ideal for students who want to practice DOM manipulation, event handling, and game logic in JavaScript. It is fully responsive and works smoothly on different screen sizes. A restart button allows players to reset the game and play again, making it more interactive and reusable.

Overall, this Memory Card Game is a great example of how simple web technologies can be used together to create an entertaining and educational project.


#MemoryGame
#CardMatchingGame
#JavaScriptProject
#HTMLCSSJavaScript
#WebDevelopment
#FrontendProject
#BeginnerProject
#CodingForBeginners
#GameDevelopment
#LearningJavaScript
#StudentProject
#PortfolioProject
#HandsOnCoding
#WebGames
claude.ai/public/artifacts/b7582f2a-a977-4e90-8d17…

1 day ago | [YT] | 0

Fatima Technology Walii

ROLL#RSLC#10
CODING TASK
DAY #23
I have developed an interactive Rock, Paper, Scissors game using HTML, CSS, and JavaScript, where the player competes against the computer in this classic hand game. The game allows users to select rock, paper, or scissors, and the computer randomly chooses its move. The winner is determined according to the standard rules: rock beats scissors, scissors beats paper, and paper beats rock.

The game features a clean and user-friendly interface with clickable buttons for player choices and a display area to show the computer’s choice, results, and score. HTML is used to structure the game layout, CSS is used to style the interface and make it visually appealing, and JavaScript handles the game logic, random computer selection, and result calculation.

This project helped me understand important JavaScript concepts such as randomization, conditional logic, event handling, and DOM manipulation. Building this game improved my problem-solving skills, coding confidence, and understanding of interactive web applications.

This Rock, Paper, Scissors game is an ideal beginner-friendly project for students who want to practice frontend development, learn JavaScript fundamentals, and create fun, interactive games using HTML, CSS, and JavaScript. 🎯🚀


#RockPaperScissorsGame
#HTMLCSSJS
#WebDevelopment
#JavaScriptGame
#CodingForBeginners
#FrontendDevelopment
#InteractiveGame
#FunLearning
#TechProjects
#DigitalSkills

claude.ai/public/artifacts/f223eee2-7bd6-4e09-b747…

2 days ago | [YT] | 0

Fatima Technology Walii

ROLL#RSLC#10
CODIG TASK
DAY#22
I have developed a fun and interactive Word Scramble Game using HTML, CSS, and JavaScript, where players must rearrange scrambled letters to form the correct word. This game challenges players’ vocabulary and problem-solving skills while providing an engaging learning experience.

The game displays a scrambled word, and the player types their guess to see if it matches the correct word. Feedback is given instantly to indicate whether the answer is correct or incorrect. HTML is used to structure the game interface, CSS is used to style the layout and make it visually appealing, and JavaScript handles the game logic, word selection, and user input validation.

This project helped me understand important JavaScript concepts such as arrays, randomization, string manipulation, event handling, and DOM manipulation. Building this word scramble game improved my problem-solving skills, logical thinking, and coding confidence.

This Word Scramble Game is an ideal beginner-friendly project for students who want to practice frontend development, learn JavaScript fundamentals, and create fun, interactive, educational games using HTML, CSS, and JavaScript. 🎯🚀


#WordScrambleGame
#HTMLCSSJS
#WebDevelopment
#JavaScriptGame
#CodingForBeginners
#FrontendDevelopment
#InteractiveLearning
#FunLearning
#TechProjects
#DigitalSkills
claude.ai/public/artifacts/7ed9d5fb-6782-47c7-acb9…

2 days ago | [YT] | 0

Fatima Technology Walii

ROLL#RSLC#10
CODING TASK
DAY #21
I have developed a fun and interactive “Guess the Number” game using HTML, CSS, and JavaScript, where the player tries to guess a number between 1 and 10. The game randomly generates a number, and the player enters their guess to see if it matches the correct answer.

The game provides instant feedback, letting the player know whether the guess is too high, too low, or correct. A simple and user-friendly interface makes the game enjoyable and easy to play for users of all ages. HTML is used to structure the game layout, CSS is used to style the interface, and JavaScript handles the game logic, random number generation, and user interaction.

This project helped me understand important JavaScript concepts such as random number generation, conditional logic, event handling, and DOM manipulation. Creating this game improved my problem-solving skills, strengthened my coding fundamentals, and boosted my confidence in building interactive web applications.

This “Guess the Number” game is an ideal beginner-friendly project for students who want to practice frontend development, learn JavaScript basics, and build fun, interactive applications using HTML, CSS, and JavaScript. 🎯🚀


#GuessTheNumber
#HTMLCSSJS
#WebDevelopment
#JavaScriptGame
#CodingForBeginners
#FrontendDevelopment
#InteractiveGame
#LearningWithCode
#TechProjects
#DigitalSkills
claude.ai/public/artifacts/cb3fbf14-f3f1-4fbe-96a0…

2 days ago | [YT] | 0

Fatima Technology Walii

ROLL#RSLC#10
CODING TASK
DAY#20
I have developed a Reminder App using HTML, CSS, and JavaScript that allows users to set reminders for their tasks and important activities. This app is designed to help users stay organized, manage their time efficiently, and avoid missing important deadlines or commitments.

The reminder app provides a simple and user-friendly interface where users can add task details along with reminder time and date. Once a reminder is set, the app alerts the user at the scheduled time. HTML is used to create the structure of the app, CSS is used to design a clean and attractive layout, and JavaScript handles task management, time tracking, and reminder notifications.

This project helped me understand essential frontend development concepts such as handling user input, working with date and time functions, event handling, and DOM manipulation. Building this reminder app improved my logical thinking, problem-solving skills, and confidence in creating real-world web applications.

This reminder app is an ideal beginner-friendly project for students who want to practice JavaScript fundamentals, learn time-based logic, and build useful productivity applications using HTML, CSS, and JavaScript. 🚀✨

#ReminderApp
#HTMLCSSJS
#WebDevelopment
#JavaScriptProject
#CodingForBeginners
#FrontendDevelopment
#TaskManagement
#TimeManagement
#ProductivityApp
#LearningWithCode
claude.ai/public/artifacts/73e817bb-de35-4d27-9201…

2 days ago | [YT] | 0

Fatima Technology Walii

ROLL#RSLC#10
CODING TASK
DAY #19
I have developed a Calendar App using HTML, CSS, and JavaScript that allows users to add and manage events easily. This app helps users organize their schedules, plan important dates, and keep track of meetings, tasks, and personal events in one place.

The calendar app features a clean and user-friendly interface where users can select dates, add event details, and view their scheduled activities. HTML is used to structure the calendar layout, CSS is used to design an attractive and organized interface, and JavaScript handles date selection, event storage, and dynamic display of events.

This project helped me understand key web development concepts such as date and time handling, DOM manipulation, event-driven programming, and user input management. Creating this calendar app improved my problem-solving skills, strengthened my JavaScript fundamentals, and boosted my confidence in building interactive web applications.

This calendar app is an ideal beginner-friendly project for students who want to practice frontend development, learn JavaScript logic, and build practical productivity tools using HTML, CSS, and JavaScript. 🚀✨

#CalendarApp
#HTMLCSSJS
#WebDevelopment
#JavaScriptProject
#CodingForBeginners
#FrontendDevelopment
#EventManagement
#ProductivityApp
#LearningWithCode
#TechProjects
claude.ai/public/artifacts/0d00d0d4-67a7-47bf-893e…

2 days ago | [YT] | 0

Fatima Technology Walii

ROLL#RSLC#10
CODING TASK
DAY #18
I have developed an Alarm Clock App using HTML, CSS, and JavaScript that allows users to set alarms easily and manage their daily schedule effectively. This app is designed to help users wake up on time and receive reminders for important tasks or events.

The alarm clock app provides a simple and user-friendly interface where users can set the desired alarm time and activate or deactivate the alarm as needed. HTML is used to structure the app layout, CSS is used to design a clean and attractive interface, and JavaScript handles time tracking, alarm logic, and alert notifications.

This project helped me understand important frontend development concepts such as working with time-based functions, event handling, conditional logic, and dynamic updates. Building this alarm clock app improved my problem-solving skills, strengthened my JavaScript fundamentals, and boosted my confidence in creating real-world web applications.

This alarm clock app is an ideal beginner-friendly project for students who want to practice web development, learn JavaScript logic, and build useful everyday applications using HTML, CSS, and JavaScript. 🚀✨

#AlarmClockApp
#HTMLCSSJS
#WebDevelopment
#JavaScriptProject
#CodingForBeginners
#FrontendDevelopment
#TimeManagement
#ProductivityApp
#LearningWithCode
#TechProjects
claude.ai/public/artifacts/a8fb496f-0148-4030-b54e…

2 days ago | [YT] | 0

Fatima Technology Walii

ROLL#RSLC#10
CODING TASK
DAY #17
I have developed a Stopwatch App using HTML, CSS, and JavaScript that allows users to start, stop, and reset time easily and accurately. This app is designed to help users measure time for activities such as studying, workouts, tasks, and daily routines.

The stopwatch app features a simple and user-friendly interface with clearly labeled buttons for start, stop, and reset. HTML is used to structure the layout of the app, CSS is used to style the design and improve visual appearance, and JavaScript handles the timer logic, button actions, and real-time display updates.

This project helped me understand key web development concepts such as event handling, time-based functions, DOM manipulation, and dynamic UI updates. Creating this stopwatch app improved my logical thinking, problem-solving skills, and confidence in building interactive web applications.

This stopwatch app is an ideal beginner-friendly project for students who want to practice frontend development, learn JavaScript fundamentals, and build practical real-life applications using HTML, CSS, and JavaScript. 🚀✨

#StopwatchApp
#HTMLCSSJS
#WebDevelopment
#JavaScriptProject
#CodingForBeginners
#FrontendDevelopment
#TimeManagement
#LearningWithCode
#TechProjects
#DigitalSkills

claude.ai/public/artifacts/a026a6ca-5af3-49e5-9049…

2 days ago | [YT] | 0

Fatima Technology Walii

ROLL#RSLC#10
CODING TASK
DAY #16
I have developed a Currency Converter App using HTML, CSS, and JavaScript that allows users to convert amounts between different currencies easily and accurately. This app is designed to help users with international transactions, travel planning, and financial calculations.

The currency converter app enables users to select the source and target currencies, enter an amount, and instantly view the converted value. HTML is used to structure the layout of the app, CSS is used to create a clean and attractive user interface, and JavaScript handles the conversion logic and dynamic updates.

This project helped me understand important web development concepts such as working with data, handling user input, calculations, and updating the user interface dynamically. Building this currency converter app improved my problem-solving skills, strengthened my JavaScript fundamentals, and boosted my confidence in creating real-world web applications.

This currency converter app is an ideal project for students and beginners who want to practice frontend development, learn JavaScript logic, and build useful everyday applications using HTML, CSS, and JavaScript. 🚀✨

#CurrencyConverter
#HTMLCSSJS
#WebDevelopment
#JavaScriptProject
#FinTech
#CodingForBeginners
#FrontendDevelopment
#LearningWithCode
#TechProjects
#DigitalSkills

claude.ai/public/artifacts/0f7d92de-f5e9-429f-b707…

2 days ago | [YT] | 0