Skip to content

Manan-Joshi750/JS_HTML_CSS

Repository files navigation

Prior Information:

  1. All applications are designed to be accessed directly in a web browser without any additional setup.
  2. They are lightweight and demonstrate fundamental concepts of front-end web development using HTML, CSS, and JavaScript.
  3. 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

  1. Classic two-player game implemented using HTML, CSS, and JavaScript.
  2. Features include a dynamic game board, player turns, and win/draw announcements.
  3. Players take turns clicking on the 3x3 grid to place their marks (X or O).
  4. Supports gameplay on a single device with no server interaction required.

2. Rock-Paper-Scissors Game

  1. Traditional hand game recreated with HTML, CSS, and JavaScript.
  2. Players choose rock, paper, or scissors while the computer generates a random choice.
  3. Determines winners based on classic rules: rock beats scissors, scissors beats paper, paper beats rock.
  4. Interactive interface designed for quick and engaging gameplay.

3. Calculator

  1. The calculator updates the display dynamically, showing the full expression as you type.
  2. Handles addition, subtraction, multiplication, and division using the eval function for accurate results.
  3. Easily reset the calculator with the clear button (C), starting a new calculation afresh.
  4. After showing a result, seamlessly start a new expression or continue with the current calculation based on input.

4. Character Counter

  1. Provides a real-time character counter that dynamically updates as the user types into the input field.
  2. The interface is simple and clean, displaying the character count in a visually appealing manner.
  3. The application is designed to be responsive and works well on different screen sizes and devices.
  4. The counter displays a zero-padded count for clarity and immediate visual feedback.

5. Age Calculator

  1. This project calculates the user's age in years, months, and days based on the input birthdate.
  2. The application adjusts for scenarios where the birthdate has not yet occurred in the current year or month to ensure accuracy.
  3. The interface is simple and intuitive, featuring a date input field and a clear display of the calculated age.
  4. The design is responsive and provides immediate feedback upon clicking the "Calculate Age" button, with visual cues for invalid input.

6. Background Color Selector

  1. This project allows users to change the background color of the webpage by selecting from a palette of predefined colors.
  2. Users can choose from a variety of colors displayed as clickable div elements to instantly update the background.
  3. The user interface is straightforward, making it easy for users to interact and change colors.
  4. The application is designed to be responsive, ensuring usability across various devices and screen sizes.

7. Captcha Generator

  1. Generates random CAPTCHA strings using HTML, CSS, and JavaScript.
  2. Features a refresh button to create a new CAPTCHA and a submit button to validate user input.
  3. Users enter the CAPTCHA into an input field and receive immediate feedback on correctness.
  4. Designed for single-device use with a clean, user-friendly interface.

8. Temperature Converter

  1. Convert temperatures between Celsius and Fahrenheit with an intuitive input and dropdown selection.
  2. Accessible and visually appealing on various devices and screen sizes.
  3. Immediate feedback for temperature conversion upon input and selection.
  4. Alerts users of invalid inputs, ensuring accurate conversion results.

9. Simple Survey Bot

  1. Interactive survey bot that asks a series of questions to the user.
  2. Each response is acknowledged with a friendly message related to the user's input.
  3. The bot waits 2 seconds before proceeding to the next question.
  4. 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

  1. User-friendly interface with input fields, currency dropdowns, and flags.
  2. Reverse currencies with an arrow icon; updates flags dynamically.
  3. Fetches exchange rates from two APIs and displays the converted amount.
  4. Defaults to "1" for invalid inputs and handles API failures gracefully.
  5. Loading indicator during data fetch; responsive design for all devices.

11. Password Generator

  1. Users can generate random passwords by clicking "Generate Password".
  2. Options to include lowercase, uppercase, numbers, symbols, exclude duplicates, and include spaces.
  3. Generated password displayed in a non-editable text input field.
  4. Users can copy the password to the clipboard by clicking "Copy".

12. Digital Clock

  1. Displays a digital clock that updates in real-time.
  2. Shows hours, minutes, seconds, and period (AM/PM).
  3. Uses JavaScript to dynamically update the time.
  4. Enhances appearance with a black background and cyan text.

13. Password Strength Checker

  1. Created a real-time password strength checker.
  2. Enhanced UI with a modern design and clear color scheme.
  3. Displays password strength with colored bars: red (poor), orange (weak), green (strong).
  4. Provides real-time feedback and alerts for whitespace.
  5. Added a toggle feature to show or hide the password.

14. Naughty Submit Button

  1. Login form with a moving "Submit" button using HTML, CSS, and JavaScript.
  2. Validates username (alphanumeric, 4+ characters) and password (8+ characters, includes upper/lower case, number, special symbol).
  3. Changes input field colors based on validity.
  4. Shows success message on valid input; button moves on invalid input.

15. ToDo List Application

  1. HTML, CSS, and JavaScript create a dynamic to-do list application.
  2. Users can add tasks, mark them as complete, and delete individual tasks.
  3. Pending tasks count updates dynamically; users can clear all tasks with a button.
  4. 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

  1. This project features a weather forecast application built using HTML, CSS, and JavaScript.
  2. Users can input a city name and click "Search" to retrieve and display current weather data.
  3. The application dynamically updates the UI to show details such as temperature, weather description, humidity, wind speed, pressure, and precipitation.
  4. CSS is used to style the application with responsive design principles, including transitions and background color changes based on temperature ranges.
  5. JavaScript handles API requests to fetch weather data from OpenWeatherMap and manages the display of weather information based on user input.

17. Quiz Application

  1. JavaScript code manages a quiz application where questions are shuffled and only five out of ten questions are asked randomly.
  2. User selects answers through radio buttons; correct answers are tracked to calculate the score.
  3. After answering five questions, it checks if the user can proceed to the sixth based on correct answers.
  4. Results display the total score and review each question showing user's and correct answers.
  5. CSS styles ensure a visually appealing quiz interface with responsive design elements.

18. Snake Game

  1. A classic snake game where the snake moves across the screen, growing in size as it consumes food.
  2. Styled using CSS for a visually appealing and smooth gaming experience.
  3. JavaScript handles the movement logic, collision detection, and score tracking.
  4. Easily modifiable speed, grid size, and design elements for personalized gameplay.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published