diff --git a/assets/icons/edit.png b/assets/icons/edit.png
new file mode 100644
index 0000000..100b27f
Binary files /dev/null and b/assets/icons/edit.png differ
diff --git a/assets/icons/more.png b/assets/icons/more.png
new file mode 100644
index 0000000..0ba274c
Binary files /dev/null and b/assets/icons/more.png differ
diff --git a/assets/scripts/ContactPage.js b/assets/scripts/ContactPage.js
index 784f1e0..455024a 100644
--- 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() {
Github
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 ='
';
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 ='
';
+ 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.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
+
+
+
+
×
+
Additional Information
+
+
+