Saturday, January 14, 2017

JSON (JavaScript Object Notation) HTTP Request by Ajax to Show Data on Webpage

First,We create one .Txt file which contains names of different countries.

Country.txt File: 
  1. [  
  2.     {  
  3.         "display""India",  
  4.     },   
  5.     {  
  6.         "display""China",  
  7.     },   
  8.     {  
  9.         "display""USA",  
  10.     },   
  11.     {  
  12.         "display""UK",  
  13.     },   
  14.     {  
  15.         "display""Canada",  
  16.     },   
  17.     {  
  18.         "display""Japan",  
  19.     },   
  20.     {  
  21.         "display""Russia",  
  22.     },   
  23. ]  
In the second step, Reads the data from file and display it to the webpage. Use XMLHttpRequest to read the text file, and use fetchData () to display the array.

JsonHttpXmlReqbyAjax.html  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <div id="maindiv"></div>  
  5. <script>  
  6. var xmlhttp = new XMLHttpRequest();  
  7. var url = "Country.txt";  
  8. xmlhttp.onreadystatechange = function()  
  9. {  
  10.    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)  
  11.    {  
  12.          var myarray = JSON.parse(xmlhttp.responseText);  
  13.          fetchData(myarray);  
  14.    }  
  15. }  
  16. xmlhttp.open("GET", url, true);  
  17. xmlhttp.send();  
  18. function fetchData(arr)  
  19. {  
  20.          var out = "";  
  21.          var i;  
  22.           for(i = 0; i < arr.length; i++)  
  23.          {  
  24.                out += arr[i].display + '<br>';  
  25.          }  
  26.          document.getElementById("maindiv").innerHTML = out;  
  27. }  
  28. </script>  
  29. </body>  
  30. </html>  
After completing all these steps, you will get following output.

India
China
USA
UK
Canada
Japan
Russia 
Enjoy Coding...!!!

Sunday, January 1, 2017

Play With Sass Using Compass - An Opensource CSS Authoring Framework

Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your style sheets easier to organize and maintain. Compass uses Sass. Compass is a Sass framework, designed to make the work of styling the web smooth and efficient. Much like Rails as a web application framework for Ruby, Compass is a collection of helpful tools and tested best practices for Sass. 

Once you finished with the installation of Ruby Germs and Sass on your system, install compass in the next step. If you've not yet installed Ruby Germs and Sass on your system, please refer my following blog for installation:

Install SASS on Windows Using Ruby Gems

Now we are going to install Compass.

Open command prompt (CMD) and type the following command.


It will install Compass on your system. You will get the following message after installation of Compass.


Next we are going to install css parser. 


It gives a count of the Sass rules, properties, mixins defined and mixins used as well as the CSS rules and properties that get output from your Sass-style sheets.   

After installation, it will give you the following message:



Now we are going to create one sample project.
 
You can create project using the following command:
 

After creation of project, you will get the following message.

In the next step, you have to compile Sass to css. So for that purpose, you have to add watch as in the following screenshot:

Once the watch is started, you will get the following message.
 

This kind of folder Structure is created once you create project.


Now, we are writing some Sass code and will send its impact on css file using Compass. 
I use Atom Editor (Open Source) for making this project. You can even use Notepad++, Sublime Text, etc for developing project.

You will see config.rb file in your project.
   
You can see all the references to the different directories Compass will need in order to compile your CSS. 

Now I am going to write some Sass code in screen.scss file.

 

After saving the complete code, changes will be reflected to css file as well as on command prompt. This could happen because of Compass.

style.css looks like the following:




I hope this quick tutorial made your Compass working environment possible.