Converting japanese fullwidth characters typed by user to halfwidth character in the same input field

There’s an input field, when the user will type any Fulwidth japanese character (numbers only) it won’t be displayed on that input field. It’ll be converted to it’s respective halfwidth character and, then that halfwidth character will be visible inside that same input field. I user type 0, this 0ill not be shown in the input field, it’ll show the converted halfwidth 0. In my case the problem is if the user type 0, the function is running twice and showing 00, but it should be only 0. Can anybody please help me to sort it out? i’m stucked here.

 <input type="text" id="inputField" oninput="convertToHalfWidth(this.value)">
<script>
        function convertToHalfWidth(input) {
            console.log(input);
            // Map of full-width to half-width numbers
            const fullToHalfMap = {
                '0': '0', '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9'
            };

            // Replacing full-width numbers with their half-width counterparts
            const convertedInput = input.replace(/[0-9]/g, match => fullToHalfMap[match]);

            // Updating the input field with the converted value
            document.getElementById('inputField').value = convertedInput;
        }
    </script> here

React Monorepo – Babel complaining about jsx not being enabled

I’m trying to create a monorepo that uses a Component from one subpackage in another subpackage, but no matter what I do, I get an error about jsx not being enabled within babel. I know the dependency tree is correct because if I console log a string export from the Component, it works. It’s only when I try using an actual Component does it crash.

I’ve tried everything I think of or find on Google searching. I’ve tried adding dependencies on all the babel packages, as well as different combinations of the babel files (babel.config.js, babel.config.json, .babelrc). I’m simply at a loss.

To test this, I downloaded this repo (in case the link gets removed, it’s on github, called “SugandSingh/MonoRepo_with_fullStackTodoList”) – This is just a simple monorepo that uses yarn, created fairly recently, that I found on a Medium Tutorial.

Then under packages/shared I created a Components.js file:

export const SomeComponent = () => {
  console.log("SomeComponent");
  // This does not work
  return <p>SomeComponent</p>;
  // return "SomeComponent"; <-- this works
}

Then I created an index.js file:

export * from './Components'

Finally, from the project root directory, I ran:

yarn install
yarn shared-build
yarn web-start

My versions:

yarn: 3.8.1,
node: 20.11.0
npm: 10.2.4

Error when booting up:

SyntaxError: <local path>packagessharedComponents.js: Support for the experimental syntax 'jsx' isn't currently enabled (4:10):
  2 |   console.log("SomeComponent");
  3 |   // This does not work
> 4 |   return <p>SomeComponent</p>;
    |          ^
  5 |   // return "SomeComponent"; <-- this works
  6 | }

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
        npx cross-env BABEL_SHOW_CONFIG_FOR=<local path>packagessharedComponents.js <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.

Closed before a response was received in chrome extension content.js background.js interaction

I’m trying to communicate from content.js to background.js to save some data to the chrome.storage.local but I can’t figure out how to do it correctly.
I’m not very familiar with js so forgive me if it’s a stupid question.
That’s the code:

content.js

function sendMessage(type) {
  chrome.runtime.sendMessage({ action: type }, (response) => {
    console.log(response);
  });
}

sendMessage("test");

background.js

// Listen for messages from content scripts
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "test") {
    saveData(sendResponse);
  }
  return true;
});

// Function to save data to Chrome local storage
function saveData(sendResponse) {
  // Sample data to save
  const test = ["test1", "test2", "test3"];
  chrome.storage.local.set({ test: test }, () => {
  sendResponse("saved");
  });
}

result:

undefined
Unchecked runtime.lastError: The message port closed before a response was received.

What I’m doing wrong?

Javascript Intl.NumberFormat output problem

The function below produces output as “d59”.
The parameters this function takes are “de-De”, “eur” and 59

export function formatCurrency(loc: string, curr: string, price: number): string {
      let currUp = curr.toUpperCase(); //output: EUR
      return new Intl.NumberFormat(loc, { style: 'currency', currency: currUp }).format(price);
}

