Days 11-20

I just finished day 20 of 100 Days of Code so it is time for another post update. Today's post is looking at days 11-20 of my second round of 100 Days of Code. I'm still working on updating my portfolio and I've done a couple more Khan Academy projects. This time I've started a brand new project so I can start getting more practice with JavaScript.

Day 11: June 11, 2019

I’m still updating all the CSS on the portfolio site. Some of the sections on the desktop pages were indented so I played around with the CSS such as the padding and height. I removed some of the styles I had added previously.

The biggest addition was the buttons for the portfolio page. I set up a script file for the entire site and added the link to all index files. I set up a script file for JavaScript and added jQuery to my website.

I didn't work much with JavaScript since I was looking at the documentation for JavaScript and jQuery to see what would be the best way to move forward with making the button. At the moment jQuery seems like the best option but I think I'm going to try just using regular JavaScript to get it to work. I found one answer on StackOverflow that I've started.

I'm going to test it with one of the blog buttons to see if it works. If it doesn't, I'll google to see if I find another way.

Day 12: June 12, 2019

I made more changes to the index and CSS files. I removed the jQuery links I added yesterday and changed the sizes to the Font Awesome icons. I added another li tag for my Github.

I used the StackOverflow method I found yesterday. I tested it with some of the buttons on my website and everything worked perfectly. I added the onclick attribute to each button and created separate functions for each button.

I'm not sure how else I can add JavaScript to my portfolio site so I was doing some research on MDN web docs to see what else I could do. The last 30 minutes were adding new sections to the portfolio and about pages. I went into the CSS to add more styling on these sections so they would work on all devices. I'm going to wrap up most of the coding for the portfolio tomorrow since all that is left to do is change the copy.

Day 13: June 13, 2019

I set up the code files for my next project Random Quote Machine for 30 minutes. I didn't get quite a lot of coding done on this project due to my computer running slow plus I wasn't sure if I should use React or not. I originally added React to the project, but I decided at the last minute to not use it in favor of getting more practice with basic vanilla JavaScript and some jQuery.

In the CodePen I added some of the first few items from the test and made sure my files were connected. After fixing my computer, I started doing more revisions on my portfolio site. I removed some of the placeholder text to see how items would look with the real text added in there.

As soon as I changed the text for the skills third-width elements, the skills summary at the bottom was indented. I tried fixing it with the playing by adding padding to the skills p tags but it didn't do much. I will play around with the padding and height for the skills summary tomorrow.

Day 14: June 14, 2019

I made a basic travel website for Khan Academy's Travel webpage project. The basic travel website isn't too fancy. I focused on doing the styling rather than making a fancy-looking project.

I just need to remember to watch the names of my classes and ids since I forgot to change the selectors after I changed the names for different tags. I used a little bit of time to start adding more HTML to the Random Quote Machine. I added buttons for the clickable elements and started an array of quotes in my script file.

I'm going to see if I can get the quotes to appear tomorrow in the quote box and name the buttons in the quote box. The last 30 minutes were making more updates and changes to my portfolio site. I removed the portfolio images and used Font Awesome icons instead.

The design icon wasn't appearing on my website so I added the updated version of Font Awesome to my site. Once the style sheet was added, I started changing the padding and height to the Skills section. I decided to create a separate section for the other-skills instead of keeping it within the skills section id tag.

This fixed a lot of the indenting that came from changing the padding. I made changes to the rest of the skills icons on mobile and responsive style sheets. I need to finish adding styles to the new #other-skills section on all the style sheets tomorrow.

Day 15: June 15, 2019

I decided to change directions on my quote machine project so I changed all the quotes I added yesterday. As soon as I did this, I started second-guessing myself again on the quotes but decided to leave them the way they are now. I started to work on the first user story which is upon loading the machine a random quote is displayed in the text element.

I managed to set up the function and create variables for the random number and random quote. However, I'm wondering if I should just use a regular array for the quotes instead of objects. I did some googling and am looking in JavaScript & jQuery to read a bit more about JS objects.

During the last 30 minutes, I adjusted the height and padding for the skills and other-skills sections on the home page on all the style sheets. I started adding more copy to the p tags on the Home page to see how this would impact the styles for the sections. It was a good thing I checked since the other-skills section indented as soon as I changed the height of the skills section.

I started changing the padding on the portfolio page. This caused the elements to stack on each other instead of being side by side. I'm going to play around with them tomorrow to see if I can improve the spacing a bit.

Day 16: June 16, 2019

After giving things lots of thought, I decided to change directions again on the quote machine. I changed the objects to separate variables for the quotes and the authors. I was having issues getting any text to appear on my site.

It turns out that I forgot the quotation marks around the ids which is why nothing was appearing. As soon as I added the quotation marks everything started to appear on the browser. I managed to get the new quote button to work.

