~callum/calculators

36328a23646283fe9d9d8b374f9b6507702c6383 — Callum Brown 1 year, 2 months ago a96a23d main
Change from jquery to vanilla javascript
M gear-ratios/gear-ratios.js => gear-ratios/gear-ratios.js +26 -26
@@ 1,31 1,31 @@
$(document).ready(function() {
var chainringInput = document.getElementById("chainring");
var cogInput = document.getElementById("cog");
var diameterInput = document.getElementById("diameter");

    $("input").on("input", function() {
        var chainring, cog, diameter, diameterInInches, circumference, ratio, gearinches, rollout;
function calculate() {
	var chainring, cog, diameter, diameterInInches, circumference, ratio;
	var gearinches, rollout;

        chainring = $("#chainring").val();
        cog = $("#cog").val();
        diameter = $("#diameter").val();
	chainring = Number(chainringInput.value);
	cog = Number(cogInput.value);
	diameter = Number(diameterInput.value);

        if ( $.isNumeric(chainring) && $.isNumeric(cog)  ) {
            
            ratio = chainring / cog;
            ratio = ratio.toFixed(2);
            $("#ratio").text(ratio);
            
            diameterInInches = diameter / 0.0254;
            gearinches = ratio * diameterInInches;
            gearinches = gearinches.toFixed(2);
            $("#gear-inches").text(gearinches);
	ratio = chainring / cog;
	ratio = ratio.toFixed(2);
	document.getElementById("ratio").innerHTML = ratio;
	
	diameterInInches = diameter / 0.0254;
	gearinches = ratio * diameterInInches;
	gearinches = gearinches.toFixed(2);
	document.getElementById("gear-inches").innerHTML = gearinches;

            if ( $.isNumeric(diameter) ) {
                circumference = Math.PI * diameter;
                rollout = ratio * circumference;
                rollout = rollout.toFixed(2);
                $("#roll-out").text(rollout);
            }
        }
	circumference = Math.PI * diameter;
	rollout = ratio * circumference;
	rollout = rollout.toFixed(2);
	document.getElementById("roll-out").innerHTML = rollout;
}

    });

});
\ No newline at end of file
var inputs = document.getElementsByTagName("input");
for (let i of inputs) {
	i.addEventListener("keyup", calculate);
}

M gear-ratios/index.html => gear-ratios/index.html +1 -1
@@ 6,7 6,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gear Ratios</title>
    <link rel="stylesheet" href="../style.css">
    <script src="gear-ratios.js"></script>
</head>

<body>


@@ 36,6 35,7 @@

    </div>

    <script src="gear-ratios.js"></script>
</body>

</html>

M golden-ratio/golden-ratio.css => golden-ratio/golden-ratio.css +1 -1
@@ 16,7 16,7 @@
}

#a {
    margin-right: 0.25em;
    margin-right: 5px;
}

#c {

M golden-ratio/golden-ratio.js => golden-ratio/golden-ratio.js +90 -87
@@ 1,89 1,92 @@
$(document).ready(function(){
    
    const phi = (1 + Math.sqrt(5)) / 2;
    
    function sizeGoldenRectangle() {
        var hundred, a, b;
        
        hundred = $("#center").width(); //100% width;
        b = hundred / (phi + 1);
        a = b * phi;
const phi = (1 + Math.sqrt(5)) / 2;

        $("#square, #a, label[for='a']").width(a - 3); //take 3 for the border size
        $("#rectangle, #b").width(b);
        $("#square, #rectangle").height(a);
        
        $("#a").width("-=0.25em").width("-=5");
        
    }
    
    function findB(a) {
        return a / phi;
    }
    
    function findA(b) {
        return b * phi;
    }
    
    function findAB(c) {
        // find a and b from a+b
        //c is a+b
        var b, a;
        b = c / (phi + 1);
        a = findA(b);
        return [a, b];
    }
    
    function findC(a, b) {
        console.log(a);
        console.log(b);
        console.log(a + b);
        console.log(1 + b);
        return a + b;
    }
    
    function update(a, b, c) {
        $("#a").val(a);
        $("#b").val(b);
        $("#c").val(c);
    }
    
    $("#a").on("input", function() {
        var a, b, c;
        a = Number($(this).val());
        if (a !== 0) {
            b = findB(a);
            c = findC(a, b);
            update(a, b, c);
        }
    });
    
    $("#b").on("input", function() {
        var a, b, c;
        b = Number($(this).val());
        if (b !== 0) {
            b = Number(b);
            a = findA(b);
            c = findC(a, b);
            update(a, b, c);
        }
    });
    
    $("#c").on("input", function() {
        var a, b, c, ab;
        c = Number($(this).val());
        if (c !== 0) {
            ab = findAB(c);
            a = ab[0];
            b = ab[1];
            update(a, b, c);
        }
    });
var inputA = document.getElementById("a");
var inputB = document.getElementById("b");
var inputC = document.getElementById("c");

    sizeGoldenRectangle();
    
    window.onresize = function() {
        sizeGoldenRectangle();
    };
    
});
\ No newline at end of file
sizeGoldenRectangle();

