图文详解，CSS Grid Layout 亲手改造 GitHub 贡献日历

2024-01-01 23:47:46

在学习 CSS Grid Layout 时，我发现内化所有新概念和术语的最好方法就是做各种项目。今天，我们就来尝试用 CSS Grid Layout 来重新构建 GitHub 的 Contribution 日历。

1. 准备工作

首先，我们需要准备一些东西：

一个文本编辑器（比如记事本++）
一个浏览器（比如 Chrome 或 Firefox）
GitHub 账户
一些耐心

2. 创建一个新的 HTML 文件

在文本编辑器中，创建一个新的 HTML 文件，并将其命名为“contribution-graph.html”。在文件中，输入以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="graph"></div>

  <script src="script.js"></script>
</body>
</html>

3. 创建一个新的 CSS 文件

在文本编辑器中，创建一个新的 CSS 文件，并将其命名为“style.css”。在文件中，输入以下代码：

#graph {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 1px;
  background-color: #f5f5f5;
}

.day {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.day--contribution {
  background-color: #0088cc;
}

4. 创建一个新的 JavaScript 文件

在文本编辑器中，创建一个新的 JavaScript 文件，并将其命名为“script.js”。在文件中，输入以下代码：

const graph = document.getElementById('graph');

const days = [
  { date: '2023-01-01', contribution: true },
  { date: '2023-01-02', contribution: false },
  { date: '2023-01-03', contribution: true },
  { date: '2023-01-04', contribution: false },
  { date: '2023-01-05', contribution: true },
  // ...
];

days.forEach((day) => {
  const div = document.createElement('div');
  div.classList.add('day');

  if (day.contribution) {
    div.classList.add('day--contribution');
  }

  graph.appendChild(div);
});