Days 31-40

Day 40 is now finished so it is time to do another 100 Days of Code recap. This post is looking at everything that happened during days 31-40. During these past ten days, I wrapped up the markdown previewer and 30 Days, 30 Sites portfolio site.

I started two brand-new projects. One is the drum machine from freeCodeCamp. The other is the 30 Days, 30 Sites event invitation.

Day 31: July 1, 2019

The first 30 minutes were mostly reading the React documentation. I wanted to try setting up React on my computer so I could see how the markdown previewer project worked locally. I wasn't having any luck getting the project working.

I tried 4-5 tutorials to get everything set up but it wasn't working. I'll try the Create React App method again later to see if I can get it to work. During the last 30 minutes, I was working on the CSS for the 30 Days, 30 Sites portfolio.

The mobile styles were not appearing on the Dev Tools preview. Once I exited out of the preview and played with the window sizes, the styles began appearing. At the end of the session, I checked the previewer again to see what appeared and the styles I've been adding over the past 30 minutes were appearing in different sections throughout the page.

However, the styles are just fine when I adjust the browser window according to the pixel size. I've been adding most of the CSS styles for the mobile version of the site so I'll check tomorrow how everything looks in Dev Tools and see if I can fix it.

Day 32: July 2, 2019

The first 30 minutes were adding styles to the Markdown Previewer. I took a couple of minutes to run through the tests and make sure everything was passing both on the CodePen pen and my local computer. I changed around some of the variable names and added some documentation for specific parts of the code.

Writing the comments was a little bit harder than I anticipated since the code wasn't appearing in the editor right away but I managed to add a couple of comments. The rest of the time was adjusting the CSS. I added a paragraph tag in the HTML for the directions and changed the columns for the container to rows.

Then I just played around with the padding and the height. I just need to make a few smaller changes to this project's CSS tomorrow then it should be ready to be submitted. The last 30 minutes were making more changes and updates to the 30 Days, 30 Sites portfolio page.

I figured out what was wrong with the site preview in Dev Tools. I forgot to add a meta tag for the viewport. As soon as I added this in the head tag, the preview inside Dev Tools changed to reflect the changes I was adding.

After fixing the viewport, I managed to get the mobile version of my site done. I was having issues with the buttons still trying to be right beside the images. However, adding the btn-block class immediately put the buttons underneath the images in the highlight class. Tomorrow I need to finish adding styles to the tablet version of my site and then see how everything looks in the desktop version.

Day 33: July 3, 2019

During the first 30 minutes, I finished updating the CSS styles for the Markdown Previewer project. These styles were less adding colors but getting the layout just right and playing with the padding. Any styling was for the newest additions such as the header, footer, and main tags.

I did rearrange the markdowns in the JS Pen file. The CodePen file is done but I am going to test all the changes I made locally on my computer to see how everything looks. The last 30 minutes were just wrapping up final projects.

The first few minutes were just adding the rest of the changes to the local version of the Markdown Previewer and running the tests to make sure everything worked. I didn't need one line of code at the top for the React Component so I deleted it and just used import React from 'react'. Once the Markdown Previewer was done, I wrapped up styles for the 30 Days, 30 Sites portfolio.

I added mostly Bootstrap classes so it would work on medium and large-size screens but I did add a little bit of padding to certain elements for the large screen size. Once those changes were done, I used the leftover time to start setting up for one of tomorrow's new projects. Tomorrow my goal is to focus on getting the event invitation completely set up and ready so I can get most of the HTML done.

Day 34: July 4, 2019

The first 30 minutes were setting up the Drum Machine. I was setting up both the CodePen and a local one. After the debacle with the Markdown Previewer, setting up the local version was much easier and quicker.

I managed to get two user stories to pass. These stories were mostly the elements for the drum-machine and display. I was working on the drum pad elements.

I wasn't sure where to get the sounds so I was looking at Ben Brooke's tutorial just to see where he got his sounds. I found the link in his comments section and managed to add one sound in a sounds object. Tomorrow I'll finish adding the sounds then I'll see getting the audio element test to pass.

The last 30 minutes were finishing organizing the 30 Days, 30 Sites event invitation. I started adding the HTML code for the project. I'm still using parts of the original version during the first round of 100 days of Code but most of the time was getting most of the code organized.

I'll add more Bootstrap as I go throughout the project. I did add some additions such as the navbar at the top of the page. I did start some CSS styles for the project. Right now I'm working on getting the navbar ready before I move on to the rest of the header.

Day 35: July 5, 2019

During the first 30 minutes, all my tests for the drum machine I completed yesterday failed during one test run. At the time, I had individual drum pad elements within the display div tag which were passing as part of the initial tests. When I was adding a React Component, all the tests suddenly started to fail.

So I spent a good chunk of the time figuring out why the tests weren't passing. I had to rewrite my original code several times but the original tests I passed yesterday turned green again. While watching Ben Brooke's tutorial, I decided to try out his React Component method for the Drum Pad element.

I set up most of the React Component so far. I just need to figure out how to create the unique ids and get the drum pad elements to trigger. In the last 30 minutes, I was trying to figure out how to style the navbar.

The links were still stacked upon each other so I was playing around with the Bootstrap classes. I was trying to use the documentation examples to troubleshoot the issues. Eventually, I managed to get the link elements to be in line with each other by rearranging the Bootstrap classes.

I did start adding styles for the header. Tomorrow I will concentrate on getting the header to work particularly getting the text in the middle of the background image if possible.

Day 36: July 6, 2019

