Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lastnamearya/javascript-grocery-app

Developed this App in order to learn DOM Manipulation Techniques
https://github.com/lastnamearya/javascript-grocery-app

dom javascript

Last synced: about 2 months ago
JSON representation

Developed this App in order to learn DOM Manipulation Techniques

Host: GitHub
URL: https://github.com/lastnamearya/javascript-grocery-app
Owner: lastnamearya
Created: 2018-02-21T13:07:09.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2018-02-23T20:14:46.000Z (almost 7 years ago)
Last Synced: 2024-11-11T05:53:35.362Z (3 months ago)
Topics: dom, javascript
Language: CSS
Homepage: https://lastnamearya.github.io/Grocery-App-JavaScript-DOM/
Size: 26.4 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# [Groceries Shopping List App](https://lastnamearya.github.io/Grocery-App-JavaScript-DOM/)
I made this [app](https://lastnamearya.github.io/Grocery-App-JavaScript-DOM/) in order to learn DOM Manipulation in plain vanilla.js. I made this app from scratch to strengthen my DOM Manipulation Skills.
This App brings together a selection of the DOM techniques to update the contents of the List. It has three main aims:

## 1. Add a New Item to the Start and End of the List
Adding an item to the start of the list requires the use of a different method than adding an element to the end of list.

## 2. Set a Class Attribute on all Items
This involves looping through each of the elements i.e my Shopping List Items and updating the value of the class attribute to 'cool'.

## 3. Add the number of list items to the heading
This involves four Steps

1. Reading the content of the heading.
2. Counting the number of elements in the page.
3. Adding the number of items to the content of the heading.
4. Updating the heading with this new Content.

[![Screen_Shot_2018-02-22_at_8.01.04_PM.png](https://s10.postimg.org/uxdtyfr09/Screen_Shot_2018-02-22_at_8.01.04_PM.png)](https://postimg.org/image/7j5umi92t/)

Jigyasu Arya ~ lastnamearya