Information not displaying correctly on the screen

My latest project is a recipe app called Forkify where I am utilizing JavaScript, npm, Babel, Webpack, and a custom API for data retrieval.

API URL

Search Example

Get Example

The app displays recipes with their required ingredients on the screen. Additionally, there are two buttons, + and -, to adjust servings which in turn updates the serving size and ingredients accordingly.

For better understanding, below are screenshots and code files:

index.js

[Code snippet]

recipeView.js

[Code snippet]

Recipe.js

[Code snippet]

searchView.js

[Code snippet]

base.js

[Code snippet]

Screenshots:

Landing Page

https://i.sstatic.net/AXrX7.png

Entering search query as pizza

https://i.sstatic.net/eoMig.png

Results of the search query

https://i.sstatic.net/DGxsJ.png

Selecting Recipe from the list and showing default values of ingredients and servings

https://i.sstatic.net/aSdbx.png

Issue: The + and - buttons should adjust the ingredients and servings but currently they only change the servings. Ingredients display '?' instead of updating. Looking for a solution.

https://i.sstatic.net/EboNC.png

javascriptnpmwebpackbabeljs

Answer №1

After some investigation, I identified the issue in the Recipe.js file. The problem was located in the last section where the updateServings(type) method was defined. Initially, the method contained the following line:

ing.count *= (newServings.count / this.servings);

I made a modification to this line:

ing.count *= (newServings / this.servings);

Surprisingly, this change resolved the problem.

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

Are some packages missing from your Azure DevOps Artifacts library?

In my Azure DevOps setup, I have a feed configured with an upstream source of https://registry.npmjs.org. When I execute the command yarn in my terminal, all the packages mentioned in my package.json file along with their dependencies get downloaded corre ...

npmazure-devops

Is it possible to dynamically assign a template reference variable to a newly created DOM element in TypeScript?

After creating a DOM element with this.document.createElement('h1'), I am looking to insert the element into a section tag using a template reference variable (myTRF), similar to the example below: <section> <h1 #myTRF>This is my he ...

javascriptangulartypescript

Choose the DIV element based on its data attribute using JSON

When using each(), my goal is to: Hide all divs where the data-infos.grpid = $jQuery(this).data('infos').grpid Show the next div where data-infos.ordre = $jQuery(this).data('infos').next_ordre I am unsure how to apply a "where" ...

javascriptjqueryjson

Tips for updating the color, background, and height of the particle background using react-tsparticles

Is it possible to customize color and background in react-tsparticles? Below is an example of a particle configuration file named particle-config.js const particlesConfig = { background: { color: { value: "#232741", }, posi ...

javascriptreactjsreact-particles-js

How can I obtain the model values for all cars in the primary object?

const vehicles={ vehicle1:{ brand:"Suzuki", model:565, price:1200 }, vehicle2:{ brand:"Hyundai", model:567, price:1300 }, vehicle3:{ brand:"Toyota", model ...

javascriptjsontypescriptobject

Switching the background image when hovering over a list element

Looking at the screenshot, it's clear that there is an unordered list with a background image set on the div. What I am trying to achieve is to have the background image change whenever I hover over a list item. Each list item should trigger a differe ...

javascriptjqueryhtmlcss

Tips for eliminating flicker upon the initial loading of a webpage caused by dynamic changes in CSS styles through JavaScript

Struggling with the load order of my CSS and JavaScript... Currently, I have a div with a blue background that is styled to appear sliced diagonally. However, upon initial page load (or CTRL+SHIFT+R), there's a brief moment where the slice effect doe ...

javascripthtmlcssdom

Error Occurs: 'PRM_MissingPanel' randomly in Ajax Update Panel

When using the Ajax Update Panel in Visual Studio to handle post backs for my search function, I encounter an issue. After generating a gridview with the results (i.e., searching for a member), whenever I update to the newest version from TFS, an error is ...

javascriptc#asp.netajaxupdatepanel

How to properly structure a Vue file in vscode to meet eslint guidelines

Essentially, what I am seeking is uniformity in: the way vscode formats my .vue file how the eslint checker scans my .vue file when I execute npm run .... to launch the server or build the target Currently, after formatting my document in vscode and then ...

javascriptvue.jsvisual-studio-codeeslint

How come I don't have to specify the relative path in my HTML file to include a JavaScript file when using Express JS?

I am currently in the process of building my very first project from scratch. As I was setting everything up, I ran into an issue with using relative paths to reference my javascript file in my index.html file. Strangely enough, simply referencing the scri ...

javascripthtmlnode.jsexpress

Vue.js numerical input module

My approach involves utilizing Numeral.js: Vue.filter('formatNumber', function (value) { return numeral(value).format('0,0.[000]') }) Vue.component('input-number', { templa ...

javascriptvue.jsnumeral.js

What is causing express.js not to authenticate properly?

I'm currently in the process of developing a server application using node.js, which is up and running on localhost:8080. As I attempt to make a login request, I've encountered an issue where one method works while the other fails. My suspicion i ...

javascriptnode.jsauthenticationexpress

The timer functionality in the Angular 2+ component is malfunctioning

This situation is quite perplexing. I have a timer function that works perfectly on all my components except one. Strangely, I can't seem to figure out why this particular component is not cooperating, especially since there are no error messages appe ...

javascriptangulartypescript

Tips for allowing divs to be dragged and resized within table cells and rows

UPDATE I believe that utilizing Jquery is the most appropriate solution for resolving my issue with the demo. Your assistance in making it work would be greatly appreciated. Thank you. My goal is to develop a scheduler application. https://i.sstatic.net ...

javascriptjquerycssreactjsjquery-ui

Having trouble getting the new React app to run with the yarn start command - it just doesn't

An error has occurred. See the details below: yarn run v1.22.17 $ react-scripts start node:internal/modules/cjs/loader:488 throw e; ^ Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exp ...

reactjsreact-nativenpmyarn-lock.json

Utilize the power of AJAX and Laravel to seamlessly upload an Excel file

I am currently facing an issue with importing an Excel file using AJAX and Laravel in my application. The form of excel import is embedded within another form and I have observed that the error handling is not displaying the error messages correctly on the ...

javascriptphpjqueryajaxlaravel

Is there a way to streamline this query code that seems overly complex?

Could someone please assist me in simplifying this code? I am trying to shorten or simplify the query code by using a stored procedure, but I still need to include the details inside the "()" parentheses. I am new to Node.js and would appreciate any help. ...

javascriptmysqlnode.jsexpress

Running NPM Scripts with the watch command is successful in the command line interface, but encounters errors when

My goal is to configure the following npm scripts on Windows 10 (using git bash, MINGW): Extract from scripts in my package.json: ... "sass:build": "cat assets/styles/* | node-sass | postcss --no-map -u autoprefixer -u cssnano > dist/public/styles/sty ...

node.jsnpmsasswatch

What are some tactics for avoiding movement in the presence of a border setting?

I created a webpage that has the following structure: .topbar-container { width: 100%; position: fixed; top: 0; background-color: #2d3e50; z-index: 999; display: flex; transition: height 500ms; } @media (min-width: 992px) { .topbar-cont ...

javascripthtmlcss

Issue with dynamic form JavaScript functionality after removing curly braces { } from a select tag in Rails

In my Rails form, there is a gender field defined as follows: <%= f.select :gender, ["Male","Female"],{class: "gender"} %> I also tried adding an onclick event like this: <%= f.select :gender, ["Male","Female"],{class: "gender"},onclick: "categ ...

javascriptjqueryruby-on-railsajaxforms