を使用して素晴らしい画像検索アプリケーションを作成する

38271 ワード
webdev css javascript html テキストリンク

こんにちは読者、あなた全員がうまくやっていることを望みます🤩


このブログの記事では、HTML、CSS、JavaScript、およびAPIを使用して素晴らしい画像検索アプリケーションを構築する方法を学びます.では、始めましょう✌

目次


- Setting up Pexels API
- Build an app

pexels APIの設定


Pexels APIをアプリケーションに設定するには、まずpexelsのアカウントを作成しましょう.
ステップ1:-あなたのお気に入りのブラウザを開いてpexels.com

ステップ2:-アカウントを作成した後、右側にあなたのプロフィールのロゴに移動し、ドロップダウンをクリックします.ここで、イメージとビデオAPIをクリックしてください.

ステップ3 :- APIキーをクリックします.

ステップ4:-今すべての条件を受け入れ、APIキーを生成するためにあなたのアプリケーションに関するほとんどの情報を与えます.

この手順の後、Pexelsはあなたにメールを送ることによってあなたのアイデンティティを確認します.それで、すべての詳細を確認してください.
ステップ5:-すべての検証の後、あなたのアプリケーションにリダイレクトされ、あなたのAPIキーを取得します🔑.

を今、あなたはAPIキーを持っているので、我々のアプリのコーディングを開始することができます.

コードへの時間！


私たちのイメージ検索アプリケーションプロジェクトは、3つの部分:HTML、CSS、およびJavaScriptが含まれます.まず最初に3つのファイルを作成する必要があります.最初のファイルはHTMLファイル(index . html)、2つ目はcssファイル(style . css)、3番目はjsファイル(index . js)です.

HTMLパーツ


インデックスを開きます.HTMLファイルを入力し、次のコードを入力します.
<!DOCTYPE html>
<html>
    <head>
        <!--META information-->
        <meta charset="UTF-8">
        <meta name="description" content="Image Search App">
        <meta name="keywords" content="HTML,CSS,JavaScript, images, API">
        <meta name="author" content="Neha Soni">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--End of META information-->
        <title>Image Search App</title>
        <!--LINK CUSTOM CSS FILE-->
        <link rel="stylesheet" href="./style.css"> 
    </head>
    <body>
        <h1>Image Search Gallery </h1>
        <div class="container">
            <!--Input box to take input from User-->
            <input type="text" class="input" placeholder="Search for Images🔎"/>
            <button class="search_btn">Search</button>
            <!--Images to be displayed here-->
            <div class="display_images"></div>
            <!--Button to load more images-->
            <button class="showmore">Show More</button>
        </div>
        <!--LINK CUSTOM JS FILE-->
        <script src="./index.js"></script>
    </body>
</html>

ジャバスクリプト


今ここに私たちの画像検索アプリの主な部分が来る.このファイルでは、APIからデータを取得します.APIからデータを取得するのは非同期プロセスであるため、データを取得するためにasync関数を使用します.あなたがAsync/Wait itを使う方法を知らないならばHow To Use Async/Await in JavaScript によるCatalin Pit )
一歩一歩話し合いましょう
ステップ1:-このアプリを通して使用するすべてのセレクタを格納します.
const apikey="563492ad6f917000010000019b983f3b62fe43daa92e746d4553dd35";
const input=document.querySelector("input");
const search_btn=document.querySelector(".search_btn");
const showmore_btn=document.querySelector(".showmore");

