Category: javascript

I have a js script that acts on my view, creating a variable amount of inputs

inputArray.forEach(input => {
            let newRow = document.createElement('div');
            newRow.className = 'row';
            newRow.innerHTML = `
                <div class="col">
                    <div class="form-floating mb-3" id"">
                        <input 
                            type="text" 
                            class="form-control" 
                            name="${input}"
                            placeholder="Nome do campo"
                            value="${input}" 
                        />
                        <label for="${input}">Campo ${array_search($input, $inputArray)}</label>
                    </div>
                </div>
            `;
            document.getElementById('inputFields').appendChild(newRow);
        });

And this is my store method

$inputs = $request->all();

foreach ($inputs as $inputName => $inputValue) {
            $reg = new CustomTable();
            $reg->table_name = 'CustomTable';
            $reg->column_name = $inputValue->input('value');
            
            $reg->data_type = 'VARCHAR(255)'; // Set data type as VARCHAR(255)
            $reg->user_id = session('userId');
            $reg->save();
        }

Im having difficulty having it so that 1:It iterates through every input and 2: it is currently saving into the database as a string of random numbers and letters, so its probably not converting back to its original format.
Im not super familiar with working with Laravel requests so if someone could help me with the syntax id appreciate it

This concept probably wouldn’t confuse me except that two things have the same name and seem to do completely different things. There is the array method aka Array.map() which is basically (I know this is an over simplification) a fancy iterator. I can easily do anything I would with map or filter with a for…loop, it would generally just take more lines of code.

Whereas a Map is similar to a Set. I think Map is more for objects, and it comes with its own crud operations. For that matter, I have no idea why you would choose a Map over a Set and vice versa.

I would love to hear your creative ways of keeping these concepts straight in your own mind. Especially if you created analogies to remember it for yourself, though technical explanations are welcome too!

Thank you!

PS:

I did start by reading MDN on Maps and Array.prototype.map(). I just need more creative ways of thinking about it for it to stick.

Have have been working in JavaScript for a few years and just started learning python… Is a JS Map more like a Python dictionary than an object? I was thinking a dictionary is an object as I have been learning but maybe it is really a Map. I wish JS had chosen different names.

When I move around jsx files, the import of this jsx files get updated where they are called. However, when I move around my jgp/svg/png files in my assets folder, their imports do not get updated. How can I fix this issue?

I have set javascript.updateImportsOnFileMove.enabled and typescript.updateImportsOnFileMove.enabled to always, and even added a js config file as below and the issue persists.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2016",
    "jsx": "preserve"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

I have a React page that uses an iframe to show a map with various points marked on it.

The map uses various external scripts, so I’ve created it inside an iframe that points to an index.html file inside the public folder of my React project.

 <MapWrapper>
    <iframe
      src="/map/index.html"
      title="map"
      style={{
        height: '100vh',
        width: '100vw',
        border: 'none',
      }}
    />
  </MapWrapper>

When I navigate to the map page inside the app, the relevant React Route works as expected, and I can view the map inside one of my app’s pages. (e.g. localhost:3000/map).

If I reload this page, instead of seeing the map render as part of the page, I just get the map. There is a trailing slash added to the path (e.g. localhost:3000/map/), so I’m assuming the index.html page is just being rendered as-is.

How do I keep the map inside its React page on reload?

This is a local page that runs on an Android tablet.
That tablet will be not connected to any network, so everything needs to stay in the device storage.

HTML code:

    <div class="container">
        <div class="half" id="ListaCanzoni">
            <p class="song-name" id="1">Titolo 1</p>
            <p class="song-name" id="2">Titolo 2</p>
            <p class="song-name" id="3">Titolo 3</p>
            <p class="song-name" id="4">Titolo 4</p>
            <p class="song-name" id="5">Titolo 5</p>
            <p class="song-name" id="6">Titolo 6</p>
            <p class="song-name" id="7">Titolo 7</p>
            <p class="song-name" id="8">Titolo 8</p>
            <p class="song-name" id="9">Titolo 9</p>
            <p class="song-name" id="10">Titolo 10</p>
            <p class="song-name" id="11">Titolo 11</p>
            <p class="song-name" id="12">Titolo 12</p>
            <p class="song-name" id="13">Titolo 13</p>
            <p class="song-name" id="14">Titolo 14</p>
            <p class="song-name" id="15">Titolo 15</p>
            <p class="song-name" id="16">Titolo 16</p>
            <p class="song-name" id="17">Titolo 17</p>
            <p class="song-name" id="18">Titolo 18</p>
            <p class="song-name" id="19">Titolo 19</p>
        </div>
        <div class="rendering-target half" id="song"></div>
    </div>

