Category: javascript

i am trying to use a countback from a certain date, and want it to read something like (100d, 10hrs, 10sec). the countback does this fine, except it reads as (-100d, -10hrs, -10sec). is there a way to make the JS display the numbers as positive or to use a second script or css to hide the – symbol?
i am new to JS and tried to mess with the new Date().getTime()and var distance = countDownDate - now;to no avail. thank you

var countDownDate = new Date("Apr 1, 2025 20:00:00").getTime();

var x = setInterval(function() {


  var now = new Date().getTime();

  var distance = countDownDate - now;


  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);


  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";


}, 1000);

<p id="demo"></p>

My for loop isn`t looping like it should – or there might be something that I am not yet aware of. I want to access all children inside every parent div.

const parents = document.getElementsByClassName("parent");

for (let i = 0; i < parents.length; i++) {

  const parentEach=parents[i];
  
  parentEach.firstElementChild.classList.add("first");
  parentEach.firstElementChild.nextElementSibling.classList.add("second");
  parentEach.lastElementChild.classList.add("last");
  parentEach.lastElementChild.previousElementSibling.classList.add("penultimate");
  
}

<div class="parent">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="parent">
  <div></div>
  <div></div>
  <div></div>
</div>

In my current project the code works for the first div.parent only, and then it starts to ignore the further divs. What am I missing here?

I am making a fairly basic Discord bot for my server, its mainly just random responses and some user interaction. I’ve figured out how to send random messages through a command but I don’t know where to start with adding user interaction.

I am looking to allow a user to perform an action using a slash command plus mentioning the user, for example /hug @dean or something like that, and then have it mention the user and have a little message in an embed that can preferably be random if possible.

This is the gist of what I have so far but its not much and certainly doesn’t work, most of what ive tried either doesn’t get a response or gives me an error for an invalid string format, probably with the user thing but I can’t figure out how to do it properly and the documentation doesn’t seem to tell me how or I’m misunderstanding it.

const { SlashCommandBuilder, EmbedBuilder } = require('discord.js');

module.exports = {
    data: new SlashCommandBuilder()
    .setName("Hug")
    .setDescription ('Give a friend a hug!'),
    async execute(interaction) {
        const embed = new EmbedBuilder()
            .setTitle("ProtoOwner throws a stick!")
            .setColor(0x0099ff)
            .addFields([
                { name: "[{User} hugs {user}!]", value: reply[randomNum] }
            ]);
        await interaction.reply({ embeds:  });
    }
}

I have tried a few different ways but still can’t manage to get anything to work, if there is a better way to do this rather than using a slash command I’m open to suggestions.

Let’s say there is an entity Device, which can be linked to some UserGroups (many-to-many). The task is to write a method which would return list of Devices either linked or not linked to a certain UserGroup (based on boolean parameter). It seems logical to use none for one case and some for another. That’s just for context, no questions here (The question follows below).

A working example for not linked devices looks like this:

const result = await prisma.device.findMany({
where { 
  user_groups: {
    none: {
      user_group_id: {
        equals: userGroupId
      }
    }
  }
}
});

But I’d like to adjust a part of Prisma query to something like this, assuming that linked is a boolean variable:

(linked ? some : none) : {
  user_group_id: {
    equals: userGroupId
  }
}

But this syntax doesn’t seem to be correct. I use Prisma 5.x, in case the version matters.

Question: Is there a way to write it properly, with ternary operator inside Prisma query?

I’ve got a problem on my website, I’m using a form to get a file from a user, and if the file is of a certain type, it gets converted to a mp4 using exec with ffmpeg. However when the conversion takes too long to complete the request doesn’t get any response (even tho it does complete in the background)

Here’s my function which contains the request :

uploadForm.onsubmit = event => {
            event.preventDefault();
            let formdata = new FormData(uploadForm);
            let  request = new XMLHttpRequest();
            request.open('POST', uploadForm.action);
            request.upload.addEventListener('progress', function(e) {
                var fileSize = formFile.files[0].size;
                if (e.loaded <= fileSize) {
                    var percent = Math.round(e.loaded / fileSize * 100);
                    progressbar.style.width = percent + '%';
                    progressbar.innerHTML = percent + '%';
                } 

                if(e.loaded == e.total){
                    progressbar.style.width = '100%';
                    progressbar.innerHTML = '100%';
                    conversionSpin.classList.remove("d-none");
                }
            });
            request.onreadystatechange = function() {
                if (request.readyState === 4){
                    console.log("readystate 4 atteint");
                    console.log(request.status);
                }
            }
            request.onload = function(){
                document.body.innerHTML = request.response;
            }
            request.send(formdata);
        };

And here’s the piece of php that handles the request :

$newname = pathinfo($filename, PATHINFO_FILENAME) . ".mp4";
        $sql = "INSERT INTO videos (name, category, title, mail, comments, ipuser)
        VALUES ('$newname', '$category', '$title', '$mail', '$comments', '$ipuser')";
        
        try {
            $conn->query($sql);
            echo "<div class='alert alert-success' role='alert'>Nouvel enregistrement dans la base de donnée réussi </div><br>";
          } catch (Exception $e){
            if (substr($e->getMessage(),0,9) == "Duplicate") {
              die("<div class='alert alert-danger' role='alert'>Erreur: Ce nom de fichier existe déjà dans nos archives. Si vous êtes sûr que nous ne disposons pas déjà de ce fichier, merci de le renommer puis de réessayer.</div><br>");
            } else {
              die("<div class='alert alert-danger' role='alert'>Erreur: " . $e->getMessage(). "<br>Contactez l'administrateur</div><br>");
            }
          }

          $moved = move_uploaded_file($_FILES['formFile']['tmp_name'], "../assets/videos/check/$filename");
          $error = $_FILES['formFile']['error'];
          
          if( $moved ) {
              echo "<div class='alert alert-success' role='alert'>Envoi réussi</div></br>";         
            } else {
              echo "<div class='alert alert-danger' role='alert'>Envoi échoué, veuillez contacter l'administrateur et lui donner le code d'erreur suivant : # $error </div><br>";
            }

        exec('ffmpeg -i "../assets/videos/check/' . $filename . '" "../assets/videos/check/' . $newname . '" && rm "../assets/videos/check/' . $filename . '"');

The whole process is working as intended but when the ffmpeg conversion takes too long the request gets no response, does not trigger onload function and gets a readyState of 4 with a status code of 0. The conversion and the removal of the original file does work tho.

If anyone has any insight on how to solve this issue that’d be greatly appreciated.

I haven’t tried much, I tried looking on the internet for an answer but this seems to be a first, I tried moving the loading of the new body innerHtml into the onload function as can be seen in my code, which does not get called at all when the problem is happening. I tried with several files (several AVIs and MPGs) they all work fine except a really big MPG which conversion takes very long to complete, thus causing the issue I’m facing.

I’m working on a chat interface that supports uploading and rendering audio messages using WaveSurfer.js. To handle multiple audio attachments, I created a reusable function renderWaveform(uniqueId, url) that initializes the waveform player for each uploaded audio file.

Each uploaded audio message has its own container with:

A play/pause button

A WaveSurfer waveform

A timestamp

When I call renderWaveform(uniqueId, url) after inserting the audio HTML dynamically:

The waveform renders correctly.

The audio plays, but the time display (audioprocess) sometimes shows incorrect or delayed updates.

The finish event occasionally doesn’t reset the play button or display the correct final duration.

Also, when multiple audio files are uploaded, sometimes the waveform doesn’t render or conflicts appear.

Delayed waveform rendering using setTimeout().

Ensured each container has a unique ID (waveform${uniqueId}).

Used wavesurfer.on(‘ready’), on(‘audioprocess’), and on(‘finish’) properly.

Verified the DOM is ready before initializing WaveSurfer.

Ensuring each audio waveform renders and updates its time correctly.

Fixing audioprocess to reliably show the current playback time.

Making sure finish resets the UI state (button + time) for each audio message.

function renderWaveform(uniqueId, url) {
    const wavesurfer = WaveSurfer.create({
        container: `#waveform${uniqueId}`,
        waveColor: "#ccc",
        progressColor: "#4CAF50",
        barWidth: 2,
        height: 30,
        responsive: true,
    });

    wavesurfer.load(url);

    wavesurfer.on("ready", () => {
        document.getElementById(`text${uniqueId}`).textContent = formatTime(wavesurfer.getDuration());
    });

    wavesurfer.on("audioprocess", (currentTime) => {
        document.getElementById(`text${uniqueId}`).textContent = formatTime(currentTime);
    });

    wavesurfer.on("finish", () => {
        document.getElementById(`text${uniqueId}`).textContent = formatTime(wavesurfer.getDuration());
        document.getElementById(`playPause${uniqueId}`).classList.remove("playing");
    });

    document.getElementById(`playPause${uniqueId}`).addEventListener("click", () => {
        wavesurfer.playPause();
    });
}

    // send Audio File
