Skip to content

Add Indexing and slicing of matrices section #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Supravisor merged 30 commits into from
Feb 11, 2026
Merged

Add Indexing and slicing of matrices section #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
0f2ad13
add start 1 input field
Supravisor Feb 9, 2026
2ea3519
add start1Matrix variable
Supravisor Feb 9, 2026
6df1572
add end 1 input field
Supravisor Feb 9, 2026
70c9928
add end1Matrix variable
Supravisor Feb 9, 2026
f2d7d4e
add start2Matrix variable
Supravisor Feb 9, 2026
474de82
add end 2 input field
Supravisor Feb 9, 2026
66f7da7
add start2Matrix variable
Supravisor Feb 9, 2026
bb74db1
add end2Matrix variable
Supravisor Feb 9, 2026
c4755bb
add range button
Supravisor Feb 10, 2026
603419c
add rangeMatrix function
Supravisor Feb 10, 2026
7a2ebe0
add slice button
Supravisor Feb 10, 2026
3dc639c
add sliceMatrix function
Supravisor Feb 10, 2026
84fb06b
add matrix start input field
Supravisor Feb 10, 2026
51a9ee4
add startMatrix variable
Supravisor Feb 10, 2026
69507ea
add matrix end input field
Supravisor Feb 10, 2026
21898fe
add endMatrix variable
Supravisor Feb 10, 2026
9dc7011
add matrix before input field
Supravisor Feb 10, 2026
8e89ca0
add beforeMatrix variable
Supravisor Feb 10, 2026
6004f24
add reverse button
Supravisor Feb 10, 2026
f9cc781
add rangeMatrixReverse function
Supravisor Feb 10, 2026
3a11030
add odd button
Supravisor Feb 10, 2026
0ea915e
add rangeMatrixOdd function
Supravisor Feb 10, 2026
48a061b
add assign array button
Supravisor Feb 10, 2026
c4cc8a0
add assignArray function
Supravisor Feb 10, 2026
f8e465b
add assign value button
Supravisor Feb 10, 2026
f88947a
add width for #subIndexMatrix
Supravisor Feb 10, 2026
1463923
add assignValue function
Supravisor Feb 11, 2026
ea0e124
add assign sub matrix value button
Supravisor Feb 11, 2026
e0593ce
add assignSubMatrixValue function
Supravisor Feb 11, 2026
5e14e02
fix message for array value
Supravisor Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 41 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,39 +32,39 @@ <h2>Import modules</h2>
<h2>Basic NumPy arrays</h2>

<p>
<input type="button" class="btn btn-success" value="np" onclick="np()" />
<input type="button" class="btn btn-success" value="np" onclick="np();" />
<input class="btn" name="array" id="array" placeholder="array" size="10" type="textfield" />
<input class="btn" name="variable" id="variable" placeholder="variable name" size="10" type="textfield" />
<input class="btn" name="variable" id="variable" placeholder="variable" size="10" type="textfield" />
</p>

<p>
<input type="button" class="btn btn-success" value="copy" onclick="copy(this.value)" />
</p>

<p>
<input type="button" class="btn btn-success" value="access" onclick="access()" />
<input type="button" class="btn btn-success" value="access" onclick="access();"; />
<input class="btn" name="index" id="index" placeholder="index" type="number" />
</p>

<p>
<input type="button" class="btn btn-success" value="range" onclick="range()" />
<input type="button" class="btn btn-success" value="range" onclick="range();" />
<input class="btn" name="start" id="start" placeholder="start" type="number" />
<input class="btn" name="end" id="end" placeholder="end" type="number" />
<input class="btn" name="step" id="step" placeholder="end" type="number" />
</p>

<p>
<input type="button" class="btn btn-success" value="sort" onclick="statistics(this.value)" />
<input type="button" class="btn btn-success" value="sort" onclick="statistics(this.value);" />
</p>

<hr />
<h2>Array types</h2>

