Steps for appending a string to a variable

Question

Steps for appending a string to a variable

Currently working on creating a price configurator for a new lighting system within homes using Angular 7. Instead of using TypeScript and sass, I'm coding it in plain JavaScript.

Page 1: The user will choose between a new building or an existing one, along with options for Wi-Fi/wires [z1, z2...]

<label>New Building</label>
<input type="radio" value="z1">

The user then needs to specify the size of the building, which will add different controls on page number 3 [-o1, -o2...]
```
 <select><option value="-o1">Small</option>...
```
Selection of what to build (lights, aircon, detectors, etc.), potentially adding more controls in step 4 [y8, y9...]
Choose additional controls such as Android devices, TVs, keychains, movement detectors (can be multiple) [-5x2-24x2]
Calculate the total price

I plan to store these values as strings in a variable and then use them to assign prices accordingly. For example, z1-o1-y8-i-5x2-24x2 translates to a new building, small size, lights, On/Off + timing controls, and specific controllers repeated twice each with their respective prices. It's quite complex, and I'm not sure if I'm on the right track. Any guidance on how to accomplish this would be greatly appreciated. Thank you.

javascript html css angular typescript

Answer 1

Answer №1

To calculate the total price of all options with individual prices, follow these steps:

Begin by creating an object that lists each option along with its corresponding price:

const prices = {
  z1: 4999,
  z2: 7499,
  o1: 13000,
  ...and so on
}

Next, create an array containing all the available options:

const options = ['z1', 'o1', 'y8', 'i', and more];

Use a function to loop through the array and determine the total price:

function determinePrice(options) {
  let price = 0;
  for (let option of options) {
    price += prices[option];
  }
  return price;
}

When adding options multiple times, enter them individually instead of duplicating entries in the array.

For this method to work effectively, ensure that all components have access to the same array for storing selected options. Implementing this will vary based on your project's structure; refer to Angular Component Interaction for ideas:

Angular Component Interaction

Answer 2

To calculate the total price of all options with individual prices, follow these steps:

Begin by creating an object that lists each option along with its corresponding price:

const prices = {
  z1: 4999,
  z2: 7499,
  o1: 13000,
  ...and so on
}

Next, create an array containing all the available options:

const options = ['z1', 'o1', 'y8', 'i', and more];

Use a function to loop through the array and determine the total price:

function determinePrice(options) {
  let price = 0;
  for (let option of options) {
    price += prices[option];
  }
  return price;
}

When adding options multiple times, enter them individually instead of duplicating entries in the array.

For this method to work effectively, ensure that all components have access to the same array for storing selected options. Implementing this will vary based on your project's structure; refer to Angular Component Interaction for ideas:

Angular Component Interaction

Steps for appending a string to a variable

Answer №1

Similar questions

What is the reason TypeScript does not display an error when assigning a primitive string to an object String?

How to utilize *ngFor alongside the async pipe for conditional rendering in Angular 8 HTML

To optimize your bundling process, include the leaflet.css file from the node_modules/leaflet directory using webpack

The code for filtering an array in Angular 9 seems to be failing to display the expected filtered items

Invoke the identical function in between two functions that make asynchronous AJAX calls

The previous link is still present in the current URL

If a quote character is detected in a string, color the line red

Error message: Conflicting type declarations across multiple files

`The Best Times to Utilize Various Image Formats Within a Single Webpage`

NG02100: InvalidPipeArgument: 'Cannot parse "Wed Jun 29 2022 10:19:00 GM" as a date' when using the DatePipe in Angular

What are the steps for importing KnockOut 4 in TypeScript?

What can Cordova and express js bring to the table together?

Optimizing image centering in Next JS as screen size expands

What is the best approach for looping through a JSON object?

What is the approach for for loops to handle non-iterable streams in JavaScript?

Using Multiline Strings for Arguments

How come my header is not spanning the full width of the page?

One way to position a sidebar between two divs is to ensure it adjusts seamlessly to the size of the browser window when resized

Is it possible to save an entire webpage that infinitely scrolls without actually manually scrolling through it?

Ways to update a component upon becoming visible in Angular