Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb.

However, the challenge lies in not knowing how to bring my vision to life.

My ultimate goal is to create a responsive single-page website that retrieves stock prices from an API and displays them on individual cards. Additionally, users should be able to click a plus button to add another card displaying a stock index they have chosen from a form option.

So now, I have several questions:

  1. Should I consider using a JavaScript framework like React or Vue to achieve this goal? If so, how do I go about it?
  2. I have successfully coded the API request in Node.js and can retrieve and display the data in the console log. How can I display this data on my HTML page?
  3. How can I dynamically create these cards and have them automatically added to the homepage?
  4. Is there a way to save data for each individual card without requiring a login process?

I understand that these are basic questions, but I am eager to learn how to accomplish them.

Please refer to the images below.

(check: https://i.stack.imgur.com/Sfr5D.png https://i.stack.imgur.com/2BoCK.png

javascripthtmlcssweb-applicationsvue.js

Answer №1

  1. Utilize your current skills to reach your objectives and only turn to specific frameworks like React when necessary. Understanding the inner workings of these tools is crucial before fully relying on them for development tasks.
  2. In order to send API data from Node.js to a web client, consider implementing an HTTP framework such as Express.
  3. If you are discussing component-based libraries and working with card data in JSON format, it may be advantageous to render the page with this data. For database-persisted content, server-side rendering using technologies like Node could be beneficial.
  4. For a straightforward approach, store information locally using features like localStorage or indexeddb. If server-side storage is required, establish user identification mechanisms to securely save data.

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

Combine various arrays of objects into one consolidated object

Problem: There are untyped objects returned with over 100 different possible keys. I aim to restructure all error objects, regardless of type, into a singular object. const data = [ { "type":"cat", "errors" ...

javascripttypescriptreduce

Can someone please advise me on how to output the value of a var_dump for an array using console.log?

After writing the code in this manner, it functions properly and returns a JSON object. public function getElementsAction() { $currency = App::$app->getProperty('currency'); if(!empty($_POST)) { $sql = 'SELECT name, p ...

javascriptphpjsonfetchjsonencoder

What methods are available to create distinctive, shareable links akin to those utilized by Zoom and Google Hangouts?

I'm currently developing a group video chat app and I'm facing the challenge of generating distinct shareable links for every chat room created. Can anyone guide me on how to accomplish this? My aim is for users to easily join the chat room when ...

javascripthtmlcssnode.jsagora.io

Combining onClick and a href within a single sentence: How can I effectively utilize both onClick

Currently, I have implemented the following code for a sliding menu bar. However, I am facing an issue where upon clicking on a href link, I want the ".gs-hamburger" function to slide up the menu bar after redirecting to the page. <nav class="gs-nav- ...

jqueryhtml

Date selection tool in Bootstrap showing blank field

I am currently working on implementing a bootstrap datepicker to update layer dates on my website. However, I am facing an issue where the calendar dropdown does not appear when I click on the datepicker box and instead it just shows an empty box. My goal ...

javascriptbootstrap-4leafletpugbootstrap-datepicker

Using the axios response to assign data object in VueJS

When making an API call, I am receiving an expected error. While I am able to log the error message in the console, I am encountering issues trying to set a vuejs data variable with the response. Can anyone point out what I might be doing incorrectly? ...

javascriptvue.jsvuejs2axios

PHP/AJAX user action history manager

Is there a library available that offers undo/redo functionality with a complete history for a web application? One possible solution could be a system using php/javascript/ajax where you can record the opposite action and variable state for each user acti ...

phpjavascriptajaxundo-redo

Modify the length of an array using a number input field

Currently, I am working with an array that contains objects and I want to dynamically change the number of objects in this array based on user input from a number type input box. Whenever the number in the input box is increased, I need to increase the len ...

javascripthtmlangularjsarrays

Updating the textarea with Ajax without the need for a button click or refreshing the

I need to implement a feature where a textarea will automatically update the database without requiring the user to click on any buttons or refresh the page. The idea is that after a keyup event, there should be a 2-second countdown timer. If no additional ...

javascriptphpajax

Easy Nested Dynamic Routing

My goal is to utilize a modal within a nested route to execute a specific task for each object. For instance, the '/objects/2' route includes a <nuxt-child/> component for adding comments in a modal using the route path '/objects/2/add ...

vue.jsnuxt.js

Can the top header stay fixed to the top of the screen even when scrolling down?

Code snippet: http://jsfiddle.net/R3G2K/1/ In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top. I have explored various solutions for thi ...

javascriptjqueryhtmlcss

Modifications made to Vue components do not prompt Jest to automatically restart

I have a section of my package.json file that looks like this: { ... "scripts": { "test:unit": "jest --no-cache", ... }, "jest": { "transform": { "^.+\\.js$": "babel-jest", "^.+\\.vue$": "vue-jest" } ...

vue.jsjestjs

Is there a way for me to reach a parent instance of a class from a child instance?

I am currently working on a project that involves a class called "Main" with an instance named "main". This "main" instance includes two properties from other classes, referred to as "player" and "background". My goal is to have the child instances interac ...

javascript

Tips for avoiding Google Tag Manager from interfering with document.write() function

We have integrated Angular into our website, however, not all pages have been migrated to Angular yet. To handle this situation, we have implemented a hybrid approach: Each request is initially directed to Angular. Once the page is loaded, it checks if th ...

javascriptangulargoogle-tag-manager

Utilize Object by referencing a string

I am trying to access an object from my node backend in React by using a string as a key. For example, if the string is 'Cat', I want to access the Cat object along with its corresponding key/value pairs. Here is an illustration of what the code ...

javascriptnode.jsreactjs

Identifying fluctuations in unprocessed data

Currently in the process of developing a web application that serves as a dashboard for monitoring storage tank levels. It gathers data from various sensors inside tanks and saves this information in a database. The tool is created using express / node.js. ...

javascriptnode.jsexpressdata-analysis

Exploring the Power of Observables in Angular 2: Focusing on Targeting an Array Nested Within

I encountered a situation where I was successfully looping through objects in an array within my Angular 2 application using observables. In the client service file, my code looked like this: getByCategory(category: string) { const q = encodeURICompon ...

javascriptarraysangulartypescript

Incorporate a dropdown menu based on the selection made in another dropdown menu

I have a scenario on my website where I want to dynamically add select boxes based on the value selected in the previous one. Here is the code snippet: <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"> </script> & ...

javascripthtmlcss

Preventing duplication of code execution in recycled PHP elements

Currently, I have implemented a generic toolbar that is used on multiple pages of my web application by using PHP include. This toolbar contains log in/log out functionality and checks the log in status upon loading to update its UI accordingly. Initially ...

phpjavascriptweb-applications

Interactive map navigation feature using React.js

Can someone help me figure out how to create a dynamic map with directions/routes? I am currently using the Directions Renderer plugin, but it only shows a static example. I want to generate a route based on user input. Below is the code snippet: /* ...

javascriptgoogle-mapsreactjsreact-nativemaps