mirror of
https://github.com/silicoflare/silicoflare-website.git
synced 2026-05-26 20:17:58 +05:30
153 lines
6.1 KiB
HTML
153 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Lab 1 CodeGen</title>
|
||
|
||
<style type="text/css">
|
||
* {
|
||
font-family:'Segoe UI', Verdana, Geneva, Tahoma, sans-serif;
|
||
}
|
||
|
||
#code {
|
||
border: 1px solid black;
|
||
font-family:'Consolas';
|
||
padding: 5px;
|
||
border-radius: 5px;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<body onload="init()">
|
||
<form>
|
||
<p>
|
||
<label for="stuName">Name: </label>
|
||
<input type="text" id="stuName" placeholder="Enter your name" onkeyup="genCode()" >
|
||
</p>
|
||
<p>
|
||
<label for="srn">SRN: </label>
|
||
<input type="text" id="srn" placeholder="Enter your SRN" onkeyup="genCode()">
|
||
</p><br><br>
|
||
|
||
<template id="vals">
|
||
<div class="value">
|
||
<label class="lbl1" for="x">X: </label>
|
||
<input type="text" class="fld1" id="x" onkeyup="genCode()"> 
|
||
<label class="lbl2" for="y">Y: </label>
|
||
<input type="text" class="fld2" id="y" onkeyup="genCode()"> 
|
||
<button type="button" class="del">×</button>
|
||
</div>
|
||
</template>
|
||
|
||
<div id="uservals">
|
||
</div>
|
||
<button type="button" onclick="add()">Add Entry</button>
|
||
<!-- <button type="button" onclick="genCode()">Submit</button> -->
|
||
</form>
|
||
<br><br>
|
||
<h3>Copy your code from here:</h3>
|
||
<button type="button" onclick="copyCode()">COPY</button>
|
||
<div id="code">
|
||
Enter values to generate code and then click 'COPY' to copy the code.
|
||
</div>
|
||
|
||
<!-- ------------------------------------------------------------------------ -->
|
||
|
||
<script>
|
||
var count = 0
|
||
var finalCode = ""
|
||
|
||
function copyCode() {
|
||
navigator.clipboard.writeText(finalCode);
|
||
window.alert("Copied to clipboard!");
|
||
}
|
||
|
||
function delValue(num) {
|
||
var divi = document.getElementById("value"+num);
|
||
divi.remove();
|
||
for(i=num+1;i<count;i++) {
|
||
var work = document.getElementById("value"+i);
|
||
work.setAttribute("id", "value"+(i-1));
|
||
work.querySelector(".lbl1").setAttribute("for", "x"+(i-1));
|
||
work.querySelector(".lbl2").setAttribute("for", "y"+(i-1));
|
||
work.querySelector(".fld1").setAttribute("id", "x"+(i-1));
|
||
work.querySelector(".fld2").setAttribute("id", "y"+(i-1));
|
||
work.querySelector(".del").setAttribute("onclick", "delValue("+(i-1)+")");
|
||
}
|
||
console.log("Entry "+num+" removed!")
|
||
count--;
|
||
}
|
||
|
||
function add() {
|
||
var i = count;
|
||
list = document.getElementById('uservals');
|
||
temp = document.importNode(document.getElementById('vals').content, true);
|
||
temp.querySelector(".value").setAttribute("id", "value"+i);
|
||
temp.querySelector(".lbl1").setAttribute("for", "x"+i);
|
||
temp.querySelector(".lbl2").setAttribute("for", "y"+i);
|
||
temp.querySelector(".fld1").setAttribute("id", "x"+i);
|
||
temp.querySelector(".fld2").setAttribute("id", "y"+i);
|
||
temp.querySelector(".del").setAttribute("onclick", "delValue("+i+")");
|
||
list.appendChild(temp);
|
||
count++;
|
||
document.getElementById("value"+(count-1)).querySelector(".fld1").focus();
|
||
console.log(count);
|
||
}
|
||
|
||
function init() {
|
||
add();
|
||
document.getElementById("value0").querySelector(".fld1").focus();
|
||
}
|
||
|
||
function genCode() {
|
||
codeArea = document.getElementById("code");
|
||
startX = document.getElementById("value0").querySelector(".fld1").value;
|
||
endX = document.getElementById("value"+(count-1)).querySelector(".fld1").value;
|
||
finalCode = "x = "+startX+":"+(endX-startX)/(count-1)+":"+endX+";";
|
||
|
||
finalCode += "\nx = x';"
|
||
|
||
var ySTR = "y = ["
|
||
for(i=0;i<count;i++) {
|
||
work = document.getElementById("value"+i).querySelector(".fld2").value;
|
||
ySTR += work;
|
||
if(i!=(count-1))
|
||
ySTR+=";"
|
||
}
|
||
finalCode += "\n"+ySTR+"]";
|
||
|
||
finalCode += "\nplot(x,y)"+
|
||
"\nxlabel('$Volume\\ of\\ NaOH\\ added\\ in\\ mL$')"+
|
||
"\nylabel('$pH$')"+
|
||
"\nxgrid()";
|
||
|
||
finalCode += "\nxstring(0.5, 11, ['Name: "+document.getElementById("stuName").value+"'])";
|
||
finalCode += "\nxstring(0.5, 10.4, ['SRN: "+document.getElementById("srn").value+"'])";
|
||
|
||
finalCode += "\nxstring(0.5, 8, ['SCALE'])"+
|
||
"\nxstring(0.5, 7.5, ['X-AXIS: 0.5 mL'])"+
|
||
"\nxstring(0.5, 7, ['Y-AXIS: 1 pH (starts from 2)'])";
|
||
|
||
finalCode += "\nscf"+
|
||
"\nN = length(x)"+
|
||
"\ndydx = diff(y(:)) ./ diff(x(:))"+
|
||
"\ndydx(N) = dydx(N-1)"+
|
||
"\nx1 = x + 0.5"+
|
||
"\nplot(x1, dydx)"+
|
||
"\nxgrid()"+
|
||
"\nxlabel('$Volume\\ of\\ NaOH\\ added\\ in\\ mL$')"+
|
||
"\nylabel('$\\frac{\\Delta$E}{\\Delta$V}$')"+
|
||
"\nxstring(0.8, 550, ['SCALE'])";
|
||
finalCode += "\nxstring(0.5, 11, ['Name: "+document.getElementById("stuName").value+"'])";
|
||
finalCode += "\nxstring(0.5, 10.4, ['SRN: "+document.getElementById("srn").value+"'])";
|
||
|
||
finalCode += "\nxstring(0.5, 8, ['SCALE'])"+
|
||
"\nxstring(0.5, 7.5, ['X-AXIS: 0.5 mL'])"+
|
||
"\nxstring(0.5, 7, ['Y-AXIS: 1 pH (starts from 2)'])";
|
||
codeArea.innerText = finalCode;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |