Category: javascript

Is it possible to collect the phone number of a saved contact on WhatsApp without opening the “contact info” (“Dados do contato” in the image)? I’ve been stuck on this for weeks. I really appreciate it if someone knows the answer. I’m developing a TypeScript/React extension for WhatsApp Web

I’ve try so many options. Idk what to do

I want to create a web application that should be able to read data from ID cards and e-passports via NFC (for Android devices on Chrome) and I have some questions:

1. Is it possible to read data from ePassport via WEB NFC API. As I understand, NDEF compatible with ISO 14443 interface.

2. If I make BAC (Basic access control), how can I get access to the ePassport’s data ?

3. Can I read and parse the LDS format (Logical Data Structure) from ePassport NFC tag ?

I have already learned a lot of information on the Internet and have not found answer to my questions.

I want to create extension for extension (for React dev tools). I want to add custom post processing for react components tree rendered by react dev tool.
I tried to use extensions for injecting js code to pages by URL, but it’s not working for urls like chrome-extension://...
Is there options of how I can implement it?

P.S.
At the moment, the only option that comes to my mind is to keep the page post-processing code on hand, which I can, if necessary, insert into the console open for the page in react dev tools. (but this solution cannot be called convenient)

[when i start scrolling the project cards should scroll to the right but it gives me a white space then the white space disappears when i reach the end of the projects

before the animations starts:enter image description here

at the end of animation

mid animation]

    <section class="projects">

        <div class="text">
            <p>featured projects</p>
            <h2>With our passion, we design every project we call it home.</h2>
        </div> 
      <div class="project-container">
           
            <div class="project">
                <img src="assets/Modern Living VillaF42.png" alt="">
                <div class="overlay-text">VILLA REHAB</div>
            </div>
            <div class="project">
                <img src="assets/Modern Living VillaF42.png" alt="">
                <div class="overlay-text">VILLA MADINATY</div>
            </div>
            <div class="project">
                <img src="assets/Modern Living VillaF42.png" alt="">
                <div class="overlay-text">VILLA OCTOBER</div>
            </div>
            <div class="project">
                <img src="assets/Modern Living VillaF42.png" alt="">
                <div class="overlay-text">VILLA SHEROUK</div>
            </div>
            <div class="project">
                <img src="assets/Modern Living VillaF42.png" alt="">
                <div class="overlay-text">VILLA ALEXANDRIA</div>
            </div>
      </div>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js"></script>
    
    <script src="script.js"></script>

const projects = document.querySelector(".project-container");
console.log(projects.offsetWidth)

function getScrollAmount() {
    let projectsWidth = projects.scrollWidth;
    return -(projectsWidth - window.innerWidth);
}

const tween = gsap.to(projects, {
    x: getScrollAmount,
    duration: 3,
    ease: "none",
});


ScrollTrigger.create({
    trigger:".projects",
    start:"top 20%",
    end: () => `+=${getScrollAmount() * -1}`,
    pin:true,
    animation:tween,
    scrub:1,
    invalidateOnRefresh:true,
    markers:true
})

When you click on input range, it says dual-range input Unable to preventDefault inside passive event listener

enter image description here

