Web Applications

Due Date


What is a Web Application?

Last week you learnt about creating static websites. The next step before moving on to creating Web Applications is to know about what is the difference between the two.

Very often, the terminologies dynamic websites and web applications are used exchangably.

A very basic and detailed answer to the difference between static websites and dynamic web applications is given here

What is the difference between a web application and a web site?
Answer (1 of 44): You've probably been using the terms 'web application' and 'website' so many times that when asked to define each of them individually or to explain the difference, you're at a loss for words. It happens when anything becomes a substantial part of our lives.

Components of a Web App

A web app is more of functionality than just the design. Anything worthwhile is not simple and does not come easily. Technically, a Web app is an application program that is stored on a remote server and delivered over the Internet through a browser interface. Creating and serving a web app requires

Why Separate backend and frontend code?

For better understanding of why backend and frontend should necessarily be well-separated, read the below article.


Web App Architecture

A little extra knowledge never goes amiss

Web Application Architecture: Definition, Models, Types, and More
The Internet is no longer about static web pages and longer loading times. Over time, the Internet has made a shift towards active user engagement as well as extended functionality by means of visually pleasing and powerful web applications. A web application is just like a normal computer application except that it works over the Internet.


So this week you are going to get started with using API endpoints.

For basic knowledge of APIs, take a look.

What is an API endpoint? Definition from WhatIs.com.
An API endpoint is a point at which an application program interface ( API) -- the code that allows two software programs to communicate with each other -- connects with the software program. APIs work by sending requests for information from a web application or web server and receiving a response.
For apps of all shape and sizes (mobile app, web app, IoT, desktop app) they need a well-defined Application Programming Interface (API) to abstract away the business logic of backend and to cater to any client supporting only HTTP.

We'll cover the most popular pattern of HTTP APIs, the so-called RESTful APIs next week! However for a brief intro, here you go

Understanding And Using REST APIs - Smashing Magazine
If you want to be able to read API documentations and use them effectively, you'll first need to understand everything about REST APIs. Let's get started. There's a high chance you came across the term "REST API" if you've thought about getting data from another source on the internet, such as Twitter or Github.

So much for the conceptual part, let's get started with the practical knowledge!


Ajax stands for Asynchronous JavaScript and XML (though it is mostly used for JSON). AJAX is format and not a programming language. It is a way for web pages to pass data to and from the server without reloading the entire page.The Asynchronous comes from the fact that the request happens in the background while the user can freely interact with the page.

Most web apps use the following architecture:

What Is Ajax Programming - Explained - KeyCDN Support
Ajax is short for Asynchronous JavaScript and XML, which refers to a set of web development techniques rather than an actual programming language. Ajax however, is widely used in client side programming (e.g. JavaScript) to allow for data to be sent and received to and from a database / server.


Before jumping to the task, we recommend getting yourself comfortable by introducing small AJAX snippets of code through your inline <script> tags. A good place to start would thus be w3schools.

AJAX Introduction
AJAX is a developer's dream, because you can: Update a web page without reloading the page Request data from a server - after the page has loaded Receive data from a server - after the page has loaded Send data to a server - in the background In every chapter, you can edit the examples online, and click on a button to view the result.

Documentation can be found here to help you out with more advanced APIs

Description: Perform an asynchronous HTTP (Ajax) request. A string containing the URL to which the request is sent. A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup(). See jQuery.ajax( settings ) below for a complete list of all settings.

Challenge and Submission

So much for learning, here is your next Assignment!

In this task you will be working on a todo application made using basic HTML, CSS and JS. The main motive of this task is to make you familiar with: Rest APIs AJAX Manipulating DOM using JavaScript Follow the following steps to setup this project.

All the details of the task are provided in the README.md file.

As you are aware, you need to fork from and the repository, clone the forked repository, complete the task, commit and push your changes and finally open the pull request back here.