window.onresize = function() {
	sizeGoldenRectangle();
};

function sizeGoldenRectangle() {
	var hundred, a, b;
	
    console.log('test');
	hundred = document.getElementById("center").offsetWidth; //100% width;
	b = hundred / (phi + 1);
	a = b * phi;
    console.log(hundred);

    // -3 for border
    document.getElementById("square").style.width = (a - 3) + "px"; 
	document.getElementById("label-a").style.width = (a - 3) + "px";
    // -5 for margin, -2 for border
	inputA.style.width = (a - 7) + "px";

	document.getElementById("rectangle").style.width = (b) + "px";
	inputB.style.width = (b - 2) + "px";

	document.getElementById("square").style.height = (a - 2) + "px";
	document.getElementById("rectangle").style.height = (a - 2) + "px";
}

function findB(a) {
	return a / phi;
}

function findA(b) {
	return b * phi;
}

function findAB(c) {
	// find a and b from a+b
	// c is a+b
	var b, a;
	b = c / (phi + 1);
	a = findA(b);
	return [a, b];
}

function findC(a, b) {
    return a + b;
}

function update(a, b, c) {
    inputA.value = a;
    inputB.value = b;
    inputC.value = c;
}

inputA.onkeyup = function() {
	var a, b, c;
    a = Number(inputA.value);
	if (a !== 0) {
		b = findB(a);
		c = findC(a, b);
		update(a, b, c);
	}
}

inputB.onkeyup = function() {
	var a, b, c;
	b = Number(inputB.value);
	if (b !== 0) {
		b = Number(b);
		a = findA(b);
		c = findC(a, b);
		update(a, b, c);
	}
}

inputC.onkeyup = function() {
	var a, b, c, ab;
	c = Number(inputC.value);
	if (c !== 0) {
		ab = findAB(c);
		a = ab[0];
		b = ab[1];
		update(a, b, c);
	}
}

M golden-ratio/index.html => golden-ratio/index.html +2 -2
@@ 7,7 7,6 @@
    <title>Golden Ratio</title>
    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="golden-ratio.css">
    <script src="golden-ratio.js"></script>
</head>

<body>


@@ 16,7 15,7 @@

        <h1 id="title">Golden Ratio</h1>
        
        <label for="a">a</label><label for="b">b</label>
        <label for="a" id="label-a">a</label><label for="b" id="label-b">b</label>
        <input type="number" id="a"><input type="number" id="b">
        
        <div id="square"></div><div id="rectangle"></div>


@@ 26,6 25,7 @@

    </div>

    <script src="golden-ratio.js"></script>
</body>

</html>

M linear-equations/index.html => linear-equations/index.html +3 -5
@@ 7,7 7,6 @@
    <title>Linear Equations</title>
    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="linear-equations.css">
    <script src="linear-equations.js"></script>
</head>

<body>


@@ 22,18 21,17 @@
        
        <div class="coord-container">
            <label for="x1">X1</label><label for="y1">Y1</label><br>
            <input type="text" class="coord" id="x1"><input type="text" class="coord" id="y1">
            <input type="number" class="coord" id="x1"><input type="number" class="coord" id="y1">
        </div>
        
        <div class="coord-container">
            <label for="x2">X2</label><label for="y2">Y2</label><br>
            <input type="text" class="coord" id="x2"><input type="text" class="coord" id="y2">
            <input type="number" class="coord" id="x2"><input type="number" class="coord" id="y2">
        </div>
        
        

    </div>

    <script src="linear-equations.js"></script>
