Days 61-70

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.

I share updates on what is happening with the JavaScript calculator and product website. You will also learn about the newest project. Right now I'm making a restaurant menu website inspired by the movie Ratatouille.

Day 61: July 31, 2019

The first 30 minutes were working on the JS Calculator. My code is getting 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 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 and 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 makes 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 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 was using the right names in the HTML that I was 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. The last 30 minutes were spent working on the JavaScript Calculator. Most of the time was spent working on refactoring my code.

I didn't get much testing done but at the end of the 30 minutes, 9 out of 16 tests are still passing. In the article I'm using for this latest attempt at 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. I still have 9 out of 16 tests passing so I was reading more JS documentation and the freeCodeCamp article I'm using.

If I do not see 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 was 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.

Tomorrow I'll work more on the sections. I think I'll just keep this website simple to focus on creating a form as well as working with JavaScript and Bootstrap. 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 on to 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. I didn't add too many Bootstrap classes yet but once all the HTML is added I'm going to go through and see where I can add Bootstrap classes before I begin working with the CSS.

The only section I am still struggling with because I'm not 100% sure how I want to present the menu on the browser. I think I'll try replicating the W3Schools menu setup with only Bootstrap and JavaScript. 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 not the prettiest in the world. The CSS is kept to a minimum 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 Code Newbie 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 it 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 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. The last 30 minutes were adding code slowly back to the JavaScript Calculator.

The numbers are displaying when clicked which is a good thing. However, the operators aren't appearing on the site and it doesn't calculate quite yet. Only 6-7 user stories are passing in the testing.

When I was testing the site, I noticed that a bunch of numbers randomly appeared on the display when I ran 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 style.

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 on 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 added new Bootstrap classes.

This included more container classes for each sub-menu. I moved some of the headlines to the top of the menu. I added p tags under each menu item for the description.

I don't think I'm completely done with the HTML but I'll add more Bootstrap and HTML classes as I start working with JavaScript. I did add some CSS for the h2 headline. Tomorrow I'll finish adding some of the basic styles for the rest of the menu section then I am going to start tackling the JavaScript.

The last 30 minutes were spent doing more refactoring and debugging the JavaScript Calculator code. The tests were acting strangely for the calculator. Initially, only one of the 16 tests was passing.

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 freeCodeCamp 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.

Conclusion

So that's where I am now in 100 Days of Code. The JavaScript calculator is still a work in progress but I'm going to keep using the freeCodeCamp resources and forums to see if I can fix my code. Tomorrow I'm going to start working on the JavaScript code for the menu section and see if I can get it working just like the W3Schools template.

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.

This post was originally published on August 9, 2019 on the blog BritishPandaChick Codes. I made minor changes to the original post for DEV.