Erstellen Sie eine Abhi-ki-Nachrichten-Website-CSS-Tutorial-php.cn

Build a Abhi ki News Website

Einführung

Hallo Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorzustellen: Abhi ki News. Bei diesem Projekt handelt es sich um eine dynamische Nachrichten-Website-Komponente, die dazu dient, Nachrichtenartikel in einer übersichtlichen und benutzerfreundlichen Oberfläche abzurufen und anzuzeigen. Es ist eine fantastische Möglichkeit, Ihre Frontend-Entwicklungsfähigkeiten mithilfe von HTML, CSS und JavaScript zu verbessern, und bietet ein praktisches Beispiel für die Integration einer externen API in Ihre Webanwendung.

Projektübersicht

Abhi ki News ist eine Webanwendung, die Nachrichtenartikel basierend auf Benutzereingaben oder vordefinierten Kategorien abruft und anzeigt. Die Komponente verfügt über ein modernes Design mit responsivem Layout, wodurch sie sowohl für Desktop- als auch für Mobilgeräte geeignet ist. Dieses Projekt zeigt, wie man eine funktionale Nachrichtenschnittstelle erstellt, die Live-Daten von einer API abruft und sie in einem ansprechenden Format präsentiert.

Merkmale

Dynamischer Nachrichtenabruf: Ruft Nachrichtenartikel von einer externen API ab und zeigt sie basierend auf Benutzerabfragen oder vordefinierten Kategorien an.
Responsive Design: Stellt sicher, dass die Nachrichtenoberfläche auf allen Geräten optisch ansprechend ist.
Hover-Effekte: Fügt den Nachrichtenkarten Interaktivität mit subtilen Hover-Effekten hinzu.
Suchfunktion: Ermöglicht Benutzern die Suche nach Nachrichtenartikeln anhand von Schlüsselwörtern.

Verwendete Technologien

HTML: Stellt die Struktur für die Nachrichtenoberfläche bereit.
CSS: Gestaltet die Komponente so, dass ein optisch ansprechendes und ansprechendes Design entsteht.
JavaScript: Verwaltet den Datenabruf, Benutzerinteraktionen und aktualisiert den Inhalt dynamisch.

Projektstruktur

Hier ein Überblick über die Projektstruktur:

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

Nach dem Login kopieren

index.html: Enthält die HTML-Struktur für die Nachrichtenkomponente.
style.css: Enthält CSS-Stile, um ein ansprechendes und ansprechendes Design zu erstellen.
script.js: Verwaltet die Logik zum Abrufen und Anzeigen von Nachrichtenartikeln.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

Klonen Sie das Repository:

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

Nach dem Login kopieren

Öffnen Sie das Projektverzeichnis:
```
cd Abhi-ki-News
```
Nach dem Login kopieren
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um die Nachrichtenoberfläche anzuzeigen.

Verwendung

Öffnen Sie die Anwendung in einem Webbrowser.
Klicken Sie auf eine Kategorie (z. B. IPL, Finanzen, Politik), um Nachrichtenartikel zu dieser Kategorie abzurufen.
Verwenden Sie die Suchleiste, um Nachrichtenartikel zu finden, indem Sie relevante Schlüsselwörter eingeben.
Interagieren Sie mit den Nachrichtenkarten, indem Sie mit der Maus darüber fahren, um die Hover-Effekte zu sehen.

Code-Erklärung

HTML

Die Datei index.html definiert die Struktur der News-Schnittstelle. Hier ist ein Ausschnitt:

<!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="Erstellen Sie eine Abhi-ki-Nachrichten-Website" 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>

Nach dem Login kopieren

CSS

Die style.css-Datei gestaltet die Nachrichtenoberfläche, um sicherzustellen, dass sie optisch ansprechend und reaktionsfähig ist. Nachfolgend sind einige wichtige Stile aufgeführt:

@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%);
}

Nach dem Login kopieren

JavaScript

Die Datei „script.js“ übernimmt den Datenabruf und aktualisiert die Nachrichtenkarten dynamisch. Hier ist der 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>`;
}

Nach dem Login kopieren

Live-Demo

Die Live-Demo des Projekts können Sie hier erkunden.

Abschluss

Abhi ki News ist ein praktisches Beispiel für die Integration externer APIs in eine Webanwendung und die Erstellung einer reaktionsfähigen, benutzerfreundlichen Nachrichtenoberfläche. Ich hoffe, dass dieses Projekt Ihnen hilft, mehr über API-Integration und Frontend-Entwicklung zu erfahren. Fühlen Sie sich frei, dieses Projekt an Ihre Bedürfnisse anzupassen und zu erweitern!

Credits

API-Quelle: News-API
Design-Inspiration: Verschiedene Nachrichten-Websites

Autor

Abhishek Gurjar

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Abhi-ki-Nachrichten-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!