Créer un site Web d'actualités Abhi ki-tutoriel CSS-php.cn

Build a Abhi ki News Website

Introduction

Bonjour les développeurs ! Je suis ravi de vous présenter mon dernier projet : Abhi ki News. Ce projet est un composant de site Web d'actualités dynamique conçu pour récupérer et afficher des articles d'actualité dans une interface claire et conviviale. C'est un moyen fantastique d'améliorer vos compétences en développement front-end en utilisant HTML, CSS et JavaScript, et fournit un exemple pratique d'intégration d'une API externe dans votre application Web.

Aperçu du projet

Abhi ki News est une application Web qui récupère et affiche des articles d'actualité en fonction des entrées de l'utilisateur ou de catégories prédéfinies. Le composant présente un design moderne avec une mise en page réactive, ce qui le rend adapté aux appareils de bureau et mobiles. Ce projet montre comment créer une interface d'actualités fonctionnelle qui récupère les données en direct d'une API et les présente dans un format attrayant.

Caractéristiques

Récupération dynamique des actualités : récupère et affiche les articles d'actualité à partir d'une API externe en fonction des requêtes des utilisateurs ou des catégories prédéfinies.
Conception réactive : garantit que l'interface d'actualités est visuellement attrayante sur tous les appareils.
Effets de survol : ajoute de l'interactivité aux cartes d'actualités avec des effets de survol subtils.
Fonctionnalité de recherche : permet aux utilisateurs de rechercher des articles d'actualité par mot-clé.

Technologies utilisées

HTML : Fournit la structure de l'interface d'actualités.
CSS : stylise le composant pour créer un design visuellement attrayant et réactif.
JavaScript : gère la récupération de données, les interactions des utilisateurs et met à jour dynamiquement le contenu.

Structure du projet

Voici un aperçu de la structure du projet :

Abhi-ki-News/
├── index.html
├── style.css
└── script.js

Copier après la connexion

index.html : Contient la structure HTML du composant d'actualités.
style.css : inclut des styles CSS pour créer un design attrayant et réactif.
script.js : gère la logique de récupération et d'affichage des articles d'actualité.

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le dépôt :

git clone https://github.com/abhishekgurjar-in/Abhi-ki-News.git

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Abhi-ki-News
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour afficher l'interface d'actualités.

Usage

Ouvrez l'application dans un navigateur Web.
Cliquez sur une catégorie (par exemple, IPL, Finance, Politique) pour récupérer des articles d'actualité liés à cette catégorie.
Utilisez la barre de recherche pour rechercher des articles d'actualité en saisissant des mots-clés pertinents.
Interagissez avec les cartes d'actualités en les survolant pour voir les effets de survol.

Explication du code

HTML

Le fichier index.html définit la structure de l'interface d'actualité. En voici un extrait :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Abhi ki News</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <nav>
        <div class="main-nav container flex">
            <a href="#" onclick="reload()" class="company-logo">
                <img src="./assets/logo.png" alt="company logo">
            </a>
            <div class="nav-links">
                <ul class="flex">
                    <li class="hover-link nav-item" id="ipl" onclick="onNavItemClick('ipl')">IPL</li>
                    <li class="hover-link nav-item" id="finance" onclick="onNavItemClick('finance')">Finance</li>
                    <li class="hover-link nav-item" id="politics" onclick="onNavItemClick('politics')">Politics</li>
                </ul>
            </div>
            <div class="search-bar flex">
                <input id="search-text" type="text" class="news-input" placeholder="e.g. Science">
                <button id="search-button" class="search-button">Search</button>
            </div>
        </div>
    </nav>


    <main>
        <div id="loader" class="loader">Loading...</div>
        <div id="error-message" class="error-message"></div>
        <div class="cards-container container flex" id="cards-container">

        </div>
    </main>

    <template id="template-news-card">
        <div class="card">
            <div class="card-header">
                <img src="https://via.placeholder.com/400x200" alt="Créer un site Web dactualités Abhi ki" id="news-img">
            </div>
            <div class="card-content">
                <h3 id="news-title">This is the Title</h3>
                <h6 class="news-source" id="news-source">End Gadget 26/08/2023</h6>
                <p class="news-desc" id="news-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae saepe quis voluptatum quisquam vitae doloremque facilis molestias quae ratione cumque!</p>
            </div>
        </div>
    </template>

    <script src="script.js"></script>
</body>
</html>

Copier après la connexion

CSS

Le fichier style.css stylise l'interface d'actualités pour garantir qu'elle est visuellement attrayante et réactive. Voici quelques styles clés :

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Roboto:wght@500&display=swap");

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
} 

:root {
    --primary-text-color: #183b56;
    --secondary-text-color: #577592;
    --accent-color: #2294ed;
    --accent-color-dark: #1d69a3;
}

body {
    font-family: "Poppins", sans-serif;
    color: var(--primary-text-color);
}

p {
    font-family: "Roboto", sans-serif;
    color: var(--secondary-text-color);
    line-height: 1.4rem;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

.flex {
    display: flex;
    align-items: center;
}

.container {
    max-width: 1180px;
    margin-inline: auto;
    overflow: hidden;
}

nav {
    background-color: #f3faff;
    box-shadow: 0 0 4px #bbd0e2;
    position: fixed;
    top: 0;
    z-index: 99;
    left: 0;
    right: 0;

}

.main-nav {
    justify-content: space-between;
    padding-block: 8px;
}

.company-logo img {
    width: 120px;
    height: 120px;
}

.nav-links ul {
    gap: 16px;
}

.hover-link {
    cursor: pointer;
}

.hover-link:hover {
    color: var(--secondary-text-color);
}

.hover-link:active {
    color: red;
}

.nav-item.active {
    color: var(--accent-color);
}

.search-bar {
    height: 32px;
    gap: 8px;
}

.news-input {
    width: 200px;
    height: 100%;
    padding-inline: 12px;
    border-radius: 4px;
    border: 2px solid #bbd0e2;
    font-family: "Roboto", sans-serif;
}

.search-button {
    background-color: var(--accent-color);
    color: white;
    padding: 8px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Roboto", sans-serif;
}

.search-button:hover {
    background-color: var(--accent-color-dark);
}

main {
    padding-block: 20px;
    margin-top: 80px;
}

.cards-container {
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 20px;
    align-items: start;
}

.card {
    width: 360px;
    min-height: 400px;
    box-shadow: 0 0 4px #d4ecff;
    border-radius: 4px;
    cursor: pointer;
    background-color: #fff;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 1px 1px 8px #d4ecff;
    background-color: #f9fdff;
    transform: translateY(-2px);
}

.card-header img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.card-content {
    padding: 12px;
}

.news-source {
    margin-block: 12px;
}
/* Loader styles */
.loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: var(--primary-text-color);
}

/* Error message styles */
.error-message {
    color: red;
    font-size: 1.2rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Copier après la connexion

Javascript

Le fichier script.js gère la récupération des données et met à jour dynamiquement les cartes d'actualités. Voici le code :

const API_KEY = "1d3a0eefa97b499d8fbc4ee93eeb40b7";
const url = "https://newsapi.org/v2/everything?q=";

window.addEventListener("load", () => fetchNews("India"));

function reload() {
    window.location.reload();
}

async function fetchNews(query) {
    // Show loader before making the API request
    showLoader(true);

    try {
        const res = await fetch(`${url}${query}&apiKey=${API_KEY}`);
        if (!res.ok) throw new Error("Network response was not ok");
        const data = await res.json();
        if (data.articles.length === 0) {
            showError("No news articles found.");
        } else {
            bindData(data.articles);
        }
    } catch (error) {
        showError("Failed to fetch news. Please try again later.");
    } finally {
        // Hide loader after the API request completes
        showLoader(false);
    }
}

function bindData(articles) {
    const cardsContainer = document.getElementById("cards-container");
    const newsCardTemplate = document.getElementById("template-news-card");

    cardsContainer.innerHTML = "";

    articles.forEach((article) => {
        if (!article.urlToImage) return;
        const cardClone = newsCardTemplate.content.cloneNode(true);
        fillDataInCard(cardClone, article);
        cardsContainer.appendChild(cardClone);
    });
}

function fillDataInCard(cardClone, article) {
    const newsImg = cardClone.querySelector("#news-img");
    const newsTitle = cardClone.querySelector("#news-title");
    const newsSource = cardClone.querySelector("#news-source");
    const newsDesc = cardClone.querySelector("#news-desc");

    newsImg.src = article.urlToImage;
    newsTitle.innerHTML = article.title;
    newsDesc.innerHTML = article.description;

    const date = new Date(article.publishedAt).toLocaleString("en-US", {
        timeZone: "Asia/Jakarta",
    });

    newsSource.innerHTML = `${article.source.name} · ${date}`;

    cardClone.firstElementChild.addEventListener("click", () => {
        window.open(article.url, "_blank");
    });
}

let curSelectedNav = null;
function onNavItemClick(id) {
    fetchNews(id);
    const navItem = document.getElementById(id);
    curSelectedNav?.classList.remove("active");
    curSelectedNav = navItem;
    curSelectedNav.classList.add("active");
}

const searchButton = document.getElementById("search-button");
const searchText = document.getElementById("search-text");

searchButton.addEventListener("click", () => {
    const query = searchText.value;
    if (!query) return;
    fetchNews(query);
    curSelectedNav?.classList.remove("active");
    curSelectedNav = null;
});

function showLoader(isVisible) {
    const loader = document.getElementById("loader");
    if (isVisible) {
        loader.style.display = "block";
    } else {
        loader.style.display = "none";
    }
}

function showError(message) {
    const cardsContainer = document.getElementById("cards-container");
    cardsContainer.innerHTML = `<div class="error-message">${message}</div>`;
}

Copier après la connexion

Démo en direct

Vous pouvez explorer la démo en direct du projet ici.

Conclusion

Abhi ki News est un exemple pratique d'intégration d'API externes dans une application Web et de création d'une interface d'actualités réactive et conviviale. J'espère que ce projet vous aidera à en savoir plus sur l'intégration d'API et le développement frontend. N'hésitez pas à modifier et développer ce projet en fonction de vos besoins !