I have tried one but it gives me some error. Can anyone tell me how to use this?

Thank You..

Below is my code:
import { LightningElement } from 'lwc';
import { loadScript,loadStyle} from "lightning/platformResourceLoader";
import HIGHCHARTS from "@salesforce/resourceUrl/highcharts";
import HIGHMAPS from "@salesforce/resourceUrl/highmaps";
import DATA from "@salesforce/resourceUrl/data";
import DRILLDOWN from "@salesforce/resourceUrl/drilldown";
import EXPORTING from "@salesforce/resourceUrl/exporting";
import OFFLINE from "@salesforce/resourceUrl/offlineexporting";
import USALL from "@salesforce/resourceUrl/usall";
import FONTAWESOME from "@salesforce/resourceUrl/fontawesome";
export default class MAPROJECT extends LightningElement {
    
    connectedCallback() {
        
        Promise.all([
            loadScript(this, HIGHCHARTS)
                .then(() => console.log("highcharts loaded"))
                .catch(error => console.log("Error in loading highcharts"+ error)),
            loadStyle(this, FONTAWESOME)
                .then(() => console.log("font loaded"))
                .catch(error => console.log("Error in loading font" + error)),
            
            loadScript(this, DATA)
                .then(() => console.log("data loaded"))
                .catch(error => console.log("Error in loading data" + error)),
            
            loadScript(this, DRILLDOWN)
                .then(() => console.log("drilldown loaded"))
                .catch(error => console.log("Error in loading drilldown"+ error)),
                
            loadScript(this, EXPORTING)
                .then(() => console.log("exporting loaded"))
                .catch(error => console.log("Error in loading exporting"+ error)),
                    
            
            loadScript(this, OFFLINE)
                .then(() => console.log("offlineexporting loaded"))
                .catch(error => console.log("Error in loading offlineexporting"+ error)),
            
            loadScript(this, USALL)     
                .then(() => console.log("usall loaded"))
                .catch(error => console.log("Error in loading usall"+ error)),

            loadScript(this, HIGHMAPS)
                .then(() => console.log("highmaps loaded"))
                .catch(error => console.log("Error in loading highmaps"+ error))
        ])
        .then(() =>{
            this.runHighcharts();
        })
        .catch(error => {
            window.console.log("The error is: " + error);
        });
    }

Here is the image of uploaded static resources:


Here is the Error in console:



Thanks..

how to add this apex callouts in js can anybody help me?
Here is my code:

apex class:
public class personDemoController {
    @AuraEnabled
    public static void calloutMethod(){
        Http http = new Http();
        HttpRequest request = new HttpRequest();
        request.setEndpoint('https://lookup.binlist.net/45717360');
        request.setMethod('GET');
        HttpResponse response = http.send(request);
        String body = response.getbody();
        system.debug(body);
    }
}

js:
import { LightningElement} from 'lwc';
import calloutMethod from '@salesforce/apex/personDemoController.calloutMethod';
import { createRecord } from 'lightning/uiRecordApi';
import conMainObject from '@salesforce/schema/Contact';
import conFirstName from '@salesforce/schema/Contact.FirstName';
import conLastName from '@salesforce/schema/Contact.LastName';
import conPhone from '@salesforce/schema/Contact.Phone';
import conEmail from '@salesforce/schema/Contact.Email';
import conDescription from '@salesforce/schema/Contact.Description';
import conCard_Name__c from '@salesforce/schema/Contact.Card_Name__c';
//import conPrepaid__c from '@salesforce/schema/Contact.Prepaid__c';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
export default class IntegrateComponentLWC extends NavigationMixin(LightningElement) {
firstName = '';
lastName = '';
phoneNo= '';
emailId='';
descriptionVal='';
//prepaid__c='';
card_Name__c='';


contactChangeVal(event) {
    console.log(event.target.label);
    console.log(event.target.value);        
    if(event.target.label=='First Name'){
        this.firstName = event.target.value;
    }
    if(event.target.label=='Last Name'){
        this.lastName = event.target.value;
    }            
    if(event.target.label=='Phone'){
        this.phoneNo = event.target.value;
    }
    if(event.target.label=='Email'){
        this.emailId = event.target.value;
    }
   if(event.target.label=='Card_Name__c'){
        this.cardName = event.target.value;
    }
    if(event.target.label=='Description'){
        this.descriptionVal = event.target.value;
    }      
    // if(event.target.label=='Prepaid__c'){
    //     this.prepaid__c = event.target.value;
    // }  
    
    
}

insertContactAction(){
    console.log(this.selectedAccountId);
    const fields = {};
    fields[conFirstName.fieldApiName] = this.firstName;
    fields[conLastName.fieldApiName] = this.lastName;
    fields[conPhone.fieldApiName] = this.phoneNo;
    fields[conEmail.fieldApiName] = this.emailId;
    fields[conCard_Name__c.fieldApiName] = this.cardName;
    fields[conDescription.fieldApiName] = this.descriptionVal;
    //fields[conPrepaid__c.fieldApiName] = this.prepaid__c;
    
    
    const recordInput = { apiName: conMainObject.objectApiName, fields };
    createRecord(recordInput)
        .then(contactobj=> {
            this.contactId = contactobj.id;
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Contact record has been created',
                    variant: 'success',
                }),
            );
            this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: contactobj.id,
                    objectApiName: 'Contact',
                    actionName: 'view'
                },
            });


        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error creating record',
                    message: error.body.message,
                    variant: 'error',
                }),
            );
        });
}
handleClick(){
    calloutMethod({}).then(resp => {
            this.pictureUrl = JSON.parse(resp).message;
    })
}
}

