Skip to content

Instantly share code, notes, and snippets.

@droidScriptKiddy

droidScriptKiddy/index.html

Created April 28, 2020 23:24
Show Gist options
  • Save droidScriptKiddy/6c773b54ff0351241000086655dda8cf to your computer and use it in GitHub Desktop.
Save droidScriptKiddy/6c773b54ff0351241000086655dda8cf to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/pidazaz
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin<style id="jsbin-css">
footer {text-align: center;}
label{display:block;
width: 10em;
}
input[type='number']{
width:6em;
margin-left: 1em;
}
</style>
</title>
<form id="Q">
<fieldset id="C">
<legend>RollenGeld</legend>
</fieldset>
</form>
<footer>
<h1 id="R">0 €</div>
</footer>
<script id="jsbin-javascript">
var doc=document;
function crEl(s){
var el = (doc.createElement(s));
return fxEl(el);
}
function fxEl(el){
el.add = function(){
var THIS = this; [].slice.call(arguments,0).forEach(function(el){THIS.appendChild(el)})
};
el.html = function(s){
if(arguments.length<1)return this.innerHTML;
this.innerHTML = s;
return this;
};
el.text = function(s){
if(arguments.length<1)return this.innerText;
this.innerText = s;
return this;
};
el.attr = function(k,v){
if(arguments.length<2) return this.getAttribute(k);
this.setAttribute(k,v);
return this;
};
el.val = function(v){
if(arguments.length<1) return this.value;
this.value = v;
return this;
}
return el;
}
function crFrmInp(id,typ,val){
var el=crEl('input');
el.attr('type',typ);
el.name = id;
el.id = id;
el.val(val);
return el;
}
var C;
function addEl(v,q,tit){
var elInp = crEl('input').val(0).attr('type','number').attr('q',q).attr('v',v).attr('min',0).attr('step',1).attr('title',tit);
var elLbl = crEl('label').html('<b>'+tit+'</b>');
elLbl.add(elInp)
C.add( elLbl);
}
onload=function(){
C = fxEl(doc.getElementById("C"));
addEl(1,50,'1ct');
addEl(2,50,'2ct');
addEl(5,50,'5ct');
addEl(10,40,'10ct');
addEl(20,40,'20ct');
addEl(50,40,'50ct');
addEl(100,25,'1€');
addEl(200,25,'2€');
doc.forms.Q.onchange = doc.forms.Q.oninput = function(){
var res = 0;
[].slice.call(this.elements,1).forEach(function(T){
var sum = T.attr('q')*T.attr('v')*T.value;
res += isNaN(sum)?0:sum;
});
doc.getElementById("R").innerText = ( res / 100 ) + ' €';
};
};
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<form id="Q">
<fieldset id="C">
<legend>RollenGeld</legend>
</fieldset>
</form>
<footer>
<h1 id="R">0 €</div>
</footer>
</script>
<script id="jsbin-source-css" type="text/css">footer {text-align: center;}
label{display:block;
width: 10em;
}
input[type='number']{
width:6em;
margin-left: 1em;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var doc=document;
function crEl(s){
var el = (doc.createElement(s));
return fxEl(el);
}
function fxEl(el){
el.add = function(){
var THIS = this; [].slice.call(arguments,0).forEach(function(el){THIS.appendChild(el)})
};
el.html = function(s){
if(arguments.length<1)return this.innerHTML;
this.innerHTML = s;
return this;
};
el.text = function(s){
if(arguments.length<1)return this.innerText;
this.innerText = s;
return this;
};
el.attr = function(k,v){
if(arguments.length<2) return this.getAttribute(k);
this.setAttribute(k,v);
return this;
};
el.val = function(v){
if(arguments.length<1) return this.value;
this.value = v;
return this;
}
return el;
}
function crFrmInp(id,typ,val){
var el=crEl('input');
el.attr('type',typ);
el.name = id;
el.id = id;
el.val(val);
return el;
}
var C;
function addEl(v,q,tit){
var elInp = crEl('input').val(0).attr('type','number').attr('q',q).attr('v',v).attr('min',0).attr('step',1).attr('title',tit);
var elLbl = crEl('label').html('<b>'+tit+'</b>');
elLbl.add(elInp)
C.add( elLbl);
}
onload=function(){
C = fxEl(doc.getElementById("C"));
addEl(1,50,'1ct');
addEl(2,50,'2ct');
addEl(5,50,'5ct');
addEl(10,40,'10ct');
addEl(20,40,'20ct');
addEl(50,40,'50ct');
addEl(100,25,'1€');
addEl(200,25,'2€');
doc.forms.Q.onchange = doc.forms.Q.oninput = function(){
var res = 0;
[].slice.call(this.elements,1).forEach(function(T){
var sum = T.attr('q')*T.attr('v')*T.value;
res += isNaN(sum)?0:sum;
});
doc.getElementById("R").innerText = ( res / 100 ) + ' €';
};
};</script>
Raw
jsbin.pidazaz.css
footer {text-align: center;}
label{display:block;
width: 10em;
}
input[type='number']{
width:6em;
margin-left: 1em;
}
Raw
jsbin.pidazaz.js
var doc=document;
function crEl(s){
var el = (doc.createElement(s));
return fxEl(el);
}
function fxEl(el){
el.add = function(){
var THIS = this; [].slice.call(arguments,0).forEach(function(el){THIS.appendChild(el)})
};
el.html = function(s){
if(arguments.length<1)return this.innerHTML;
this.innerHTML = s;
return this;
};
el.text = function(s){
if(arguments.length<1)return this.innerText;
this.innerText = s;
return this;
};
el.attr = function(k,v){
if(arguments.length<2) return this.getAttribute(k);
this.setAttribute(k,v);
return this;
};
el.val = function(v){
if(arguments.length<1) return this.value;
this.value = v;
return this;
}
return el;
}
function crFrmInp(id,typ,val){
var el=crEl('input');
el.attr('type',typ);
el.name = id;
el.id = id;
el.val(val);
return el;
}
var C;
function addEl(v,q,tit){
var elInp = crEl('input').val(0).attr('type','number').attr('q',q).attr('v',v).attr('min',0).attr('step',1).attr('title',tit);
var elLbl = crEl('label').html('<b>'+tit+'</b>');
elLbl.add(elInp)
C.add( elLbl);
}
onload=function(){
C = fxEl(doc.getElementById("C"));
addEl(1,50,'1ct');
addEl(2,50,'2ct');
addEl(5,50,'5ct');
addEl(10,40,'10ct');
addEl(20,40,'20ct');
addEl(50,40,'50ct');
addEl(100,25,'1€');
addEl(200,25,'2€');
doc.forms.Q.onchange = doc.forms.Q.oninput = function(){
var res = 0;
[].slice.call(this.elements,1).forEach(function(T){
var sum = T.attr('q')*T.attr('v')*T.value;
res += isNaN(sum)?0:sum;
});
doc.getElementById("R").innerText = ( res / 100 ) + ' €';
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment