https://github.com/priyanayak28/fruit-world

A collection of small projects to practice JavaScript DOM manipulation methods, including to-do lists, form validation, event handling, and dynamic styling.
https://github.com/priyanayak28/fruit-world

css dom-manipulation event-handling front-end html javascript javascript-practice web-development

Last synced: 3 days ago
JSON representation

A collection of small projects to practice JavaScript DOM manipulation methods, including to-do lists, form validation, event handling, and dynamic styling.

• Host: GitHub
• URL: https://github.com/priyanayak28/fruit-world
• Owner: PriyaNayak28
• Created: 2024-01-01T06:23:59.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-09-06T18:00:52.000Z (2 months ago)
• Last Synced: 2024-09-06T21:14:04.873Z (2 months ago)
• Topics: css, dom-manipulation, event-handling, front-end, html, javascript, javascript-practice, web-development
• Language: JavaScript
• Homepage: https://priyanayak28.github.io/Fruit-World/
• Size: 12.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DOM Manipulation Practice

## Description

This repository is created for practicing and demonstrating various JavaScript DOM manipulation methods. It contains small projects and examples that show how to dynamically interact with webpage elements using DOM methods.

Through this practice, you will gain a better understanding of how to:

- Add, edit, and delete elements on a webpage.

- Handle user interactions and events.

- Traverse and modify the DOM structure.

- Change the styles and properties of elements dynamically.

## Features

- **Basic To-Do List**: Add, edit, and delete tasks using DOM methods like `createElement`, `appendChild`, and `removeChild`.

- **Form Validation**: Validate form inputs dynamically using `input.value`, `classList.add`, `classList.remove`, and more.

- **Event Listeners**: Attach event listeners to elements to handle user interactions (e.g., clicks, keypresses).

- **Dynamic Styling**: Change the appearance of elements using JavaScript to modify CSS properties.

- **DOM Traversal**: Learn how to navigate between parent, child, and sibling elements in the DOM.

## Getting Started

### Installation

1. Clone the repository to your local machine:

   ```bash

   git clone https://github.com/PriyaNayak28/Fruit-World