<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
<title>Beverage Project</title>
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="col-sm-6">
<div class="card ">
<div class="card-body" id="tea-div">
<h4 class="card-title text-center font-weight-bold" id="tea-title">Tea </h4>
<hr>
<div class="list-group" id="tea-list">
</div>
<hr>
</div>
<div class="card-body align-self-center ">
<button class="btn btn-lg btn-link rounded-circle" id="add-tea" type="button"><img
src="https://gamepedia.cursecdn.com/arksurvivalevolved_gamepedia/2/28/Cup_of_Tea_%28Primitive_Plus%29.png"
style="border-radius:50%"/>
</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card ">
<div class="card-body" id="coffee-div">
<h4 class="card-title text-center font-weight-bold" id="coffee-title">Coffee </h4>
<hr>
<div class="list-group" id="coffee-list">
</div>
<hr>
</div>
<div class="card-body align-self-center">
<button class="btn btn-lg btn-link rounded-circle" id="add-coffee" type="button"><img
src="https://www.neurologyadvisor.com/wp-content/uploads/sites/10/2018/12/c7c44caf282a19cdac9b7e138483f37b_bookmarkImage_256x256_medium_original_1.jpg"
style="border-radius:50%"/>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script crossorigin="anonymous"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script crossorigin="anonymous"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script crossorigin="anonymous"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="ui.js"></script>
<script src="storage.js"></script>
<script src="beverage.js"></script>
<script src="project.js"></script>
</body>
</html>
= Beverage Time Tracker
A Javascript application for tracking prepared beverage time in an office using Javascript ES6, LocalStorage, Bootstrap4, and Jquery.
==== Usage
When someone clicks to a beverage, a new time is being recorded for it to display when it is prepared
and the previous record will be displayed with strikethrough style.
class Beverage {
constructor(name, date) {
this.name = name;
this.date = date;
// this.isStrikethrough = isStrikethrough;
}
}
const teaButton = document.getElementById("add-tea");
const coffeeButton = document.getElementById("add-coffee");
eventListeners();
function eventListeners() {
teaButton.addEventListener("click", addTea);
coffeeButton.addEventListener("click", addCoffee);
document.addEventListener("DOMContentLoaded", function () {
let beverages = Storage.getBeveragesFromStorage();
UI.loadAllBeverages(beverages);
});
}
function addTea(e) {
const date = new Date();
const name = "tea";
// const isStrikethrough = false;
const newBeverage = new Beverage(name, date);
UI.addBeverageToUI(newBeverage);
Storage.addBeverageToStorage(newBeverage);
UI.displayMessages("Tea is prepared...", "success","tea");
e.preventDefault();
}
function addCoffee(e) {
const date = new Date();
const name = "coffee";
// const isStrikethrough = false;
const newBeverage = new Beverage(name, date);
UI.addBeverageToUI(newBeverage);
Storage.addBeverageToStorage(newBeverage);
UI.displayMessages("Coffee is prepared...", "success","coffee");
e.preventDefault();
}
class UI {
static addBeverageToUI(newBeverage) {
if (newBeverage.name === "tea") {
this.addTeaToUI(newBeverage);
} else if (newBeverage.name === "coffee") {
this.addCoffeeToUI(newBeverage);
}
}
static addTeaToUI(newBeverage) {
const teaList = document.getElementById("tea-list");
//add strikethrough style
$("#tea-list").children().css("text-decoration-line", "line-through");
teaList.innerHTML += `<a href="#" class="list-group-item list-group-item-action">${newBeverage.date.toLocaleTimeString()}</a>`;
}
static addCoffeeToUI(newBeverage) {
const coffeeList = document.getElementById("coffee-list");
$("#coffee-list ").children().css("text-decoration-line", "line-through");
coffeeList.innerHTML += `<a href="#" class="list-group-item list-group-item-action">${newBeverage.date.toLocaleTimeString()}</a>`;
}
static displayMessages(message, type, beverage) {
const div = document.querySelector(`#${beverage}-div`);
const messageDiv = document.createElement("div");
messageDiv.className = `alert alert-${type}`;
messageDiv.textContent = message;
div.appendChild(messageDiv);
// alert for 3 seconds
setTimeout(function () {
messageDiv.remove();
}, 3000);
}
static loadAllBeverages(beverages) {
const todayDate = new Date();
beverages.forEach(function (beverage) {
/*
* Date in local storage is ISO 8601 formatted.
* Convert it date object
* */
beverage.date = new Date(beverage.date);
// Control the day of beverage
if (beverage.date.toDateString() === todayDate.toDateString()) {
UI.addBeverageToUI(beverage);
} else {
// if it is not the same day don't show and delete from storage.
Storage.deleteBeverageFromStorage(beverage.name, beverage.date.toISOString());
}
});
}
}
class Storage {
static addBeverageToStorage(newBeverage) {
let beverages = this.getBeveragesFromStorage();
beverages.push(newBeverage);
localStorage.setItem("beverages", JSON.stringify(beverages));
}
static getBeveragesFromStorage() {
let beverages;
if (localStorage.getItem("beverages") === null) {
beverages = [];
} else {
beverages = JSON.parse(localStorage.getItem("beverages"));
}
return beverages;
}
static deleteBeverageFromStorage(name, date) {
let beverages = this.getBeveragesFromStorage();
beverages.forEach(function (beverage, index) {
if (beverage.name === name && beverage.date === date) {
beverages.splice(index, 1);
}
});
localStorage.setItem("beverages", JSON.stringify(beverages));
}
static clearAllBeveragesFromStorage() {
localStorage.removeItem("beverages");
}
}