Skip to content

Commit

Permalink
changes to shopping app
Browse files Browse the repository at this point in the history
  • Loading branch information
met18001 committed Feb 2, 2020
1 parent 12278e6 commit 8932fbf
Showing 1 changed file with 77 additions and 14 deletions.
91 changes: 77 additions & 14 deletions week-2/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
li{
padding: .5em 0;
}

input:checked + span{
text-decoration: line-through;
}
</style>
</head>
<body>
Expand All @@ -27,25 +31,84 @@ <h1>My Shopping List App</h1>

<hr>

<ul>

<li>
<input type="checkbox" name=items>
Milk
<a href="">x</a>
</li>
<li>
<input type="checkbox" name=items>
Cookies
<a href="">x</a>
</li>
<ul id="shopping-list">

</ul>
<script>
const addBTn = document.getElementById('add');
const inputBox = document.getElementById('item');
const list = document.getElementById('shopping-list');
let allItems =['Milk','Eggs', 'Bacon', 'Aloe Vera Stalks'];

addBTn.addEventListener('click', addItem);



function addItem(arg){

if(typeof arg == 'string'){
item = arg;
}else{
item =inputBox.value;
}

// Create list item
let li = document.createElement('li');
li.className ="list-item";

//Create input element
let input = document.createElement('input')
input.type = "checkbox";
input.name = "items";

//Create Span tag
let span = document.createElement('span');
span.innerText = item;
span.className ="spanyo";

//Create an anchor
let a = document.createElement('a');
a.innerText ="x";
a.href = "";
a.addEventListener('click',function(event){
this.parentNode.remove();
event.preventDefault();
});

// Append each element to our list item
li.appendChild(input);
li.appendChild(span);
li.appendChild(a);

console.log(li);

list.appendChild(li);


inputBox.value = "";
inputBox.focus();

const tags = document.querySelectorAll(".spanyo");
console.log(tags);

const array1 = [span];
array1.forEach(element => console.log(element));


//Queryselecterall - log text
//span.innertext
// document.queryselectorall
//give span a class name

};




allItems.forEach(element => {
console.log(element);
addItem(element);

addBTn.addEventListener('click', function(){
console.log('buttonnclicked', inputBox.value);
});
</script>
</body>
Expand Down

0 comments on commit 8932fbf

Please sign in to comment.