JS Practice 03 Testimonial Slider

Kaka

2023年11月26日 11:44

本記事で紹介すること

JSの練習第３弾として，Testimonial Sliderを実装する．
Testimonial Sliderとは，端的にいうとユーザレビューのことである．

3人ユーザレビューを用意し，数秒ごとに切り替わるものを実装しようと思う．
これまでとあまりやっていることは変わらないが，実装の際，分割代入を用いているところがこれまでになかったところである．

デザインの準備

今回は，CSSもちゃんと書こうと思い，数値も意識して厳密にFigmaで作成．

起業家が出版した本のユーザレビューがwebサイトに記載されているイメージだ．

ユーザレビューを簡易に作成できないかを調べてみると，海外はAIを用いたTestimonial GeneretorのWebサービスが乱立している．日本でも同様のサービスがあるのかもしれないが，あまり見かけない．日本語サービスも，もしあれば，サンプル作る時に重宝できそうだ．（GPTsですぐにできそうである．）

参考)Free Testimonial Generetor

実装内容

例のごとく，Codepen問題は解決していないので，（調べる時間があまり取れない..）そのままコードを記載する

html

<!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>Testimonial</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="testimonial-container">
       
        <h4 class="text">“この本は，新時代における起業家にとってのバイブルとなるだろう”</h4>
        <img src="https://images.unsplash.com/photo-1475823678248-624fc6f85785?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="user image">
        <p class="username">山田ひろ子</p>
        <p class="company">株式会社ヤマダコンサルティング</p>
    </div>
    <script src="index.js"></script>
</body>
</html>

css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
    margin: 0;
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    background-color:#F7F4FF ;
}

.testimonial-container {
    width: 498px;
    height: 212px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 7px 10px 6px rgba(0, 0, 0, 0.1);
    padding: 56px;
    text-align: center;
}

img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
}

.text {
    color: #777676;
    font-size: 20px;
    font-weight: 400;
    margin-top: 0;
}
.username {
    color:#2D1AFF ;
    font-size: 16px;
    margin-top: 8px;
    margin: 8px;
}

.company {
    color: #777676;
    font-size: 16px;
    margin: 8px;
    
}

//testimonialsのオブジェクト作成
const testimonials = [
    {
        name:"山田 ひろ子",
        photoUrl:"https://images.unsplash.com/photo-1475823678248-624fc6f85785?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        text:"“この本は，新時代における起業家にとってのバイブルとなるだろう”",
        company:"株式会社ヤマダコンサルティング",
    },
    {
        name:"廣岡 智之",
        photoUrl:"https://images.unsplash.com/photo-1544168190-79c17527004f?q=80&w=1588&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        text:"“起業における重要なエッセンスが詰め込まれている”",
        company:"株式会社ベータトライ",
    },
    {
        name:"内田 美咲",
        photoUrl:"https://images.unsplash.com/photo-1515077678510-ce3bdf418862?q=80&w=1635&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        text:"“サーキュラーエコノミーの実践者も必読．Z世代の起業家の起爆剤となる”",
        company:"ジアース4v株式会社"
    }
];


//クラスを取得するconst定数を定義
const imgEl = document.querySelector("img");
const textEl = document.querySelector(".text")
const usernameEl = document.querySelector(".username")
const companyEl = document.querySelector(".company")

//リスト内のインデックス番号
let idx = 0

//関数の実行
updateTestimonial()

//中身を更新する関数の定義
function updateTestimonial(){
    //testimonialsのプロパティの値を分割代入．これらを，前述のconst定数にわたす．
    const {name, photoUrl, text, company} = testimonials[idx];
    imgEl.src = photoUrl;
    textEl.innerText = text;
    usernameEl.innerText = name;
    companyEl.innerText = company;
    //インデックスを更新して次のuserに移動．
    idx++
    //インデックスが，testimonilasの最後まで来たら，インデックスを初期に戻す
    if(idx === testimonials.length){
        idx = 0;
    }
    
    setTimeout(updateTestimonial,2000)
}

最後に

上記を実装すると，
2秒ごとに，ユーザレビューが切り替わる形になっている．

というわけで，今回も学んだ内容をアウトプットした．

デザインをクイックに作成して，実装するのはなかなか大変ではあるが，勉強の過程で，様々なUI，Webデザインを観察する機会に恵まれるため良いトレーニングになる．

奥さんの協会のWebサイトを作る必要性に迫られて勉強を始めているので，そろそろ作らなきゃな．．である．

この記事が気に入ったらサポートをしてみませんか？