I did some more work on the react components for the drum machine. Before I started working, I ran more tests to see if all the tests I passed yesterday were still green. At first, they weren't so I did some debugging.

It turns out the errors were coming from the sounds variable and how they were called in the return method. As soon as I fixed the issue, the tests passed. Most of my time was spent trying to get the fourth test to pass.

At the end of the 30-minute session, I was getting errors for the user story test five. The Q id isn't triggering when it is called which is causing both tests five and six to fail. So far I checked the Q object to see if there were any errors.

Tomorrow I'll do more debugging to see if I can fix the issue. I finished the header on the 30 Days, 30 Sites portfolio. Although I used some of my original code from the first round of 100 Days of Code, I played around with the styles for the background image.

A lot of time was spent on the story section. The columns were stacked on top of each other. It turns out that I forgot the row class which helps get the elements in line with each other.

Tomorrow I'll have to remember to use the row class when I work on the location. I added styles for three sections today. I just need to finish the celebration section then I can start tackling location one tomorrow.

I need to start thinking of how to add JavaScript to this project. I might create a modal for RSVP like the W3Schools example but I'm not sure yet.

Day 37: July 7, 2019

During the first 30 minutes, I spent a lot of time running the tests and making sure everything was passing. After some debugging, I focused on getting user story 5 to pass to get the audio to trigger when the drum pad element is clicked. I started adding some CSS styles for the drum pad elements.

Initially, they didn't appear on the screen because I misspelled the id name. Right now these styles are temporary. I plan on updating the styles once all the React is done.

I spent a few minutes trying to fix the padding for the header greeting. I managed to get it centered in the middle of the background image, but I tried getting the text over towards the left so it wasn't covering Emma's face. However, I ran into issues with the text editor so I just left it the way it is for now.

I might play around with it again later. I added a new p tag in the location section. Out of the two sections I did today, location is where I spent most of my time.

I was playing around with the columns, image, and text to get all the elements the right size and spacing right. I decided I am going to make a modal for the invitation. Tomorrow I'm going to finish adding styles for the rest of the site before I tackle the JavaScript. I'll do the responsive design once the JavaScript is all done.

Day 38: July 8, 2019

I passed the remaining user stories for the drum machine. Before I started working on the user story tests, I did run the tests to make sure the existing tests still passed. The hardest test to pass was the user story six.

I put charCodeA instead of CharCodeAt in my handleKeyDown function. This messed up the componentDidMount and componentWillUnmount. Now that the JavaScipt is done, tomorrow I will be doing more updates on the CSS.

Response and footer sections in the event invitation are now styled. Most of the time was spent getting started on the modal. I added the modal to my HTML and started adding the styles. I began adding some of the JavaScript to the modal.

Right now the modal isn't showing when I click the button so I'm going to have to do some troubleshooting tomorrow. The console is saying the issue is for the close button. Tomorrow I'm going to debug JavaScript and see if I can get it to appear.

Day 39: July 9, 2019

I started tweaking some of the JavaScript for the drum machine app. The biggest change was the sounds variable. I changed some of the sounds and replaced the variable data with sounds.

I made changes to the rest of the JavaScript file. I did run lots of tests to make sure everything was still passing. The rest of the time was starting to add styles for the app.

The header styles are done and I'm halfway through the styles for the app. Tomorrow I'll finish the app styles and the footer. I was trying to get the drum pads to be in rows of three but I was putting the Bootstrap classes in the render function for the app instead of the drum pads.

Tomorrow I'd like to try adding Bootstrap classes for the DrumPad render function to see what happens. I spent 30 minutes working on the modal. I didn't have much success.

I did resolve the error with the close button. However, the modal is still not appearing on the screen. When I opened Dev Tools, everything worked smoothly.

I spent lots of time looking at JavaScript documentation and reading articles to try different techniques but nothing changed. I think the issue might be in the event listeners and functions. Right now I am trying another tutorial to see if that works. If it doesn't, I'm going to redo the pseudo code and take away the CSS to see if I can get a basic version to appear.

Day 40: July 10, 2019

I finished the drum machine in the first 30 minutes. I looked over the notes from yesterday's log and thought about trying to put the drum pads in columns stacked on top of each other. However, I decided not to try it since I played around with the padding and height for the drum pads in a way I liked and I didn't want to change it.

Maybe someday I'll revisit the project and try putting the drum pads in rows of three. I ran the tests to make sure everything passed on CodePen then I ran the tests for my local file to ensure everything was consistent. When I saw the local preview, the id was still close to the border so I made a few adjustments to the padding, height, and margins for the drum pad elements.

I added the rest of the remaining styles for the footer and drum pads. I spent all my time trying to get the RSVP button to work. The original documentation I was trying to use wasn't working.

So I did some googling to see what I could find. In the end, I decided to start over completely. I removed all the CSS and JavaScript code I had written. I began to redo the modal code itself.

I read online to add links to the jQuery and Bootstrap JS files so I added those links to see if they would help. Right now I'm going back to using the W3Schools documentation. I'm going to also check out the Bootstrap documentation to see if I can at least get something to appear on the site.

Conclusion

I start day 41 tomorrow. Now that the drum machine is finished, I'll be starting to set up another JavaScript project tomorrow as I continue to work on the 30 Days, 30 Sites event invitation to see if I can get the modal to work. Once the modal is up and running, I just need to add the responsive styles so it can work on all devices then it will be finished.

Are you doing 100 Days of Code? Share your progress in the comments below.

This post was originally published July 11, 2019 on the blog BritishPandaChick Codes. I made minor changes to the original post to work here on DEV.