Category: javascript

I’m studying recursion, and I came across an example of using the Fibonacci sequence and it talked about the concept of memoization. In that, it has a variable that is declared with an OR (||). I’m a little confused by that.

Here is the code:

fib = (number, storage) => {
    storage = storage || {}; //<--This is what I'm asking about

    if (storage[number]){
        return storage[number];
    } 
    if (number <= 1){ //<--second question 
        return 1;
    } 
    return storage[number] = fib(number -1, storage) + fib(number-2, storage);
}

Is my understanding correct that when this is called the first time, it assigns an empty object to storage, since storage isn’t passed in the first time, and doesn’t yet exist? Then on subsequent calls, since storage is something (an object), it just goes with the first option and assigns storage and ignores the OR?
Also, separate question, but as this function doesn’t explicitly stop at 0, why does it in fact stop at zero? Why doesn’t it just continue indefinitely into negative numbers?

I’m trying to add three.js as a dependency to my Phoenix Project.

At the moment, I’ve vendored a minified three.js version in /assets/vendor/three.min.js

From there I added the following to my app.js:

import * as THREE from "../vendor/three.min.js";

window.THREE = THREE;

let Hooks = {};
Hooks.ThreeInit = {
  mounted() {
    if (this.el.dataset.initialized === "false") {
      this.initThreeScene();
      this.el.dataset.initialized = "true";
    }
  },
  initThreeScene() {
    // Initialize your three.js scene here, using `THREE` object.
    // For example:
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    this.el.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);

    scene.add(cube);
    camera.position.z = 5;

    const animate = function () {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();
  }
};

// other alpine stuff here

let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  hooks: Hooks,
  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        window.Alpine.clone(from, to)
      }
    }
  }
})

// connect if there are any LiveViews on the page
liveSocket.connect()

The live view I am trying to render the 3D cube over is as follows:

defmodule PortfolioWeb.ThreeJSLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, socket}
  end



  def render(assigns) do
    ~L"""
    <h1>Hello, World!</h1>
    <div id="three-container" phx-hook="ThreeInit"></div>
    """
  end
end

At the moment, the only thing that renders is the Hello World

Any help in figuring out what the issue is would be greatly appreciated <3

I cannot get a value to output in :value="myFunction(cur_path)" no matter what. It’s always an object Promise even though I’ve tried different ways to await the value from the async function. async fetch_dpids(x) gets data from the API, I call that function in another function called async myFunction(x) to await the value and output it through :value="" in the Vue HTML tags.

  <k-accordion>
    <k-accordion-item title="Best Paths">
        <div>
          <k-property-panel v-for="(path, index) in content">
            <k-accordion-item :title=format_title(index,path['cost'])>
              <k-property-panel-item v-for="(cur_path, path_index) in path['hops']"
                                     v-if="content" :name="String(path_index)" :value="myFunction(fetch_dpids, cur_path)" :key="path_index">
              </k-property-panel-item>
            </k-accordion-item>
          </k-property-panel>
        </div>
      </k-accordion-item>
  </k-accordion>
</template>
<!-- :name="String(path_index)" holds the # count;  
      :value="cur_path" holds the switch/interface; e.g. 00:00:00:00:00:00:00:03
      -->
<script>
 module.exports = {
   props: ["content"],
   methods: {
    format_title(index, cost){
      return "Path " + index + ", cost: " + cost + ", hops: ";
    },
    
    async fetch_dpids(x) {
      try {
          const response  = await fetch('/api/myAPI/topology/v3/interfaces');
          const data      = await response.json();
          const dpids = Object.entries(data.interfaces).map(([key, value]) => {
            let item = key;
            if (item == x) { // troubleshooting
                console.log(item + "HERE <-------");
              }
            if (value.name) {
              item = `${value.name} - ${item} - ${value.mac}`;
            }
            return item;
          });
          this.dpids = dpids;
      } catch (error) {
          console.error(error);
      }
    },
    async myFunction(fetch_dpids, x) { //recent addition
      const result = await fetch_dpids(x);
      return result; // logs the resolved value of the Promise
  }
   }, // end of method block here
    
   data () {
     return {
       display: false,
       paths: [],
       headers: ["dpid"],
       rows: [this.content]
     }
   }
   
 }


</script>```

[Console log][1]
[object Promise][2]


  [1]: https://i.stack.imgur.com/OpX7r.png
  [2]: https://i.stack.imgur.com/msDgV.png

I currently am creating a filter popup with a list of checkboxes. On default, there should be some items selected and some not selected. I have these checkboxes connected to an object array using v-model. My problem is that when I deselect and select an item, instead of passing the object value it passes in true/false. My code is below:

<template>
    <v-card>
        <v-card-title>
            <span class="headline">Filter Headers</span>
        </v-card-title>
        <v-card-text>
            <div class="column" v-for="(header, index) in allHeaders" :key="index">
                <input
                v-model="filteredHeaders[index]"
                type="checkbox"
                :id="index"
                >
                <label :for="index"
                >{{ header.text }}</label>
            </div>
            <p class="ml-5 mt-10"> {{ filteredHeaders }} </p>

        </v-card-text>

    </v-card>    
</template>

<script>
    export default {

        props: {
            headers: Array,
            allHeaders: Array,
        },
        computed: {
            updatedTitleOnly() {
                var titleOnly = [];
                var objectPlaceholder = {};
                console.log(this.filteredHeaders);
                    if(this.filteredHeaders.length > 0) {
                        for(var i = 0; i < this.filteredHeaders.length; i++) {
                            objectPlaceholder = this.filteredHeaders[i];
                            console.log(objectPlaceholder);

                            // titleOnly.push(objectPlaceholder.text)
                        }
                }
                    return titleOnly;
            }
        },
        data() {
            return {
                updateCheck: [],
                filteredHeaders: this.headers,
            }
        },

    };
</script>

<style>
    .column {
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
        padding: 0 10px;
    }
</style>

As you can see, I use a prop called allHeaders to get the list of all possible headers. Then I use a for-loop to create a checkbox for each header and assign the value of each checkbox to a value in a new array called filteredHeaders. What I want is to have these checkboxes determine what values go inside filteredHeaders. With my current code, the values get removed properly, but when I try to add them back instead of adding that object value, I get “true” or “false”.

I am not sure what to do next.

module.exports = function(grunt){
grunt.initConfig({

uglify: {
            'minify-each':{ 
                options : {
                    beautify: false, 
                    mangle: false,  
                    sourceMap: true,
                    compress: {
                        drop_console: true 
                    }
                },
                files: [{
                    cwd: 'src/private/assets/js/',
                    src: '**/*.js',
                    dest: 'src/public/assets/js/',
                    expand: true,
                    flatten: false,
                    ext: '.min.js' //Extension not used in ES6 import statements
                }]
            }

});

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('run', ['uglify']);

};

In each *.js file, there are ES6 import statements, for example:

in file1.js, I have…

import { getConstants, getUtils } from ‘../assets/js/utils.js’;
import { WidgetClass } from ‘../assets/js/classes.js’;

class ProcessMain {}

The issue is when performing minification on file1.js in Gruntfile.js, those import statements are maintained, but do want to be able to replace each import statement as follows:

import { getConstants, getUtils } from ‘../assets/js/utils.min.js’;
import { WidgetClass } from ‘../assets/js/classes.min.js’;

Are there ways to capture each line in file1.js to update the import statements?

Within uglify object in Gruntfile.js, I have replaced:

ext: ‘.min.js’ //Extension not used in ES6 import statements
–with–
ext: ‘.js’ //Extension used in ES6 import statements

and that seems to do the trick, perhaps, resolves the issue. However, it is not standard since the minified file1.js does not have a *.min.js extension.

Background: jQuery version 2.1.3 (https://code.jquery.com/jquery-2.1.3.js) has following snippet:

iframe = (iframe || jQuery( "<iframe frameborder='0' width='0' height='0'/>" )).appendTo( doc.documentElement );

Can I replace it with following code (from your example)

if ( !iframe ) {
 iframe = document.createElement( "iframe" );
 iframe.frameBorder = iframe.width = iframe.height = 0;
}
doc.documentElement.appendChild( iframe );

The purpose is very strange, in short, web firewall’s stupid rule is preventing jQuery code to be executed saying that this is an iframe injection.

Will the snippet serve the original purpose?

Please let me know.

Thank you.

I tried upgrading jQuery but it’s breaking other dependencies.

The code should generate all variations of a word that have letters in parentheses. Currently, it works when there are multiple letters in the parentheses, but not when there is only one letter inside.

Example:
t(ea)st

test, tast

Here, “test” and “tast” are generated from the word “t(ea)st”. That works fine.

But what doesn’t work is when there is only one letter in the parentheses.

Example:
t(e)st

test

Only the word “test” is generated, but it should also generate “tst”.
The problem now is that no matter what I try, I can’t get it to generate the word “tst”.

If there are multiple parentheses with only one letter inside, as in this example:

t(e)st(s) – then the following words should be generated:

tests, test, tsts, tst

  const generateVariations = (() => {
    const cache = {};

    return (word) => {
      if (cache[word]) {
        return cache[word];
      }

      const variations = [];

      // Find all groups of letters in parentheses
      const groups = word.match(/(([^)]+))/g) || [];

      // Create an array of arrays, where each subarray contains the letters in a group
      const letterArrays = groups.map(group => group.slice(1, -1).split(''));

      // If a group has only one letter, remove the parentheses and add the letter to the list of groups
      const modifiedGroups = groups.reduce((acc, group) => {
        if (group.length === 3) {
          acc.push(group[1]);
        } else {
          acc.push(group);
        }
        return acc;
      }, []);

      // Generate all possible combinations of letters from each group
      const combinations = cartesianProduct(...letterArrays);

      // Generate variations by replacing each group with each combination of letters from that group
      for (const combination of combinations) {
        let newWord = word;
        for (let i = 0; i < modifiedGroups.length; i++) {
          const group = modifiedGroups[i];
          if (group.length === 1) {
            newWord = newWord.replace(`(${group})`, group);
          } else {
            newWord = newWord.replace(groups[i], combination[i]);
          }
        }
        variations.push(newWord);
      }

      cache[word] = variations;
      return variations;
    };
  })();

  function cartesianProduct(...arrays) {
    let result = [[]];
    for (const array of arrays) {
      const newResult = [];
      for (const x of result) {
        for (const y of array) {
          newResult.push([...x, y]);
        }
      }
      result = newResult;
    }
    return result;
  }

<script>
    
    //references the submit button, runs if it is clicked
    const sub = document.getElementById("sub");
    sub.addEventListener("click", (e) => {
    e.preventDefault();
    
    //references every input number
    var in1 = document.getElementById("in1").value;
    var in2 = document.getElementById("in2").value;
    var in3 = document.getElementById("in3").value;
    var in4 = document.getElementById("in4").value;
    var in5 = document.getElementById("in5").value;
    
    //creates an array and puts all of the inputted values into it
    const inputs = new Array();
    inputs.push(in1, in2, in3, in4, in5);
    
    //references all of the circles
    var num1 = document.getElementById("num1");
    var num2 = document.getElementById("num2");
    var num3 = document.getElementById("num3");
    var num4 = document.getElementById("num4");
    var num5 = document.getElementById("num5");
    
    //creates an array and stores all of the references to the circles in it
    var circles = new Array();
    circles.push(num1, num2, num3, num4, num5);
    
    //creates an array for the generated numbers
    var generated = new Array();
    
    for(i = 0; i < 6; i++){
        //fills the array with 5 random numbers
        let gen = Math.round(Math.random() * 38);
        generated.push(gen);
        //changes the numbers in the circles to the random numbers
        circles[i].innerHTML = generated[i];
    
    }
    
    alert("test");//this doesn't pop up
    
    });

All of my code up to this point works perfectly, and the numbers are correctly added to the circles, but then anything I write after the for loop does not run, and I cannot figure out why. If the alert is anywhere else in the code above the for loop, it pops up with no issues.
Any help is greatly appreciated.

I tried to make an alert pop up to check if anything was running after the for loop, and it did not pop up.

I am writing a ViolentMonkey userscript that will add an event listener on a button #mark-watched, so that when it is clicked, the #next-video button will be clicked automatically. The website doesn’t automatically mark the video as watched or automatically navigate to the next video upon completion so this is the purpose of the userscript.

The following is a simplified outline of the webpage on which my userscript will run

  <div class="container">
    <button id="next-video" type="button">Next Video</button>
    <button id="mark-watched" type="button">Complete section</button>
  </div>

Here is the userscript I’ve written:

  const mark_watched_btn = document.getElementById("mark-watched");
  const next_video_btn = document.getElementById("next-video");

  mark_watched_btn.addEventListener("click", (event) => {
    // wait an arbitrary 500ms to allow the page to submit its AJAX call marking the video as watched
    setTimeout(() => {
      next_video_btn.click();
    }, 500);
  });

The userscript works properly when the page is first loaded, but when the page navigates to the next video, the event listener I implemented will no longer work because the website is running via some javascript SAP framework, so when the entire .container component is reloaded and a new set of buttons are placed, the userscript (or ViolentMonkey) does not re-run the userscript.

Is there a way to have my click event listener on #mark-watched be applied to any and all future buttons that may appear on the page?

I’m trying to create a store in Shopify Dawn theme and would like if you are on a product page, the sizing options under the color options be disabled or crossed out if sold out. Below is code for the radios.

{%- unless product.has_only_default_variant -%}
{%- if picker_type == 'button' -%}
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
  {%- for option in product.options_with_values -%}
  <fieldset {% if option.name == option_name %} class="swatchComponent" style=" padding: 0;" {% else %} class="js product-form__input" style="border:none" {% endif %}>
    {% if option.name == option_name %}
    <legend class="form__label">{{ option.name }}:</legend>
    <div class="swatchContainer">
      {% assign values = option.values %}
      {%- for value in option.values -%}
      <input class="inputColor"
             name="{{ option.name }}"
             value="{{ value | escape }}"
             form="product-form-{{ section.id }}"
             type="radio"
             id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
             {% if option.selected_value == value %}checked{% endif %}>

      <label class="labelColor"
             for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
             data-color="{{value | downcase | replace: ' ', '-' }}"
             style="
                    {% case swatch_shape %}
                    {% when 'round' %} border-radius: 50%; aspect-ratio: 1;
                    {% when 'square' %} aspect-ratio: 1;
                    {% when 'rectangle' %} height: calc({{swatch_size}} / 2);
                    {% when 'round-edge' %} border-radius: 15%; aspect-ratio: 1;
                    {% if product.type contains 'Gift Cards' %}width: 65px; border-radius: 10%;{% endif %}
                    {% endcase %}">
      </label>
      <div class="infoColor" >
{{value | escape}}
      </div>
      {% endfor %}
    </div>
    {% else %}
    <legend class="form__label">{{ option.name }}</legend>
    {%- for value in option.values -%}
    <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
           name="{{ option.name }}"
           value="{{ value | escape }}"
           form="product-form-{{ section.id }}"
           {% if option.selected_value == value %}checked{% endif %}>
    <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}" {% if product.type contains 'Gift Cards' %}style="width: 75px; border-radius: 10%;"{% endif %}>
    {{ value }}
    </label>
    {%- endfor -%}
    {% endif %}
  </fieldset>
  {% endfor -%}
  <script type="application/json">
{{ product.variants | json }}
  </script>
</variant-radios>

Attached is what it looks like, Blue is displaying L but if you click L it’s sold out. So we want to cross out L and disable it. Please advise.

Thank you!
(https://i.stack.imgur.com/iBWvT.png)
(https://i.stack.imgur.com/LvMd3.png)

I have tried what chatGPT suggested.

{% for variant in product.variants %}
  {% if variant.available == false and variant.option1 == option.values[0] %}
    {% assign sold_out = true %}
  {% endif %}
{% endfor %}
{% if sold_out %}
  {% assign option_disabled = true %}
{% else %}
  {% assign option_disabled = false %}
{% endif %}

<select name="id">
{% for value in option.values %}
  {% if value == 'Default Title' %}
    <option value="{{ product.selected_or_first_available_variant.id }}" {% if option.selected == 'Default Title' %}selected{% endif %}>{{ value }}</option>
  {% else %}
    {% assign variant_id = '' %}
    {% for variant in product.variants %}
      {% if variant.option1 == value %}
        {% assign variant_id = variant.id %}
        {% break %}
      {% endif %}
    {% endfor %}
    {% if option_disabled and variant_id == '' %}
      {% continue %}
    {% endif %}
    <option value="{{ variant_id }}" {% if option.selected == value %}selected{% endif %} {% if variant_id == '' %}disabled{% endif %}>{{ value }}{% if variant_id == '' %} (Sold Out){% endif %}</option>
  {% endif %}
{% endfor %}
</select>

I’m getting a result where my input box is being static with old numbers when it’s overflown, newly typed nunmbers are not appearing at all. here is my code:

<!DOCTYPE html>
<html>
<body>

 <input type="text" id="output-area" placeholder="0"  oninput="responsiveFont()" style=" width: 225px;
    height: 80px;
    font-size: 40px;
    text-align: right;
    pointer-events: none;">
<br><br>
<button onclick="Addition('1')">1</button>
<button onclick="Addition('2')">2</button>
<button onclick="Addition('3')">3</button>
<br><br>
<button onclick="clearAll()" style="background: red; color: white;">AC</button>
<button class="symbol"  onclick="del()">del</button>

 <script>
 let output_area = document.getElementById('output-area');
 function Addition(newValue){
            output_area.value += newValue;
        }
        
    function clearAll(){
            output_area.value = "";
        }
    function del (){
            output_area.value = output_area.value.slice(0, -1);
        }     

</script> 

</body>
</html>

All i want is when the input box is being overflowed, take a line break then reduce the font size and display numbers in 2 lines and so on maybe max 3 lines. I have tried using this function:

  function responsiveFont (){
        output_area.addEventListener('input', () => {
    if (output_area.scrollWidth > output_area.clientWidth) {
    const fontSize = parseInt(window.getComputedStyle(output_area).fontSize);
    output_area.style.fontSize = `${fontSize - 10}px`;
  }
});

}

But it seems not working the way i want. but if i change the

pointer-events: none;

to

pointer-events: normal;

it works but only after deleting anything from the overflown input field manually.
Thanks in advance for helping.

I want to get the span text value of all the childNodes within the container of the corresponding input if the Select All checkbox is selected.

My current code picks up the ‘span’.text() reference of each input label, however it will only log the label selected (childNodes (e.g. ‘7211’) if selected singularly, or the label of the Select All checkbox (e.g. ‘Accommodation and Food Services’). What I want is to get the labels for all the childNodes if the Select All label is selected. It has to reference the corresponding childNodes of the specific selectAll checkbox as there are multiple Select All elements.

var htmlObject = layerControl.getContainer().querySelectorAll('input');
$(htmlObject).on("change", function(e) {
  if ($(this).is(':checked'))
  console.log($(this).siblings('span').text());
})

I can reference the Select All input, and if equals true, iterate through the childNodes and grab the element text references. Something like this:

var htmlObject = layerControl.getContainer().querySelectorAll('input');
$(htmlObject).on("change", function(e) {
  if ($(this).is(':checked'))
  console.log($(this).siblings('span').text());
  selAll= ($(this).is('.leaflet-control-layers-selector.leaflet-layerstree-sel-all-checkbox:checked'))
  if (selAll == true) 
  $(this).each(function () { 
    var sthisVal = (this.checked ? $(this).val() : "")
    console.log(sthisVal)
  })
})

However, the childNodes are outside of the input class so this logs the value of ‘on’ for the SelectAll input checkbox. I have to reference it’s container or parentElement to cycle through the childNodes. The variable output will then log the text label.

I am writing a code for performing calculation of a formula on the basis of some constants and some values to be fetched from the CSV file. I would appreciate if anyone can help me solving the issue of fetching the values from the csv file and substituing them in the formula with simple javascript.

function loadFile(o){

window.onload = () => {
    //FILE READER + HTML ELEMENTS
        var reader = new FileReader(),
        picker = document.getElementById("picker"),
        table  = document.getElementById("table");

    //READ CSV ON FILE PICKER
        picker.onchange = () => reader.readAsText(picker.files[0]);

    //READ THE CSV FILE & GENERATE HTML
        reader.onload = () =>   {
        let csv = reader.result;

    // CLEAR HTML TABLE
    table.innerHTML = "";

    //SPLIT INTO ROWS
     let rows = csv.split("rn");

    //LOOP THROUGH ROWS + SPLIT COLUMNS
     for(let row of rows){
        let cols = row.match(/(?:"([^"]*(?:""[^"]*)*)")|([^",]+)/g);
        if (cols != null){
            let tr= table.insertRow();
            for (let col of cols) {
                let td = tr.insertCell();
                td.innerHTML = col.replace(/(^"|"$)/g, "");
            }
        }
        else {
            console.log("Error parsing CSV");
        }
    }


    function calculateCSV()
        { 
          var getCSVData = document.getElementById("picker").files[0];
          var values = getCSVData.FileReader;
          rows = getCSVData.split("n");
          var html = '<table border="1">';
      
          rows.forEach((data, index) => 
          {
              var value = data.split(",");
              var x_1 = values[0];
              var x_2 = values[1];
              var x_3 = values[2];
              let a,b,c,d,p1, p2, p3, p4;
              const e=2.71828; 

             if ( x_1 && x_2 ){
                     a=5.8;
                     b=0.02;
                     c=(-7.9);
                     d=0;
                     p1= 1/(1+e^(-(a+b*x_1+c*x_2+d*x_3)));
                     document.getElementById("result1").innerHTML =p1;                        
             }
             else if( x_2 && x_3 ){
                     a=4.5;
                     b=1.0;
                     c=(-6.4);
                     d=(-6.8);
                     p2= 1/(1+e^(-(a+b*x_1+c*x_2+d*x_3))); 
                     document.getElementById("result2").innerHTML =p2;                        
  
             }
             else if( x_1 && x_3 ){
                     a=0.7;
                     b=2.2;
                     c=(-0.02);
                     d=(-6.8);
                     p3= 1/(1+e^(-(a+b*x_1+c*x_2+d*x_3)));
                     document.getElementById("result3").innerHTML =p3;                        
  
             }
             else if( x_1 && x_2 && x_3 ){ 
                     a=4.6;
                     b=0.96;
                     c=0.02;
                     d=(-6.8);
                     p4= 1/(1+e^(-(a+b*x_1+c*x_2+d*x_3)));
                     document.getElementById("result4").innerHTML =p4;                        
  
                 
             }
             html += '</table>'; 
             html += '<span>' + p1 + '</span>';
             html += '<span>' + p2 + '</span>';
             html += '<span>' + p3 + '</span>';
             html += '<span>' + p4 + '</span>';
             document.getElementById("data").innerHTML = html;
             document.getElementById("data").style.color="blue";
            });
        }
    
} 
}
};

I am trying this and I want the values in th erespective columns of the csv file to be fetched and substituted by x_1,x_2,x_3 and x_4

i’m building a laravel application following a tutorial but ran into this problem @vite([‘resources/css/app.css’, ‘resources/js/app.js’]) which i solved using this solution provider here (JetStream CSS and JS not working and showing @vite([‘resources/css/app.css’, ‘resources/js/app.js’])) but when i login, the user dashboard header is not found and i can’t see logout button nor profile page. I’m running laravel 8.

I’m new to laravel…..Please can someone help me out.

I am working on javascript, html and apps script and the Leaflet map, so how can I show a Leaflet map in a modal with the pin or marker centered, without going to a single corner as shown in the image, this only happens in a modal or in a secondary html, when it is the main html it is displayed correctly:

// Obtener la referencia al elemento del mapa
var mapa = L.map('mapa').setView([0, 0], 13);
mapa.doubleClickZoom.disable();
// Crear una capa de mapa con Leaflet
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
  maxZoom: 18,
}).addTo(mapa);

// Crear un marcador con una ubicación predeterminada
var marcador = L.marker([0, 0]).addTo(mapa);

// Obtener la ubicación del usuario utilizando la API de geolocalización del navegador
navigator.geolocation.getCurrentPosition(function(posicion) {
  // Actualizar la ubicación del marcador y el centro del mapa con la ubicación del usuario
  marcador.setLatLng([posicion.coords.latitude, posicion.coords.longitude]);
  mapa.setView([posicion.coords.latitude, posicion.coords.longitude], 18);
}, function(error) {
  // En caso de error, mostrar un mensaje de error en la consola del navegador
  console.error('Error al obtener la ubicación: ' + error.message);
});

// Agregar un controlador de eventos de clic al mapa
mapa.on('click', function(evento) {
  // Actualizar la ubicación del marcador y el centro del mapa con la ubicación del clic
  marcador.setLatLng(evento.latlng);
  mapa.setView(evento.latlng, 18);
});

HTML: <div id="mapa" style="height: 200px;"></div>