CSS code:

body  {
    overflow: hidden;
  background-color: #002;
}

* {
  margin: 0;
  padding: 0;
}

.container
{
    display: flex;
    overflow: hidden;
}
.half
{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;

    display: flex;
    flex-direction: column;
}
.song-name {
    font-weight: bold;
    font-size: 2em;
    line-height: 2em;
    padding-top: 5px;
    padding-bottom: 5px;

    letter-spacing: -0.5px;
    padding: 0px 36px 0px 16px;
    border-radius: 6px;
    margin-bottom: 5px;
    background-color: #fff;
    color: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(0, 0, 0, 0.2);
    user-select: none;
}

#ListaCanzoni {
  background-color: #024;
    overflow-y: scroll;
  scrollbar-width: none;
}
#ListaCanzoni::-webkit-scrollbar {
  display: none;
}


.title {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 3em;
  color: #0FF;
  background-color: #042;
}

javascript code:

const songDiv = document.getElementById('song');
const item = document.querySelectorAll(".song-name");
item.forEach(function (el) {
  el.onclick = function () {
    songDiv.innerHTML = '<div class="title">' + this.id + '</div>';
    console.log (this.id);
    console.log (songDiv.innerHTML);
  }
});

The page is also in this JSFiddle .

The left half contains a list of clickable buttons (divs) and i’d like to hide any scrollbar but let the user be able to scroll it with the usual “drag” action on the touch screen.

How could i allow this action without generating clicks?

I’d like a solution which does not requires any additional js libraries/plugins, but if not possible at least one which requires the minimum possible.

I’m using a magazine-style swiper.js slider which (after the title page) displays images in pairs, corresponding to the left/right magazine spread pages.

The images in each slide are centered by default, so as you widen the browser, the slider widens, and so does each slide (the blue border in the example) and instead of respecting swiper’s spaceBetween setting, the pages get forced further apart, which is undesirable.

While the responsive behaviour is fine overall, I’d like the left page to be justified right in the slide, and the right page to be justified left, so as the slider, and the slides widen, the pages will still stay together.

So far, I’ve yet to find a way to achieve this, so some help would be much appreciated!

Here’s a one-page html example:

<!doctype html>
<html>

<head>

  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>


  <script language="javascript">
    <!--
    $("document").ready(function() {

      const swiper = new Swiper('.swiper', {
        // Optional parameters
        direction: 'horizontal',
        loop: false,

        zoom: {
          maxRatio: 2,
        },

        speed: 400,
        spaceBetween: 10,

        mousewheel: {
          invert: true,
        },

        slidesPerView: 1,
        centeredSlides: false,
        slidesPerGroupSkip: 1,
        grabCursor: true,
        keyboard: {
          enabled: true,
        },
        breakpoints: {
          850: {
            slidesPerView: 2,
            slidesPerGroup: 2,
          },
        },

        // Navigation arrows
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

      });


    });
    // -->
  </script>

  <style>
    .swiper {
      height: 600px;
    }
    
    .swiper-slide {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding-top: 20px;
      padding-bottom: 30px;
      width: 50%;
      /* Set the width of each slide to 50% to display two slides side by side */
      border: 1px solid blue;
    }
    
    .swiper-slide img {
      display: block;
      border-radius: 6px;
    }
  </style>

</head>

<body>

  <!-- Slider main container -->
  <div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">
        <div class="swiper-zoom-container"><img src='image' class='img-fluid'></div>
        <p>first page</p>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container"><img src='image' class='img-fluid'></div>
        <p>some caption</p>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container"><img src='image' class='img-fluid'></div>
        <p>different caption</p>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container"><img src='image' class='img-fluid'></div>
        <p>caption</p>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container"><img src='image' class='img-fluid'></div>
        <p>blah</p>
      </div>
    </div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

  </div>

