Skip to content

Instantly share code, notes, and snippets.

@ross-u

ross-u/README.md

Created October 30, 2019 11:57
Show Gist options
  • Save ross-u/e1a3505d17533d402c9602af83e33524 to your computer and use it in GitHub Desktop.
Save ross-u/e1a3505d17533d402c9602af83e33524 to your computer and use it in GitHub Desktop.
Download ZIP
LAB SOLUTION - DOM | Ironhack Cart
Raw
README.md

LAB SOLUTION - DOM | The Ironhack Cart


Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="./js/unique-id.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
<title>Ironhack cart</title>
</head>
<body>
</body><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./css/style.css">
<title>Ironhack cart</title>
</head>
<body>
<main>
<div class="product-wrapper" id="item-1">
<span class="product-name">IronBubble-head</span>
<p>
<span>$</span>
<span class="unit-cost">25.00</span>
</p>
<div class="quantity quantity-wrapper">
<form>
<label for="quantity">QTY</label>
<input type="number">
</form>
</div>
<div class="price-wrapper">
<span class="total-price">0</span>
</div>
<div class="btn-wrapper">
<button class="btn-delete" id="delete-1">Delete</button>
</div>
</div>
<div>
<div class="product-wrapper" id="item-2">
<span class="product-name">Iron bike</span>
<p>
<span>$</span>
<span class="unit-cost">130.00</span>
</p>
<div class="quantity quantity-wrapper">
<form>
<label for="quantity">QTY</label>
<input type="number">
</form>
</div>
<div class="price-wrapper">
<span class="total-price">0</span>
</div>
<div class="btn-wrapper">
<button class="btn-delete" id="delete-2">Delete</button>
</div>
</div>
</main>
<section>
<form id="create-new-product">
<input id="new-item-name" type="text" placeholder="New Product Name">
<input id="new-item-price" type="number" placeholder="New Product Price">
<button class="btn-add" id="new-item-create"> Add New Product </button>
</form>
<button class="btn-success" id="calc-prices-button">Calculate Prices</button>
<h2>Total Price: <span id="total-of-all">$0</span></h2>
</section>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
</html>
Raw
index.js
console.log('UNIQUE ID STRING', generateUniqueId());
function deleteItem(event) {
var clickedButton = event.currentTarget;
var itemId = clickedButton.id.split('-')[1];
var productToDelete = document.querySelector(`#item-${itemId}`);
productToDelete.remove();
getTotalPrice();
}
function getPriceByProduct(itemNode) {
var unitCostEle = itemNode.querySelector('span.unit-cost');
var quantityEle = itemNode.querySelector('form input');
var totalPriceEle = itemNode.querySelector('.total-price');
var unitCost = unitCostEle.innerHTML;
var quantity = quantityEle.value;
var totalPrice = parseFloat(unitCost) * quantity;
return totalPrice;
}
function updatePriceByProduct(productPrice, index) {}
function getTotalPrice() {
var products = document.querySelectorAll('.product-wrapper');
var totalOfAllEle = document.querySelector('#total-of-all');
var totalOfAllPrices = 0;
products.forEach(function(oneProduct) {
var totalPrice = getPriceByProduct(oneProduct);
totalPriceEle.innerHTML = `$${totalPrice.toFixed(2)}`;
});
totalOfAllEle.innerHTML = `$${totalOfAllPrices}`;
}
function createQuantityInput() {}
function createDeleteButton() {}
function createQuantityNode() {}
function createItemNode(dataType, itemData) {}
function createNewItemRow(itemName, itemUnitPrice) {
var main = document.querySelector('main');
var nextItemIndex = main.children.length + 1;
var divNode = document.createElement('div');
divNode.setAttribute('class', 'product-wrapper');
divNode.setAttribute('id', `item-${nextItemIndex}`);
var productElement = `
<span class="product-name">${itemName}</span>
<p>
<span>$</span>
<span class="unit-cost">${itemUnitPrice.toFixed(2)}</span>
</p>
<div class="quantity quantity-wrapper">
<form>
<label for="quantity">QTY</label>
<input type="number">
</form>
</div>
<div class="price-wrapper">
<span class="total-price">0</span>
</div>
<div class="btn-wrapper">
<button class="btn-delete" id="delete-${nextItemIndex}">Delete</button>
</div>
`;
divNode.innerHTML = productElement;
main.appendChild(divNode);
}
function createNewItem(event) {
event.preventDefault();
var newItemName = document.querySelector('#new-item-name').value;
var newItemPrice = document.querySelector('#new-item-price').value;
var newItemPriceFloat = parseFloat(newItemPrice);
console.log(newItemName, newItemPriceFloat);
createNewItemRow(newItemName, newItemPriceFloat);
var deleteButtons = document.getElementsByClassName('btn-delete');
addDeleteListeners(deleteButtons);
}
function addDeleteListeners(deleteButtonsList) {
for (var i = 0; i < deleteButtonsList.length; i++) {
deleteButtonsList[i].onclick = deleteItem;
}
}
window.onload = function() {
var calculatePriceButton = document.getElementById('calc-prices-button');
var createItemButton = document.getElementById('new-item-create');
var deleteButtons = document.getElementsByClassName('btn-delete');
calculatePriceButton.onclick = getTotalPrice;
createItemButton.onclick = createNewItem;
addDeleteListeners(deleteButtons);
};
Raw
style.css
input {
border: solid 1px black;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-delete {
color: #fff;
background-color: #CF000F;
border-color: #CF000F;
}
.btn-add {
color: #000;
background-color: #fff;
border-color: #fff;
}
.quantity {
margin: 0 5px;
}
.product-wrapper {
display: flex;
width: 100vw;
justify-content: space-around;
}
main {
margin-bottom: 50px;
padding: 20px;
}
Raw
unique-id.js
function generateUniqueId() {
var result, i, j;
result = 'uid';
for (j = 0; j < 32; j++) {
if (j == 8 || j == 12 || j == 16 || j == 20) result = result + '-';
i = Math.floor(Math.random() * 16)
.toString(16)
.toLowerCase();
result = result + i;
}
return result;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment