Prior Information:
- All applications are designed to be accessed directly in a web browser without any additional setup.
- They are lightweight and demonstrate fundamental concepts of front-end web development using HTML, CSS, and JavaScript.
- Feel free to explore the code (respective .js file for logic and respective.css file for styling) to see how each one of them was implemented.
Key Features
1. Tic-Tac-Toe Game
- Classic two-player game implemented using HTML, CSS, and JavaScript.
- Features include a dynamic game board, player turns, and win/draw announcements.
- Players take turns clicking on the 3x3 grid to place their marks (X or O).
- Supports gameplay on a single device with no server interaction required.
2. Rock-Paper-Scissors Game
- Traditional hand game recreated with HTML, CSS, and JavaScript.
- Players choose rock, paper, or scissors while the computer generates a random choice.
- Determines winners based on classic rules: rock beats scissors, scissors beats paper, paper beats rock.
- Interactive interface designed for quick and engaging gameplay.
3. Calculator
- The calculator updates the display dynamically, showing the full expression as you type.
- Handles addition, subtraction, multiplication, and division using the eval function for accurate results.
- Easily reset the calculator with the clear button (C), starting a new calculation afresh.
- After showing a result, seamlessly start a new expression or continue with the current calculation based on input.
4. Character Counter
- Provides a real-time character counter that dynamically updates as the user types into the input field.
- The interface is simple and clean, displaying the character count in a visually appealing manner.
- The application is designed to be responsive and works well on different screen sizes and devices.
- The counter displays a zero-padded count for clarity and immediate visual feedback.
5. Age Calculator
- This project calculates the user's age in years, months, and days based on the input birthdate.
- The application adjusts for scenarios where the birthdate has not yet occurred in the current year or month to ensure accuracy.
- The interface is simple and intuitive, featuring a date input field and a clear display of the calculated age.
- The design is responsive and provides immediate feedback upon clicking the "Calculate Age" button, with visual cues for invalid input.
6. Background Color Selector
- This project allows users to change the background color of the webpage by selecting from a palette of predefined colors.
- Users can choose from a variety of colors displayed as clickable div elements to instantly update the background.
- The user interface is straightforward, making it easy for users to interact and change colors.
- The application is designed to be responsive, ensuring usability across various devices and screen sizes.
7. Captcha Generator
- Generates random CAPTCHA strings using HTML, CSS, and JavaScript.
- Features a refresh button to create a new CAPTCHA and a submit button to validate user input.
- Users enter the CAPTCHA into an input field and receive immediate feedback on correctness.
- Designed for single-device use with a clean, user-friendly interface.
8. Temperature Converter
- Convert temperatures between Celsius and Fahrenheit with an intuitive input and dropdown selection.
- Accessible and visually appealing on various devices and screen sizes.
- Immediate feedback for temperature conversion upon input and selection.
- Alerts users of invalid inputs, ensuring accurate conversion results.
9. Simple Survey Bot
- Interactive survey bot that asks a series of questions to the user.
- Each response is acknowledged with a friendly message related to the user's input.
- The bot waits 2 seconds before proceeding to the next question.
- After the final question's response, the bot displays a closing message and hides the input box, providing a smooth conclusion to the interaction.
10. Currency Converter
- User-friendly interface with input fields, currency dropdowns, and flags.
- Reverse currencies with an arrow icon; updates flags dynamically.
- Fetches exchange rates from two APIs and displays the converted amount.
- Defaults to "1" for invalid inputs and handles API failures gracefully.
- Loading indicator during data fetch; responsive design for all devices.
11. Password Generator
- Users can generate random passwords by clicking "Generate Password".
- Options to include lowercase, uppercase, numbers, symbols, exclude duplicates, and include spaces.
- Generated password displayed in a non-editable text input field.
- Users can copy the password to the clipboard by clicking "Copy".
12. Digital Clock
- Displays a digital clock that updates in real-time.
- Shows hours, minutes, seconds, and period (AM/PM).
- Uses JavaScript to dynamically update the time.
- Enhances appearance with a black background and cyan text.
13. Password Strength Checker
- Created a real-time password strength checker.
- Enhanced UI with a modern design and clear color scheme.
- Displays password strength with colored bars: red (poor), orange (weak), green (strong).
- Provides real-time feedback and alerts for whitespace.
- Added a toggle feature to show or hide the password.
14. Naughty Submit Button
- Login form with a moving "Submit" button using HTML, CSS, and JavaScript.
- Validates username (alphanumeric, 4+ characters) and password (8+ characters, includes upper/lower case, number, special symbol).
- Changes input field colors based on validity.
- Shows success message on valid input; button moves on invalid input.
15. ToDo List Application
- HTML, CSS, and JavaScript create a dynamic to-do list application.
- Users can add tasks, mark them as complete, and delete individual tasks.
- Pending tasks count updates dynamically; users can clear all tasks with a button.
- Interface features include a textarea for input, list items for tasks, and a clear button, all styled with a clean, responsive design.
16. Weather ForeCast Application
- This project features a weather forecast application built using HTML, CSS, and JavaScript.
- Users can input a city name and click "Search" to retrieve and display current weather data.
- The application dynamically updates the UI to show details such as temperature, weather description, humidity, wind speed, pressure, and precipitation.
- CSS is used to style the application with responsive design principles, including transitions and background color changes based on temperature ranges.
- JavaScript handles API requests to fetch weather data from OpenWeatherMap and manages the display of weather information based on user input.
17. Quiz Application
- JavaScript code manages a quiz application where questions are shuffled and only five out of ten questions are asked randomly.
- User selects answers through radio buttons; correct answers are tracked to calculate the score.
- After answering five questions, it checks if the user can proceed to the sixth based on correct answers.
- Results display the total score and review each question showing user's and correct answers.
- CSS styles ensure a visually appealing quiz interface with responsive design elements.
18. Snake Game
- A classic snake game where the snake moves across the screen, growing in size as it consumes food.
- Styled using CSS for a visually appealing and smooth gaming experience.
- JavaScript handles the movement logic, collision detection, and score tracking.
- Easily modifiable speed, grid size, and design elements for personalized gameplay.