</body>

</html>

So run the example, scroll right to page 2&3 and note the images are centered in each blue bordered slide. Make the browser wider, and you’ll see the slider gets wider, and the images stay centered – forcing them apart. I’d like them to stay together as the browser widens.

Thanks!

I found many references to my question but, I just can’t wrap my head around it. I just want to click the state and open that states specific popup.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    #us-map {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  path:hover,
  circle:hover {
    stroke: #ffffff !important;
    stroke-width: 2px;
    stroke-linejoin: round;
    fill: #D3D3D3 !important;
    cursor: pointer;
  }
  
  #path67 {
    fill: none !important;
    stroke: #A9A9A9 !important;
    cursor: default;
  }
  
  #info-box {
    display: none;
    position: fixed;
    z-index: 500;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    .popup {
      position: fixed;
      background-color: #ffffff;
      width: 400px;
      height: auto;
      margin: 0 auto;
      padding: 25px;
      border: solid 1px #f2f2f2;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .close-popup {
      position: absolute;
      bottom: 0px;
      right: 0px;
      font-size: 18px;
      background-color: #4bb95a;
      padding: 10px 20px;
      color: #ffffff;
      text-transform: uppercase;
      border: 2px solid #ffffff;
      transition: 0.3s;
    }
    .close-popup:hover {
      background-color: #ffffff;
      color: #4bb95a;
      opacity: 1;
      border: 2px solid #4bb95a;
    }
</style>
<div id="info-box" class="close"></div>

<div id="hawaii" class="popup">
  <div class="state-title">Hawaii</div>
  <div class="mp-sub-title">Content</div>
  <span class="close-popup">Close</span></div>

