wip: list, button etc

public/index.html

@@ -105,6 +105,7 @@ <h2>GitHub Contribution Graph Customizer</h2>
         </ul>
       </div>
     </div>
+    <button class="generate-btn" onclick="window.alert('Will do later 😴')">Generate</button>
     <script src="index.js"></script>
   </body>
 </html>

public/index.js

@@ -41,21 +41,33 @@ document.addEventListener("DOMContentLoaded", function () {
       if (currentDate.getFullYear() < startDate.getFullYear()) {
         square.classList.add("previous-year");
       }
-
+
+      dateforgitlist = [];
       squaresContainer.appendChild(square);
-
       if (!square.classList.contains("previous-year")) {
         square.addEventListener("click", function () {
           const currentLevel = parseInt(square.getAttribute("data-level"));
           const options = { year: "numeric", month: "short", day: "numeric" };
-          console.log(new Date(square.getAttribute("data-date")).toLocaleDateString("en", options));
+          dateforgit = new Date(square.getAttribute("data-date")).toLocaleDateString("en", options);
+          dateforgitlist.push(dateforgit);
+          console.log("dateforgit:",dateforgit);
+          console.log("dateforgitlist: ",dateforgitlist);
+
           increaseLevel(square, currentLevel);
         });
 
         square.addEventListener("contextmenu", function (event) {
           event.preventDefault();
           const currentLevel = parseInt(square.getAttribute("data-level"));
+          const options = { year: "numeric", month: "short", day: "numeric" };
+          dateforgit = new Date(square.getAttribute("data-date")).toLocaleDateString("en", options);
           decreaseLevel(square, currentLevel);
+          const index = dateforgitlist.indexOf(dateforgit);
+          if (index > -1) {
+            dateforgitlist.splice(index, 1);
+          }
+          console.log("dateforgit:",dateforgit);
+          console.log("dateforgitlist: ",dateforgitlist);
         });
 
         square.addEventListener("mouseover", function (event) {

public/style.css

@@ -60,6 +60,22 @@ h2 {
   justify-content: center;
 }
 
+.generate-btn {
+  float: right;
+  padding: 8px;
+  font-weight: 600;
+  border: #0e4429 1px solid;
+  border-radius: 5px;
+  background-color: #39d353;
+  margin-right: 3.5rem;
+  margin-bottom: 3.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.generate-btn:hover {
+  transform: scale(1.05);
+}
 .graph {
   display: inline-grid;
   grid-template-areas:
@@ -70,6 +86,10 @@ h2 {
   flex-wrap: wrap;
   flex-direction: column;
   overflow-x: auto;
+  padding: 20px;
+  border: 1px #30363d solid;
+  border-radius: 6px;
+  margin: 20px;
 }
 
 .months {
@@ -101,13 +121,6 @@ h2 {
   grid-auto-columns: var(--square-size);
 }
 
-.graph {
-  padding: 20px;
-  border: 1px #30363d solid;
-  border-radius: 6px;
-  margin: 20px;
-}
-
 li {
   list-style-type: none;
 }
@@ -165,6 +178,10 @@ li {
     width: 50px;
     height: 50px;
   }
+  .generate-btn {
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+  }
   #description-gitart {
     font-size: 0.8rem;
     margin-left: 1rem;