From 18c29eb3d6f382a5031cef8a66149035fd97e35f Mon Sep 17 00:00:00 2001 From: bwhenn Date: Tue, 4 Jun 2024 17:18:24 -0700 Subject: [PATCH] styling updates --- assets/icons/edit.png | Bin 0 -> 6624 bytes assets/icons/more.png | Bin 0 -> 4729 bytes assets/scripts/ContactPage.js | 68 ++++++++++++++++++++++++++++++---- assets/scripts/Quote.js | 58 +++++++++++++++++++++++++++++ assets/styles/contactPage.css | 62 ++++++++++++++++++++++++++++++- assets/styles/homepage.css | 27 ++++++++++---- contactPage.html | 25 +++++++++---- index.html | 13 ++++--- 8 files changed, 222 insertions(+), 31 deletions(-) create mode 100644 assets/icons/edit.png create mode 100644 assets/icons/more.png create mode 100644 assets/scripts/Quote.js diff --git a/assets/icons/edit.png b/assets/icons/edit.png new file mode 100644 index 0000000000000000000000000000000000000000..100b27f74f6498ce9cd949c8d9b826294178d3cf GIT binary patch literal 6624 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 literal 0 HcmV?d00001 diff --git a/assets/icons/more.png b/assets/icons/more.png new file mode 100644 index 0000000000000000000000000000000000000000..0ba274cfeb891bb4b8fcde9138b8afc7264dd79c GIT binary patch literal 4729 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 cyapz99<4Github
LinkedIn
Phone #: ${contact.phone}
- Role: ${contact.role}
- Other: ${contact.other}
`; + Role: ${contact.role}
`; 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 ='×'; + deleteButton.innerHTML ='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 ='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 ='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"; + } + }; }); \ No newline at end of file diff --git a/assets/scripts/Quote.js b/assets/scripts/Quote.js new file mode 100644 index 0000000..176d374 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/assets/styles/contactPage.css b/assets/styles/contactPage.css index e9e20df..b8a3825 100644 --- 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; +} \ No newline at end of file diff --git a/assets/styles/homepage.css b/assets/styles/homepage.css index c7901d3..d1dc146 100644 --- 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,9 +53,7 @@ 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 */ @@ -62,11 +61,16 @@ body, html { 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 index e6d78f9..19260dc 100644 --- a/contactPage.html +++ b/contactPage.html @@ -49,14 +49,14 @@

Add Contact Information






@@ -66,6 +66,15 @@

Add Contact Information

+ + + \ No newline at end of file diff --git a/index.html b/index.html index 8fd6c0f..501e131 100644 --- a/index.html +++ b/index.html @@ -47,13 +47,12 @@
- + - - - - - +
+

+

+
@@ -105,6 +104,8 @@

Task Manager

+ +