Introduction( kind of :) )
Starting with the process of generating 5 coffee beans for each cup of coffee. The coffee class includes a strength attribute, and my goal is to visually distinguish the coffee beans which have a strength greater than the selected value (as shown in the image below).
My CoffeeMachine Class (simplified):
class CoffeeMachine {
constructor() {
this.name = ""
this.coffeeList = { list: [] }
this.tokenList = { list: [] }
this.shoppingCard = { list: [] }
}
addCoffe(coffee) {
this.coffeeList.list.push(coffee)
}
addToken(token) {
this.coffeeList.list.push(token)
}
addToCart(item) {
this.shoppingCard.list.push(item)
}
}
My Coffee Class (simplified):
class Coffee {
constructor() {
this.name = ""
this.price = 0
this.time = 0.0
this.imgsrc = ""
this.strength = 0
this.sugar = 0
this.caffeine = 0
this.values = []
this.titelArray = ["caffeeine", "sugar", "time", "strength"]
this.colors = ["#e34444", "#7944e3", "#44e35c", "#e3d044"]
}
setValues(name, price, time, strength, imgsrc, sugar, caffeine) {
this.name = name
this.price = price
this.time = time
this.strength = strength
this.imgsrc = imgsrc
this.sugar = sugar
this.caffeine = caffeine
}
setCoffeeValues() {
this.values = [this.caffeine + "mg", this.sugar + "g", this.time + "s", this.strength + "/5"]
}
}
The coffees will be added to the shopping cart list in the coffee machine as shown below:
coffeeMachine.shoppingCard.list.push(coffeeMachine.coffeeList.list[index])
Initializing the coffees
coffeeLatte.setValues("Latte Macchiato", 1.60, 30.0, 3, "../pics/coffeeLatte.png", 18, 75)
coffeeBlack.setValues("Black Coffee", 1.20, 20.0, 5, "../pics/coffeeBlack.png", 4, 95)
coffeCappunchino.setValues("Cappuccino", 1.60, 35, 2, "../pics/coffeeCappuchino.png", 12, 64)
The update shopping cart method in the coffee machine class (the problem):
This is how I generate the beans for each coffee in the list:
for (let i = 0; i < this.shoppingCard.list.length; i++) {
for (let j = 0; j < 5; j++) {
document.getElementsByClassName('beans')[i].innerHTML += `<img class="bean" src="../pics/bean.png"></img>`
}
}
In the code below, I adjust the opacity for the coffee beans based on their respective strengths:
for (let i = 0; i < this.shoppingCard.list.length; i++) {
for (let j = 0; j < this.shoppingCard.list[i].strength; j++) {
document.getElementsByClassName('bean')[i].style.opacity = "1"
if (j <= this.shoppingCard.list[i].strength){
for (let k = this.shoppingCard.list[i].strength; k < 5; k++) {
document.getElementsByClassName('bean')[k].style.opacity = "0.3"
}
}
}
}
Upon adding multiple coffees to the shopping cart, the visualization appears as follows: