10: W3/D6 --addition the prototype of 06-git-commits:

Jeffzholy · Jeffzholy · commit b45104c77bd0 · 2019-10-14T00:07:21.000+08:00
--add prototype of this exercise
--css is not done, all the borders are used for layout development
--miss some information showing on the page
--js is not reviewed, could be improved
diff --git a/week-03/day-06/workshop/06-github-commits/index.html b/week-03/day-06/workshop/06-github-commits/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div>
+      <h1>Commit messages of someone</h1>
+      <ul class="commits">
+      </ul>
+      <button>Get the next repo</button>
+    </div>
+
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/week-03/day-06/workshop/06-github-commits/index.js b/week-03/day-06/workshop/06-github-commits/index.js
@@ -0,0 +1,54 @@
+const org = 'green-fox-academy'
+const get_REPOS_URL = org => `https://api.github.com/orgs/${org}/repos`
+const get_COMMITS_URL = repo =>
+  `https://api.github.com/repos/green-fox-academy/${repo}/commits`
+
+const d = document
+const header = d.querySelector('h1')
+const button = d.querySelector('button')
+const ul = d.querySelector('ul')
+
+const fetchRepos = org => {
+  return fetch(get_REPOS_URL(org)).then(response => response.json())
+}
+
+const fetchCommits = repo => {
+  return fetch(get_COMMITS_URL(repo)).then(response => response.json())
+}
+
+const showName = name => {
+  header.textContent = `Commit messages of ${name}`
+  return Promise.resolve(name)
+}
+
+const showCommits = commits => {
+  ul.innerHTML = ''
+  commits.forEach(commit => {
+    let li = d.createElement('li')
+    li.className = 'commit'
+    li.textContent = commit.commit.message
+    ul.appendChild(li)
+  })
+  return Promise.resolve('Show all commits')
+}
+
+function* nextRepo(repos) {
+  repos.length ? yield repos.shift() : yield 'no more repo...'
+}
+
+const addButtonEvent = repos => {
+  button.addEventListener('click', async () => {
+    let repo = nextRepo(repos).next().value.name
+    let commits = await fetchCommits(repo)
+    await showName(repo)
+    await showCommits(commits)
+  })
+  return Promise.resolve('Adding the event listener to the button.')
+}
+
+const entryFunction = async org => {
+  let repos = await fetchRepos(org)
+  await addButtonEvent(repos)
+}
+
+entryFunction(org)
diff --git a/week-03/day-06/workshop/06-github-commits/style.css b/week-03/day-06/workshop/06-github-commits/style.css
@@ -0,0 +1,51 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  border: thin solid black;
+}
+
+div {
+  width: 60%;
+  height: 80vh;
+  margin: 2em auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+h1 {
+  font-size: 2.5em;
+  margin-top: 1em;
+}
+
+ul[class='commits'] {
+  list-style: none;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 1em;
+  box-sizing: border-box;
+}
+
+li[class='commit'] {
+  width: 100%;
+  height: 3em;
+  display: flex;
+  border-bottom: thin solid #5953F3;
+  justify-content: space-between;
+  text-align: center;
+}
+
+li:nth-of-type(2n) {
+  background-color: #c4d6f7;
+}
+
+button {
+  width: 10em;
+  height: 5em;
+  color: white;
+  margin: 1em auto;
+  border-radius: 0.5em;
+  background-color: #0029fa;
+}
