Skip to content

Instantly share code, notes, and snippets.

@jekkilekki

jekkilekki/add-items.js

Created July 7, 2021 05:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jekkilekki/95d0c23be7d74606ea4e4129588058ac to your computer and use it in GitHub Desktop.
Save jekkilekki/95d0c23be7d74606ea4e4129588058ac to your computer and use it in GitHub Desktop.
Download ZIP
CodePen JS Shopping App Code
Raw
add-items.js
let STORE_BUTTON = document.querySelector('.add-item-button');
let STORE_INPUT = document.getElementById('add-item-input');
// Store button
STORE_BUTTON.onclick = function() { handleAdd() };
// Add item on keyboard ENTER
STORE_INPUT.addEventListener('keyup', function(e) {
if ( e.keyCode === 13 ) {
STORE_BUTTON.click();
}
});
/* 1. Add item function */
function handleAdd(el = null, useToast = true) {
if ( document.getElementById('pages').className === 'page-two' ) {
storeSearch( STORE_INPUT.value );
return;
}
var newItem = null;
var newItemText = null;
if ( el !== null ) {
removeTrash(el);
newItem = el;
} else if ( STORE_INPUT.value.trim() !== '' ) {
newItem = document.createElement('li');
newItemText = STORE_INPUT.value.trim();
newItem.innerHTML = newItemText;
}
if ( newItem !== null ) {
newItem.className = 'list-item new';
document.querySelector('#shopping-list.list-section').appendChild(newItem);
newItem.onclick = function() { handleClick(this); };
newItem.ondrag = function() { handleDelete(this); };
STORE_INPUT.value = '';
setTimeout( function() { newItem.className = 'list-item hot'; }, 0); if ( useToast ) { showToast('manual-add', newItemText); }
} else {
STORE_INPUT.value = ''
}
}
Raw
build-store.js
/* Create Default List & Default Store */
buildOriginalList();
refreshList();
buildStore();
function buildOriginalList() {
var items = document.querySelectorAll('.list-item');
for( var i = 0; i < items.length; i++ ) {
ORIGINAL_LIST.push(items[i]);
}
console.log( ORIGINAL_LIST );
}
function refreshList() {
var items = document.querySelectorAll('.list-item');
for( var i = 0; i < items.length; i++ ) {
items[i].onclick = function() { handleClick(this); };
items[i].ondrag = function() { handleDelete(this); };
}
showToast('reset');
}
Raw
delete-list.js
var emptyCart = document.querySelector('.empty-cart-button');
emptyCart.onclick = function() {
allTask('empty-cart', 'remove-all');
setTimeout( function() {
CART_COUNT.innerHTML = 0;
}, 1500); /* Actual time for 6 items will be 3000 because 500 * 6 in delayedResponse() */
};
Raw
empty-cart.js
var emptyCart = document.querySelector('.empty-cart-button');
emptyCart.onclick = function() {
allTask('empty-cart', 'remove-all');
setTimeout( function() {
CART_COUNT.innerHTML = 0;
}, 1500); /* Actual time for 6 items will be 3000 because 500 * 6 in delayedResponse() */
};
Raw
helpers.js
/*
Helper functions
*/
function allTask(task, toast, originalList = false) {
var currentItems = document.querySelectorAll('.list-item');
if ( !originalList ) {
for( var i = 0; i < currentItems.length; i++ ) {
delayedResponse(currentItems[i], i, task);
}
} else {
CART_COUNT.innerHTML = '0';
for( var i = 0; i < ORIGINAL_LIST.length; i++ ) {
delayedResponse(ORIGINAL_LIST[i], i, task);
}
}
setTimeout( function() {
showToast(toast);
}, currentItems.length * 100 );
}
/* Delayed item return animation */
function delayedResponse(el, i, task) {
switch(task) {
case 'empty-cart':
setTimeout( function() {
handleReturn(el, false);
}, 500 * i);
break;
case 'delete-list':
setTimeout( function() {
handleDelete(el, false);
}, 500 * i);
break;
case 'reset-list':
setTimeout( function() {
handleAdd(el, false);
}, 500 * i);
break;
}
}
Raw
iphone-clock.js
// iPhone clock
setInterval( function() {
displayTime()
}, 1000)
function displayTime() {
let iPhoneClock = new Date();
let hours = iPhoneClock.getHours();
let minutes = iPhoneClock.getMinutes();
let seconds = iPhoneClock.getSeconds();
if ( minutes < 10 ) { minutes = '0' + minutes; }
if ( seconds < 10 ) { seconds = '0' + seconds; }
document.getElementById('time').innerHTML = hours + ':' + minutes + ':' + seconds
}
Raw
purchase-items.js
let STORE_BUTTON = document.querySelector('.add-item-button');
let STORE_INPUT = document.getElementById('add-item-input');
// Store button
STORE_BUTTON.onclick = function() { handleAdd() };
// Add item on keyboard ENTER
STORE_INPUT.addEventListener('keyup', function(e) {
if ( e.keyCode === 13 ) {
STORE_BUTTON.click();
}
});
/* 1. Add item function */
function handleAdd(el = null, useToast = true) {
if ( document.getElementById('pages').className === 'page-two' ) {
storeSearch( STORE_INPUT.value );
return;
}
var newItem = null;
var newItemText = null;
if ( el !== null ) {
removeTrash(el);
newItem = el;
} else if ( STORE_INPUT.value.trim() !== '' ) {
newItem = document.createElement('li');
newItemText = STORE_INPUT.value.trim();
newItem.innerHTML = newItemText;
}
if ( newItem !== null ) {
newItem.className = 'list-item new';
document.querySelector('#shopping-list.list-section').appendChild(newItem);
newItem.onclick = function() { handleClick(this); };
newItem.ondrag = function() { handleDelete(this); };
STORE_INPUT.value = '';
setTimeout( function() { newItem.className = 'list-item hot'; }, 0); if ( useToast ) { showToast('manual-add', newItemText); }
} else {
STORE_INPUT.value = ''
}
}
Raw
remove-items.js
/* 3. Delete item function (used in handlePurchase()) */
function handleDelete(el, useToast = true) {
el.className += ' delete';
setTimeout( function() {
el.remove();
}, 750);
if ( useToast ) {
showToast('delete');
}
}
Raw
reset-all.js
var emptyCart = document.querySelector('.empty-cart-button');
emptyCart.onclick = function() {
allTask('empty-cart', 'remove-all');
setTimeout( function() {
CART_COUNT.innerHTML = 0;
}, 1500); /* Actual time for 6 items will be 3000 because 500 * 6 in delayedResponse() */
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment