Top method for handling multiple conditions - JavaScript

I created a customized function to create a responsive carousel with multiple images per slide. (Unfortunately, I couldn't get Owl Carousel to work on my Angular project, but that's not the focus here).

The number of images displayed per slide is determined by the current screen width.

Take a look at my code snippet:

   imgsHistory = [
    "../../assets/imgs/history/hist_01.png",
    "../../assets/imgs/history/hist_02.png",
    "../../assets/imgs/history/hist_03.png",
    "../../assets/imgs/history/hist_04.png",
    "../../assets/imgs/history/hist_05.png",
    "../../assets/imgs/history/hist_06.png",
    "../../assets/imgs/history/hist_07.png",
    "../../assets/imgs/history/hist_08.png",
    "../../assets/imgs/history/hist_09.png",
    "../../assets/imgs/history/hist_10.png",
  ];

  imgsHistoryArray = [];
   resizeCarousel() {
    let images = this.imgsHistory;
    let cut = this.getCut();
    this.imgsHistoryArray = [];

    for (var i = 0; i < images.length; i = i + cut) {
      this.imgsHistoryArray.push(images.slice(i, i + cut));
    }
  }

  getCut() {
    if (this.getScreenWidth < 480) {
      return 1
    } if (this.getScreenWidth < 576) {
      return 2
    } if (this.getScreenWidth < 768) {
      return 3
    } if (this.getScreenWidth < 992) {
      return 4
    }
    return 6;
  }

The concern arises from CodeMetrics' report indicating that the getCut() function has a complexity of 10, which is subpar. Any suggestions on how I can enhance this function?

javascriptfunctionif-statementcomplexity-theory

Answer №1

To streamline your code and minimize the use of if statements, consider implementing an array and utilizing a loop:

fetchData() {
    let heights = [200, 400, 600, 800];
    for(let j = 0; j < heights.length; j++) {
        let height = heights[j];
        if(this.getScreenHeight < height) 
            return j+1;
    }
    return 5;
}

This method involves creating an array with specified heights, iterating through until the correct value is found, and then returning the associated number based on its position.

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

Is it possible to automatically play a sound clip when the page loads?

Is there a way to automatically play a sound clip when my page loads? Are there any specific JavaScript or jQuery methods I can use for this, as I am developing my page using PHP. ...

javascripthtmlaudio

Waiting for a method to finish in Node.js/Javascript

Currently, I am in the process of creating a trade bot for Steam. However, I have encountered an issue where the for-loop does not wait for the method inside it to finish before moving on to the next iteration. As a result, the code is not functioning as i ...

javascriptnode.jsfor-loopmethodswait

Nodejs: The JSON.stringify method is automatically rounding the numbers

I am encountering a strange issue. When I call the credit card processor (CCBILL) with a payment token, they return a subscription ID. For example, 0124058201000005323 should be returned but what I receive is 124058201000005330, indicating that it has been ...

javascriptnode.jsexpress

Node.js is facing a problem with its asynchronous functionality

