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

Unable to transform node lacking a body

I am attempting to execute the sample code in the react-testing-library to test react hooks. However, it's encountering an issue on this particular line: testHook(() => ({count, increment} = useCounter({ initialCount: 2 }))) It appears to be rela ...

javascriptreactjsbabeljscreate-react-appreact-testing-library

Custom HTML binding in expanding rows of Angular 2 DataTables

I am currently working on implementing a data table feature that allows for an extended child row to be displayed when clicking the + icon. This row will show additional data along with some buttons that are bound via AJAX before transitioning to Angular 2 ...

javascriptangulartypescriptangular2-template

Checking the length of user input with JavaScript

To ensure that the user enters at least 4 letters in a text box and show an error if they don't, I need help with the following code. It is partially working but currently allows submission even after showing the error message. I want to prevent subm ...

javascripthtml

Substitute the temporary text with an actual value in JavaScript/j

Looking to customize my JSP website by duplicating HTML elements and changing their attributes to create a dynamic form. Here is the current JavaScript code snippet I have: function getTemplateHtml(templateType) { <%-- Get current number of element ...

javascriptjquery

When individuals discuss constructing a stack, or a full stack, in JavaScript, what exactly are they referring to and how does this concept connect with Node JS?

I recently started learning about node.js, but I'm struggling to understand its purpose. I have experience with JavaScript/jQuery and Angular, so I don't see how Node can benefit me. People keep talking about full stack JavaScript but I'm st ...

javascriptnode.js

implementing one active line item at a time in Vue

Within my Vue template, I have a small unordered list: <ul style="border-bottom:none !important; text-decoration:none"> <li class="commentToggle" v-bind:class="{active:commentActive}" v-on:click="setInputName('new')">New Comment ...

javascriptvue.js

How can I utilize ajax to transmit data to a PHP file and then display the contents of this file within a div utilizing the

This is the script I am using for ajax: var cid = $(this).data('cid'); var sendData = { canidtoset: cid }; $.ajax({ url: '/functions/cv_showinformation.php', type: 'post', data: sendData, dataType: 'json ...

phpjqueryhtmlajax

Is it possible to incorporate Vue and Vuetify into an existing project that requires IE compatibility?

Currently in the process of enhancing a legacy project with new functionality. The front end is currently relying solely on jQuery for all the webpages. I have been tasked with adding another webpage and would like to incorporate Vuetify + Vue due to the i ...

javascriptvue.jsecmascript-6babeljsvuetify.js

Is it possible to trigger a JavaScript function and an AJAX command with just one button click?

I'm looking to achieve a specific functionality using one button within a form. The requirements are as follows: 1) When the button is clicked, it should trigger a JavaScript function that performs animations such as fadeout and fadein. 2) Following ...

javascripthtmlajaxjsfxhtml

Oops! Encounter an issue while trying to deploy VueJS App on Firebase Hosting

I recently developed a Vue application and integrated firebase tools to deploy it on Firebase hosting. Initially, everything worked fine when I ran npm run build and firebase deploy. However, upon making changes and attempting to use commands like npm run ...

firebasevue.jswebpackfirebase-hosting

Creating a reverse proxy using next.js

My goal is to set up a reverse proxy for the GeForce NOW website using Next.js, but I'm struggling to make it work. module.exports = { async rewrites() { return [ { source: '/:slug', destination: 'https://pla ...

javascriptproxynext.jsreverse-proxy

jQuery struggling to parse HTML retrieved through AJAX call

While working on parsing some XML data received from an AJAX request, I encountered a special case that required additional handling. Occasionally, the server would return HTML content, prompting the need for a page reload. However, when attempting to iden ...

jqueryhtmlxmlajaxmeta-tags

What is the best way to dynamically set the `to` prop in nuxt-link?

I have been struggling with this issue for quite some time now. In my basic Nuxt project, the directory structure is set up as shown below (please ignore the fun.vue): The goal is to allow navigation to individual posts using paths like http://localhost:3 ...

vue.jsnuxt.js

Autocomplete feature seems to be functioning properly in the online demonstration, while it does not seem

I can see that the autocomplete feature is working in the example provided, but it's not functioning properly in my attempt. What could be causing this issue? <!doctype html> <html lang="en"> <head> <meta charset="utf-8> & ...

javascriptjquerycssjquery-ui

Tips for Guaranteeing a Distinct Email and Username are Stored in MongoDB with Mongoose

db.UserSchema = new db.Schema({ user: {type:String, unique:true, required:true,index:true}, email: {type:String, unique:true, required:true,index:true}, password: {type:String, required:true}, phon ...

javascriptnode.jsmongodbmongoose

Deactivated dropdown menu options with the help of Twitter's bootstrap framework

Using markup, I have created a dropdown menu utilizing Twitter Bootstrap. <ul class="nav pull-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b>< ...

csstwitter-bootstrap

Show a modal component from another component in Angular 2

As a newcomer to Angular, I'm working on a modal component that changes from hiding to showing when a button with (click) is clicked. The goal is to integrate this modal into my main component, allowing me to display the modal on top of the main conte ...

javascriptangular

What is the correct way to properly wrap the div component in this code snippet?

I am currently working on implementing a Javascript component that displays pinned locations and related information on a map. I have made some progress with the implementation, but unfortunately, it does not appear correctly in the actual site. There is a ...

javascripthtmljquerycssimplementation

Perform mathematical operations on numbers using jQuery based on their index

Trying to manipulate numbers in the HTML with this less-than-ideal code. The display starts like this at the beginning: 1/ 6 And ends up like this at the final index: 6/ 6 Utilizing this in conjunction with pageslide.js as a workaround for the default ...

jqueryhtml

Leveraging the power of JavaScript to reveal concealed div elements

I've got a collection of divs (five in total) with a hidden class applied to them in my CSS stylesheet. Each div also has its own unique ID. My goal is to use JavaScript to reveal these divs one by one. Here's an example of what I'm looking ...

javascriptcssclasshtml