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.
I decided to remove 0 from the HTML since it was throwing off my tests. So far I've set up variables for the input and outputs. I was setting up an onclick function for the clear button to see if that might work.
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 I plan 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 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.
I used the html method to set everything to 0. 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. I 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 add 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.
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 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 try to get them to show on the display.
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 from 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 and then added to 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 will 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.
The first 30 minutes didn't 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 if 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. I 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 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.
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. I'm 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 the inputs array. It didn't work but I think I need the jQuery selector I was using to select the buttons and then have the function run the for loop.
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.
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.
I spent a little more time in the HTML & CSS than usual today. 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.
They only said they were working in the console, but it was better than an error message. Right now I'm starting to remove the console.logs I've made in the if-else statements and started adding code to check for the data attributes and replacing the 0 in the display with the input using the textContent property.
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 planned 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 freeCodeCamp 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.
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.
Right now I've got a function ready in the JS file. The console says everything works but when I click the icon nothing opens. So I'm going to do some debugging and see how to fix it tomorrow.
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.
This post was originally published July 31, 2019 on the blog BritishPandaChick Codes. I made tweaks to the original post for DEV.