Originally published August 9, 2019 on BritishPandaChick Codes. I made tweaks to the original post so it would work for The Practical Dev.
I'm officially on day 70 of 100 Days of Code. This means it is time for another 100 Days of Code recap. Today's post is looking at everything that happened during days 61-70 of the challenge.
Day 61: July 31, 2019
The first 30 minutes were working on the JS Calculator. My code is getting really messy so I started to refactor the code I had to make it nicer, neater, and organized. I'm debugging the code as I go.
I originally had 11/16 tests passing but as of right now only 9/16 are passing due to all the debugging and code changes happening. Right now I'm setting up a function that will only run if the data action attribute is set to decimal.
The hamburger menu is officially done! I spent most of the time debugging and fixing the CSS in order to get everything to work. It isn't 100% perfect. There are ways to improve the styles and make them look and feel like an actual hamburger menu on any mobile website. However, I decided to not mess around further with the styles and use that time to play around with Flexbox instead.
The remaining time was used to start adding styles for the logo section. I mostly was playing around with the height of the section so there weren't too many changes to the CSS today. Tomorrow I'll have more time to play around with the height as well as changing the fonts, colors, and padding.
Day 62: August 1, 2019
I finished most of the mobile styles for the product site. Most of these sections were just updating the font sizes, font families, and colors. I'll probably add more CSS styles in the future as I keep playing around with the Flexbox properties.
I did start adding styles for the responsive stylesheet. Once I set the display to flex, my website moved all the elements into rows. My plan right now is to tackle each section one at a time so I can play around with the different Flexbox properties and see what happens on my site. Right now my header section looks similar to the one on my mobile site so I'll see if Flexbox can help me fix this issue tomorrow.
The last 30 minutes were doing more debugging on my JS calculator. The numbers are still not displaying on my website but I'm not worried about that right now. Instead, I'm trying to read through my code and get everything organized.
I am putting a lot of the if-else statements into functions then calling the functions when a key is clicked. 9 out of 16 user stories are still passing according to the tests. While the code doesn't work, organizing it is making it less messy and easier to read so I can get a sense of where the problems might be in my code.
I am getting a feeling it is might be due to the variables I'm using. I'll do more debugging and troubleshooting tomorrow to see if the variables are causing a problem.
Day 63: August 2, 2019
The first 30 minutes were debugging my JS calculator so I didn't get too much done. I double-checked all my variables today but that doesn't seem to be the issue with why specific tests aren't passing. I think the issues might be in the functions I just created.
So I started looking over all my code to make sure I'm using the right names in my HTML that I'm using in my JS file. I added a couple of new classes to some of the elements to see if that would be easier to work with. I took some time to read and play around with some of the Flexbox properties on my website.
I don't think I'm probably using Flexbox correctly but many of the properties I tried didn't do anything in the previewer. So I just kept the flex-direction property set to column and everything was working. I had issues trying to hide the hamburger icon on the responsive website but thanks to Google I learned about the visibility property.
This made it so much easier to hide the icon instead of using the display property. The rest of the time was spent adding CSS to the responsive site. The preview section is giving me the most trouble right now. Tomorrow I'll see if I can use Flexbox to get everything aligned just right in the preview section.
Day 64: August 3, 2019
The responsive stylesheet is finished. The biggest issue I had was getting the preview section to not overlap each other on the page. None of the Flexbox properties were working very well so I removed styles I set for half-width class. This allowed preview elements to line up in rows instead of them being all over the page.
I started adding styles for the desktop version of the site. Initially, I was planning on having my navigation on the right side of the page, but the styles didn't look right when all the links were aligned on the right. So I decided to leave the navigation underneath the headline. Header, logo, and note are done on the desktop stylesheet so I'll be back to get the preview section to work on the desktop stylesheet tomorrow.
In the article I'm using for this latest attempt of the calculator, they don't recommend using multiple functions and calling them in the addEventListener like I was doing. They instead recommend using two different functions. So I spent the last few minutes setting up these two functions. I'll refactor the code I have now so it will work within these two functions.
Day 65: August 4, 2019
The first 30 minutes were doing more work on the JS Calculator. I spent the entire time doing more debugging and refactoring code. Still have 9 out of 16 tests passing so I was reading more JS documentation and the Free Code Camp article I'm using. If I'm not seeing any progress tomorrow, I'm going to just start over the JS code from scratch.
I finished working on the product website. This was just adding the last bit of CSS to the desktop CSS file. Most of the time was spent fixing the preview section.
Initially, nothing would change when I added the flexbox properties. When I added a border, it looked as if the code was making a variety of different boxes throughout the section. It took some time trying different Flexbox properties in div classes but everything lined up in a row once I set the flex-direction and display for the full-width class.
Once this worked, I went back to the preview section and played around with the padding so there would be a little bit of spacing around and between the elements. When all the CSS was done, I looked at the entire site in Dev Tools to see what final changes might need to be made. Now that the product website is done, I started to set up work for the next project.
So far I've just organized the code files so I can find them. Tomorrow I'll finish setting up and begin working on the code.
Day 66: August 5, 2019
Today's session was mostly getting the rest of the website set up and ready to go. This means adding all the links and setting up the files. Once the setup is finished, I started adding some of the HTML.
I managed to get the header and footer sections done. I'm not quite sure what sections to put on my website. Right now I've only got a couple of sections on the website but I wasn't sure what to put.
The last 30 minutes were spent working on the JS calculator. I still wasn't having much luck passing any of the remaining tests so I decided to just completely start over with all my code. I saved all the code I've been using to a branch of the Github repository.
It sucks starting over yet again but I think it is better starting over than continuing a path that isn't getting me anywhere. Right now I'm rebuilding the calculator HTML code. So far I've got 4 tests passing.
Most of the calculator buttons have been added. I have been working through the user story tests one at a time to make sure everything is passing before I move onto the next step.
Day 67: August 6, 2019
I am making more progress on the HTML. Before I started working on the project, I took a look at different bistro and cafe websites. I also looked at different French restaurant websites to get an idea of how to structure the website. I took this information and started creating these sections on my website.
The last thing I need to do is finish the menu section. I've got two more sections to go. However, I'm not going to dive straight into the CSS yet. I'd like to see where I can add more Bootstrap classes and organize my HTML a bit before I start playing with the styles.
The last 30 minutes were spent working on the JS calculator code. My calculator is definitely not the prettiest calculator in the world. The CSS is kept to a minimum in order to get a working version of a calculator to appear on CodePen.
I finished setting up the HTML code for the calculator. The first six user story tests all pass at the moment so I can start working on the logic. I've been looking at some of the sample projects on CodePen and ones other devs have shared with me from the CodeNewbie chats.
It seems as if many of them use Babel as part of the JS preprocessor so I am going to use this attempt to see if it will work. With this in mind, I'm going to copy my original JS code back into CodePen to see if that will make any difference now that I'm using Babel. If it doesn't, then I can delete and focus on getting user story 7 to pass.
Day 68: August 7, 2019
I finished adding all the HTML to the site. I decided to add h3 headlines to the menu section. I changed the headlines for all the menu items to h4 tags.
Once the menu section was done, I added more Bootstrap classes. Most of these classes were container tags. I set up the column widths for the menu section just to see how they would look on the site. I might change these classes as I work with the CSS for different screen sizes.
The rest of the session was starting to add CSS to my website. I had more issues with the Dev Tools previewer. My styles weren't appearing on the previewer. Once I exited out of the previewer and played around with the screen sizes the styles began appearing.
Tomorrow I'll play around with Dev Tools to see if I can get it to work. I did get a head start on the header by adding the background image and setting the width. Tomorrow I'll finish adding styles to the header and working on the navigation.
Only 6-7 user stories are passing in the testing. When I have been testing the site, I noticed that a bunch of numbers randomly appear on the display when I run the tests. I will try debugging these issues. I get a feeling the issue might be in the HTML more than the JS but I'll double-check both tomorrow.
Day 69: August 8, 2019
The first 30 minutes were spent working on the calculator. I had 8 user story tests passing but at the end of the session, they were back to 7 when I started breaking my code and refactoring everything. Right now I'm creating a function that creates the result string.
So far I've added four if statements that check if it is a key number and if there is a decimal. As I add the if statements to the new function I'm double-checking all my code as I go to see if everything is working. I stopped at adding the if statement for the operators. Tomorrow I'll debug and add this to createResultString function.
Before I started the session I figured out what was wrong with my mobile styles. It turns out I forgot the meta tag in the head tag for the viewport. Once I added the tag everything started working the way it should. The previewer is still acting a little off since styles take time to appear but it is an improvement from yesterday.
I'm not completely happy with the header. The background image isn't positioned so the sign is in the middle of the page but I found myself spending too much time nitpicking on something small so I'll leave it the way it is for now and come back to it later. The rest of the session was spent working in CSS and adding CSS styles to the sections on the website.
I started the menu section today. I will use the Bootstrap classes to play around with the menu items and prices to see if I can put some spacing between the two.
Day 70: August 9, 2019
Today I spent most of my time in the HTML files getting the menu code set up. I'm using the W3Schools template as guidance on how to set up and organize my code for this section. I removed some of the Bootstrap classes like the row div tags and add new Bootstrap classes. This included more container classes for each sub-menu.
The tests kept saying a hook was missing. After saving and refreshing CodePen a couple of times, the tests finally went back to 7 out of 16. I didn't add too much new code. I am still using the Free Code Camp article to double-check my code.
The createResultString function is finished. I created a getKeyType function that returns the type of key that was pressed. I started a new function called updateCalculatorState that will update the calculator. Right now I'm working on getting the calculator to update when users press an operator button.
I'd like to at least finish the mobile version of the restaurant menu during the next 10 days so I can start working on the other responsive styles. Are you doing the 100 Days of Code Challenge? If you are doing the 100 Days of Code challenge, share your progress in the comments below.