I'm not sure how to get the tweets to open so I did some googling to see what I could find. During the last 30 minutes, I tried adjusting the spacing and padding for the project bullet points. I ended up adjusting the height of the sections and padding on the images to make a few improvements.

I added more content to the portfolio page. I need to double-check mobile and responsive pages tomorrow to see how the new content impacts the styles. I was adjusting the community section and managed to switch the two half-width sections around. I need to double-check the height of these sections in the desktop file to see if the contact section doesn't indent itself.

Day 17: June 17, 2019

I spent 30 minutes working on the tweet-quote button. I did lots of googling to just see how to get the window to open. The biggest challenge was getting the href attribute to work.

So far I've managed to get the quote and the author to appear in the Tweet window. At first, I kept getting undefined in the window. After looking at the Twitter Developers documentation and doing more searching on Stack Overflow, I was able to get the quote to appear.

When I tried getting the quotation marks to appear, my site stopped working. I ran the tests and only one test isn't passing and that is the tweet button test. I'm going to see tomorrow if there is a better way to get the tweet button to work.

During the last 30 minutes, I removed ul and li tags for publications, awards, and certifications. I used p tags for most of these elements. I created a brand new section for awards and added styles to all the style sheets.

I changed some font sizes for li tags on my responsive style sheet so everything stayed consistent. Tomorrow I'd like to play with the padding of sections to see if I can push elements further away from the left side of the screen.

Day 18: June 18, 2019

I tried getting the tweet button to work. The first 30 minutes were trying to get the tweet button to work. I wasn't able to make much progress.

I did read some of the forum posts for people's tweet button to see if I could have better luck. I tried using the attr() method for the link. I even created a global tweet variable to put part of the Twitter URL inside.

However, none of my attempts worked. I'll keep googling and reading through the freeCodeCamp documentation. Right now the button doesn't work at all and the tweet window doesn't even open.

Luckily the other tests are still passing which means I can dedicate more time to the tweet button. The last 30 minutes were trying to get spacing for my portfolio page. I'm not 100% satisfied with the images on my mobile and responsive portfolio sites.

I might remove the padding and just not make the icons centered in each section. Right now I'm working on adding height to the portfolio items in my mobile version of my portfolio site to see if it will help with the spacing. I'll play around with the padding for these elements tomorrow and see if I can improve the spacing on the responsive version of my portfolio site.

Day 19: June 19, 2019

The first 30 minutes were on getting the tweet button to work. I added back the original code I was using and began playing around with creating different functions to get them to work. It didn't work.

I did more research on the freeCodeCamp forums where I found about encodeURIComponent on one of the posts. I tried this by creating two variables for the text and the link. This managed to work. However, the freeCodeCamp tests still didn't pass.

It turns out freeCodeCamp wants the intent part of the URL in the href attribute on the HTML. I did more research on the freeCodeCamp forums and found a method I'd like to try which adds the href attribute to a link in JavaScript. I saved the link to read tomorrow in my code and will try using the attr() again to see how it works.

The last 30 minutes were updating styles for the responsive and desktop versions of the website. I just need to make some small changes to the portfolio page's award section on the main style sheet then portfolio updates will be done. I checked all versions of my site on Dev Tools and was getting mixed results when I looked at specific versions of the site.

My responsive site initially didn't fill the entire screen. It would stay like this even when I refreshed the page. However, when I exited out of Dev Tools and reopened it, it went back to the version I saw yesterday. I'll need to double-check all versions of my site tomorrow before it goes live on the web.

Day 20: June 20, 2019

In the first 30 minutes, I began building a recipe book for one of the Khan Academy HTML projects. I made a very basic version of this site on the Khan Academy platform. I spent a lot of time trying to organize my HTML tags.

I decided to add section tags to organize the recipes a little bit better. The lesson limited a lot of the styling I could do on the page so I might make a better version someday later. The last few minutes of this session were doing the final tweaks on my portfolio site.

Now that is done, I have now made everything live on my site. The last 30 minutes were figuring out the tweet button. I read the article I saved in the pen and tried it in my code.

It didn't work so I went back into the forums to see if I could get more help. I tried my theory with the tweet intent URL in the HTML and strangely all my tests passed this way but the button didn't work. It took a few minutes, but I finally figured it out.

I used what I originally planned which was putting the tweet intent link in a variable. I then used the attr() method to set the href attribute then created the URL with the tweet intent, randomQuote, and randomAuthor variables. This made the last test pass.

All I have left to do is add styles to the page. I'm going to play with the Bootstrap tomorrow.

Conclusion

20 days are done! Tomorrow I start day 21 where I'll be adding more styles to my quote machine project. Now that the portfolio site is done, I'll be starting a brand new project.

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

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