Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <!-- navigation -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="/index.html">Friends List</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html"
              >Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="favorite.html">favorite</a>
          </li>
        </ul>
      </div>
      <!--[暫緩] [功能-工作模式/朋友模式切換] 固定上中-->
      <div id="switchMode">
        <div id="work"></div>
        <div id="friend"></div>
      </div>
    </nav>
    <!---search bar --->
    <div class="container mt-5">
      <div class="row" id="search-bar">
        <form action="" class="form-inline">
          <label for="" class="sr-only" for="inlineFormInputName2">Name</label>
          <input
            type="text"
            class="form-control mb-2 mr-sm-2"
            id="search"
            placeholder="name/surname ..."
          />
          <button type="submit" class="btn btn-primary mb-2" id="submit-search">
            Search
          </button>
        </form>
      </div>
      <div id="displayMode" class="float-right">
        <a href="#"
          ><i id="card" class="fa fa-th fa-2x  mt-1 ml-2" aria-hidden="true"></i
        ></a>
        <a href="#"
          ><i id="list" class="fa fa-bars fa-2x  mt-1 ml-2" aria-hidden="true"></i
        ></a>
      </div>
    </div>
    </div>

    <!-- data-panel -->
    <div class="container mt-5">
      <div class="row" id="data-panel">
        <!-- print movie list here -->
        <div class="col-sm-12">
          <div class="row" id="data-panel-dated"></div>
        </div>
        <div class="col-sm-6">
          <h3>工作同事</h3>
          <div class="row" id="data-panel-work"></div>
        </div>
        <div class="col-sm-6">
          <h3>親朋好友</h3>
          <div class="row" id="data-panel-friend"></div>
        </div>
      </div>
    </div>

    <!-- pagination 分頁列 -->
    <nav aria-label="Page navigation">
      <ul class="pagination justify-content-center" id="pagination">
        <!--示範用 <li class="page-item"><a href="#" class="page-link">1</a></li> -->
      </ul>
    </nav>

    <!-- Modal -->
    <div
      class="modal fade"
      id="show-movie-modal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLongTitle"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <!-- modal-header | #show-friend-title-->
          <div class="modal-header">
            <h5 class="modal-title" id="show-friend-title">Modal title</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <!-- modal-body | #show-movie-body | #show-movie-image  | #show-movie-date | #show-movie-description -->
          <div class="modal-body" id="show-friend-body">
            <div class="row">
              <div class="col-sm-5" id="show-friend-image"></div>
              <div class="col-sm-7">
                <p><em id="show-friend-date"></em></p>
                <p id="show-friend-birthday"></p>
                <p id="show-friend-email"></p>
                <p id="show-friend-description"></p>
              </div>
            </div>
          </div>
          <!-- modal-footer" -->
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
      crossorigin="anonymous"
    ></script>
    <script src="./main.js"></script>
              
            
!

CSS

              
                
              
            
!

