Take a look at this please. After pulling from master I realized that the entire site was not functioning as intended so I went ahead, and got it working as well as I could. I'm gonna go over what I did here as best as i can, because I changed everyone's page, and want you guys to be aware of what I did, and be the ones to have the final say on your code. I didn't mean to mess with anyone's stuff, but after looking everything over I realized there was just a couple of things breaking everything. I didn't delete anything, just commented some stuff out, and I haven't merged or anything like that so please don't bite my head off.
NavBar Feature
I had to comment out the printNavBar() function as it was printing to a div with the id of navBar, but no one had that on their page, and the HTML it was printing also had the id of navBar. So it was causing every page to not load correctly due to errors.
I'm not sure how we could print the nav to the dom via JavaScript without implementing an array with file paths to everyones page. But it is possibly something we can do if we want to
I just hard coded the NavBar onto everyone's pages for now, and got all the paths working correctly
there is a styling difference between the pages (home page it is a bit smaller and has a different font)
I also added just a straight link to the checkout page with the text "checkout" as there was just an invisible link. I know we were talking about adding a shopping cart icon, but I just figured for now we can at least just have some text so Austin can easily click his site from the index.
printMap(), and printCart() functions
We were calling every dom building function on every page inside init() which was causing nothing to work.
Somehow printCart() was printing to productPage.html inside productCon inside the function with printToDom() instead of checkout-card-container on the checkout page.
I added a conditional to every function specific to each page based on the div that each function was printing to so that it only does something when your page is the one being loaded.
const productPage = document.getElementById('productCon') // This is the div that is exclusive to my page.
if(productPage===null){ //So when this function runs, and there is no element named `productCon` loaded on the page it simply ends the function
return;
} else{ the rest of the function} //But IF there is an element with the ID of productCon the rest of the function runs as intended
That works the same for everyone current function, and should continue to work as long as you don't change the name of that div on your page. If you need to add to that function simply add it like you normally would, but make sure it's still inside the else{}
It's important that we keep this conditional in every function that we only want to run on our page otherwise the entire site won't load correctly. I know there are probably other ways to do it, but that is what the TA's told me we should do.
Styling Issues
i noticed on the taproom page there seemed to be some kind of overlapping of the map/text. I'm not sure if that was due to me adding the NavBar, or not, but I'm sure it will be an easy fix via CSS/FlexBox
Like I said earlier the NavBar is slightly different on index.html I'm guessing it's do to CSS, but that is something we can figure out later, as it isn't breaking anything right now
Teamwork
I didn't mean to overstep by changing everyone's code, but I couldn't get anything to work without fixing it. We are a team so this up to everyone if we want to merge this or not.
I know everyone was overwhelmed today including myself, but I think we will do a lot better come Monday if we are working with a functioning site over the next couple days.
These changes are all temporary, and anything can change, but I wanted to get a site where we could all navigate to where we needed to be so we weren't as confused.
PLEASE ADD COMMENTS
I think it helps everyone out a lot if we separate our code by big long comment bars, and comments explaining what each thing does. This will allow us to easily solve merge conflicts without messing anything up.
//~~~//~~~//~~~//LIKE THIS!//~~~//~~~//~~~//// Or like this i.e. this is what this function does!
It will also help in CSS when it comes to styling, and make it way easier for everyone to style their pages without changing anyone else's unintentionally.
I also recommend at some point we organize our JavaScript file a bit to make it easier to read. From what I understand it usually goes in order from global variables like arrays, and what any variable in the global scope, followed by functions, and then what we actually call in the script (i.e. init())
IMPORTANT COMMIT PLEASE READ
Take a look at this please. After pulling from master I realized that the entire site was not functioning as intended so I went ahead, and got it working as well as I could. I'm gonna go over what I did here as best as i can, because I changed everyone's page, and want you guys to be aware of what I did, and be the ones to have the final say on your code. I didn't mean to mess with anyone's stuff, but after looking everything over I realized there was just a couple of things breaking everything. I didn't delete anything, just commented some stuff out, and I haven't merged or anything like that so please don't bite my head off.
NavBar Feature
printNavBar()function as it was printing to a div with the id ofnavBar, but no one had that on their page, and the HTML it was printing also had the id ofnavBar. So it was causing every page to not load correctly due to errors.printMap(), and printCart() functions
We were calling every dom building function on every page inside
init()which was causing nothing to work.Somehow
printCart()was printing toproductPage.htmlinsideproductConinside the function withprintToDom()instead ofcheckout-card-containeron the checkout page.I added a conditional to every function specific to each page based on the div that each function was printing to so that it only does something when your page is the one being loaded.
That works the same for everyone current function, and should continue to work as long as you don't change the name of that div on your page. If you need to add to that function simply add it like you normally would, but make sure it's still inside the
else{}It's important that we keep this conditional in every function that we only want to run on our page otherwise the entire site won't load correctly. I know there are probably other ways to do it, but that is what the TA's told me we should do.
Styling Issues
i noticed on the taproom page there seemed to be some kind of overlapping of the map/text. I'm not sure if that was due to me adding the NavBar, or not, but I'm sure it will be an easy fix via CSS/FlexBox
Like I said earlier the NavBar is slightly different on
index.htmlI'm guessing it's do to CSS, but that is something we can figure out later, as it isn't breaking anything right nowTeamwork
I didn't mean to overstep by changing everyone's code, but I couldn't get anything to work without fixing it. We are a team so this up to everyone if we want to merge this or not.
I know everyone was overwhelmed today including myself, but I think we will do a lot better come Monday if we are working with a functioning site over the next couple days.
These changes are all temporary, and anything can change, but I wanted to get a site where we could all navigate to where we needed to be so we weren't as confused.
PLEASE ADD COMMENTS
//~~~//~~~//~~~//LIKE THIS!//~~~//~~~//~~~//// Or like this i.e. this is what this function does!init())Please let me know what you guys think