کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ایجاد یک وب‌سایت رستوران با استفاده از JavaScript، HTML و CSS یک پروژه عالی برای یادگیری طراحی وب و برنامه‌نویسی است. در اینجا یک نمونه ساده از وب‌سایت رستوران با ویژگی‌های ابتدایی مانند منو، درباره ما و فرم تماس ارائه می‌شود.
### ویژگی‌های اصلی پروژه
1. **صفحه اصلی**: شامل بنر و خوش‌آمدگویی.
2. **منوی غذا**: نمایش لیست غذاها و قیمت‌ها.
3. **بخش درباره ما**: اطلاعات درباره رستوران.
4. **فرم تماس**: امکان ارسال پیام از سوی کاربران.
### کد منبع نمونه
#### ۱. ایجاد فایل HTML
ابتدا یک فایل HTML به نام `index.html` ایجاد کرده و کد زیر را در آن قرار دهید:
```html
رستوران ما
به رستوران ما خوش آمدید
منو ما
درباره ما
ما یک رستوران با غذاهای خوشمزه و محیطی دلنشین هستیم.
تماس با ما
```
#### ۲. ایجاد فایل CSS
سپس یک فایل CSS به نام `style.css` ایجاد کرده و کد زیر را در آن قرار دهید:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
header {
background-color: #ff5722;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
section {
padding: 20px;
margin: 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
footer {
text-align: center;
padding: 10px;
background-color: #ff5722;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
#menuItems {
display: flex;
flex-wrap: wrap;
}
.menuItem {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
flex: 1 1 200px; /* Flexbox برای نمایش مناسب */
border-radius: 5px;
}
```
#### ۳. ایجاد فایل JavaScript
یک فایل JavaScript به نام `script.js` ایجاد کرده و کد زیر را در آن قرار دهید:
```javascript
// منوی غذاها
const menuItems = [
{ name: "پیتزا مارگاریتا", price: 12000 },
{ name: "پاستا آلفردو", price: 15000 },
{ name: "برگر گوشت", price: 18000 },
{ name: "سالاد سزار", price: 10000 },
{ name: "کیک شکلاتی", price: 8000 }
];
// نمایش منوی غذا
function displayMenu() {
const menuContainer = document.getElementById('menuItems');
menuItems.forEach(item => {
const menuItemDiv = document.createElement('div');
menuItemDiv.className = 'menuItem';
menuItemDiv.innerHTML = `
${item.name}
قیمت: ${item.price} تومان
`;
menuContainer.appendChild(menuItemDiv);
});
}
// ارسال فرم تماس
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault(); // جلوگیری از بارگذاری مجدد صفحه
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
alert(`پیام شما با موفقیت ارسال شد!\nنام: ${name}\nایمیل: ${email}\nپیام: ${message}`);
this.reset(); // ریست کردن فرم
});
// بارگذاری منو در هنگام بارگذاری صفحه
window.onload = displayMenu;
```
### نحوه اجرای پروژه
1. پس از ایجاد همه فایل‌ها، به پوشه پروژه خود بروید.
2. فایل `index.html` را در مرورگر خود باز کنید.
### نتیجه‌گیری
این پروژه یک وب‌سایت رستوران ساده است که شامل منو، درباره ما و فرم تماس می‌باشد. شما میتوانید این وب‌سایت را با افزودن ویژگی‌های بیشتری مانند گالری تصاویر، نظرات مشتریان، و ویژگی‌های اضافی برای مدیریت سفارش‌ها گسترش دهید. همچنین میتوانید از فریم‌ورک‌های CSS مانند Bootstrap برای بهبود ظاهر وب‌سایت استفاده کنید.
| صفحه قابل مشاهده:
دانلود پروژه کاربردی ایجاد یک وب‌سایت رستوران با استفاده از JavaScript، HTML و CSS می‌باشد
