💕 FEAT: 一旦オブジェクト指向、classを使ってのプログラム終了

Author: pss-aileen

README.md

@@ -2,8 +2,7 @@
 
 # Commit Easily 
 Commit Easilyはコミットメッセージを簡単に何も考えずに作成できるWebアプリです。
-
-[Version 2.0.0]からforkして、ご自身に合ったprefixを簡単に作成することができます。
+[Version 3.0.0]からforkして、ご自身に合ったprefixを簡単に作成することができます。
 
 
 ## 概要
@@ -33,7 +32,8 @@ URL: https://pss-aileen.github.io/project-github-commit-message/
 - HTML/CSS
 - JavaScript
 - Tailwind CSS
-
+- その他
+  - jsonにprefixを保管し、オブジェクト指向をでプログラムを書きました（Version 3から）
 
 ## 制作について
 - 制作期間
@@ -42,36 +42,49 @@ URL: https://pss-aileen.github.io/project-github-commit-message/
   - 気分が上がるように可愛いアイコンを使ってデザインをまとめました
 
 ---
-#### [Version 2.0.5] 2024/01/03
-- 新機能
-  - ダークモードに対応
-- 修正
-  - RELEASE、NEWの時、SUBJECTを自動的に出力
-
-#### [Version 2.0.4] 2024/01/01
-- 修正
-  - UPDATEの日付を2411→240101になるよう変更
-
-#### [Version 2.0.3] 2023/12/23
-- 修正
-  - UPDATEの自動日付を20231223から231223になるように変更
-
-#### [Version 2.0.2] 2023/12/22
-- 新機能
-  - prefixでUPDATEを選んだ時、日付が自動でSUBJECTに入るようにした
-
-#### [Version 2.0.1] 2023/12/17
-- 新機能
-  - リセットボタン: 自分のインターネット回線が遅くでリロードして書いた内容を消していると面倒だったので、リセットボタンを作成
-  - practice-project用のprefixの追加
 
-#### [Version 2.0.0] 2023/12/13
-- 新機能
-  - プロジェクトごとにprefixを切り替えられる機能を追加
-- 修正
-  - prefixが複数選択できる問題を解決（HTMLのSelectからmultipleを削除）
-  
-#### [Version 1.0.0] 2023/12/03
+## Release
+
+<details>
+
+<summary>show detail</summary>
+
+- **[Version 3.0.0] 2024/02/24**
+  - 内部構造作り替え
+    - オブジェクト指向でプログラムを組み直し
+    - prefixの情報をjsonで管理するように変更
+- **[Version 2.0.7] 2024/01/30**
+  - 修正
+    - 選択肢にアイコン追加
+    - PAIZAの選択肢の順番変更
+- **[Version 2.0.6]**
+  - skip
+- **[Version 2.0.5] 2024/01/03**
+  - 新機能
+    - ダークモードに対応
+  - 修正
+    - RELEASE、NEWの時、SUBJECTを自動的に出力
+- **[Version 2.0.4] 2024/01/01**
+  - 修正
+    - UPDATEの日付を2411→240101になるよう変更
+- **[Version 2.0.3] 2023/12/23**
+  - 修正
+    - UPDATEの自動日付を20231223から231223になるように変更
+- **[Version 2.0.2] 2023/12/22**
+  - 新機能
+    - prefixでUPDATEを選んだ時、日付が自動でSUBJECTに入るようにした
+- **[Version 2.0.1] 2023/12/17**
+  - 新機能
+    - リセットボタン: 自分のインターネット回線が遅くでリロードして書いた内容を消していると面倒だったので、リセットボタンを作成
+  - practice-project用のprefixの追加
+- **[Version 2.0.0] 2023/12/13**
+  - 新機能
+    - プロジェクトごとにprefixを切り替えられる機能を追加
+  - 修正
+    - prefixが複数選択できる問題を解決（HTMLのSelectからmultipleを削除）
+- **[Version 1.0.0] 2023/12/03**
+
+</details>
 
 ---
 

