تطبيق أخبار ب javascript


فهاد ال projet الجديد من سلسلة javascript غادي نشوفوا كيفاش نقادو واحد التطبيق لي غادي يمكن من عرض أخبار ديال مجموعة من الدول لي من الإختيار ديالنا فهنا غادي نخدموا بواحد ل API لي غادي تمكنا من هادشي التطبيق بسيط لأي مبتدئ ف javascript.

نظرة سريعة بالفيديو

1- إضاقة الصفحة الرئيسية ديال التطبيق

أول حاجة غادي نديرو غادي نزيدو dossier جديد سميه news-app منبعد فيه زيد fichier جديد سميه index.html لي غادي يكون هو الصفحة الرئيسية ديالنا.
منبعد سير للموقع من هنا وغادي تفتح حساب جديد فالموقع باش تاخذ ل clé api ديالك حيت به باش غادي يمكنلك تخدم بل API.
منبعد فالملف ديالنا غادي نزيدو لكود html لي غادي نحتاجو عندي روابط css هنا خدمت بbootstrap وروابط ملفات css و javascript غادي نزيدهم منبعد.
فالملف ديالي عندي div عطيتها class card و id article فيها غادي يتعرضوا les articles ديالنا.
عندي ايضا select box لي غادي يمكن من اختيار الدولة لي بغيت ول option عطيت القيمة لي كتطلبها ل api ولي هي اسم الدولة المختصر مثلا Maroc عندو ma.
باش تشوف المعلومات الكاملة الخاصة بل API من هنا.
الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Fetch Api</title>
</head>
    <body>
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <a class="navbar-brand" href="#">Fetch Api</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Accueil <span class="sr-only">(current)</span></a>
                    </li>
                </div>
            </nav>
            <div class="row">
                <div class="col-md-8">
                    <div class="card" id="article">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h3 class="card-title">Recherche</h3>
                            <hr>
                            <div class="form-group">
                                <select name="country" id="country" class="form-control">
                                    <option value="ma">Maroc</option>
                                    <option value="fr">France</option>
                                    <option value="us">Etats-unis</option>
                                    <option value="ae">Émirats arabes unis</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer>
                <div class="footer">
                    <p class="lead mt-4 text-center">DCoding©2018</p>
                </div>
            </footer>
        </div>
        <script src="main.js"></script>
    </body>
</html>
                            

2- إضاقة الملف main.js

منبعد ف dossier ديال ل projet ديالنا زيد ملف جديد سميه main.js فيه غادي يكون الكود javascript لي غادي يمكنا من استرجاع les articles كاملين باستخدام لكود لي كتوفرونا ل API.

- أول حاجة كنسترجع ل card لي عطيتها ل id article وكنسترجع select بل id ديالو من بعد كنزيد variable country لي كتاخد المغرب كدولة منبعد كنزيد ل select ل event change يعني ملي كيختار المستخدم شي دولة فكنسترجع القيمة لي كاينة فل option وكنرسلها لل fonction getData لي غادي تمكن من استرجاع الاخبار الخاصة بالدولة لي اختارينا.

- منبعد كنزيد ل document لي هو ل application ديالنا ل event DOMContentLoaded يعني ملي كتشارجا الصفحة الرئيسية كيتعرضوا الأخبار بواسطة ل fonction getData.

- منبعد فل fonction getData كناخد الدولة وكنعطيها لل url لي غادي نسترجع به الأخبار ومتنساش تزيد ل clé ديالك فل url.

- منبعد كنزيد جوج ديال les variables وحدة فيها les articles ووحدة سميتها results وكنخدم ب fetch لي هي fonction javascript كتمكن من استرجاع المعلومات من رابط كنعطيوهلها.

- ملي كنسترجع المعلومات كاملة من الرابط وكنزيدها ف results كنعاود نسترجع les articles من results وكنخدم ب for لي كن créer فيها div وكنعرض فيها المعلومات الخاصة بكل خبر وكنزيد div فل card لي عطيناها id article.
الكود لي زدنا هو:

                                let card = document.querySelector('#article')
let select = document.querySelector('#country');
let country = 'ma';

select.addEventListener('change',function(){
    card.innerHTML ='';
    getData(select.options[select.selectedIndex].value);
});

document.addEventListener('DOMContentLoaded',getData(country));

function getData(country){
    const url = "http://newsapi.org/v2/top-headlines?country="+country+"&apiKey=fbd89b03a5874ca6832d50a57a929369"
    const req = new Request(url);
    let results;
    let articles;
    fetch(req)
    .then(function(response) {
        results = response.json();
        results.then(result=>{
            articles = result.articles;
            for(let i=0;i<articles.length;i++){
                let div = document.createElement('div');
                console.log(country);
                div.innerHTML = `
                    <div class="card-body">
                        <h3 class="card-title">${articles[i].title}</h3>
                        <p><em>${(articles[i].author != null) ? articles[i].author : ''}</em></p>
                        <img src="${(articles[i].urlToImage != null) ? articles[i].urlToImage : ''}" class="rounded mb-2 img-fluid"  alt="">
                        <p class="lead">${(articles[i].description != null) ? articles[i].description : ''}</p>
                        <a href="${articles[i].url}" target="_blank" class="btn btn-link">Lire l'article</a>
                    </div>
                    <div class="card-footer">
                        <small>${articles[i].publishedAt}</small>
                    </div>
                `;
                card.appendChild(div);
            }
        });
    })
}
                            

3- إضافة الكود css

غادي نزيدو بعض التعديلات ب css على بعض les éléments بحال الصور لهاد الغرض غادي تزيد fichier جديد سميه style.css وغادي تزيد فيه هاد الكود : 

                                img{
    height: 400px!important;
    width:100%!important;
}
.card,
.btn,
input{
    border-radius: 0;
}
                            


بحث في الموقع


إشترك للتوصل بالجديد