Подсчет калорий и цены

@Bohdan2 · Регистрация: 19.11.2019

Студворк — интернет-сервис помощи студентам

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
/**
 
 * Класс, объекты которого описывают параметры гамбургера.
 
 *
 
 * @constructor
 
 * @param size Размер
 
 * @param stuffing Начинка
 
 * @throws {HamburgerException} При неправильном использовании
 
 */
var orderHamburger = {
        SIZE_SMALL: {param: "SIZE_SMALL", price: 50, calorie: 20},
        SIZE_LARGE: {param: "SIZE_LARGE", price: 100, calorie: 40},
        STUFFING_CHEESE: {param: "STUFFING_CHEESE", price: 10, calorie: 20},
        STUFFING_SALAD: {param: "STUFFING_SALAD", price: 20, calorie: 5},
        STUFFING_POTATO: {param: "STUFFING_POTATO", price: 15, calorie: 5},
        TOPPING_ONION: {param: "TOPPING_ONION", price: 20, calorie: 5},
        TOPPING_SPICE: {param: "TOPPING_SPICE", price: 15, calorie: 0}
    };
 
function Hamburger(size, stuffing) {
    if (!!size.param && !!stuffing.param) {
        this.init(size, stuffing);
    } else {
        console.log("Ошибка инициализации");
    }
}
 
Hamburger.prototype.init = function (size, stuffing) {
    this.params = {
        size: size,
        stuffing: stuffing,
        topping: []
    };
};
 
/* Размеры, виды начинок и добавок */
/**
 
 * Добавить добавку к гамбургеру. Можно добавить несколько
 
 * добавок, при условии, что они разные.
 
 *
 
 * @param topping Тип добавки
 
 * @throws {HamburgerException} При неправильном использовании
 
 */
// Добавить добавку
Hamburger.prototype.addTopping = function (topping) {
    var thisTopping = this.params.topping;
    var isPresent = 0;
    for (var i = 0; i < thisTopping.length; i++) {
        if (thisTopping[i].param === topping.param) {
            isPresent++;
        }
    }
    if (!isPresent) {
        thisTopping.push(topping);
    } else {
        console.log("Такая добавка уже есть")
    }
};
 
/**
 
 * Убрать добавку, при условии, что она ранее была
 
 * добавлена.
 
 *
 
 * @param topping Тип добавки
 
 * @throws {HamburgerException} При неправильном использовании
 
 */
// Убрать добавку
Hamburger.prototype.removeTopping = function (topping) {
    var thisTopping = this.params.topping;
 
    for (var i = 0; i < thisTopping.length; i++) {
        if (thisTopping[i].param === topping.param) {
            delete thisTopping[i];
        }
    }
};
/**
 
 * Получить список добавок.
 
 *
 
 * @return {Array} Массив добавленных добавок, содержит константы
 
 * Hamburger.TOPPING_*
 
 */
// Получить список добавок
Hamburger.prototype.getToppings = function () {
    return this.params.topping;
};
 
/**
 
 * Узнать размер гамбургера
 
 */
// Узнать размер
Hamburger.prototype.getSize = function () {
    return this.params.size.param;
};
/**
 
 * Узнать начинку гамбургера
 
 */
// Узнать начинку
Hamburger.prototype.getStuffing = function () {
    return this.params.stuffing.param;
};
 
/**
 
 * Узнать цену гамбургера
 
 * @return {Number} Цена в тугриках
 
 */
// Узнать цену гамбургера
Hamburger.prototype.calculatePrice = function () {
    var thisParams = this.params;
    var totalPrice;
    var mainPrice = thisParams.size.price;
    var stuffPrice = thisParams.stuffing.price;
    var toppingPrice = 0;
    for (var i = 0; i < thisParams.topping.length; i++) {
        toppingPrice += thisParams.topping[i].price;
    }
    totalPrice = mainPrice + stuffPrice + toppingPrice;
 
    return totalPrice
};
/**
 
 * Узнать калорийность
 
 * @return {Number} Калорийность в калориях
 
 */
Hamburger.prototype.calculateCalories = function () {
    var thisParams = this.params;
    var totalCalories;
    var mainPrice = thisParams.size.calorie;
    var stuffPrice = thisParams.stuffing.calorie;
    var toppingPrice = 0;
    for (var i = 0; i < thisParams.topping.length; i++) {
        toppingPrice += thisParams.topping[i].calorie;
    }
    totalCalories = mainPrice + stuffPrice + toppingPrice;
 
    return totalCalories
};
 
var hamburger1 = new Hamburger();
            ///orderHamburger.SIZE_SMALL, orderHamburger.STUFFING_CHEESE
