Sarah DyeYesterday 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.
You'll get the latest updates on what is happening with my JavaScript calculator. I finished the tourist attraction website for 30 Days, 30 Sites, and started a brand new project. My newest project is a product website inspired by the TV show Once Upon a Time.
Day 51: July 21, 2019
I spent the first 30 minutes trying to get the JavaScript Calculator tests to pass. I wasn't having much luck. So I restarted my code over again and set up the pseudo-code for user story seven.
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.
Tomorrow I'm going to finish the onclick function and see how to clear the values with JavaScript. I'll be using lots of the documentation tomorrow to see what I can find on doing this and getting 0 to show up in the display id without putting one in the HTML. 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 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.
Day 52: July 22, 2019
The first 30 minutes of the JavaScript Calculator didn't have a whole lot of coding. I was looking through Jon Duckett's JavaScript & jQuery book to get some help on how to pass user story seven. I eventually set up an onclick event handler which set the inputs and outputs to zero.
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.
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 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.
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 from this project and just using Flexbox only.
I started to play around with Flexbox on the mobile of the site. It is taking me a while since I'm using the CSS Tricks blog to review the properties. I did decide this website won't have any JavaScript so I can give all my attention to getting Flexbox working on the site.
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.
Day 55: July 25, 2019
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.
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. 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.
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. The last 30 minutes were doing more work on the JavaScript Calculator.
I spent most of the time googling where I found a freeCodeCamp article about using the data-action attribute in HTML only using JavaScript. So I commented out the jQuery code I've been working with and started using the freeCodeCamp article as a guide to setting up the HTML with the data-action attribute. 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. The last 30 minutes were working on the JavaScript Calculator. I ran into some errors yesterday at the end of yesterday's session so I did some debugging to the code.
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.
I moved around all the operators, clear button, and decimal. I gave the operators and clear button new classes in the HTML to use with the JavaScript. The biggest accomplishment was getting the buttons working with JavaScript.
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.
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 planned off the website. I didn't make as much progress since I decided to make a hamburger menu for the mobile site.
Most of the time was googling to see what properties I needed to use. Some websites suggested using JavaScript as well as CSS so I set up a JS file just in case I need it. If I don't, I'll delete it later.
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.
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.
After reading through the CSS Tricks blog post, I decided I needed to use JavaScript to get it to work so I did more googling. I found a W3Schools article for creating a mobile navigation bar so I decided to try it and see if I could get it 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.
The last 30 minutes of the session were debugging all the code I've written so far for the JavaScript Calculator. 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.
Conclusion
I'm not having much luck with the JavaScript Calculator but I'll see if I can figure out what is wrong during the next 10 days. I am planning on reaching out to some of my Facebook groups to get some help if I continue to struggle. I am hoping to finish the hamburger menu on the mobile version of my product site during the next ten days so I can start adding the rest of the CSS styles to the site.
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.
