From 81cd1cdc466f7bd72487c0cd9a2c29b82e3c7731 Mon Sep 17 00:00:00 2001 From: tirani427 Date: Wed, 31 Jul 2024 18:25:33 -0700 Subject: [PATCH 01/19] finished meeting notes + started user page css (this isn't finished yet). --- admin/meetings/07312024-midweek-meeting-3.md | 15 ++++++++++ source/css/index.css | 2 +- source/css/main.css | 9 ++++++ source/css/user-page.css | 8 +++++ source/index.html | 2 +- source/user-page.html | 31 +++++++++++++++----- 6 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 admin/meetings/07312024-midweek-meeting-3.md create mode 100644 source/css/user-page.css diff --git a/admin/meetings/07312024-midweek-meeting-3.md b/admin/meetings/07312024-midweek-meeting-3.md new file mode 100644 index 0000000..a3d8997 --- /dev/null +++ b/admin/meetings/07312024-midweek-meeting-3.md @@ -0,0 +1,15 @@ +# [Team Name]: Sprint 2 Review
07/31/2024 6:00pm - 7:00pm + +## Members Present +- Vinod +- Gowtham +- Tia + +## Next Meeting: Monday, August 5, 2024 +- Since a few of us have finals on Saturday, we're shifting the meeting back to Monday, August 5, 2024. + +## Check In +- More progress has been made with MongoDB. +- Landing Page officially done (for now) +- Other pages have been assigned. + - Please message in the Discord if you cannot work on your page! We'll adjust accordingly to help out! diff --git a/source/css/index.css b/source/css/index.css index 856460e..26d1242 100644 --- a/source/css/index.css +++ b/source/css/index.css @@ -14,7 +14,7 @@ } -.links{ +.header-links{ padding-left: 50px; display: grid; grid-template-columns: 1fr 1fr 1fr; diff --git a/source/css/main.css b/source/css/main.css index 50d386d..d25e7e8 100644 --- a/source/css/main.css +++ b/source/css/main.css @@ -75,4 +75,13 @@ header { body { padding-top: 120px; } +} + +.header-links{ + padding-left: 50px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + column-gap: 50px; + + font-size: 165%; } \ No newline at end of file diff --git a/source/css/user-page.css b/source/css/user-page.css new file mode 100644 index 0000000..c99111f --- /dev/null +++ b/source/css/user-page.css @@ -0,0 +1,8 @@ +.all-text{ + margin-left: 20px; +} + +.user-links{ + font-size: 120%; + +} \ No newline at end of file diff --git a/source/index.html b/source/index.html index 00dea2e..517ab75 100644 --- a/source/index.html +++ b/source/index.html @@ -13,7 +13,7 @@
placeholder icon

Go Go Grocery

- - - + From 4143c263a3c4e646291d5f8a0b71d9f38ae68013 Mon Sep 17 00:00:00 2001 From: tirani427 Date: Sat, 17 Aug 2024 00:26:36 -0700 Subject: [PATCH 15/19] added some animations for images + allowed for selection of images in the side-to-side scroll thing --- source/css/make-list.css | 18 ++++++++++++++++-- source/js/make-list.js | 32 ++++++++++++++++++++++++++++++-- source/make-list.html | 12 ++++++------ 3 files changed, 52 insertions(+), 10 deletions(-) diff --git a/source/css/make-list.css b/source/css/make-list.css index d0a639c..f23b2aa 100644 --- a/source/css/make-list.css +++ b/source/css/make-list.css @@ -102,7 +102,7 @@ .column1{ #item-list{ font-weight: bold; - font-size: 125% + font-size: 150% } } @@ -127,7 +127,7 @@ h2{ margin: 10px; - font-size: 150%; + font-size: 175%; } } @@ -237,6 +237,20 @@ scroll-behavior:auto; } +.extra-images:hover{ + cursor:pointer; +} + +.image-holder img{ + transition: 1s ease; +} + +.image-holder img:hover{ + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); + transition: 1s ease; +} .groceryItem:hover{ diff --git a/source/js/make-list.js b/source/js/make-list.js index f78f6a5..f1f5e8d 100644 --- a/source/js/make-list.js +++ b/source/js/make-list.js @@ -59,6 +59,12 @@ function init(){ } }); + + document.querySelectorAll('.extra-images').forEach(function(image){ + image.addEventListener("click", () => change_main_image(image, image.src)); + }); + + } /** @@ -90,9 +96,26 @@ function change_to_description(description_button, nutrition_button, displayed_t nutrition_button.style.backgroundColor = 'rgb(206, 208, 192)'; } -function displayGroceryInformation(grocery_item, item_name){ +/** + * When an extra image is clicked on, the display switches the larger image with the extra image selected + * @param {*} image extra image selected + * @param {*} new_src new source for the main image (technically not necessary as a parameter but leave it for now.) + */ +function change_main_image(image, new_src){ + var current_main = document.getElementById("main-image"); + var old_main_src = current_main.src; + + current_main.src = new_src; + image.src = old_main_src; +} +/** + * Used to display the proper information for each grocery item selected in the list. + * @param {*} grocery_item specific item selected by the user + * @param {*} item_name Name displayed currently on the second column (technically not necessary but good to keep) + */ +function displayGroceryInformation(grocery_item, item_name){ const rest_list = document.querySelectorAll('.groceryItem'); for(var i = 0; i < rest_list.length; i++){ rest_list[i].style.backgroundColor = 'rgb(225, 228, 207)'; @@ -116,7 +139,7 @@ function displayGroceryInformation(grocery_item, item_name){ displayed_text.textContent = newName; - var extra_imgs = document.querySelectorAll("[id='extra-images']"); + var extra_imgs = document.querySelectorAll("[class='extra-images']"); for(var i = 0; i < extra_imgs.length; i++){ let file = "./assets/images/extra-" + imageName + (i+1) + "-icon.png"; @@ -130,6 +153,11 @@ function displayGroceryInformation(grocery_item, item_name){ } +/** + * does not work yet - trying to figure out how to use both jpg and png images. + * @param {*} img image whose source will be changed. + * @param {*} name specific name of the image to be added to an already-included path. + */ function tryImages(img, name){ img.src = "./assets/images/" + name + ".jpg"; img.onerror = function() { diff --git a/source/make-list.html b/source/make-list.html index d1f14b5..f0171b2 100644 --- a/source/make-list.html +++ b/source/make-list.html @@ -76,12 +76,12 @@

Banana

- - - - - - + + + + + +
From a0b9c238b70a7ccd5f55bed2cf0d24262d08423f Mon Sep 17 00:00:00 2001 From: jonathannnty <141669529+jonathannnty@users.noreply.github.com> Date: Mon, 19 Aug 2024 17:32:31 -0700 Subject: [PATCH 16/19] bouncing logo and redesign! --- source/css/user-page.css | 48 ++++++++++++++++++---- source/js/user-page.js | 86 ++++++++++++++++++++++++++++++---------- source/user-page.html | 33 +++++++++------ 3 files changed, 126 insertions(+), 41 deletions(-) diff --git a/source/css/user-page.css b/source/css/user-page.css index b082eab..a3ac08b 100644 --- a/source/css/user-page.css +++ b/source/css/user-page.css @@ -12,25 +12,31 @@ display: flex; flex-direction: row; align-content: space-between; + background-color: #FE9920; + padding-bottom: 8em; } -#emoji { - margin: 10rem; +.emoji { + /* margin: 5rem; */ height: fit-content; width: fit-content; justify-self: center; align-self: center; text-align: center; - font-size: 8em; + font-size: 7.5rem; white-space: nowrap; + position: relative; } .user-links button, .user-links button a { color: #000000; font-size: 1.5em; - margin: 1em 0em; + font-weight: 600; + margin: 0em 1em; text-decoration: none; - padding: 0.5em 1em; + text-align: center; + height: 15rem; + padding: 3em 0; } .user-greeting { @@ -43,6 +49,7 @@ .user-greeting h1 { margin-bottom: 0em; white-space: nowrap; + margin: 2rem 5rem 0; } #user-details h3 { @@ -50,23 +57,40 @@ font-weight: 400; margin-top: 0em; white-space: nowrap; + margin: 0em 3.5em; } #user-details { display: flex; flex-direction: column; align-items: flex-start; - margin: 0em 3.5em; + position: relative; } +.user-links { + display: flex; + flex-direction: row; + margin: 2rem 2rem 0; + justify-content: space-between; +} + +.green-box { + display: flex; + flex-direction: column; + margin: 0em 1em 0em; + padding: 0; + background-color: #7c9e57; + border-radius: 2em; +} + .interface-button { flex-grow: 0.75; - width: auto; + width: 45vw; height: auto; flex-wrap: nowrap; background-color: #7c9e57; border: none; - border-radius: 7.5em; + border-radius: 2em; } .user-links button:hover { @@ -97,4 +121,12 @@ .fade-out { opacity: 0; transform: scale(0.95); +} + +.bouncing-logo { + width: 7.5rem; + height: 7.5rem; + background-image: url(./assets/images/final-icon1.png); + position: absolute; + border-radius: 50%; } \ No newline at end of file diff --git a/source/js/user-page.js b/source/js/user-page.js index 566b238..6ec7333 100644 --- a/source/js/user-page.js +++ b/source/js/user-page.js @@ -1,23 +1,67 @@ +// Hover over button, text-emoji changes to corresponding buttons const button_1 = document.querySelector("#button_1"); const button_2 = document.querySelector("#button_2"); -const emoji_text = document.querySelector("#emoji"); - -button_1.addEventListener("mouseover", () => { - emoji_text.textContent = "πŸ—’οΈβœοΈ"; - emoji_text.classList.remove('fade-out') -},1000); - -button_1.addEventListener("mouseout", () => { - emoji_text.textContent = ""; - emoji_text.classList.add('fade-out') -},1000); - -button_2.addEventListener("mouseover", () => { - emoji_text.textContent = "πŸ“‹πŸ§πŸ’­"; - emoji_text.classList.remove('fade-out') -},1000); - -button_2.addEventListener("mouseout", () => { - emoji_text.textContent = ""; - emoji_text.classList.add('fade-out') -},1000); +const emoji_text1 = document.querySelector("#emoji_1"); +const emoji_text2 = document.querySelector("#emoji_2"); + +// Bouncing animation for Go Go Grocery Logo +const logo = document.querySelector(".bouncing-logo"); +const container = document.querySelector("#user-details-emoji"); + +// Initializing position and velocity +let posX = 0; +let posY = 0; +let velocityX = 2; +let velocityY = 2; + +function animate() { + posX += velocityX; + posY += velocityY; + if (posX + logo.clientWidth > container.clientWidth || posX < 0) { + velocityX = -velocityX; + } + if (posY + logo.clientHeight > container.clientHeight || posY < 0) { + velocityY = -velocityY; + } + logo.style.left = `${posX}px`; + logo.style.top = `${posY}px`; + requestAnimationFrame(animate); +} + +animate(); + +button_1.addEventListener( + "mouseover", + () => { + emoji_text1.textContent = "πŸ—’οΈβœοΈ"; + emoji_text1.classList.remove("fade-out"); + }, + 1000 +); + +button_1.addEventListener( + "mouseout", + () => { + emoji_text1.textContent = " "; + emoji_text1.classList.add("fade-out"); + }, + 1000 +); + +button_2.addEventListener( + "mouseover", + () => { + emoji_text2.textContent = "πŸ“‹πŸ§πŸ’­"; + emoji_text2.classList.remove("fade-out"); + }, + 1000 +); + +button_2.addEventListener( + "mouseout", + () => { + emoji_text2.textContent = " "; + emoji_text2.classList.add("fade-out"); + }, + 1000 +); diff --git a/source/user-page.html b/source/user-page.html index a113f9b..085d9f5 100644 --- a/source/user-page.html +++ b/source/user-page.html @@ -34,23 +34,32 @@

Go Go Grocery

-

+ + +
From 4f19dd0292eb07c9776022fe17901a571d5e95db Mon Sep 17 00:00:00 2001 From: jonathannnty <141669529+jonathannnty@users.noreply.github.com> Date: Mon, 19 Aug 2024 17:51:07 -0700 Subject: [PATCH 17/19] polish --- source/css/user-page.css | 121 ++++++++++++++++++++------------------- 1 file changed, 61 insertions(+), 60 deletions(-) diff --git a/source/css/user-page.css b/source/css/user-page.css index a3ac08b..f42ddee 100644 --- a/source/css/user-page.css +++ b/source/css/user-page.css @@ -1,103 +1,104 @@ #user-page { - background-image: url(../assets/images/gradient-bg-img.png); - background-size:cover; + background-image: url(../assets/images/gradient-bg-img.png); + background-size: cover; } #user-greeting-emoji { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } #user-details-emoji { - display: flex; - flex-direction: row; - align-content: space-between; - background-color: #FE9920; - padding-bottom: 8em; + display: flex; + flex-direction: row; + align-content: space-between; + background-color: #fe9920; + width: 100vw; + padding-bottom: 8em; } .emoji { - /* margin: 5rem; */ - height: fit-content; - width: fit-content; - justify-self: center; - align-self: center; - text-align: center; - font-size: 7.5rem; - white-space: nowrap; - position: relative; -} - -.user-links button, .user-links button a { - color: #000000; - font-size: 1.5em; - font-weight: 600; - margin: 0em 1em; - text-decoration: none; - text-align: center; - height: 15rem; - padding: 3em 0; + /* margin: 5rem; */ + height: fit-content; + width: fit-content; + justify-self: center; + align-self: center; + text-align: center; + font-size: 7.5rem; + white-space: nowrap; + position: relative; +} + +.user-links button, +.user-links button a { + color: #000000; + font-size: 1.5em; + font-weight: 600; + margin: 0em 1em; + text-decoration: none; + text-align: center; + height: 15rem; + padding: 3em 0; } .user-greeting { - display: flex; - flex-direction: row; - font-weight: 800; - font-size: 2em; + display: flex; + flex-direction: row; + font-weight: 800; + font-size: 2em; } .user-greeting h1 { - margin-bottom: 0em; - white-space: nowrap; - margin: 2rem 5rem 0; + margin-bottom: 0em; + white-space: nowrap; + margin: 2rem 5rem 0; } #user-details h3 { - font-size: 1.5em; - font-weight: 400; - margin-top: 0em; - white-space: nowrap; - margin: 0em 3.5em; + font-size: 1.5em; + font-weight: 400; + margin-top: 0em; + white-space: nowrap; + margin: 0em 3.5em; } #user-details { - display: flex; - flex-direction: column; - align-items: flex-start; - position: relative; - } + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; +} .user-links { display: flex; flex-direction: row; - margin: 2rem 2rem 0; - justify-content: space-between; + margin: 2rem 2rem; + justify-content: space-evenly; + width: 100vw; } .green-box { display: flex; flex-direction: column; - margin: 0em 1em 0em; + margin: 0em 0em; padding: 0; background-color: #7c9e57; border-radius: 2em; } .interface-button { - flex-grow: 0.75; - width: 45vw; - height: auto; - flex-wrap: nowrap; - background-color: #7c9e57; + flex-grow: 0.75; + height: auto; + background-color: #7c9e57; border: none; border-radius: 2em; } .user-links button:hover { - background-color: #719150; - } + background-color: #719150; +} - .user-links button:focus:not(:focus-visible):not(.focus-visible) { +.user-links button:focus:not(:focus-visible):not(.focus-visible) { box-shadow: none; outline: none; } @@ -119,8 +120,8 @@ } .fade-out { - opacity: 0; - transform: scale(0.95); + opacity: 0; + transform: scale(0.95); } .bouncing-logo { @@ -129,4 +130,4 @@ background-image: url(./assets/images/final-icon1.png); position: absolute; border-radius: 50%; -} \ No newline at end of file +} From 513b6ca0a24e775705fe7a64d250300e18a280de Mon Sep 17 00:00:00 2001 From: jonathannnty <141669529+jonathannnty@users.noreply.github.com> Date: Mon, 19 Aug 2024 20:26:45 -0700 Subject: [PATCH 18/19] fixed webpage dimension issue + redundancies in user-page.css --- source/css/user-page.css | 23 ++++++++--------------- source/user-page.html | 3 --- 2 files changed, 8 insertions(+), 18 deletions(-) diff --git a/source/css/user-page.css b/source/css/user-page.css index f42ddee..dc24f55 100644 --- a/source/css/user-page.css +++ b/source/css/user-page.css @@ -3,11 +3,6 @@ background-size: cover; } -#user-greeting-emoji { - display: flex; - flex-direction: row; -} - #user-details-emoji { display: flex; flex-direction: row; @@ -18,14 +13,8 @@ } .emoji { - /* margin: 5rem; */ - height: fit-content; - width: fit-content; - justify-self: center; - align-self: center; text-align: center; font-size: 7.5rem; - white-space: nowrap; position: relative; } @@ -48,9 +37,14 @@ font-size: 2em; } +.emoji, +.user-greeting h1, +#user-details h3 { + white-space: nowrap; +} + .user-greeting h1 { margin-bottom: 0em; - white-space: nowrap; margin: 2rem 5rem 0; } @@ -58,7 +52,6 @@ font-size: 1.5em; font-weight: 400; margin-top: 0em; - white-space: nowrap; margin: 0em 3.5em; } @@ -74,13 +67,13 @@ flex-direction: row; margin: 2rem 2rem; justify-content: space-evenly; - width: 100vw; + width: 96vw; } .green-box { display: flex; flex-direction: column; - margin: 0em 0em; + margin: 0em; padding: 0; background-color: #7c9e57; border-radius: 2em; diff --git a/source/user-page.html b/source/user-page.html index 085d9f5..ba1572e 100644 --- a/source/user-page.html +++ b/source/user-page.html @@ -56,9 +56,6 @@

 

 

- From 1b84ca7cf1322e96cb0ddc61462e5241a76e9a50 Mon Sep 17 00:00:00 2001 From: jonathannnty <141669529+jonathannnty@users.noreply.github.com> Date: Wed, 4 Sep 2024 01:37:20 -0700 Subject: [PATCH 19/19] Finished user-page! --- source/css/user-page.css | 21 ++++++++++++++++++++- source/js/user-page.js | 33 ++++++++++++++------------------- source/user-page.html | 20 +++++++++++++------- 3 files changed, 47 insertions(+), 27 deletions(-) diff --git a/source/css/user-page.css b/source/css/user-page.css index dc24f55..47baa8e 100644 --- a/source/css/user-page.css +++ b/source/css/user-page.css @@ -14,7 +14,7 @@ .emoji { text-align: center; - font-size: 7.5rem; + font-size: 7rem; position: relative; } @@ -70,6 +70,25 @@ width: 96vw; } +#existing_grocery_list_container { + height: 15em; + overflow-y: auto; + margin-bottom: 3em; +} + +#existing_grocery_list { + display: none; + list-style-type: none; + font-size: 1.5em; + font-weight: 400; + height: auto; + padding: 0em 1.5em; +} + +#existing_grocery_list li { + padding: 0.5em 0em; +} + .green-box { display: flex; flex-direction: column; diff --git a/source/js/user-page.js b/source/js/user-page.js index 6ec7333..18f8e2b 100644 --- a/source/js/user-page.js +++ b/source/js/user-page.js @@ -1,6 +1,7 @@ // Hover over button, text-emoji changes to corresponding buttons const button_1 = document.querySelector("#button_1"); const button_2 = document.querySelector("#button_2"); +const dropdown_area = document.querySelector("#dropdown_area"); const emoji_text1 = document.querySelector("#emoji_1"); const emoji_text2 = document.querySelector("#emoji_2"); @@ -14,7 +15,7 @@ let posY = 0; let velocityX = 2; let velocityY = 2; -function animate() { +function drift() { posX += velocityX; posY += velocityY; if (posX + logo.clientWidth > container.clientWidth || posX < 0) { @@ -25,10 +26,20 @@ function animate() { } logo.style.left = `${posX}px`; logo.style.top = `${posY}px`; - requestAnimationFrame(animate); + requestAnimationFrame(drift); } -animate(); +document.getElementById('button_2').addEventListener('click', function() { + var itemList = document.getElementById('existing_grocery_list'); + + if (itemList.style.display === "none") { + itemList.style.display = "block"; // Show the list + } else { + itemList.style.display = "none"; // Hide the list + } +}); + +drift(); button_1.addEventListener( "mouseover", @@ -48,20 +59,4 @@ button_1.addEventListener( 1000 ); -button_2.addEventListener( - "mouseover", - () => { - emoji_text2.textContent = "πŸ“‹πŸ§πŸ’­"; - emoji_text2.classList.remove("fade-out"); - }, - 1000 -); -button_2.addEventListener( - "mouseout", - () => { - emoji_text2.textContent = " "; - emoji_text2.classList.add("fade-out"); - }, - 1000 -); diff --git a/source/user-page.html b/source/user-page.html index ba1572e..e9bf771 100644 --- a/source/user-page.html +++ b/source/user-page.html @@ -49,16 +49,22 @@

What would you like to do today?

 

- - + -