<div id="alaska" class="popup">
  <div class="state-title">Alaska</div>
  <div class="mp-sub-title">Content</div>
  <span class="close-popup">Close</span></div>

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="us-map" preserveAspectRatio="xMinYMin meet" sodipodi:docname="Republican_Party_presidential_primaries_results,_2016.svg"
  inkscape:version="0.91 r13725" x="0px" y="0px" width="959px" height="593px" viewBox="174 100 959 593" enable-background="new 174 100 959 593" xml:space="preserve">
      <sodipodi:namedview bordercolor="#666666" objecttolerance="10" pagecolor="#ffffff" borderopacity="1" gridtolerance="10" guidetolerance="10" inkscape:cx="509.19152" inkscape:cy="282.2353" inkscape:zoom="1.2137643" showgrid="false" id="namedview71" inkscape:current-layer="g5" inkscape:window-maximized="1" inkscape:window-y="-8" inkscape:window-x="-8" inkscape:pageopacity="0" inkscape:window-height="1017" inkscape:window-width="1920" inkscape:pageshadow="2"> </sodipodi:namedview>
      <g id="g5">
        <path id="HI" fill="#4bb95a" d="M407.1,619.3l1.9-3.6l2.3-0.3l0.3,0.8l-2.1,3.1H407.1z M417.3,615.6l6.1,2.6l2.1-0.3l1.6-3.9   l-0.6-3.4l-4.2-0.5l-4,1.8L417.3,615.6z M448,625.6l3.7,5.5l2.4-0.3l1.1-0.5l1.5,1.3l3.7-0.2l1-1.5l-2.9-1.8l-1.9-3.7l-2.1-3.6   l-5.8,2.9L448,625.6z M468.2,634.5l1.3-1.9l4.7,1l0.6-0.5l6.1,0.6l-0.3,1.3l-2.6,1.5l-4.4-0.3L468.2,634.5z M473.5,639.7l1.9,3.9   l3.1-1.1l0.3-1.6l-1.6-2.1l-3.7-0.3V639.7z M480.5,638.5l2.3-2.9l4.7,2.4l4.4,1.1l4.4,2.7v1.9l-3.6,1.8l-4.8,1l-2.4-1.5   L480.5,638.5z M497.1,654.1l1.6-1.3l3.4,1.6l7.6,3.6l3.4,2.1l1.6,2.4l1.9,4.4l4,2.6l-0.3,1.3l-3.9,3.2l-4.2,1.5l-1.5-0.6l-3.1,1.8   l-2.4,3.2l-2.3,2.9l-1.8-0.2l-3.6-2.6l-0.3-4.5l0.6-2.4l-1.6-5.7l-2.1-1.8l-0.2-2.6l2.3-1l2.1-3.1l0.5-1l-1.6-1.8L497.1,654.1z"/>
        <path id="AK" fill="#4bb95a" d="M332.1,553.7l-0.3,85.4l1.6,1l3.1,0.2l1.5-1.1h2.6l0.2,2.9l7,6.8l0.5,2.6l3.4-1.9l0.6-0.2l0.3-3.1   l1.5-1.6l1.1-0.2l1.9-1.5l3.1,2.1l0.6,2.9l1.9,1.1l1.1,2.4l3.9,1.8l3.4,6l2.7,3.9l2.3,2.7l1.5,3.7l5,1.8l5.2,2.1l1,4.4l0.5,3.1   l-1,3.4l-1.8,2.3l-1.6-0.8l-1.5-3.1l-2.7-1.5l-1.8-1.1l-0.8,0.8l1.5,2.7l0.2,3.7l-1.1,0.5l-1.9-1.9l-2.1-1.3l0.5,1.6l1.3,1.8   l-0.8,0.8c0,0-0.8-0.3-1.3-1c-0.5-0.6-2.1-3.4-2.1-3.4l-1-2.3c0,0-0.3,1.3-1,1c-0.6-0.3-1.3-1.5-1.3-1.5l1.8-1.9l-1.5-1.5v-5h-0.8   l-0.8,3.4l-1.1,0.5l-1-3.7l-0.6-3.7l-0.8-0.5l0.3,5.7v1.1l-1.5-1.3l-3.6-6l-2.1-0.5l-0.6-3.7l-1.6-2.9l-1.6-1.1v-2.3l2.1-1.3   l-0.5-0.3l-2.6,0.6l-3.4-2.4l-2.6-2.9l-4.8-2.6l-4-2.6l1.3-3.2v-1.6l-1.8,1.6l-2.9,1.1l-3.7-1.1l-5.7-2.4h-5.5l-0.6,0.5l-6.5-3.9   l-2.1-0.3l-2.7-5.8l-3.6,0.3l-3.6,1.5l0.5,4.5l1.1-2.9l1,0.3l-1.5,4.4l3.2-2.7l0.6,1.6l-3.9,4.4l-1.3-0.3l-0.5-1.9l-1.3-0.8   l-1.3,1.1l-2.7-1.8l-3.1,2.1l-1.8,2.1l-3.4,2.1l-4.7-0.2l-0.5-2.1l3.7-0.6v-1.3l-2.3-0.6l1-2.4l2.3-3.9v-1.8l0.2-0.8l4.4-2.3l1,1.3   h2.7l-1.3-2.6l-3.7-0.3l-5,2.7l-2.4,3.4l-1.8,2.6l-1.1,2.3l-4.2,1.5l-3.1,2.6l-0.3,1.6l2.3,1l0.8,2.1l-2.7,3.2l-6.5,4.2l-7.8,4.2   l-2.1,1.1l-5.3,1.1l-5.3,2.3l1.8,1.3l-1.5,1.5l-0.5,1.1l-2.7-1l-3.2,0.2l-0.8,2.3h-1l0.3-2.4l-3.6,1.3l-2.9,1l-3.4-1.3l-2.9,1.9   h-3.2l-2.1,1.3l-1.6,0.8l-2.1-0.3l-2.6-1.1l-2.3,0.6l-1,1l-1.6-1.1v-1.9l3.1-1.3l6.3,0.6l4.4-1.6l2.1-2.1l2.9-0.6l1.8-0.8l2.7,0.2   l1.6,1.3l1-0.3l2.3-2.7l3.1-1l3.4-0.6l1.3-0.3l0.6,0.5h0.8l1.3-3.7l4-1.5l1.9-3.7l2.3-4.5l1.6-1.5l0.3-2.6l-1.6,1.3l-3.4,0.6   l-0.6-2.4l-1.3-0.3l-1,1l-0.2,2.9l-1.5-0.2l-1.5-5.8l-1.3,1.3l-1.1-0.5l-0.3-1.9l-4,0.2l-2.1,1.1l-2.6-0.3l1.5-1.5l0.5-2.6   l-0.6-1.9l1.5-1l1.3-0.2l-0.6-1.8v-4.4l-1-1l-0.8,1.5h-6.1l-1.5-1.3l-0.6-3.9l-2.1-3.6v-1l2.1-0.8l0.2-2.1l1.1-1.1l-0.8-0.5   l-1.3,0.5l-1.1-2.7l1-5l4.5-3.2l2.6-1.6l1.9-3.7l2.7-1.3l2.6,1.1l0.3,2.4l2.4-0.3l3.2-2.4l1.6,0.6l1,0.6h1.6l2.3-1.3l0.8-4.4   c0,0,0.3-2.9,1-3.4c0.6-0.5,1-1,1-1l-1.1-1.9l-2.6,0.8l-3.2,0.8l-1.9-0.5l-3.6-1.8l-5-0.2l-3.6-3.7l0.5-3.9l0.6-2.4l-2.1-1.8   l-1.9-3.7l0.5-0.8l6.8-0.5h2.1l1,1h0.6l-0.2-1.6l3.9-0.6l2.6,0.3l1.5,1.1l-1.5,2.1l-0.5,1.5l2.7,1.6l5,1.8l1.8-1l-2.3-4.4l-1-3.2   l1-0.8l-3.4-1.9l-0.5-1.1l0.5-1.6l-0.8-3.9l-2.9-4.7l-2.4-4.2l2.9-1.9h3.2l1.8,0.6l4.2-0.2l3.7-3.6l1.1-3.1l3.7-2.4l1.6,1l2.7-0.6   l3.7-2.1l1.1-0.2l1,0.8l4.5-0.2l2.7-3.1h1.1l3.6,2.4l1.9,2.1l-0.5,1.1l0.6,1.1l1.6-1.6l3.9,0.3l0.3,3.7l1.9,1.5l7.1,0.6l6.3,4.2   l1.5-1l5.2,2.6l2.1-0.6l1.9-0.8l4.8,1.9L332.1,553.7z M217,582.6l2.1,5.3l-0.2,1l-2.9-0.3l-1.8-4l-1.8-1.5H210l-0.2-2.6l1.8-2.4   l1.1,2.4l1.5,1.5L217,582.6z M214.4,616.1l3.7,0.8l3.7,1l0.8,1l-1.6,3.7l-3.1-0.2l-3.4-3.6L214.4,616.1z M193.7,602l1.1,2.6   l1.1,1.6l-1.1,0.8l-2.1-3.1V602H193.7z M180,675.1l3.4-2.3l3.4-1l2.6,0.3l0.5,1.6l1.9,0.5l1.9-1.9l-0.3-1.6l2.7-0.6l2.9,2.6   l-1.1,1.8l-4.4,1.1l-2.7-0.5l-3.7-1.1l-4.4,1.5l-1.6,0.3L180,675.1z M228.9,670.6l1.6,1.9l2.1-1.6l-1.5-1.3L228.9,670.6z    M231.8,673.6l1.1-2.3l2.1,0.3l-0.8,1.9H231.8z M255.4,671.7l1.5,1.8l1-1.1l-0.8-1.9L255.4,671.7z M264.2,659.2l1.1,5.8l2.9,0.8   l5-2.9l4.4-2.6l-1.6-2.4l0.5-2.4l-2.1,1.3l-2.9-0.8l1.6-1.1l1.9,0.8l3.9-1.8l0.5-1.5l-2.4-0.8l0.8-1.9l-2.7,1.9l-4.7,3.6l-4.8,2.9   L264.2,659.2z M306.5,639.4l2.4-1.5l-1-1.8l-1.8,1L306.5,639.4z"/>
        <g id="DC">
          <path id="path58" fill="#D3D3D3" d="M975.8,353.8l-1.1-1.6l-1-0.8l1.1-1.6l2.2,1.5L975.8,353.8z"/>
          <circle id="circle60" data-info="<div>Washington DC</div>" fill="#D3D3D3" stroke="#FFFFFF" stroke-width="1.5" cx="975.3" cy="351.8" r="5"/>
        </g>
      </g>
      <path id="path67" fill="none" stroke="#A9A9A9" stroke-width="2" d="M385,593v55l36,45 M174,525h144l67,68h86l53,54v46"/>
    </svg>

