Minerals Value Service GmbH "Übung"

Minerals Value Service GmbH "Übung"

by Alex

HTML

<label>Input</label>
<input type="text" id="list" value="hund,Katze,93,maus,auto,baum,105"/>

<label>Filter:</label>
<input type="text" id="pattern" value="[a-z]"/>
<br/>
<br/>
<label>Sorting:</label>
<select id="sort">
	<option>Please Choose</option>
	<option>----------------</option>
	<option value="asc">ASC</option>
	<option value="desc">DESC</option>
</select>

<select id="filteredSelectBox"></select>

<br/>
<br/>
<br/>
<hr />
<br/>

<p><strong>MVS Programming Test</strong></p>

<p><strong>Language: JavaScript</strong></p>

<p><strong>Task I:</strong></p>

<p>Please write a JavaScript-Class&nbsp; called SortedFilter. The class has two methods. The first is the constructor and takes a list of string elements. The second depicts the sorting order of the elements. The third is a filter string. The filter string is a list of pattnern that can be passed. The second method is called getSortedFilterList and will return the list with the filter and the sorting applied to the items.&nbsp;</p>

<p><strong>Task II:&nbsp;</strong></p>

<p>Using your favorite dom-traversal library (jquery, mootols, prototype, etc.) now write a piece of code that will add an event to the select box with id=&ldquo;sort&ldquo;. This event will take the comma-separated list of strings from the input field with id list, filter it using the class above and parse them into the select box called filteredSelectBox.&nbsp;</p>

<p>&lt;script src=&ldquo;mootools.js&ldquo;&gt;&lt;/script&gt;<br />
<span style="line-height:1.6em">&lt;label&gt;Input&lt;/label&gt;</span><br />
<span style="line-height:1.6em">&lt;input type=&ldquo;text&ldquo; id=&ldquo;list&ldquo;/&gt;</span></p>

<p>&lt;label&gt;Filter:&lt;/label&gt;<br />
<span style="line-height:1.6em">&lt;input type=&ldquo;text&ldquo; id=&ldquo;pattern&ldquo;/&gt;</span><br />
<span style="line-height:1.6em">&lt;label&gt;Sorting:&lt;/label&gt;</span></p>

<p>&lt;select id=&ldquo;sort&ldquo;&gt;<br />
<span style="line-height:1.6em">&nbsp; &nbsp;...

CSS

body{
    font-family:"Helvetica";
}

JavaScript

var SortedFilter = function(list, order, filter){
	this.list = list;
	this.order = order;
	this.filter = filter;

	this.getSortedFilterList = function(){
		// splitten
		var strings = list.split(',');
		// filtern
		var rx = new RegExp(filter);
		strings = strings.filter(function(el){
			if(rx.test(el)){
				return el;
			}
		});
		// sortieren
		strings = strings.sort();
		if(order.toLowerCase()=="desc"){
			strings.reverse();
		}
		return strings;
	}
}
$('#sort').on('change',function(){
	var sf = new SortedFilter($('#list').val(), $('#sort').val(), $('#pattern').val());
	var sorted_sf = sf.getSortedFilterList();
	$("#filteredSelectBox").empty();
	for(var i=0;i<sorted_sf.length;i++){
		$("#filteredSelectBox").append('<option value="'+sorted_sf[i]+'">'+sorted_sf[i]+'</option>');
	}
});