Category: Javascript

SurveyJS – Learn how to create easy surveys

As background story, I finished university with a graduation project for a company, which you can find it here. The goal was to do something similar to Google Forms integrated with an ISO 9001 document management system, so I needed a good library to build surveys. It had to meet the following requirements:

Good Documentation JSON-based library Custom CSS Send data to a server or at least provided a method

After intensive research, I encountered many libraries but they didn’t meet at least one requirement, except for SurveyJS. It has complete documentation with examples and provided helper methods to get data, therefore I decided to use it. After finishing the project, I thought it would nice to post the implementation applied to a production project, so let’s get started! Read more...

Learning Gulp Basics | Javascript

In the past trimester, I was given a project of creating anything with MEAN.JS and it was the first time I used gulp, so I decided it was time to learn more about what gulp is and how does it work; with the help with a friend I understood how it worked. So now, let’s get started with gulp basics:

What is Gulp?

Gulp is a task runner and build system that uses the philosophy of code over configuration (I’m looking at you, Grunt!). At first glance, I had no idea what was happening in that gulpfile.js, but then I started reading and noticed very interesting things, like it’s simplicity for starters. You will mainly use four functions: Read more...

Open Weather Map API – Retrieving Weather Info

Today, we are going to make a small project connecting to a Open Weather API, retrieve its information depending in the state and country, show it to the user, and in the next post we will add a 5-day forecast to our project. Here is the link to their official site, so you can check their documentation, which is very important to read since it if ask ourselves how to make “X” thing.

Let’s get started

I used Netbeans to create the project, however, you can use any text editor for this, even with notepad. The technologies that will be used in this project are:

  • HTML
  • CSS
  • Javascript

First, let’s create a new project in Netbeans or in your favorite text editor as shown in the following image:

Create Project

Note: This is my project structure, you can do something similar to mine.

Project Structure

Now, let’s create a new javascript file, we will call it “mainWeather”. Remember to add Jquery. Now that you have created a JS file, let’s add it:

<!DOCTYPE html>
<html>
    <head>
        <title>Open Weather API</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <script type="text/javascript" src="resources/js/jquery.js">
        <script type="text/javascript" src="resources/js/mainWeather.js"></script>
    </body>
</html>

After doing so, let’s add one input for the city and another one for the country as well as a button to submit the information.

<!DOCTYPE html> <html> <head> <title>Open Weather API</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div id="UserArea"> <div id="stateWrapper"> <input type="text" id="cityInput" placeholder="Enter a State"/> </div> <br/> <div id="countryWrapper"> <input type="text" id="countryInput" placeholder="Enter a Country"/> </div> <br/> <div id="buttonArea"> <input type="submit" id="submitWeather"/> </div> </div> <!- USED TO SHOW RESULT --> <div id="WeatherWrapper"> </div> <script type="text/javascript" src="resources/js/mainWeather.js"> <script type="text/javascript" src="resources/js/jquery.js"></script> </body> </html> Read more...