<p>
<input type="button" class="btn btn-success" value="dtype" onclick="dtype()" />
<input type="button" class="btn btn-success" value="float" onclick="dtype(this.value)" />
<input type="button" class="btn btn-success" value="int8" onclick="dtype(this.value)" />
<input type="button" class="btn btn-success" value="int" onclick="dtype(this.value)" />
<input type="button" class="btn btn-success" value="dtype" onclick="dtype();" />
<input type="button" class="btn btn-success" value="float" onclick="dtype(this.value);" />
<input type="button" class="btn btn-success" value="int8" onclick="dtype(this.value);" />
<input type="button" class="btn btn-success" value="int" onclick="dtype(this.value);" />
</p>

<hr />
Expand Down Expand Up @@ -94,6 +94,38 @@ <h2>Indexing and slicing of matrices</h2>
<input type="button" class="btn btn-primary" value="access matrix" onclick="accessMiddleMatrix();" />
</p>

<p>
<input class="btn" name="start1Matrix" id="start1Matrix" placeholder="start 1" type="number" />
<input class="btn" name="end1Matrix" id="end1Matrix" placeholder="end 1" type="number" />
</p>

<p>
<input class="btn" name="start2Matrix" id="start2Matrix" placeholder="start 2" type="number" />
<input class="btn" name="end2Matrix" id="end2Matrix" placeholder="end 2" type="number" />
</p>

<p>
<input type="button" class="btn btn-primary" value="range" onclick="rangeMatrix();" />
<input type="button" class="btn btn-primary" value="slice" onclick="sliceMatrix();" />
</p>

<p>
<input class="btn" name="startMatrix" id="startMatrix" placeholder="start" type="number" />
<input class="btn" name="endMatrix" id="endMatrix" placeholder="end" type="number" />
<input class="btn" name="beforeMatrix" id="beforeMatrix" placeholder="before" type="number" />
</p>

<p>
<input type="button" class="btn btn-primary" value="reverse" onclick="rangeMatrixReverse();" />
<input type="button" class="btn btn-primary" value="odd" onclick="rangeMatrixOdd();" />
</p>

<p>
<input type="button" class="btn btn-primary" value="assign array" onclick="assignArray();" />
<input type="button" class="btn btn-primary" value="assign value" onclick="assignValue();" />
<input type="button" class="btn btn-primary" value="assign sub matrix value" onclick="assignSubMatrixValue();" />
</p>

</div>
</td>
<td id="textbox">
Expand Down
160 changes: 129 additions & 31 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@

// Basic NumPy arrays
let array = document.getElementById("array");
let regex = /\s*,\s*/g;
let variable = document.getElementById("variable");
let index = document.getElementById("index");
let start = document.getElementById("start");
Expand All @@ -9,45 +10,45 @@ let step = document.getElementById("step");

const np = () => {
if (array.value === "") {
return alert("Please enter a comma separated array in the 'array' field.");
return alert("Please enter a comma separated array in the 'array' field, in the 'Basic NumPy arrays' section.");
} else if (variable.value === "") {
document.editor.textbox.value+= "\nnp.array([" + array.value.replaceAll(",", ", ").split(",") + "])";
document.editor.textbox.value+= "\nnp.array([" + array.value.replaceAll(regex, ", ").split(",") + "])";
} else if (Math.abs(Number(variable.value[0])) >= 0) {
return alert("Please do not start with a number in the 'variable' field.");
return alert("Please do not start with a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + " = np.array([" + array.value.replaceAll(",", ", ").split(",") + "])";
document.editor.textbox.value+= "\n" + variable.value + " = np.array([" + array.value.replaceAll(regex, ", ").split(",") + "])";
}
}

const copy = (arg) => {
if (array.value === "") {
return alert("Please enter a new variable name in the 'array' field.");
return alert("Please enter a comma separated array in the 'array' field, in the 'Basic NumPy arrays' section.");
} else if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field.");
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value[0])) >= 0) {
return alert("Please do not start with a number in the 'variable' field.");
return alert("Please do not start with a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else {
document.editor.textbox.value+= "\n" + array.value + " = np." + arg + "(" + variable.value + ")";
document.editor.textbox.value+= "\n" + array.value.replaceAll(regex, ", ") + " = np." + arg + "(" + variable.value + ")";
}
}

