Sarah DyeI'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 share updates on everything that happened for the event invitation. I also introduce two new projects. One is the JavaScript Calculator for freeCodeCamp. The second project is a tourist attraction website for the 30 Days, 30 Sites challenge.
Day 41: July 11, 2019
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.
Day 42: July 12, 2019
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.
Khan Academy limits most of the styling you can do on their platform so I wasn't able to do as much as I would like. Perhaps someday I'll make a better invite on CodePen or locally on my computer. After the Khan Academy invite, I started to set up the JavaScript calculator.
I'm not going to use React for this project and am going to use jQuery as well as regular vanilla JavaScript if possible. I just need to finish the rest of the setup tomorrow. This includes adding code for the first three user stories.
Perhaps I'll be able to start tackling the JavaScript tomorrow. I finished removing the Bootstrap modal code. I organized the modal code into different div tags for the modal header, body, and footer.
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 started adding JavaScript. So far the variables are done. I am getting an error saying the onclick property isn't working so tomorrow I'm going to be doing some debugging to see onclick isn't working despite the button allowing the modal to open when it is clicked.
Day 43: July 13, 2019
The first 30 minutes were just setting up the JavaScript Calculator. I'm starting to second guess what I'm doing based on reading the user stories but I decided to try seeing if I can make the tests without React. Most of the time was spent trying to get the HTML organized the way I wanted to and just trying to get the buttons to mimic what you would see on a calculator.
I added a button for the AC but I'm leaning towards deleting it since it isn't required by the user stories. I think I'm going to DRY up the code I have tomorrow before I tackle the JavaScript and particularly see about getting the calculator centered in the middle of the page. Right now everything is on the left side. While the display can be centered on the page, the buttons weren't cooperating.
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.
Day 44: July 14, 2019
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.
This is mostly old code I used before but it is temporary. Once all the JavaScript is added, I'll replace all the old styles with brand-new code. Tomorrow I'm going to play around with the CSS to see if I can get it to look like a calculator on CodePen instead of a bunch of buttons grouped in the middle of 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.
Day 45: July 15, 2019
The first 30 minutes were playing with the Bootstrap for the JavaScript Calculator. I added back the divs with the row class for the buttons. I tried playing with the margin for the a tags but it was creating too big of a space between the buttons.
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.
Day 46: July 16, 2019
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.
Day 47: July 17, 2019
The first 30 minutes were trying to fix my JavaScript Calculator. I tried getting the calculator to show the inputs but nothing was appearing on the screen. I didn't spend much time coding but reading documentation and googling.
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.
Day 48: July 18, 2019
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.
Day 49: July 19, 2019
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.
Tomorrow it is time to get back to the tourist attraction website! The last 30 minutes were more work on the JavaScript Calculator. I didn't do as much coding instead was reading jQuery documentation and using the Jon Duckett JavaScript & jQuery book to help me.
I watched Dylan Israel's Calculator video and felt maybe that was the right direction to go. Tomorrow I'm going to use what I've learned from Dylan's video to help with the JavaScript.
Day 50: July 20, 2019
I got a good head start on some of the HTML code. It isn't completely done. I finished all the setup.
I'm debating on whether I should add some JavaScript to this site or not. The plan for this project is to work with CSS Flexbox mostly. I still have some Bootstrap because I do want some practice but mostly I'd like to use Flexbox the right way this time.
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.
Hopefully tomorrow I can finish the HTML and get a good start on the CSS. During the last 30 minutes, I worked on the JavaScript Calculator. I revisited and coded along with Dylan's calculator to see how that works.
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.
Conclusion
I'm going to start day 51 later today. I'm planning on figuring out what is going wrong with my JavaScript Calculator so I can continue to work on the user stories. I will also be starting to put together the tourist attraction website using Flexbox.
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 DEV.