Output “d59”

What’s wrong here?

Pass bytes array from AJAX to Java

I’m trying to send a byte array to the server through AJAX:

$.ajax({
  url: armd.scieldan.server + "/detachedSignFile/",
  timeout: 120000,
  type: "POST",
  data: byteArray,
  responseType: 'arraybuffer',
  success: function(response) {
    console.log("Sign: " + response);
  },
  error: function() {
    console.log("error");
  }
});

And trying to extract that array from httpExchange, but the content of requestBody is empty:

public void handle(HttpExchange httpExchange) throws IOException {
    httpExchange.getResponseHeaders().set("Content-Type", "text/plain");

    InputStream requestBody = httpExchange.getRequestBody();

    byte[] receivedBytes = IOUtils.toByteArray(requestBody);
}

enter image description here

Actually BufferedInputStream is contained inside the requestBody, but it is unreachable.

Any ideas how can I correctly pass the byte array through JSON to HttpExchange?

createRef vs useRef | Object.seal & deleting current propery

I was learning about Object.seal method which disallows us from deleting or adding properties to an object and I wanted to see some use cases of it in the React library. I found that it is used in only two places:

useRef:mountRef : link

createRef: Link

I tried working with both of them to their behaviors when trying to delete or add some properties as follows:

const ref1 = React.useRef();
  const ref2 = React.createRef();
  console.log({ ref1, ref2 });

  React.useEffect(() => {
    ref1.current = "my Ref 1";
    ref2.current = "my Ref 2";

    Reflect.deleteProperty(ref1, "current");
    Reflect.deleteProperty(ref2, "current");
  }, []);

I found that the current property is removed from ref1 created using useRef but not with ref2 created using createRef.
enter image description here

The same happens when trying to add a property:

const ref1 = React.useRef();
  const ref2 = React.createRef();
  console.log({ ref1, ref2 });

  React.useEffect(() => {
    ref1.current = "my Ref 1";
    ref2.current = "my Ref 2";

    ref1.myProperty = "myProperty 1";
    ref2.myProperty = "myProperty 2";

  }, []);

enter image description here

So the question is: Why is this happening even though both are using Object.seal under the hood?

How do I make the animation of my SVG scene repeatedly?

I created an svg scenery with an animation when I pressed the sun. However the animation only work once, and then it won’t work after that.

Here’s my existing code.

JS:

