Modal events fixed.

emilchr · Jul 5, 2023 · 683748b · 683748b
1 parent 1552415
commit 683748b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -20,20 +20,20 @@
     <label class="switch" for="toggle">
         <input type="checkbox" id="toggle">
         <span class="slider"></span>
-      </label>
+    </label>
 </div>
 <div id="dark_layout" class="layout-container">
     <header>      
         <section class="logo-container"><h1 id="logo">Emil Westrum</h1></section>
         <nav>
         <div class="navigation-items">
             <!-- <div id="about-button" class="navigation-item"><a href="#">About me</a></div> -->
-            <div id="contact-button" class="navigation-item"><a href="#" >Contact</a></div>
+            <div id="contact-button" class="navigation-item" >Contact</div>
         </ul>
         </nav>
     </header>
     <main>     
-        <section id="contact" class="contact" style="display: none;">
+        <section id="contact" class="contact">
             <div class="contact-container">                
                 <div class="contact-text">
                     <div class="contact-title"><h2><i class="fa-solid fa-square-pen"></i>Contact</h2></div>

diff --git a/resources/app.js b/resources/app.js
@@ -17,7 +17,7 @@ checkbox.checked = false; // resets checkbox each refresh
 
 let i;
 const darkMode = () => {
-    if (checkbox.checked === true){
+    if (checkbox.checked === true) {
         fractionalBackground.className = 'fractional-background_dark';
         toggleMode.className = 'toggle-mode_dark';
         layoutContainer.className = 'layout-container_dark dark_text';
@@ -29,7 +29,7 @@ const darkMode = () => {
         };
         i++
 
-    } else{
+    } else {
         fractionalBackground.className = 'fractional-background';
         toggleMode.className = 'toggle-mode';
         layoutContainer.className = 'layout-container';
@@ -58,35 +58,26 @@ if (dateToday.getMonth() <= birthday.getMonth() && dateToday.getDate() <= birthd
 }
 
 document.getElementById('years-old').innerHTML = age; // Prints age to index.html
-contactModal.style.display === 'none';
+//contactModal.style.display === 'none';
 
 // Contact modal
 const contactPopUp = () => { // shows or hides contact modal
 
-    if(contactModal.style.display === 'none'){
+    contactModal.classList.toggle('show')
+    contactButton.classList.toggle('button-on')
 
-        contactModal.style.display = 'block';
-        contactButton.style.borderLeft = "3px solid rgba(0, 187, 255, 0.342)";
-        contactButton.style.borderBottom = "4px solid rgba(0, 187, 255, 0.342)";  
-
-        if (contactModal.style.display === 'block'){
-            //layoutContainer.addEventListener('click', () => {contactModal.style.display = 'none'});
-        }
-
-    } else {
+}
 
-        contactModal.style.display = 'none';
-        contactButton.style.borderLeft = "3px solid var(--background-color)";
-        contactButton.style.borderBottom = "4px solid var(--background-color)";
+contactButton.addEventListener('click', contactPopUp);
 
+window.onclick = (event) => {
+    if (!event.target.matches('.navigation-item')){
+        if (contactModal.classList.contains('show')) {
+            contactModal.classList.remove('show');
+            contactButton.classList.remove('button-on')
+        }
     }
-
 }
-contactButton.addEventListener('click', contactPopUp);
-
-
-
-
 
 const colorPicture = () => {
     profilePic.src = "./resources/images/emilbilde.png"

diff --git a/resources/style.css b/resources/style.css
@@ -201,8 +201,15 @@ nav .navigation-item{
     border-left: 3px solid var(--background-color);
     border-bottom: 4px solid var(--background-color);
 
+    cursor: pointer;
+
     --background-color: rgb(247, 247, 247);
 }
+
+.button-on {
+    border-left: 3px solid rgba(0, 187, 255, 0.342) !important;
+    border-bottom: 4px solid rgba(0, 187, 255, 0.342) !important; 
+}
 .navigation-item::before{
     content: "";
     position: absolute;
@@ -273,6 +280,10 @@ nav .navigation-item_dark a:hover{
     transform: scaleX(1);
 
 }
+
+.show {
+    display: block !important;
+}
 /* Main content*/
 main{
     grid-area: main;