Step 10

Clone a remote repository!

The nice thing about a GitHub repository is that you can link multiple local repositories to it (very useful to sync between multiple devices/developers). Let's simulate this by linking another local repository to the remote one on GitHub. For this, we are going to clone the GitHub repository into a new directory.

Open the terminal and make sure you are not in the sleeptime-git directory where you currently store your local SeepTime App. Then, run the following command:

git clone <repository>

where <repository> is the URL of your GitHub repository. For me, the URL is https://github.com/cs280fall20/sleeptime-app.

Open the new directory created by the clone command. (On my computer, this directory is sleeptime-app.) This is a clone (a copy) of the GitHub repository.

Push vs Pull

Let's make some changes in this new local repository! We are going to implement the solution to Exercise 1 from Lecture 1.

diff --git a/script.js b/script.js
index b98de79..9babecb 100644
--- a/script.js
+++ b/script.js
@@ -23,7 +23,8 @@ output.innerHTML = `
 function zzzOnClick() {
     let output = document.querySelector(".output");
     output.style.display = "block";
-    let hours = "";
+    let hours = document.querySelector("#hours");
+    hours.innerText = ""; // cleanup existing content
 
     // get current time
     let now = Date.now(); // in milliseconds
@@ -38,14 +39,14 @@ function zzzOnClick() {
         cycle += 90 * minute;
 
         // append the sleep cycles to hours string
-        hours += new Date(cycle).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        let span = document.createElement("span");
+        span.id = "cycle-" + (i + 1);
+        span.innerText = new Date(cycle).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        hours.appendChild(span);
 
         if (i < 5) {
-            hours += " OR ";
+            let or = document.createTextNode(" OR ");
+            hours.appendChild(or);
         }
     }
-
-    // output hours
-    let hoursElm = document.querySelector("#hours");
-    hoursElm.innerText = hours;
 }

#cycle-1 {
  color: rgb(168, 39, 254);
}

#cycle-2 {
  color: rgb(154, 3, 254);
}

#cycle-3 {
  color: rgb(150, 105, 254);
}

#cycle-4 {
  color: rgb(140, 140, 255);
}

#cycle-5 {
  color: rgb(187, 187, 255);
}

#cycle-6 {
  color: rgb(143, 254, 221);
}

Commit the changes:

git commit -am "color-code the wake up hours"

Now the changes are committed to this local repository. You must push them to the remote repository on GitHub.

git push

Go to the sleeptime-git folder (which we created earlier in this lecture). This folder contains a local repository that is behind the changes made to your remote (and the other local) repository. To update and sync it with remote, execute the following command:

git pull

The command above will "pull" (fetch and merge) the latest changes from the remote (GitHub) repository. You will see a message similar to the one below:

remote: Enumerating objects: 7, done.
remote: Counting objects: 100% (7/7), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 4 (delta 2), reused 4 (delta 2), pack-reused 0
Unpacking objects: 100% (4/4), done.
From https://github.com/cs280fall20/sleeptime-app
   3c9d384..6279f94  master     -> origin/master
Updating 3c9d384..6279f94
Fast-forward
 script.js | 15 ++++++++-------
 style.css | 25 +++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 7 deletions(-)

By the way, visit your deployed GitHub Page; it must reflect the latest changes - if not, refresh the page (while holding down the shift button).