Days 81-90

Yesterday I reached day 90 of the 100 Days of Code Challenge. This milestone doesn't just mean that there are 10 days left of the challenge. It is time for another 10-day recap here on 100 Days of Code.

Today's post is looking back on everything that happened during days 81-90 of the second round of the 100 Days of Code challenge. I'm going to share updates on the projects I've been working on such as the JavaScript calculator to the projects I'm doing for 30 Days, 30 Sites.

Day 81: August 20, 2019

The first 30 minutes were spent on the JS calculator. I read a little bit more from Jon Duckett's book to see what might work for my calculator. After 15 minutes I spent the rest of the time looking at my code, I think the best plan of action is to set up a function for the clear button.

I changed all the input tags back to div tags. I decided to delete the power button on my calculator. I might delete the CE button but for now, I'm going to leave it on my calculator and see if I can make it work.

After looking at some project examples of CodePen, I think I'm going to go back to using Babel to see if this helps the code I already have working along with jQuery. I've been googling more data attributes to use on my HTML and found the data-key attribute. I'm going to try using the data-key attribute on my calculator buttons to see if they will store the inputs when the button is clicked so I can use them in a JS function.

I spent the entire session working on the header for 30 Days, 30 Sites. The header took me a lot longer than I anticipated since the previewer wasn't completely fitting on the iPhone screen and the header would push itself down from the top of the page, leaving a large amount of white space near the top. I spent a lot of time looking at my CSS code to see what I could change.

Right now I managed to find a working solution by changing the width from 100% to 90%. Although I spent the most time on the header, I did add the background image for the book sign section to see how much space is between these two sections. Right now I see a little bit of space between these two sections. I think I'm going to remove the background image and just use a regular image inside the section instead.

Day 82: August 21, 2019

I spent a lot of time working on the header section than I was planning. This was trying to figure out why there was a whitespace above the header section. I started playing around with Flexbox to see if I could find a solution with the Flexbox properties.

I found a working solution by adding the display property to the body and setting it to flex. Then I used flex-wrap to wrap all the elements on the page. Once I got Flexbox on the site, I added all the original styles I set yesterday back to the page one at a time.

I moved the original background image I was using to an image tag in the HTML file for the book sign section. I was originally going to have a section for the newsletter but this created a lot of white space between the two sections. I spent the rest of the session playing around with the HTML for the sections including getting rid of the newsletter section and combining it with the book sign section.

Tomorrow I'm going to play with the book sign section some more to see if I can get everything to work so there is no whitespace between them. The last 30 minutes were spent working on the JS calculator code. I managed to update the rest of the HTML code. I ran the tests and only had 1 test passing.

This was due to all the JS functions not running. So I created blank functions in the JS file to get all the tests working. Right now I have 8 tests passing on the local calculator I'm using.

I started working on getting the clear button working. Tomorrow I will google to see if I can find the Redux documentation. I've seen a lot of projects in the freeCodeCamp forums and CodePen uses Redux so I'll see what I'm able to find. I'm not a big fan of Redux so it will be interesting to see if I can get it to work on this calculator.

Day 83: August 22, 2019

Before I started working on any of the CSS, I looked at the author's site through the previewer on Dev Tools. The issues I had yesterday somehow magically fixed themselves. So I went back in and changed the width I set in the sections I did yesterday.

After looking at the site, I decided to go back to putting the image in the book sign section as a background image. I also put the newsletter section back in a separate section tag instead of the book-sign section. The previewer is still a little bit odd in how it displays styles but everything looks exactly the way it needs to be.

The rest of the time was spent adding styles to other sections. Tomorrow I will wrap up the mobile stylesheet for this site and start working on the tablet styles for medium-sized screens. I took a break from working on the JS calculator today to look over some of the Regex documentation.

Based on what I read, I don't think it will help with my calculator after all. So I went back to the freeCodeCamp sections to see what might help. I think the regular expressions will help with replacing some of the numbers on the calculator so I started revisiting some of the freeCodeCamp lessons to see what might or might not work for the calculator.

I stopped at the restricted possible usernames lesson. Tomorrow I'll finish the regular expressions review and see if any other lessons might help with the JS calculator.

Day 84: August 23, 2019

