01/01/2018

on Leave a Comment

How to host JavaScript/JQuery web app on blogger Free

How to host JavaScript/JQuery web app on blogger Free
Are you looking for a web server to host your large-scale JavaScript web application? Then Hostgator and Bluehost are one of the best web hosting company where you can quickly deploy your application in just a couple of second.

Angular and React js (2018) is used by most of the developers to build a real-time web application with a proper security authentication.

But if you are a newcomer to the world of web development and recently started coding then you might be looking for a free web host server to deploy the site. No doubt that Hostinger is a very common web hosting provider where you can host your site (Whether PHP or node JS).


In this tutorial, I am going to show you, how you can host your vanilla JavaScript (Vanilla JS is not a framework, it is a plain JavaScript) web app on blogger for free. [You can host 100 sites in blogger under one account for free.].



I have made a 'To Do List App' (Without using any framework), and so I will show you 'how I host this app on blogger for free?.'

How to host single page JavaScript/Jquery App on Blogger Free


  1. First of all, login to your blogger account and then navigate to the theme section > Edit HTML. And then delete the entire code. see below image
    How to host JavaScript/JQuery web app on blogger Free
  2. And then, paste the below 'basic syntax' into it.

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
    ]]></b:skin>
    <style>
    
    <!-- your CSS codes -->
    
    </style>
    </head>
    <body>
    <div id='app'>
     <!-- your html codes start -->
    
     <!-- your html codes close -->
    </div>
    
    <b:section id='fixelements' showaddelement='no'/>
    
    <!-- your javascript code starts -->
    
    <!-- your javascript codes close -->
    </body>
    </html>
    
  3. On the above syntax, you can see some comments. Between these comments you need to insert your code. Just insert the below code (For hosting my 'To do list app').
    Add the below Css code just under the style tags

    #addTask,#taskName{border:1px solid #eee}#addTask,#del,.fa-trash-o{cursor:pointer}.container{font-size:18px;max-width:400px;text-align:center;padding:15px;background:#fbfbfb;margin:50px auto 0;box-shadow:0 0 1px #333}#del{width:14px;height:14px}.completed{text-decoration:line-through}.incompleted{text-decoration:none}#taskName{padding:6px 12px;box-shadow:0 0 4px #eee;width:60%}#addTask{background:#2251a7;color:#fff;padding:6px 10px;border-radius:0 4px 4px 0}#task-list{margin-top:25px;font-size:16px;text-align:left}table{border-collapse:collapse}table,td,th{border:1px solid #d8d8d8;padding:8px}
    
    And then add the below html code just between the div tag (id is 'app')

    <div class='container'>
            <input id='taskName' name='task-name' type='text'/><input id='addTask' type='submit' value='Add!'/>
            <div id='task-list'>
            </div>
    </div>
    
    And then add the below JavaScript code there where comments starts and close.

    <script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
    <script src='https://cdn.rawgit.com/vishalchopra13/todolist-purejs/25acf8c5/todotask/module.js?x=1'></script>
    <script>
    //<![CDATA[
        displayData();
        // Add tasks
        $('#addTask').click(function(){
            var input = $('#taskName').val();
            // if the user did not enter the value into the field, return and exit the function.
            if(input === null || input === ''){
                return false;
            }
            _todo.addTask(input); // if the user entered the value into the field then do then add task to the list.
            displayData(); // display teh data realtime.
            _todo.log(); //log the task into the console.
        });     
            
        // tasks status
        $('#task-list').on('click', '#del', function(){
            var name = $(this).attr('data-id');
            var status = $(this).attr('data-status');
            if(status === 'completed'){
                _todo.incomplete(name);
            } else {
                _todo.complete(name);
            }
            displayData();
        });
            
        // delete the task event
        $('#task-list').on('click', '#delme', function(){
            var data = $(this).attr('data-id');
            _todo.delete(data);
            displayData();
        });
                    
        // display data function realtime
        function displayData(){
            var counter = 0;
            var listData = _todo.displayData();
            var html = '';
            html += "<table width='100%'>";
            for(var i = 0; i < listData.length; i++){
                html += "<tr><td id='counter' width='10%'>" + counter++ + "</td><td id='del' class='" + listData[i].status + "' data-status='" + listData[i].status + "' data-id='" + listData[i].name + "'>" + listData[i].name + "</td><td id='delme' data-id='" + listData[i].name + "' width='10%'><i class='fa fa-trash-o'></i></td></tr>";
            }
            html += "</table>";
            $('#task-list').html(html);
        }
    //]]>
    </script>
    
  4.  And that's it. Now save the template and visit into your site and use the app. 

Wrapping Up

Although, there are thousands of free web hosting provider like Hostinger to host a site. In blogger, there are lots of limitation like you can't upload your files directly to the blog.

To avoid this uploading issue, I would suggest you host your JavaScript code(if very heavy) on Google Drive, Github or any other place which you think best.

I have hosted my javascript module on Github, you can see here.

Thanks. I hope that you loved the above single page app hosting solution. If you have any issue related to it, then comment below. I would like to answer your queries.

About The Author

Vishal Chopra is a 23 years old blogger Currently living in Kolkata, India. He is a Skilled Blogger, web Developer and Loves to play with Codes And Creating new things as a web Designer. For more, follow me @vishalchopra13

0 comments:

Post a Comment