Days 21-30

I just finished Day 30 so it is time for another recap of 100 Days of Code. Today's post is looking at the entries for days 21-30. Now that my portfolio is updated and live on the web, I've started two new projects.

One is the markdown previewer project in the freeCodeCamp Front End Libraries projects section. The other is another portfolio site for the 30 Days, 30 Sites coding challenge. The markdown previewer and portfolio aren't the only new projects I'm working on.

I finished working on the Quote Machine project I've been working on during days 11-20. I've also been working on a couple of Khan Academy coding projects. If you would like to learn more about the freeCodeCamp curriculum, you can head over to the freeCodeCamp website and make a free account.

Coding challenges are a great way to start building projects. 30 Days, 30 Sites is a coding challenge where developers build projects for 30 days. Each day you receive a prompt on what to build and you can start building. You can sign up using the link below.

==> Click here to sign up for the 30 Days, 30 Sites!

Day 21: June 21, 2019

The first 30 minutes were adding styles. I managed to get the fonts changed. I was trying out some of the Bootstrap classes to see if they could get the quote and author side by side for a few minutes.

Bootstrap isn't one of my favorite things to work with since my project always looks different depending on the screen size so I find myself regularly looking at the page in several sizes to see how everything looks. I added an h3 and the img tags for parts of my header. I organized the HTML with the header and main tags.

I spent some time trying to figure out the sizing of the quote box but decided to play around with the height first and get the header organized the way I wanted before moving to the quote box. I tried centering the image with some of the Bootstrap documentation but found I was having better luck with the padding. In the last 30 minutes, I added the Twitter icon to the tweet button and made other final tweaks to the project.

This included adding a footer at the bottom of the page and adding color. I tried putting some spacing between the new quote and tweet buttons for the mobile version. However, the changes weren't showing up on Dev Tools when I checked the iPhone preview.

For now, I'm going to leave it the way it is now but perhaps someday I'll go back into the project to change it. The style of this project is kept very simple. I thought about adding quotation marks around the quotes on the page but decided to leave it the way it is.

When I ran the final tests, the tweet button test failed. When I ran the tests again a couple more times, all the tests passed. While playing around with the page, it turns out that the tweet quote button just keeps showing the same quote even if the text on the page is showing a different quote. Tomorrow I'll see if I can fix the issue and get the button to reset the quote each time the new quote button is clicked.

Day 22: June 22, 2019

My focus was trying to fix the tweet button on the quote machine project so tweets change with a new quote. The first 30 minutes were trying to use tips from the freeCodeCamp forums to fix the tweet quote issue. Right now when you click the tweet button the window opens to show the quote that was on the page when the button was first clicked.

If the quote changes, the tweet won't change when the button is clicked and still shows the quote from the first time the button is clicked. So far I've not been able to find much advice on the freeCodeCamp forums for this issue. Right now I'm trying to use a function and create separate variables based on a method I saw in the forums.

I have a second method I used during the last 30 minutes. This method involved using a widget but it didn't work. I found a complicated method in the freeCodeCamp Forums that went back to using the encodeURIComponent method.

At first, it didn't work. I kept being taken to another page saying there was an error. However, this was due to me using some of the variables I used from a previous attempt.

Once I changed the variables, everything began working. Right now the tweet button is working again. I am thinking about adding quotation marks around the quote in the tweet tomorrow to see how that works. My biggest issue is the testing.

My tests were failing at first for the new-quote button and the tweet button. Yet running the tests again passed everything. Tomorrow I'll use some of the time to run through the tests and double-check everything.

Day 23: June 23, 2019

The first 30 minutes were doing final testing on the quote machine. When the tests run right when the page starts, only 11/12 tests pass. One situation had 10/12 tests passing.

It seems when the buttons aren't pressed, the tests fail. However, after testing the buttons and running the freeCodeCamp tests, all 12 tests passed. It seems that the tests will fail if the buttons aren't used but will work when they do.

After running several tests, I decided to leave my code since they all met the user stories. I might revisit this project in the future to see if I can get the tests the first time without any issues. The rest of that 30-minute session was getting the markdown previewer project set up.

I admit I'm confused about what this project is about. So I might play around with the example project freeCodeCamp has to just get an idea of what they want me to build. I think this is a good project to use React so I spent some time just reading the documentation on the React website to make sure I'm setting things up correctly.

I managed to add two HTML tags on the markdown previewer but I don't feel inspired to build this project since I'm not sure what I'm supposed to build. For the second 30-minute session, I decided to redo some of the sites I've been making for 30 Days, 30 Sites to do alongside the freeCodeCamp projects. I was feeling overwhelmed and confused with the project overview for the markdown previewer so I thought the 30 Days, 30 Sites project would help me clear my head plus create projects to show as examples for a coding challenge I'm creating.

