Web Application for Docker Containerization with the help of JS(Task-7)

5 min readAug 22, 2021

JavaScript Integration with Docker

JavaScript

JavaScript is a lightweight, interpreted programming language. It is designed for creating network-centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to implement because it is integrated with HTML. It is open and cross-platform.

JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers.

What is Docker?

Docker is a set of platform as a service products that use OS-level virtualisation to deliver software in packages called containers. Containers are isolated from one another and bundle their own software, libraries and configuration files; they can communicate with each other through well-defined channels. All containers are run by a single operating-system kernel and are thus more lightweight than virtual machines.[8]

What is Container?

Docker Container is a standardised unit which can be created on the fly to deploy a particular application or environment. It could be an Ubuntu container, CentOs container, etc. to full-fill the requirement from an operating system point of view. Also, it could be an application oriented container like CakePHP container or a Tomcat-Ubuntu container etc.

Docker concepts

Docker is a platform for developers and sysadmins to build, share, and run applications with containers. The use of containers to deploy applications is called containerisation. Containers are not new, but their use for easily deploying applications is.

Containerisation is increasingly popular because containers are:

Flexible: Even the most complex applications can be containerised.
Lightweight: Containers leverage and share the host kernel, making them much more efficient in terms of system resources than virtual machines.
Portable: You can build locally, deploy to the cloud, and run anywhere.
Loosely coupled: Containers are highly self sufficient and encapsulated, allowing you to replace or upgrade one without disrupting others.
Scalable: You can increase and automatically distribute container replicas across a datacenter.
Secure: Containers apply aggressive constraints and isolations to processes without any configuration required on the part of the user.

Task Description 📄

⚙️ Task 7.1 -

📌 In this task you have to create a Web Application for Docker (one of the great Containerization Tool which provides the user Platform as a Service (PaaS)) by showing your own creativity and UI/UX designing skills to make the WebPortal user friendly.

📌 This app will help the user to run all the docker commands like:

👉docker images

👉docker ps

👉docker run

👉docker rm -f

👉docker exec

code of web.html file

<html>
<head>
<title>Docker Command Hub</title>
</head>

xhr.onload = function() {
var output = xhr.responseText;
document.getElementById(“d1”).innerHTML = output;
}
}
</script>

div#hd{
height:100vh;
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(https://wallpapercave.com/wp/wp8114743.png);
background-size: cover;
background-position:center;
display: flex;
justify-content: center;
padding-left:20px;
font-family: sans-serif;
}

h1{ color:#fff;
margin-bottom:40px;
font-size: 45px;
letter-spacing: 2px;
}

div#cmdbox { width:700px;
height:70px;
background-color:#82CAFA;
padding:20px
}

input#ds{ width:450px;
height:30px;
padding:10px;
border:none;
border-radius:25px;
outline:none;
}

button { height:40px;
width:100px;
background: #ffeb3b;
border:none;
color: #000;
border-radius: 25px;
}

pre{ width:1400px;
height:400px;
background:rgba(0,0,0,0.5);
padding:20px;
font-size:15px;
color:#fff
}

button:hover{ background:#ffc107;
cursor: pointer; }

img {width:226px; height:226px }
</style>
<body>
<div id=”hd”>

<form>

<div id=”box”>
<img align=right src=”https://img.icons8.com/ios/452/docker.png">
<h1>DOCKER WEB APPLICATION</h1>

<div id=”cmdbox”>
[root@localhost ~]#
<input type=”text” id=”ds” placeholder=”Enter docker command..”>
<button onclick=”run()” class=”run-cmd” type=”button”>Run</button>
<br>
</div>
<pre>
<div id=”d1">Output…</div>
</pre>
</div>
</form>
</div>
</body>
</html>