طراحی برنامه محاسبه قیمت غذا
سلام وقتتون بخیر
من دارم یک برنامه طراحی می کنم برای محاسبه قیمت غذا اسم غذا تعداد غذا و اینکه با پیک ارسال بشه یا نه رو از کاربر می گیرم
می خوام با توجه به این ها قیمت رو محاسبه بکنه الان به مشکل خوردم هر چی فکر می کنم هیچی به ذهنم نمیرسه.
توی کلاس Food می خوام محاسبه بکنم.
ممنون میشم راهنماییم بکنید.
@hesammousavi
کد های HTML:
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Main Css -->
<link rel="stylesheet" href="styles/css/style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="styles/Bootstrap/bootstrap-5.1.1-dist/css/bootstrap.min.css">
<!-- Bootstrap RTL -->
<link rel="stylesheet" href="styles/Bootstrap/bootstrap-5.1.1-dist/css/bootstrap.rtl.min.css">
<!-- Vazir Font -->
<link rel="stylesheet" href="fonts/vazir.css">
<!-- Cdn Fontawsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>محاسبه قیمت غذا</title>
</head>
<body>
<div class="container">
<div class="row justify-content-center align-items-center h-screen">
<div class="col-12 col-sm-9 col-md-5">
<form id="form" class="bg-white mx-auto p-3 rounded-2 box-shadow showAnimate">
<header class="header my-3"><h1 class="header__title text-center font-size-3 user-select-none">محاسبه قیمت غذا</h1></header>
<div class="form-group">
<label for="food" class="mb-2 font-size-4 font-weight-600">انتخاب نوع غذا:</label>
<select name="" id="food" class="form-select">
<option value="" selected>-انتخاب-</option>
<option value="1">پیتزا</option>
<option value="2">هات داگ</option>
<option value="3">چلو کباب</option>
</select>
</div>
<hr class="my-4">
<div class="form-group">
<label for="number-food" class="mb-2 font-size-4 font-weight-600">تعداد غذا: </label>
<input type="number" id="number-food" class="form-control">
</div>
<hr class="my-4">
<label class="font-size-4 font-weight-600">امکانات:</label>
<div class="radio-btn d-flex justify-content-evenly">
<div class="form-check mt-3">
<input class="form-check-input" type="radio" name="level" id="radio1" value="1" checked>
<label class="form-check-label" for="radio1">با پیک ارسال شود</label>
</div>
<div class="form-check mt-3">
<input class="form-check-input" type="radio" name="level" id="radio2" value="2">
<label class="form-check-label" for="radio2">با پیک ارسال نشود</label>
</div>
</div>
<div class="d-grid">
<button class="btn btn-primary mt-4 btn-md pb-2" type="submit">محاسبه</button>
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap Js Cdn -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- App Js -->
<script src="styles/js/app.js"></script>
</body>
</html>کد های CSS:
/* --------------------
Css Reset
--------------------*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: 0;
}
html {
font-size: 100%;
font-family: "Vazir";
overflow-x: hidden;
}
body {
font-size: 100%;
font-family: "Vazir" !important;
background: rgb(109,213,237);
background: -moz-linear-gradient(90deg, rgba(109,213,237,1) 0%, rgba(33,147,176,1) 65%);
background: -webkit-linear-gradient(90deg, rgba(109,213,237,1) 0%, rgba(33,147,176,1) 65%);
background: linear-gradient(90deg, rgba(109,213,237,1) 0%, rgba(33,147,176,1) 65%);
background-repeat: no-repeat;
}
img {
max-width: 100%;
}
label {user-select: none !important;}
select:focus,
select:active,
input:focus,
input:active {
box-shadow: 0px 0px 15px 0px rgb(0, 0, 0, 20%) !important;
border: 1px solid #0f4bbd !important;
}
/* --------------------
Start Utilities
--------------------*/
.h-screen {min-height: 100vh !important;}
.cursor-pointer {cursor: pointer !important;}
.font-weight-bold {font-weight: bold !important;}
.font-weight-600 {font-weight: 600 !important;}
.font-weight-400 {font-weight: 400 !important;}
.font-weight-300 {font-weight: 300 !important;}
.font-weight-normal {font-weight: normal !important;}
.font-size-1 {font-size: 3rem !important;}
.font-size-2 {font-size: 2rem !important;}
.font-size-3 {font-size: 1.8rem !important;}
.font-size-4 {font-size: 1rem !important;}
.font-size-5 {font-size: .9rem !important;}
.font-size-6 {font-size: .75rem !important;}
.box-shadow {box-shadow: 0px 0px 13px 0px rgb(0, 0, 0, 30%) !important;}
/* Animation Show */
.showAnimate {animation: showAnimate 1.5s ease-in-out;}
@keyframes showAnimate {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* --------------------
End Of Utilities
--------------------*/
/* Style Header */
.header__title {
color: rgba(0, 0, 0, .5);
font-weight: 700;
text-shadow: 0px 6px 20px rgba(0, 0, 0, 10%);
animation: animate .4s ease .8s 2 alternate;
}
@keyframes animate {
0% {opacity: 1;}
40% {opacity: 0;}
60% {opacity: 1;}
80% {opacity: 0;}
100% {opacity: 1;}
}
/* Error */
.error {
background-color: #e02721;
border: 1px solid #e21212;
color: #fff;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
text-align: center;
user-select: none;
}
/* --------------------
Start customize btn-primary
--------------------*/
.btn-primary {
background-image: linear-gradient(to right, #1e3c72 0%, #2364d3 51%, #1e3c72 100%) !important;
transition: all .3s ease-in-out !important;
background-size: 200% auto;
outline: 0;
background-position: right center !important;
border: 0;
}
.btn-primary:hover,
.btn-primary:active {
background-position: center left !important;
box-shadow: none !important;
}
.btn-primary:focus {
box-shadow: none !important;
background-image: linear-gradient(to right, #0f4bbd 0%, #2364d3 51%, #1e3c72 100%) !important;
}
/* --------------------
End Of customize btn-primary
--------------------*/کد های JS:
// Classes
// Every Thing Related To The html
class HTML {
displayError(err) {
// Create <div>
const divErr = document.createElement('div');
// Add a Class Error
divErr.classList.add('error');
// Add a Text
divErr.innerText = err;
// Insert div Error To The form
form.insertBefore(divErr, document.querySelector('.form-group') );
// Remove After 2s
setTimeout(() => {
divErr.remove();
}, 2000);
}
}
// Every Thing Related To The Calculate Price
class Food {
constructor(food, numberFood, level) {
this.food = food;
this.numberFood = numberFood;
this.level = level;
}
price(info) {
/*
food: 1 ==> Pizza 100,000
food: 2 ==> *** dog 30,000
food: 3 ==> Kebab 45,000
*/
}
}
// Variables
const html = new HTML();
// Access To The <form>
const form = document.querySelector('#form');
// Event Listeners
const eventListeners = () => {
// Submit Form When Click
form.addEventListener('submit', (e) => {
e.preventDefault();
const food = document.querySelector('#food').value;
const numberFood = document.querySelector('#number-food').value;
const level = document.querySelector('input[name="level"]:checked').value;
// Check The Value Of Fields
if(food === '' || numberFood === '' || level === '') {
html.displayError('لطفا تمامی موارد را به درستی وارد کنید!');
} else {
const food = new Food(food, numberFood, level);
const price = food.price(calculatePrice);
}
});
}
eventListeners();گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
![user-avatar]()
گزارش تخلف
کپی کردن
0
سلام
برای محاسبه قیمت باید سمت بک اند اقدام کنید نه از فرانت.
اطلاعات مورد نیاز رو میتونید با کمک مدل food از جدول foods دریافت و به صورت compact به فرانت پاس بدید.
Mohammad
@Mohammad.Naderi85
3 سال پیش
مطرح شد
گزارش تخلف
کپی کردن
-1
سلام پروژه تمرینی هست و قیمت ها واقعی نیستند
هر کدوم از غذا ها یه قیمت دارند می خوام هر کدوم رو انتخاب کرد یه قیمتی داشته باشه و بر اساس تعداد غذا هایی که انتخاب می کنه قیمت اضافه بشه
این پروژه مال یک دوره آموزشی هست که من تغییرش دادم به محاسبه غذا
گزارش تخلف
کپی کردن
0
اطلاعات حساس مثلا داده های مالی که مبنای محاسبات هستند رو نباید از صفحه استخراج کنید چون احتمال دستکاریشون هست، حتما باید از سمت بک اند استخراج شده و مورد استفاده قرار بگیرند.
یعنی وقتی که غذا یا هر آیتمی دریافت می کنید باید تعداد و پارامترهایی که باید از سمت کاربر تعیین بشن رو به همراه آی دی اون آیتم(مثلا غذا) به بک اند ارسال کنید و اونجا با توجه به مشخصاتی که در دیتابیس ثبت شده محاسبات نهاییش برای ثبت یا اقدامات دیگه صورت بگیرد.
Mohammad
@Mohammad.Naderi85
3 سال پیش
مطرح شد
گزارش تخلف
کپی کردن
-1
گفتم که پروژه تمرینی هست هدفم یادگیری جاوا اسکریپته
زبان سمت بک اند بلد نیستم دارم جاوا اسکریپت یاد می گیرم