The first few minutes of this session were just getting everything organized and doing the setup. I've got a good start on the HTML code and have some of the tags added. I will try finishing the HTML tomorrow. My goal for the 30 Days, 30 Sites portfolio is to get a better sense of Bootstrap and get it to work on mobile devices so I'll be focusing more on Bootstrap with this portfolio than the portfolio site I just made updates on.

Day 24: June 24, 2019

After yesterday's session, I played around with other people's markdown previewers including the freeCodeCamp example to get a better understanding of how the project works. This helped me get a better idea of what I will be building. I did add some more HTML tags to the markdown previewer.

Some of the tags will just be references for what when I'm building so they won't be in the project the entire time. The first 30 minutes were just trying to get React set up on CodePen correctly. This took more time than I anticipated since I added some of the wrong links for React in CodePen so I double-checked the documentation to make sure I was doing it right.

I didn't start a lot of the JavaScript yet. My goal tomorrow is to just make sure everything is connected before I even start trying to figure out the user stories. During the last 30 minutes, I added more HTML to the 30 Days, 30 Sites portfolio site.

I added Google Fonts and Font Awesome. I did start some of the CSS styles but some of my text isn't changing. I'm going to double-check my style sheet links tomorrow when I start adding more styles. I also would like to play around with the layout and start putting together the different versions of this website to see what Bootstrap classes I can use.

Day 25: June 25, 2019

The first 30 minutes were just trying to double-check and make sure React was set up correctly. The React documentation lied. The setup took me way longer than a minute to set up.

It turns out the HTML code I had added earlier was throwing off everything in React. So I changed around classes and removed most of the original code I added a few days ago. As soon as I changed the classes to ids and removed all the extra code, everything slowly started working.

I spent the first 30 minutes just trying to get "Hello World" to appear so I mostly was troubleshooting all the errors from the setup. I spent the time reading the documentation and using the documentation sample code to just get "Hello World" to appear. Once "Hello World" appeared, I started a bit of work trying to get the first user story done.

I’ll be working on this more tomorrow. The last 30 minutes were adding styles for the 30 Days, 30 Sites portfolio page. I figured out why my fonts weren't appearing on my site.

It turns out I used font-size instead of font-family. I didn't work too much with the HTML today but I did remove the contact section at the bottom. I began adding styles.

I spent a lot of time trying to change the color of jumbotron. Tomorrow I'm going to play around with the header's container class to see if I can add a background color for the header. Once I've got most of the styles done, I want to use the time to start playing around with the Bootstrap classes to see how everything looks on different mobile devices.

Day 26: June 26, 2019

The first 10 minutes were building a project for a Khan Academy course. Building this project keeps getting me thinking about building my very own blog site. The Khan Academy version is very simple since the project is meant to give users practice with font-family, font-style, and line-height.

Working on this project was simple, but I was thinking throughout the process of building my blog site again. Once the blog site was finished, I spent the rest of the first 30-minute session working on the Markdown Previewer. Most of this time was starting to set up the React Component.

I didn't do a lot of coding since I was reading the documentation on React and looking at posts on StackOverflow. I realized that the best way to start a user story is by creating a form. So in the render method, I began setting up the form for the editor and preview areas.

I did manage to find some documentation on the ReactJS site for textarea tag. I'm going to try the documentation's example tomorrow and see how I can customize it to be the editor for this project. The last 30 minutes were spent making more CSS updates to the 30 Days, 30 Sites portfolio.

I added some more CSS for the highlights and footer sections. Today I went back to HTML to start playing around with the Bootstrap classes. Right now I'm working on the mobile version of my portfolio site.

So far everything isn't looking all over the place like most of my previous Bootstrap projects. All I need to do is finish the footer then I'll move on to styling the responsive tablet version of this portfolio. I just need to add the float property to the footer.

Day 27: June 27, 2019

I added React Component to Markdown Previewer and then deleted it. The textarea documentation wasn't working for me. After finishing the documentation, I wasn't getting any results.

I kept looking at the React documentation, but I also looked at a couple of YouTube videos just to double-check my setup. I thought my original HTML was throwing off my code so I deleted it. It turns out that I was writing JSX wrong the entire time, especially in the render method.

I kept getting an error message in CodePen throughout today's session. Originally I was using h1 and h2 tags inside the render element and the error message saying adjacent tags must be wrapped in enclosing tags. After several attempts, the error message finally turned off as soon as I changed the h1 and h2 tags into div tags.

I decided to just keep the header tags just in the HTML and concentrate on building the react inside the render method. In the last 30 minutes, I played around with the footer in the 30 Days, 30 Sites portfolio site. I wasn't able to accomplish my vision yet for the footer.

I need to use row class on some of my elements to get them in a row. I will try that tomorrow. I didn't work on the mobile version of the portfolio today.

