Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature 03 index #17

Merged
merged 3 commits into from
Oct 30, 2020
Merged

Feature 03 index #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3e5ff94
updated index page
FarhinChowdhury Oct 30, 2020
ee31419
code for post product
FarhinChowdhury Oct 30, 2020
757721a
js code but needs to incoporate db
FarhinChowdhury Oct 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 100 additions & 107 deletions public/assets/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,127 +1,120 @@
/* unlike node where we can pull in packages with npm, or react, for normal
webpages, we can use a cool resource called unpkg from the html page, so
in this example we use the moment npm package on both the server & client side */

/*
note how we wrap our api fetch in this function that allows us to do some
additional error / message handling for all API calls...
*/
async function fetchJSON( url, method='get', data={} ){
let settings = {
method,
headers: { 'Content-Type': 'application/json' }
}
// only attach the body for put/post
if( method === 'post' || method === 'put' ) {
settings.body = JSON.stringify( data )
}

const result = await fetch( url,settings ).then( res=>res.json() )

/* put the api result message onto the screen as a message if it exists */
if( result.status && result.message ){
const apiResultEl = document.querySelector('#apiMessage')
apiResultEl.innerHTML = result.message
apiResultEl.classList.remove( 'd-none' )
console.log( 'showing message: '+ result.message )
setTimeout( function(){
apiResultEl.classList.add( 'd-none' )
}, 5000 )
} else if( !result.status && result.message ){
alert( 'Problems: ' + result.message )
let cart = document.querySelectorAll(".add-cart")

let products = [
{ name:"Shrek Pillow",
tag:"shrekpillow",
price:18,
inCart:0
},
{
name:"Shrek Pillow Small",
tag:"shrekpillow-sm",
price:9.99,
inCart:0
},
{
name:"Shrek Duvet Cover",
tag:"shrekduvet",
price:111.99,
inCart:0
},
{
name:"Shrek Cup",
tag:"shrekcup",
price:12,
inCart:0
}

]

return result
}

async function taskList( due='' ){
const taskList = await fetchJSON( '/api/tasks' + (due ? `/${due}` : '') )
console.log( `[taskList] due='${due}'`, taskList )

const listEl = document.querySelector('#list')
listEl.innerHTML = ''

taskList.forEach( function( task ){
listEl.innerHTML += `
<li class="list-group-item">
<div class="float-right p-0">
<button onClick="taskDelete(${task.id})" class="border-0 btn-transition btn btn-outline-danger"> <i class="fa fa-trash"></i> </button>
</div>
<div class="todo-indicator bg-${task.priority}"></div>
<h3 class="text-primary">${task.info}</h3>
<small class="text-muted">${task.due ? 'Due: '+moment(task.due).format('MMM Do, YYYY') : '' }</small>
</li>
`
for (i=0;i<cart.length;i++){
cart[i].addEventListener('click',()=>{
cartNumbers(products[i])
totalCost(products[i])
})
}

/* functions triggered by the html page */

// run once page has loaded
async function mainApp(){
console.log( '[mainApp] starting...' )

// show the task list ...
taskList()
//add to cart
function cartNumbers(product){
console.log(product)
let productNumbers= localStorage.getItem('cartNumbers');
productNumbers=parseInt(productNumbers)

if(productNumbers){
localStorage.setItem('cartNumbers',productNumbers + 1)
document.querySelector("#cartCounter").textContent = productNumbers + 1;
}else{
localStorage.setItem('cartNumbers', 1)
document.querySelector("#cartCounter").textContent = 1;
}
setItems(product)
}

function showTodaysTasks(){
document.querySelector('#todayTasksBtn').classList.add('d-none')
document.querySelector('#allTasksBtn').classList.remove('d-none')

const today = moment().format('YYYY-MM-DD')
taskList( today )
function setItems(product){
let cartItems = localStorage.getItem("productsPicked")
cartItems = JSON.parse(cartItems);


if(cartItems!=null){
if(cartItems[product.tag] == undefined){
cartItems = {
...cartItems,
[product.tag]:product
}
}
cartItems[product.tag].inCart +=1;
}else{
product.inCart = 1;
cartItems = {[product.tag]: product}
}


localStorage.setItem("productsPicked", JSON.stringify(cartItem))
}

function showAllTasks(){
document.querySelector('#todayTasksBtn').classList.remove('d-none')
document.querySelector('#allTasksBtn').classList.add('d-none')

taskList()
}
//remembers previous selections into cart

// toggled by the [Add Task] button
function toggleTaskForm( forceHide=false ){
const formEl = document.querySelector('#taskForm')
if( !forceHide || formEl.classList.contains('d-none') ){
formEl.classList.remove( 'd-none' )
} else {
formEl.classList.add( 'd-none' )
function remeberCartItems(){
let productNumbers= localStorage.getItem('cartNumbers');
if(productNumbers){
document.querySelector("#cartCounter").textContent = productNumbers
}
}

// triggered by the [x] delete button
async function taskDelete( id ){
const deleteResponse = await fetchJSON( `/api/tasks/${id}`, 'delete' )
console.log( '[taskDelete] ', deleteResponse )

taskList()
}
function totalCost(product){
let cartCost = localStorage.getItem('totalCost');


// save the new form
async function saveForm( event ){
event.preventDefault()
if(carCost != null){
cartCost = parseFloat(cartCost)
localStorage.setItem('totalCost', cartCost+ product.price)

const formData = {
priority: document.querySelector('#taskPriority').value,
info: document.querySelector('#taskInfo').value,
due: document.querySelector('#taskDue').value
}else{
localStorage.setItem("totalCost", product.price)
}
}

// clear form
document.querySelector('#taskPriority').value = ''
document.querySelector('#taskInfo').value = ''
document.querySelector('#taskDue').value = ''
console.log( '[saveForm] formData=', formData )

const saveResponse = await fetchJSON( '/api/tasks', 'post', formData )
console.log( '[saveResponse] ', saveResponse )

if( saveResponse.status ){
// hide the form
toggleTaskForm( true )
function displayItems(){
let cartItems = localStorage.getItem("productPicked")
cartItems= JSON.parse(cartItems)
let productContainer = document.querySelector(".product")

if(cartItems && productContainer){
console.log("running")
productContainer.innerHTML ='';
Object.values(cartItems).map(item=>{
productContainer.innerHTML +=`
<div class="product">
<i class="far fa-times-circle"></i>
<span>${item.name}</span>
</div>
<div class="price">$${item.price}</div>
<input class="qantity>${item.inCart}>
`
})

// refresh the list
taskList()
}
}
}
remeberCartItems()
displayItems()
75 changes: 75 additions & 0 deletions public/cart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project #2</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@600&display=swap" rel="stylesheet">

<!-- using bootstrap 5 for fun, no jQuery -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<link rel="stylesheet" href="./assets/style.css">

<!-- any NPM packages you want to include, you can directly include like this -->
<script src="https://unpkg.com/moment"></script>
</head>

<!-- we will start the app when this page is loaded by running it with onLoad... -->
<body>
<nav id = "nav"class="navbar">
<a href="./index.html" class="navbar-brand mb-0 h1">Fandomzzz</a>
<div class="nav-search-field ">
<div class="input-group">
<input id = "searchBox" type="text" class="form-control" placeholder="Search Item" size="50" maxlength="300" aria-label="Search for anything" placeholder="Search for anything">
<button class="input-group-text" id="searchBtn">
<i class="fas fa-search"></i>
</div>
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="./products.html">Post Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item" id = "cart">

<a href="#!" class="nav-link navbar-link-2 waves-effect">
<span id = "cartCounter"class="badge badge-pill red">0</span>
<i class="fas fa-shopping-cart pl-0"></i>
</a>

</li>
<li class="nav-item pl-2 mb-2 mb-md-0">
<a href="#!" type="button"
class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign up</a>
</li>
</ul>

</nav>

<div class="product-container ">
<div class="product-header">
<h5 class="product-name">Product</h5>
<h5 class="product-price">Price </h5>
<h5 class="product-quantity"> Quantity</h5>
<h5 class="product-total">Total</h5>
</div>
<div class="products">

</div>

</div>
<div class="footer">
All Rights Reserved.
</div>


</body>
<script src="./assets/script.js"></script>
</html>
Loading