</body>

</html>

M linear-equations/linear-equations.js => linear-equations/linear-equations.js +35 -39
@@ 1,42 1,38 @@
$(document).ready(function(){
function calculateEquation(x1, y1, x2, y2) {
    var m, c, equation;
    
    function calculateEquation(x1, y1, x2, y2) {
        var m, c, equation;
        
        if (x1 === x2) { return "y = " + x1 + "x"; }
        if (y1 === y2) { return "x = " + y1 + "y"; }
        
        m = (y1 - y2) / (x1 - x2);
        c = y1 - (m * x1);
        console.log(m, c);
        
        if (m === 1) {
            m = "";
        }
        if (c === 0) {
            c = "";
        } else if (c > 0) {
            c = " + " + c;
        } else if (c < 0) {
            c = " - " + - c;
        }
        
        equation = "y = " + m + "x" + c;
        
        return equation;
    }
    if (x1 === x2) { return "y = " + x1 + "x"; }
    if (y1 === y2) { return "x = " + y1 + "y"; }
    
    m = (y1 - y2) / (x1 - x2);
    c = y1 - (m * x1);
    
    $(".coord").on("input", function() {
        var x1, y1, x2, y2, equation;
        x1 = $("#x1").val();
        y1 = $("#y1").val();
        x2 = $("#x2").val();
        y2 = $("#y2").val();
        //if all the values are numbers
        if ( $.isNumeric(x1) && $.isNumeric(y1) && $.isNumeric(x2) && $.isNumeric(y2)) {
            equation = calculateEquation(x1, y1, x2, y2);
            $("#equation").text(equation);
        }
    });
    if (m === 1) {
        m = "";
    }
    if (c === 0) {
        c = "";
    } else if (c > 0) {
        c = " + " + c;
    } else if (c < 0) {
        c = " - " + - c;
    }
    
});
\ No newline at end of file
    equation = "y = " + m + "x" + c;
    return equation;
}

function onCoordInput() {
    var x1, y1, x2, y2, equation;
    x1 = Number(document.getElementById("x1").value);
    y1 = Number(document.getElementById("y1").value);
    x2 = Number(document.getElementById("x2").value);
    y2 = Number(document.getElementById("y2").value);
    equation = calculateEquation(x1, y1, x2, y2);
    document.getElementById("equation").innerHTML = equation;
}

coordInputs = document.getElementsByClassName("coord");
for (let i of coordInputs) {
    i.addEventListener("keyup", onCoordInput);
}

M nth-term/index.html => nth-term/index.html +1 -1
@@ 6,7 6,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nth Term Finder</title>
    <link rel="stylesheet" href="../style.css">
    <script src="nth-term.js"></script>
</head>

<body>


@@ 29,6 28,7 @@

    </div>

    <script src="nth-term.js"></script>
</body>

</html>

