Merge pull request #7 from sarah-you/issue-2-add-mylist

Issue 2 : Add to My List

css/styles.css

@@ -3,7 +3,7 @@
 }
 
 .header {
-  background-color: white;
+  background-color: rgba(255, 232, 206, 0.9);
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -15,12 +15,18 @@ h1 {
   margin-left: 10rem;
 }
 
+.logo,
+#my-list-head {
+  cursor: pointer;
+}
+
 .main-container {
-  background-color: #f0f0f0;
+  background: rgba(255, 196, 130, 0.9);
+  width: 100%;
   padding-top: 1rem;
 }
 
-#my-list {
+#my-list-head {
   font-size: 1.5rem;
   padding-top: 0.5rem;
   margin-left: 3rem;
@@ -32,6 +38,13 @@ h1 {
   font-size: 1.5rem;
 }
 
+.subheading {
+  display: flex;
+  justify-content: center;
+  font-size: 2rem;
+  font-family: righteous, sans-serif;
+}
+
 p,
 a {
   font-size: 1rem;
@@ -56,27 +69,26 @@ li {
   display: flex;
   flex-direction: row;
   height: 12rem;
-  background-color: white;
+  background-color: rgb(248, 234, 227);
   margin: 1.5rem;
   width: 90%;
-  box-shadow: 3px 4px 4px lightgray;
-  border-radius: 5px;
+  border-radius: 10px;
 }
 
 .list-wrap:hover {
   cursor: pointer;
-  background: rgb(247 206 202/90%);
+  background: #f0f0f0;
 }
 
 .list-wrap:active {
   box-shadow: 0 5px 5px #fb4d3d;
   transform: translateY(4px);
-  border-radius: 5px;
+  border-radius: 10px;
 }
 
 img {
   height: 12rem;
-  border-radius: 5px;
+  border-radius: 10px;
 }
 
 .text-wrap {
@@ -212,6 +224,19 @@ img {
   color: white;
   font-size: 1rem;
   font-weight: bold;
+  margin: 1rem;
+  margin-top: 4rem;
+}
+
+.add:hover {
+  cursor: pointer;
+}
+
+.add:active {
+  box-shadow: 0 5px 5px black;
+  transform: translateY(3px);
+  background-color: rgb(136, 176, 136);
+  color: black;
 }
 
 .close {

index.html

@@ -19,18 +19,23 @@
       <h1 class="logo">
         MyWatchList
       </h1>
-      <h2 id="my-list">
+      <h2 id="my-list-head">
         My List
       </h2>
     </div>
   </header>
   <main>
     <div class="main-container">
-      <h3 class="heading">Top 25 Anime List 2023</h3>
-      <div class="main-page">
-        <ol id="anime-list"></ol>
+      <h3 class="heading display">Top 25 Anime List 2023</h3>
+      <h3 class="subheading hidden">My List</h3>
+      <div data-view="main-page-list" id="main-page-list">
+        <div class="main-page">
+          <ol id="anime-list"></ol>
+        </div>
+      </div>
+      <div data-view="my-list" id="my-list" class="hidden">
+        <ol id="my-saved-list"></ol>
       </div>
-    </div>
   </main>
   <script src="js/data.js"></script>
   <script src="js/main.js"></script>

js/data.js

@@ -1 +1,20 @@
 /* exported data */
+// local storage to add to my list
+
+var data = {
+  view: 'main-page-list',
+  entries: [],
+  myList: []
+};
+
+function beforeUnload(event) {
+  const dataJSON = JSON.stringify(data);
+  localStorage.setItem('my list', dataJSON);
+}
+
+window.addEventListener('beforeunload', beforeUnload);
+
+const prevSavedList = localStorage.getItem('my list');
+if (prevSavedList !== null) {
+  data = JSON.parse(prevSavedList);
+}