function appendAudioFile (uniqueId,audioUrl)  {
    let time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    const now = new Date();
    // let uniqueId = 'id-'
    //     + now.getFullYear()
    //     + (now.getMonth() + 1).toString().padStart(2, '0')
    //     + now.getDate().toString().padStart(2, '0')
    //     + now.getHours().toString().padStart(2, '0')
    //     + now.getMinutes().toString().padStart(2, '0')
    //     + now.getSeconds().toString().padStart(2, '0')
    //     + index
    //     + now.getMilliseconds().toString().padStart(3, '0')
    //     + '-' + Math.floor(Math.random() * 10000);

    const chatBox = document.getElementById("chatBox");

    chatBox.insertAdjacentHTML("beforeend", `<div class="chatBoxListMessage sent audioAttachment" data-audio-url="${audioUrl}">
                                <div class="chatbox-message-item sent">
                                         <span class="profileimage">
                                                     <svg viewBox="0 0 212 212"
                                                         preserveAspectRatio="xMidYMid meet" class="ln8gz9je ppled2lx"
                                                         version="1.1" x="0px" y="0px" enable-background="new 0 0 212 212"
                                                         xml:space="preserve">
                                                         <path fill="currentColor" class="background"
                                                             d="M106.251,0.5C164.653,0.5,212,47.846,212,106.25S164.653,212,106.25,212C47.846,212,0.5,164.654,0.5,106.25 S47.846,0.5,106.251,0.5z">
                                                         </path>
                                                         <g>
                                                             <path fill="#FFFFFF" class="primary"
                                                                 d="M173.561,171.615c-0.601-0.915-1.287-1.907-2.065-2.955c-0.777-1.049-1.645-2.155-2.608-3.299 c-0.964-1.144-2.024-2.326-3.184-3.527c-1.741-1.802-3.71-3.646-5.924-5.47c-2.952-2.431-6.339-4.824-10.204-7.026 c-1.877-1.07-3.873-2.092-5.98-3.055c-0.062-0.028-0.118-0.059-0.18-0.087c-9.792-4.44-22.106-7.529-37.416-7.529 s-27.624,3.089-37.416,7.529c-0.338,0.153-0.653,0.318-0.985,0.474c-1.431,0.674-2.806,1.376-4.128,2.101 c-0.716,0.393-1.417,0.792-2.101,1.197c-3.421,2.027-6.475,4.191-9.15,6.395c-2.213,1.823-4.182,3.668-5.924,5.47 c-1.161,1.201-2.22,2.384-3.184,3.527c-0.964,1.144-1.832,2.25-2.609,3.299c-0.778,1.049-1.464,2.04-2.065,2.955 c-0.557,0.848-1.033,1.622-1.447,2.324c-0.033,0.056-0.073,0.119-0.104,0.174c-0.435,0.744-0.79,1.392-1.07,1.926 c-0.559,1.068-0.818,1.678-0.818,1.678v0.398c18.285,17.927,43.322,28.985,70.945,28.985c27.678,0,52.761-11.103,71.055-29.095 v-0.289c0,0-0.619-1.45-1.992-3.778C174.594,173.238,174.117,172.463,173.561,171.615z">
                                                             </path>
                                                             <path fill="#FFFFFF" class="primary"
                                                                 d="M106.002,125.5c2.645,0,5.212-0.253,7.68-0.737c1.234-0.242,2.443-0.542,3.624-0.896 c1.772-0.532,3.482-1.188,5.12-1.958c2.184-1.027,4.242-2.258,6.15-3.67c2.863-2.119,5.39-4.646,7.509-7.509 c0.706-0.954,1.367-1.945,1.98-2.971c0.919-1.539,1.729-3.155,2.422-4.84c0.462-1.123,0.872-2.277,1.226-3.458 c0.177-0.591,0.341-1.188,0.49-1.792c0.299-1.208,0.542-2.443,0.725-3.701c0.275-1.887,0.417-3.827,0.417-5.811 c0-1.984-0.142-3.925-0.417-5.811c-0.184-1.258-0.426-2.493-0.725-3.701c-0.15-0.604-0.313-1.202-0.49-1.793 c-0.354-1.181-0.764-2.335-1.226-3.458c-0.693-1.685-1.504-3.301-2.422-4.84c-0.613-1.026-1.274-2.017-1.98-2.971 c-2.119-2.863-4.646-5.39-7.509-7.509c-1.909-1.412-3.966-2.643-6.15-3.67c-1.638-0.77-3.348-1.426-5.12-1.958 c-1.181-0.355-2.39-0.655-3.624-0.896c-2.468-0.484-5.035-0.737-7.68-0.737c-21.162,0-37.345,16.183-37.345,37.345 C68.657,109.317,84.84,125.5,106.002,125.5z">
                                                             </path>
                                                         </g>
                                                     </svg>
                                         </span>
                                         <span class="p0s8B">
                                                     <svg viewBox="0 0 8 13" height="13" width="8"
                                                         preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px"
                                                         y="0px" enable-background="new 0 0 8 13" xml:space="preserve">
                                                         <path opacity="0.13"
                                                             d="M5.188,1H0v11.193l6.467-8.625 C7.526,2.156,6.958,1,5.188,1z">
                                                         </path>
                                                         <path fill="currentColor"
                                                             d="M5.188,0H0v11.193l6.467-8.625C7.526,1.156,6.958,0,5.188,0z">
                                                         </path>
                                                     </svg>
                                         </span>
                                         <div class="sentMessagesBox">
                                             <button type="button" class="optionMessage">
                                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
                                             </button>
                                             <span class="chatbox-message-item-text">
                                                <div class="audio_file_section">
                                                     <div class="loaderSpinner">
                                                          <svg class="spinner-container" width="65px" height="65px" viewBox="0 0 52 52">
                                                            <circle class="path" cx="26px" cy="26px" r="20px" fill="none" stroke-width="4px"></circle>
                                                          </svg>  
                                                        </div>
                                                     <div class="audio_button_playPause">
                                                         <button class="playPauseBtn" id="playPause${uniqueId}">
                                                              <svg class="playA" viewBox="0 0 34 34" height="34" width="34" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 34 34"><path fill="currentColor" d="M8.5,8.7c0-1.7,1.2-2.4,2.6-1.5l14.4,8.3c1.4,0.8,1.4,2.2,0,3l-14.4,8.3 c-1.4,0.8-2.6,0.2-2.6-1.5V8.7z"></path></svg>
                                                              <svg class="pauseA" viewBox="0 0 34 34" height="34" width="34" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 34 34"><path fill="currentColor" d="M9.2,25c0,0.5,0.4,1,0.9,1h3.6c0.5,0,0.9-0.4,0.9-1V9c0-0.5-0.4-0.9-0.9-0.9h-3.6 C9.7,8,9.2,8.4,9.2,9V25z M20.2,8c-0.5,0-1,0.4-1,0.9V25c0,0.5,0.4,1,1,1h3.6c0.5,0,1-0.4,1-1V9c0-0.5-0.4-0.9-1-0.9 C23.8,8,20.2,8,20.2,8z"></path></svg>
                                                         </button>
                                                     </div>
                                                     <div class="audio_wave_section">
                                                         <div id="waveform${uniqueId}" class="audio_wave_list"></div>
                                                         <div class="audio_bottom">
                                                         <span id="text${uniqueId}" class="show_duration show_d_${uniqueId}"></span>
                                                         <span class="chatbox-message-item-time">${time} <span class="message-view-svg">  
                                                        <svg  class="tickMessage d-none" viewBox="0 0 16 11" height="11" width="16" preserveAspectRatio="xMidYMid meet" class="" fill="none"><path d="M11.0714 0.652832C10.991 0.585124 10.8894 0.55127 10.7667 0.55127C10.6186 0.55127 10.4916 0.610514 10.3858 0.729004L4.19688 8.36523L1.79112 6.09277C1.7488 6.04622 1.69802 6.01025 1.63877 5.98486C1.57953 5.95947 1.51817 5.94678 1.45469 5.94678C1.32351 5.94678 1.20925 5.99544 1.11192 6.09277L0.800883 6.40381C0.707784 6.49268 0.661235 6.60482 0.661235 6.74023C0.661235 6.87565 0.707784 6.98991 0.800883 7.08301L3.79698 10.0791C3.94509 10.2145 4.11224 10.2822 4.29844 10.2822C4.40424 10.2822 4.5058 10.259 4.60313 10.2124C4.70046 10.1659 4.78086 10.1003 4.84434 10.0156L11.4903 1.59863C11.5623 1.5013 11.5982 1.40186 11.5982 1.30029C11.5982 1.14372 11.5348 1.01888 11.4078 0.925781L11.0714 0.652832ZM8.6212 8.32715C8.43077 8.20866 8.2488 8.09017 8.0753 7.97168C7.99489 7.89128 7.8891 7.85107 7.75791 7.85107C7.6098 7.85107 7.4892 7.90397 7.3961 8.00977L7.10411 8.33984C7.01947 8.43717 6.97715 8.54508 6.97715 8.66357C6.97715 8.79476 7.0237 8.90902 7.1168 9.00635L8.1959 10.0791C8.33132 10.2145 8.49636 10.2822 8.69102 10.2822C8.79681 10.2822 8.89838 10.259 8.99571 10.2124C9.09304 10.1659 9.17556 10.1003 9.24327 10.0156L15.8639 1.62402C15.9358 1.53939 15.9718 1.43994 15.9718 1.32568C15.9718 1.1818 15.9125 1.05697 15.794 0.951172L15.4386 0.678223C15.3582 0.610514 15.2587 0.57666 15.1402 0.57666C14.9964 0.57666 14.8715 0.635905 14.7657 0.754395L8.6212 8.32715Z" fill="currentColor"></path></svg>
                                                                       <svg class="waitTime" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg></span></span>
                                                         </div>
                                                     </div>
                                                </div>
                                             </span>
                                             </div>
                                         <div class="more-info-dropdown">
                                             <ul>
                                                  <li>
                                                      <a href="" class="DownloadAttachment" download="">
                                                          <span class="ms-info-svg"><svg viewBox="0 0 24 24" height="24" width="24" preserveAspectRatio="xMidYMid meet" class="" fill="none"><path d="M12.3536 15.6464C12.1583 15.8417 11.8417 15.8417 11.6464 15.6464L7.69481 11.6948C7.30912 11.3091 7.30886 10.6801 7.68772 10.2877C8.0761 9.88547 8.72424 9.87424 9.11962 10.2696L11 12.15V5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5V12.15L14.8804 10.2696C15.2758 9.87424 15.9239 9.88547 16.3123 10.2877C16.6911 10.6801 16.6909 11.3091 16.3052 11.6948L12.3536 15.6464ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V16C4 15.4477 4.44772 15 5 15C5.55228 15 6 15.4477 6 16V18H18V16C18 15.4477 18.4477 15 19 15C19.5523 15 20 15.4477 20 16V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z" fill="currentColor"></path></svg></span>
                                                          <span>Download</span>
                                                      </a>
                                                  </li> 
                                             </ul>
                                         </div>
                                </div>
                          </div>
                   `);
    chatBox.scrollTop = chatBox.scrollHeight;
}

// get Audio File opposite users
function getAttachmentAudioFileOppositeUsers (uniqueId,item, url) {
    let time = new Date(item.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    const now = new Date(item.created_at);
    let shortName =  getShortName(item.name)
    let name = item.name || item.senderName
    // let uniqueId = 'id-'
    //     + now.getFullYear()
    //     + (now.getMonth() + 1).toString().padStart(2, '0')
    //     + now.getDate().toString().padStart(2, '0')
    //     + now.getHours().toString().padStart(2, '0')
    //     + now.getMinutes().toString().padStart(2, '0')
    //     + now.getSeconds().toString().padStart(2, '0')
    //     + now.getMilliseconds().toString().padStart(3, '0')
    //     + '-' + Math.floor(Math.random() * 10000);


    let imageHtml = item.profileimage ? `<img src="${item.profileimage}" border-radius: 50px;">` : `${shortName}`;
    const chatBox = document.getElementById("chatBox");
    chatBox.innerHTML +=`<div class="chatBoxListMessage received audioAttachment" data-audio-url="${url}">
                                <div class="chatbox-message-item received">
                                         <span class="profileimage1 ${item.profileimage ? "border-none":""}">${imageHtml}</span>
                                         <span class="p0s8C">
                                    <svg viewBox="0 0 8 13" height="13" width="8" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 8 13" xml:space="preserve">
                                                                     <path opacity="0.13" fill="#0000000"
                                                                         d="M1.533,3.568L8,12.193V1H2.812 C1.042,1,0.474,2.156,1.533,3.568z">
                                                                     </path>
                                                                     <path fill="currentColor" d="M1.533,2.568L8,11.193V0L2.812,0C1.042,0,0.474,1.156,1.533,2.568z"></path>
                                    </svg>
                                    </span>
                                         <div class="sentMessagesBox">
                                             <button type="button" class="optionMessage">
                                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
                                             </button>
                                             <span class="chatbox-message-item-text">
                                               <span class="receivedName">${name} <p>(${item.userRole == '1'
            ? 'Superadmin'
            : item.userRole == '3'
                ? 'Hospital Admin'
                : item.userRole == '4'
                    ? 'Hospital Supervisor'
                    : item.userRole == '5'
                        ? 'Hospital Agent'
                        : item.userRole == '6'
                            ? 'Super Admin Supervisor'
                            : item.userRole == '7'
                                ? 'Super Admin Agent'
                                : item.userRole == '8'
                                    ? 'Diognostic Admin'
                                    : item.userRole == '9'
                                        ? 'Diognostic Supervisor'
                                        : item.userRole == '10'
                                            ? 'Diognostic Agent'
                                            : 'Unknown'})</p></span>
                                                <div class="audio_file_section">
                                                     <div class="audio_button_playPause">
                                                         <button class="playPauseBtn" id="playPause${uniqueId}">
                                                              <svg class="playA" viewBox="0 0 34 34" height="34" width="34" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 34 34"><path fill="currentColor" d="M8.5,8.7c0-1.7,1.2-2.4,2.6-1.5l14.4,8.3c1.4,0.8,1.4,2.2,0,3l-14.4,8.3 c-1.4,0.8-2.6,0.2-2.6-1.5V8.7z"></path></svg>
                                                              <svg class="pauseA" viewBox="0 0 34 34" height="34" width="34" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 34 34"><path fill="currentColor" d="M9.2,25c0,0.5,0.4,1,0.9,1h3.6c0.5,0,0.9-0.4,0.9-1V9c0-0.5-0.4-0.9-0.9-0.9h-3.6 C9.7,8,9.2,8.4,9.2,9V25z M20.2,8c-0.5,0-1,0.4-1,0.9V25c0,0.5,0.4,1,1,1h3.6c0.5,0,1-0.4,1-1V9c0-0.5-0.4-0.9-1-0.9 C23.8,8,20.2,8,20.2,8z"></path></svg>
                                                         </button>
                                                     </div>
                                                     <div class="audio_wave_section">
                                                         <div id="waveform${uniqueId}" class="audio_wave_list"></div>
                                                         <div class="audio_bottom">
                                                         <span id="text${uniqueId}" class="show_duration show_d_${uniqueId}"></span>
                                                         <span class="chatbox-message-item-time">${time} </span>
                                                         </div>
                                                     </div>
                                                </div>
                                             </span>
                                             </div>
                                         <div class="more-info-dropdown">
                                             <ul>
                                                  <li>
                                                      <a href="${url}" class="DownloadAttachment" download="">
                                                          <span class="ms-info-svg"><svg viewBox="0 0 24 24" height="24" width="24" preserveAspectRatio="xMidYMid meet" class="" fill="none"><path d="M12.3536 15.6464C12.1583 15.8417 11.8417 15.8417 11.6464 15.6464L7.69481 11.6948C7.30912 11.3091 7.30886 10.6801 7.68772 10.2877C8.0761 9.88547 8.72424 9.87424 9.11962 10.2696L11 12.15V5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5V12.15L14.8804 10.2696C15.2758 9.87424 15.9239 9.88547 16.3123 10.2877C16.6911 10.6801 16.6909 11.3091 16.3052 11.6948L12.3536 15.6464ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V16C4 15.4477 4.44772 15 5 15C5.55228 15 6 15.4477 6 16V18H18V16C18 15.4477 18.4477 15 19 15C19.5523 15 20 15.4477 20 16V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z" fill="currentColor"></path></svg></span>
                                                          <span>Download</span>
                                                      </a>
                                                  </li> 
                                             </ul>
                                         </div>
                                </div>
                          </div>
                   `;

           chatBox.scrollTop = chatBox.scrollHeight;
}

  

    let uniqueId = 'id-'
                                        + now.getFullYear()
                                        + (now.getMonth() + 1).toString().padStart(2, '0')
                                        + now.getDate().toString().padStart(2, '0')
                                        + now.getHours().toString().padStart(2, '0')
                                        + now.getMinutes().toString().padStart(2, '0')
                                        + now.getSeconds().toString().padStart(2, '0')
                                        + now.getMilliseconds().toString().padStart(3, '0')
                                        + index
                                        + '-' + Math.floor(Math.random() * 10000);

and im creating unique id using date

I’m learning JavaScript and practicing merging arrays. Here’s one of the methods I wrote using two for loops:

const arr1 = [4, 5, 7, 9, 8];
const arr2 = [-1, -2, 0, 12];
const arr3 = [];

for (let i = 0; i < arr1.length; i++) {
  arr3.push(arr1[i]);
}

for (let i = 0; i < arr2.length; i++) {
  arr3.push(arr2[i]);
}

console.log(arr3); // [4, 5, 7, 9, 8, -1, -2, 0, 12]

My question:
Are there any performance or readability trade-offs between the manual for loop approach and using concat() or spread?

Especially in large-scale applications or performance-sensitive cases — is there a real difference?
Would love to learn the best practice here. 

My HTML5 game is now uploaded and while I was coding it offline, I had the idea of 800×600 resolution. All the images and clicks are from

X: 0-800 and Y: 0-600

It’s working ok on my laptop and also the uploaded version is also working ok when I open it from https://iashu.itch.io/rivers with password: parola

When I open it from browser on my andoid phone I can’t see the bottom 180 pixels (so I see 800×420 pixels scaled to fill the whole phone screen)

I tried changing a lot of values in my index.html (usually I don’t have to change it… I am starting from a empty project https://drive.google.com/file/d/1YVQ2ZV6rGjPNvJ1Hh_G9PTbyNXGMdYYX/view?usp=drive...

and only code everything in the game.js file)

I also tried changing settings on the site itch.io, but nothing seems to work.

I’m facing some issue regarding with the ejs-mate, A npm package which extends the capabilities of ejs,
but I’m kinda confused with the syntax and the basic working of how things are working …

Please tryna help me or if you got something!

How can I asynchronously create two hundred API requests in a quick manner to an API, that is https://api.dictionaryapi.dev, in JavaScript? I want to catch CORS errors with an error status of 429 after using fetch() so that I can retry them or wait longer if needed, but I want to throw other errors.

The following code demenstrates an issue of solving the errors. It progressively waits longer to avoid those 429 errors, but it is way too slow. Additionally, the order of the executions do not matter.

(async () => {
    function wait(seconds) {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve()
            }, seconds * 1000);
        })
    }

    class FetchError extends Error {
        constructor() {
            super();
        }
    }

    let i = 0;
    let list = [];

    const someWords = ["webisode", "gin rummy", "cruder", "decarburising", "corn-cob pipe", "viva voce", "jaunting-car", "station blacks", "fit into", "dry mounting", "misfile", "gain time", "name day", "encouraged", "spahi", "tricorns", "in seventh heaven", "clarkias", "co-equal", "jomon", "plant", "data set", "sutra", "hypnotised", "talkshows", "quilts", "mince-pie", "grassroot", "crossfit", "price relative", "green plover", "abeyance", "ferrocyanide", "anatomically", "manful", "dust devils", "squibbed", "kyu grades", "girning", "transgendered", "narcosis", "go hot and cold", "gambling dens", "cochleae", "rowing machine", "overloud", "poetize", "rattlesnake", "speeddating", "pastored", "harmonised", "be worth one's weight in gold", "non-employment", "clinch", "intelligibility", "frog orchid", "grantor", "asthenic", "bandhs", "cedilla", "subaudition", "bassinets", "inferential", "paper bank", "episternum", "gaba", "apocarpous", "carolinian", "cab sauvs", "constrain", "bell-hop", "sympto-thermal method", "dance cards", "mescaline", "cobalts", "paper-taffeta", "palmtop", "sagittal", "bazooms", "stew", "doronicums", "fish kettle", "national grids", "religo", "catchphrases", "multiprogramming", "re-taken", "called", "sheet feeder", "chirognomy", "albizzia", "straight-jacketing", "strike while the iron is hot", "odalisques", "scouser", "metabolite", "breaded", "palavers", "seceding", "hunks", "consequence", "brillo pad", "biweekly", "ultrafine", "compellingly", "inert gas", "suffragis", "dedendums", "stochastic", "overcharging", "high-and-mighty", "bordures", "farm-worker", "pesthouse", "world-beater", "meditates", "enacted", "ophthalmic optician", "bed-bugs", "molds", "geocode", "leave the door open", "retrodictions", "tiresome", "explicit", "gearlevers", "profoundly", "anti-semitism", "hemstitched", "a bit much", "bituminizing", "upbeats", "preppy", "outfalls", "schlemiels", "bench seats", "monologise", "commoditize", "disinhibited", "conservatism", "talked", "annuls", "disadvantageous", "wild men", "radiation patterns", "non-literary", "round dances", "transvaluing", "slokas", "streeties", "medical emergency", "side valve", "urophilia", "chain letter", "quick-freezes", "transliterated", "dobermann pinschers", "alkali metal", "out-vote", "cachinnated", "nurdle", "quinquenniums", "interfluve", "p45", "dazzles", "nonreturnable", "midship", "overturns", "mast", "hyperkalemia", "don't", "suntan lotions", "unsteadiest", "meissen", "apprehensive", "gastarbeiters", "squabbled", "deprecated", "soft-paste", "heaths", "cabin cruiser", "millies", "unicorns", "repeat fees", "gavels", "suck-holing", "saviour siblings", "interspacing", "paused", "catoptric", "coral snakes", "blood brother", "beast of prey", "nullities", "afterpains", "lgbtqia", "act of grace", "atory", "blocker", "pervasive"];

    let success = 0;
    const successIntervals = 20;
    await someWords.reduce(async (array, item) => {
        await array;
        try {
            if (success >= successIntervals) await wait((success / successIntervals) << 0);
            let data = await fetch("https://api.dictionaryapi.dev/api/v2/entries/en_US/" + item);
            switch (data.status) {
                case 404:
                    throw new FetchError("Error 404: Cannot fetch " + item);
                default:
                    if (data.status >= 200 && data.status < 300) break;
                    throw new FetchError("Error " + data.status + ": Cannot fetch " + item);

            }
            const wordData = await data.json();

            if (wordData === null || wordData?.title === "No Definitions Found") throw new FetchError("No definition found for " + item);
            const completeWordData = {
                word: item,
                data: wordData
            };
            list.push(completeWordData);
            i++;
            success < successIntervals * 1.5 ? success++ : success = 0;
        } catch (e) {
            if (!(e instanceof FetchError || e instanceof TypeError)) throw e;
            console.error(e);
        }
    })
})();

I’m getting error “ERROR!undefined” when running the below code:

import {EventSource} from 'eventsource';
const es = new EventSource('https://ac1.mqtt.sx3ac.com/api/gap/nodes?filter_mac=DC:0D:30:00:07:25&filter_rssi=-75&mac=CC:1B:E0:E2:52:D4&active=1&event=1&chip=1&access_token=a2eb308b262ed05b7aacc84609f0118a8c5830c8186a37bd1455a89e17fd9939');
checkTime();
var startTime = new Date().getTime();
es.onmessage = function(e) {
var endTime=new Date().getTime();
console.log(e.data);
};
es.onerror = function(e) {console.log('ERROR!'+e.status);es.close();return; };
function checkTime() {
        setTimeout(function() {
                es.close();
                return;
        }, 60000);
}

Any clues what could be the problem, or how can I return the full error message?
Thanks

I am new to web development and coding. I do have a plan/roadmap of how to learn, which is in a nutshell (front-end, backend, APIs, databases, hosting/deployment, Auth/security, Web3).

What are the best resources to follow and enable practicing of front-end technologies (HTML, CSS, JS)? Thanks!

Here’s what I have tried: Udemy, Coursera, some YouTube but there is so much, I would like to understand what the majority have found useful. I am really in search of good examples that do not contain errors.

