https://github.com/webwithaman/project-exercise-8-by-sheryians
Dynamic List Builder is an interactive web application that allows users to add new items to an unordered list by clicking a button. Utilizing JavaScript's DOM manipulation methods like document.createElement() and appendChild().
https://github.com/webwithaman/project-exercise-8-by-sheryians
css css-media-queries css3 dom-manipulation html js js-dom
Last synced: about 1 month ago
JSON representation
Dynamic List Builder is an interactive web application that allows users to add new items to an unordered list by clicking a button. Utilizing JavaScript's DOM manipulation methods like document.createElement() and appendChild().
- Host: GitHub
- URL: https://github.com/webwithaman/project-exercise-8-by-sheryians
- Owner: webwithaman
- Created: 2025-04-15T10:08:43.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-04-15T12:26:12.000Z (about 1 month ago)
- Last Synced: 2025-04-15T12:32:48.559Z (about 1 month ago)
- Topics: css, css-media-queries, css3, dom-manipulation, html, js, js-dom
- Language: CSS
- Homepage: https://dynamic-list-builder-by-webwithaman.netlify.app/
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Job Ready AI-Powered Cohort: Complete Web Development + DSA + Aptitude by Sheryians Coding School
### Project Exercise 8: Dynamically Add List Items
- **Topic Covered:** HTML, CSS, JavaScript, DOM
- **Description:** Create a webpage with an unordered list and a button. When the button is clicked, use JavaScript to dynamically add new list items to the unordered list. The script should create a new list item element and append it to the list each time the button is clicked. Style the list and button using CSS for better presentation. Focus on DOM manipulation techniques like `document.createElement()` and `appendChild()` to achieve this functionality.
- **Skills Covered:** DOM manipulation, `document.createElement()`, `appendChild()`, event listeners, and DOM traversal for interacting with elements.
### Live Demo
You see a live demo of this project (https://dynamic-list-builder-by-webwithaman.netlify.app/)