‘String was not recognized as a valid DateTime.’ in asmx.cs file of asp.net c#

I have Two Input Type = “Date” and one Input Type = “Button”

<input type="date" runat="server" id="dtp_from" />
<input type="date" runat="server" id="dtp_to" />
<input type="button" id="btnSubmit" CssClass="custom-btn" value="Submit" />

One GridView Table

<table id="gv_Datatable" class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>Id</th>
            <th>Date</th>
            <th>Name</th>
            <th>Description</th>
            <th>Receipt</th>
            <th>Payment</th>                            
            <th>Balance</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>Date</th>
            <th>Name</th>
            <th>Description</th>
            <th>Receipt</th>
            <th>Payment</th>
            <th>Balance</th>                            
        </tr>
    </tfoot>
</table>                

Now, here when click on button ajax method is called and through parameter two date are passing to the asmx.cs file.

$("#btnSubmit").click(function (e) {                
    var dataToSend = {
        param1: JSON.stringify(document.getElementById("<%=dtp_from.ClientID%>").value),
        param2: JSON.stringify(document.getElementById("<%=dtp_to.ClientID%>").value)
    };
    $.ajax({
        type: "POST",
        url: "FillGridMethod.asmx/CashBookList",
        data: dataToSend,
        dataType: "json",
        success: function (data) {                        
            var datatableVariable = $('#gv_Datatable').DataTable({
                dom: 'Bfrtip',
                data: data,
                columns: [
                    { 'data': 'Id', visible: false },
                    {
                        'data': 'cashbookdate', 'render': function (date) {
                            var date = new Date(parseInt(date.substr(6)));
                            var month = date.getMonth() + 1;
                            return date.getDate() + "/" + month + "/" + date.getFullYear();
                        }
                    },
                    { 'data': 'cashbookaccname' },
                    { 'data': 'cashbookdescription' },
                    { 'data': 'cashbookreceipt' },
                    { 'data': 'cashbookpayment' },
                    { 'data': 'Balance' },
                    {
                        "render": function (data, type, row) { return "<a href='#' class='btn btn-success' onclick=DeleteCustomer('" + row.Id + "');>View</>"; }
                    },
                    {
                        "render": function (data, row) { return "<a href='#' class='btn btn-danger'>Delete</a>"; }
                    }]
            });
        }
    });
});

Here is the asmx.cs file code

[WebMethod(enableSession: true)]
public void CashBookList(string param1, string param2)
{
    DateTime fromDate = DateTime.ParseExact(param1, "dd/MM/yyyy", CultureInfo.InvariantCulture);

    var cashBook = new List<CashBookModel>();
    string constr = cn.ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        qryFillGrid = " select cashbookid, cashbookdate, cashbookaccname, cashbookdescription, cashbookreceipt, cashbookpayment, Balance from tbl_cashbook " + System.Environment.NewLine;
        qryFillGrid += " where BranchID = " + HttpContext.Current.Session["BranchID"] + " " + System.Environment.NewLine;
        if (HttpContext.Current.Session["AccountMode"].ToString() != "ALL")
        {
            qryFillGrid += " and AccountMode = '" + HttpContext.Current.Session["AccountMode"].ToString() + "' " + System.Environment.NewLine;
        }
        if(param1 != """")
        {                    
            qryFillGrid += " and convert(varchar(10), convert(datetime, cashbookdate,105),112) >= '" + Convert.ToDateTime(service.IfNullThen(fromDate, DateTime.Now.Date)).Date.ToString("yyyyMMdd") + "' " + System.Environment.NewLine;
            if (param2 != """")
            {
                qryFillGrid += " and convert(varchar(10), convert(datetime, cashbookdate,105),112) <= '" + Convert.ToDateTime(service.IfNullThen(param2, DateTime.Now.Date)).Date.ToString("yyyyMMdd") + "' " + System.Environment.NewLine;
            }
        }
        else
        {
            qryFillGrid += " and convert(varchar(10), convert(datetime, cashbookdate,105),112) = '" + System.DateTime.Now.Date + "' " + System.Environment.NewLine;                    
        }
        qryFillGrid += " order by cashbookdate, cashbookid desc " + System.Environment.NewLine;
        var cmd = new SqlCommand(qryFillGrid, con);
        con.Open();
        var dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            var cashBookModel = new CashBookModel
            {
                Id = Convert.ToInt32(dr[0]),
                cashbookdate = Convert.ToDateTime(dr[1]),
                cashbookaccname = dr[2].ToString(),
                cashbookdescription = dr[3].ToString(),
                cashbookreceipt = Convert.ToDecimal(service.IfNullThen(dr[4], 0)),
                cashbookpayment = Convert.ToDecimal(service.IfNullThen(dr[5], 0)),
                Balance = Convert.ToDecimal(service.IfNullThen(dr[6], 0)),
            };
            cashBook.Add(cashBookModel);
        }
    }
    var js = new JavaScriptSerializer();
    Context.Response.Write(js.Serialize(cashBook));
}