let page_num=1;
let search_text="";
let search=false;
ステップ2 :-入力テキストボックスにイベントリスナーを追加し、検索するテキストの値を格納します.
input.addEventListener("input",(event)=>{
    event.preventDefault();
    search_text=event.target.value;
})
ステップ3 :-関数を作成するCuratedPhotos() ページを最初にロードするときにデフォルトの画像を表示するには、関数のパラメータpageRange numを渡します.
async function CuratedPhotos(page_num){
//code to be executed
}
手順4 -
  • この関数では、次のエンドポイントを使用します.https://api.pexels.com/v1/curatedこのエンドポイントは、Pexelsチームによってキュレーションリアルタイム写真を受け取ることができます.
  • fetch ()メソッドを使用してAPIからデータを取得する際には、この約束を処理するために約束を返します.約束が解決されるたびに、応答変数にデータを保存します.
  • その後、私たちはdisplay_images() ページに画像を表示する方法.
    • async function CuratedPhotos(page_num){
    // fetch the data from api
    const data=await fetch(`https://api.pexels.com/v1/curated?page=${page_num}`, 
    {
        method: "GET",
        headers: {
            Accept: "application/json",
            Authorization: apikey,     //use the apikey you have generated
        },
    });
    const response=await data.json();   //convert the response to json 
    console.log(response);

    display_images(response);   // call the display_images method to display the images on page
}
    ステップ5:今すぐ作成しましょうdisplay_images() APIから取得したすべての画像を表示する方法.
  • この関数では、foreachループを使用して配列の各項目を反復処理します.
  • div要素を作成し、このdivで画像を定義します.
  • その後、メインDisplaychen画像部門でこのdivを追加しました.
    • function display_images(response){
    //use forEach loop to iterate on each item
    response.photos.forEach((image) => {
        const photo=document.createElement("div");
        photo.innerHTML=`<img src=${image.src.large}>
        <figcaption> Photo By: ${image.photographer}📸</figcaption>`;
        document.querySelector(".display_images").appendChild(photo);
    });
}
    ステップ6 :-ユーザーの入力に応じて画像を検索するには、検索ボタンにイベントリスナーを追加しましょう.
  • ユーザーがテキストボックス内の任意のテキストを入力しない場合は警告を表示します.
  • cleargallery() メソッドは、キュレーション写真をクリアするために使用されます.
  • 呼び出しSearchPhotos() 入力に関連する画像を検索する機能(次の手順でこのメソッドを使用します)
    • search_btn.addEventListener("click",()=>{
    if(input.value==="")
    {
        alert("Please enter the some text")
        return;
    }
    cleargallery();
    search=true;
    SearchPhotos(search_text,page_num);
})
    ステップ7:-今すぐ動作しましょうSearchPhotos() 入力テキストに応じたメソッド.
  • 最初にメソッドを作成するSearchPhotos() つのパラメータを持つメソッドは、クエリ(トピックを検索するトピック)とpageRank numです.
  • この方法では、我々は使用するつもりですhttps://api.pexels.com/v1/search API.このエンドポイントを使用すると、希望するトピックのpexelsを検索できます.
  • データを取得した後、私たちはdisplay_images() ページに画像を表示する方法.
    • async function SearchPhotos(query, page_num){
    const data=await fetch(`https://api.pexels.com/v1/search?query=${query}&page=${page_num}`, 
    {
        method: "GET",
        headers: {
            Accept: "application/json",
            Authorization: apikey,
        },
    });
    const response=await data.json();
    console.log(response);

    display_images(response);
}
    手順8 -cleargallery() メソッド:
  • ちょうどメインdivからすべてのイメージを取り除いて、1にpagelag numを再初期化してください.
    • function cleargallery(){
    document.querySelector(".display_images").innerHTML="";
    page_num=1;
}
    OK、アプリを完了する1つのより多くのステップ🥱.
    ステップ9 :-イベントリスナーを追加ボタンを表示します.このボタンの目的は、それをクリックすると、より多くの画像がページ上の負荷を取得するということです.
  • 我々は特定のもの(負荷より多くのキュレーション写真)を検索していない場合は、私たちは1つでpagelag numをインクリメントされます.
  • それ以外の場合はSearchPhotos() メソッド.
    • showmore_btn.addEventListener("click", () => {
    if(!search){  
        page_num++;
        CuratedPhotos(page_num);
    }
    else{
        if(search_text.value==="")
        return;
        page_num++;
        SearchPhotos(search_text,page_num);
    }
})
    最後に、CuratedPhotos() 関数は、ページの正確な再読み込み時に関数を開始します.
    CuratedPhotos(page_num);

    完全なJavaScriptコード


    インデックス.js
    const apikey="563492ad6f917000010000019b983f3b62fe43daa92e746d4553dd35"; //use the apikey you have generated