[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:4277invokeGuardedCallbackAndCatchFirstError@react-dom.development.js:[email protected]:[email protected]:[email protected]:[email protected]:9097(anonymous)@react-dom.development.js:[email protected]:[email protected]:[email protected]:9287dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay@react-dom.development.js:[email protected]:6457dispatchDiscreteEvent

After recording on the front end, send it to the server and proceed with STT using whisper. The server saves the voice in .wav format and performs STT through openai’s whisper, but only the voice recorded and transmitted from the iPhone is not processed properly (it is not recognized at all).
MacBook, laptop, and desktop microphones are all possible, but only audio recorded from iPhone is not processed (even after installing AirPods or wired earphones).
If I run the separately saved wav file audio in colab, it works normally. Is there any error or something I’m missing?

let audioChunks = [];
let mediaRecorder;
let stream;
let audioContext;
let isRecording = false;
let mediaStreamSource;

function toggleRecording() {
    const userMessageInput = document.getElementById('userMessage');
    const recordButton = document.getElementById('record-button');

    if (currentAudio) {
        currentAudio.pause();
        currentAudio = null;
    }

    if (!isRecording) {
        navigator.mediaDevices.getUserMedia({ audio: true })
            .then(async (userStream) => {
                stream = userStream;
                audioContext = new (window.AudioContext || window.webkitAudioContext)();
                mediaRecorder = new MediaRecorder(stream);
                audioChunks = [];

                if (mediaRecorder) {
                    mediaRecorder.ondataavailable = (event) => {
                        if (event.data.size > 0) {
                            audioChunks.push(event.data);
                            sendIntermediateRecording(event.data);
                        }
                    };
                }

                mediaStreamSource = audioContext.createMediaStreamSource(stream);
                mediaRecorder.start();
                isRecording = true;
                userMessageInput.disabled = true;
                translateText('Recording Your Voice...')
                    .then(translatedText => {
                        userMessageInput.placeholder = translatedText;
                    })
                    .catch(error => {
                        console.error('Translation Error:', error);
                    });

                updateButtonState();
            })
            .catch(error => {
                console.log(error);
                alert('Mic Access Error' , error.message);
                
            });
    } else {
        if (mediaRecorder && mediaRecorder.state !== "inactive") {
            mediaRecorder.stop();
            isRecording = false;
            updateButtonState();
            recordButton.disabled = isRecording;
        }
    }
}

This is run STT code

def speech_to_text_whsiper(self, audio_data):

        with open('audio.wav', 'wb') as wav_file:
            wav_file.write(audio_data.read())

        result = self.stt_engine.transcribe('/audio.wav')

        return result['text']

I have an issue which I want to populate date that matches data in the select2 multiple let say I have data from database C,D,E with dates ['2023-12-01', '2023-12-02', '2023-12-03'] the problem is when I select another item like “b” it will jumble or replace the E date and it will turns to blank, All I want is whatever the position of select2 let say C,D,F and then I click “E” then the date that comes from database will retain to their corresponding letters so will insert the “E” automatically between D and F and it is blank since it is new so it will turn to C,D,E,F ['2023-12-01', '2023-12-02',,'2023-12-03']

can anyone have an idea? any answer will appreciated!

$('#remarks-list').val([3,4,5]).trigger('change');
    let clicked_id = 0;
    let status_val =0;
    let formattedDates = ''
    let employeeList = [];

    let selectedRemarks = [];

    let selectedRemarksOrder = [];
    let remarksDateMap = {};

    $(function () {
       
    $('select').each(function () {
        $(this).select2({
        theme: 'bootstrap4',
        width: 'style',
        placeholder: $(this).attr('placeholder'),
        allowClear: Boolean($(this).data('allow-clear')),
        });
    });
    });

    $(document).ready(function () {
       
        let remarks_date = ['2023-12-01', '2023-12-02', '2023-12-03']
        

        $(".remarks-list").on("change", function() {
            $("#dynamic-input-container").empty();
            selectedRemarks = $(this).val();
            
            if (selectedRemarks) {
                selectedRemarksOrder = selectedRemarksOrder.filter(item => selectedRemarks.includes(item));
                selectedRemarksOrder = selectedRemarksOrder.concat(selectedRemarks.filter(item => !selectedRemarksOrder.includes(item)));


                for (var i = 0; i < selectedRemarksOrder.length; i++) {
                    var selectedRemark = selectedRemarksOrder[i];
                    var inputId = "date-remarks-" + selectedRemark;
                    var selectedText = $(this).find('option[value="' + selectedRemark + '"]').text();

                    var inputValue = remarks_date[i] || "";
                    var inputElement = '<label class="form-label">Date for <b>' + selectedText + '</b></label> <input type="date" id="' + inputId + '" name="DateRemarks" class="form-control" value="' + inputValue + '" /><br>';
                    $("#dynamic-input-container").append(inputElement);
                    
                }
            }
        });

        $("#dynamic-input-container").on("change", 'input[type="date"]', function() {
            var inputId = $(this).attr("id");
            var selectedRemark = inputId.replace("date-remarks-", "");
            remarksDateMap[selectedRemark] = $(this).val();
        });



    })

body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  background: #fafafa;
  color: #444444;
}

.wrapper {
  max-width: 75%;
  margin: auto;
}

h3 {
  color: #000000;
  margin: 40px 0;
  padding: 0;
  font-size: 28px;
  text-align: center;
}