The previewer was once again acting up so I didn't use the previewer as much today and instead played around with the screen sizes with Dev Tools open. I did finish the mobile styles. I spent a lot of time trying to get the directory links to have a little padding added to the top so they would have some spacing but this wasn't working the way I wanted it to so I left it the way it is.

Once all the mobile styles were done, I started adding CSS to the tablet.css file. The image for the best-seller section is proving to be a challenge. Right now I'm trying to play around with the image's height.

Tomorrow I'd like to play with the padding to see if I can get it to look centered with equal amounts of white space on each side of the image. The last 30 minutes were spent finishing up the Regex review. I have an idea of how I can use it for the JS Calculator.

The rest of the session was spent working on the calculator code to play around with some of the functions to see if I could get the regex to work. At the time I'm writing this entry, 8 tests are passing but that is since a lot of the code I have on my local site is currently broken. I'm going to write some pseudocode for a certain part of the functions I have so I can figure out what else I might need to make my calculator work.

Day 85: August 24, 2019

The tablet version of the author site is technically done. I added the remaining CSS to the website and updated the properties so they would look nice on the website. The Dev Tools previewer is acting up again.

When I checked the site in Dev Tools, everything looked exactly the way I wanted it. However, the previewer is showing whitespace after the header, book sign, and newsletter sections. Although I did get a head start adding details to the style.css file, I think I'm going to double-check all the styles in the tablet stylesheet and see if I need to make any final fixes before I start working on the last stylesheet.

The last 30 minutes were spent working on the JS calculator. I updated a lot of my JS code. I didn't run any tests.

I was concentrating on seeing if everything was working using the console vs using the freeCodeCamp tests. I started doing some debugging at the end of the code to resolve some of the error messages that popped up in my code. I wasn't sure how to check for the multiple decimals and zeros so I looked at some examples on CodePen.

Many people create a separate function that checks if a user is trying to use multiple zeros and decimals. So I created a function to run through my code and check if a user is doing this. I've still got a lot of errors and the calculator is still not working so I'll be playing around some more with the local website code to see what I can do to fix everything.

Day 86: August 25, 2019

I put the finishing touches on the author's website. I tried fixing my website using the Dev Tools previewer but wasn't having much luck. The whitespace is still showing up in the previewer at the end of each section of the website.

When I changed the window sizes in Dev Tools, the site looked completely different from what was appearing in the previewer. So I just changed the screen size to match what an iPad did to see how everything looked and everything was just fine. I'm not sure what is going on with the previewer so I decided to move on with the rest of the site and get the CSS done for large screens.

The large screen styles went just fine. I didn't have to make too many tweaks to the CSS. Once all the styles were done, I moved all the styles to CodePen.

The styles look completely different on the pen than my local file. Some of the styles condensed on the CodePen file so I might go back and fix these styles in the future. I am instead going to start a brand new project tomorrow just to see what this project is like in the previewer.

The last 30 minutes were spent working on the JS Calculator. I spent the entire time working on the functions on my local version of my JS calculator. At the beginning of the session, only 8 tests were passing.

I think a lot of this comes from the variables I'm using in my calculator. So I did some debugging and refactored some of the variables. This helped and now all my user story tests are passing.

Although they are all working, I'm going to still go through the calculator JS to see if I can refactor it. Tomorrow I'm going to save all my calculator code and focus on refactoring some of the functions if possible.

Day 87: August 26, 2019

The first 30 minutes were spent working on refactoring the JS calculator code. Right now I'm working on refactoring all the functions I'm using. I tried changing some of the variables to make some global variables instead of local ones.

This didn't work and caused some of the user stories I originally had passing to fail. I did take some time to update the HTML & CSS code. I added a brand new div class "buttons" just to group all the keys and use the buttons class for styles.

I also changed the keys class on the buttons to key. I adjusted the selectors in CSS as well as added new properties to some of the classes. I did a lot of setup for the next 30 Days, 30 Sites project.

Once the code files were ready to go, I spent the rest of the time working on the HTML. I'm keeping the navigation simple this time with just a navigation bar at the top with no logo. I also added the footer at the bottom with social media icons.

I started working on the sections but I'm not sure what exactly to put on my site. I did look at Disney's actual site for the latest movie as well as another site for Maleficent 2 to get ideas on what I can put. I'm going to think about how exactly I want to set up my site tonight then tomorrow I'll start tackling the sections of my site.

Day 88: August 27, 2019

