TODO List Project

This is probably one of my favorite projects that we’ve worked on so far. Not only because it created a cool app, but mainly because of how good Colt Steele is in his tutorials. He makes sure to go in depth in every step of creating the application and even shows you the do’s and don’ts while teaching you how to make it. This has definitely helped slightly strengthen my JavaScript skill set and I can’t wait to continue to strengthen it even further with  continuing on to Colt Steeles  coding camp tutorials. Below is a link to my todo list.

TODO List App

Final Post: YelpCamp & Weather App in Node JS

This has been by far the most difficult task that i have ever had on my web development course.  However, even though this was a big challenge, I’ve learned a ton and it was great practice.  I feel i can walk away from this course and say that I’m much better at coding then I was before.

Let me start with the easiest… for me at least.  YelpCamp.

These are some images of the coding that I have done along side with Colt Steele’s tutorials.

YelpCamp

I added my own twist to the YelpCamp.  Nothing major though just different wording and images.. instead of the whole camping theme.

Ok so the weather app on the other hand was very time consuming and quite a challenge.  I initial thought it would be as simple as attaining the API and setting up the GET request and POST code but meh… I was badly mistaking.

Here are my results:

Weather App

In summary, this semester has been great, like always when you have one of the greatest professors.  I’m still learning and I will never stop, even though I’m hardly ever in class haha.

 

A big special thanks to Micheal Smith and Colt Steele for the tutorials and amazing effort to help all of us developers.

Weather and YelpCamp

Yelp Camp

Doing YelpCamp was really fun to do. But sometimes my site wouldn’t look as savvy as Colts’. Sometimes even reading the code over and over and matching it with his, its like what am I missing? But everything works, adding a new campground works and everything is functional so this didn’t totally rack my brain.

for Campgrounds:

New:

landing page:

I’m not sure how to share the website and to leave it running.

What’s the Weather? (Weather scraper)

This is the hardest thing I have ever done. I absolutely did not sleep because I was trying to make my code work. Transferring php into node.js was so hard to do, getting the information from another site is hard too. Placement of “<%” is annoying too and where it should go. I didn’t even think of my styling, I just want my app to work. I do have an image in mind and already have a bootstrap ready. Googling for how I should add my style.css into my app.js and it said I have to create a public directory then put css folder in this then add the style.css there but that didn’t add my image either. All of it is such a mess. Hardest thing I did the entire semester.

I may update this later on when I figure it out.

Final Post

Project 1

My weather application can be found here:  Weather Application 

My app.js has both GET and POST Methods

The line which begins with app.post, basically requests to log the value of ‘city’ to the console, from the url which we got our api key from.

I was only able to connect the Api from https://openweathermap.org to show the temperature and it’s description. I added bootstrap for the alerts, green to bring back data correctly, and if there is an error, it gives you an error message in red.

EJS file for the page (Embedded JavaScript).: For this page the method was Post . We’re testing to see if either of our weather or error variables are null. If one has value, then the data will show up.

 

Project 2

My campground application can be found here: Campground Application 

Something that I found interesting was that on V1 we were able to set up the form but once V2 came up using MongoDB we were able to store that information from the form and store it in a database, so that when new people add a campground site it will stay on the page, even after refreshing. Also found interesting on how to remove the data using Mongodb, stating: db.campgrounds.remove({name: “Honeycomb Mountain”})
WriteResult({ “nRemoved” : 1 }) and then it was removed from the page once refreshing.

I believe I am proficient at making if statements and declaring variables, but I need to further my skills by practicing more with more arrays, and how to call on specific arrays.

 

 

Final Post: Bruh. Not like this…

To summarize ahead of time. I was  able to to get through the basics of the Yelp Camp page, and I unfortunely took a massive L on the weather scrapper.

YelpCamp

Weather

I’ll start off with the weather scraper. Last week in class, with the help of I was able to display the parsed weather data from the JSON file given to me by the api. Which meant that all  I needed to do was create the ejs files, the css, and make a post request form. At this point thinking I had it in the bag I stopped working on it until yesterday. As soon as I logged back on Cloud9 I was greeted by an error message, saying my stuff didn’t save properly.

 

So I went to rebuild the code, and got into the array, but I forgot how to turn the number it gave me into a string. I remember that it should use the String command. I just didn’t know where to put it in the syntax.

 

After hours of googling, trial and errors, and yes I do mean errors. I threw in the towel and got to work on the css.

Naturally I ran into a problem there too. But that one was easily fixed. I just had to set a static location for the css file inside of the app.js file.

 

Now for the weather scrapper I’m left with just a hollow shell without proper logic.

 

The YelpCamp however I was able to finish the basics tutorial. There wasn’t too many problems with one. I managed to get it done without pulling my hair out.

 

 

 

To summarize this semester, I’d say it was a nice time. I’d also like to say, even though I didn’t get this last project to work on time, I think that I came a long way since the begining of the semester.  At the start I could barely remember how to write basics JS loops, and now here we are using api’s. Its been a fun, but grueling semester, and I’m happy to say, I learned a lot… But really though I am still salty about the weather app.

