مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه کاربردی **Movie Searching Site** با استفاده از JavaScript

دانلود پروژه کاربردی **Movie Searching Site** با استفاده از JavaScript

قیمت: 35,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

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

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



 ### پروژه **Movie Searching Site** با استفاده از JavaScript
 
این پروژه یک وب‌سایت ساده برای جستجوی فیلم‌ها است. کاربران می‌توانند نام فیلم مورد نظر خود را وارد کنند و اطلاعاتی درباره آن را از یک API دریافت کنند. در اینجا ما از API رایگان [OMDb API](http://www.omdbapi.com/) برای دریافت اطلاعات فیلم‌ها استفاده می‌کنیم.
 
### 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[type="text"] {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
}
 
.result {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}
```
 
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل دریافت اطلاعات فیلم‌ها از API و نمایش آن‌ها به کاربر است.
 
```javascript
// انتخاب عناصر HTML
const searchBtn = document.getElementById('searchBtn');
const movieInput = document.getElementById('movieInput');
const resultDiv = document.getElementById('result');
 
// افزودن رویداد کلیک به دکمه جستجو
searchBtn.addEventListener('click', function() {
    const movieName = movieInput.value;
 
    if (movieName === "") {
        resultDiv.innerHTML = "

لطفاً نام فیلم را وارد کنید!

";
        return;
    }
 
    // درخواست به API
    const apiKey = 'YOUR_API_KEY'; // کلید API خود را اینجا وارد کنید
    const apiUrl = `https://www.omdbapi.com/?t=${encodeURIComponent(movieName)}&apikey=${apiKey}`;
 
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            if (data.Response === "True") {
                resultDiv.innerHTML = `
                   

${data.Title} (${data.Year})

                    "${data.Title}"
                   

${data.Plot}

                   

کارگردان: ${data.Director}

                   

بازیگران: ${data.Actors}

                   

امتیاز: ${data.imdbRating}

                `;
            } else {
                resultDiv.innerHTML = `

${data.Error}

`;
            }
        })
        .catch(error => {
            resultDiv.innerHTML = "

خطا در دریافت اطلاعات فیلم!

";
        });
});
```
 
### توضیحات کد:
 
1. **HTML**:
   - شامل عنوان برنامه، فیلد ورودی برای نام فیلم، دکمه جستجو و بخش نمایش نتیجه.
 
2. **CSS**:
   - طراحی ساده و کاربرپسند برای فیلدها و دکمه‌ها.
 
3. **JavaScript**:
   - **انتخاب عناصر HTML**: برای دکمه، فیلد ورودی و بخش نمایش نتیجه.
   - **رویداد کلیک**: وقتی کاربر بر روی دکمه جستجو کلیک می‌کند، برنامه نام فیلم را می‌گیرد و به API درخواست می‌فرستد.
   - **API Request**: با استفاده از `fetch` اطلاعات فیلم‌ها را از OMDb API دریافت می‌کند و آن‌ها را نمایش می‌دهد.
   - **خطاها**: اگر فیلم پیدا نشود یا خطایی پیش بیاید، پیام مناسب به کاربر نمایش داده می‌شود.
 
### نتیجه‌گیری
این پروژه **وب‌سایت جستجوی فیلم** یک مثال عالی برای یادگیری نحوه کار با APIها و تعامل با DOM در JavaScript است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند نمایش لیست فیلم‌های جستجو شده یا امکان فیلتر کردن فیلم‌ها بر اساس ژانر اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه کاربردی **Movie Searching Site** با استفاده از JavaScript می‌باشد