Display the execution duration on an HTML document

Recently, I created a loan calculator using Javascript and now I'm contemplating on incorporating the time taken for the code to execute into the results. My intention is to have the execution time displayed on my HTML page, but I am unsure of how to proceed. Any assistance would be greatly appreciated! Here's the code for the loan calculator: https://github.com/gerhynes/loan-calculator

I attempted to achieve this by logging the execution time in the console, but it didn't yield the expected results. My ultimate goal is to have it printed directly on the HTML page.

javascripthtmlcssbootstrap-4frontend

Answer №1

const startTimer = performance.now();

calculateLoan();   // <---- Function being timed

const endTimer = performance.now();
console.log("Time taken for Loan Calculation: " + (endTimer - startTimer) + " milliseconds.");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for preventing redundant AJAX calls following a setTimeout

I have a text field where I check the database for matches when users type. However, I want to avoid overloading the database with unnecessary queries if someone quickly types several characters. After browsing the internet, it seems like the recommended ...

javascriptjqueryajax

Issues with locating the fonts: React-slick paired with nextjs

Incorporating react-slick into a NextJs project has been quite seamless, however, I'm encountering issues with importing the necessary fonts from the CSS files. To address this snag, I've attempted the following steps: npm install slick-carouse ...

cssreactjsfontsnext.jsreact-slick

Ways to access a field value in SAPUI5

As I delve into OPENUI5/SAPUI5, I'm faced with the task of accessing data for the controls I've implemented. For instance: <Label text="Amount" /> <Input id="inputAmount" value="{Amount}" /> <Text id="lblCurrency" text="USD" > ...

javascripthtmlmodelsapui5

Error encountered: Unexpected token '"', expecting "}". Perspective from React : It is an unfortunate occurrence which h

I'm a newbie when it comes to React and I'm currently following a tutorial. Unfortunately, I encountered an error message while the script was trying to compile: Parsing error: Unexpected token, expected "}" The issue seems to be with the &apos ...

javascriptreactjsfrontend

Tips for concealing JavaScript and web framework version details from Weppalyzer

To enhance security, we are looking to conceal all JS and Bootstrap information. I have employed the help of the Weppalyzer tool for this purpose. https://i.stack.imgur.com/iLMGF.png Does anyone know how to effectively hide these details? I attempted set ...

javascriptphplaravelsecuritytesting

Tips for incorporating scrolling into a sub menu

I'm currently attempting to incorporate vertical scroll only for my sub-menu using CSS, without including a horizontal scroll. However, the issue arises when I remove the horizontal scroll - it causes the nested sub-menu within the initial one to bre ...

htmlcsswordpressmenu

Extract the sub-element within a parent element using Vue event handling

Objective The main aim is to add a class to the dropdown element .menu-item-dropdown whenever the user clicks on the .menu-item element. Issue Currently, when clicking on the .menu-item element, the returned value from the console.log inside the showMob ...

javascriptvue.js

Utilize an imported function within a React component's return statement to avoid an invalid hook call issue

Hey everyone, I've created a reusable component that can translate keys into a chosen language using keynames as strings or variables. Typically, I would use a <t> tag for this purpose, but due to certain reasons, I am replacing current transl ...

javascriptreactjsreact-hooks

The oninput() event does not trigger on phones and tablets

Currently, I am in the process of developing an application using PhoneGap. An issue has arisen where my code runs perfectly fine when tested on a browser, but the onInput() function does not seem to trigger on mobile devices. <div class="t1">09< ...

javascriptjquerycordova

What is a way to execute a series of requests using rxjs similar to forkJoin and combineLatest, without needing to wait for all requests to finish before viewing the results?

Consider you have a list of web addresses: urls: string[] You create a set of requests (in this instance, utilizing Angular's HTTPClient.get which gives back an Observable) const requests = urls.map((url, index) => this.http.get<Film>(url) ...

javascriptangulartypescriptrxjs

The hover effect on MUI TableRows is being overshadowed by the background color of the TableCell

I'm currently using @mui/material version ^5.10.1. My challenge is applying the TableRow hover behavior as outlined in the documentation. However, I have also set a background color for the first TableCell in each row, which ends up overriding the ho ...

cssreactjsmaterial-uihovertablerow

Issues have been encountered with Angular 5 when trying to make required form fields work properly

Just created my first Angular app using Angular 5! Currently following the documentation at: https://angular.io/guide/form-validation. Below is the form I have set up: <form class="form-container"> <mat-form-field> <input matInput pl ...

javascriptangulartypescript

Filtering for Material Autocomplete is limited to the getOptionLabel field

Currently, I am utilizing the Google Material-UI autocomplete component. It is currently only filtering based on the "getOptionLabel" option field when text is entered into the input field. However, I would like the autocomplete to filter based on more tha ...

javascriptreactjsautocompletematerial-uireact-hooks

Postman post request failing to insert Mongoose model keys

Recently, I've been experimenting with the post method below to generate new documents. However, when I submit a post request in Postman (for example http://localhost:3000/api/posts?title=HeaderThree), a new document is indeed created, but unfortunate ...

javascriptnode.jsmongodbexpressmongoose

How to modify the background color in Material Ui's datepicker?

Is there a way to customize the background color of my Material UI datepicker modal? To change the colors, you can use the createMuiTheme function from "@material-ui/core": const materialTheme = createMuiTheme({ overrides: { MuiPickersToolbar: ...

javascriptreactjsdatepickermaterial-ui

"Embedding social content within an iframe may result in the element being unresponsive

I have a setup where I'm utilizing social embed to include Instagram content in the footer. When I insert the provided iframe code, the layout looks correct but the content is not clickable. <iframe src="https://embedsocial.com/facebook_album ...

javascripthtmlcssiframebootstrap-4

Steps to alter background image and adjust its height upon function activation

I am working on a search page with an advanced search option that only certain users can access. I need the height of my div to increase accordingly and also change the background image to a larger size when the advanced search is selected. How can I make ...

htmlcssangularjs

Enhance your Three.js experience: Effortlessly Panning Panoramas with Smooth E

I am currently working on a 6 cube panorama project and using this demo as a reference: The dragging functionality in this demo is controlled by mouse events. I am looking to implement easing so that the panorama cube follows the mouse smoothly. I underst ...

javascriptthree.jseasingtween.js

The information being transferred from a jQuery Ajax request to an MVC ApiController Action is disappearing

Let me first mention that although there are similar questions to this one already posted here, I've tried all the solutions and have not had any success. I have an MVC ApiController Action with the following signature: public void Post([FromBody] E ...

javascriptjqueryajaxasp.net-apicontroller

Having difficulty adding items to the shopping cart

While working on a simple checkout system using django and react, I encountered an issue. Upon clicking the add to cart button, instead of adding the item to the cart as intended, I receive a 404 page not found error. I suspect that the problem may lie in ...

javascriptpythonreactjsdjangodjango-rest-framework