<script>
  $("path, circle").on('click', function(e) {
    $('#info-box').css('display', 'block');
    $('#info-box').html($(this).data('info'));
    $(".close").click(function() {
      $('#info-box').hide();
    });
    $(".close-popup").click(function() {
      $('#info-box').hide();
    });

  });
</script>

Maybe, the following is where I need to be?

 $(`#info-box${$('.popup').index(this) + 1}`).addClass('visible');

var id = $(this).data('id');
   ('#'+id).popup('toggle');

Thank you, again.

I’m trying to implement a burger menu triggering a side bar when on mobile in my Angular project. However, despite being displayed the menu icon doesn’t trigger the side bar when I click on it. The side bar is well instanced but doesn’t translate on screen when I click on the burger menu icon. I followed the instructions given by the Materialize-Css website>

Here is my code:

HTML:

  <nav>

    <div class="nav-wrapper">
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>

      <ul id="nav-mobile" class="hide-on-med-and-down">
        <li class="center-align social"><a href="https://www.instagram.com/prunieres_hotel_restaurant/"><i class="fa-brands fa-instagram fa-xl"></i></a></li>
        <li class="center-align"><a routerLink="">Accueil</a></li>
        <li class="center-align"><a routerLink="/hotel">Hôtel</a></li>
        <li class="center-align"><a routerLink="/restaurant">Restaurant</a></li>
        <li class="center-align"><a routerLink="/histoire"> Histoire</a></li>
        <li class="center-align"><a routerLink="/region">La Région</a></li>
        <li class="center-align"><a routerLink="/contact">Contact</a></li>
        <li class="center-align social"><a><i class="fa-brands fa-instagram invisible fa-xl"></i></a></li>
      </ul>

    </div>

  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li class="social"><a href="https://www.instagram.com/prunieres_hotel_restaurant/"><i class="fa-brands fa-instagram fa-xl"></i></a></li>
    <li><a routerLink="">Accueil</a></li>
    <li><a routerLink="/hotel">Hôtel</a></li>
    <li><a routerLink="/restaurant">Restaurant</a></li>
    <li><a routerLink="/histoire"> Histoire</a></li>
    <li><a routerLink="/region">La Région</a></li>
    <li><a routerLink="/contact">Contact</a></li>
  </ul>