` const sun = document.getElementById("sun");
      const stage = document.getElementById("stage");

      sun.addEventListener("click", function () {
        sun.style.animationPlayState = "running";
        stage.style.animationPlayState = "running";
      });

      sun.addEventListener("animationend", function () {
        // Reset sun position to its initial values
        sun.setAttribute("cx", "700");
        sun.setAttribute("cy", "100");
        // Set animation state to paused for both sun and stage

            sun.style.animationPlayState = "paused";
        stage.style.animationPlayState = "paused";`
      });```

The following JS and Perl programs encrypt with the same data but produce different resut. Should they not produce the same output?

The following programs, one in Javascript, and the other in Perl, are supposed to perform the same task, they have the same input data. However, the output is different. The problem originated in the JS being used on the client side, sending a POST request to an app on the server side, written in Perl. The Perl program failed to decrypt with no obvious reason why. Analysing it I arrived to the conclusion that the libraries, in the two different programming languages, were behaving differently. So I wrote the client side in Perl to prove the point. The results are below.

const CryptoJS = require('crypto-js');

function logBytes(description, wordArray) {
    const bytes = CryptoJS.enc.Hex.stringify(wordArray);
    console.log(description, bytes);
}

function encrypt(key32, iv16, data) {
    const key = CryptoJS.enc.Hex.parse(key32);
    const iv = CryptoJS.enc.Hex.parse(iv16);
    const utf8data = CryptoJS.enc.Utf8.parse(data);

    // Log data and byte arrays
    console.log("Data: " + data);
    logBytes("Key Bytes:", key);
    logBytes("IV Bytes:", iv);
    logBytes("Data Bytes:", utf8data);

    const encrypted = CryptoJS.AES.encrypt(utf8data, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });

    console.log("Encrypted (Base64):", encrypted.toString());
}

const data = "[email protected]";
const key32 = "9d066ab6dc74593bbcef0876b4f7c00bada3acce6134fc64fa31a2cf995a39dd";
const iv16 = "9b2b9bdb4af5357cd78a8a2257c51a7f";
encrypt(key32, iv16, data);

output:

 % node test.js
Data: [email protected]
Key Bytes: 9d066ab6dc74593bbcef0876b4f7c00bada3acce6134fc64fa31a2cf995a39dd
IV Bytes: 9b2b9bdb4af5357cd78a8a2257c51a7f
Data Bytes: 6d79656d61696c406d797365727665722e636f6d
Encrypted (Base64): iit+mjBnWsMrMkJp63hpRmsCZgIxZ4FPZQId35qv12s=
#!/usr/bin/perl

use strict;
use warnings;

use MIME::Base64;
use Crypt::OpenSSL::AES;

sub logMessage {
  my ($message) = @_;
  print "$messagen";
}

sub logBytes {
    my ($description, $bytes) = @_;
    my $hex = unpack('H*', $bytes);
    logMessage("$description: $hex");
}

sub encrypt {
    my ($key32, $iv16, $data) = @_;

    my $key = pack('H*', $key32);
    my $iv = pack('H*', $iv16);

    # Log data and byte arrays
    logMessage("Data: $data");
    logBytes("Key Bytes", $key);
    logBytes("IV Bytes", $iv);
    logBytes("Data Bytes", $data);

    my $cipher = Crypt::OpenSSL::AES->new($key);

    my $block_size = 16;
    my $padding = $block_size - (length($data) % $block_size);
    $data .= chr($padding) x $padding;

    my $encrypted = $cipher->encrypt($data);

    my $encrypted_base64 = encode_base64($encrypted);
    $encrypted_base64 =~ s/n//g;  # Remove newlines that might be added by MIME::Base64

    logMessage("Encrypted (Base64): $encrypted_base64");
}

sub main {
  my $data = "[email protected]";
  my $key32 = '9d066ab6dc74593bbcef0876b4f7c00bada3acce6134fc64fa31a2cf995a39dd';
  my $iv16 = '9b2b9bdb4af5357cd78a8a2257c51a7f';
  encrypt($key32, $iv16, $data);
}

main();
exit (0);

output

% ./test.pm  
Data: [email protected]
Key Bytes: 9d066ab6dc74593bbcef0876b4f7c00bada3acce6134fc64fa31a2cf995a39dd
IV Bytes: 9b2b9bdb4af5357cd78a8a2257c51a7f
Data Bytes: 6d79656d61696c406d797365727665722e636f6d
Encrypted (Base64): rk7JgOwsb7atyvEIXVNQkexbx5SYzufE05LZAoqtZGk=
Versions:

Perl:
Crypt::OpenSSL::AES version: 0.19
MIME::Base64 version: 3.16

JS:
[email protected]

How to hide ad container if ad doesn’t fill?

I have the following ad html:

<div class="ad-container">
  <p>Ad slot #1</p>
  <div id="ad-slot-1" class="ad-slot"></div>
</div>

and I’m calling this to collapse the ad if it doesn’t fill:

googletag.pubads().collapseEmptyDivs();

The problem is that it only collapses the ad (ad-slot-1) and not the parent container. How can I make it hide the container as well?

You can play around with the code here: https://jsbin.com/kefajicemu/edit?html,output

Rendering an escaped string with lit element?

This demo first highlights html contained inside the fs-highlight element and assigns the result to the _code property.

The render method then renders the template with the _code highlighted html inserted into the code element like this:

  render() {
    if (this.language) {
      return html`
    <h1>Hello</h1>
    <pre><code class="language-${this.language}">${this._code}</code></pre>
    `;
    }
    return html`
    <h1>Hello</h1>
    <pre><code>${this._code}</code></pre>
    `;
  }

And I was expected to see <test></test>. However it renders as:

<span class="hljs-section">&lt;test&gt;</span><span class="hljs-section">&lt;/test&gt;</span>

And this is because the result has quotes around it like this (Looking at it in developer tooling):

"&lt;span class="hljs-section"&gt;&amp;lt;test&amp;gt;&lt;/span&gt;&lt;span class="hljs-section"&gt;&amp;lt;/test&amp;gt;&lt;/span&gt;"

How do we get it to render so that the browser converts the highlight string to html?

Same code behaving differently inside and outside function

I have a google sheet with car names in one column. My goal is to write a script that will go to an API and pull prices for those cars and put them in another column when you click a button from a custom menu. Right now I am struggling to run a basic function to find the proper column in my sheet.

I have one code block that works as expected, but when I put it into a function it fails.

function fetchPrices(sheetName) {
  let sheet;
  sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
  let data = sheet.getDataRange().getValues();
  let col = data[0].indexOf('Model');
}

const sheetName = 'Cars'
let sheet;
sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
let data = sheet.getDataRange().getValues();
let col = data[0].indexOf('Model');

Logger.log(col);
Logger.log(fetchPrices('Cars'))

These are, as far as I can tell, the exact same four lines of code to find the index of the column called ‘Model,’ but when I run this I get

Info 0.0 (the expected answer)
Info null
TypeError: Cannot read properties of null (reading ‘getDataRange’)

What is going on and why is the code in the function not running properly?

Update

Here is a link to a demo sheet that is exhibiting the same behavior as my actual data.

Web animation api fill mode confusion, (affecting draggable element subsequent interaction)

so i have this bare bones example which imitates draggable piece in a chess board.

On pointerup i want to perform snapback animation to piece starting position.
And ok, it works if i don’t specify fill mode (use fill: 'none') and manually translate the element when animation finishes.

Why does it not work when i have fill: 'forwards' specified? I also tried using commitStyles() after animation finishes to commit those styles to inline css but drag still does not work afterwards. You can see in devtools that piece should be moving but it stays in the place. Fill forwards should keep the state of the final animation frame which is basically where i want my piece to be, not sure why it makes it non draggable after that.

I assume there is some conflict with web animation api styles and my styles, but i can’t figure out exactly what is the problem.
Is this documented somewhere, i can’t find anything about this.

const board = document.querySelector('section')
const piece = document.querySelector('div')

const pieceOffsetSize = 35 // half piece size
const lastPos = { x: 0, y: 0 }
let dragging = false

function translateElement(elm, dx, dy) {
  elm.style.transform = `translate(${dx}px, ${dy}px)`
}

function performSnapback(elm) {
  const opts = { duration: 300 } // no fill mode (fill: 'none')
  const keyframes = [{ transform: `translate(${lastPos.x}px, ${lastPos.y}px)` }]
  const animation = elm.animate(keyframes, opts)

  animation.onfinish = () => {
    translateElement(elm, lastPos.x, lastPos.y) // after finish, i translate element manually
  }
}

function performSnapback2(elm) {
  const opts = { duration: 300, fill: 'forwards' } // tried fill: 'both' also and does not work
  const keyframes = [{ transform: `translate(${lastPos.x}px, ${lastPos.y}px)` }]  
  const animation = elm.animate(keyframes, opts)

  animation.onfinish = () => {
    animation.commitStyles() // tried with and without this and does not work
  }
}

piece.onpointerdown = e => {
  dragging = true
  e.target.setPointerCapture(e.pointerId)
  e.target.style.userSelect = 'none'
  const deltaX = e.clientX - board.offsetLeft - pieceOffsetSize
  const deltaY = e.clientY - board.offsetTop - pieceOffsetSize
  translateElement(e.target, deltaX, deltaY)
}

piece.onpointerup = e => {
  dragging = false
  e.target.releasePointerCapture(e.pointerId)
  e.target.style.userSelect = 'auto'
  // performSnapback(e.target) // WORKS
  performSnapback2(e.target)   // DOES NOT WORK 
}

piece.onpointermove = e => {
  if (!dragging) return
  const deltaX = e.clientX - board.offsetLeft - pieceOffsetSize
  const deltaY = e.clientY - board.offsetTop - pieceOffsetSize
  translateElement(e.target, deltaX, deltaY)
}
body { padding: 0; margin: 0; }
section { width: 400px; height: 400px; outline: 2px solid darkviolet; margin: 100px; position: relative; }
div { position: absolute; background: plum; width: 70px; height: 70px; }
<section>
  <div style="transform: translate(0px, 0px)"></div>
</section>

Aframe – Problem replaying a video from blob after others have been played

I’ve made this VR experience: https://multimedia.enpjj.fr/vr/v2/, but there is what I though was a memory problem… but maybe it’s not? (see what I’ve tried bellow)

Steps to reproduce the issue (use CTRL + right arrow to skip ahead or CTRL + 0 to go back to the main menu if you’re stuck) :

  1. Start the VR Experience.
  2. Click on one of the two videos (not the credits).
  3. Click on any of the two choices.
  4. Go back to the main menu and try playing the same first video.

It will say it is playing the video, if you wait long enough you will hear the sound of the video (the first two videos have 45 sec of text at the beginning), but it will show only the last frame of the video.

So, I thought it was a memory problem (it was doing that even before I implemented the fetch -> blob method)… That’s why, I’ve tried preloading each video before playing it (hence fetch -> blob) and the video doesn’t start playing until it has be preloaded (via Promise).

Now, I don’t even create the video element until the user might click on it (until the menu it’s featured in is up). And, I clear the blob from memory (the blob is stored in a array: VideosInMemory[vID] and I delete VideosInMemory[vID]) and delete the video element (let video_asset = document.getElementById(vID); video_asset.parentElement.removeChild(video_asset);) when the video can no longer be clicked on (it’s not in the menu currently up).

But it is still doing weird being-stuck-on-the-frame thing…
It doesn’t do it when I go back to the main menu right after playing one of it’s videos, only if I watch one from another menu in between. And it has no problem replaying multiple times the videos from the other menus). I don’t get it!

I know my aframe version is not up to date but it’s because I use aframe-rounded-box-component.js that doesn’t work with the new version. I’m working on a v3 with the newest aframe but in that v3 I also try to implement HLS streaming… but if it’s not a memory problem, as I’m starting to think, I don’t need to do that.

How to download a Resume Template with Data and Design in ASP .NET MVC

  1. I’m fetching my all data from controller’s Action Method(GetSelectedTemplate) to the view(GetSelectedTemplate.cshtml).
    and try to download the Resume Template when click on the Resume Button.
    2.In my view i applied the Resume Template and fetch all data inside that template. now i want to download the template with same design.(Like we fill all details in Resume and click on download button we able to see the Pdf in same design as resume template)
  2. I use “iTextSharp” Nuget package to download the pdf file but not able download it.

Here is controller code: (for controller code i compare different templates.Just cinsidered the “Resume_Template_1”)

[HttpGet]
        public async Task<ActionResult> GetSelectedTemplate(int TempId)
        {
            JobSeeker objJ = new JobSeeker();
            BALJobSeeker objBAL = new BALJobSeeker();
            List<JobSeeker> jobSeekers = new List<JobSeeker>();
            objJ.TemplateId = TempId;
            SqlDataReader dr = await objBAL.TemplateNameDetails(objJ);
            // Retrieve ViewBag data from the first action method
            ViewBag.BasicList = TempData["BasicList"];
            ViewBag.QualificationList = TempData["QualificationList"];
            ViewBag.EmployementList = TempData["EmployementList"];
            ViewBag.ProjectList = TempData["ProjectList"];
            ViewBag.CertificationList = TempData["CertificationList"];
            ViewBag.ObjectiveBag = TempData["ObjectiveBag"];
            ViewBag.SkillsExperienceList = TempData["SkillsExperienceList"];

            if (await dr.ReadAsync())
            {
                string templateName = dr["TemplateName"].ToString();
                if (templateName == "Resume_Template_1")
                {
                    return View("GetSelectedTemplate");
                }
                else if (templateName == "Resume_Template_3")
                {
                    return View("GetSelectedTemplate2");
                }
                else
                {
                    return HttpNotFound();
                }
            }
            return View();
        }

View Code: (GetSelectedTemplate.cshtml -> where i fetch all my controller data and all template code.)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pillar - Bootstrap Resume/CV Template for Developers</title>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Responsive Resume Template">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>
    <article class="resume-wrapper text-center position-relative">
        <div class="resume-wrapper-inner mx-auto text-start bg-white shadow-lg">
            <header class="resume-header pt-4 pt-md-0">
                <div class="row">
                    @foreach (var jobSeeker in ViewBag.BasicList)
                    {
                        <div class="col-block col-md-auto resume-picture-holder text-center text-md-start">
                            <img src="@jobSeeker.Photo" alt="Image" />
                        </div><!--//col-->
                        <div class="col">
                            <div class="row p-4 justify-content-center justify-content-md-between">
                                <div class="primary-info col-auto">
                                    <h1 class="name mt-0 mb-1 text-white text-uppercase text-uppercase">@jobSeeker.FullName</h1>
                                    @*<div class="title mb-3">Full Stack Developer</div>*@
                                    <ul class="list-unstyled">
                                        <li><a class="text-link" href="#"><i class="fas fa-map-marker-alt fa-fw"></i> @jobSeeker.Address</a></li>
                                        <li class="mb-2"><a class="text-link" href="#"><i class="far fa-envelope fa-fw me-2" data-fa-transform="grow-3"></i>@jobSeeker.EmailId</a></li>
                                        <li><a class="text-link" href="#"><i class="fas fa-mobile-alt fa-fw me-2" data-fa-transform="grow-6"></i>@jobSeeker.MobileNo</a></li>
                                    </ul>
                                </div><!--//primary-info-->
                                <div class="secondary-info col-auto mt-2">
                                    <ul class="resume-social list-unstyled">
                                        <li class="mb-3"><a class="text-link" href="#"><span class="fa-container text-center me-2"><i class="fab fa-linkedin-in fa-fw"></i></span>@jobSeeker.ProfileUrl</a></li>
                                        <li class="mb-3"><a class="text-link" href="#"><span class="fa-container text-center me-2"><i class="fas fa-user fa-fw"></i></span>@jobSeeker.Gender</a></li>
                                        <li><a class="text-link" href="#"><span class="fa-container text-center me-2"><i class="fas fa-globe"></i></span>yourwebsite.com</a></li>
                                    </ul>
                                </div><!--//secondary-info-->
                            </div><!--//row-->

                        </div><!--//col-->
                    }
                </div><!--//row-->

            </header>
            <div class="resume-body p-5">
                <section class="resume-section summary-section mb-5">
                    <h2 class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3">Career Summary</h2>
                    <div class="resume-section-content">
                        <p class="mb-0"> @ViewBag.ObjectiveBag<a class="text-reset text-link" href="https://themes.3rdwavemedia.com/resources/sketch-template/pillar-sketch-sketch-resume-template-for-developers/" target="_blank"></a></p>
                    </div>
                </section><!--//summary-section-->
                <div class="row">
                    @foreach (var jobSeeker in ViewBag.EmployementList)
                    {
                        <div class="col-lg-9">
                            <section class="resume-section experience-section mb-5">
                                <h2 class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3">Work Experience</h2>
                                <div class="resume-section-content">
                                    <div class="resume-timeline position-relative">
                                        <article class="resume-timeline-item position-relative pb-5">
                                            <div class="resume-timeline-item-header mb-2">
                                                <div class="d-flex flex-column flex-md-row">
                                                    <h3 class="resume-position-title font-weight-bold mb-1">@jobSeeker.Designation</h3>
                                                    <div class="resume-company-name ms-auto">@jobSeeker.OrganizationName</div>
                                                </div><!--//row-->
                                                <div class="resume-position-time">@jobSeeker.StartDate - @jobSeeker.EndDate</div>
                                            </div><!--//resume-timeline-item-header-->
                                            <div class="resume-timeline-item-desc">
                                                <p>@jobSeeker.JobResponsibilities</p>
                                                <h4 class="resume-timeline-item-desc-heading font-weight-bold">Total Experience:</h4>
                                                <p>@jobSeeker.TotalExperience</p>
                                                <h4 class="resume-timeline-item-desc-heading font-weight-bold">Technologies used:</h4>
                                                <ul class="list-inline">
                                                    <li class="list-inline-item">
                                                        <span class="badge bg-secondary badge-pill">
                                                            @foreach (var skill in jobSeeker.Skills.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
                                                            {
                                                                @skill.Trim();
                                                            }
                                                        </span>
                                                    </li>
                                                </ul>
                                            </div><!--//resume-timeline-item-desc-->
                                        </article><!--//resume-timeline-item-->
                                    </div><!--//resume-timeline-->
                                </div>
                            </section><!--//experience-section-->
                            <section class="resume-section experience-section mb-5">
                                <h2 class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3">Projects </h2>
                                @foreach (var JobSeekers in ViewBag.ProjectList)
                                {
                                    <div class="resume-section-content">
                                        <div class="resume-timeline position-relative">
                                            <article class="resume-timeline-item position-relative pb-5">
                                                <div class="resume-timeline-item-header mb-2">
                                                    <div class="d-flex flex-column flex-md-row">
                                                        <h3 class="resume-position-title font-weight-bold mb-1">@JobSeekers.ProjectTitle</h3>
                                                        <div class="resume-company-name ms-auto">@JobSeekers.Client</div>
                                                    </div><!--//row-->
                                                    <div class="resume-position-time">@JobSeekers.StartDate - @JobSeekers.EndDate</div>
                                                </div><!--//resume-timeline-item-header-->
                                                <div class="resume-timeline-item-desc">
                                                    <p>@JobSeekers.ProjectResponsibilities</p>
                                                    <h4 class="resume-timeline-item-desc-heading font-weight-bold">Project Status:@JobSeekers.Status</h4>
                                                    <h4 class="resume-timeline-item-desc-heading font-weight-bold">Technologies used:</h4>
                                                    <ul class="list-inline">
                                                        @foreach (var skill in JobSeekers.Skills.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
                                                        {
                                                            <li class="list-inline-item">
                                                                <span class="badge bg-secondary badge-pill">@skill.Trim()</span>
                                                            </li>
                                                        }
                                                    </ul>
                                                </div><!--//resume-timeline-item-desc-->
                                            </article><!--//resume-timeline-item-->


                                        </div><!--//resume-timeline-->
                                    </div>
                                }
                            </section><!--//experience-section-->
                        </div>
                    }
                    <div class="col-lg-3">
                        <section class="resume-section skills-section mb-5">
                            <h2 class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3">Skills</h2>
                            @foreach (var jobSeeker in ViewBag.SkillsExperienceList)
                            {
                                <div class="resume-section-content">
                                    <div class="resume-skill-item">
                                        <ul class="list-unstyled mb-4">
                                            <li class="mb-2">
                                                <div class="resume-skill-name">
                                                    @foreach (var skill in jobSeeker.ExperiencedSkills.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
                                                    {
                                                        @skill.Trim();
                                                    }
                                                </div>
                                                <div class="progress resume-progress">
                                                    @{
                                                        int progressWidth;
                                                        switch (jobSeeker.Ratings.ToLower())
                                                        {
                                                            case "low":
                                                                progressWidth = 20;
                                                                break;
                                                            case "better":
                                                                progressWidth = 40;
                                                                break;
                                                            case "average":
                                                                progressWidth = 60;
                                                                break;
                                                            case "good":
                                                                progressWidth = 80;
                                                                break;
                                                            case "excellent":
                                                                progressWidth = 100;
                                                                break;
                                                            default:
                                                                progressWidth = 0;
                                                                break;
                                                        }
                                                    }
                                                    <div class="progress-bar theme-progress-bar-dark" role="progressbar" style="width: @progressWidth%" aria-valuenow="@progressWidth" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div><!--//resume-skill-item-->
                                </div>
                            }
                        </section><!--//skills-section-->
                        <section class="resume-section education-section mb-5">
                            <h2 class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3">Education</h2>
                            @foreach (var jobSeeker in ViewBag.QualificationList)
                            {
                                <div class="resume-section-content">
                                    <ul class="list-unstyled">
                                        <li class="mb-2">
                                            <div class="resume-degree font-weight-bold">@jobSeeker.EducationName: @jobSeeker.DegreeName @jobSeeker.Specialization</div>
                                            <div class="resume-degree-org">@jobSeeker.UniversityName</div>
                                            <div class="resume-degree-org">Grade: @jobSeeker.Grade</div>
                                            <div class="resume-degree-time">@jobSeeker.StartYear - @jobSeeker.EndYear</div>
                                        </li>
                                    </ul>
                                </div>
                            }
                        </section><!--//education-section-->
                        <section class="resume-section reference-section mb-5">
                            <h2 class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3">Certifications</h2>
                            @foreach (var jobSeeker in ViewBag.CertificationList)
                            {
                                <div class="resume-section-content">
                                    <ul class="list-unstyled resume-awards-list">
                                        <li class="mb-0 ps-4 position-relative">
                                            <i class="resume-award-icon fas fa-trophy position-absolute" data-fa-transform="shrink-2"></i>
                                            <div class="resume-award-name">@jobSeeker.CertificationName</div>
                                            <div class="resume-degree-time">Issuing Date:@jobSeeker.StartDate</div>
                                            <div class="resume-award-desc">Issuing Authority:@jobSeeker.IssuingAuthority</div>
                                        </li>
                                    </ul>
                                </div>
                            }
                        </section><!--//interests-section-->
                        <section class="resume-section skills-section mb-5">
                            <h2 class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3">Languages</h2>
                            @foreach (var jobSeeker in ViewBag.BasicList)
                            {
                                <div class="resume-section-content">
                                    <div class="resume-skill-item">
                                        <ul class="list-unstyled mb-4">
                                            @foreach (var lang in jobSeeker.Languages.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
                                            {
                                                <li class="list-inline-item">
                                                    <span class="badge bg-secondary badge-pill">@lang.Trim()</span>
                                                </li>
                                            }
                                        </ul>
                                    </div>
                                </div>
                            }
                        </section><!--//language-section-->
                    </div>
                </div><!--//row-->
            </div><!--//resume-body-->
        </div>
    </article>
    <button id="downloadPDF">Download PDF</button>
</body>
</html>

How to place an html block at the bottom of the last(!) page when printing with CSS and/or JS?

When printing from html, two pages are generated.

For visual learners:
enter image description here

CSS:

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: none; /* Initially hide the footer */
}

@media print {
  .footer {
    display: block; /* Show the footer when printing */
  }
}

HTML:

<div id="content">
  <h1>Your content here</h1>
  <p>A lot of "Lorem". Check sandbox (link place on bottom)</p>
</div>
<div class="bottom-on-last-page"><b>bottom-on-last-page</b></div>

Sandbox

P.S. I’ve studied similar topics here. The community had no answers to this question. Print Label at bottom of last page in Html