Sarah DyeI'm officially on day 80. I'm celebrating reaching this milestone with a brand new recap on the 100 Days of Code Challenge. Today's recap is looking at everything that happened during days 71-80.
I am sharing updates on the JavaScript Calculator. During these ten days, I finished the restaurant menu website for the 30 Days, 30 Sites challenge. I started a brand new project which is an author website for Nathaniel, one of the characters from the movie Enchanted.
Day 71: August 10, 2019
I created a JavaScript function for the menu site. I added the function to the onclick attribute in the index file. The function doesn't work yet because the classes I use in the function don't exist yet.
I noticed in the W3Schools example they use separate classes with different styles. I tried out some of these styles on the mobile stylesheet as well as looked at the code in Dev Tools to see how it works. So I created a brand new stylesheet where these menu styles will live so they can be used on all different screen sizes.
Tomorrow I will use the W3Schools template as a guide to naming new classes that will be used in main.css and adding the styles so it will look similar to the W3Schools menu section template. The last 30 minutes were spent working on the JS calculator. The results from the tests remained the same so I've been going back to Google and reading the documentation to see what I can find.
I set up a separate local file on my computer to play with the JS code from another video tutorial I found on YouTube as well as using the CodePen pen to play around with the JS code I've already used. Right now I'm going to use the newest YouTube tutorial to see how it works locally then use what I've learned in this tutorial to help me with the pen project. In the local file, I started adding all the HTML code that was used in the tutorial.
This tutorial uses a form instead of buttons like I've been using in the past version. I haven't made a lot of forms with my code so this tutorial is a good practice on how I can use forms in future projects. Tomorrow I'd like to finish the HTML for the project so I can start working locally on the JS.
Day 72: August 11, 2019
The first 30 minutes were spent playing around with the local code files using the YouTube tutorial I found yesterday. This tutorial uses input tags for all the calculator buttons. There were more testing issues.
Although all the ids are on the calculator buttons, the tests are coming back saying only one test is passing. The failures say things like "before each" hook and "after all" hook. I initially created classes for keys and having the ids be the ones freeCodeCamp wants.
This didn't make any difference with the testing. These failures are due to the backspace function not being defined since I don't have a backspace function ready so I'm going to just ignore the testing until I start working on the JavaScript. The rest of the session was spent working on the CSS for the calculator.
I'm keeping the styles relatively simple to put most of the focus on JavaScript but I had fun playing with the box-shadow property. I started to add CSS selectors and properties to the main stylesheet. I spent a lot of time looking at the W3Schools template in dev tools and seeing how they did their styles.
Right now my menu section is going to look very similar to what is on the W3Schools template. I am planning on changing the styles later to reflect the design of my site. For now, I just want to get the site set up the right way and get the classes right so I can get the JavaScript working correctly.
So far I've gotten a good head start on the styles. I'm not sure how they did their row class but I'll see if I can figure it out with Dev Tools later. I am removing some of the bootstrap classes for the new CSS classes. Tomorrow I'll be focusing on updating the menu section HTML code with more classes and trying to add more styles to the main stylesheet.
Day 73: August 12, 2019
Most of the work on the JS calculator was on the HTML & CSS. I managed to get the CSS finished. I got a head start on the JS.
In the YouTube tutorial, the buttons would display the results when they were pressed. Mine doesn't. So I started double-checking the HTML to see if I made a mistake with the HTML classes and ids.
I continued to add more CSS to the main stylesheet. Today I managed to start adding styles to the menu items. I got the menu items for the entree items done and got a head start on adding the CSS to the main course items.
So far the a tags are working just like the W3Schools template with a few minor changes. Once I'm done adding all the CSS to the main stylesheet I will try updating the stylesheets to see if I can use fewer classes for my code as well as update the colors to match the ones I'm using on the entire site. But for now, I'd like to get the working version ready to go as soon as I possibly can.
Day 74: August 13, 2019
I spent most of the time working on the CSS. I did play around with some of the JavaScript in the script file. I just updated some of the class names in the script file.
Once the menu styles are completely done, I'll start tackling the JavaScript code. Once the CSS styles were done for the menu section, I started going through the main stylesheet to see which classes could be combined to cut down on some of the classes assigned to different HTML elements. So far I've moved some of the styles to classes I already created on the mobile stylesheet.
As I add styles to the mobile stylesheet, I am updating the styles to match the styles I'm already using on the website. I am also adding Bootstrap classes to help with the section layout. Right now I'm working on getting the styles just right for the menu nav section.
Tomorrow I'll see if I can start getting the styles right for each of the sub-menus. The last 30 minutes were spent working on the JS calculator. I figured out what was wrong with the calculator display.
It turns out there were syntax errors on some of the buttons due to the quotation marks I was using. Once I switched some of the quotation marks to single quotes, everything started to work just fine. The rest of the session was setting up functions to get most of the calculator functionality working.
Despite the functions working, I'm back to only 7 out of 16 tests passing. This is an improvement from having 1 out of 16 passing earlier but many of the tests that are failing are things that are working on the calculator now. Tomorrow I'm going to finish the backspace function and see what other functionality I need to add to the site before I start redoing my code.
Day 75: August 14, 2019
The first 30 minutes were spent finishing the backspace function. I ran into lots of testing issues today. At the beginning of the session, only 7 tests were passing. When I refreshed the browser and ran the tests once the backspace function was added, only 12 tests passed.
I read all the tests and I think the remaining tests need to be addressed in the addtoScreen function. One of the tests that didn't pass is user story 7 with the clear button. So I moved the clear id on the HTML.
I started to play around with the addtoScreen function. I changed the box.value in the if statement to be 0 to blank. When the tests ran, only 10 user stories passed.
I noticed that the user story 7 test passed but user story 8 failed despite it working in the browser. I looked at the tests and the remaining tests that aren't passing are the ones for the clear button, calculator starting with multiple zeroes, decimals, appending decimals, and operation performed is the last operator entered. I replaced the box.value to show a blank on the display.
But tomorrow I'm going to play with the addtoScreen function to see if I can use if-else statements for the clear button, zeroes, and decimals. I am still working on the styles for the mobile version of the menu site. Before I continued the styles on the different menu sections, I double-checked the menu navigation to see if everything was working smoothly and if I needed to make any changes.
The rest of the session was spent working on the menu section. I managed to get the styles done for the entrees section and start on the menu items for the main courses section. As I work on the sub-menu sections, I am creating ids for each of the sections to see if this will help later when I work with JavaScript.
Tomorrow I'll see if I can finish the main courses and dessert sections before I tackle the JS. I also want to see if everything is working smoothly with the menu section's CSS before I start working on getting the functions to work correctly.
Day 76: August 15, 2019
In the first few minutes, I double-checked all the styles I'd made for the menu section. I did the remaining updates for the menu items in the main courses and dessert sections. Once these styles were done, I worked on the JavaScript and figured out why all the menus were showing instead of just one.
I originally was using document.querySelector for some of my variables but I changed everything back to document.getElementByClassName. This gave me errors in the console when I opened the page in the browser. It turns out I was missing the 's' in the document.getElementsByClassName.
As soon as I changed this, only one menu was showing on the screen. Now that the menu section is done, I focused on getting the rest of the mobile page done. All I need to do is finish the footer styles then tomorrow I can start working on the responsive stylesheet.
The last 30 minutes were spent working on the JS calculator. I created a brand new function for the clear button and copied the code I originally had for the addtoScreen function inside. This made 10 user story tests pass.
I spent a lot of time reading the freeCodeCamp forums and documentation to get an idea of how to approach the remaining tests. I still think the solution might be in the addtoScreen function and using if-else statements to check if there are multiple zeroes. I think I might need to set the calculator to zero like I have been doing in previous versions. However, I'm going to look at more documentation and forum posts to get an idea of how to move forward next.
Day 77: August 16, 2019
I'm almost done with the restaurant menu website! Today I was able to get a large amount of the site's CSS done. The mobile version is officially done.
I got the responsive styles for medium screen sizes done. I was able to get a head start on the styles for the large screens. Although I did a lot of work with the CSS, I double-checked the menu section on the mobile and responsive versions to make sure everything was working correctly.
Tomorrow I'll finish the restaurant menu website styles then I'll be ready to start a brand new project. The last 30 minutes didn't have too much work on the JS calculator. I spent a lot of time reading Jon Duckett's book.
I did play around with the addtoScreen function to see if it would change the number instead of showing 0 and then the number pressed. I figured out how to do this by adding a value attribute to the display input. Inside the addtoScreen function, I changed the += to equals.
This allowed me to change the values when the button was pressed but now the function can't calculate anymore so I'm back to 9 out of 16 tests passing. Tomorrow I'm going to go back to the local file to see what happens if I change the form back to div tags to see if the existing code will work if it isn't in a form.
Day 78: August 17, 2019
I finished the restaurant menu website. I added the remaining CSS to the website. I created a new class in the new section so I could add some padding between the p tags.
I put the elements in the new section in a row div tag so they would display inline-block on the site without setting the individual properties. The rest of the session was creating the README file for the project and fixing merge conflicts when I was pushing the code to Github. I wasn't able to start setting up for the new project because of the merge conflicts but tomorrow I'll start working on the new site setup and what I'd like to work on for this site.
During the last 30 minutes, I changed all the input tags on my local version of the JS calculator to div tags. This made the test go from 10 to 7 passing. I spent a lot of time looking at examples on CodePen and the freeCodeCamp forums.
The ones that don't use React use jQuery or just basic JS to create their calculators. So I added back jQuery to the local calculator to see if I could play around with it. I didn't delete any of my original code.
I have all the code I've been working on in the comments. So far I've got the document ready and have begun adding the variables. Tomorrow I plan on playing with the JS a little bit and using what I'm finding in the forums to see what will help me pass the tests on my calculator.
Day 79: August 18, 2019
I started a brand new project today. Today was mostly getting everything set up and ready to go for the project. I decided to not use JavaScript on this project to get more practice with Flexbox properties.
Right now my focus is just getting the HTML up on the site. So far I've added the header and footer. I'm not sure what sections to put on my site so I looked at some real author websites to get inspiration as well as looking at the image from the movie showing the book the author wrote to see what fonts and colors to use.
Tomorrow I'd like to add more sections to the site so I have enough content to practice with when it comes to playing around with the CSS. The last 30 minutes were playing around with jQuery and using what I found in the freeCodeCamp forums and projects on CodePen to see what might work on my calculator. At first, the code I was using earlier was still on the HTML.
This threw off all the tests and gave me one user story passing. So I removed the onclick attributes and functions. I also changed most of the divs back into buttons.
When I had the jQuery working, I was able to get 12/16 user story tests to pass. As I was searching CodePen and freeCodeCamp, I found a project that used code similar to the code I had been using earlier. I commented out the jQuery code I've been using and removed the comments from my old code. So far I'm updating the addtoScreen function so everything displays on the calculator.
Day 80: August 19, 2019
The first 30 minutes were spent working on the JS calculator. I refactored the remaining functions I had on my calculator. This resulted in 12 out of 16 user stories tested.
I revisited the notes I wrote a few days ago with the value attribute for the display and changing the += to = in the addtoScreen function. This changed the stories from going from 12 to 9 passing. So I used the remaining sessions to review the documentation and forums.
I think there is a method I'm missing in my code that will solve user story 7. I'm going to review some of the JS and jQuery documentation tomorrow to see what I can find. I finished all the HTML for the author's website.
I found a color palette to use for the CSS. I did get a head start on some of the CSS but most of the work was getting the sections on the website. I updated some of the original sections I had yesterday.
This meant switching around the first section to book-sign which will just have a background image. The original items I was using in this section were moved to other sections on the page. I finished the directory section with all the navigation for the site.
The rest of the HTML was additions. I'll probably be adding more HTML along the way of this project but tomorrow I'll be concentrating on the CSS for the rest of the time.
Conclusion
I'm getting close to the end of 100 Days of Code. Although the challenge is almost over, I still have a ways to go with my JavaScript calculator. I'm going to continue working on the calculator in the next 10 days and see if I can get the rest of the user stories to pass.
The next 10 days will also mean working with Flexbox as I begin adding CSS to the author's website. Are you doing the 100 Days of Code Challenge? Share your progress in the comments.
This post was originally published on August 19, 2019 on the blog BritishPandaChick Codes. I made minor changes to the original post for DEV.
