کاربران گرامی در این پروژه به شما پروژه کاربردی  با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر  پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه  های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد

  ### پروژه "دستکاری رنگ" با استفاده از JavaScript

 

این پروژه یک اپلیکیشن ساده است که به کاربران این امکان را می‌دهد تا رنگ‌ها را به صورت بصری تغییر دهند و مشاهده کنند. این اپلیکیشن با استفاده از HTML، CSS و JavaScript ساخته شده است و می‌تواند به راحتی در مرورگر اجرا شود.

 

#### ویژگی‌های پروژه:

- **تغییر رنگ پس‌زمینه:** کاربران می‌توانند رنگ پس‌زمینه را با استفاده از نوار لغزنده تغییر دهند.

- **نمایش کد رنگ:** کد رنگ‌های انتخاب شده به صورت HEX و RGB نمایش داده می‌شود.

- **رابط کاربری ساده و کاربرپسند:** طراحی جذاب و آسان برای استفاده.

 

### راه‌اندازی پروژه

 

#### 1. ساختار فایل‌ها

 

ساختار پروژه به صورت زیر است:

 

```

color-manipulation/

├── index.html

├── styles.css

└── script.js

```

 

#### 2. کد منبع

 

##### فایل `index.html`

 

این فایل رابط کاربری اپلیکیشن دستکاری رنگ را ایجاد می‌کند:

 

```html

   

   

   

   

   

   

```

 

##### فایل `styles.css`

 

برای زیباسازی رابط کاربری استفاده می‌شود:

 

```css

body {

    font-family: Arial, sans-serif;

    background-color: #f0f0f0;

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

}

 

.container {

    background-color: white;

    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    padding: 20px;

    width: 400px;

    text-align: center;

}

 

.color-display {

    height: 100px;

    border-radius: 5px;

    margin-bottom: 20px;

}

 

.controls {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}

 

input[type="range"] {

    width: 100%;

    margin: 10px 0;

}

```

 

##### فایل `script.js`

 

این فایل منطق اپلیکیشن دستکاری رنگ را پیاده‌سازی می‌کند:

 

```javascript

const redInput = document.getElementById('red');

const greenInput = document.getElementById('green');

const blueInput = document.getElementById('blue');

 

const redValue = document.getElementById('red-value');

const greenValue = document.getElementById('green-value');

const blueValue = document.getElementById('blue-value');

 

const colorDisplay = document.getElementById('color-display');

const hexCode = document.getElementById('hex-code');

const rgbCode = document.getElementById('rgb-code');

 

// بروزرسانی رنگ

function updateColor() {

    const red = redInput.value;

    const green = greenInput.value;

    const blue = blueInput.value;

 

    // نمایش رنگ در بخش رنگ

    colorDisplay.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;

 

    // نمایش مقادیر

    redValue.textContent = red;

    greenValue.textContent = green;

    blueValue.textContent = blue;

 

    // محاسبه کد HEX

    const hex = rgbToHex(red, green, blue);

    hexCode.textContent = hex;

    rgbCode.textContent = `RGB(${red}, ${green}, ${blue})`;

}

 

// تبدیل RGB به HEX

function rgbToHex(r, g, b) {

    return `#${((1 << 24) + (+r << 16) + (+g << 8) + +b).toString(16).slice(1).toUpperCase()}`;

}

 

// اضافه کردن رویداد تغییر به نوارهای لغزنده

redInput.addEventListener('input', updateColor);

greenInput.addEventListener('input', updateColor);

blueInput.addEventListener('input', updateColor);

 

// بارگذاری اولیه رنگ

updateColor();

```

 

### 3. اجرای پروژه

 

برای اجرای پروژه، فقط کافی است فایل `index.html` را در مرورگر خود باز کنید. می‌توانید به سادگی فایل را کشیده و در مرورگر رها کنید یا بر روی آن کلیک کنید.

 

### نتیجه‌گیری

 

این پروژه "دستکاری رنگ" به شما این امکان را می‌دهد که با اصول ساخت یک اپلیکیشن تحت وب با استفاده از HTML، CSS و JavaScript آشنا شوید. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره رنگ‌های دلخواه، به اشتراک‌گذاری رنگ‌ها، یا طراحی بهتری برای رابط کاربری اضافه کنید. این پروژه یک نقطه شروع عالی برای یادگیری توسعه وب و کار با رنگ‌ها است.