Originally published July 31, 2019 on BritishPandaChick Codes. I made tweaks to the original post for The Practical Dev.
Yesterday I finished day 60 of 100 Days of Code. Today's post is another recap of the past ten days of 100 Days of Code. This recap looks at the log entries I've written during days 51-60.
Day 51: July 21, 2019
I managed to get all the HTML added to the 30 Days, 30 Sites tourist attraction website. I get a feeling I'll be adding more HTML as I go so I'll probably add more as I add more CSS. I started adding CSS to the website. So far I've managed to get some of the navbar done. I'm using some of the colors I used in the original version I made from round one.
Right now my plan is to get most of the CSS on the site before I start playing around with Flexbox since that will impact lots of responsive styles. I added a form element in the HTML this time. It won't actually work but I want to practice putting a form element on a website. I'm also using this project to use the iframe tag more by adding sections for Google Maps or video.
Day 52: July 22, 2019
This passed the test. Right now I'm working on user story 8. I didn't have much luck today since it would cause the tests for user story seven to pass. Tomorrow I'll see if I can get the numbers I input to appear on the calculator without messing up the user story seven test.
Mostly worked on the CSS styles for 30 Days, 30 Sites for tourist attraction website. I did go back into the HTML a little bit to change two classes into ids as well as adding some Bootstrap classes. I managed to get most of the styles done for the header, navbar, and discover sections.
I spent a lot of time trying to get the header background image and text just right. It took more padding than I expected to get the h2 headline in the center of the page. The biggest thing I've learned today is to keep headlines out of the row div tag.
The row class causes the headlines and any elements that follow them to be mixed up all over the page. Putting the headlines outside of the row class prevents this from happening and allows Bootstrap to get the columns just right.
Day 53: July 23, 2019
Mostly used CSS for today's activities. At the beginning of the session, I went back into the discover section and tried adding some padding between the three p tags so there was a little more space between them.
It didn't work so I just left them the way they are for now. I spent most of the time working on the map, video, and festivals section. The iframe tags were a little bit harder to style than I anticipated.
I found myself spending lots of time moving back and forth between the width and height to get everything looking just right. Padding proved to be a big issue for the festivals section. I spent a lot of time adjusting the padding so the text wasn't near the top of the background image.
The last 30 minutes were more attempts on trying to get the user story 8 test to pass. I didn't do too much testing except to make sure everything I worked on yesterday was still passing. Today I was working on getting the input numbers to display. I didn't do too much coding since I was using the Jon Duckett book to see what I could use.
Based on the user story, there need to be if-else statements to see if the number begins with zeros and to look out for decimals. With the way my code is written, I need to use the push method to add the inputs to the array. I just am not sure how to get the numbers to display.
I started a for loop but I'm thinking about going back to the switch statement where I'll have each case joining the inputs together. Then I'll use the html method to trying to get them to show on the display.
Day 54: July 24, 2019
I got the main stylesheet finished with all the styles. Although these styles are done, I commented them out in the index file to play around with the Flexbox. I'm not sure if Flexbox will be 100% effective with Bootstrap so I'm debating on deleting Bootstrap off this project and just using Flexbox only.
The last 30 minutes were working on the JS calculator. I decided the for loop wasn't the best way to go so I was trying to make the switch statement work. I think the number ids need to be selected when they are clicked then added into the inputs array. Then the inputs array is updated to display everything on the calculator.
I spent time trying to get the switch statement to work but I gave up when it wasn't working. I think tomorrow I'm going to try the switch statement again and set up some pseudo-code. Then I'll see if I can get a least zero working on the screen.
Day 55: July 25, 2019
The first 30 minutes didn't really involve any coding but preparing for coding. I spent most of the time using paper and pencil to create a flowchart to help me figure out some of the user stories. After the flow chart was finished, I used the last few minutes of that session to start trying to get the buttons for the numbers to work.
So far I'm trying to use if-else statements if the a tag is clicked. Right now I'm trying to do it individually with a couple of numbers to see it will work then trying with the other numbers. I did some googling before starting this session and it turns out that Flexbox is already included in Bootstrap 4 so I don't need to add more Flexbox classes to this site.
Therefore I'm going to just use this project as a way to get more practice with Bootstrap. The next project will be the Flexbox project without any Bootstrap.
Mostly worked with the CSS today. Mobile CSS is almost done. I just need to finish adding CSS to two sections and it will be done.
I had some issues checking the preview in Dev Tools. The previewer looked as if it was cutting off parts of my site. Eventually, I just exited out of the previewer view and played with the window sizes with Dev Tools on to double-check my styles. Tomorrow before I start the responsive styles I'm going to use the previewer one last time to see how everything looks.
Day 56: July 26, 2019
I finished the tourist attraction website. I added the remaining CSS styles for mobile, responsive, and main stylesheets. I checked the previewer in Dev Tools to see how everything looked on the screen. I had no problems with the previewer today. THE only HTML I added was the Bootstrap classes for medium and large screens.
I didn't have to make too many tweaks to the CSS but I did use the CSS to play around with the width and height of the iframe, video, and input tags. The last 30 minutes were spent working on the JS calculator. Still not having much success getting the calculator to work.
I decided to scrap what I was originally working on and use a function with a for loop that would look at the inputs. So first if statement checks to see if the input begins with zero. If that is false, then it would push the input to inputs array. It didn't work but I think I need the jQuery selector I was using to select the buttons then have the function run the for loop.
Day 57: July 27, 2019
Today was all about setting up for the project and getting everything ready. This means setting up the Github repo, organizing CSS folders, getting all the links needed to make this project, and more. I'm not using Bootstrap on this project and am going to instead use Flexbox.
Right now the focus is on getting the HTML on the page. The challenge with this website is trying to figure out what Mr. Gold would want on his website. I started looking at a couple of examples to get an idea of what to possibly put.
So far I'm planning on using the images from the round one version of the site but it is hard knowing what to put on the website since he's a mysterious character on the show. So I'm going to look at a few real-life examples to see how to model this website for Mr. Gold.
So far it isn't working but tomorrow I'm going to keep trying with this article's suggestion and see if that works. I'll see outside of the challenge if I can get some advice on my code in the meantime to see if I was heading in the right direction with my code.
Day 58: July 28, 2019
I added most of the HTML to the product site. I found a pawnshop website that I liked online and used it as an influence for Mr. Gold's website. I add a couple more links to the navigation. The rest of the time was adding the rest of the sections to the website.
I deleted a section planned for the location and moved it up near the top near the logo area. I was able to add a note from the Gold family and created the preview section which included images from the round one website. I did get a head start on the mobile CSS by adding some of the basic styles. Tomorrow I'm still planning on doing the styles but I might add some more HTML sections to the site as well as extra classes to help work with flexbox.
I changed the div tags to buttons and moved the display inside the calculator id. This messed up the CSS a little bit so I made some tweaks to get a working version ready to go. I moved around all the operators, clear button and decimal.
Day 59: July 29, 2019
I decided not to add more sections to the product site. I took a look at the site before I started today's session and decided to leave what I originally planning off the website. I didn't make as much progress since I decided to make a hamburger menu for the mobile site.
So far I'm using the CSS Tricks post to help me. Right now the navbar is hidden. So I'll see how to toggle everything tomorrow.
The last 30 minutes were spent working on the JS Calculator. I'm using the Free Code Camp article to help me try getting the basic JS functions to work. Right now the user story tests are passing 9/16.
One I think is passing since there is a 0 typed in the display. The buttons are still able to console.log what kind of buttons they are but I'm working on trying to get the buttons to display numbers on the screen. Tomorrow I'll do some more debugging before I progress further with my code to see if I can fix it.
Day 60: July 30, 2019
The first 30 minutes were just working on getting the hamburger menu to work. I rearranged the hamburger icon in the HTML and was trying to get the icon next to the h1 tag. I gave up after several attempts and decided to focus on getting the hamburger menu to work.
The console is showing no errors but the calculator still isn't displaying any of the numbers. Today only 7 out of 16 user story tests are passing. Since I've got a lot of code written so far, tomorrow I'm going to organize the code back into separate functions and call them inside keys.addEventListener instead of having tons of if-else statements. I'll use this as an opportunity to do more debugging and test each function to see what happens.
Are you doing the 100 Days of Code Challenge or the Disney Codes Challenge? Share your progress and projects in the comments below.