styling updates

cse110-sp24-group31 · Jun 5, 2024 · 18c29eb · 18c29eb
1 parent 250d0f3
commit 18c29eb
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 31 deletions.
diff --git a/assets/icons/edit.png b/assets/icons/edit.png
diff --git a/assets/icons/more.png b/assets/icons/more.png
diff --git a/assets/scripts/ContactPage.js b/assets/scripts/ContactPage.js
@@ -8,7 +8,6 @@ function loadContacts() {
       contacts = JSON.parse(storedConts);
     }
 }
-
 // Save an entry to local storage
 function saveContacts() {
     localStorage.setItem('contacts', JSON.stringify(contacts));
@@ -47,24 +46,66 @@ function renderContacts() {
                                 <a href="${contact.github}">Github</a><br>
                                 <a href="${contact.linkedin}">LinkedIn</a><br>
                                 <strong>Phone #: </strong>${contact.phone}<br>
-                                <strong>Role: </strong>${contact.role}<br>
-                                <strong>Other: </strong>${contact.other}<br>`;
+                                <strong>Role: </strong>${contact.role}<br>`;
         contactCard.appendChild(infoContainer);
 
+
+        const buttonDiv = document.createElement('div');
+        buttonDiv.className = 'button-container';
+
+
         // Create a delete button for each task
         const deleteButton = document.createElement('button');
-        deleteButton.innerHTML ='&times;';
+        deleteButton.innerHTML ='<img class="buttons" src="assets/icons/deleteIcon.png" alt="delete button">';
         deleteButton.onclick = function () {
-        deleteContact(contact.id);
-        contactCard.remove();
+            deleteContact(contact.id);
+            contactCard.remove();
         };
-        contactCard.appendChild(deleteButton);
+        buttonDiv.appendChild(deleteButton);
+
+        // View more button 
+        const viewOther = document.createElement('button');
+        viewOther.className = "view-more-btn";
+        viewOther.innerHTML ='<img class="buttons" src="assets/icons/more.png" alt="more button">';
+        viewOther.setAttribute('other-info', contact.other);
+        viewOther.addEventListener('click', function() {
+            const moreInfo = this.getAttribute('other-info');
+            openModalWithText(moreInfo);
+        });
+        buttonDiv.appendChild(viewOther);
+
+        // Edit button 
+        const edit = document.createElement('button');
+        edit.className = "edit-btn";
+        edit.textContent = "Edit";
+        edit.innerHTML ='<img class="buttons" src="assets/icons/edit.png" alt="edit button">';
+        edit.addEventListener('click', function() {
+            document.getElementById('name').value = contact.name;
+            document.getElementById('gender').value = contact.gender;
+            document.getElementById('github').value = contact.github;
+            document.getElementById('linkedin').value = contact.linkedin;
+            document.getElementById('email').value = contact.value;
+            document.getElementById('phone').value = contact.phone;
+            document.getElementById('role').value = contact.role;
+            document.getElementById('other').value = contact.other;
+            deleteContact(contact.id);
+            contactCard.remove();
+        });
+        buttonDiv.appendChild(edit);
+
+        contactCard.appendChild(buttonDiv);
 
         contactContainer.appendChild(contactCard);
         document.getElementById('contact-form').reset()
     }); 
 }
 
+function openModalWithText(text) {
+    document.getElementById('moreText').textContent = "";
+    document.getElementById('moreText').textContent = text;
+    document.getElementById('viewMoreModal').style.display = "block";
+}
+
 function deleteContact(id) {
     contacts = contacts.filter(cont => cont.id !== id);
     saveContacts();
@@ -103,4 +144,17 @@ document.addEventListener('DOMContentLoaded', () => {
         saveContacts();
         renderContacts();
     });
+
+    const modal = document.getElementById('viewMoreModal');
+    const closeBtn = document.querySelector('.modal .close');
+
+    closeBtn.onclick = function() {
+        modal.style.display = "none";
+    };
+
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.visibility = "none";
+        }
+    };
 });
