Skip to content

A collection of web development projects on HTML, CSS, and JavaScript from beginner to advanced

Notifications You must be signed in to change notification settings

apsarabishwokarma/javascript-projects

Repository files navigation

1. transparent_form

  • Reference 🎨
  • LIVE 🌐
  • HTML: form elements
  • CSS: selectors, background, flex, backdrop-filter, padding, margin, font-size, border, border-radius, box-shadow, color etc.
  • JS: DOM manipulation, Form Validation, Events

2. calculator

  • Reference 🎨
  • LIVE 🌐
  • CSS : box-shadow, grid, important, multiple classes, line-height, cursor, grid-column
  • JS : querySelector, replaceAll(), eval(), toFixed(2), slice()method

3. emoji art

4. Animated page load

5. Form Validation

  • LIVE 🌐
  • HTML: Form elements for user input.
  • CSS: Styling for form layout and validation messages.
  • JS: Validation logic to check user input and display appropriate messages.

6. TODO List

  • LIVE 🌐
  • HTML: List structure for tasks, input field for adding new tasks.
  • CSS: Styling for layout, colors, and task items.
  • JS: DOM manipulation for adding, deleting, and updating tasks.

7. Digital Clock

  • LIVE 🌐
  • HTML: Structure for displaying digital clock.
  • CSS: Styling for layout, colors, and font size.
  • JS: Script to update clock time in real-time.

8. Projectile Simulation

  • LIVE 🌐
  • HTML: Structure for displaying simulation environment.
  • CSS: Styling for layout and animation.
  • JS: Physics simulation for projectile motion.

9. Portfolio

  • LIVE 🌐
  • HTML: Structure for portfolio sections, projects, and contact information.
  • CSS: Styling for layout, colors, and typography.
  • JS: Optional interactivity like smooth scrolling or project filtering.

10. Mini Calendar

  • LIVE 🌐
  • HTML: Structure for displaying a mini calendar.
  • CSS: Styling for layout and visual representation of dates.
  • JS: Script to populate calendar with current month dates and handle navigation.

11. Tic Tac Toe

  • LIVE 🌐
  • HTML: Structure for game board and UI elements.
  • CSS: Styling for layout, colors, and game grid.
  • JS: Logic for game mechanics, including detecting wins and handling player turns.

12. Responsive Login Form

  • LIVE 🌐
  • HTML: Form elements for login input.
  • CSS: Styling for form layout and responsiveness.
  • JS: Basic form validation and submission handling.

13. Spotify

  • LIVE 🌐
  • HTML: Structure for music player, buttons, and controls.
  • CSS: Styling for layout, colors, and player controls.
  • JS: DOM manipulation for playing/pausing music, changing tracks, and displaying metadata.

14. Youtube [Responsive, REST API, Tooltip, Drawer]

console.log("to be continued");

About

A collection of web development projects on HTML, CSS, and JavaScript from beginner to advanced

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published