I’m trying to run asynchronous code inside a forEach loop using async/await, but it’s not working as expected.

Here’s a simplified version of what I’m trying to do:

const asyncTask = async (item) => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log(item);
};

const items = [1, 2, 3];

items.forEach(async (item) => {
  await asyncTask(item);
});

console.log("Done!");

I’m experimenting with the ECMAScript proposal for ShadowRealm and ran into some deeply unintuitive behavior around object identity, function bindings, and prototype inheritance across realms.

Consider this example (run in an environment that supports ShadowRealm, like recent Chrome or Node.js with flags):

const realm = new ShadowRealm();

const fn = realm.evaluate(`
  globalThis.shared = { x: 1 };
  function getShared() { return shared; }
  getShared;
`);

const objFromRealm = fn();

console.log(objFromRealm); // [object Object]
console.log(Object.getPrototypeOf(objFromRealm) === Object.prototype); // false
console.log(objFromRealm instanceof Object); // false
console.log(typeof objFromRealm); // 'object'

Questions:

• Why is the object returned from the ShadowRealm not an instance of Object in the main realm?

• If realms are isolated, why does typeof objFromRealm still return ‘object’, even though it has a different prototype chain?

• From the ECMAScript spec perspective: how is object identity and prototype linkage handled between different realms or compartments? Does the engine ever “wrap” or “proxy” objects to preserve memory safety?

• Could this lead to identity leaks, instanceof inconsistencies, or cross-realm Function issues?

I tried accessing an object created inside a ShadowRealm from the main execution context. I expected it to behave like a normal object — for example, instanceof Object should return true, and the prototype should match the main realm’s Object.prototype. Instead, I found that objects from the ShadowRealm are not recognized as instances of Object in the main realm, and their prototype chains are completely separate. This behavior seems to break conventional expectations about object identity and typeof, so I’m trying to understand what’s really happening behind the scenes and whether this is by design or a side effect of compartment isolation.

While reading the promise documentation I came across this statement:

If it’s called with the same value as the newly created promise (the promise it’s “tethered to”), the promise is rejected with a TypeError.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise#the_resolve_function

which I can’t understand, what value should I pass to resolve() to reject the promise with TypeError?

I would like to see some example code that reproduces this behavior.