Earlier today I posted a blog on what I been doing the last 2 weeks and why I haven't been posting. Although my internet presence went down my learning never stopped! Today I was able to put what I have learned from FreeCodeCamp's youtube tutorial into action.

I began with the usual question "What project should I make?". I quickly decided to create an email collector. For some strange reason I always attempt this project as my knowledge progresses. I guess I see it as a useful tool for any site, unfortunately I wasn't successful in what I actually wanted once again.

I originally wanted to write a program that would collect an email from the user as a "subscriber" and then store that email to a .txt file. A few hiccups here and there but I was able to write a basic email collector using HTML CSS and JS. I then struggled with the actual action of storing the email. Using Python I knew this was achievable so I figured why not JS. I outsourced my problem and received a rude response but it did put things into perspective. I was told I should read up more on the difference between backend and frontend. The reason I can never actually complete what I want is because I been dealing with the frontend of a site. I was able to complete the project by just having the email assigned to an array for now and will eventually come back to it once more knowledgable of the back end.

My first project of the day was short lived. I quickly began to think of a 2nd project I can work on and I sprung an idea from what I previously learned with the google chrome extension I made using the youtube tutorial. Since I've worked with the input HTML tag in JS I wanted to test my understanding. Using if statements I wanted to create a sign in and verification "form". I decided to use a previous project I made using HTML and CSS. I actually created this project back then with hopes of adding JS to it in order to validate info one day.

I was able to complete this project using if statements to check the user input against a JS object. I realized this project probably isn’t the best for JS because again I was thinking about a feature that should be used through the back end since sensitive information like email and password would be viewable through the browser.

Most of my project thinking has been coming from what I have done with Python which is a backend language. So I made my next project based off a new prospective.

I wanted to create something that didn’t deal with sensitive information. I really wanted to display my understanding of DOM manipulation and the click event listener. With inspiration from google I decided to create a RGB color generator that will have a button when clicked displays a random color while also providing the rgb code which then a user can copy and paste into their project.

The first draft of my code was nothing compared to the end result as a learned through a few errors. I learned how to use JS set attribute syntax and was able to set a style attribute with in the HTML body tag giving it a background-color value. I then created a function using Math.random() to generate random numbers 0-255 representing the possible color combinations in rgb. I then added my event listener which reacted once my color generator button was clicked. By adding my random number function and my previously established attribute I was able to set a value for each rgb value and display the color to the body of my page. I then added the generated rgb code to my page using textContent.

I was blown away at this project as it is my first complete project using HTML CSS and JS and I am super satisfied. When I first started my YouTube tutorial I was struggling with these concepts and now through today’s practice I feel a bit of muscle memory and understanding coming on!

I know this is just the beginning of a life long relationship and I am excited to start my next project!

Stay Tuned…