Before I started working on-site, I looked at fonts and sample movie trailers. I decided to keep things very simple for the movie page in regards to the sections but the examples gave me a good idea of what might need to be on the site. I'm not going to play with fonts this time on the site since I don't think the Star Wars fonts I was looking at look good for styling the rest of the page.

I used Dev Tools to look at the fonts the real movie page is using and they are using generic san-serif fonts so I'm going to do something similar with mine. During the work session, I concentrated on the sections. I deleted a lot of the navigation links I added yesterday and kept things very simple.

I added new sections to the site for the trailer, cast, and image gallery. I am going to use the image gallery article freeCodeCamp posted to create a CSS Grid image gallery for some of the movie images. I'm not sure how this will translate on other screen sizes but I'm going to try it and see how it goes.

Tomorrow I would like to add the remaining HTML for the last div tag in the press section and get all the image gallery images ready to go so I can spend more time concentrating on the CSS. The last 30 minutes were spent debugging and refactoring JS calculator code. Most of the refactoring didn't work and instead broke all the user tests.

I did use the test as an opportunity to practice ES6 a little bit. Some of the functions are arrow functions and I changed the variables to let and const. I am not 100% comfortable using ES6 so I spent most of the time trying to find documentation on Google.

Right now I'm trying to figure out the best way to refactor all the if statements I'm using in various functions. I'll see if I can find some more help in the ES6 documentation. I'm going to take one last final look at the project tomorrow to do some final refactoring then I'm going to move on to a different project.

Day 89: August 28, 2019

I didn't do a lot of refactoring on my JS Calculator I was planning to do today. Although I did some refactoring on the JS functions, most of my time was spent fixing some issues with some of my Github repositories. I got several e-mails from GitHub today about security alerts for several repositories.

So I spent time resolving the issues and looking at pull requests from Github on how to fix some of the issues. I'll still do some refactoring on the JS Calculator tomorrow to make up for the time I wasn't able to do today. I finished adding the rest of the HTML to the remaining sections on the website.

I changed one of the images in the img src attribute in the press section I put yesterday. I also removed the navbar class from the header. The rest of the HTML was new additions for the image gallery and the text tags for the last div tag in the press section.

Once I finished the HTML, I started to add some of the CSS to the website. Right now I'm working on the header on the mobile stylesheet. I'm trying to use a background color for the header but tomorrow I'd like to try using a background image and make the navigation row a different color.

I get a feeling there is something from the mobile header so I spent a lot of the time trying to fix the list items and the button. The button is especially giving me trouble. I tried moving it inside of the ul tags as a list item but I think I'll move the button back outside of the ul.

I might move the button to a different section. A good place for it might be the summary section. I'll try this tomorrow and see what it looks like.

The previewer is still acting up but I think this is due to the images I'm using. Tomorrow I'll see how it works in Dev Tools tomorrow as I work on the rest of the header.

Day 90: August 29, 2019

I got a lot done on the mobile version of the movie trailer website. Most of this time was spent revisiting the code I wrote yesterday to try out some of the ideas I wrote on my to-do list. I changed some of the Bootstrap classes I was using and added some headlines to sections as I went.

However, most of the time was spent adding CSS to various sections of the site. I managed to get the trailer, summary, and cast sections done. Tomorrow I'd like to finish the latest news section.

The big challenge tomorrow will be doing the image gallery and seeing if I can get the images for the gallery to work on small screens. The last 30 minutes were spent running the final tests and making final changes to the JS Calculator. I made some final changes to some of the functions, breaking a lot of my code when I was running tests.

Most of the changes were just updating some of my variables and functions so they were more descriptive and clear to someone else what my code was trying to do. I tried using as much ES6 documentation as possible. Some functions are set up exactly what I found in the ES6 documentation while others aren't.

I did this on purpose because I wasn't sure my code would be easier to read that way so I left some functions with more code the way they were for now. I might change these functions later as I work more with ES6.

Conclusion

Today I'm starting day 91. This isn't one of the last two days in August 2019. Day 91 is also the last day of the Disney Codes challenge.

It also marks the start of the last 10 days of 100 Days of Code. Now that the JavaScript Calculator is done, I'll be starting a brand new project today while I continue working on the movie trailer website for 30 Days, 30 Sites. What day are you on in 100 Days of Code? Share your progress in the comments below.

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