Javascript:

import { Component, OnInit } from '@angular/core';

declare const M: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

export class AppComponent implements OnInit{

  ngOnInit() {
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems, {});
    });
  }
}

I checked my installation of materialise and it doesn’t seems to be the problem, I don’t get any error from javascript but the

var instances = M.Sidenav.init(elems, {});

tell me that ‘instances’ is declared but never used.

Why does adding options={{ headerShown: false }} makes all the layout overlap the android toolbar. This error after implementing the Tabs Menu.

.app_layout.jsx

import {Stack} from "expo-router";

const StackLayout = () => {
    return (
        <Stack>
            <Stack.Screen
                name="(tabs)"
                options={{
                    headerShown: false,
                }}
            />
        </Stack>
    );
};

export default StackLayout;

app(tabs)_layout.jsx

import { Tabs } from "expo-router";

export default () => {
  return (
    <Tabs>
       <Tabs.Screen name="home" options={{ headerShown: false }} />
    </Tabs>
  );
};

And app(tabs)home.jsx – This is the page that after adding the Tab Navigation floats outside the safeareaview

import {SafeAreaView, ScrollView, View} from "react-native";

// Configs
import {COLORS, SIZES} from "../../constants/theme";

// Components
import Welcome from "../../components/Welcome/Welcome";
import CardMenu from "../../components/CardMenu/CardMenu";
import EncomendasList from "../../components/EncomendasList/EncomendasList";