select {
  width: 100%;
  min-height: 100px;
  border-radius: 3px;
  border: 1px solid #444;
  padding: 10px;
  color: #444444;
  font-size: 14px;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- select2 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

  <!-- select2-bootstrap4-theme -->
  <link href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" rel="stylesheet"> <!-- for live demo page -->


    <div class="col-12">
        <label>Let say It just an edit item and this appears and theres data from database which <b>C,D,E</b> and date which is <b>['2023-12-01', '2023-12-02', '2023-12-03']</b></label> <br> <br>
            <select id="remarks-list" name="RemarksList" class="select2 form-select remarks-list" style="width: 100px; height: 200px;" multiple>
                <option></option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">C</option>
                <option value="4">D</option>
                <option value="5">E</option>

            </select>
        <span id="remarks_error" style="color: red;"></span>
    </div>

    <div class="col-sm-12">
        <br>
        <div id="dynamic-input-container"></div>
    </div>

I am trying to implement the merge sort algorithm from this website (https://www.geeksforgeeks.org/javascript-program-for-merge-sort/) as a generator for an array with 25 elements. However, I’ve noticed that whenever I change the array’s length to anything greater than 4, the algorithm won’t work as intended and will start altering the values of the elements themselves. My end goal is to make sure that each yield of the array maintains the same length while sorting everything correctly.

My suspicion is that it has to do with the part of the merge function where arr1 and arr2 are being filled with arr‘s elements, everything else looks right to me. I tried experimenting with it by using the slice array function to populate arr1 with the first half of arr and arr2 with the second half, then getting the length from there. Even when I do that though, the problem still persists.

Here is the entire code for reference:

function* merge(arr: number[], left: number, middle: number, right: number): Generator<number[]> { 
    let l1 = middle - left + 1; 
    let l2 = right - middle; 
    let arr1 = new Array(l1); 
    let arr2 = new Array(l2);
      
    for (let i = 0; i < l1; ++i) { 
        arr1[i] = arr[left + i]; 
    } 
    for (let i = 0; i < l2; ++i) { 
        arr2[i] = arr[middle + 1 + i]; 
    } 
  
    let i = 0, j = 0, k = left; 

    while (i < l1 && j < l2) { 
        if (arr1[i] < arr2[j]) { 
            arr[k] = arr1[i]; 
            ++i;
        } else { 
            arr[k] = arr2[j]; 
            j++; 
        } 
        k++; 
    } 

    while (i < l1) { 
        arr[k] = arr1[i]; 
        i++; 
        k++; 
    } 
    yield [...arr.slice()];
    while (j < l2) { 
        arr[k] = arr1[j]; 
        j++; 
        k++; 
    } 
} 
  
function* mergeSort(arr: number[], left = 0, right = arr.length - 1): Generator<number[]> { 
    if (left >= right) { 
        return [...arr.slice()]; 
    } 
    let middle = left + Math.floor((right - left) / 2); 
      
    yield* mergeSort(arr, left, middle); 
    yield* mergeSort(arr, middle + 1, right); 
      
    yield* merge(arr, left, middle, right); 
} 
  
const arr1 =  [ 3, 2, 4, 1];
const arr2 =  [ 3, 2, 4, 1, 5];

for (let n of mergeSort(arr1)) {
    console.log("Length of 4: " + n);
}

for (let n of mergeSort(arr2)) {
    console.log("Length of 5: " + n);
}

So, whenever i ‘console.log’ an array, it limits the amount of elements it displays in 5 per line. Is there anything i can change so it displays everything in a single line (up until the viewport size)?

I know i can do JSON.stringfy and it shows correctly, i was just wondering if there is any way i can avoid having to do that by just changing some settings.

I do this: ‘console.log(array)’

And get this:

[
  10, 20, 30, 40, 50,
  60, 70, 80, 90, 100
]

I would like to get this:

[ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ]

Thank you in advance.

var express = require('express');
var router = express.Router();
var MongoClient = require ('mongodb').MongoClient

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.post('/submit',function(req,res){ 

  MongoClient.connect("mongodb://localhost:27017", function(err, client) {
  if (err) {
    console.log("Error connecting to MongoDB:", err);
  } else {
    console.log("Connected to MongoDB");
  }
});

   res.send('got')
})
module.exports = router;

didn’t getting any output like error or connected but nothing comes. I think it is not entering into that call back function

I have task where I need to push the new data to the old state, the data is from response of socket.on, The problem right now when socket listener trigger memory leak or infinite loop results.

Expected Output (data pushed):

 {
    "id": 1,
    "type": "pickup",
    "vehicle": "Trucks",
    "created_at": "2023-12-13T14:10:29.000Z",
    "updated_at": "2023-12-13T14:10:29.000Z",
    "bookings": []
  },
  {
    "id": 2,
    "type": "delivery",
    "vehicle": "Motor",
    "created_at": "2023-12-13T14:10:29.000Z",
    "updated_at": "2023-12-13T14:10:29.000Z"
    "bookings": []
  }

Current Testing:

console.log(JSON.stringify(bookingList.length, null, 2))

State:

const [bookingList, setBookingList] = useState([])

Socket On:

socket.on("new_booking", (items) => {
  setBookingList(currentBooking => [...currentBooking, items?.booking])
})

Here is the first data render:

 {
    "id": 1,
    "type": "pickup",
    "vehicle": "Trucks",
    "created_at": "2023-12-13T14:10:29.000Z",
    "updated_at": "2023-12-13T14:10:29.000Z",
    "bookings": []
  }

Here is the data from socket io:

  {
    "id": 2,
    "type": "pickup",
    "vehicle": "Motor",
    "created_at": "2023-12-13T14:10:29.000Z",
    "updated_at": "2023-12-13T14:10:29.000Z"
    "bookings": []
  }

I am currently coding a simple egoshooter with three.js (https://d3s3r7.nonline.repl.co/) and so far everything worked out fine but now I noticed the shooting mechanism somehow isn’t working correctly. I am using three.js raycaster to check for intersections with objects when the player shoots (by clicking on the screen or pressing space) and then deal damage to the object he pointed at. It does work for objects near enough to fill most of your screen but somehow the collision is not checked directly in the middle of the screen but a bit under it. The original code looks like this:

let raycaster = new THREE.Raycaster();
let camPosition = camera.position.clone();
raycaster.set(camPosition, new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion));

I already tried setting it from camera with “raycaster.setFromCamera(” but I get the same result.

let pointer = new THREE.Vector2();
pointer.x = 0;
pointer.y = 0;
raycaster.setFromCamera(pointer, camera);

The full code is at https://d3s3r7.nonline.repl.co/script1.js

i expect the elements in arr be reversed, but it still log as [‘a’,’b’,’c’,’d’,’e’]

i think i am doing some fundamental problem but i cannot figure out what it is

    function reverseArray(array) {
       let array02 = [];
       let len = array.length-1;
       for (let i=0; i<=len; i++){
           array02[len-i] = array[i];
       }
    array = array02;
    return array;
    }
    var arr = ['a','b','c','d','e'];
    reverseArray(arr);
    console.log(arr);

I am implementing the MERN stack for a project, and have this code running in an Express server

app.post('/community-partners', async (request, response) => {
    try {
        if (
            !request.body.name ||
            !request.body.skill ||
            !request.body.partnerYear
        ) {
            return response.status(400).send({
                message: "Send all required fields!"
            });
        }
        const newPartner = {
            name: request.body.name,
            skill: request.body.skill,
            partnerYear: request.body.partnerYear,
        };  

        const partner = await Partner.create(newPartner);

        return response.status(201).send(partner);
    } catch(error) {
        console.log(error.message);
        response.status(500).send({ message: error.message });
    }
});

and I am using Postman to send a POST request to http://localhost:5555/community-partners, and when I send:

{
    "name": "IBM",
    "skill": "IT",
    "partnerYear": 2006
}

it returns “Send all required fields!”

I changed it to return the fields that were sent and it just sends “undefined” for each request.body.name(.skill or .partnerYear too)
What is the problem? Is there anything else I should add to the post?

I have a JavaScript project that I am refactoring into TypeScript. However, I’ve encountered a TypeScript error (TS2339) that I cannot resolve.

I have a class

export const devtoolsBackgroundScriptClient = new class 
{
    constructor()
    {
        return this.asProxy();
    }

    // some methods

    asProxy()
    {
        return new Proxy(this, {
            get: (e, t) => {
                return void 0 !== e[t] ? e[t] : e.callBackgroundScript.bind(e, t);
            }
        });
    }

    callBackgroundScript(method, ...params)
    {
        // some code
    }
}

I call this class, like a

devtoolsBackgroundScriptClient.submitSurvey(surveyData);

Method submitSurvey doesnt exist in class, that’s why called callBackgroundScript.
It works for javascript, but I have typescript error here:

devtoolsBackgroundScriptClient.submitSurvey(surveyData);

Property ‘submitSurvey’ does not exist on type
‘devtoolsBackgroundScriptClient’

How I can resolve ts warning?