Skip to content

Commit

Permalink
Merge pull request #32 from quintindunn/styling-overhaul-2dvectors
Browse files Browse the repository at this point in the history 
Styling overhaul 2dvectors
  • Loading branch information
@quintindunn
quintindunn authored Oct 4, 2023
2 parents 76e79bb + c4daf43 commit af1d4e8
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 79 deletions.
2 changes: 1 addition & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,4 +178,4 @@ cython_debug/
# FLASK_SECRET
FLASK_SECRET.key

*/node_modules
*/node_modules
15 changes: 15 additions & 0 deletions static/vector2d/css/2dvectors_home/2dvectors_home.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.page-content {
padding: 2vh 3vw;
}

.heading {
text-align: center;
}

.info > p {
text-indent: 20px;
}

ul {
list-style-type: none;
}
136 changes: 65 additions & 71 deletions static/vector2d/js/vector_addition_calculator/vector_addition_calculator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ let vector_table = document.getElementById("vector-table");
let showMath = document.getElementById("show-math");
let stepsDiv = document.getElementById("steps-div");
let outputDiv = document.getElementById("output-div");

let bottomRow = rows[rows.length - 1];

const translations = {
Expand All @@ -27,48 +26,41 @@ function clamp_n180_180(degrees) {
}


function addRow(event) {
let inputs = bottomRow.children; // The actual td wrappers for the inputs

// check if the bottom row is not empty
if (inputs[0].children[0].value !== "" || inputs[1].children[0].value !== "") {
let row = document.createElement("tr");
row.setAttribute("class", "table-row");

let box1 = document.createElement("td");
box1.setAttribute("class", "table-box");
let inp1 = document.createElement("input");
inp1.setAttribute("class", "table-input");
inp1.setAttribute("placeholder", translations.en.magnitude);
box1.append(inp1);

let box2 = document.createElement("td");
box2.setAttribute("class", "table-box");

let inp2 = document.createElement("input");
inp2.setAttribute("class", "table-input");
inp2.setAttribute("placeholder", translations.en.direction);
box2.append(inp2);

row.append(box1, box2);
vector_table.children[0].appendChild(row);

// Update bottomRow and move the event listener onto it
bottomRow.removeEventListener("keyup", addRow);
rows = document.getElementsByClassName("table-row");
bottomRow = rows[rows.length - 1];
bottomRow.addEventListener("keyup", addRow);
}
}


function addStep(parent, content) {
let paragraph = document.createElement("p");
paragraph.innerText = content;
parent.append(paragraph);
}


function createRow() {
let input = document.createElement("input");
input.setAttribute("class", "table-input");
input.setAttribute("placeholder", translations.en.magnitude);
input.setAttribute("name", "magnitude");

let tBox1 = document.createElement("td");
tBox1.setAttribute("class", "table-box");
tBox1.append(input);

input = document.createElement("input");
input.setAttribute("class", "table-input");
input.setAttribute("placeholder", translations.en.direction);
input.setAttribute("name", "direction");

let tBox2 = document.createElement("td");
tBox2.setAttribute("class", "table-box");
tBox2.append(input);


let tRow = document.createElement("tr");
tRow.setAttribute("class", "table-row");
tRow.append(tBox1, tBox2);

return tRow;
}


function sumVectors(args) {
let xTotal = 0;
let yTotal = 0;
Expand Down Expand Up @@ -136,6 +128,26 @@ function sumVectors(args) {





function addRow(event) {
let inputs = bottomRow.children; // The actual td wrappers for the inputs

// check if the bottom row is not empty
if (inputs[0].children[0].value !== "" || inputs[1].children[0].value !== "") {
let row = createRow();

vector_table.children[0].appendChild(row);

// Update bottomRow and move the event listener onto it
bottomRow.removeEventListener("keyup", addRow);
rows = document.getElementsByClassName("table-row");
bottomRow = rows[rows.length - 1];
bottomRow.addEventListener("keyup", addRow);
}
}


function calculate(event) {
if (event.button === 0) {
stepsDiv.innerText = "";
Expand Down Expand Up @@ -165,13 +177,18 @@ function calculate(event) {

let answer = sumVectors(vectorArray);

let magDiv = document.createElement("div"); magDiv.innerText = "Magnitude: " + answer[0];
outputDiv.prepend(magDiv);
let magDiv = document.createElement("div");
magDiv.innerText = "Magnitude: " + answer[0];

let dirDiv = document.createElement("div");
dirDiv.innerText = "Direction: " + answer[1] + "°";

let dirClampedDiv = document.createElement("div");
dirClampedDiv.innerText = "Direction (-180 to 180): " + clamp_n180_180(answer[1]) + "°";

let dirDiv = document.createElement("div"); dirDiv.innerText = "Direction: " + answer[1] + "°";
outputDiv.append(dirDiv);

let dirClampedDiv = document.createElement("div"); dirClampedDiv.innerText = "Direction (-180 to 180): " + clamp_n180_180(answer[1]) + "°";
outputDiv.prepend(magDiv);
outputDiv.append(dirDiv);
outputDiv.append(dirClampedDiv);
}
}
Expand All @@ -191,46 +208,24 @@ function clearTable(event) {
stepsDiv.innerText = "";
stepsDiv.style.borderStyle = "hidden";

vector_table.children[0].remove();
let tBody = document.createElement("tbody");

let tRow = document.createElement("tr");
tRow.setAttribute("class", "table-row");

let tBox1 = document.createElement("td");
tBox1.setAttribute("class", "table-box");

let inp1 = document.createElement("input");
inp1.setAttribute("class", "table-input");
inp1.setAttribute("placeholder", translations.en.magnitude);
tBox1.append(inp1);
let tRow = createRow();
tRow.addEventListener("keyup", addRow);

let tBox2 = document.createElement("td");
tBox2.setAttribute("class", "table-box");

let inp2 = document.createElement("input");
inp2.setAttribute("class", "table-input");
inp2.setAttribute("placeholder", translations.en.direction);
tBox2.append(inp2);
vector_table.children[0].remove();
vector_table.append(document.createElement("tbody"));
vector_table.children[0].append(tRow);

tRow.append(tBox1, tBox2);
bottomRow = tRow;
tRow.addEventListener("keyup", addRow);

tBody.append(tRow);
vector_table.append(tBody);
}

function enableMathDisplay(event) {
if (event.button === 0) {
if (showMath.getAttribute("data-active") === "true") {
if (stepsDiv.getAttribute("data-active") === "true") {
showMath.setAttribute("style", "background-color: lightgray");
showMath.setAttribute("data-active", "false");
stepsDiv.setAttribute("data-active", "false");
}
else if (showMath.getAttribute("data-active") === "false") {
else if (stepsDiv.getAttribute("data-active") === "false") {
showMath.setAttribute("style", "background-color: cadetblue");
showMath.setAttribute("data-active", "true");
stepsDiv.setAttribute("data-active", "true");
}
}
Expand All @@ -239,7 +234,6 @@ function enableMathDisplay(event) {

// Register event listeners
showMath.addEventListener("click", enableMathDisplay);

document.getElementById("clear-button").addEventListener("click", clear);
document.getElementById("calculate-button").addEventListener("click", calculate);
bottomRow.addEventListener("keyup", addRow);
44 changes: 41 additions & 3 deletions templates/vector2d/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,47 @@
{% extends 'vector2d/vector_template.html' %}
{% block title %}Information on 2D Vectors{% endblock title %}

{% block head %} {% endblock head %}
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename="./vector2d/css/2dvectors_home/2dvectors_home.css") }}">
{% endblock head %}

{% block content %}
<h1>Information on 2-dimensional vectors...</h1>
<p>2D Vectors are a way of representing motion on a 2-dimensional plane. Vectors, or polar coordinates, consist of two numbers, a distance and an angle. While working with them can simplify some problems, doing conversions between them and Cartesian coordinates can be repetitive and time-consuming.</p>
<div class="page-content">
<div class="heading">
<h1>What are 2-Dimensional Vectors</h1>
</div>
<hr style="width: 100%; margin: 2vh 0;">
<div class="info">
<p>2D Vectors are a way of representing motion on a 2-dimensional plane. Vectors, or polar coordinates, consist of two numbers, a distance or velocity and an angle. While working with them can simplify some problems, doing conversions between them and Cartesian coordinates can be repetitive and time-consuming.</p>
<p>The vectors are represented with a distance/velocity and an angle in a plethora of ways, though here will be represented in a distance @ angle format, i.e. 25m@45° representing 25 meters at a 45-degree angle. Additionally, it can be represented in a diagram like this:</p>
<img src="#need_an_image" alt="Example image of a vector diagram">

<p>These vectors can be added using a graphical method, or a computational method. While the graphical method might be easier to wrap your head around, you can quickly lose precision and the more vectors added together, the worse it will most likely get. When adding vectors graphically it's important to remember the rule to line the vectors up tip to tail. What this means is that every vector should be placed with the start of the vector being aligned with the end of the previous vector. The full steps to add vectors graphically are as follows:</p>
{# ToDo: Add the steps for graphically adding vectors. #}
<ul>
<li>1. Do thing 1</li>
<li>2. Do thing 2</li>
<li>3. Do thing 3</li>
<li>4. Do thing 4</li>
<li>5. Do thing 5</li>
</ul>

{# ToDo: Create an example image of adding vectors graphically. #}
<img src="#need_an_image" alt="Example image of adding vectors graphically">
<p>While a tiny bit more work to understand, a much more precise method for adding the together is through math, mostly staring trigonometry. Consisting of sin, cos, tan, and the pythagorean theorem. The steps to add vectors mathematically are too fairly simple.</p>
{# ToDo: Add the steps for mathematically adding vectors. #}
<ul>
<li>1. Do thing 1</li>
<li>2. Do thing 2</li>
<li>3. Do thing 3</li>
<li>4. Do thing 4</li>
<li>5. Do thing 5</li>
</ul>
{# ToDo: Create an example image of adding vectors mathematically. #}
<img src="#need_an_image" alt="Example image of adding vectors mathematically">

<p>Thoroughly knowing how to add vectors mathematically is vital for AP Physics 1, however once you know the ropes you can use our <a href="{{ url_for("vector2d.vector_addition_calculator") }}" class="no-anchor-decor" style="color:cadetblue;">calculator</a> which can add as many vectors together as you want, and will also show you the steps!</p>
</div>
</div>

{% endblock content %}
8 changes: 4 additions & 4 deletions templates/vector2d/vector_addition_calculator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@
<div class="page-content">
<div class="heading">
<h1>2D Vector Addition Calculator</h1>
<p>This calculator uses sin and cos functions to convert each vector to Cartesian coordinates, then add them together and convert the result back to polar coordinates, which is displayed to the user.</p>
<p>Mathematical 2D vector addition is done using sin and cos functions to convert each vector to Cartesian coordinates, these are then added back together and converted back to polar coordinates, more information on this can be found <a href="{{ url_for("vector2d.index") }}" class="no-anchor-decor" style="color:cadetblue;">here</a>.</p>
</div>
<div id="options">
<div class="option-div" id="show-math" data-active="false" style="background-color: lightgray;">Show Calculations</div>
<div class="option-div" id="show-math" style="background-color: lightgray;">Show Calculations</div>
</div>
<hr style="width: 100%; margin: 2vh 0;">
<table id="vector-table"><tbody>
<tr class="table-row">
<td class="table-box"><input class="table-input" placeholder="Magnitude"></td>
<td class="table-box"><input class="table-input" placeholder="Direction (degrees)"></td>
<td class="table-box"><input class="table-input" placeholder="Magnitude" name="magnitude"></td>
<td class="table-box"><input class="table-input" placeholder="Direction (degrees)" name="direction"></td>
</tr>
</tbody></table>
<br>
Expand Down

0 comments on commit af1d4e8

Please sign in to comment.