年度明星项目 蓝桥杯

仅作记录之用

// 保存翻译文件数据的变量
let translation = {};
// 记录当前语言
let currLang = "zh-cn";

// TODO: 请在此补充代码实现项目数据文件和翻译数据文件的请求功能 
let itemList = [];
let page = 15;
;(async function () {
  let http = new XMLHttpRequest();
  http.open("get", "./js/translation.json");
  http.send();
  http.onreadystatechange = () => {
    if (http.readyState == 4 && http.status == 200) {
      // 请求成功执行的代码
      translation = JSON.parse(http.response);
    }
    console.log("5", translation);
  };

  await fetch("./js/all-data.json", { method: "GET" })
    .then((res) => res.json())
    .then((data) => {
      itemList = data;
      (function () {
        for (let i = page - 15; i < page; i++) {
          $(".list > ul").append(
            createProjectItem({
              icon: itemList[i].icon,
              description: itemList[i].descriptionCN,
              name: itemList[i].name,
              stars: itemList[i].stars,
              tags: itemList[i].tags,
            })
          );
        }
      })()
    });
})();
// TODO-END

// TODO: 请修改以下代码实现项目数据展示的功能

// 以下代码（13-23行）为 createProjectItem 函数使用示例
// Mock一个项目的数据
$(".load-more").click(() => {
  let item = {};
  page += 15;
  for (let i = page - 15; i < page; i++) {
    item = {
      icon: itemList[i].icon,
      description: itemList[i].descriptionCN,
      name: itemList[i].name,
      stars: itemList[i].stars,
      tags: itemList[i].tags,
    };
    // 添加至页面的项目列表中，查看页面可以看到有一行 bun 的项目数据
    if (page == 60) {
      console.log(document.querySelector(".load-more"));
      document.querySelector(".load-more").style.display = "none";
    }
    $(".list > ul").append(createProjectItem(item));
  }
});

// TODO-END

// 用户点击切换语言的回调
$(".lang").click(() => {
  // 切换页面文字的中英文
  if (currLang === "en") {
    $(".lang").text("English");
    currLang = "zh-cn";
  } else {
    $(".lang").text("中文");
    currLang = "en";
  }
  $("body")
    .find("*")
    .each(function () {
      const text = $(this).text().trim();
      if (translation[text]) {
        $(this).text(translation[text]);
      }
    });
  // TODO: 请在此补充代码实现项目描述的语言切换
  let ctx = document.querySelectorAll(".desc>p");
  console.log(ctx);
  for (let i = 0; i < page; i++) {
    ctx[i].innerText = currLang == "en"?itemList[i].descriptionEN:itemList[i].descriptionCN
  }
});

// 生成列表DOM元素的函数，将该元素的返回值append至列表中即可生成一行项目数据
/**
 * @param  {string} name - 项目名称
 * @param  {string} description - 项目描述
 * @param  {string[]} tags - 项目标签
 * @param  {number} stars - 项目star数量
 * @param  {string} icon - 项目icon路径
 */
function createProjectItem({ name, description, tags, stars, icon }) {
  return `
    <li class="item">
      <img src="images/${icon}" alt="">
      <div class="desc">
        <h3>${name}</h3>
        <p>${description}</p>
        <ul class="labels">
          ${tags.map((tag) => `<li>${tag}</li>`).join("")}
        </ul>
      </div>
      <div class="stars">
        +${stars} 🌟
      </div>
    </li>
  `;
}