From 21d006d45559ad2e287608519576970bcd916f0a Mon Sep 17 00:00:00 2001 From: Keegan Leary <35752455+learyjk@users.noreply.github.com> Date: Wed, 6 Mar 2024 16:58:19 -0800 Subject: [PATCH] chart --- src/webflow/canvas.js | 42 ------------------------- src/webflow/interest.js | 69 +++++++++++++++++++++++++++++++++++++++++ src/webflow/video.js | 55 -------------------------------- 3 files changed, 69 insertions(+), 97 deletions(-) delete mode 100644 src/webflow/canvas.js create mode 100644 src/webflow/interest.js delete mode 100644 src/webflow/video.js diff --git a/src/webflow/canvas.js b/src/webflow/canvas.js deleted file mode 100644 index 2129c1e..0000000 --- a/src/webflow/canvas.js +++ /dev/null @@ -1,42 +0,0 @@ -document.addEventListener("DOMContentLoaded", function () { - const canvas = document.querySelector("#canvas"); - - // Adjust the canvas size - function resizeCanvas() {} - - // Call resizeCanvas to set initial size and add event listener for any resize - resizeCanvas(); - - // Flag to track the painting state - - // Function called when the mouse button is pressed - // Sets the painting flag to true and starts the drawing process - function startPosition(e) { - // Call the draw function immediately to allow dot-like drawings - } - - // Function called when the mouse button is released - // Resets the painting state and prepares the context for a new path - function endPosition() { - // Starts a new path by resetting the current path. This prevents lines from connecting to the next starting point. - } - - // The main drawing function that reacts to mouse movements - function draw(e) { - // If we are not in painting mode, don't draw - // Get the bounding rectangle of the canvas to consider any CSS styling - // Calculate mouse position relative to the canvas. - // This accounts for any element offset, ensuring the drawing position matches the mouse position. - // Set the properties of the drawing line - // Create a line to the new position from the last position - // Render the line on the canvas - // Begin a new path with a move to the current position - // This prevents lines from being connected to the subsequent moveTo position - // Moves the path to the new position without creating a line - } - - // Event Listeners - canvas.addEventListener("mousedown", startPosition); - canvas.addEventListener("mouseup", endPosition); - canvas.addEventListener("mousemove", draw); -}); diff --git a/src/webflow/interest.js b/src/webflow/interest.js new file mode 100644 index 0000000..c517f11 --- /dev/null +++ b/src/webflow/interest.js @@ -0,0 +1,69 @@ +const form = document.querySelector("#interest-form"); + +form.addEventListener("submit", function (e) { + // Prevent default Webflow form submit + e.preventDefault(); + e.stopPropagation(); + // Calculate Interest and generate chart + calculateInterest(); +}); + +function calculateInterest() { + // Create FormData object from the form + const formData = new FormData(form); + + // Use FormData API to get form values + const principal = Number(formData.get("principal")); + const rate = Number(formData.get("rate")); + const frequency = Number(formData.get("frequency")); + const years = Number(formData.get("years")); + + // Calculating compound interest + const amount = + principal * Math.pow(1 + rate / 100 / frequency, frequency * years); + + // Preparing data for the chart + const labels = Array.from({ length: parseInt(years) }, (_, i) => i + 1); + const data = []; + for (let year = 1; year <= years; year++) { + const yearAmount = + principal * Math.pow(1 + rate / 100 / frequency, frequency * year); + data.push(yearAmount); + } + + // Chart.js to render the chart + const ctx = document.querySelector("#chart").getContext("2d"); + if (window.interestChart instanceof Chart) { + window.interestChart.destroy(); // Destroy existing chart instance if exists + } + window.interestChart = new Chart(ctx, { + type: "line", + data: { + labels: labels, + datasets: [ + { + label: "Investment Over Time", + data: data, + borderColor: "#5e75d2", + }, + ], + }, + options: { + scales: { + y: { + beginAtZero: true, + title: { + display: true, + text: "Amount ($)", + }, + }, + x: { + title: { + display: true, + text: "Year", + }, + }, + }, + }, + }); +} diff --git a/src/webflow/video.js b/src/webflow/video.js deleted file mode 100644 index 0ca4962..0000000 --- a/src/webflow/video.js +++ /dev/null @@ -1,55 +0,0 @@ -const video = document.querySelector("#video video"); -const play = document.querySelector("#play"); -const stop = document.querySelector("#stop"); -const progress = document.querySelector("#progress"); -const timestamp = document.querySelector("#timestamp"); - -/** - * Play or pause video - * @returns {void} - * If video is paused, play it. If video is playing, pause it. - */ -function playPause() {} - -/** - * Stop video - * @returns {void} - * Set video time to 0 and pause video - */ -function stopVideo() {} - -/** - * Update play button icon - * @returns {void} - * If video is paused, show play icon. If video is playing, show pause icon. - */ -function updatePlayButtonText() {} - -/** - * Update the progress bar - * @returns {void} - * Update the progress bar value to the current video time - */ -function updateProgress() { - // Update progress bar using video time divided by duration times 100 - // Get minutes - // Get seconds - // Update timestamp -} - -/** - * Sets the progress bar - * @returns {void} - * Set the video time to the progress bar value - * - */ -function setProgress() {} - -video.addEventListener("click", playPause); -video.addEventListener("play", updatePlayButtonText); -video.addEventListener("pause", updatePlayButtonText); -video.addEventListener("timeupdate", updateProgress); - -play.addEventListener("click", playPause); -stop.addEventListener("click", stopVideo); -progress.addEventListener("click", setProgress);