Develop a Javascript application that allows the user to enter strings into a va
ID: 3727503 • Letter: D
Question
Develop a Javascript application that allows the user to enter strings into a variable number of input widgets. As a string is entered by the user its length is automatically displayed next to the input widget. Buttons are provided to control the interface and to provide some functionality.
Clicking “Add Cell” button will add another input widget.
Clicking “Remove Cell” button will remove an input widget, always leaving at least one input widget.
Clicking “Sort” button will cause the visible strings to be sorted.
Organize the application in two files: the HTML file that is the user interface to the application; a file with most of the Javascript code;
Basic screen with simple styling
Provide styling that will approximately center the visible components. Also, change the default color for the background.
Add cell/Remove cell
As a convenience to the user, the application will remember the string entered into a widget even after the widget is removed.
If the widget is added back again, then the saved value will be displayed in the widget.
Typing and Length
Every time a user types a key, it checks and shows the length of a string in each widget on the next (in a real-time manner).
Sorting
Be careful, the saved strings do not participate in a sort operation if not visible.
You can use array sort() method.
If possible can you make it simple as possible and do the javascript in it own file, not in the html file. No need for CSS. Thanks!
Explanation / Answer
Jquery code is properly working as compared to pure javascript. Hope this will help you.
--------------------------------------------------Pure Javascript-------------------------------------
//index.html
<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
<button id="add">Add Cell</button>
<button id="remove">Remove Cell</button>
<center><input type="text" class="cell" name="cell"> <span id="length"></span></center>
</body>
</html>
//custom.js
function addCell(){
var cell = document.getElementsByClassName('cell');
var centerTag = cell[cell.length-1].parentElement.parentElement;
centerTag.innerHTML += "<center><input type="text" class="cell" name="cell"+(cell.length)+")"> <span id="length"></span></center>";
}
function calcLenth(val){
var cell = document.getElementsByClassName('cell');
var str = new String(cell[val].value);
cell[val].nextSibling.nextSibling.innerHTML = str.length;
}
function removeCell(){
var cell = document.getElementsByClassName('cell');
var centerTag = cell[cell.length-1].parentElement;
centerTag.remove();
}
-------------------------------------------------------jQuery-------------------------------------------------------
//index.html
<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
<button id="add">Add Cell</button>
<button id="remove">Remove Cell</button>
<center><input type="text" class="cell" name="cell"> <span id="length"></span></center>
</body>
</html>
//custom.js
$(document).ready(function(){
$('#add').click(function(){
$('.cell').parent().parent().append("<center><input type="text" class="cell" name="cell"> <span id="length"></span></center>");
});
$(document).on('keyup','.cell',function(){
var str ='';
str = new String($(this).val());
$(this).next().html(str.trim().length);
});
$(document).on('click','#remove',function(){
$('.cell:last').parent().remove();
});
});
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.