Bina Laman Web Berita Abhi ki-tutorial css-php.cn

Build a Abhi ki News Website

pengenalan

Helo, pembangun! Saya teruja untuk memperkenalkan projek terbaharu saya: Abhi ki News. Projek ini ialah komponen laman web berita dinamik yang direka untuk mengambil dan memaparkan artikel berita dalam antara muka yang bersih dan mesra pengguna. Ia merupakan cara yang hebat untuk meningkatkan kemahiran pembangunan bahagian hadapan anda menggunakan HTML, CSS dan JavaScript serta menyediakan contoh praktikal untuk menyepadukan API luaran ke dalam aplikasi web anda.

Gambaran Keseluruhan Projek

Abhi ki News ialah aplikasi web yang mengambil dan memaparkan artikel berita berdasarkan input pengguna atau kategori yang dipratentukan. Komponen ini menampilkan reka bentuk moden dengan susun atur responsif, menjadikannya sesuai untuk kedua-dua peranti desktop dan mudah alih. Projek ini menunjukkan cara membuat antara muka berita berfungsi yang mengambil data langsung daripada API dan membentangkannya dalam format yang menarik.

Ciri-ciri

Pengambilan Berita Dinamik: Mengambil dan memaparkan artikel berita daripada API luaran berdasarkan pertanyaan pengguna atau kategori yang dipratentukan.
Reka Bentuk Responsif: Memastikan antara muka berita menarik secara visual pada semua peranti.
Kesan Tuding: Menambahkan interaktiviti pada kad berita dengan kesan tuding halus.
Fungsi Carian: Membolehkan pengguna mencari artikel berita mengikut kata kunci.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk antara muka berita.
CSS: Menggayakan komponen untuk mencipta reka bentuk yang menarik secara visual dan responsif.
JavaScript: Mengendalikan pengambilan data, interaksi pengguna dan mengemas kini kandungan secara dinamik.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

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

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk komponen berita.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk yang menarik dan responsif.
script.js: Mengendalikan logik untuk mengambil dan memaparkan artikel berita.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Abhi-ki-News
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam penyemak imbas web untuk melihat antara muka berita.

Penggunaan

Buka aplikasi dalam penyemak imbas web.
Klik pada kategori (cth., IPL, Kewangan, Politik) untuk mendapatkan artikel berita yang berkaitan dengan kategori tersebut.
Gunakan bar carian untuk mencari artikel berita dengan memasukkan kata kunci yang berkaitan.
Berinteraksi dengan kad berita dengan melayang di atasnya untuk melihat kesan tuding.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur antara muka berita. Berikut adalah coretan:

<!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="Bina Laman Web Berita 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>

Salin selepas log masuk

CSS

Fail style.css menggayakan antara muka berita untuk memastikan ia menarik secara visual dan responsif. Di bawah ialah beberapa gaya utama:

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

Salin selepas log masuk

JavaScript

Fail script.js mengendalikan pengambilan data dan mengemas kini kad berita secara dinamik. Ini kodnya:

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>`;
}

Salin selepas log masuk

Demo Langsung

Anda boleh meneroka demo langsung projek di sini.

Kesimpulan

Abhi ki News ialah contoh praktikal untuk menyepadukan API luaran ke dalam aplikasi web dan mencipta antara muka berita yang responsif dan mesra pengguna. Saya harap projek ini membantu anda mengetahui lebih lanjut tentang penyepaduan API dan pembangunan bahagian hadapan. Jangan ragu untuk mengubah suai dan mengembangkan projek ini untuk memenuhi keperluan anda!