Final Web Dev Post – Weather API

1) I am using the Cloud 9 platform to host my Yelp Camp and Weather applications.

YelpCamp

Weather App (Node Js)


2)  Describe your development process and include at least a couple examples of code which you discuss. Options include: How did you get Bootstrap and your custom css working? What was your app.js method? POST? GET? How did you solve the request/response on the same page? What was logic used in the EJS file for the page?

My development process in the creation of this weather app was a very tedious task at times.  I was able to get bootstrap and my CSS working fairly quick and easy prior to working on the javascript aspect of the app. Initially I used my CSS code from the first weather scraper app we made and because it was already laid out, I just had to situate it in the correct folder structure and replace the bootstrap CDN with the newer updated version of the bootstrap link. Also, the method I decided to work with was the ‘GET’ method. I was and still am having issues with getting the JavaScript code to function properly. It was a tough task trying to figure out what code could possibly get the app to operate and work properly.

3)  Link your running Yelp Camp project and describe something that you found interesting you learned. Include a code sample as part of your description.

One thing I found interesting about the Yelp Camp project was the post form which allowed the user to add a new campsite in which they could also use the form to add in an image of the campsite to give viewers a visual. Although one issue I face is with the bootstrap; it doesn’t seem to cooperated with coding of a grid in order to layout the campsite images in a neat fashion. I believe the making of the grid somehow effects the bootstrap from completely styling the page. Still something I am working on and trying to figure out.

4)  Finally tell me which parts of JavaScript you are most comfortable with at this point and which ones you are not. Try to describe why.

The parts of JavaScript I’m most comfortable with would be DOM Manipulation and situating a server to utilize server side JavaScript.

Final Weather Scrapper /Yelp Camp

I have say this was the most hardest  thing i ever  had do  ever ,but i made it. I spent night and day trying to figure out  how to make the weather scrapper work correct . i got headache almost everyday ,but i did it i made work .I have say the cole steel videos really help me get thru  making the weather scrapper . Videos like the apis,expression,yelp camp made it more easy trying figure out how to make the weather scrapper .Not mention professor smith  really made it easier explaining what we need  to finish up the weather scrapper like having  bodyparser,request ,api key those were really helpful .in process i did use the post method which i thought was easier to figure out but  professor example in class the other day really help me out alot .  i got  my bootstrap working and my css working by just linking them  in head.ejs and watching cole steel video which he talk about which bootstrap version you should have when and using my old css from my php weather scrapper from web dev 1 .  But at the of the day i was able to get  my weather scrapper to work almost just right . Weather-Scrapper

Yelp Camp

I have say that yelp camp was fun ,but i wasn’t able to finish everything in yelp camp . its was  just so long ,but fun at the same time . What i found interesting  in yelp cam was when you get  you get to insert a random picture url and add them to your existing camps already which i found was very cool. i plan to finish the rest   of yep camp in the winter break in code club.

 

Overall i have to say that  my favorite part of javascript is arrays, and node.js . I find those to be very fun when doing java script .  I really enjoy doing that part in java . I also think i need to practice a lot more   in javascript . i still have a problem with functions, and for loops and a few others.  I plan come come code club over the winter break and practice more on my java scripts skills .

Final thoughts  webdev 2 was fun, but very challenging  , i had a lot of headaches and sleepiness nights but great experience. I wish everybody great success  in the future and great winter break!!!.

Web Development #2 Final Post

Web Development #2 Final Post


Question #1: Using my Reclaim Hosting to run to my apps

NodeJs Weather Application

YelpCamp


Question #2

Describe your development process and include at least a couple examples of code which you discuss. Options include: How did you get Bootstrap and your custom css working? What was your app.js method? POST? GET? How did you solve the request/response on the same page? What was logic used in the EJS file for the page?

So I was having issues with linking my CSS with EJS but i found a tutorial on stackoverflow called adding-css-file-to-ejs. So basically all I had to do was make a public folder and then just put my CSS file in there and link it in my application using app.use(express.static(__dirname + '/public'));

I am using the POST method of getting my app to work I had issues with the get method because the app would always break for some reason and I still don’t know why. I have everything rendered on one page that’s is why I use the forward /. So one issue I figured out is setting an error for outputting the call back. Say if a user for instance searched for “p90o3wtgfjo9” it work return an error. It firsts checks for an error using weather.main == undefined then it will send back the index.ejs page back to the user weather.main != undefined. So one issue we had with the PHP weather app is that we had to convert Celsius to Fahrenheit so i was able to set a URL with the imperial weather format and call var url = http://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperial&appid=${apiKey}


Question #3

Link your running Yelp Camp project and describe something that you found interesting you learned. Include a code sample as part of your description.

The YelpCampoutdated the bootstrap doesn’t work, Mongoose doesn’t work etc . . . . still figuring it out.


