console.clear();
class Calculator {
    constructor(element) {
        this.element = element;
        this.range = element.querySelector('input[type="range"]');
        this.priceElement = document.getElementById('price');
        this.quantityElement = document.getElementById('quantity');
        this.factorElement = document.getElementById('factor');
        this.monthlyElement = document.getElementById('monthly');
        this.yearlyElement = document.getElementById('yearly');
        this.range.value = this.price = 2.50;
        this.handlePriceChange = this.handlePriceChange.bind(this);
        this.handleQuantityChange = this.handleQuantityChange.bind(this);
        this.handleFactorChange = this.handleFactorChange.bind(this);
        
        this.factor = this.getFactor(this.factorElement.value);
        
        this.priceElement.onchange = this.handlePriceChange;
        this.range.oninput = this.handlePriceChange;
        this.quantityElement.oninput = this.handleQuantityChange;
        this.factorElement.oninput = this.handleFactorChange;
    }
    
    get price() {
        return this.priceElement.value;
    }
    
    set price(value) {
        this.priceElement.value = value;
    }
    
    getFactor(factor) {
        return factor === 'cigarettes' ? 20 : 1;
    }
    
    handlePriceChange(event) {
        this.price = event.target.value;
        this.range.value = this.price;
        this.calculate();
    }
    
    handleQuantityChange(event) {
        this.quantity = event.target.value;
        this.calculate();
    }
    
    handleFactorChange(event) {
        this.factor = this.getFactor(event.target.value);
        this.calculate();
    }
    
    calculate() {
        const monthly = this.price * this.quantity / this.factor * 30;
        this.monthlyElement.innerHTML = monthly;
        this.yearlyElement.innerHTML = monthly * 12;
    }
}

new Calculator(document.getElementById('calculator'));