Category: javascript

I’m trying to make a table using a DOM, but i’m having a trouble with this arrangement of the data.

I have an array..

let myData = [
        {
            options: "Option 1",
            details: [
                {
                    type: "Big Letters",
                    value: [
                        {name: "A"},
                        {name: "B"},
                        {name: "C"}
                    ]
                },
                {
                    type: "Small Letters",
                    value: [
                        {name: "a"},
                        {name: "b"},
                        {name: "c"}
                    ]
                },
                //Other codes here...
            ]
        },
            {
                options: "Option 2",
                details: [
                {
                    type: "Numbers",
                    value: [
                        {name: 1},
                        {name: 2},
                        {name: 3},
                        {name: 4},
                        {name: 5}
                    ]
                },
                //Other codes here...
            ]
        },
        //Other codes here...
    ];

Then i create a loop using forEach function and show the output using innerHTML. But the arrangement of data was messy. So i try to set up the rowspan but still messy(It seems their is lacking on my codes.

My fuction is…

let html ="<table border='1'>";
    html +=`
    <tr> 
        <th>Options</th>
        <th>Types</th>
        <th>Values</th>
    </tr>`;
    myData.forEach((item) => {
        html += "<tr>";
        html += `<td rowspan="${item.details.length}">${item.options}<td>`;
        item.details.forEach((item2) => {
            html += `<td rowspan="${item2.value.length}">${item2.type}</td>`
            item2.value.forEach((item3) => {
                html += `<td>${item3.name}</td>`
                html += "</tr>";
            })
        })
    })
    html += "</table>";
    document.body.innerHTML = html;

Here is my current output:

I would like my table look like this.

Is there any way to achieve this output?

Thank’s for your help.

enter image description hereWhen ever I save my file in vscode it automatically changes the tags and create space between them

I was saving file and want to run it

I’m learning F.prototype throw this site. After playing around for awhile, I’m getting confused when trying to understand prototype. First, let me show my example:

let animal = {
    jump: function () {
        alert(`Hey ${this.name}, Bounce! Bounce! Bounce!`);
    }
}

let SlimZ1 = function (name) {
    this.name = name;
};

// I tried to import function from animal to SlimZ1 by this

SlimZ1.prototype = {
    ...animal,
    constructor: SlimZ1
}

// And every time when I created an instance, it works fine.
let s1 = new SlimZ1("Lili")
s1.jump() // work

s1.__proto__ === SlimZ1.prototype // true because it equals {jump: ƒ, constructor: ƒ}

Now I tried to put prototype inside function like this

let animal = {
    jump: function () {
        alert(`Hey ${this.name}, Bounce! Bounce! Bounce!`);
    }
}

let SlimZ2 = function SlimZ2(name) {
    this.name = name;
    SlimZ2.prototype = {
        ...animal,
        constructor: SlimZ2
    }
};

// And every time when I created an instance, it works fine.
let s2 = new SlimZ2("Lili")
s2.jump() // STOP WORKING


s2.__proto__ === SlimZ2.prototype // false
// s2.__proto__         |  {constructor: ƒ}
// SlimZ2.prototype     |  {jump: ƒ, constructor: ƒ}

The tutorial said F.prototype will be copied when new F() is called. But in the second case of my example, it doesn’t. Can anyone help me to explain this problem?

P/s: I knew we can use different ways to bring prototype inside F() constructor by using Object.assign or this.__proto__.

I got Uncaught (in promise) AbortError: The user aborted a request. error after clicking on my popup button, and selecting a folder on my computer

Popup.js

document.addEventListener('DOMContentLoaded', function() {

    document.getElementById('btnCreate').addEventListener('click', async function() {

      // Request permission to write to the file system
      const handle = await window.showDirectoryPicker();

      // Create a new directory inside the selected directory
      await handle.getDirectoryHandle('myFolder', { create: true });

  });  //<--- This is the line which my chrome debugger shows which (probably) problem happens and I don't know why
})

I’ve got a Gmail script running that is supposed to return the subject line and message body from all e-mail messages with the label “taxes/payments”. However, It is only returning the first message in the thread because I’m using ‘getFirstMessageSubject()’ instead of ‘getSubject()’.

I think I’m confused about how to use different classes in the GmailApp framework (I’m new to programming). When I try to display the Subject lines from the messages I store in the variable ‘mes’, I get an error saying “getSubject() is not a function”. Can someone clear this confusion up for me so I understand how to use the different classes? I have read through the class descriptions and tried various examples but am not understanding how it all fits together.

    var sheet = SpreadsheetApp.getActiveSheet();
    var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();


    function onOpen() {
      var menuEntries = [ {name: "Load Emails", functionName: "getEmails"} ];
      spreadsheet.addMenu("GetOrders", menuEntries);
    }

    function getEmails(){
    // Log the subject lines of your Inbox
    var label = GmailApp.getUserLabelByName("taxes/payments");
    var threads = label.getThreads();
    var row = 2;

    for (var i = 0; i < threads.length; i++) {
      Logger.log(threads[i].getFirstMessageSubject()); 
      

Logger.log(threads[i].getMessages()); //returns data of type: GmailMessage[]
      var mes= threads[i].getMessages();//store the messages in the variable 'mes' 
      Logger.log(mes.getSubject());


      sheet.getRange(row,1).setValue(threads[i].getFirstMessageSubject());
      sheet.getRange(row,2).setValue(threads[i].getLastMessageDate());
    
var messages = GmailApp.getMessagesForThread(threads[i]);
    for (var j=0; j<messages.length; j++) {
            var msg = messages[j].getPlainBody();      
            sheet.getRange(row,3).setValue(msg);
    }
    row++;
    }
    }

[enter image description (https://i.stack.imgur.com/AYaYM.jpg)

I have tried the version changes, but not able to understand it.

I am testing an app that updates its information in real time, and I am trying to use either REST API or Websockets to (fetch)GET the data. However I am unbale to find a service that provide an API that updates (hopefully in seconds) in regular intervals, so I can do the testing.

I have tried several online tools, such as https://jsonplaceholder.typicode.com/, https://reqres.in/, and various others, The thing is none of them gives information that updates in regular intervals: either in seconds or minutes.

I have written a code that will take the screenshot after some time interval.
The code is:

function captureScreenshot() {
    if (screenStream) {
        screenStream.getTracks().forEach(track => {
            track.stop();
        });
    }
    navigator.mediaDevices.getDisplayMedia({video: true})
    .then(stream => {
        track = stream.getVideoTracks()[0];
        screenStream = track;
        track.applyConstraints();
        (function(delay, callback){
            var loop = function(){
                callback();
                setTimeout(loop, delay);
            }; loop();
        })(5000, function(){
            imageCapture = new ImageCapture(track);
            imageCapture.grabFrame()
            .then(imageBitmap => {
                const canvas = document.querySelector('#image');
                drawCanvas(canvas, imageBitmap);
            })
            .catch(err => {
                console.error("Error grabbing frame: ", err);
            });
        });
    })
    .catch(err => {
        console.error("Error getting display media: ", err);
    });
}

Problem is:
Whenever I try to run this code by using an external button it shows this error:
“DOMException: The associated Track is in an invalid state”.

We have tried to change the timer of the loop from 5000 to 800.
It takes the screenshot and don’t give the errors for some time but will show the error at the end.

It changes the state to track.muted = true.
I want it to stay at the track.muted=false state.
So, my loop must taking the screenshot continuously.

Is there any method that can make “track.muted=false” forcefully.

New to jQUery. Trying to make it run offline by using the js file from the website, but I ran into this error.
I’m using Microsoft edge.

<script src="C:UsersHPDocumentsWeb DevelopmentProjectsJSjquery-3.6.4.js"></script>

I tried copying the folder to root directory and running from there, but still shows error
I tried turing off safe search on my Google, incase it’s some form of security block but still doesn’t work.
Tried the CDN and that works, but can’t get the js file to work offline.

trying to crop and save image with croppie library not from ajax but from for data because i have another data to send , Image cropped and saved in database but it is corrupted

enter image description hereenter image description here

there are my controller and js code

 <div class="col-md-6">
    <div class="form-group">
        <label> {{trans('words.upload_about_img')}}</label> <br>
        <label>Select File</label>
        <label id="projectinput7" class="file center-block">
            <input type="file" name="image" id="image-input" accept="image/*">
            <input type="hidden" name="cropped-image" id="cropped-image-input">
            <span class="file-custom"></span>
        </label>
    </div>
</div>

<div class="row" id="image-container">
</div>

 // Initialize Croppie image
    var image = $('#image-container').croppie({
        enableExif: true,
        viewport: {
            width: 200,
            height: 200,
            type: 'square'
        },
        boundary:{
            width:400,
            height:400
        }  
    });

    // Bind update event to update hidden input with cropped image data
    image.on('update', function (croppedImage) {
        $('#cropped-image-input').val(croppedImage);
    });

    // When file input changes, load the image into the Croppie container
    $('#image-input').on('change', function () {
        var input = this;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                image.croppie('bind', {
                    url: e.target.result
                });
            }
            reader.readAsDataURL(input.files[0]);
        }
    });

 $imageData = $request->input('cropped-image');
        $imageName = uniqid() . '.png';
        $imagePath = public_path('images/' . $imageName);
        file_put_contents($imagePath, base64_decode(str_replace('data:image/png;base64,', '', $imageData)));

$about = About::create([
            'id' => Auth::id(),
            'description' => $request->description,
            'about_img' => 'images/'.$imageName,
            'mission' => $request->mission,
            'vision' => $request->vision,
            'our_value' => $request->our_value,



]);

I try to build a Bumble auto swiper extension for chrome but can’t get the .click() function to work. I did some tests on the like button in the console.
Here is the Button Element:

<div class="encounters-controls__action">
   <div class="encounters-action tooltip-activator encounters-action--like" role="button" data-qa-role="encounters-action-like" tabindex="0" aria-label="Like">
      <div class="encounters-action__icon">
         <span class="icon icon--size-stretch" role="presentation" data-qa-role="icon" data-qa-icon-name="floating-action-yes">
            <svg data-origin="pipeline" viewBox="0 0 78 78" fill="none">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M35.759 43.024l11.82-11.82a2.387 2.387 0 113.376 3.378L37.448 48.089a2.388 2.388 0 01-3.377 0l-6.754-6.752a2.388 2.388 0 013.377-3.377l5.065 5.065z" fill="currentColor"></path>
            </svg>
         </span>
      </div>
      <div class="tooltip" data-direction="top" data-align="center" data-qa-role="tooltip">
         <div class="tooltip__content">
            <div class="p-3 text-color-white">Like</div>
         </div>
      </div>
   </div>
</div>

This is the code I try to call in the console to trigger the .click() event:

var likeButtonInterval = setInterval(function() {
  var likeButton = document.querySelector(".encounters-action--like");
  if (likeButton) {
    clearInterval(likeButtonInterval);
    try {
      // Scroll the button into view
      likeButton.scrollIntoView();
     
      // Trigger the click event
      likeButton.click();
    } catch (error) {
      console.error("Error clicking like button:", error);
    }
  }
}, 500);

Nothing happens, yesterday out of a sudden this exact code worked and then it stopped again.
Its super random.
On other websites it works perfectly fine.

I don’t have any solution. I’ve been trying mutliple website but found nothing useful.

If anybody have solution for the same, please share the code.

I’m using this regex to validated a LinkedIn Profile URL

/(?:(http|https)://)?(?:www.)?linkedin.com/in(w+:{0,1}w*@)?(S+)(:([0-9])+)?(/|/([w#!:.?+=&%@!-/]))?/

These are my requirements:

• https or http optional
• www optional

The regex works for https://www.linkedin.com/in/<username>

It also works for https:/www.linkedin.com/in/<username>, which shouldn’t.

Basically, I want to add that if https or http is present also check for : or //.

How do I do this?

I am working on a Login Button at header which not only shows the login dialog when clicked but show a dropdown onMouseEnter .
The Button used is an MUI component .
Here is the code for Button:-

                   <Button
                    onMouseEnter={handleClick}
                    onClick={() => { console.log("hi") }}
                    endIcon={ !Open ? <ArrowDownwardIcon/> : <ArrowUpwardIcon/>}
                    style={{ color: "#047BD5", background: "white" }} variant="contained">Login
                </Button>
                <Menu
                    id="basic-menu"
                    open={Open}
                    anchorEl={anchorEl}
                    onClose={handleClose}
                    onBlur={handleClose}
                    style={{width:"100%"}}
                    MenuListProps={{
                        'aria-labelledby': 'basic-button',
                    }}
                >
                    {Auth && <MenuItem style={{ color: "#047BD5" }} onClick={() => { setOpen(true)  }}>Login</MenuItem>}
                    <MenuItem style={{ color: "#047BD5" }}  onClick={() => { setSignOpen(true) }}>SignUp</MenuItem>
                    <MenuItem style={{ color: "#047BD5" }} onClick={handleClose}>Orders</MenuItem>
                    <MenuItem style={{ color: "#047BD5" }} onClick={handleClose}>Whislist</MenuItem>
                    <MenuItem style={{ color: "#047BD5" }} onClick={handleClose}>Logout</MenuItem>
                </Menu>

The lower menu part is Just the dropdown .

Problem
When i move mousePointer to button to click , it does not accept the click event . Even the Hand pointer does not appear on Button . I understand the problem a bit but not as much to solve it .
IN SHORT :- Only Hover event is getting triggered and not the onClick when Button is clicked .
Expectation
I expecting that Hover event is triggerd when i move pointer to Button and when click on Button onClick Event should also get triggerd .I will be satisfied with js solution to instead of react or with simple Button instead of MUI Button .

It will surely make my day if you can help me it . If any others details are required please feel free to ask .
Thanks!
Have a error free day.

I want to use a popover in Bootstrap but its not working it should work in a button click.

I have linked all the scripts yet its still not working.