diff --git a/assets/scripts/Quote.js b/assets/scripts/Quote.js
@@ -0,0 +1,58 @@
+const category = 'inspirational';
+const apiKey = '0kYRIiEg1U21YoGtDo5eQQ==5UQuSZMfQwaOH6sT'; 
+const url = `https://api.api-ninjas.com/v1/quotes?category=${category}`;
+const cacheKey = 'quotesCache';
+const cacheExpiryKey = 'quotesCacheExpiry';
+const oneDay = 24 * 60 * 60 * 1000; // One day in milliseconds
+
+function fetchQuotes() {
+    fetch(url, {
+    method: 'GET',
+    headers: {
+        'X-Api-Key': apiKey,
+        'Content-Type': 'application/json'
+    }
+    })
+    .then(response => {
+        if (!response.ok) {
+        return response.text().then(text => { throw new Error(text) });
+        }
+        return response.json();
+    })
+    .then(result => {
+        // Save the result to localStorage
+        localStorage.setItem(cacheKey, JSON.stringify(result));
+        // Save the current timestamp to localStorage
+        localStorage.setItem(cacheExpiryKey, Date.now().toString());
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+}   
+
+
+function getCachedQuotes() {
+    const cachedData = localStorage.getItem(cacheKey);
+    const cacheExpiry = localStorage.getItem(cacheExpiryKey);
+
+    if (cachedData && cacheExpiry) {
+        const expiryTime = parseInt(cacheExpiry, 10);
+        if (Date.now() - expiryTime < oneDay) {
+        // Cache is still valid
+        console.log('Using cached data:', JSON.parse(cachedData));
+        document.getElementById('text').innerHTML = JSON.parse(cachedData)[0].quote;
+        document.getElementById('author').innerHTML = JSON.parse(cachedData)[0].author;
+        return;
+        }
+    }
+
+    // Cache is expired or doesn't exist, fetch new data
+    fetchQuotes();
+
+    cachedData = localStorage.getItem(cacheKey);
+    console.log('Using cached data:', JSON.parse(cachedData));
+    document.getElementById('text').innerHTML = JSON.parse(cachedData)[0].quote;
+}
+
+// Call the function to get quotes
+getCachedQuotes();
diff --git a/assets/styles/contactPage.css b/assets/styles/contactPage.css
@@ -1,5 +1,5 @@
 :root {
-   --bar-color: #4b0082; /* Indigo color for the navigation bar */
+   --hover-color: #ffecb3;
 }
 
 body, html {
@@ -35,6 +35,24 @@ body, html {
    transition: color 0.2s;
 }
 
+button {
+   background-color: transparent;
+   border: none;
+}
+
+.buttons {
+   width: 20px;
+   height: 20px;
+   margin-bottom: 10px;  /* Adds space between the buttons */ 
+}
+
+button:hover {
+   transform: scale(1.10);
+}
+
+a:hover {
+   color: var(--hover-color);
+}
 
 .container {
    display: flex;
@@ -54,10 +72,11 @@ body, html {
 }
 
 
+
 .contact-card {
    display: flex;
    align-items: center;
-   width: 350px;
+   width: 370px;
    height: 250px;
    border-radius: 10px;
    background-color: rgba(217, 207, 222, 0.46);
@@ -74,6 +93,8 @@ body, html {
    display: flex;
    flex-direction: column;
    justify-content: center;
+   margin-left: 10px;
+   margin-right: 10px;
 }
 
 #add-new-contact {
@@ -148,3 +169,40 @@ input {
 	from {background-position:0 0;}
 	to {background-position:10000px 0;}
 }
+
+
+.modal {
+   display: none;
+   position: fixed;
+   z-index: 3;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   overflow: auto;
+   background-color: rgb(0,0,0);
+   background-color: rgba(0,0,0,0.4);
+}
+
+.modal-content {
+   background-color: #fefefe;
+   margin: 15% auto;
+   border-radius: 20px;
+   padding: 20px;
+   border: 1px solid #888;
+   width: 80%;
+}
+
+.close {
+   color: #aaa;
+   float: right;
+   font-size: 28px;
+   font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+   color: black;
+   text-decoration: none;
+   cursor: pointer;
+}
diff --git a/assets/styles/homepage.css b/assets/styles/homepage.css
@@ -3,6 +3,7 @@
     --content-color: #2c2c3d76; /* Darker content area */
     --card-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white for cards */
     --hover-color: #ffecb3; /* Light yellow for hover effects */
+    --quote-color: #ffecb3 
 }
 
 /* ENTIRE PAGE SELECTORS */
@@ -52,21 +53,24 @@ body, html {
 
 /* MAIN SECTION SELECTORS */
 #addProjButton {
-    position: fixed;
-    top: 90px; /* Adjust this value to position the button lower or higher */
-    left: 20px; /* Adjust this value to position the button more to the right or left */
+    position: relative;
     color: white; /* Button text color */
     border: none;
     font-size: 36px; /* Increase the size of the plus sign */
     font-weight: bold; /* Make the plus sign bold */
     cursor: pointer;
     background-color: transparent; /* Transparent background */
     transition: background-color 0.3s;
-    z-index: 1000; /* Ensure it stays on top of other elements */
-    display: flex; /* Center the plus sign */
-    align-items: center; /* Center the plus sign */
-    justify-content: center; /* Center the plus sign */
-    line-height: 1; /* Adjust line height */
+    z-index: 4; 
+}
+
+.add-project-card {
+    position: absolute; /* Positioning relative to nearest positioned ancestor */
+    top: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    margin-right: 15px;
 }
 
 #addProjButton:hover {
@@ -96,6 +100,13 @@ body, html {
     gap: 10px;
 }
 
+.inspiration {
+    background-color: var(--quote-color);
+    padding-left: 20px;
+    padding-right: 20px;
+    border-radius: 10px;
+}
+
 .card:hover {
     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
     transform: translateY(-5px);

diff --git a/contactPage.html b/contactPage.html
@@ -49,14 +49,14 @@ <h3>Add Contact Information</h3>
                     <input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="xxx-xxx-xxxx"><br>
                     <label for="role">Role:</label><br>
                     <select id="role" name="role"><br>
-                        <option value="analyst">Analyst</option>
-                        <option value="hr">HR</option>
-                        <option value="design">Designer</option>
-                        <option value="developer">Developer</option>
-                        <option value="product">Product Manager</option>
-                        <option value="sales">Sales</option>
-                        <option value="manager">Manager</option>
-                        <option value="cto">CTO</option>
+                        <option value="Analyst">Analyst</option>
+                        <option value="HR">HR</option>
+                        <option value="Design">Designer</option>
+                        <option value="Developer">Developer</option>
+                        <option value="Product">Product Manager</option>
+                        <option value="Sales">Sales</option>
+                        <option value="Manager">Manager</option>
+                        <option value="CTO">CTO</option>
                     </select> <br>
                     <label for="other">Other Information:</label><br>
                     <textarea id="other" name="other" rows="4" cols="30" placeholder="Enter any additional information here"></textarea><br>
@@ -66,6 +66,15 @@ <h3>Add Contact Information</h3>
         </div>
     </div>
 
+
+    <div id="viewMoreModal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h2>Additional Information</h2>
+            <p id="moreText"></p>
+        </div>
+    </div>
+
     <script src="assets/scripts/ContactPage.js"></script>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -47,13 +47,12 @@
       </div>
       <div class="sidebar">
 
-          <iframe src="calendar.html" width="100%" style="height: calc(100% );" frameborder="0"></iframe>
+          <iframe src="calendar.html" width="100%" height="600px" frameborder="0"></iframe>
 
-        <!-- <div class="sidebar-sec accomplishments"> -->
-          <!-- Accomplishments Section  TODO -->
-          <!-- <iframe src="calendar.html" width="100%" height="50%" frameborder="0"></iframe> -->
-
-        <!-- </div> -->
+        <div class="inspiration">
+            <p id="text"></p>
+            <p><strong id="author"></strong></p>
+        </div>
       </div>
     </div>
 
@@ -105,6 +104,8 @@ <h2>Task Manager</h2>
     </div>
   </div>
 
+
+  <script src="assets/scripts/Quote.js"></script>
 </body>
 
 </html>