Category: javascript

I wanted to ask a question to clarify some points of the process of developing web applications in Nuxt 3 using the compositon api. I’m developing an application whose content depends on the user’s location. Therefore, when the user first accesses the site, I must first determine the user’s IP address using the external API of a special service, and then using the received user’s IP Address, I must determine the user’s city with another external API service in order to then receive content from my API service using the received user’s city by its IP address. I wanted to clarify where it is better to make requests with the definition of the IP address and city of the user so that everything works optimally and is correctly implemented logically.

I am using Svelte to create a complex chart graphic. However, the flip animation visibly distorts the SVG shapes and their positions when I switch between data subsets with different max values. This is still visible when delay is set to zero as it flashes onscreen before the animation kicks in.

Here’s a REPL with a simplified example using a long Flip delay so you can see the distortion.

What can I do here to fix the bars to the ‘zero’ position along the y-axis, and prevent the circles from warping during Flip?

I am making page blocks for a third party to copy and paste into their CMS. These HTML page blocks use the foundation framework for styles, but sometimes when foundation is appended to the page it interferes with the rest of the page’s styles. How do I prevent this? Is there another framework I can use that will inline all of the CSS or can I leverage a different framework to build this out?

Here is how I am doing it now.

<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" crossorigin="anonymous"></script>

<script>
    const fs = document.createElement('link');
    fs.rel = 'stylesheet';
    fs.href = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css';
    fs.crossOrigin = 'anonymous';
    document.getElementsByTagName('head')[0].appendChild(fs);

    const fa = document.createElement('link');
    fa.rel = 'stylesheet';
    fa.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css';
    fa.integrity = 'sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==';
    fa.crossOrigin = 'anonymous';
    fa.referrerPolicy ='no-referrer';
    document.getElementsByTagName('head')[0].appendChild(fa);
</script>
<div class="grid-container padding-top-bottom">
    <div class="grid-x grid-padding-x align-middle">
        <div class="cell medium-6">
            <h1>Hello World</h1>
        </div>
        <div class="cell medium-6" style="padding-right:10px">
            <p>Some other text and images</p>
        </div>
    </div>
</div>

This ends up messing up some of the original sites’s styles when pasted into an HTML block on some CMS’s.

I want to achieve that every time there is an empty entry, it warns me in an alert “there are empty fields” and also put the focus on an empty entry and so on until the last empty entry, if they are all full of data, the button says: “filled successfully”, in an alert
it also has unique fields that must also be validated , what is the input id search

If the search field is empty, it should send an alert “there is nothing in the search” when pressing the button and also place the focus on the input

I have this problem with dynamic inputs. It is assumed that all entries with the txt name attribute
with the Add button, add these entries dynamically

for what is appreciated, it does not show the message “empty fields” every time the button is pressed.

Whenever an empty field is found, the focus should be placed on the empty entry.

If there are all entries with data, this should execute the message, all fields filled.

This is my code, below is the expectation (the second executable)

// Constantes para el div contenedor de los inputs y el botón de agregar
const contenedor = document.querySelector('#dinamic');
const btnAgregar = document.querySelector('#agregar');

// Variable para el total de elementos agregados
let total = 1;

/**
 * Método que se ejecuta cuando se da clic al botón de agregar elementos
 */
btnAgregar.addEventListener('click', e => {
  let div = document.createElement('div');
  div.innerHTML = `<label>${total++}</label> - <input type="text" name="nombre[]" placeholder="Nombre" required><button onclick="eliminar(this)">Eliminar</button>`;
  contenedor.appendChild(div);
})

/**
 * Método para eliminar el div contenedor del input
 * @param {this} e 
 */
const eliminar = (e) => {
  const divPadre = e.parentNode;
  contenedor.removeChild(divPadre);
  actualizarContador();
};

/**
 * Método para actualizar el contador de los elementos agregados
 */
const actualizarContador = () => {
  let divs = contenedor.children;
  total = 1;
  for (let i = 0; i < divs.length; i++) {
    divs[i].children[0].innerHTML = total++;
  } //end for
};


function ValidarVacios() {
  var f = document.forms['form1'];
  var text = "";
  var alerta = false;

  for (var i = 0; i <= parseInt(f.numTexts.value); i++) {

    text = 'txt'
    if (([text] + '.value') == '') {
      alerta = true;
    }
  }
  if (alerta == true) {
    alert('empty fields');
    return false;
  } else {
    return true;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inputs dinámicos</title>
</head>

<body>
<input type="text" name="buscar" id="buscar" />

  <button id="agregar">Agregar</button>
  <div id="dinamic"></div>


  <input type="submit" value="Pik 1" onclick="javascript:ValidarVacios();">
  <script src="./main.js"></script>
</body>

</html>

This is the code, the expectation of what I want to do

var counter = 0;
function addInput(divName) {
  counter++; 
  var Ai8ousa = document.createElement('div'); 
  Ai8ousa.innerHTML = "Field: "+(counter+1) + "<input type='text' name='field " + (counter+1) + "' id='field" + (counter+1) + "'>";   
  document.getElementById(divName).appendChild(Ai8ousa);
}

function validations(form) {
  var field;
  var i=0;
  do{
    field=form[i];
    if (field.value=='') {
      field.focus();
      alert('The field ' + field.name + ' is blank, please enter a value!');
      return false;
    }
    i++;
  } while( i <= counter);
  alert("everything is OK, submiting the form!");
}

<form action="" method="post" onsubmit="return validations(this)" >
<input type="text" name="buscar" id="buscar" />

  <div id="dynamicInput">
    <div>Field : <input type="text" name="field 1" id="field1" /></div>
  </div>
  <input type="button" value="New field" onClick="addInput('dynamicInput');">
  <input type="submit" value="Submit" />
</form>

I just curious about how medium serialize or whatever to say bc I don’t even know what the method name, so i just notice after inspect the medium article, and then found the weird class name on their HTML like this
sample weird class
so I just want to know how they do that. Thank You 🙂

i just wan’t to know what the method name is

I am trying to sort an array of objects and the sorting will be done based on property which will be dynamic

I have an array

const fruitDetails = [
  {item: "Berry", qty: "651042446", stockDate: "2021-09-20"},
  {item: "Apple", qty: "23222", stockDate: "2023-08-10"},
  {item: "Kiwi", qty: "132345", stockDate: "2022-10-23"}
];

Now the sorting could be of on item, qty or stockDate

A function to sort this array of objects with dynamic property

function sortedData(column) {
  return fruitDetails.sort((a, b) => {
     if (a[column].toLowerCase() > b[column].toLowerCase()) {
       return 1;
     }
     if (a[column].toLowerCase() < b[column].toLowerCase()) {
       return -1;
     }
     return 0;
  });
}


console.log(sortedData("item"));
console.log(sortedData("qty"));
console.log(sortedData("stockDate"));

If you check the console output the sorted value for item and stockDate is correct but the qty sorted value is incorrect.

This is the console output for qty:

[{
  item: "Kiwi",
  qty: "132345",
  stockDate: "2022-10-23"
}, {
  item: "Apple",
  qty: "23222",
  stockDate: "2023-08-10"
}, {
  item: "Berry",
  qty: "651042446",
  stockDate: "2021-09-20"
}]

The qty value 23222 is smaller than the 132345 so Apple should be 1st, Kiwi 2nd and Berry 3rd.

I am adding the jsfiddle link for reference.
Please let me know what I am doing wrong here, thank you 🙂

=> ERROR [dev_container_auto_added_stage_label 2/19] RUN apt-get updat 56.1s

.

WARNING: buildx: failed to read current commit information with git rev-parse –is-inside-work-tree
Dockerfile-with-features:11

9 | ENV TZ=”America/New_York”
10 |
11 | >>> RUN apt-get update && apt-get install -y sudo
12 |
13 | # Unminimize Ubuntu to restore man pages

i have kali linux so how to solve this problem

how to solve this i am trying a lots of time all the Prerequisites i already have

So i wanted to have two filled rounded rectangle with a different color for each one but it give me the last color everytime

This is my code :

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth
canvas.height = window.innerHeight

// #2e2e2e
// #00a6a4

ctx.fillStyle = "#00a6a4";
ctx.roundRect(10, 10, 100, 100,10);
ctx.fill();
ctx.fillStyle = "#2e2e2e";
ctx.roundRect(110, 110, 100, 100,10);
ctx.fill();

This is what it give me :

script result

As the titles implies, I am trying to resize my page based on the width of the screen it is displaying on. Currently this is what my code will display:

echo "<div class="col-6"><div class="videoTitle">Dyno 1a</div><iframe src='cam1a.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

echo "<div class="col-6"><div class="videoTitle">Dyno 1b</div><iframe src='cam1b.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

echo "<div class="col-4"><div class="videoTitle">Dyno 2</div><iframe src='cam2.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

echo "<div class="col-4"><div class="videoTitle">Dyno 3</div><iframe src='cam3.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

echo "<div class="col-4"><div class="videoTitle">Dyno 4</div><iframe src='cam4.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

And this is how I am trying to resize my data:

$(document).ready(function(){
  if ($(window).width() <= 768) {
    $( ".col-4" ).addClass(".col-12");
    $( ".col-4" ).removeClass(".col-4");

    $( ".col-6" ).addClass(".col-12");
    $( ".col-6" ).removeClass(".col-6");
  } else if ($(window).width() <= 992) {
    $( ".col-4" ).addClass(".col-6");
    $( ".col-4" ).removeClass(".col-4");
  }
});

Currently when I resize my data it will display the original format, which cuts off the image that is displaying. How could I rearrange my code so that my data will adjust to the window width?

I have a javascript function to display the remaining character count to the user on the page.
When I validate the length server side prior to a database insert to make sure it is not greater than the column length I’m actually getting a different count.

Researching online it appears that javascript counts new lines / CR and maybe some other special characters differently than C# does.

Does anyone have a work around for this ?

This is my javascript on the client side:

 <script>
        var textarea = document.getElementById('TxtComment');

        window.onload = textareaLengthCheck();

        function textareaLengthCheck() {
            var maxChars = 4000;
            var textArea = textarea.value.length;
            var charactersLeft = maxChars - textArea;
            var count = document.getElementById('cmt-characters-left');
            count.innerHTML = "Characters left: " + charactersLeft + " of " + maxChars;
        }

        textarea.addEventListener('keyup', textareaLengthCheck, false);
        textarea.addEventListener('keydown', textareaLengthCheck, false);

    </script>

Tried adding this – but it seemed to make the problem even worse:

 var textArea = textarea.value.replace(/(rn|n|r)/g, "").length;

Shopware 6 plugin adds a custom entity and associate it via a OneToMany association with an existing entity. So we should be able to use tags for property options.

Definition:

        $query = <<<SQL
CREATE TABLE IF NOT EXISTS `wed_property_group_option_tag` (
    `option_id` binary(16) NOT NULL,
    `tag_id` binary(16) NOT NULL,
    `created_at` datetime(3) NOT NULL,
    `updated_at` datetime(3) DEFAULT NULL,
    PRIMARY KEY (`option_id`, `tag_id`), 
    CONSTRAINT `fk.wed_property_group_option_tag.tag_id` FOREIGN KEY (`tag_id`) REFERENCES `tag` (`id`) ON DELETE CASCADE ON UPDATE CASCADE,
    CONSTRAINT `fk.wed_property_group_option_tag.option_id` FOREIGN KEY (`option_id`) REFERENCES `property_group_option` (`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
SQL;

namespace WedCoreSystemTag;

class TagDefinition extends EntityDefinition
{
    public const ENTITY_NAME = 'tag_id';

    public function getEntityName(): string
    {
        return self::ENTITY_NAME;
    }

    protected function defineFields(): FieldCollection
    {
        return new FieldCollection([
            (new IdField('id', 'id'))->addFlags(new PrimaryKey(), new Required()),
            (new FkField('option_id', 'optionId', PropertyGroupOptionDefinition::class))->addFlags(new Required()),
            new ManyToOneAssociationField('option', 'option_id', PropertyGroupOptionDefinition::class, 'id'),
        ]);
    }
}

<?php declare(strict_types=1);

namespace WedCoreContentPropertyAggregatePropertyGroupOption;

class PropertyGroupOptionDefinition extends EntityDefinition
{
    public const ENTITY_NAME = 'option_id';

    public function getEntityName(): string
    {
        return self::ENTITY_NAME;
    }

    protected function defineFields(): FieldCollection
    {
        return new FieldCollection([
            (new IdField('id', 'id'))->addFlags(new PrimaryKey(), new Required()),
            new OneToManyAssociationField('tags', FooDefinition::class, 'option_id')
        ]);
    }
}

namespace WedCoreContentPropertyAggregatePropertyGroupOption;

class WedPropertyGroupOptionTagDefinition extends MappingEntityDefinition
{
    public const ENTITY_NAME = 'wed_property_group_option_tag';

    public function getEntityName(): string
    {
        return self::ENTITY_NAME;
    }

    protected function defineFields(): FieldCollection
    {
        return new FieldCollection([
            (new FkField('option_id', 'optionId', PropertyGroupOptionDefinition::class))->addFlags(new PrimaryKey(), new Required()),
            (new FkField('tag_id', 'tagId', TagDefinition::class))->addFlags(new PrimaryKey(), new Required()),
            
            new ManyToOneAssociationField('option', 'option_id', PropertyGroupOptionDefinition::class, 'id', false),

            new ManyToOneAssociationField('tag', 'tag_id', TagDefinition::class, 'id', false),
        ]);
    }
}

Extension:

namespace WedExtensionContentPropertyAggregatePropertyGroupOption;

class PropertyGroupOptionExtension extends EntityExtension
{
    public function extendFields(FieldCollection $collection): void
    {
        $collection->add(
            new ManyToManyAssociationField('myTags', TagDefinition::class, WedPropertyGroupOptionTagDefinition::class, 'option_id', 'tag_id'),
        );
    }

    public function getDefinitionClass(): string
    {
        return PropertyGroupOptionDefinition::class;
    }
}

Administration JS:

Shopware.Component.override('sw-property-option-detail', {
    inject: [
        'repositoryFactory'
    ],

    template,

    data: function () {
        return {
            option: undefined
        }
    },

    computed: {
        repository() {
            return this.repositoryFactory.create('wed_property_group_option_tag');
        },
        criteria() {
            const criteria = new Criteria();
            criteria.addAssociation('myTags');

            return criteria;
        },
    },

    created() {
        this.repository = this.repositoryFactory.create('wed_property_group_option_tag');

        this.repository.search(this.criteria, Shopware.Context.api)
            .then(option => {
                this.option = option;
            });
    }
});

Option detail page doesn’t load, I have these error in console:

"{"errors":[{"status":"500","code":"FRAMEWORK__ASSOCIATION_NOT_FOUND","title":"Internal Server Error","detail":"Can not find association by name myTags","meta":{"parameters":{"association":"myTags"}}}]}"

Do someone know, what I’m doing wrong?

I am working on a Node.js project and trying to use the ‘axios’ library for making HTTP requests. However, when I run my code, I’m getting the following error:

Error: Cannot find module ‘axios’

I have already installed ‘axios’ using npm, and it appears in my package.json file as a dependency. Here’s what I’ve tried so far:

Double-checked that ‘axios’ is listed in package.json under the “dependencies” section.
Ran npm install to ensure all dependencies are properly installed.
Verified that the ‘axios’ module is present in the node_modules directory.
Despite these steps, I’m still encountering the error. Could someone please help me understand why this error is occurring and how to resolve it? Any insights or suggestions would be greatly appreciated

I am a newbie programmer trying to figure out how to use PHP. I am developing a website where it is able to generate a form based on HTML and data from my PHP database. My concern here is that, after each page, I want the table named header to repeat after each page and a page number on the center bottom of each page. I tried accomplishing so using CSS and javascript however I have hit a brick wall. How do I suppose to adjust this? And yes I admit, maybe using composer would be an option however I am still figuring how to use it.

Code:

<?php

$mysqli = new mysqli($hostName, $userName, $password, $databaseName);

// Checking for connections
if ($mysqli->connect_error) {
    die('Connect Error (' .
        $mysqli->connect_errno . ') ' .
        $mysqli->connect_error);
}

$id = $_REQUEST['id'];

// Fetch data from bac1_files table
$query_files = "SELECT * FROM bac1_files WHERE id = '$id'";
$result_files = mysqli_query($mysqli, $query_files) or die(mysqli_error($mysqli));
$row_files = mysqli_fetch_assoc($result_files);

$timestamp = $row_files['timestamp'];
$pr = $row_files['PR'];
$rfq = $row_files['RFQ'];
$area = $row_files['Area'];
$itemdesc = $row_files['ItemDesc'];
$area = $row_files['Area'];
$delivery = $row_files['delivery'];

// Fetch data from bac1_rfq table
$query_rfq = "SELECT * FROM bac1_rfq WHERE file_id = '$id'"; // Update the condition to match the relationship between the tables
$result_rfq = mysqli_query($mysqli, $query_rfq) or die(mysqli_error($mysqli));

?>

<style>
  .no-spacing td {
    padding: 0;
    margin: 0;
  }

  .center-align {
    text-align: center;
  }

  .no-margin p {
    margin: 0;
  }

  table {
    font-size: 90%;
  }

  /* Styles for screen display */
  .hidden-on-print {
    display: none; /* or any other appropriate value for hiding */
  }

  /* Styles for print */
  @media print {
    .hidden-on-print {
      display: block;
    }

    /* Repeat the table with class "header" on each page */
    .header {
      display: table-header-group;
    }
  }

  /* Page number styles */
  .page-number {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10pt;
    color: #888;
  }
</style>

<div id="rfqgen" class="hidden-on-print">
<div class="page-container">
<table name="header" class="no-spacing" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="15%" rowspan="4" class="center-align">
      <img width="70%" src="../images/logo.jpg" alt="Image">
    </td>
    <td colspan="2" class="center-align">
      <br>
      <br>
      <b></b><br>
      Baguio City
    </td>
  </tr>
  <tr>
    <td width="55%" rowspan="3" class="center-align">
      Procurement Management Office<br>
      <b style="font-size:170%;">REQUEST FOR QUOTATION</b>
    </td>
    <td>
      <p>&nbsp;Form <span class="GramE">No. :</span> CMT-BAC-043</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>&nbsp;Revision <span class="GramE">No. :</span> 3</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>&nbsp;Effectivity <span class="GramE">Date :</span> May 2, 2023</p>
    </td>
  </tr>
</table>
<p>
<table>
  <tr>
    <td>Company Name:</td>
    <td style="border-bottom: 1px solid black; width:40%;"></td>
    <td>&nbsp;&nbsp;&nbsp;Date:</td>
    <th style="border-bottom: 1px solid black; width:40%;">&nbsp;
    <?php
    $formattedDate = date("F d, Y", strtotime($timestamp));
    echo $formattedDate;
    ?>
    </th>
  </tr>
  <tr>
    <td>Address:</td>
    <td style="border-bottom: 1px solid black;"></td>
    <td>&nbsp;&nbsp;&nbsp;PR No.:</td>
    <th style="border-bottom: 1px solid black;">&nbsp;<?php echo $pr;?></td>
  </tr>
  <tr>
    <td>Contact Number:</td>
    <td style="border-bottom: 1px solid black;"></td>
    <td>&nbsp;&nbsp;&nbsp;RFQ No.:</td>
    <th style="border-bottom: 1px solid black;">&nbsp;<?php echo $rfq;?></td>
  </tr>
  <tr>
    <td>Email Address:</td>
    <td style="border-bottom: 1px solid black;"></td>
    <td>&nbsp;&nbsp;&nbsp;End User:</td>
    <th style="border-bottom: 1px solid black;">&nbsp;<?php echo $area;?></td>
  </tr>
</table>

<table>
    <tr>
        <td>Sir/Ma'am:</td>
    </tr>
    <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Please quote your lowest government price for each of the following item(s) specified below. Submit your quotations, open or sealed, at the Procurement Management Office or thru <b>email at </b>, not later than ___________________. <u>Quotations received through email other than the email address provided <b>shall not be accepted.</b></u></td>
    </tr>
    <tr>
        <td>Terms and Conditions:</td>
    </tr>
    <tr>
        <td>1. The RFQ must be fully accomplished. Put 'N/A' to item/s that is not available.<br>
            2. Quotations shall be inclusive of applicable taxes and other indirect costs, those excedding the Approved Budget for the Contract (ABC) shall be automatically disqualified.<br>
            3. BAC reserves the right to reject any or all Quotations, to waive any minor defects therein, to annul the procurement process, to reject all Quotations at any time prior to the contract award, without thereby incurring any liability to the affected Bidder(s), and to accept only the offer that is most adavantageous to the Government.<br>
            4. <b><u>All quotations for drugs and medicines and medical supplies shall be accompanied by a valid Certificate of Product Registration (Non-submission shall result to supplier's POST-DISQUALIFICATION)</u></b><br>
            5. Delivery Schedule: <u>&nbsp;<b><?php echo $delivery;?></b>&nbsp;</u><br>
            6. Goods must be delivered at the Materials Management Office of BGHMC.<br>
        </td>
    </tr>
</table>
<p>
<table>
    <tr>
        <td><b>Additional Requirements (For new suppliers, to be submitted together with the quotation). -- These requirements shall likewise be submitted by all suppliers on the 1st month of the following year.</b></td>
    </tr>
</table>
<p>
<table class="no-spacing center-align" border="1" cellspacing="0" cellpadding="0" style="width:100%;">
    <tr>
        <td width=50%>Valid Business Permit/Mayor's Permit</td>
        <td width=50%>DTI/SEC Registration Certificate</td>
    </tr>
    <tr>
        <td>Certificate of PhilGEPS Registration</td>
        <td>Valid BIR Registration</td>
    </tr>
    <tr>
        <td>Omnibus Sworn Statement (using the Prescribed Form)</td>
        <td>BIR Form 2303</td>
    </tr>
</table>

<p>

  <table style="width:100%;">
    <tr>
      <td style="width:50%;"></td>
      <td>Truly yours,</td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td class="center-align" style="border-bottom: 1px solid black;"></td>
    </tr>
    <tr>
      <td></td>
      <td class="center-align">Head, Procurement Management Office</td>
    </tr>
  </table>


<p>
    <table>
        <tr>
            <td>*****************************************************************************************************************************</td>
        </tr>
    </table>
<table>
    <tr>
        <td>Sir/Madam:</td>
    </tr>
    <tr>
        <td>After having carefully read and accepted the terms and conditions stipulated in the Request for Quotation (RFQ), hereunder is our financial proposal inclusive of VAT and other incidental costs for the subject procurement identified below:</td>
    </tr>
</table>

<table class="no-spacing center-align" border="1" cellspacing="0" cellpadding="0" style="width:100%;">
  <tr>
    <th rowspan="2" width=5%>Item No.</th>
    <th rowspan="2" width=5%>Qty</th>
    <th rowspan="2" width=5%>Unit</th>
    <th rowspan="2" width=40%>Item Description</th>
    <th rowspan="2" width=10%>ABC/unit</th>
    <th rowspan="2" width=15%>Complete Specification<br>Offered<br>Brand Name/Model</th>
    <th colspan="2" width=20%>PRICE OFFER</th>
  </tr>
  <tr>
    <th>Unit Price</th>
    <th>Total Bid<br>Offer</th>
  </tr>

  <?php
  $totalAmount = 0; 
  $pageNumber = 1;
  // Loop through each row in bac2_rfq table and add a row to the table for each item
  while ($row_rfq = mysqli_fetch_assoc($result_rfq)) {
    $itemno = $row_rfq['itemno'];
    $item = $row_rfq['item'];
    $qty = $row_rfq['qty'];
    $unit = $row_rfq['unit'];
    $abcunit = $row_rfq['abcunit'];

    // Calculate the total amount
    $amount = $abcunit;
    $totalAmount += $amount;
    // Increment the page number
    $pageNumber++;

    ?>

    <tr>
      <td width=5% class="center-align"><?php echo $itemno; ?></td>
      <td width=5% class="center-align"><?php echo $qty; ?></td>
      <td width=5% class="center-align"><?php echo $unit; ?></td>
      <td width=40% style="text-align:left;padding-left:1%;"><?php echo $item; ?></td>
      <td width=10% class="center-align"><?php $amount = $abcunit; $formattedAmount = number_format($amount, 2, '.', ','); echo $formattedAmount; ?></td>
      <td width=15% class="center-align"></td>
      <td width=10.5% class="center-align"></td>
      <td width=10.5% class="center-align"></td>
    </tr>

  <?php
  }{
  ?>

<tr>
    <td colspan="4" style="text-align:right;"><b>Total:</b></td>
    <td class="center-align"><b><?php $formattedTotalAmount = number_format($totalAmount, 2, '.', ','); echo $formattedTotalAmount; ?></b></td>
    <td width=15% class="center-align"></td>
      <td width=10.5% class="center-align"></td>
      <td width=10.5% class="center-align"></td>
</tr>
<?php
  }
  ?>
</table>
<p>
    <table class="center-align" cellspacing="0" cellpadding="0" style="width:100%;">
        <tr>
            <th style="color:royalblue;"><u>For <?php echo $area;?> Use</u></th>
        </tr>
    </table>

    <p>

    <table>
        <tr>
            <td>We undertake, if our Quotation or bid is accepted, to accomplish the procurement project within the delivery schedule stipulated in the Purchase Order (PO).</td>
        </tr>
    </table>

    <div style="text-align: right;">
  <table style="width:100%;">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td style="text-align: right;">Signature:</td>
      <td style="border-bottom: 1px solid black; width:20%;"></td>
    </tr>
    <tr>
      <td></td>
      <td style="text-align: right;">Name of Representative:</td>
      <td style="border-bottom: 1px solid black; width:20%;"></td>
    </tr>
    <tr>
      <td></td>
      <td style="text-align: right;">Date:</td>
      <td style="border-bottom: 1px solid black; width:20%;"></td>
    </tr>
    <tr>
      <td></td>
      <td style="text-align: right;">RFQ No.:</td>
      <td style="border-bottom: 1px solid black; width:20%;">&nbsp;<b><?php echo $rfq;?><b></td>
    </tr>
  </table>
  </div>
</div>
</div>
  </div>

  <script>
  document.addEventListener("contextmenu", function(event) {
    event.preventDefault();
  });

  // Add page numbering using JavaScript
  window.onload = function() {
    var pages = document.getElementsByClassName("page-container")[0].children;
    var totalPages = pages.length;

    for (var i = 0; i < pages.length; i++) {
      pages[i].classList.add("hidden-on-print");
    }

    window.onbeforeprint = function() {
      var pageNumbers = "";

      for (var i = 0; i < totalPages; i++) {
        pageNumbers += "<span class='page-number'>Page " + (i + 1) + "</span>";
      }

      document.body.insertAdjacentHTML("beforeend", pageNumbers);
    };

    window.onafterprint = function() {
      var pageNumbers = document.getElementsByClassName("page-number");

      while (pageNumbers.length > 0) {
        pageNumbers[0].parentNode.removeChild(pageNumbers[0]);
      }
    };
  };
</script>

I tried to open sublime with git bash but I get error : enter image description here and this is the enter image description here

I tried many solutions over the internet, and I can’t find the answer,, I’m on windows and my sublime version 4143

I am trying to run the pdf.js node examples, e.g. getinfo.js. However it fails with

C:Repositoriespdf.js>node getinfo.js
node:internal/modules/cjs/loader:1080
  throw err;
  ^

Error: Cannot find module 'pdfjs-dist/legacy/build/pdf.js'
Require stack:
- C:Repositoriespdf.jsgetinfo.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Module._load (node:internal/modules/cjs/loader:922:27)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (C:Repositoriespdf.jsgetinfo.js:9:18)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'C:\Repositories\pdf.js\getinfo.js' ]
}

Node.js v18.16.1

This is what I did before:

git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
npm install
npm install -g gulp-cli
gulp generic
gulp generic-legacy
cd examples
cd node
node getinfo.js -> gives error mentioned above

So, how to get the node examples running? Also, why is it ‘pdfjs-dist/legacy/build/pdf.js’? Can one update to the current version / is there an up to date example to get started?