M nth-term/nth-term.js => nth-term/nth-term.js +44 -47
@@ 1,58 1,55 @@
$(document).ready(function(){
    
    $('#sequence').on('input', function() {
sequenceInput = document.getElementById("sequence");
typeResult = document.getElementById("seq-type");
ruleResult = document.getElementById("seq-rule");

        var seqStr = $('#sequence').val();
sequenceInput.onkeyup = function() {
    var seqStr = sequenceInput.value;

        // remove spaces
        seqStr = seqStr.replace(/\s/g, '');
    // remove spaces
    seqStr = seqStr.replace(/\s/g, '');

		// remove leading and trailing commas
        seqStr = seqStr.replace(/(^[,\s]+)|([,\s]+$)/g, '');
    // remove leading and trailing commas
    seqStr = seqStr.replace(/(^[,\s]+)|([,\s]+$)/g, '');

		// remove duplicate commas (',,' -> ',')
		seqStr = seqStr.replace(/,+/g, ',');
    // remove duplicate commas (',,' -> ',')
    seqStr = seqStr.replace(/,+/g, ',');

        // split at ,
        seq = seqStr.split(',');
    // split at ,
    seq = seqStr.split(',');

		// reset result boxes and return if not enough data
		if (seq.length < 2) {
			$('#seq-type').html('&nbsp;');
			$('#seq-rule').html('&nbsp;');
			return;
		}
    // reset result boxes and return if not enough data
    if (seq.length < 2) {
        typeResult.innerHTML = '&nbsp;';
        ruleResult.innerHTML = '&nbsp;';
        return;
    }

        for (i = 0; i < seq.length; i++) {
            seq[i] = Number(seq[i]);
    for (i = 0; i < seq.length; i++) {
        seq[i] = Number(seq[i]);

            if (isNaN(seq[i])) {
                console.log('NaN');
                return;
            }
        if (isNaN(seq[i])) {
            console.log('NaN');
            return;
        }
    }

    var diffs = termDiff(seq);

    // assignment in if condition purposeful
    var seqRule, seqType
    if (seqRule = linear(seq, diffs)) {
        seqType = 'linear';
    } else if (seqRule = quadratic(seq, diffs)) {
        seqType = 'quadratic';
    } else {
        seqType = 'unknown';
        seqRule = 'unknown';
    }
    
    typeResult.innerHTML = seqType;
    ruleResult.innerHTML = seqRule;


		var diffs = termDiff(seq);

		// assignment in if condition purposeful
		var seqRule, seqType
		if (seqRule = linear(seq, diffs)) {
			seqType = 'linear';
		} else if (seqRule = quadratic(seq, diffs)) {
			seqType = 'quadratic';
		} else {
			seqType = 'unknown';
			seqRule = 'unknown';
		}
		
        $('#seq-type').text(seqType);
		$('#seq-rule').text(seqRule);

    });
   
});

}

function termDiff(seq) {
	diffs = [];


@@ 115,7 112,7 @@ function linear(seq, diffs) {
function quadratic(seq, diffs) {
	var diffs2 = termDiff(diffs);

	if (!allItemsEqual(diffs2)) {
	if (diffs2.length <= 1 || !allItemsEqual(diffs2)) {
		return false;
	}



@@ 143,7 140,7 @@ function quadratic(seq, diffs) {
		rule += 'n^2 ';
	}

	if (linearRule[0] !== '-') {
	if (linearRule.length > 0 && linearRule[0] !== '-') {
		rule += '+ ';
	}


M number-base-converter/index.html => number-base-converter/index.html +4 -4
@@ 6,7 6,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number Base Converter</title>
    <link rel="stylesheet" href="../style.css">
    <script src="number-base-converter.js"></script>
</head>

<body>


@@ 16,19 15,20 @@
        <h1 id="title">Number Base Converter</h1>
        
        <label for="2">binary 2</label><br>
        <input type="text" class="number" id="2"><br>
        <input type="number" class="number" id="2"><br>
        
        <label for="8">octal 8</label><br>
        <input type="text" class="number" id="8"><br>
        <input type="number" class="number" id="8"><br>
        
        <label for="10">decimal/denary 10</label><br>
        <input type="text" class="number" id="10"><br>
        <input type="number" class="number" id="10"><br>
        
        <label for="16">hexidecimal 16</label><br>
        <input type="text" class="number" id="16">

    </div>

    <script src="number-base-converter.js"></script>
</body>

</html>

M number-base-converter/number-base-converter.js => number-base-converter/number-base-converter.js +29 -17
@@ 1,18 1,30 @@
$(document).ready(function(){
    
    $("input").on("input", function(){
        
        var val = $(this).val();
        var base = parseInt($(this).attr("id"));
        var dec = parseInt(val, base);
        
        if (!(isNaN(dec))) {
            $("#2").val(dec.toString(2));
            $("#8").val(dec.toString(8));
            $("#10").val(dec);
            $("#16").val(dec.toString(16));
        }
function convert(val, base) {
    var dec = parseInt(val, base);
    if (!(isNaN(dec))) {
        base2.value = dec.toString(2);
        base8.value = dec.toString(8);
        base10.value = dec;
        base16.value = dec.toString(16);
    }
}

    });
    
});
\ No newline at end of file
var base2 = document.getElementById("2");
var base8 = document.getElementById("8");
var base10 = document.getElementById("10");
var base16 = document.getElementById("16");

base2.onkeyup = function() {
    convert(base2.value, 2);
}

base8.onkeyup = function() {
    convert(base8.value, 8);
}

base10.onkeyup = function() {
    convert(base10.value, 10);
}

base16.onkeyup = function() {
    convert(base16.value, 16);
}