As a newcomer to node, I decided to create a simple app with authentication. The data is being stored on a remote MongoDB server. My HTML form sends POST data to my server URL. Below is the route I set up: app.post('/auth', function(req, res){ ...

javascriptnode.jsasynchronousexpresscallback

What methods can be used to report errors with Sentry while offline?

One key feature of my app is its ability to function both offline and online. However, I'm wondering how I can ensure that errors are still sent to my Sentry dashboard even when a user is offline. ...

javascriptnode.jssentry

Reading cached JSON value in a Node.js application

Recently, I embarked on creating a node.js application and reached a stage where I needed to retrieve a value from an updated JSON file. However, my attempts using the 'sleep' module to introduce a small delay were unsuccessful. I'm relativ ...

javascriptjsonnode.jsasynchronous

Is there a way to generate a checkerboard dynamically with the help of jQuery?

I've made some progress so far, but I'm facing a challenge where I need to push 8 <td> elements into 8 different <tr> elements without hardcoding anything or modifying the HTML directly. Any help would be appreciated! JavaScript v ...

javascriptjqueryhtml

Oops! An error occurred in AngularJs: "TypeError: $scope.todos.push is not a

I am currently facing an issue while using the $http.get method to add a todo from my controller to my database. The error message "TypeError: $scope.todos.push is not a function" keeps appearing, despite trying various solutions suggested by similar quest ...

javascriptangularjshttptypeerror

Create custom AngularJS directives for validation and store them in a variable

Through the use of AngularJS, I've developed a directive called "integer" that invalidates a form if anything other than integers are entered. Because I'm generating the page dynamically by fetching data from the database, it would be helpful to ...

javascriptangularjs

Tips for implementing events with AngularJS Bootstrap Colorpicker

I am having trouble understanding how events function with Angular Bootstrap Colorpicker. I have forked a Plunker from the developer's example. Unfortunately, there are no examples provided for using events. It would be great if events like colorpick ...

javascripthtmlangularjscolor-picker

Guide to sending multiple forms from an HTML page to another PHP page

What is the best way to submit multiple forms on a single HTML page to a PHP page and process all the form elements in PHP upon clicking one button? Any suggestions are appreciated. Thank you in advance. <form id="form1" name="form1"action="abc.php" ...

phpjavascriptajaxjquery

Cloning a checkbox using Jquery

I am working on a search page that utilizes checkboxes to display results. After the user selects certain options and triggers a reload of the page, I want to provide an easy way for them to remove their selections by displaying them at the top of the page ...

javascriptjqueryformscheckbox

Utilizing Firebase objects across multiple files: A comprehensive guide

I apologize for my ignorance, but as I am teaching myself, I have not been able to find the answer in the available documentation. My current project involves developing a Vue application with Firebase as the backend. To utilize Firebase services, you mus ...

javascriptfirebasevue.jsfirebase-realtime-database

Guide on serving static HTML files using vanilla JavaScript and incorporating submodules

Is it possible to serve a static html file with elements defined in a javascript file using imports from submodules using vanilla JS? Or do I need bundling tools and/or other frameworks for this task? Here's an example code structure to showcase what ...

javascripthtmlnode.jswebpack

Creating a specific ng-init condition for introducing new elements into the scope

Using ng-repeat, I am generating a series of todo items within div elements. My goal is to automatically apply the "editing = true" styling to these newly created items and if possible, focus on them as well. <div class="item" ng-class="{'editing- ...

javascriptjqueryangularjs

Angular Flot Chart Resizing: A Guide to Dynamic Chart S

I have successfully integrated a Flot chart into my HTML using an Angular directive. Here is how it looks: <flot id="placeholder" dataset="dataset" options="options" height="300px" width="100%" style="width:100%;" ng-disabled="graphLoading" ng-class="{ ...

javascriptangularjshtmlangularjs-directive

Making React function properly on GitHub Pages

I have followed all the steps and even consulted multiple tutorials that all say the same thing, but when I try to run "npm run deploy" I encounter an error and nothing happens. This is the error message: [email protected] deploy A:\Documents&bs ...

javascriptnode.jsreactjsnpmgithub-pages

Tips on resolving the Hydration error in localStorage while using Next.js

Having issues persisting context using localStorage in a Next.js project, resulting in hydration error upon page refresh. Any ideas on how to resolve this issue? type AppState = { name: string; salary: number; info: { email: string; departme ...

javascriptreactjsnext.js

Exploring ways to check async calls within a React functional component

I have a functional component that utilizes the SpecialistsListService to call an API via Axios. I am struggling to test the async function getSpecialistsList and useEffect functions within this component. When using a class component, I would simply cal ...

javascriptreactjsfrontendreact-testing-library

Error 405: Javascript page redirection leads to Method Not Allowed issue

After receiving the result from the ajax success method, I am facing an issue where the redirection to another page is being blocked and displaying the following error: Page 405 Method Not Allowed I am seeking suggestions on how to fix this as I need to ...

javascriptajaxasp.net-web-api