// result
console.log("Размер", hamburger1.getSize());
console.log("Начинка", hamburger1.getStuffing());
console.log("calculatePrice", hamburger1.calculatePrice());
console.log("calculateCalories", hamburger1.calculateCalories());
 
console.log(hamburger1.getToppings());
hamburger1.addTopping(orderHamburger.TOPPING_ONION);
console.log(hamburger1.getToppings());
hamburger1.addTopping(orderHamburger.TOPPING_SPICE);
console.log("getToppings", hamburger1.getToppings());
console.log("removeTopping", hamburger1.removeTopping(orderHamburger.TOPPING_ONION));
console.log("getToppings", hamburger1.getToppings());
console.log("\n");
 
 
let sizes = document.getElementsByName("size");
for(let size of sizes) {
    size.addEventListener("change", sizes)
}
function Sizes(event) {
    if(!hamburger1) {
        return;
    }
 
    let size;
    if(event.target.id === "small") {
        size = SIZE_SMALL;
    }
    else {
        size = SIZE_LARGE;
    }
 
    if(!event.target.checked){
        hamburger1.removeTopping(size);
        burgerInfoPrint(hamburger1);
        return;
    }
 
    if(!toppings) {
        toppings = [];
    }
    hamburger1.addTopping(size);
    burgerInfoPrint(hamburger1);
}
 
 
let toppings = document.getElementsByName("add");
for(let topping of toppings) {
    topping.addEventListener("change", setToppings)
}
function setToppings(event) {
    if(!hamburger1) {
        return;
    }
 
    let topping;
    if(event.target.id === "cheese") {
        topping = TOPPING_SPICES;
    }
    else {
        topping = TOPPING_ONION;
    }
 
    if(!event.target.checked){
        hamburger1.removeTopping(topping);
        burgerInfoPrint(hamburger1);
        return;
    }
 
 
    if(!toppings) {
        toppings = [];
    }
    hamburger1.addTopping(topping);
    burgerInfoPrint(hamburger1);
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="ST.css">
</head>
<body>
<form name="" action="" id="form">
    <fieldset>
        <legend>Create Hamburger</legend>
        <div class="row">
            <p>Choose Size</p>
            <div class="radio-variant">
                <input type="radio" name="size" id="small" value="small" checked/>
                <label for="small">Small</label>
            </div>
            <div class="radio-variant">
                <input type="radio" name="size" id="large" value="large"/>
                <label for="large">Large</label>
            </div>
        </div>
        <div class="row additions">
            <p>Additions</p>
            <div class="checkbox-variant">
                <input type="checkbox" name="add" id="cheese" value="cheese"/>
                <label for="cheese">Cheese</label>
            </div>
            <div class="checkbox-variant">
                <input type="checkbox" name="add" id="salad" value="salad"/>
                <label for="salad">Salad</label>
            </div>
            <div class="checkbox-variant">
                <input type="checkbox" name="add" id="potato" value="potato"/>
                <label for="potato">Fried potato</label>
            </div>
            <div class="checkbox-variant">
                <input type="checkbox" name="add" id="onion" value="onion"/>
                <label for="onion">Onion</label>
            </div>
            <div class="checkbox-variant">
                <input type="checkbox" name="add" id="spice" value="spice"/>
                <label for="spice">Spice</label>
            </div>
        </div>
        <div class="submit">
            <input type="submit" value="Make Order"/>
        </div>
    </fieldset>
    <br/>
    <div id="result">
        <div><b>Стоимость:</b> <span id="price">0</span> тугриков</div>
        <div><b>Калорийность:</b> <span id="calories">0</span> кКал</div>
    </div>
</form>
<script src="task.js"></script>
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
* {
    margin: 0;
    padding: 0
}
 
#form {
    display: block;
    width: 350px;
    margin: 15px auto 0;
}
 
p {
    margin-bottom: 8px;
}
 
legend {
    font-size: 17px;
    display: block;
    padding: 0 12px;
    font-weight: bold;
    text-transform: uppercase;
}
 
.radio-variant {
    display: inline-block;
    width: 47%;
}
 
.row {
    border-bottom: 1px solid gray;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
 
input[type=submit] {
    padding: 4px 15px 6px;
}
 
#message {
    height: 28px
}
 
label {
    cursor: pointer;
}

Код https://codepen.io/sat228/pen/oNzvKZx
Как правильно реализовать подсчет калорий и цены.
не получается связать скрипт и хтмл код

@amr-now · 26.11.2020, 04:55

Здравствуйте.
Bohdan2, скрипт конечно весёлый и прикольный, но почему не используете класс из ООП в нормальном синтаксисе?

