Brandon McKenzie | Front End Portfolio
[1:00pm] I am creating a fictional water park website. In this project I intend to showcase my front end web development abilities. I have been studying for about 6 months now and I want to put my skills to the test.
[10:00am] Merry Christmas! These are the things I want to implement in this project :
Skills [x] Form [x] Flexbox [x] Grid [x] Transitions [] Model [] Responsive
[12:44pm] Christmas feast is ready! I started the navbar and set up some of my framework so far.
[3:30pm] I just finished the first draft of the navbar and showcase. I was stuck for a while on the overlay trying to get the text to NOT be transparent. I just had to keep trying for a while untill I figured it out.
[10:30pm] I added images to the github repo for this and now my uber slow internet is having the hardest time pulling the updates... Whatever I am going to try and work on this without the new images for now.
[5:30pm] I didnt do a good job at clocking in and out today but I worked for about 4 hours on the home page. moving things around and trying differant layouts and images. I'm liking how it is coming out, now I need to style the buttons and work on the footer before moving on to another html page.
[8:30am] Good morning! So far this morning I finished pretty much everything on the home page except for styling the buttons, which I am going to do now. I am moving along at a good pace with this project so far. I am proud of how much I have learned and am able to exicute on my own!
[9:13am] Finished with the home page styling!!! WoooHoo it looks great! Next up on this project I will make the "Get Wet" and "Food/Hotel" pages, then make it all responsive! I want to include a form and a model in this project as well.
[2:30pm] I got a lot of work done today. I finished the home page and got a huge chunck of the water play page finished as well. I am leaving off on the "Rides" section - I want to style the grid and colors differanyly than the "Slides" section when I return.
[5:15pm] I am taking a break today but of corse I snuck in a few minutes to get some code in lol. I styled the water play page a bit just now, adding padding to the some sections and alternating the color scheme of the sections. I still want to switch up the grid for the ride section and get a new picture or two for it.
[7:00am] Good morning. I'm up early and I have some coffee brewing. Today I want to work on "Wild Water World" again, I think it is coming along nicely so far. I'm kind of at a blockage right now, I want to continue with the site but I dont want all of the pages to look the same, I want to display differant skills on each. I will look up some paintball websites for inspiration for my war zone page.
[11:19am] Well now.. Im going to make the water war zone page a form to sign your team up for a weekend war tournament - and it turns out i'm going to have to implement javascript to acheive what I want from this page. This is good because i will get to practice and learn more javascript, but it is going to make this take longer than I expected. I will however have a chance to display my ability to use javascript, which will be a big plus for this portfolio piece as well as my learning! I am slightly intimidated and very excited.
I want the form to have:
- ability to add names of team mates to a list for submission
- date input with week days disabled
The user will fill out the form and add names to a roster list for submission.
[10:00am] I am just tapping in real quick to log that I have been working down the street doing in-home care this last week and posting items to E-Bay to generate some more income. I have been listening to code videos but I have not been able to code myself in the past 5 days. It feels like it has been way longer lol. I dont want my skills to dull! I might have time to style the form real quick this morning.
[10:46] I diddled around with the form styling just to play around with code today. I dont expect to keep anything that I did in the final form though. I actually think I will restyle this whole page to be honest. I will cap off this hour of code with a video or something but at least I got to touch code today!
I was working on a udemy course for javascript when the internet went out from the snow up here on the mountain. I spent the last of my stydy time tinkering around with the copy on the war zone page. }
I re-designed and simplified the sign up form. I began to write the javascript for the adding a team member functionality as well. I will re-write this using a ul instead of a div with paragraphs in it next time. }
I looked into a front end course at lane college that would take a year to complete... I can get a job in that kind of time! Here we go.
I got so much done in javscript today, I am really proud of myself. I was able to code the functionality of adding team members to a list and counting them whenever one is added or removed. There is also a limit of 5 team members implemented. There is some validation as well. I am so proud of myself, I know that I am really learning. }
I finished a tutorial on how to persist data to local storage but the data that I have is coming from 3 input fields, not one. I think i need to get the value of the local storage key I am creating to be an object, so I am trying to figure out how. }
I just broke the application trying to make a member object alsk;jghlkahbaesjfhnbuwjh;whtg;iwhgtjdsfgnjkeahgaiwgh;asklghsjkgh;kaeshgtw;uiaghjsgfnfdsjghnjsghjtghjwghkja;gnjk;gnjughjkghruj;tghw
Im going to go back to the course because I feel like I am getting ahead of myself here. I just want these members to persist to local storage ugh! }
I have been sudying how to create an object and use prototype methods to do things like add elemnets to the UI and clear fields. I think this is what I was trying to do on this but I want to come at it from a differant angle. I will add a new js. document and comment out this old one to see what I can do differantly.
Wow did I have a lot to learn... Im glad I am taking my time with this part of learning javascript. the Object in OOP is clearly essential to learn, as well as how to use prototypes and ES6 Classes version as well.
Tomorrow I need to figure out how to remove a member from local storage. }
Today I have a good amount of time to work on this project! I plan to complete the functionality of the Tournament sign-up form, and work on the next page: Food & Hotel. I plan to use an API that I found with data on cocktails and mixed drinks, so I want to intergrate that into the page somehow.
I just completed the functionality of removing a team member from local storage when I remove them from the dom, and it was a lot of fun to think creatively on how to match the target to the member I wanted to splice out of the array. I really like this! }
I am going to use a cocktail api to create a drink finder application page.
On my night club page i will have a section for the dance club that will have a slideshow of water party's
Under that I will have a cocktail finder to search our bar for your favorite cocktail.
I also want a 21+ confirmation pop up before you view this page.
I messed around with this page a lot today and I have a direction I am wanting to go with it now. I will have 2 sections for the drink area. one to search a drink by name, and one to select a doptdown of an alcohol type and display its drinks in a grid below. each drink has and id, name, category, glass, instructions, picture, ingredients, and measurements.
Next round I need to do the css for the grid area, I can keep the same one i did for the slides. I want to generate the html using JS for each grid item. }
Lets do it. }
I really want to finish up this project. I am going to add a simple sideshow, make it responsive, and call it done and move on.
[7:00pm] I finished the slide show, now all I have left to do is clean up the code for all the pages - I changed some of the names of the pages that i need to fix - and make everything responsive. I MIGHT come back and make the drink finder application better but for now I think it is fine. Looks like its all css from here!
[] Fix file names }
[5:30pm] I am going to make the project responsive now. Throughout working on the project I have come to believe that I made a lot of the sizing of fonts and components in general too big, probably because I am developing on my mac, so I might adjust those in the process of doing my media queries as well. I am excited to see how it all comes together!
So I have what I would consider 'widescreen' as my default sizing. I will scale down for 'normal' and 'mobile' screen sizes in my media queries.
[7:00pm] I will start by resizing my widescreen settings, which are the settings that I originally designed. Once I get everything looking right I will move on to normal screen size, then mobile.
[9:30pm] I tweeked the styles and sizing of all of the pages in this project for my widescreen (default) media query. I left off at the bottom of the night club page because I am thinking I am going to redo the drink finder app all over again. I want it to display better, maybe in grid format, and have differant functionality.
From here I need to redo the drink finder application and do media querys for normal size and mobile size screens. }
[4:30pm] I just created a new section to search drinks by type of alcohol. I think it looks really nice.
[5:00pm] Time to make my 'normal' media querie styleing. }
[11:00am] I had originally liked the drink section's styleing to the grids I did for the water slide section - But I am now running into trouble re-styling It. I think I need to just give it its own styling.
[2:30pm] I made the drink section it's own styling using the grid system's auto fit and minmax features. Now I just need to make mobile styling and i am complete! }
[2:30pm] I'm doing the styling for tablet size. Lets focus and bang this out to completion!
[4:00pm] Tablet sizing complete, now for phone size and then I am donezoe! }
[11:30pm] I got in a bit of code tonight, Completed the phone size media query. I am thinking I also want to make a model for the buy tickets now button after I finish making the rest of the pages responsive. }
[8:30pm] I just completed the last of my media queries, now I want to figure out where to take this project from here. I suppose I should get rid of the lorem text and make up some real content to make it look more presentable to regular people.
I also want to make a model that will pop up when I click the buy now button on the home page. }
Scratch the modal and copy writing, I am going to deploy this bad boy as is and move on! I plan on deploying it using Netlify for free and sending it to my buddy Eli for his feedback. }