DateTime fromDate = DateTime.ParseExact(param1, “dd/MM/yyyy”, CultureInfo.InvariantCulture);

In this below line of asmx.as file getting error i.e.: ‘String was not recognized as a valid DateTime.’

How to replace text in google docs using the cell address of google sheets?

I have a doc that contains text like %A1%, %B3%, %A3%, and so on. I have a Google sheet. I want to replace the text in the Google doc from the Google sheet. The replacement is to be made like this:”%A1% will be replaced by the value in cell (1,1), i.e., the value in range”A1:A1″,”%C3% will be replaced by the value in cell (3,3), i.e., the value in range”C3:C3″ and so on. The following code is just for one cell. I want to loop through all cells in the sheet and make all replacements. Any help will be appreciated.

function myFunction() {
  var myDoc = DocumentApp.openById('docID')
  var docBody = myDoc.getActiveSection()
  var sss = SpreadsheetApp.openById('sheetID); 
  var x =  sss.getRange("A3:A3").getValues()
  docBody.replaceText('%A3%', x)
} 

Text Wrap around JQuery Draggable/Resizable Image

I am trying to use JQuery, and want images to be resizable and draggable. I also want the text to wrap around the image (does not have to be real time) when the image is dragged or resized. Right now I can get the text to the side of the image, but once I add more text that the line breaks, it just moves the paragraph down under the image/container of the image.

I have already tried just setting a float to the containing div around the image, and the image itself. It sort of works but the text breaking is wrong. Maybe I am missing something extremely obvious.

Custom HTML Text Box For Digital Piano Sheet Music

I have tried many methods, and I’m a simple beginner with JavaScript but I want to make a site where I can play a digital piano (without a piano) and have it group keys together that I press at the same time.

For example, if I press “a” then “b” then I press “c” at the same time as “d” it will format it like this: “a b [cd]”. I’ve gotten to the point to where I’ve failed so many times that I asked ChatGPT, but even it was no help.     I Wasn’t Surprised

How to decrypt this js file?

How to decrypt the javascript code like this. Ask for the specific method or a tool.:

function loadComplete() {
  if (pageNo == 0) {
    loaderplay = game[_$_2aa1[4]][_$_2aa1[14]][1][_$_2aa1[25]][_$_2aa1[29]](403, 391, _$_2aa1[127]);

    loaderplay[_$_2aa1[524]](0);

    loaderplay[_$_2aa1[525]]({
      "useHandCursor": true
    });

    game[_$_2aa1[4]][_$_2aa1[14]][1][_$_2aa1[40]][_$_2aa1[39]]({
      "delay": 10,
      "callback": _0x9CAD,
      "callbackScope": this
    });

    function _0x9CAD() {
      game[_$_2aa1[4]][_$_2aa1[14]][1][_$_2aa1[31]][_$_2aa1[526]]({
        "targets": loaderplay,
        "tweens": [{
          "angle": 30,
          "ease": _$_2aa1[30],
          "duration": 400,
          "repeat": 0,
          "yoyo": true
        }, {
          "angle": -30,
          "ease": _$_2aa1[30],
          "duration": 400,
          "delay": 200,
          "repeat": 0,
          "yoyo": true,
          "onComplete": _0x9CB7
        }]
      });
    }

    function _0x9CB7() {
      game[_$_2aa1[4]][_$_2aa1[14]][1][_$_2aa1[40]][_$_2aa1[39]]({
        "delay": 1000,
        "callback": _0x9CAD,
        "callbackScope": this
      });
    }

    loaderplay[_$_2aa1[42]](_$_2aa1[527], function (_0x9C7B) {});

    loaderplay[_$_2aa1[42]](_$_2aa1[528], function (_0x9C7B) {});

    loaderplay[_$_2aa1[42]](_$_2aa1[529], function (_0x9C7B) {
      loaderplay[_$_2aa1[530]]();

      loadngTimeEvent = game[_$_2aa1[4]][_$_2aa1[14]][1][_$_2aa1[40]][_$_2aa1[39]]({
        "delay": 1,
        "callback": loadingAsset,
        "callbackScope": this
      });

      this[_$_2aa1[4]][_$_2aa1[532]][_$_2aa1[531]](false, _$_2aa1[5]);

      game[_$_2aa1[4]][_$_2aa1[6]](_$_2aa1[49]);

      if (typeof gdsdk !== _$_2aa1[533] && gdsdk[_$_2aa1[534]] !== _$_2aa1[533]) {
        gdsdk[_$_2aa1[534]]();
      }
    });

    progress[_$_2aa1[535]] = 0;
    percentText[_$_2aa1[535]] = 0;
    loadValue++;
  } else {
    loadValue++;

    if (loadValue <= 15) {
      loadngTimeEvent = game[_$_2aa1[4]][_$_2aa1[14]][1][_$_2aa1[40]][_$_2aa1[39]]({
        "delay": 1,
        "callback": loadingAsset,
        "callbackScope": this
      });
    } else {
      game[_$_2aa1[4]][_$_2aa1[14]][1][_$_2aa1[4]][_$_2aa1[3]](_$_2aa1[5]);
    }
  }
}

[! [enter image description here] (https://i.sstatic.net/fzWxwTt6.jpg)] (https://i.sstatic.net/fzWxwTt6.jpg)
The js file is here: https://uronpen.cloud/decodeResult.js

Ask for the specific method or a tool. Ask for the specific method or a tool. Thank you.

Ask for the specific method or a tool.

How do I fix this unwanted button behavior in ReactJS

So I’m trying to conditionally switch between two html buttons in ReactJS base on wether the form is shown or not. Basically if the form is shown, show a submit button and if not shown, show a regular button to show the form.

This is the code that I have. (I’m using Antd’s button component but I also tried using the regular html button and had the same problem.

<div>
        {showForm ? (
          <Button
            loading={isUploading}
            htmlType="submit"
            form="videoForm"
            className={Styles.button}
          >
            {isUploading ? 'Uploading' : 'Upload Video'}
          </Button>
        ) : (
          <Button
            htmlType="button"
            onClick={() => setShowForm(true)}
            className={Styles.button}
          >
            {successMsg ? 'Upload Another Video' : 'Show Form'}
          </Button>
        )}
      </div>

The issue I’m having is that when the form is not shown and I click the Show Form button, the form shows correctly and the buttons switch, but the form submit event is triggering which is not what I expected or want.

Any ideas why? And how I can fix this issue? I also tried doing the following but got the same results.

<div>
        <Button
          loading={isUploading}
          htmlType={showForm ? 'submit' : 'button'}
          form="videoForm"
          className={Styles.button}
        >
          {showForm && (isUploading ? 'Uploading' : 'Upload Video')}
          {!showForm && (successMsg ? 'Upload Another Video' : 'Show Form')}
        </Button>
      </div>

Any help would be greatly appreciated.

SwiperJs: I’m displaying groups of 2 slides, they should be centered but I can’t even achieve it restraining the slides width

I am working with SwiperJS to create a slider that displays two slides per group, centered within the slider’s container. My current implementation results in the slides expanding to fill the entire available width of the container, which is not what I want. Ideally, I’d like the slides to occupy only part of the container’s width while remaining centered.

CodeSandbox Example:

Please refer to my CodeSandbox example here for a live demo of the issue.

Attempted Solutions:

  • I tried using flex, justify-content: center, and margin-inline: auto with width: fit-content for the slides.
  • I attempted to limit the swiper-container width.
  • None of these approaches have corrected the issue, suggesting that I might be missing something obvious. This should be simpler.

Here is what the current layout looks like:
enter image description here

Here is what I want to achieve (desired layout):
enter image description here

Note: the prev-arrow is not relevant, I’m just focused in achieve the centering.

Relavant code:

Javascript

$.getScript(
      "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js",
      function () {
        new Swiper(".customSwiper", {
          grabCursor: true,
          slidesPerView: 2,
          centeredSlides: false,
          spaceBetween: 10,
          loop: false,  
          slidesPerGroup: 2,  
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      }
    );

CSS:

/* swiper */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: unset !important;
}
.swiper-container {
  width: 100vw;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #FFF;
  max-width: unset !important;
}
/* card being displayed */
.card {
  border-radius: 25px;
  background: #F8F8F8;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 5fr;
  max-width: 30em;
  width: fit-content;
  column-gap: 24px;
  }

Question:
How can I adjust my SwiperJS configuration or CSS to prevent the slides from stretching to fill the entire container width and instead center them as I’ve illustrated? Are there specific CSS properties or Swiper settings that could correct this behavior?

VueJs OnMount props generate “Expected Object, got Undefined ” warning

I’ve got the following component:

<template>
  <Grid :items="items" />
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import Grid from '@/components/Grid.vue'
  import { getData } from '@/services/getData'

  const items = ref()

  onMounted(async () => {
    items.value = await getData()
 })
</script>

The Grid component instance needs items to be populated in order to display data, but I need to run getData() to have the data ready. When I run this code I get a type check failed for prop "items". Expected Object, got Undefined warning.

It happens because when the file is first initiated items doesn’t have anything until getData() is finished. How can I have getData() run before the warning can show up?

How would I write data to an Audio File?

So I’ve been trying to make a DAW in the browser and I’ve got everything done except for exporting files. How would I go about writing data for an audio file?

I’ve tried utilizing the MediaRecorder API. I was expecting to be able to write data like that, but what actually happened was that it prompted me to use my microphone which is not what I was expecting.

Uncaught TypeError: Cannot read properties of undefined (reading ‘setPopup’)

I have develeoped a Chrome Extension using manifest V3. I have one in Version 2 but it’s a bit different and now I am stuck because I cannot seem to understand where I’m having the issues at and why. I am attaching a photo of the 2 errors:

Chrome Errors

Here is my current running code for manifest.json file:

`{
    "manifest_version": 3,
    "name": "NGH Mods",
    "version": "1.0",
    "description": "Redirects requests and modifies cookie headers",
    "permissions": ["declarativeNetRequest", "scripting"],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup/popup.html"
    }
}`

Here is the code for Popup.js:

`document.getElementById("login-form").addEventListener("submit", function(event) {
    event.preventDefault();
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;

    // Check if username and password match
    if (username === "Admin" && password === "Password") {
        // Redirect to the desired URL
        chrome.tabs.update({ url: "YOU_URL_HERE" });
    } else {
        // Show error message or handle incorrect login
        alert("Incorrect username or password!");
    }
});`

Here is my code for background.js:

`chrome.runtime.onInstalled.addListener(() => {
    const rules = [
        {
            id: 1,
            priority: 1,
            action: { type: "redirect", redirect: { regexSubstitution: "YOU_URL_HERE" } },
            condition: {
                regexFilter: "YOU_URL_HERE",
            },
        },
    ];

    chrome.declarativeNetRequest.updateDynamicRules({
        removeRuleIds: [1],
        addRules: rules,
    });
});
// Function to make POST requests with JSON data
function postJson(url, json) {
    return new Promise(function(resolve, reject) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                resolve(this.responseText);
            }
        };
        xhttp.onerror = function() {
            reject();
        };
        xhttp.open("POST", url, true);
        xhttp.setRequestHeader("Content-Type", "application/json");
        xhttp.send(JSON.stringify(json));
    });
}

// Tulc class for handling login and user data
function Tulc(info) {
    this.trainerId = info.trainerId;
    this.url = {};
    this.url.login = info.baseURL + "/login/signin";
    
    this.user = null;
    this.setUser = user => this.user = user;
    this.getUser = () => this.user;
    this.login = password => {
        this.setUser(null);

        var requestInfo = {};
        requestInfo.trainerId = this.trainerId;
        requestInfo.password = password;

        return new Promise((resolve, reject) => {
            postJson(this.url.login, requestInfo).then((response) => {
                try {
                    response = JSON.parse(response);
                    if (response.status == "success") {
                        this.setUser({ name: response.name });
                        cookievalue = response.cookie;
                        resolve(this.getUser());
                    } else { reject(); }
                } catch (e) { console.log(e); reject(); }
            }, () => {
                reject();
            });
        });
    };
}

// Function to create redirects
function createRedirect(target, redirect) {
    let rewriteCookieHeader = (e) => {
        for (let header of e.requestHeaders) {
            if (header.name.toLowerCase() === "cookie") {
                header.value = "si=" + cookievalue;
            }
        }
        return { requestHeaders: e.requestHeaders };
    };

    chrome.webRequest.onBeforeSendHeaders.addListener(
        rewriteCookieHeader,
        { urls: [redirect] },
        ["blocking", "requestHeaders"]
    );

    chrome.webRequest.onBeforeRequest.addListener(
        (details) => {
            return { redirectUrl: redirect };
        },
        { urls: [target] },
        ["blocking"]
    );
}

// Initialize the extension
/*function initializeExtension() {
    var tulc = new Tulc({ baseURL: "YOU_URL_HERE" });
    chrome.browserAction.setPopup({popup: "popup/login.html"});
    pocoyo(tulc.getUser());
}*/

// Listen for extension installation or update
//chrome.runtime.onInstalled.addListener(initializeExtension);

// Listen for extension startup
//chrome.runtime.onStartup.addListener(initializeExtension);

// Listen for messages from other parts of the extension
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.command == "LoginPassword" && request.message) {
        tulc.login(request.message).then((user) => {
            sendResponse(user);
            pocoyo(tulc.getUser());
        }, () => {
            sendResponse();
        });
        return true;
    }
    return false;
});

// Function to handle extension setup after login
function pocoyo(user) {
    chrome.browserAction.setPopup({ popup: "popup/options.html" });
    
    createRedirect("YOU_URL_HERE", "YOU_URL_HERE");
}

var tulc = new Tulc({ baseURL: "YOU_URL_HERE" });
chrome.browserAction.setPopup({popup: "popup/login.html"});`

Here is my code for popup.html:

`<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        h1 {
            margin-bottom: 20px;
            text-align: center;
        }
        form {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        input[type="text"],
        input[type="password"] {
            width: calc(100% - 20px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 3px;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>Login</h1>
    <form id="login-form">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" value="Admin" required><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" value="Password" required><br>
        <input type="submit" value="Login">
    </form>

    <script src="popup.js"></script>
</body>
</html>`

Lastly, there are a few more files that I wouldn’t post because I believe my two errors are somehow within the code(s) above.

I tried asking ChatAI to point it out; but didn’t help.

tried asking chatai to fix but has no resolve

Docker Vite tsx container Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”

Vite React tsx app run fine in my local using nginx web server with Docker container. But when I run the app in Digital Ocean K8s cluster with nginx ingress controller. I am getting following error.

index-IS_bIaLF.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

my nginx.conf file:

worker_processes 4;

events { 
        worker_connections 1024; 
    
    }

http {
    server {
        listen 4173;
        root  /usr/share/nginx/html/nginx-test;
        include /etc/nginx/mime.types;

        location / {
            
            # root  /usr/share/nginx/html;
            try_files $uri $uri/ /index.html;
        }
    }
}
Docker file: 
# stage1 as builder
FROM node:21-alpine as builder

WORKDIR /app

# Copy the package.json and install dependencies
COPY package*.json ./

RUN npm install

# Copy rest of the files
COPY . .

# Build the project
RUN npm run build


FROM nginx:alpine as production-build

COPY nginx.conf /etc/nginx/nginx.conf

## Remove default nginx index page
RUN rm -rf /usr/share/nginx/html/*

# Copy from the stage 1
COPY --from=builder /app/dist /usr/share/nginx/html/nginx-test

EXPOSE 4173


WORKDIR /usr/share/nginx/html/nginx-test

COPY ./env.sh .

# Expose port 4173 for the Nginx server
EXPOSE 4173

# Add bash
RUN apk add --no-cache bash

# Make our shell script executable
RUN chmod +x env.sh

# Start Nginx server
CMD ["/bin/bash", "-c", "/usr/share/nginx/html/nginx-test/env.sh && nginx -g "daemon off;""]

It runs fine in my Local. but in Cloud only I am getting Black White page.

K8s ingress.

kind: Ingress
apiVersion: networking.k8s.io/v1
metadata:
  name: test124
  namespace: test
  labels:
    app: ggg
  annotations:
    cert-manager.io/issuer: letsencrypt-nginx
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  ingressClassName: nginx
  tls:
    - hosts:
        - ragon.com
      secretName: letsencrypt-nginx
  rules:
    - host: ragon.com
      http:
        paths:
          - path: /*
            pathType: Prefix
            backend:
              service:
                name: service
                port:
                  number: 80

index.html file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
    <script type="module" crossorigin src="./assets/index-IS_bIaLF.js"></script>
    <link rel="stylesheet" crossorigin href="./assets/index-DiwrgTda.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

No debugger available, can not send ‘variables’-Cannot find module ‘/Users/cliu21/scratch/app.js

I am learning about how to use API in Javascript. Then I got a mistake: “/opt/homebrew/bin/node ./app.js”

Uncaught Error Error: Cannot find module '/Users/cliu21/scratch/app.js'
    at Module._resolveFilename (internal/modules/cjs/loader:1149:15)
    at Module._load (internal/modules/cjs/loader:990:27)
    at executeUserEntryPoint (internal/modules/run_main:142:12)
    at <anonymous> (internal/main/run_main_module:28:49)
loader:1149
No debugger available, can not send 'variables'

This is my code:          

// Download the helper library from https://www.twilio.com/docs/node/install
// Find your Account SID and Auth Token at twilio.com/console
// and set the environment variables. See http://twil.io/secure
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const client = require('twilio')(accountSid, authToken);

console.log("Starting Program");
client.messages
  .list()
  .then(messages => messages.array.forEach(m => console.log(m.sid)));
    
console.log("Gathering message log");

 I have installed node_module and tried to fix the problem about 2hours, but canot fix it. enter image description here

        

How can I fix the problem?

Cannot set Spectrum Color Picker

I have this in my code:

      function getInput(id) {
             var html = "<input id='" + id + "'/>";
             return $(html);
      }


      function getControlUploadWrapper(id) {
            var html = '<div class="input-group">' +
    '                       <div class="input-group-prepend">' +
    '                            <span class="input-group-text" id="inputGroupFileAddon01" style="height: 29px;">Upload</span>' +
    '                       </div>' +
    '                       <div class="custom-file">' +
    '                           <input id="' + id + '" type="file" class="custom-file-input" id="inputGroupFile01"' +
    '                           aria-describedby="inputGroupFileAddon01">' +
    '                           <label class="custom-file-label" 
                                for="inputGroupFile01">Choose file</label>' +
    '                       </div>' +
    '                   </div>';
            return $(html);
      }

      function setupBackgroundControls(jObj, key, sT, type, val, targetEl) {
           var sKey = "tab" + type + getStyleKey(sT);
           var id = type + sT.replace("-", "");

           $("#" + sKey).append($(getControlColsWrapper(12, "height:30px;").append($(getControlColsLabelWrapper()).append(getInput(id)))));
           setColorPickerControlEvents(jObj, sT, type, val, id, targetEl);

           $("#" + sKey).append($(getControlColsWrapper(6, "height:30px;").append($(getControlUploadWrapper("control_" + id)))));
           $('#control_' + id).change(function () {
                  var input = this;
                  var url = $(this).val();
                  var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
                  if (input.files && input.files[0] && (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
                         var reader = new FileReader();
                         reader.onload = function (e) {
                               var guid = uuidv4().replace("-", "") + "." + ext;
        
                               AjaxResult(function (obj, data) {


                                     $("#" + id).spectrum("set", null); <-- this is where the $("#" + id) keeps returning null so i cannot set the spectrum value


                               }, "UploadComponentImage", { projectId: projectId, src: e.target.result, guid: guid, oldImage: getComponentDataAllStyleValueByResponsiveIndex(jObj, sT, type, getResponsiveIndex())}, methodRequestR.POST);


                          }
                          reader.readAsDataURL(input.files[0]);
                  }

           });

      }

      function setColorPickerControlEvents(jObj, sT, type, val, id, targetEl) {
             $("#" + id).spectrum({
                  allowEmpty: true,
                  color: val == null || val == "unset" ? null : val,
                  change: function (color) {
                       if (color == null) {
    
                       } else {
                            $("#control_" + id).parent().parent().parent().show(); <-- also here, the $("#control_" + id) selector is null or empty
                       }
                  }
             });
      }

So this part of the code:

     $("#" + id).spectrum("set", null);

Keeps returning null or the selector is empty:

     $("#" + id)

But Spectrum has been set here:

     $("#" + sKey).append($(getControlColsWrapper(12, "height:30px;").append($(getControlColsLabelWrapper()).append(getInput(id)))));
     setColorPickerControlEvents(jObj, sT, type, val, id, targetEl);

So why do i keep getting null or empty selector here?

     $("#" + id).spectrum("set", null);

Also at this point:

     $("#control_" + id).parent().parent().parent().show();

The $(“#control_” + id) selector keeps returning null or empty
But i have set this here:

     $("#" + sKey).append($(getControlColsWrapper(6, "height:30px;").append($(getControlUploadWrapper("control_" + id)))));

Just to get an idea I have a screenshot, part of the UI where these functions are in use:

enter image description here