progress in collection js

tu2463 · Dec 5, 2023 · aa8e2b7 · aa8e2b7
1 parent 5df8016
commit aa8e2b7
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 49 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/final-project/.DS_Store b/final-project/.DS_Store
diff --git a/final-project/collection.html b/final-project/collection.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/collection.css">
     <script defer src="js/storage.js"></script>
+    <script defer src="js/collection-general.js"></script>
     <script defer src="js/app.js"></script>
   </head>
   <body>

diff --git a/final-project/css/collection.css b/final-project/css/collection.css
@@ -38,7 +38,7 @@ header {
     box-sizing: border-box;
     padding: 7px 15px;
     border: 7px solid #e9d5ca;
-    border-radius: 15px;
+    border-radius: 21px;
     background: rgba(233, 213, 202, 0.5);
     width: 100%;
     height: 395px;
@@ -48,7 +48,7 @@ header {
 }
 
 .collected-time {
-    margin-top: 10px;
+    margin-top: 17px;
     font-size: 18px;
     color: rgba(233, 213, 202, 0.5);
 }
diff --git a/final-project/img/.DS_Store b/final-project/img/.DS_Store
diff --git a/final-project/js/app.js b/final-project/js/app.js
@@ -58,8 +58,7 @@ function endTreasureToCollection() {
   const curRecord = retrieveHistory();
   submitNoteBody(curRecord.startTime, curRecord.duration, curRecord.isCompleted, curRecord.productivity);
   submitTreasure();
-  // window.location.replace("collection.html");
-  console.log("go to collection");
+  window.location.replace("collection.html");
 }
 
 function endToEndTreasure() {
@@ -93,21 +92,6 @@ else if (curPage == 'end-treasure.html') {
   const btnTreasure = document.querySelector('.treasure');
   btnTreasure.addEventListener('click', () => (endTreasureToCollection()));
 }
-
-// Treasure
-class Treasure {
-  constructor(id, category, title, body) {
-    this.id = id;
-    this.category = category;
-    this.title = title;
-    this.content = body;
-    this.read = false;
-  }
-}
-
-const treasures = {
-  1: {category: "c_1", title: "t_1", body: "b_1"},
-  2: {category: "c_2", title: "t_2", body: "b_2"}
-};
-
-const collections = [];
+else if (curPage == 'collection.html'){
+  updateCollectionInfo();
+}
diff --git a/final-project/js/collection-general.js b/final-project/js/collection-general.js
@@ -0,0 +1,61 @@
+// Treasure
+class Treasure {
+    constructor(id, category, title, body, read, date) {
+      this.id = id;
+      this.category = category;
+      this.title = title;
+      this.content = body;
+      this.read = read;
+      this.date = date;
+    }
+  }
+
+const treasures = {
+    1: {category: "c_1", title: "t_1", body: "b_1"},
+    2: {category: "c_2", title: "t_2", body: "b_2"}
+  };
+
+const collections = [];
+
+function submitTreasure() {
+    // get a random treasure from the full treasure catalog
+    const id = Math.floor(Math.random() * (Object.keys(treasures).length - 1) + 1); // min = 0*l+1 = 1; max = 1*l+1 = l+1
+    const t = treasures[id];
+    // console.log(Object.keys(treasures).length, id, treasures, t, collections);
+    const category = t.category;
+    const title = t.title;
+    const body = t.body;
+
+    const date = new Date()
+    const treasure = new Treasure(id, category, title, body, false, date);
+    collections.push(treasure);
+    localStorage.setItem('05430FP_curTreasure', id);
+
+    const collectionsArray = Array.from(collections);
+    console.log(collections);
+
+    const collectionsArrayString = JSON.stringify(collectionsArray);
+    localStorage.setItem('05430FP_storedCollections', collectionsArrayString);
+    window.location.replace("end-treasure.html?page=read");
+  }
+
+// collection.html
+function updateCollectionInfo() {
+    // retrieve collections from storage
+    const collectionsArrayString = localStorage.getItem('05430FP_storedCollections');
+    const collectionsArray = JSON.parse(collectionsArrayString);
+    console.log(collectionsArray); 
+
+    // re-add treasures to collections
+    for (const treasure of collectionsArray) {
+      const thisTreasure = new Treasure(treasure.id, treasure.category, 
+        treasure.title, treasure.body, treasure.read, treasure.date);
+      collections.push(thisTreasure);
+      makeTreasureClone(thisTreasure);
+    }
+    console.log(collections);
+  }
+
+function makeTreasureClone(thisTreasure){
+    console.log("cloning...");
+  }
diff --git a/final-project/js/storage.js b/final-project/js/storage.js
@@ -19,14 +19,6 @@ function updateEndInfo() {
     minElement.innerText = curRecord.duration + " min";
 }
 
-function updateEndTreasureInfo() {
-  const id = localStorage.getItem('05430_curTreasure');
-  const t  = collections[id];
-  const title = t.title;
-  const body = t.body;
-  // const titleElement = 
-}
-
 function retrieveHistory(){
     const historyArray = retrieveFromLocalStorage();
     const curRecordData = historyArray.slice(-1)[0];
@@ -83,25 +75,6 @@ function submitProductivity() {
   window.location.replace("end-treasure.html");
 }
 
-function submitTreasure() {
-  const id = Math.floor(Math.random() * (Object.keys(treasures).length - 1) + 1); // min = 0*l+1 = 1; max = 1*l+1 = l+1
-  const t = treasures[id];
-  console.log(Object.keys(treasures).length, id, treasures, t, collections);
-  const category = t.category;
-  const title = t.title;
-  const body = t.body;
-  const treasure = new Treasure(id, category, title, body);
-  collections.push(treasure);
-  localStorage.setItem('05430FP_curTreasure', id);
-
-  const collectionsArray = Array.from(collections);
-  console.log(collections);
-
-  const collectionsArrayString = JSON.stringify(collectionsArray);
-  localStorage.setItem('05430FP_storedCollections', collectionsArrayString);
-  window.location.replace("end-treasure.html?page=read");
-}
-
 
 function saveToLocalStorage() {
     const historyArray = Array.from(history);