@j2FunOnly · 26.11.2020, 08:39

Сообщение от Bohdan2

JavaScript
26
27
function Hamburger(size, stuffing) {
    if (!!size.param && !!stuffing.param) {

Вы не проверяете наличие самих параметров size и stuffing, поэтому при таком создании

Сообщение от Bohdan2

JavaScript
172
var hamburger1 = new Hamburger();

скрипт вылетает с ошибкой

Code
1
Uncaught TypeError: Cannot read property 'param' of undefined

@amr-now · 26.11.2020, 08:46

Изюминка задачи в том, что здесь объект не нужен:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="ST.css">
</head>
 
<body>
    <form name="" action="" id="form">
        <fieldset>
            <legend>Create Hamburger</legend>
            <div class="row">
                <p>Choose Size</p>
                <div class="radio-variant">
                    <input type="radio" name="size" id="SIZE_SMALL" value="SIZE_SMALL" checked />
                    <label for="SIZE_SMALL">Small</label>
                </div>
                <div class="radio-variant">
                    <input type="radio" name="size" id="SIZE_LARGE" value="SIZE_LARGE" />
                    <label for="SIZE_LARGE">Large</label>
                </div>
            </div>
            <div class="row additions">
                <p>Additions</p>
                <div class="checkbox-variant">
                    <input type="checkbox" name="add" id="STUFFING_CHEESE" value="STUFFING_CHEESE" />
                    <label for="STUFFING_CHEESE">Cheese</label>
                </div>
                <div class="checkbox-variant">
                    <input type="checkbox" name="add" id="STUFFING_SALAD" value="STUFFING_SALAD" />
                    <label for="STUFFING_SALAD">Salad</label>
                </div>
                <div class="checkbox-variant">
                    <input type="checkbox" name="add" id="STUFFING_POTATO" value="STUFFING_POTATO" />
                    <label for="STUFFING_POTATO">Fried potato</label>
                </div>
                <div class="checkbox-variant">
                    <input type="checkbox" name="add" id="TOPPING_ONION" value="TOPPING_ONION" />
                    <label for="TOPPING_ONION">Onion</label>
                </div>
                <div class="checkbox-variant">
                    <input type="checkbox" name="add" id="TOPPING_SPICE" value="TOPPING_SPICE" />
                    <label for="TOPPING_SPICE">Spice</label>
                </div>
            </div>
            <div class="submit">
                <input type="submit" value="Make Order" />
            </div>
        </fieldset>
        <br />
        <div id="result">
            <div><b>Стоимость:</b> <span id="price">0</span> тугриков</div>
            <div><b>Калорийность:</b> <span id="calories">0</span> кКал</div>
        </div>
    </form>
    <script src="task.js"></script>
 
</body>
 
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let orderHamburger = {
    SIZE_SMALL: { param: "SIZE_SMALL", price: 50, calorie: 20 },
    SIZE_LARGE: { param: "SIZE_LARGE", price: 100, calorie: 40 },
    STUFFING_CHEESE: { param: "STUFFING_CHEESE", price: 10, calorie: 20 },
    STUFFING_SALAD: { param: "STUFFING_SALAD", price: 20, calorie: 5 },
    STUFFING_POTATO: { param: "STUFFING_POTATO", price: 15, calorie: 5 },
    TOPPING_ONION: { param: "TOPPING_ONION", price: 20, calorie: 5 },
    TOPPING_SPICE: { param: "TOPPING_SPICE", price: 15, calorie: 0 }
};
let form = document.getElementById("form");
form.onsubmit = calculate;
for (let e of form.querySelectorAll("[name=size],[name=add]"))
    e.onchange = calculate;
calculate(); // Первоначальный расчёт
 
function calculate(event) {
    event?.preventDefault();
    let base = form.size.value;
 
    let sumPrice = orderHamburger[base].price, sumCalories = orderHamburger[base].calorie;
    let adds = form.querySelectorAll("[name=add]:checked");
    for (let e of adds) {
 
        sumPrice += orderHamburger[e.value].price;
 
        sumCalories += orderHamburger[e.value].calorie;
    }
 
    form.querySelector("#price").textContent = sumPrice;
 
    form.querySelector("#calories").textContent = sumCalories;
}

Хотя если хотите объект, то здесь можно применить паттерн Декоратор

:
https://refactoring.guru/ru/de... /decorator

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	26.11.2020, 04:55
	Здравствуйте. Bohdan2, скрипт конечно весёлый и прикольный, но почему не используете класс из ООП в нормальном синтаксисе? 0

Подсчет калорий и цены

Решение