// Define Home component
const Home = () => {
    return (
        <SafeAreaView style={{flex: 1, backgroundColor: COLORS.pureWhite}}>
            <ScrollView showsVerticalScrollIndicator={false}>
                <View
                    style={{
                        flex: 1,
                        padding: SIZES.medium,
                    }}
                >
                    <Welcome/>
                </View>
                <View
                    style={{
                        flex: 1,
                        padding: 0,
                    }}
                >
                    <CardMenu/>
                </View>
                <View
                    style={{
                        flex: 1,
                        padding: SIZES.medium,
                    }}
                >
                    <EncomendasList/>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

// Export Home component
export default Home;```


The content remaing inside the `safeareaview`

I am making a register site using sveltekit and supabase until now i have been able to successfully save a user to the database but now i also want to save a displayname and a phone number into the supabase authentication table:
These are the authentication table columns
this is what i tried up until now but it hasnt worked:

const { data: signUpData, error } = await supabase.auth.signUp({
      email: email,
      password: password,
      phone: phonenumber,
      displayname: username,


      options: {
        // data: { username: username },
        emailRedirectTo: `${url.origin}/auth/callback`
      }
    });
    

When I try

cy.get('div.userId')

I want to add condition div.userId is exists/not in dom.

I am expecting not to fail test before checking existence of element in dom.

Like sometimes div.userId is not visible and cy.get(div.userId) fails but we ma need to click another element to make it visible. simple wanna use if-else statement upon this…

I have installed the latest version of @tanstack/react-query and @tanstack/react-query-devtools but when try to import ReactQueryDevtools from @tanstack/react-query-devtools, it gives the above error

Here is my package.json file

{
  "name": "intermediate-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@tanstack/react-query": "^5.32.1",
    "@tanstack/react-query-devtools": "^5.32.1",
    "axios": "^1.6.8",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "cross-env": "^7.0.3",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

Here is my main.tsx file

import React from "react";
import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import theme from "./theme.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      <App />
      <ReactQueryDevtools />
    </ChakraProvider>
  </React.StrictMode>
);

I have tried to install the previous version of react-query-devtools but the problem persist

I have created my own Mapbox style using the Mapbox Studio.

This GL JS map itself is imported in the code like this:

let selectedStyle = "mapbox://styles/abc/def";

map = new mapboxgl.Map({
    container: 'map',
    center: [parseFloat(lonInput), parseFloat(latInput)],
    zoom: parseFloat(zoomInput),
    pitch: 0,
    style: selectedStyle,
    preserveDrawingBuffer: true,
    fadeDuration: 0,
    attributionControl: false,
    zoomControl: false
});

I have added an input checkbox that should make it possible for the visitors to toggle the display of the labels on the map. Based on their choice all the names of the cities, streets, POIs, … should or should not be shown on the map.

After some research, I have found this page on the documentation of Mapbox: https://docs.mapbox.com/mapbox-gl-js/guides/styles/#mapbox-standard-1

I think it should be possible to toggle the display of the labels with the following code:

map.on('style.load', () => {
  map.setConfigProperty('basemap', 'showPlaceLabels', false);
});

But I am not sure what the baseMap refers to. It seems like I do not have it in my application. What should it be?

Or is there another way to do this?

I am implementing a cli tool using bun. I have to collect inputs from user during runtime and I specifically need only one line from stdin. This is what I have implemented so far by referring the docs:

async function getInput() {
  for await (const input of console) {
    return input;
  }
}

async function liveTest() {
  /* some code here */
  console.log("input1:");
  await getInput();
  /* some code here */
  console.log("input2:");
  await getInput();
  /* some code here */
}

liveTest();

I am running it using bun file.js command. I am observing a problem where the input2 is not actually being collected. It just directly moves to the remaining code.

Can someone explain why and provide a fix/workaround?

My Arithmetic Expression Compiler, if run in a modern browser, can target both FlatAssembler and GNU Assembler. GNU Assembler doesn’t support converting floating-point numbers to IEEE754 hexadecimal strings, so my compiler does that for it using this function:

        getIEEE754 = function (decimalNumber) {
          var floatArray = new Float32Array([decimalNumber]);
          var buffer = floatArray.buffer;
          var intArray = new Int32Array(buffer);
          return (
            (highlight ? '<span style="color:#007700">' : "") +
            "0x" +
            intArray[0].toString(16) +
            (highlight ? "</span>" : "")
          );
        };

However, as Internet Explorer 6 doesn’t support Float32Array and Int32Array, that function doesn’t work in it. As such, when run in Internet Explorer 6, my web-app can only target FlatAssembler, which supports converting floating-point numbers to IEEE754 strings.

So, how can I make my web-app able to target GNU Assembler if it is being run in Internet Explorer 6?