Question #4

Finally tell me which parts of JavaScript you are most comfortable with at this point and which ones you are not. Try to describe why.

I am comfortable with DOM manipulation.


Code Camp

I will be coming everyday because I have winter classes in the night time.

Final Web Dev Post

Tomorrow is presentation day and I’m hoping you’ll have your app rebuilt in node.js as well as the completed Yelp Camp tutorial. Here’s what I’d like you to present as well as submit in a final blog post.
  1. Please keep both apps running in Cloud 9 and link to each of them. Here are my weather scraper POST, weather scraper GET, and weather api POST apps which should be running. *UPDATE – Leave the application running for class, but it will eventually timeout as c9 applications are not persistent. If you want something persistent look at tttt’s post on getting your node app to run on Reclaim Hosting.
  2. Describe your development process and include at least a couple examples of code which you discuss. Options include: How did you get Bootstrap and your custom css working? What was your app.js method? POST? GET? How did you solve the request/response on the same page? What was logic used in the EJS file for the page?
  3. Link your running Yelp Camp project and describe something that you found interesting you learned. Include a code sample as part of your description.
  4. Finally tell me which parts of JavaScript you are most comfortable with at this point and which ones you are not. Try to describe why.

And if you’d like to keep up your skills, consider coming some days of Winter Code Camp! There’s a schedule below:

The End Is Near. The End Is Here.

So, during the past two weeks of classes, I had a good start with the recreation of the weather app.

To build the application, I added the packages:

  1. Body-Parser
  2. Bootstrap
  3. Ejs
  4. Express
  5. Nodemon
  6. Request
  7. Require

    However, I only used:
  1. Ejs
  2. Express
  3. Require
  4. Request

The other dependencies/packages I downloaded, I was testing them out and playing with most of them but, I didn’t have much success though.

As for my file structure:

To get data, I used the same API that we used for the Weather App w/ PHP.

Note:

I had some difficulties getting my CSS and Images to link to the file. But, after spending about an hour on Stackoverflow, I found the solution and was able to link the files.

Solution: Link

Anyway, I was able to finish the Recreation of the Weather App in Node.Js. It was fun honestly and I enjoy working with NodeJs. You can see the result on the below link.

My Weather App: Link

Weather App Reflection:

Recreating the weather app was fun and interesting. It was fun doing the research and figuring out how to convert some of the PHP code and logic into Javascript. It was interesting because this application was created entirely out of Javascript. I am glad I was able to learn so many skills and techniques through the process. It was extremely happy when I found out how to connect my stylesheet to the application. [THANK YOU STACKOVERFLOW]

Learning about the post and get method and requesting and responding to content on the same page was a journey. But, it was a very knowledgeable journey. I never felt so close to being a web developer until this semester.

Now, as for YelpCamp, well, because I was re-building the Weather App with Node, I took a break from Colt Steele videos for a week or so.

But towards the end, I came back on Colt Steele’s videos.

Sadly, I never finished Colt’s videos. It wasn’t because they were hard to understand or that it was difficult, I just didn’t have enough time to watch all his videos because a majority of the time really went to re-building the weather app, which I am extremely proud of.

Right now, all I have are some of the front-end and back-end aspect, which I am impressed by. I am on folder 30-Yelpcamp and hope to finish before the year ends but, binging videos can be a bit exhausting.

Nonetheless, I am exciting for the final solution. But, until then, this is what I have so far.

Even though I did get far, I am a bit doubtful that I will finish Colt Steele Web Development course by the end of the year. But, we shall see.

Nonetheless, in case I do not finish all of Colt Steele’s video by the end of the year, there’s always Micheal’s winter code camp.

Anyway, this is what I have so far of YelpCamp

So far: Link

Feel free to add campgrounds to the database.

YelpCamp Reflection:

So, while learning how to build a full-stack application, I was amazed by the thoughts and knowledge that went into it. Colt Steele videos were extremely helpful in not only building an application fully in Javascript but, also understanding what goes into building a full-stack application such as…

Dependencies:

The set-up:

Back-end:

Front-end:

And many more.

Going through all the logistics was tedious but they were extremely interesting. Building YelpCamp made me more appreciative of Javascript. I will definitely try my best to come to Michael’s Winter Code Camp.

Final Thoughts & Reflection

Well, this semester and also these past 4 years, been a hell of a ride honestly.

But, I must say, my college experience has been a blast. I am truly grateful to all the professors I have encountered, friends I have made, and students I have met. It’s been an intense yet enjoyable four years.

Web Development I & II and Web Design I had allowed me to practice more of my career aspiration and helped me in figuring out what I really want to do after college. From those classes and also internships and some Computer Science classes, I learned that software engineering/full-stack development is my short-term goal, which I am okay with. I am truly okay with.

Anyway, as I depart into the real world next year, I wish everyone the best in the remaining years you may have left. Thank you all for help making my college experience rememberable.