title: How i can create a separate class from this single class?
body: <p>I was asked to do this :Build 2 classes, one for programmatic change and for UI change and handle the changes as methods inside the class. In short, the listener callbacks should now invoke the object methods instead of defining separate methods..I've successfully created a class for it and called the functions as well but i don't know how to split the class into two? I believe i've done most of the work..just need a little help..even an example would work..thanks in advance</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import axios from "axios";
  class classno1
  {
     getTodos =()=&gt;{
      return axios.get("https://reqres.in/api/users?page=1?_linit=4"       
      ).then(res=&gt;{this.showOutputGet(res);
        }).catch(err=&gt;console.log(err));
    };
     addTodos=()=&gt;{
      axios.post("https://reqres.in/api/users/todo",{title: "cosmic' ToDo",status:"completed"}      
      ).then(res=&gt;{this.showOutputPost(res);}).catch(err=&gt;console.log(err));
    };
  
     updateTodo=()=&gt; {
      axios.put("https://reqres.in/api/users/2",{name: "Shivam",job:"assasination"}      
      ).then(res=&gt;{this.showOutputPut(res);}).catch(err=&gt;console.log(err));
    };
    
     removeTodo=()=&gt; {
      axios.delete("https://reqres.in/api/users/1"      
      ).then(res=&gt;{this.showOutputDel(res);}).catch(err=&gt;console.log(err));
    };
    
   showOutputGet=(res)=&gt;{
      $("#res").html(`
      &lt;div class="card card-body mb-4 bg-primary text-white"&gt;
        &lt;h5&gt;Status: ${res.status}&lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-primary text-white"&gt;
        &lt;div class="card-header"&gt;
          Headers
        &lt;/div&gt;
        &lt;div class="card-body bg-primary text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.headers, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-primary text-white"&gt;
        &lt;div class="card-header bg-primary text-white"&gt;
          Data
        &lt;/div&gt;
        &lt;div class="card-body bg-primary text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.data, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-primary text-white"&gt;
        &lt;div class="card-header bg-primary text-white"&gt;
          Config
        &lt;/div&gt;
        &lt;div class="card-body bg-primary text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.config, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `);
    };
     showOutputPost=(res)=&gt;{
      $("#res").html(`
      &lt;div class="card card-body mb-4 bg-info text-white"&gt;
        &lt;h5&gt;Status: ${res.status}&lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-info text-white"&gt;
        &lt;div class="card-header bg-info"&gt;
          Headers
        &lt;/div&gt;
        &lt;div class="card-body bg-info text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.headers, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-info text-white"&gt;
        &lt;div class="card-header bg-info text-white"&gt;
          Data
        &lt;/div&gt;
        &lt;div class="card-body bg-info text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.data, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-info text-white"&gt;
        &lt;div class="card-header bg-info text-white"&gt;
          Config
        &lt;/div&gt;
        &lt;div class="card-body bg-info text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.config, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `);
    };
     showOutputPut=(res)=&gt; {
      $("#res").html(`
      &lt;div class="card card-body mb-4 bg-warning text-white"&gt;
        &lt;h5&gt;Status: ${res.status}&lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-warning text-white"&gt;
        &lt;div class="card-header bg-warning"&gt;
          Headers
        &lt;/div&gt;
        &lt;div class="card-body bg-warning text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.headers, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-warning text-white"&gt;
        &lt;div class="card-header bg-warning text-white"&gt;
          Data
        &lt;/div&gt;
        &lt;div class="card-body bg-warning text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.data, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-warning text-white"&gt;
        &lt;div class="card-header bg-warning text-white"&gt;
          Config
        &lt;/div&gt;
        &lt;div class="card-body bg-warning text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.config, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `);
    };
     showOutputDel=(res)=&gt; {
      $("#res").html(`
      &lt;div class="card card-body mb-4 bg-danger text-white"&gt;
        &lt;h5&gt;Status: ${res.status}&lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-danger text-white"&gt;
        &lt;div class="card-header bg-danger"&gt;
          Headers
        &lt;/div&gt;
        &lt;div class="card-body bg-danger text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.headers, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-danger text-white"&gt;
        &lt;div class="card-header bg-danger text-white"&gt;
          Data
        &lt;/div&gt;
        &lt;div class="card-body bg-danger text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.data, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card mt-3 bg-danger text-white"&gt;
        &lt;div class="card-header bg-danger text-white"&gt;
          Config
        &lt;/div&gt;
        &lt;div class="card-body bg-danger text-white"&gt;
          &lt;pre class="text-white"&gt;${JSON.stringify(res.config, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `);
    };
  }
  let obj=new classno1();
    $("#get").click(obj.getTodos);
  $("#post").click(obj.addTodos);
   $("#update").click(obj.updateTodo);
   $("#delete").click(obj.removeTodo);
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous"
      /link&gt; &lt;script
      src="https://code.jquery.com/jquery-3.5.1.js"
      integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
      crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;title&gt;ReqRes&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container my-5"&gt;
        &lt;div class="text-center"&gt;
          &lt;h1 class="display-4 text-center mb-3 h1 font-weight-bold"&gt;Assignment&lt;/h1&gt;
          &lt;button class="btn btn-primary my-3" id="get"&gt;GET&lt;/button&gt;
          &lt;button class="btn btn-info" id="post"&gt;POST&lt;/button&gt;
          &lt;button class="btn btn-warning" id="update"&gt;PUT&lt;/button&gt;
          &lt;button class="btn btn-danger" id="delete"&gt;DELETE&lt;/button&gt;
        &lt;/div&gt;
        &lt;hr&gt;
        &lt;div id="res"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="https://code.jquery.com/jquery-3.5.1.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"&gt;&lt;/script&gt;
      &lt;script src="start.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>