Pages

Showing posts with label frontend project. Show all posts
Showing posts with label frontend project. Show all posts

Friday, March 25, 2016

WIKIPEDIA VIEWER - PROJECT

Finally I have completed this project and what a feeling on accomplishing this project. It took be almost a week, I even thought of quitting this boot-camp.

So the objective here was to build a CodePen.io app that is similar to this the one posted here http://codepen.io/FreeCodeCamp/full/pgNRvJ.
 
These are the rules for the game.

#1: I have to figure out the code myself no cheating allowed. (Initially I      completed it by coping code from somewhere, but then angel stuck me. loll)

#2: Fulfill the below user stories. Use whichever libraries or APIs you need.

So the user stories that I had to fulfill are as follows.

#1: One should be able to search Wikipedia entries in a search box and see the resulting Wikipedia entries.

#2: One can click a button to see a random Wikipedia entry.


At last the clues are here:

1: URL use to get a random Wikipedia article:
    http://en.wikipedia.org/wiki/Special:Random.

2: Entry on using Wikipedia's API:
    http://www.mediawiki.org/wiki/API:Main_page.
 
My comments:

1.Initially I was overwhelmed by the mere size of the API and its documentation.

2.Completely clueless about the vocabulary and how this API sandbox worked.

3.Thought of quitting this Freecodecamp.com thing.

But than something in me told me hang-on and you will do it. then I went on to figure out the things one by one. If I write each and everything it will run into a book. So after a week long struggle here is my still not so good product (still a lot of scope for improvement).
See the Pen Wikipedia Viewer by Bhagwant Singh (@sagit2002) on CodePen.

Thursday, March 17, 2016

SHOW THE LOCAL WEATHER - PROJECT



  • Objective: The objective here is to build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/bELRjV.

  • The rules are as follows:-

    #1: Don't look at the example project's code. I have to figure it out myself.
    #2: I have to fulfill the following user stories. I am free to use whichever libraries or APIs and look of the App as well

    The user stories are given as:-

    #1: User should we able to view his current weather condition.
    #2: User should we able to see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
    #3: User should be able to push a button to toggle between Fahrenheit and Celsius.

    I used the Open Weather API to build this app. I had to struggle a little bit with ajax queries and toggling of the temperature into Fahrenheit and Celsius.

    I don't think this is a perfect App, but I will try to improve it as I learn more and have more experience with web development.

    So here is my version of the Show The Local Weather App. Please check it out by clicking on the embedded version.

    See the Pen Show the Local Weather by Bhagwant Singh (@sagit2002) on CodePen.

    Saturday, March 12, 2016

    BUILD A RANDOM QUOTE MACHINE - PROJECT




  • Objective: The objective here is to build a CodePen.io app that is functionally similar to the one given here : http://codepen.io/FreeCodeCamp/full/bELoPJ.

  • The rules are as follows:-

    #1: Don't look at the example project's code. I have to figure it out myself.
    #2: I have to fulfill the following user stories. I am free to use whichever libraries or APIs I need.

    The user stories are given as:-

    #1: A button to show a new random quote.
    #2: A button to tweet out the quote.

    I used the Random Famous Quotes API by Andruxnet delivered in Json format.

    Initially I found myself clueless about the API thing. To solve this issue I went through API documentations.

    Next issue I was not able to figure out how my Jquery code is doing. Inorder to solve this and find where my code was failing I fired up firebug addon for firefox. In the firefox console I could easily check my code running issues.

    So here is my version of the Random Quote Machine. Please check it out by clicking on the embedded version.


    See the Pen Random Quote Machine by Bhagwant Singh (@sagit2002) on CodePen.

    Wednesday, March 9, 2016

    BUILD A TRIBUTE PAGE

    This basic front-end project requires building a tribute page. I am building a tribute page for Dr. Linus Pauling.

    The conditions to be fulfilled are:

    1.  The page should have and image and text.
    2.  User can click on a link that will take the user to an external website with further information on the topic.

    so here I am appending by completed project.


    See the Pen Tribute to Dr. Linus Pauling by Bhagwant Singh (@sagit2002) on CodePen.