const access = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field.");
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value[0])) >= 0) {
return alert("Please do not start with a number in the 'variable' field.");
return alert("Please do not start with a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (index.value == "") {
return alert("Please enter a number in the 'index' field.")
return alert("Please enter a number in the 'index' field, in the 'Indexing and slicing of matrices' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + "[" + index.value + "]";
}
}

const range = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field.");
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value)) >= 0) {
return alert("Please do not enter a number in the 'variable' field.");
return alert("Please do not enter a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (step.value === "") {
document.editor.textbox.value+= "\n" + variable.value + "[" + start.value + ":" + end.value + "]";
} else {
Expand All @@ -58,28 +59,28 @@ const range = () => {
// Array types
const dtype = (type) => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field.");
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (!type) {
document.editor.textbox.value+= "\n" + variable.value + ".dtype";
} else if (array.value === "") {
return alert("Please enter a comma separated array in the 'array' field.");
return alert("Please enter a comma separated array in the 'array' field, in the 'Basic NumPy arrays' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + " = np.array([" + array.value + "], dtype=np." + type + ")";
document.editor.textbox.value+= "\n" + variable.value + " = np.array([" + array.value.replaceAll(regex, ", ") + "], dtype=np." + type + ")";
}
}

// Dimensions and shapes
const dimensionShape = (arg) => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field.");
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else {
document.editor.textbox.value+="\n" + variable.value + "." + arg;
}
}

const memorySize = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field.");
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else {
document.editor.textbox.value+="\nprint('%d bytes' % (" + variable.value + ".size * " + variable.value + ".itemsize))";
}
Expand All @@ -88,47 +89,144 @@ const memorySize = () => {
// Indexing and slicing of matrices
let indexMatrix = document.getElementById("indexMatrix");
let subIndexMatrix = document.getElementById("subIndexMatrix");
let start1Matrix = document.getElementById("start1Matrix");
let end1Matrix = document.getElementById("end1Matrix");
let start2Matrix = document.getElementById("start2Matrix");
let end2Matrix = document.getElementById("end2Matrix");
let startMatrix = document.getElementById("startMatrix");
let endMatrix = document.getElementById("endMatrix");
let beforeMatrix = document.getElementById("beforeMatrix");

const accessMatrix = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field.");
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value)) >= 0) {
return alert("Please do not enter a number in the 'variable' field.");
return alert("Please do not enter a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (indexMatrix.value == "") {
return alert("Please enter a number in the 'index' field.")
return alert("Please enter a number in the 'index' field, in the 'Indexing and slicing of matrices' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + "[" + indexMatrix.value + "]";
}
}

const accessSubMatrix = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field.");
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value)) >= 0) {
return alert("Please do not enter a number in the 'variable' field.");
return alert("Please do not enter a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (indexMatrix.value === "") {
return alert("Please enter a number in the 'index' field.")
return alert("Please enter a number in the 'index' field, in the 'Indexing and slicing of matrices' section.");
} else if (subIndexMatrix.value === "") {
return alert("Please enter a number in the 'sub index' field.")
return alert("Please enter a number in the 'sub index' field, in the 'Indexing and slicing of matrices' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + "[" + indexMatrix.value + ", " + subIndexMatrix.value + "]";
}
}

const accessMiddleMatrix = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field.");
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value)) >= 0) {
return alert("Please do not enter a number in the 'variable' field.");
return alert("Please do not enter a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (start1Matrix.value === "") {
return alert("Please enter a number in the 'start 1' field.")
return alert("Please enter a number in the 'start 1' field, in the 'Indexing and slicing of matrices' section.");
} else if (end1Matrix.value === "") {
return alert("Please enter a number in the 'end 1' field.")
return alert("Please enter a number in the 'end 1' field, in the 'Indexing and slicing of matrices' section.");
} else if (start2Matrix.value === "") {
return alert("Please enter a number in the 'start 2' field.")
return alert("Please enter a number in the 'start 2' field, in the 'Indexing and slicing of matrices' section.");
} else if (end2Matrix.value === "") {
return alert("Please enter a number in the 'end 2' field.")
return alert("Please enter a number in the 'end 2' field, in the 'Indexing and slicing of matrices' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + "[" + start1Matrix.value + ":" + end1Matrix.value + ", " + start2Matrix.value + ":" + end2Matrix.value + "]";
}
}

const rangeMatrix = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value)) >= 0) {
return alert("Please do not enter a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + "[" + startMatrix.value + ":" + endMatrix.value + "]";
}
}