html:

<template>
    <lightning-card>
        <div slot="title">
          <h3> 
                <lightning-icon icon-name="standard:contact" size="small"></lightning-icon> Insert a Contact Record in LWC           
             </h3>
          </div>
      <div class="slds-grid slds-wrap">
 
          <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
              <div class="slds-form-element">
                <lightning-input label="First Name" value={firstName} onchange={contactChangeVal}></lightning-input>
              </div>
          </div>
 
          <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
            <div class="slds-form-element">
                <lightning-input label="Last Name" value={lastName} onchange={contactChangeVal}></lightning-input>
             </div>
          </div>
 
          <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
            <div class="slds-form-element">
                <lightning-input label="Phone" value={phoneNo} onchange={contactChangeVal}></lightning-input>
             </div>
          </div>
 
          <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
            <div class="slds-form-element">
                <lightning-input label="Email" value={emailId} onchange={contactChangeVal} ></lightning-input>
             </div>
          </div>
 
          <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
            <div class="slds-form-element">
                <lightning-input label="Prepaid" value={Prepaid__c} onchange={contactChangeVal} ></lightning-input>
             </div>
          </div>
 
          <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
            
            <div class="slds-form-element">               
               <lightning-input label="Description" value={descriptionVal} onchange={contactChangeVal}></lightning-input>
             </div>
          </div>
          
      </div>
     <div slot="footer">
      
      <lightning-button label="Save" variant="brand" onclick={insertContactAction}></lightning-button>        
      </div>
      <lightning-button variant="success"  label="Generate card details" onclick={handleClick}></lightning-button>
 
<br/> <br/>
    <!-- </div> -->
        </lightning-card> 
</template>

I have tried one but it gives me some error. Can anyone tell me how to use this?

Thank You..

Below is my code:
import { LightningElement } from 'lwc';
import { loadScript,loadStyle} from "lightning/platformResourceLoader";
import HIGHCHARTS from "@salesforce/resourceUrl/highcharts";
import HIGHMAPS from "@salesforce/resourceUrl/highmaps";
import DATA from "@salesforce/resourceUrl/data";
import DRILLDOWN from "@salesforce/resourceUrl/drilldown";
import EXPORTING from "@salesforce/resourceUrl/exporting";
import OFFLINE from "@salesforce/resourceUrl/offlineexporting";
import USALL from "@salesforce/resourceUrl/usall";
import FONTAWESOME from "@salesforce/resourceUrl/fontawesome";
export default class MAPROJECT extends LightningElement {
    
    connectedCallback() {
        
        Promise.all([
            loadScript(this, HIGHCHARTS)
                .then(() => console.log("highcharts loaded"))
                .catch(error => console.log("Error in loading highcharts"+ error)),
            loadStyle(this, FONTAWESOME)
                .then(() => console.log("font loaded"))
                .catch(error => console.log("Error in loading font" + error)),
            
            loadScript(this, DATA)
                .then(() => console.log("data loaded"))
                .catch(error => console.log("Error in loading data" + error)),
            
            loadScript(this, DRILLDOWN)
                .then(() => console.log("drilldown loaded"))
                .catch(error => console.log("Error in loading drilldown"+ error)),
                
            loadScript(this, EXPORTING)
                .then(() => console.log("exporting loaded"))
                .catch(error => console.log("Error in loading exporting"+ error)),
                    
            
            loadScript(this, OFFLINE)
                .then(() => console.log("offlineexporting loaded"))
                .catch(error => console.log("Error in loading offlineexporting"+ error)),
            
            loadScript(this, USALL)     
                .then(() => console.log("usall loaded"))
                .catch(error => console.log("Error in loading usall"+ error)),

            loadScript(this, HIGHMAPS)
                .then(() => console.log("highmaps loaded"))
                .catch(error => console.log("Error in loading highmaps"+ error))
        ])
        .then(() =>{
            this.runHighcharts();
        })
        .catch(error => {
            window.console.log("The error is: " + error);
        });
    }

Here is the image of uploaded static resources:


Here is the Error in console:



Thanks..