const input=document.querySelector("input");
const search_btn=document.querySelector(".search_btn");
const showmore_btn=document.querySelector(".showmore");

let page_num=1;
let search_text="";
let search=false;

input.addEventListener("input",(event)=>{
    event.preventDefault();
    search_text=event.target.value;
})

search_btn.addEventListener("click",()=>{
    if(input.value==="")
    {
        alert("Please enter the some text")
        return;
    }
    cleargallery();
    search=true;
    SearchPhotos(search_text,page_num);
})

function cleargallery(){
    document.querySelector(".display_images").innerHTML="";
    page_num=1;
}

async function CuratedPhotos(page_num){
    // fetch the data from api
    const data=await fetch(`https://api.pexels.com/v1/curated?page=${page_num}`, 
    {
        method: "GET",
        headers: {
            Accept: "application/json",
            Authorization: apikey,         //use the apikey you have generated
        },
    });
    const response=await data.json();     //convert the response to json 
    console.log(response);

    display_images(response);            // call the display_images method to display the images on page
}

function display_images(response){
    //use forEach loop to iterate on each item
    response.photos.forEach((image) => {
        const photo=document.createElement("div");
        photo.innerHTML=`<img src=${image.src.large}>
        <figcaption> Photo By: ${image.photographer}📸</figcaption>`;
        document.querySelector(".display_images").appendChild(photo);
    });
}

async function SearchPhotos(query, page_num){
    const data=await fetch(`https://api.pexels.com/v1/search?query=${query}&page=${page_num}`, 
    {
        method: "GET",
        headers: {
            Accept: "application/json",
            Authorization: apikey,
        },
    });
    const response=await data.json();
    console.log(response);

    display_images(response);
}

showmore_btn.addEventListener("click", () => {
    if(!search){  
        page_num++;
        CuratedPhotos(page_num);
    }
    else{
        if(search_text.value==="")
        return;
        page_num++;
        SearchPhotos(search_text,page_num);
    }
})

CuratedPhotos(page_num);
    今、我々のアプリは、我々はそれを美化する必要が働いている✨. だからスタイルを我々のアプリにいくつかのCSSを追加することができます🎨.

    CSSパーツ


    スタイル.CSS
    * 
{
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}

h1{
    text-align: center;
    padding: 10px;
}
.container 
{
    border-radius: 5px;
    margin: 5px;
    padding: 15px;
    box-shadow: 0 10px 40px -10px rgb(0 64 128 / 10%);
    border: 1px solid #eee;

}
input 
{
    padding: 10px;
    border: 1px solid #ddd;
    background: #f9fafc;
    width: 40%;
    font-size: 25px;
    margin-left: 25%;

}
.display_images{
    width: 80%;
    margin: 100px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    grid-gap:30px;
}
.display_images img 
{
    width: 90%;
    border-radius: 5px;
    height: 240px;
    cursor: pointer;
}
figcaption
{
    font-weight: bold;
    font-size: 15px;
}
button{
    background-color: #4CAF50;
    color: white;
    font-size: 1.5rem;
    padding: 10px;
    cursor: pointer;
}
.showmore{
    margin: 0 auto;
  display: block;
}

    あなたは今我々のアプリで作業を終えている👏.

    私はまた、アプリを展開して、ここでライブデモ🚀
  • 生のデモhttps://nehasoni05.github.io/Image-Search-App-using-Pexels-API/
  • ソースコード:https://github.com/nehasoni05/Image-Search-App-using-Pexels-API
    • 私はあなたがPexels APIを使用して画像検索アプリを作成したことを願っています.
    あなたが学習を楽しんで、それが役に立つならば、好きにしてください🤝

    読書ありがとう😃


    私は❤ 君と共に繋ぐGitHub
    何か疑問やフィードバックがあればコメント欄でお知らせください.

    🙌 サポート



    私の次のブログ記事を見て、気をつけて!
    ハッピーラーニング😃😃
    [BOJ/Python]15654号NとM(5)
    [BOJ 16236]小さなサメ(Python)