_project/images/image-screen.jpg

@@ -677,6 +677,13 @@ input[type="number"]::-webkit-inner-spin-button {
   transition-duration: 150ms;
 }
 
+.body.darkmode {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .btn-mode {
   position: fixed;
   bottom: 0.75rem;
@@ -756,6 +763,13 @@ input[type="number"]::-webkit-inner-spin-button {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.btn-reset.darkmode {
+  --tw-border-opacity: 1;
+  border-color: rgb(71 85 105 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+}
+
 .form-wrapper {
   margin-top: 2rem;
 
@@ -856,6 +870,20 @@ input[type="number"]::-webkit-inner-spin-button {
     padding-bottom: 0.25rem;
   }
 
+  input.darkmode,
+  select.darkmode,
+  .input-textarea.darkmode {
+    --tw-border-opacity: 1;
+    border-color: rgb(71 85 105 / var(--tw-border-opacity));
+  }
+
+  input.darkmode,
+  select.darkmode,
+  .input-textarea.darkmode {
+    --tw-bg-opacity: 1;
+    background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+  }
+
   .output-textarea {
     margin-top: 0.5rem;
   }
@@ -899,6 +927,16 @@ input[type="number"]::-webkit-inner-spin-button {
     padding-bottom: 0.25rem;
   }
 
+  .output-textarea.darkmode {
+    --tw-border-opacity: 1;
+    border-color: rgb(71 85 105 / var(--tw-border-opacity));
+  }
+
+  .output-textarea.darkmode {
+    --tw-bg-opacity: 1;
+    background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+  }
+
   .description {
     margin-top: 0.5rem;
   }

_project/images/image-screen_bk_0224.jpg

@@ -5,11 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Commit Easily</title>
-  <!-- <script src="https://cdn.tailwindcss.com"></script> -->
   <link rel="stylesheet" href="css/style.css" />
 </head>
 
-<body class="body">
+<body class="body" id="body">
 
   <div class="btn-mode" id="btn-mode">
     🌞

dist/css/style.css

@@ -1,6 +1,10 @@
 'use strict';
 {
 
+  /*
+    TYPEとPREFIXを追加したい場合はdata/data.jsonを追加すること
+  */
+
   class JsonData {
     constructor(url) {
       this.url = url;
@@ -229,6 +233,107 @@
     }
   }
 
+
+
+  class DarkMode {
+    constructor() {
+
+    }
+
+    getDOMElements() {
+      const body = document.getElementById("body");
+      const resetBtn = document.getElementById("btn-reset");
+      const input = document.querySelectorAll("input");
+      const select = document.querySelectorAll("select");
+      const comment = document.getElementById("comment");
+      const generatedMessage = document.getElementById("message-output");
+      const modeBtn = document.getElementById("btn-mode");
+      const elements = [body, resetBtn, input, select, comment, generatedMessage];
+      return { elements, modeBtn };
+    }
+
+    getLocalStorage() {
+      const monitorMode = JSON.parse(localStorage.getItem("displayMode"));
+      return monitorMode;
+    }
+
+    setLocalStorageLightMode() {
+      localStorage.setItem("displayMode", JSON.stringify("lightmode"));
+    }
+    
+    setLocalStorageDarkMode() {
+      localStorage.setItem("displayMode", JSON.stringify("darkmode"));
+    }
+
+    judgeInitMode() {
+      const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const monitorMode = this.getLocalStorage();
+
+      if (darkModeMediaQuery.matches) {
+        console.log("judge: system dark");
+        this.switchToDarkMode();
+      } else if (!darkModeMediaQuery.matches) {
+        console.log("judge: system light");
+        this.switchToLightMode();
+      } else if (monitorMode === "darkmode") {
+        console.log("localStorage DARK");
+        this.switchToDarkMode();
+      } else {
+        console.log("localStorage LIGHT");
+        this.switchToLightMode();
+      }
+    }
+
+    judgeEvent() {
+      const { modeBtn } = this.getDOMElements();
+      if (modeBtn.textContent === "🌞") {
+        this.switchToDarkMode();
+      } else {
+        this.switchToLightMode();
+      }
+
+    }
+  
+    switchToDarkMode() {
+      const {elements, modeBtn} = this.getDOMElements();
+      this.setLocalStorageDarkMode();
+
+      modeBtn.textContent = "🌛";
+
+      for (let i = 0; i < elements.length; i++) {
+        if (elements[i].length > 0) {
+          for (const element of elements[i]) {
+            element.classList.add("darkmode");
+          }
+        } else {
+          elements[i].classList.add("darkmode");
+        }
+      }
+    }
+
+    switchToLightMode() {
+      const {elements, modeBtn} = this.getDOMElements();
+      this.setLocalStorageLightMode();
+
+      modeBtn.textContent = "🌞";
+
+      for (let i = 0; i < elements.length; i++) {
+        if (elements[i].length > 0) {
+          for (const element of elements[i]) {
+            element.classList.remove("darkmode");
+          }
+        } else {
+          elements[i].classList.remove("darkmode");
+        }
+      }
+    }
+  }
+
+
+  /*************************************************
+  *************************************************/
+
+
   const url = "./data/data.json";
   const jsonData = new JsonData(url);
 
@@ -239,6 +344,8 @@
     createDom.createPrefix();
     const setSpecificSubject = new SetSpecificSubject(prefixDom.value);
     setSpecificSubject.checkType();
+    const darkmode = new DarkMode();
+    darkmode.judgeInitMode();
   }
 
   initialize();
@@ -287,6 +394,11 @@
     copy.setClipboard();
   });
 
+  const modeBtn = document.getElementById("btn-mode");
 
+  modeBtn.addEventListener("click", () => {
+    const darkmode = new DarkMode();
+    darkmode.judgeEvent();
+  });
 
 } // end

dist/index.html

@@ -13,6 +13,10 @@ input[type="number"]::-webkit-inner-spin-button {
   @apply font-mono text-gray-700 transition;
 }
 
+.body.darkmode {
+  @apply text-gray-300 bg-slate-900;
+}
+
 .btn-mode {
   @apply fixed bottom-3 right-3 text-3xl cursor-pointer hover:opacity-70 active:translate-y-0.5 select-none transition;
 }
@@ -33,6 +37,10 @@ input[type="number"]::-webkit-inner-spin-button {
   @apply block w-1/4 rounded-md border-2 border-solid border-gray-300 bg-gray-100 px-1 py-1 text-lg tracking-widest transition hover:opacity-70 active:translate-y-0.5 select-none;
 }
 
+.btn-reset.darkmode {
+  @apply bg-slate-800 border-slate-600;
+}
+
 .form-wrapper {
   @apply mt-8;
 
@@ -53,10 +61,20 @@ input[type="number"]::-webkit-inner-spin-button {
     @apply mt-2 block w-full resize-none rounded-md border-2 border-solid px-2 py-1;
   }
 
+  input.darkmode,
+  select.darkmode,
+  .input-textarea.darkmode {
+    @apply border-slate-600 bg-slate-800;
+  }
+
   .output-textarea {
     @apply mt-2 block w-full resize-none rounded-md border-2 border-solid bg-gray-100 px-2 py-1;
   }
 
+  .output-textarea.darkmode {
+    @apply border-slate-600 bg-slate-700;
+  }
+
   .description {
     @apply mt-2 text-sm opacity-60;
   }

dist/js/main.js

@@ -5,11 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Commit Easily</title>
-  <!-- <script src="https://cdn.tailwindcss.com"></script> -->
   <link rel="stylesheet" href="css/style.css" />
 </head>
 
-<body class="body">
+<body class="body" id="body">
 
   <div class="btn-mode" id="btn-mode">
     🌞