JS

              
                (function() {
  //針對api 設定 常數|提升維護性
  const BASE_URL = "https://lighthouse-user-api.herokuapp.com/";
  const INDEX_URL = BASE_URL + "api/v1/users";
  const SHOW_URL = BASE_URL + "api/v1/users/";
  const data = [];

  let dataPerPage = 6; //分頁功能-每頁每類資料筆數-分兩類共12筆
  //localStorage 區
  const lstorage_displayPrefer =
    JSON.parse(localStorage.getItem("displayprefer")) || localstorage_initial();
  const localKeyValue = [];

  //dom api 選取要呈現的區塊

  axios
    .get(INDEX_URL)
    .then(response => {
      data.push(...response.data.results);
      dataProcess_Work_friend(data); //添加-source屬性
      displayFriendsList(data);
      gotTotalPages(data);
      gotPageData(1, data, "card");
    })
    .catch();
  //=======================================================================================================================================
  // 設定監聽事件 區--------------------------------------------------------------------
  //===============================================================================
  // switchMode | 用來判斷使用者切換什麼模式
  const switchMode = document.getElementById("switchMode");
  switchMode.addEventListener("click", event => {
    console.log(event.target.id);
    if (event.target.id === "work") {
      displaydata(data, "work"); //顯示同事清單
    } else if (event.target.id === "friend") {
      displaydata(data, "friend"); //顯示朋友清單
    }
  });
  console.log(switchMode);
  // data_pannel | 用來顯示用戶資料
  const data_pannel = document.querySelector("#data-panel");
  data_pannel.addEventListener("click", event => {
    let datasetid = event.target.dataset.id;
    if (event.target.matches(".btn-dated")) {
      dated(datasetid);
    } else if (event.target.matches(".btn-show-friend")) {
      personalinfo(datasetid);
    }
  });
  // search bar | 註冊監聽事件作處理
  const searchInput = document.getElementById("search");
  const searchBtn = document.getElementById("submit-search");

  searchBtn.addEventListener("click", event => {
    event.preventDefault(); //取消預設動作

    const rule_name = new RegExp(searchInput.value, "i"); //建立正規表達-值+規則(不分大小寫)
    const rule_surname = new RegExp(searchInput.value, "i");

    results = data.filter(user => user.name.match(rule_name));
    results.push(data.filter(user => user.surname.match(rule_surname)));
    displayFriendsList(results);
  });

  // 分頁事件監聽
  const pagination = document.getElementById("pagination");
  pagination.addEventListener("click", event => {
    if (event.target.tagName === "A") {
      let page = event.target.dataset.page;
      let display = localstorage_getvalue("displayprefer", "display");
      localstorage_update("displayprefer", "page", page);
      gotPageData(page, data, display);
    }
  });

  // 檢視模板監聽 | 監聽模板切換事件-寫入localstorage 將資料丟給不同模板涵是
  const displayMode = document.getElementById("displayMode");
  displayMode.addEventListener("click", event => {
    let displayMode = event.target.id;
    if (displayMode === "card") {
      console.log("切換卡片模式");
      localstorage_update("displayprefer", "display", "card"); //更新localstorage
      let page = localstorage_getvalue("displayprefer", "page"); //取得page值
      gotPageData(page, data, "card"); //進行單頁渲染
    } else if (displayMode === "list") {
      console.log("切換清單模式");
      localstorage_update("displayprefer", "display", "list");
      let page = localstorage_getvalue("displayprefer", "page");
      gotPageData(page, data, "list");
      //   localstorage_getvalue("displayprefer", "display");
      //   console.log("取值", localKeyValue[0]);
    }
  });
  //=======================================================================================================================================
  // function 區--------------------------------------------------------------------
  //===============================================================================
  //local storage 初始化
  function localstorage_initial() {
    let lstorage_displayPrefer = [];
    let new_storage = { mode: "work", display: "card", page: 1 };
    lstorage_displayPrefer.push(new_storage);
    localStorage.setItem(
      "displayprefer",
      JSON.stringify(lstorage_displayPrefer)
    );
  }

  //local storage 更新
  function localstorage_update(local_key, property, changeValue) {
    let key_changed = JSON.parse(localStorage.getItem(local_key));
    key_changed[0][property] = changeValue;
    localStorage.setItem(local_key, JSON.stringify(key_changed));
  }
  //local storage 取值 | 存入 localKeyValue[0]
  function localstorage_getvalue(local_key, property) {
    let key_changed = JSON.parse(localStorage.getItem(local_key));
    localKeyValue.push(key_changed[0][property]);
    return key_changed[0][property];
    //console.log("取值", localKeyValue[0]);
  }
  //資料處理 - 添加來源處理 | 處理api 拿到的資料-加入source屬性,標註 work or friend
  function dataProcess_Work_friend(data) {
    for (let i = 0; i < data.length; i++) {
      if (i < 100) {
        data[i].source = "work";
      } else if (100 < i && i < 200) {
        data[i].source = "friend";
      }
    }
  }

  //顯示好友清單 | 判別是同事 或 好友
  function displaydata(data, source) {
    let workContent = "";
    let friendContent = "";
    data.forEach(function(item, index, array) {
      if (item.source === "work") {
        workContent += `
        <div class="col-sm-3 self" id="${item.id}">
          <div class="card mb-2 "> 
          <img class="card-img-top " src="${
            item.avatar
          }" alt="card image cap">  
          <div class="card-body movie-item-body">
          <i class="fas fa-male"></i>
            <h6>${item.surname}/${item.name}</h6>
          </div>
          <div>
          <i class="fas fa-star btn-dated" data-id="${item.id}" ></i>
          <button class="btn btn-primary  btn-show-friend" data-toggle="modal" data-target="#show-movie-modal" data-id="${
            item.id
          }" data-source="work">Personal info</button>
          </div>
          </div>
          </div>
            `;
      } else if (item.source === "friend") {
        friendContent += `
            <div class="col-sm-3 self" id="${item.id}" >
            <div class="card mb-2 "> 
            <img class="card-img-top " src="${
              item.avatar
            }" alt="card image cap">  
            <div class="card-body movie-item-body">
            <i class="fas fa-female"></i>
              <h6>${item.surname}/${item.name}</h6>
            </div>
            <div>
            <i class="fas fa-star btn-dated"  data-id="${item.id}"></i>
            <button class="btn btn-primary  btn-show-friend" data-toggle="modal" data-target="#show-movie-modal" data-id="${
              item.id
            }" data-source="friend">Personal info</button>
            </div>
            </div>
            </div>
            `;
      }
    });
    if (source === "work") {
      data_pannel.innerHTML = workContent;
    } else if (source === "friend") {
      data_pannel.innerHTML = friendContent;
    }
  }

  //分頁功能-生成頁碼  | - 取得API資料後使用
  function gotTotalPages(data) {
    let pages = Math.ceil(data.length / (dataPerPage * 2)) || 1;
    console.log(pages);
    let paginationHTMLContent = "";
    for (let i = 0; i < pages; i++) {
      paginationHTMLContent += `
        <li class="page-item"> <a href='javascript:;' class="page-link" data-page=${i +
          1}>${i + 1}</a> </li>
        `;
    }
    pagination.innerHTML = paginationHTMLContent;
  }

  //分頁功能-渲染資料 | 自loacalstorage判斷,需要選染第幾頁資料 | 各取出6筆資料
  function gotPageData(page, data, display) {
    let startItemIndex_work = (page - 1) * dataPerPage; //0-10
    let startItemIndex_friend = (page - 1) * dataPerPage + 101; //101-200
    let pageResults_work = data.slice(
      startItemIndex_work,
      startItemIndex_work + dataPerPage
    );
    let pageResults_friend = data.slice(
      startItemIndex_friend,
      startItemIndex_friend + dataPerPage
    );
    let pageData = pageResults_work.concat(pageResults_friend);

    if (display === "card") {
      displayFriendsList(pageData);
    } else if (display === "list") {
      listMode(pageData);
    }
  }

  //===============================================================================

  //display - 展示朋友清單
  function displayFriendsList(data) {
    const work_panel = document.querySelector("#data-panel-work");
    const friend_panel = document.querySelector("#data-panel-friend");

    let workHtmlContent = "";
    let friendHtmlContent = "";

    data.forEach(function(item, index) {
      if (item.source === "work") {
        workHtmlContent += `
        <div class="col-sm-6 self" id="${item.id}">
          <div class="card mb-2 card_m_img"> 
          <img class="card-img-top " src="${
            item.avatar
          }" alt="card image cap">  
          <div class="card-body movie-item-body">
          <i class="fas fa-male"></i>
            <h6>${item.surname}/${item.name}</h6>
          </div>
          <div>
          <i class="fas fa-star btn-dated" data-id="${item.id}" ></i>
          <button class="btn btn-primary  btn-show-friend" data-toggle="modal" data-target="#show-movie-modal" data-id="${
            item.id
          }" >Personal info</button>
          </div>
          </div>
          </div>
        `;
      } else if (item.source === "friend") {
        friendHtmlContent += `
        <div class="col-sm-6 self" id="${item.id}" >
          <div class="card mb-2 card_f_img"> 
          <img class="card-img-top " src="${
            item.avatar
          }" alt="card image cap">  
          <div class="card-body movie-item-body">
          <i class="fas fa-female"></i>
            <h6>${item.surname}/${item.name}</h6>
          </div>
          <div>
          <i class="fas fa-star btn-dated"  data-id="${item.id}"></i>
          <button class="btn btn-primary  btn-show-friend" data-toggle="modal" data-target="#show-movie-modal" data-id="${
            item.id
          }" >Personal info</button>
          </div>
          </div>
          </div>
        `;
      }
    });

    work_panel.innerHTML = workHtmlContent;
    friend_panel.innerHTML = friendHtmlContent;
  }
  function listMode(data) {
    const work_panel = document.querySelector("#data-panel-work");
    const friend_panel = document.querySelector("#data-panel-friend");

    let workHtmlContent = "";
    let friendHtmlContent = "";

    data.forEach(function(item, index) {
      if (item.source === "work") {
        workHtmlContent += ` <li  class="list-group-item">${item.name}/${
          item.surname
        }
            <div class="float-right">
            <button class="btn btn-primary btn-show-movie" data-toggle="modal" data-target="#show-movie-modal" data-id="${
              item.id
            }">More</button>
            <button class='btn btn-info btn-add-favorite' data-id="${
              item.id
            }">+</button> </div>
            </li>`;
      } else if (item.source === "friend") {
        friendHtmlContent += `
            <li  class="list-group-item">${item.name}/${item.surname}
            <div class="float-right">
            <button class="btn btn-primary btn-show-movie" data-toggle="modal" data-target="#show-movie-modal" data-id="${
              item.id
            }">More</button>
            <button class='btn btn-info btn-add-favorite' data-id="${
              item.id
            }">+</button> </div>
            </li>
            `;
      }
    });
    let listContent_final_work = `
    <ul style="width:100%;"  class="list-group list-group-flush"> ${workHtmlContent}</ul>`;
    let listContent_final_friend = `
    <ul style="width:100%;"  class="list-group list-group-flush"> ${friendHtmlContent}</ul>`;
    work_panel.innerHTML = listContent_final_work;
    friend_panel.innerHTML = listContent_final_friend;
  }
  //===================

  //favorite - 標記約會對象
  function dated(datasetid) {
    let datePanel = document.querySelector("#data-panel-dated");
    let dateuser = document.getElementById(datasetid).innerHTML;
    let datecard =
      datePanel.innerHTML + `<div class="col-sm-3">${dateuser} </div>`;

    datePanel.innerHTML = datecard;
  }

  //more - 顯示朋友詳細資料
  function personalinfo(id) {
    //基本資料-照片+姓名+生日+地點

    //選取資料
    let name = document.querySelector("#show-friend-title");
    let birthday = document.querySelector("#show-friend-birthday");
    let email = document.querySelector("#show-friend-email");
    let locate = document.querySelector("#show-friend-description");
    let img = document.querySelector("#show-friend-image");

    //建立資料
    axios
      .get(SHOW_URL + id)
      .then(response => {
        name.innerText = `${response.data.name} /${response.data.surname}`;
        birthday.innerText = `birthday ${response.data.birthday}`;
        locate.innerText = `locate at : ${response.data.region}`;
        email.innerText = `email: ${response.data.email}`;
        img.innerHTML = `<img  src="${
          response.data.avatar
        }" alt="card image cap">`;
      })
      .catch();
  }
})();

              
            
!
999px

Console