const sliceMatrix = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value)) >= 0) {
return alert("Please do not enter a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (startMatrix.value === "" && endMatrix.value) {
if (endMatrix.value && beforeMatrix.value) {
document.editor.textbox.value+= "\n" + variable.value + "[" + endMatrix.value + ":, " + beforeMatrix.value + ":]";
} else {
document.editor.textbox.value+= "\n" + variable.value + "[" + endMatrix.value + ":, " + beforeMatrix.value + ":]";
}
} else if (startMatrix.value && endMatrix.value) {
document.editor.textbox.value+= "\n" + variable.value + "[:" + startMatrix.value + ", :" + endMatrix.value + "]";
}
}

const rangeMatrixReverse = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value)) >= 0) {
return alert("Please do not enter a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + "[::-1]";
}
}

const rangeMatrixOdd = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value)) >= 0) {
return alert("Please do not enter a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + "[::2]";
}
}

const assignArray = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value)) >= 0) {
return alert("Please do not enter a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (array.value === '') {
return alert("Please enter a comma separated array in the 'array' field, in the 'Basic NumPy arrays' section.");
} else if (indexMatrix.value == "") {
return alert("Please enter a number in the 'index' field, in the 'Indexing and slicing of matrices' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + "[" + indexMatrix.value + "] = np.array([" + array.value.replaceAll(regex, ", ").split(",") + "])";
}
}

const assignValue = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value)) >= 0) {
return alert("Please do not enter a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (array.value === '') {
return alert("Please enter a value in the 'array' field, in the 'Basic NumPy arrays' section.");
} else if (indexMatrix.value == "") {
return alert("Please enter a number in the 'index' field, in the 'Indexing and slicing of matrices' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + "[" + indexMatrix.value + "] = " + array.value;
}
}

const assignSubMatrixValue = () => {
if (variable.value === "") {
return alert("Please enter a variable name in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (Math.abs(Number(variable.value)) >= 0) {
return alert("Please do not enter a number in the 'variable' field, in the 'Basic NumPy arrays' section.");
} else if (array.value === '') {
return alert("Please enter a value in the 'array' field, in the 'Basic NumPy arrays' section.");
} else if (startMatrix.value === "") {
return alert("Please enter a number in the 'start' field, in the 'Indexing and slicing of matrices' section.");
} else if (endMatrix.value === "") {
return alert("Please enter a number in the 'end' field, in the 'Indexing and slicing of matrices' section.");
} else {
document.editor.textbox.value+= "\n" + variable.value + "[" + startMatrix.value + ", " + endMatrix.value + "] = " + array.value;
}
}
4 changes: 4 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,3 +96,7 @@ input[type="number"] {
input:not([type:"button"]) {
border-color: black;
}

#subIndexMatrix {
width: 80px;
}