I saw Colt Steele using Bootstrap to make a navbar in an app when I was working on my coding tutorials and I wanted to try it for this project. So most of my time was spent looking at the Bootstrap documentation and getting a navbar at the top of the page. I removed the jumbotron classes and some of the header styles but I have a start on the navbar.

I just need to figure out how to get the nav links to line up beside each other just like in the documentation instead of on top of each other. Once the navbar is finished, I'll go back to working on getting the site on different screen sizes.

Day 28: June 28, 2019

The first 30 minutes were working on getting the editor to show text and for the previewer to show the results. I did use some documentation and Ben Brooke's YouTube tutorial to help. My biggest issue was the editor disappearing as I was working.

As I was working, my editor and preview kept trying to disappear as I was working in the JS file. I put the container element inside a div tag and everything stayed on a page. I forgot an underscore when I was setting the dangerouslySetInnerHTML attribute for the preview editor.

This gave me more errors in CodePen. I also need to remember when working with React I can use self-closing tags. While reading the documentation and watching Ben's video, I noticed some of the divs and textarea tags could be used as self-closing tags.

Right now my tags in React have opening and closing tags but I'll have to remember for future React projects to try some of the self-closing tags. During the last 30 minutes, I finished working on the navbar. I rearranged some of the nav classes and added a div with the row class.

This got everything on the navbar lined up. However, the headline and navigation items seem very close. I tried using justify-content-end to see if this would right align the list items while I float the items right.

It didn't work. The items just stayed in the same place. I decided to just leave them the way they are now so I could concentrate on other areas of the portfolio.

I added more div tags with the row class to highlight and footer. Initially, the highlights items weren't in a row. This was due to the classes I was using for the columns.

Once I changed the columns from col-xs to col the elements lined up nicely and neatly in a row. Tomorrow I will play around with the column sizes so everything doesn't look so cramped on the page.

Day 29: June 29, 2019

I spent 30 minutes trying to solve the fifth user story for the markdown previewer. Right now the test is failing. I have been using Ben Brooke's tutorial and doing some googling for documentation to see what I'm doing wrong.

I'm not having much luck. Right now the list markdowns are what is being addressed in the error message. Tomorrow I'm going to read through the list documentation to see what I'm doing wrong.

I'll still check the rest of the markdowns to make sure they pass but the tests are pointing to the list items so I'll see what I can find on Google. However, I enjoyed learning about the markdown documentation. I'll have to try out some of the markdowns in the future when I get a chance.

The last 30 minutes were more work on the 30 Days, 30 Sites portfolio page. I fixed the footer by changing the column sizes. I played around mostly with the highlights section of the portfolio site.

I added a headline Latest Posts and an h4 tag for the dates of each post. I removed the video I added earlier and replaced the p tags with images. I did add some styling to these elements but most of the style changes were adding padding and height properties.

I did add some styles to the navbar at the top of the header such as changing the colors and adding a background color. Most importantly I removed a container class the navbar and headline were wrapped around so it would extend the entire container just like the footer. Tomorrow I'm going to fix the padding for the images in the highlights and do some final style changes for the footer before I start seeing how the site looks on different screen sizes.

Day 30: June 30, 2019

During the first 30 minutes, I managed to get all the functionality for the markdown previewer done. I did some more googling and used Ben Brooke's YouTube tutorial to help me. It turns out that I forgot a space between the text and the hyphen.

As soon as I put a space, the previewer showed bullet points for the list items and the tests passed. The rest of the time was spent trying to get the optional tests to pass. I felt kind of silly about the break testing since I spent a lot of time googling how to use JavaScript to render carriage returns into line breaks when all along there was Marked.js documentation on how to do it in a much simpler way.

I was on the right track with the renderer object. I initially tried using inside marked.setOptions. However, Ben Brooke's method was much easier which involved creating a renderer variable and then creating a function that sets the renderer's link and target attributes. All the mandatory tests pass and the optional ones pass as well now so I just need to focus on styling the page.

The last 30 minutes were spent making changes to the 30 Days, 30 Sites portfolio site. I took a few minutes to play around with the padding for the highlights images and footer. Most of the time was spent on seeing how the site worked with different screen sizes.

This means playing with the Bootstrap classes and seeing how they looked in Dev Tools. I managed to get the mobile version done since there weren't too many changes. I mostly had issues trying to get the right Bootstrap classes for the footer and highlight posts. Tomorrow I'm going to see if I need to make any changes to the tablet screen size and make sure the desktop version needs any changes.

Conclusion

Tomorrow begins day 31. I'll still be working on the markdown previewer project by double-checking the tests and adding styles. The 30 Days, 30 Sites portfolio just needs a little bit more styling.

Then it will be done too. Are you doing the 100 Days of Code challenge or 30 Days, 30 Sites? Share your progress in the comments section below.

This post was originally published on June 30, 2019 on the blog BritishPandaChick Codes. I made minor changes to the original post to work here on CodeNewbie.