added quote modal

dejotb · May 17, 2022 · 7e5e26c · 7e5e26c
1 parent ec873db
commit 7e5e26c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/app.js b/app.js
@@ -343,7 +343,8 @@ class App {
  if (
  e.target.closest('.button__settings') ||
  e.target.closest('.button__settings--delete-all') ||
- e.target.closest('.button__settings--theme')
+ e.target.closest('.button__settings--theme') ||
+ e.target.closest('.button__quote')
  ) {
  buttonSettings.classList.toggle('rotate');
  settingsOptions.classList.toggle('translateX');
@@ -352,12 +353,16 @@ class App {
  this._reset();
  }
  if (e.target.closest('.button__settings--theme')) {
- this._renderThemeSelectionText();
+ this._renderThemeSelectionHTML();
  this._changeTheme(e);
  }
+ if (e.target.closest('.button__quote')) {
+ console.log('quote');
+ this._generateQuote();
+ }
  }
 
- _renderThemeSelectionText() {
+ _renderThemeSelectionHTML() {
  modalContainer.classList.remove('hidden');
  const html = `
  <div class='modal__alert'>
@@ -417,6 +422,20 @@ class App {
  this._setLocalStorage('theme', this.#themeColor);
  });
  }
+
+ _generateQuote() {
+ modalContainer.classList.remove('hidden');
+ const html = `
+ <div class='modal__alert'>
+ <button class="button button__alert--save--exit" type="submit" title="save"> <img src="img/arrow.svg" alt="save note"></button>
+ <p class="quote">„Silence is the sleep that nourishes wisdom”.
+ <span class="quote__author">olaf porotsds</span>
+ </p>
+ </div>`;
+ modalContainer.insertAdjacentHTML('afterbegin', html);
+ }
+
+ _getQuote() {}
 }
 
 const app = new App();
diff --git a/index.html b/index.html
@@ -22,6 +22,9 @@
  <img src="img/gear.png" alt="" />
  </button>
  <div class="settings__options">
+ <button class="button__quote">
+ <img src="img/roller.svg" alt="" title="quote of a day" />
+ </button>
  <button class="button__settings--theme">
  <img src="img/roller.svg" alt="" title="change style" />
  </button>
@@ -58,10 +61,7 @@
  </div>
 
  <footer class="footer">
- <p class="footer__quote">„Silence is the sleep that nourishes wisdom”.</p>
- <p class="footer__author">olaf porotsds</p>
-
- <!-- <p>Notes</p> -->
+ <p>Notes</p>
  </footer>
  </body>
 </html>
diff --git a/style.css b/style.css
@@ -301,16 +301,17 @@ fieldset {
  line-height: 0.9;
  display: grid;
  justify-content: center;
- /* font-size: 2.5rem; */
+ font-family: var(--ff-display);
+ font-size: 4rem;
  color: #d6e5e5;
 }
 
-.footer__quote {
+.quote {
  font-family: var(--ff-display);
  font-size: 3rem;
 }
 
-.footer__author {
+.quote__author {
  font-family: var(--ff-primary);
  font-size: 1.2rem;
 }
@@ -351,7 +352,7 @@ fieldset {
  justify-content: center;
  align-items: center;
  opacity: 1;
- z-index: 99;
+ z-index: var(--z-index-modal);
 }
 
 .modal__alert {