کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **سیستم ثبت آیتم‌ها** (Register Items) با استفاده از JavaScript، HTML و CSS ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا آیتم‌های مختلف را ثبت کنند و در یک لیست نمایش دهند.
### 1. **HTML**
ابتدا ساختار HTML را برای سیستم ثبت آیتم‌ها ایجاد می‌کنیم.
```html
سیستم ثبت آیتم‌ها
ثبت آیتم‌ها
```
### 2. **CSS**
برای طراحی ظاهری سیستم ثبت آیتم‌ها از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input {
width: 70%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
margin-top: 20px;
}
li {
padding: 10px;
background-color: #eaeaea;
margin-bottom: 5px;
border-radius: 5px;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل عملکرد برای اضافه کردن آیتم‌ها به لیست و مدیریت ورودی‌ها است.
```javascript
// انتخاب عناصر HTML
const itemInput = document.getElementById('itemInput');
const addItemBtn = document.getElementById('addItemBtn');
const itemList = document.getElementById('itemList');
// افزودن رویداد کلیک به دکمه
addItemBtn.addEventListener('click', function() {
const itemValue = itemInput.value.trim(); // حذف فضاهای خالی
if (itemValue) {
// ایجاد یک عنصر جدید برای لیست
const li = document.createElement('li');
li.textContent = itemValue;
// اضافه کردن عنصر جدید به لیست
itemList.appendChild(li);
// پاک کردن ورودی
itemInput.value = '';
} else {
alert('لطفاً نام آیتم را وارد کنید!');
}
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی برای نام آیتم، دکمه‌ای برای افزودن آیتم، و یک لیست برای نمایش آیتم‌ها است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **انتخاب عناصر**: انتخاب ورودی، دکمه و لیست.
- **رویداد کلیک**: وقتی کاربر روی دکمه "اضافه کردن آیتم" کلیک می‌کند، نام آیتم خوانده شده و اگر معتبر باشد، به لیست اضافه می‌شود.
### نتیجه‌گیری
این پروژه **سیستم ثبت آیتم‌ها** یک مثال عالی برای یادگیری مفاهیم برنامه‌نویسی JavaScript و دستکاری DOM است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند حذف آیتم‌ها یا ذخیره‌سازی در مرورگر را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **سیستم ثبت آیتم‌ها** (Register Items) با استفاده از JavaScript، HTML و CSS می‌باشد
