Using bootstrap
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation and other interface components.
Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.
Link : w3school - Bootstrap4 document
Encoding/decoding example
The following example is one of the most commonly used encoding/decoding codes.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$("#base64encoding").click(function () {
$("#strout").text(btoa($.trim($("#strin").val())));
});
$("#base64decoding").click(function () {
$("#strout").text(atob($.trim($("#strin").val())));
});
$("#urlencoding").click(function () {
$("#strout").text(encodeURIComponent($.trim($("#strin").val())));
});
$("#urldecoding").click(function () {
$("#strout").text(decodeURIComponent($.trim($("#strin").val())));
});
});
</script>
</div>
<div class="form-group">
<textarea class="form-control" rows="2" id="strin" placeholder="Please input your text here."></textarea>
</div>
<div id="strout" class="text-primary"></div>
<div class="btn-group">
<button type="button" class="btn btn-primary" id="base64encoding">Base64 Encode</button>
<button type="button" class="btn btn-secondary" id="base64decoding">Decode</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" id="urlencoding">URL Encode</button>
<button type="button" class="btn btn-secondary" id="urldecoding">Decode</button>
</div>
<hr/><br/>
</body>
</html>
Leave a comment