colors and modules

6 files changed, 25 insertions, 11 deletions

diff --git a/app/check.js b/app/check.js
index 294e02a..528471f 100644
--- a/app/check.js
+++ b/app/check.js
@@ -1,4 +1,6 @@
-function checkboxButton(id) {
+import { jsList } from "./list.js";
+
+export function checkboxButton(id) {
     const checkboxElement = document.createElement('i');
 
     checkboxElement.classList.add('fa-regular');
@@ -18,7 +20,7 @@ function checkElement(element, id) {
         element.classList.remove('fa-square');
         element.classList.add('fa-square-check');
         element.parentNode.style.textDecoration = 'line-through';
-        element.parentNode.style.opacity = '0.7';
+        element.parentNode.style.opacity = '0.6';
         id = jsList.findIndex(el => el.id == id)
         jsList[id].done = true;
         localStorage.setItem('jsList', JSON.stringify(jsList));
diff --git a/app/delete.js b/app/delete.js
index 1edebcb..1f7de72 100644
--- a/app/delete.js
+++ b/app/delete.js
@@ -1,4 +1,6 @@
-function deleteButton(id) {
+import { jsList } from "./list.js";
+
+export function deleteButton(id) {
     const deleteButtonElement = document.createElement('i');
 
     deleteButtonElement.classList.add('delete');
diff --git a/app/edit.js b/app/edit.js
index 1587882..e2f5e34 100644
--- a/app/edit.js
+++ b/app/edit.js
@@ -1,4 +1,6 @@
-function editButton(id) {
+import { jsList } from "./list.js";
+
+export function editButton(id) {
     const buttonElement = document.createElement('i');
     buttonElement.classList.add('edit');
 
diff --git a/app/list.js b/app/list.js
index 9042dd3..aea8949 100644
--- a/app/list.js
+++ b/app/list.js
@@ -1,6 +1,10 @@
+import { deleteButton } from "./delete.js";
+import { editButton } from "./edit.js";
+import { checkboxButton } from "./check.js";
+
 const form = document.getElementById('form');
 const list = document.getElementById('list');
-const jsList = JSON.parse(localStorage.getItem('jsList')) || []
+export const jsList = JSON.parse(localStorage.getItem('jsList')) || []
 
 jsList.forEach(element => {
     createElement(element);
diff --git a/index.html b/index.html
index 4c55140..55a1da5 100644
--- a/index.html
+++ b/index.html
@@ -20,9 +20,6 @@
             </ul>
         </div>
     </main>
-    <script src='app/edit.js'></script>
-    <script src='app/delete.js'></script>
-    <script src='app/check.js'></script>
-    <script src='app/list.js'></script>
+    <script src='app/list.js' type="module"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/main.css b/main.css
index 8c67c4d..8baa89a 100644
--- a/main.css
+++ b/main.css
@@ -1,6 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 
 body {
+    background-color: #eee;
+    color: #111;
     font-family: 'Roboto', sans-serif;
     text-align: center;
 }
@@ -21,17 +23,22 @@ h1 {
     min-width: 15vw;
     max-width: 30vw;
     overflow: auto;
-    border: 5px solid black;
+    border: 5px solid #111;
     padding: 2rem 6rem;
 }
 
+input {
+    background-color: #eee;
+    color: #111;
+}
+
 .add {
     font-size: 1.2em;
     margin-bottom: 10px;
 }
 
 .item {
-    border: 3px solid black;
+    border: 3px solid #111;
     margin: 0.3rem;
     padding: 0.4em 3em;
     list-style-type: none;