cleaning code

dejotb · May 18, 2022 · 9b3e158 · 9b3e158
1 parent 4d6658b
commit 9b3e158
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 115 deletions.
diff --git a/app.js b/app.js
@@ -15,7 +15,7 @@ class Note {
 // APPLICATION ARCHITECTURE
 const containerMain = document.querySelector('.container');
 const containerSettings = document.querySelector('.container__settings');
-const modalContainer = document.querySelector('.modal__container');
+const modalContainer = document.querySelector('.container__modal');
 const modalInput = document.querySelector('.modal__input');
 const listItems = document.querySelector('.list__items');
 const buttonCreateNewNote = document.querySelector('.button--cta');
@@ -131,7 +131,7 @@ class App {
  // checks what to do with a clicked part of a note
  _handleNote(e) {
  if (
- e.target.classList.contains('modal__container') ||
+ e.target.classList.contains('container__modal') ||
  e.target.closest('.button__alert--save--exit')
  ) {
  this._handleModalVisibility();
@@ -340,13 +340,7 @@ class App {
 
  // handles app settings - delete all button
  _handleSettings(e) {
- if (
- e.target.closest('.button__settings') ||
- e.target.closest('.button__settings--delete-all') ||
- e.target.closest('.button__settings--theme') ||
- e.target.closest('.button__quote')
- // e.target.closest('.setting')
- ) {
+ if (e.target.closest('.button__settings') || e.target.closest('.setting')) {
  buttonSettings.classList.toggle('rotate');
  settingsOptions.classList.toggle('translateX');
  }

diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
  <link rel="stylesheet" href="style.css" />
 
  <script defer src="app.js"></script>
- <title>Notes & Quotes</title>
+ <title>Notes 'n Quotes</title>
  </head>
  <body>
  <div class="container__settings">
@@ -26,7 +26,7 @@
  <img src="img/quote.svg" alt="" title="show quote of a day" />
  </button>
  <button class="setting button__settings--theme">
- <img src="img/roller.svg" alt="" title="change style" />
+ <img src="img/roller.svg" alt="" title="change background" />
  </button>
  <button class="setting button__settings--delete-all">
  <img src="img/bin.svg" alt="" title="delete all Notes" />
@@ -56,7 +56,7 @@
  <ul class="list__items"></ul>
  </div>
  </main>
- <div class="modal__container hidden">
+ <div class="container__modal hidden">
  <ul class="modal__input"></ul>
  </div>
 

diff --git a/style.css b/style.css
@@ -7,13 +7,12 @@
  --fs-600: clamp(3.25rem, 6vw + 1rem, 4rem);
  --fs-500: 2rem;
  --fs-400: 1.8rem;
- --color-font: #11347d;
- --color-primary: #ffc600;
  --color-green: #3cba92;
  --color-yellow: #fdd01b;
  --color-blue: #0074d9;
  --color-red: #db3445;
  --color-white: #dcd9d4;
+ --color-black: #000000;
  --color-grey: 54, 54, 54;
  --color-theme: #0074d9;
  --z-index-negative: -1;
@@ -140,26 +139,46 @@ fieldset {
  position: relative;
 }
 
+/* container styling */
+
 .main {
  display: grid;
  grid-gap: 1rem;
  justify-items: center;
  align-items: flex-start;
 }
 
-/* container styling */
-
 .container {
  display: grid;
  min-height: auto;
  justify-content: center;
  transition: opacity 0.5s;
 }
 
+.container__settings {
+ position: fixed;
+ display: grid;
+ grid-gap: 1rem;
+ z-index: var(--z-index-popup);
+}
+
+.container__modal {
+ position: fixed;
+ background-color: rgba(var(--color-grey), 0.55);
+ inset: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ opacity: 1;
+ z-index: var(--z-index-modal);
+}
+
+/* list styling */
+
 .list__items {
  display: grid;
- grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
+ grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: flex-start;
 }
@@ -170,7 +189,6 @@ fieldset {
  border-radius: 14px;
  padding: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
- transition: opacity 10s;
 }
 
 .list__item--rendered {
@@ -249,45 +267,46 @@ fieldset {
  align-self: flex-end;
 }
 
-.container__settings {
- position: fixed;
- display: grid;
- z-index: var(--z-index-popup);
-}
-
-.setting {
- height: auto;
- margin: 0.5rem;
- width: 2rem;
- /* transition: all 0.5s ease-in-out; */
-}
-
-/* .settings__options, */
 .button__settings {
  height: auto;
  width: 4rem;
  margin: 0.5rem;
  transition: all 0.5s ease-in-out;
 }
 
-.settings__options {
- display: grid;
- grid-gap: 0.5rem;
- transition: transform 0.3s ease-in-out;
- transform: translateX(-100%);
- z-index: -1;
+.alert__buttons {
+ width: 100%;
+ display: flex;
+ grid-gap: 2rem;
+ justify-content: center;
 }
 
-.hover {
- animation: scale 0.5s ease-in-out forwards;
+.button--yes,
+.button--no {
+ height: 3rem;
+ width: 6rem;
+ border: 1px var(--color-black) solid;
+ border-radius: 5px;
 }
 
-.rotate {
- transform: rotate(360deg);
+.button--yes {
+ background-color: var(--color-red);
 }
 
-.translateX {
- transform: translateX(0);
+/* .settings__options, */
+
+.settings__options {
+ display: grid;
+ grid-gap: 0.8rem;
+ transition: transform 0.3s ease-in-out;
+ transform: translateX(-100%);
+ z-index: var(--z-index-negative);
+}
+
+.setting {
+ height: auto;
+ margin: 0.5rem;
+ width: 2.5rem;
 }
 
 /* Footer */
@@ -299,60 +318,12 @@ fieldset {
  display: grid;
  justify-content: center;
  font-family: var(--ff-display);
- font-size: 3rem;
+ font-size: var(--fs-500);
  color: #d6e5e5;
 }
 
-.quote {
- font-family: var(--ff-display);
- font-size: 2.5rem;
-}
-
-.quote__author {
- font-family: var(--ff-primary);
- font-size: 1.5rem;
- font-style: italic;
-}
-
-/* animations */
-
-.fade-out-in {
- animation: fade 1s;
-}
-
-@keyframes fade {
- 0%,
- 100% {
- opacity: 1;
- }
- 20% {
- opacity: 0;
- }
-}
-
-@keyframes scale {
- 0% {
- transform: scale(1);
- }
-
- 50% {
- transform: scale(0.9);
- }
-}
-
 /* modal form */
 
-.modal__container {
- position: fixed;
- background-color: rgba(var(--color-grey), 0.55);
- inset: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- opacity: 1;
- z-index: var(--z-index-modal);
-}
-
 .modal__alert {
  position: relative;
  display: grid;
@@ -362,33 +333,19 @@ fieldset {
  min-height: 15rem;
  padding: 1rem;
  background-color: var(--color-white);
- border: 1px black solid;
+ border: 1px var(--color-black) solid;
  border-radius: 5px;
 }
 
-.alert__buttons {
- width: 100%;
- display: flex;
- grid-gap: 2rem;
- justify-content: center;
-}
-
-.button--yes,
-.button--no {
- height: 3rem;
- width: 6rem;
- border: 1px black solid;
- border-radius: 5px;
-}
-
-.button--yes {
- background-color: var(--color-red);
+.quote {
+ font-family: var(--ff-display);
+ font-size: 2.5rem;
 }
 
-.hidden {
- opacity: 0;
- display: none;
- transition: opacity 1s;
+.quote__author {
+ font-family: var(--ff-primary);
+ font-size: 1.5rem;
+ font-style: italic;
 }
 
 .instruction--create,
@@ -424,6 +381,52 @@ fieldset {
  width: 18rem;
 }
 
+/* utility classes */
+
+.hidden {
+ opacity: 0;
+ display: none;
+ transition: opacity 1s;
+}
+
+.hover {
+ animation: scale 0.5s ease-in-out forwards;
+}
+
+.rotate {
+ transform: rotate(360deg);
+}
+
+.translateX {
+ transform: translateX(0);
+}
+
+.fade-out-in {
+ animation: fade 1s;
+}
+
+/* animations */
+
+@keyframes fade {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 20% {
+ opacity: 0;
+ }
+}
+
+@keyframes scale {
+ 0% {
+ transform: scale(1);
+ }
+
+ 50% {
+ transform: scale(0.9);
+ }
+}
+
 /* media queries */
 
 @media screen and (min-width: 700px) {