Abhi ki ニュース Web サイトを構築する

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、Abhi ki News をご紹介できることを嬉しく思います。このプロジェクトは、クリーンで使いやすいインターフェイスでニュース記事を取得して表示するように設計された動的なニュース Web サイト コンポーネントです。これは、HTML、CSS、JavaScript を使用したフロントエンド開発スキルを向上させる素晴らしい方法であり、外部 API を Web アプリケーションに統合する実践的な例を提供します。

プロジェクト概要

Abhi ki News は、ユーザー入力または事前定義されたカテゴリに基づいてニュース記事を取得して表示する Web アプリケーションです。このコンポーネントは、応答性の高いレイアウトを備えたモダンなデザインを特徴としており、デスクトップとモバイル デバイスの両方に適しています。このプロジェクトでは、API からライブ データを取得し、魅力的な形式で表示する機能的なニュース インターフェイスを作成する方法を示します。

特徴

• 動的ニュース取得: ユーザーのクエリまたは事前定義されたカテゴリに基づいて、外部 API からニュース記事を取得して表示します。
• レスポンシブ デザイン: ニュース インターフェイスがすべてのデバイスで視覚的に魅力的であることを保証します。
• ホバー効果: 微妙なホバー効果を使用して、ニュース カードにインタラクティブ性を追加します。
• 検索機能: ユーザーはキーワードでニュース記事を検索できます。

使用されている技術

• HTML: ニュース インターフェースの構造を提供します。
• CSS: コンポーネントをスタイル設定して、視覚的に魅力的で応答性の高いデザインを作成します。
• JavaScript: データの取得、ユーザー操作を処理し、コンテンツを動的に更新します。

プロジェクトの構造

プロジェクト構造の概要は次のとおりです:

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

• index.html: ニュース コンポーネントの HTML 構造が含まれます。
• style.css: 魅力的でレスポンシブなデザインを作成するための CSS スタイルが含まれています。
• script.js: ニュース記事を取得して表示するためのロジックを処理します。

インストール

プロジェクトを開始するには、次の手順に従います:

1. リポジトリのクローンを作成します:
   

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

2. プロジェクト ディレクトリを開きます:
   

   cd Abhi-ki-News
   

3. プロジェクトを実行します:

   • Web ブラウザでindex.html ファイルを開いて、ニュース インターフェイスを表示します。

使用法

1. Web ブラウザで アプリケーションを開きます。
2. カテゴリをクリックします (IPL、金融、政治など) そのカテゴリに関連するニュース記事を取得します。
3. 検索バーを使用して、関連するキーワードを入力してニュース記事を検索します。
4. ニュース カードを操作します。ニュース カードの上にマウスを移動すると、ホバー効果が表示されます。

コードの説明

HTML

index.html ファイルは、ニュース インターフェースの構造を定義します。スニペットは次のとおりです:

    <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">



    <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="Abhi ki ニュース Web サイトを構築する" 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>

CSS

style.css ファイルは、ニュース インターフェイスのスタイルを設定し、視覚的に魅力的で応答性の高いものにします。以下にいくつかの主要なスタイルを示します:

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

JavaScript

script.js ファイルはデータの取得を処理し、ニュース カードを動的に更新します。コードは次のとおりです:

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

ライブデモ

ここでプロジェクトのライブデモを探索できます。

結論

Abhi ki News は、外部 API を Web アプリケーションに統合し、応答性の高いユーザーフレンドリーなニュース インターフェイスを作成する実践的な例です。このプロジェクトが API 統合とフロントエンド開発についてさらに学ぶのに役立つことを願っています。ニーズに合わせてこのプロジェクトを自由に変更および拡張してください!

クレジット

• API ソース: ニュース API
• デザインのインスピレーション: さまざまなニュース Web サイト

著者

アビシェク・グルジャル

以上がAbhi ki ニュース Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。