I'm at the halfway point of 100 Days of Code. Yesterday I finished day 50 for 100 Days of Code. Today's post is my official recap of everything that happened during days 41-50 of the challenge.
I got more notifications of issues for some Github projects so I spent today's sessions troubleshooting these errors instead of getting started on a brand-new project. I spent most of the time reading documentation and googling to fix the issues.
The first few minutes were building another Khan Academy project. The event invite project is similar to the 30 Days, 30 Sites project I'm working so I made a basic version. I didn't play with a lot of the CSS properties in the lesson and instead focused on creating a basic version that resembles an invite you might see.
I started to add more CSS to the modal code. I originally had padding and height set for some of the modal elements but I removed them to play around with the modal padding to see why it was moving the modal into the center of the page. I revisited the W3Schools modal tutorial and began having better luck with adding most of the CSS.
I don't want to start doing lots of styling but I might need to add some temporary CSS so I can see what I'm doing as I move into the JS. I'm almost in the home stretch with the modal. I figured out why I was getting errors in the console.
It turns out that I added the punctuation for the IDs and classes that were causing the onclick errors. As soon as I removed the punctuation in the variables, everything started to pass and it began to start acting as a modal. The only issue I have now when the modal closes, the backdrop remains dark.
I will try playing around with some of the JS code to see if I can get the backdrop to get back to normal. I started playing with the JS a little bit, but I wasn't having much luck. I think I might have to try setting the data attributes but I'm not 100% sure if that is the right solution.
I'm having issues getting the calculator to look just the way I want in HTML. I removed some of the Bootstrap classes and started playing around with the tags to see if I could get them in the center of the page. I added some CSS styles to help me see where everything is on the page.
I fixed the modal backdrop. After reading some of the documentation and some articles, I decided to just remove the data attributes on the modal button. Once I removed the data attributes I added some background color to the modal.
This makes a huge difference and would be removed when the modal is closed. I tried working on the responsive styles for the site but Dev Tools was acting up. When I was refreshing my site preview, Dev Tools immediately paused the site in the debugger.
I tried googling for a solution but I wasn't having much luck. I finally got frustrated and decided to switch gears by starting set up on the next project. Tomorrow I'm going to try again to see if I can get the responsive styles to work in the previewer but if I can't I'll just move on to the next project.
I decided to wrap all the buttons in a container with the buttons class. I used the buttons class to add styles and play with the margins. This worked and got the buttons in the center of the calculator.
I don't think the padding I set for the display is going to work as I start doing calculations with the JS later, but I'll wait until all the JS code is done to fix it. I did start on some of the JS. Right now I'm adding the variables.
Tomorrow I'd like to get user story 8 to pass the tests. I did some googling before starting this coding session to see what was going on with Dev Tools. I did manage to get it fixed, but I was just clicking around with elements in the source window.
Whatever I did I fixed everything. During the session, the navbar wasn't fitting on the entire page when it was on a mobile screen. I ended up removing the navbar Bootstrap classes which fixed the problem.
I'll just need to use CSS to replicate what I originally had. I started adding the mobile styles to the site. I was originally going to put all the styles in the same style sheet, but I decided to add a CSS folder and create separate files for different stylesheets for each.
Right now I'm working on the mobile styles. The biggest issue I have is the input is cutting off near the left side of the screen when the modal is open. Tomorrow I'll see if I can change the CSS so that doesn't happen on the mobile version of the modal.
The first 30 minutes were working on getting the user story seven to pass. I managed to get the test pass and get the preliminary code up for the buttons working. Right now nothing can display when the buttons are clicked.
Tomorrow I'm going to do some debugging for the functions I added to see if I can get something to appear on the span tag. I finished the mobile and responsive CSS styles. The input on the mobile still looks like it is being cut off near the left side.
I tried fixing the CSS but wasn't having much luck so I'll just leave it the way it is. I did start adding CSS styles for the responsive tablet version of the site. I spent a lot of time deciding on specific Bootstrap classes for the location and story sections.
I decided to use col-md-12 instead of col-md-6 since the columns looked as if the images were being squashed together. I added some padding for the p tag in the location section so there was a little bit of space between the image and text. Tomorrow I'm going to tackle the navbar on the desktop version. Without the Bootstrap classes, I'm going to need to figure out how to recreate the same thing using CSS.
After several attempts, I decided to remove my original JS code and start over. Right now the tests say all 9 tests are passing but in reality, only 6 tests pass. Tomorrow I'm going to see if I can get user story seven to pass again.
I didn't have much with getting the navigation to appear. I thought the problem was the screen sizes so I tried playing around with the media attribute in the head tag for all the stylesheets to see if I could fix it this way. It didn't work.
In the end, I moved the h1 navbar from the nav and added a class to the row for styling. So far it is working. As I was checking the mobile section, the background image is now moving towards the middle of the page. I'll see if I can get it to move a little bit to the left side of the page.
The first 30 minutes were getting the variables written down in the JS file. I looked mostly at the user stories to get a sense of what variables might be needed. So far I've got at least five variables.
I might need more but for now, I'm picking ones that I will need to pass user story seven. Oddly the tests are still passing for user stories 7 and 10. I think that is due to the display already being set to 0 in the HTML.
I was working on getting the clear button to work for user story seven but I'm debating on focusing on a different user story to pass first to see if the calculator button works. I spent all my time working on the CSS for the invitation. It took some time to copy and paste code but I managed to fix the issues with the mobile website.
I managed to get the responsive version done since there weren't too many changes. The one that is proving to be the biggest challenge is the main desktop version. Somehow the styles aren't appearing for the navigation bar.
I played with the screen sizes and even removed the links for the main style sheet but the styles I want still aren't appearing. I double-checked all my styles for the other two stylesheets and they are working just fine. So tomorrow I'm going to figure out what is wrong with the main stylesheet and get something to appear. I have removed the code I was using and am slowly adding it back to see what my site looks like without any of the styles.
I finally finished the event invitation. It turns out that I created another style file, not in the assets folder. This code was mixed with the styles in the style.css folder in the assets folder.
So I deleted the style file outside of the assets folder and updated the CSS in the style file in the assets folder. This fixed everything and the styles appeared. I did the last checks of all the code files before pushing them to the git repo.
I ran into problems here and got an error saying "error: cannot stat 'assets/css': Permission denied" so I had to google a bit to figure out what was wrong. I decided the best thing to do was close out all my files and text editor then restart everything. As soon as I did this, everything worked just fine.
I got a good head start on some of the HTML code. It isn't completely done. I finished all the setup.
Right now I've added the header and footer for the website. I started adding sections to the website. I'm not quite sure what to add so I did look at some other tourist attraction websites on the website to get an idea of what sections I can add to my site.
It kind of worked. I was able to get items to display on the calculator. It was all text though but I was proud to get at least something to appear on the display.
The totals did not appear either when I pressed the equal sign. However, I can use Dylan's code as a base to see what I can do to further add and change so it can work as a true calculator.
Are you doing the 100 Days of Code Challenge? Share your progress and projects in the comments below.
This post was originally published on July 21, 2019 on the blog BritishPandaChick Codes as 41-50. I made minor changes to the original post to work here on CodeNewbie.