Category: javascript

I have made a blogging application in Laravel 8.

I am currently working on submitting comments and comment replies via jQuery AJAX.

The comment form template (viewsthemescalvinpartialscomment-form.blade.php):

Your comment is pending

<div class="alert-box-ajax alert-box alert-box--error">
  Failed to add comment!
</div>

<form class="commentForm" method="post" action="{{ route('comment.submit') }}" autocomplete="off">
  @csrf
    <fieldset>
      <input type="hidden" name="article_id" value="{{ isset($article->id) ? $article->id : $article_id }}">
      <input type="hidden" name="parent_id" value="{{ $comment->id ?? '' }}">

      <div class="message form-field">
          <textarea name="msg" id="message" class="h-full-width" placeholder="Your Message" required></textarea>

          @error('msg')
          <p class="help-block text-danger">{{ $message }}</p>
          @enderror
      </div>
      <br>
      <input name="submit" id="submit" class="btn btn--primary btn-wide btn--large h-full-width" value="Add Comment" type="submit">
    </fieldset>
</form>

In the scripting file I have:

$(“.commentForm”).each(function () {
var form = $(this);
form.validate({
errorElement: “p”,
errorClass: “help-block text-danger”,

      submitHandler: function (_form, event) {
          event.preventDefault();
          var $fields = form.find("textarea"),
              url = form.attr("action"),
              data = form.serialize();
          $.ajax({
              dataType: "json",
              type: "post",
              url: url,
              data: data,
              cache: false,
              success: function () {
                form.closest(".form-wrapper").find(".alert-box--success").slideDown(250).delay(2500).slideUp(250)
                      .slideDown(250)
                      .delay(2500)
                      .slideUp(250);
                $fields.val("");
              },
              error: function () {    
                form.closest(".form-wrapper").find(".alert-box--error").slideDown(250).delay(2500).slideUp(250)
                      .slideDown(250)
                      .delay(2500)
                      .slideUp(250);
              },
          });
      },
  });

});

The problem

Evan though the comments are successfully submitted, the alert made visible is <div class="alert-box-ajax alert-box alert-box--error">Failed to add comment!</div>, because the script executes error, not success.

The Network tab shows two statuses, in this order: 302 and 200.

What am I doing wrong?

My sportsclub have several av these Chromebox’es but they will not run some javascript on some important webpages. It sort of looks these Chromeboxes will not upgrade any more.

I check status on its “About Chrome OS” and it says “Chromebox unit updated. Version 76.0.3809.136“. Also, “Firmware = Google_Zako.5219.30.0“.

Latest is 119 today. That is why simple things, like "mystring".replaceAll(...); is not working on this box.

Is there a way, or how can I upgrade this box to newer ChromeOS versions?

I have a regular input field with input HTML that allows users to enter a time range (minutes and seconds). From 5 seconds to 20 minutes.

You can take a look at the example

https://codesandbox.io/s/autumn-cache-mvqnrr

However, there are error in the field that I would like to correct. As you can see, the field allows you to enter any number of zeros before the number. Please tell me how this situation can be handled so that the user can enter a maximum of two characters in the field? That is, the field would accept a value from the user in the format: 00 or 05 or 5 or 10. But do not allow 0000 or 00005 or 010.

    const limitValue = (min, max, val) => Math.min(max, Math.max(min, val));

export default function App() {
  const [value, setValue] = useState(10);
  const onInput = useCallback(
    (val, minutes) =>
      setValue((prev) =>
        limitValue(
          5,
          1200,
          minutes ? val * 60 + (prev % 60) : ~~(prev / 60) * 60 + val
        )
      ),
    []
  );
  return (
    <div>
      <span>
        <input
          type="number"
          min={0}
          max={20}
          value={~~(value / 60)}
          onInput={({ target: { value } }) => onInput(+value, true)}
        />
        m
      </span>
      <span>
        <input
          type="number"
          min={-1}
          max={60}
          value={value % 60}
          onInput={({ target: { value } }) => onInput(+value)}
        />
        s
      </span>
    </div>
  );
}

I recently got a really really nice sidebar for chrome but sadly when openened it spans over the website content, so I quickly learned some browser extensions basics and even got it to work on most pages, I just add padding to the body, and the sidebar no more spans over content, in theory.

That works on most of the pages however not om certain sites like youtube.com, wikipedia.com, reddit.com, i discovered.

Has some more advanced dev any ideas to improve to make this work on all pages?

// content.js

const currentDomain = window.location.hostname;

if (currentDomain.includes("wikipedia.org")) {
 console.log("Error Site is Wikipedia")
} else {

 document.body.style.paddingLeft = '60px';

}

{
 "manifest_version": 3,
 "name": "Sidebar Helper",
 "description": "Adds spacing to make sidebars not overlap website content.",
 "version": "1.0.1",
 "icons": {
 "48": "icon.png"
 },
 "action": {
 "default_title": "Sidebar Helper",
 "default_popup": "popup/popup.html"
 },
 "permissions": ["activeTab", "storage"],
 "host_permissions": [],
 "background": {
 "service_worker": "service-worker.js"
 },
 "content_scripts": [{
 "js": ["content.js"],
 "matches": ["<all_urls>"]
 }]
}

service-worker: empty
popup: not really used

I tried various styles manually to body.
For example on wikipedia it kinda works, the spacing works, but is after the sidebar and now to the full left.

I expect it to work on all pages.

Description:

I’m currently working on a Vue 3 project and encountering difficulties with props binding and copying. I’ve read the documentation and tried a few approaches, but I’m still facing the following issue:

While Parent component init the data, the child component is consuming the Data with props.
The child component has it own “local state” with ref and when init the child components the “local state” is init with the props that for some reason also change the parent while the “local state” is chaning:

const props = defineProps({
  objectDataFromParent: {
    type: Object
  },
});

const localState = ref({})

onMounted(async () => {
  
localState.value = props.objectDataFromParent // this I assume create the bind and also affect the parent for some reason while props is read only

});

What I’ve Tried:

Since for some reason the bind is too strong in Vue 3 (this thing didnt happend to me in vue 2 I assume since of option API. The Bind of the local state to the props affect also the parent, that means that every change of “localState” it affect the parent props that affect again the “localState” and gets into infinite loop.

The solution that I have tried is:

1. Make a cloneDeep with lodash (Didnt work since of Proxy object of the props I assume).
2. Cancel the props reactivity with JSON.parse(JSON.strigify())...
3. Make the bind as is and then point on a specific attribute (key) that I would like and then make of it a shallowCopy :

shallowCopyOfAttribute.value = {...localState.value.randomKey}

I would like to understand few things :

1. What is the best approach for this situation while I dont want to manipulate the Parent props.
2. Why does it happens ?
3. When would you use the “powerful binding” of bind a props to localState that change the parent.

I really thought its a Vue bug but in a lot of research explanined that this is expected behavior of VUE 3 Setup API.

Thanks for the reading and hope that we will have a wonderful time 🙂

Okay, I’ll update this with code later, but I wanted to put this out there for the time being to see if anyone can help.

So I’m making a mobile version of a webapp that I’m making. The mobile version has a grid of 60 images. All images fit close together like a mosaic with portrait photos spanning 1×2 and landscape 1×1. Images enlarge when scrolled into a central point on the screen. Portrait becomes 2×3 and landscape becomes 2×2. The problem that I’m having is grid items wrapping, which de-centers items, or if the grid item is at the end of the row it wraps to the next row which put it outside of the viewport.

Some things I’ve tried:

Making grid columns and rows 1px and grid items span 120×100 or 120×200 to control the widths of the outer most columns in order to shrink it when grid item enlarges.

Scaling grid items span based on its’ distance from the center point. This allows me to modulate the growth one span at a time, which I thought would make the wrapping less jarring but it doesn’t.

I’m considering combining the two.

I need to find a way to keep grid items from wrapping but also make 6 columns with 10 rows. I’ve added blank grid items at the start and end of each row but am yet to successfully shrink them and enlarge the photo/grid item without a jarring effect.

if there was a way to keep the centered item center even when it wraps, that would help too.

sorry there’s no code yet but I hope this was descriptive enough. Thanks in advance.

Okay, I’ll update this with code later, but I wanted to put this out there for the time being to see if anyone can help.

So I’m making a mobile version of a webapp that I’m making. The mobile version has a grid of 60 images. All images fit close together like a mosaic with portrait photos spanning 1×2 and landscape 1×1. Images enlarge when scrolled into a central point on the screen. Portrait becomes 2×3 and landscape becomes 2×2. The problem that I’m having is grid items wrapping, which de-centers items, or if the grid item is at the end of the row it wraps to the next row which put it outside of the viewport.

Some things I’ve tried:

Making grid columns and rows 1px and grid items span 120×100 or 120×200 to control the widths of the outer most columns in order to shrink it when grid item enlarges.

Scaling grid items span based on its’ distance from the center point. This allows me to modulate the growth one span at a time, which I thought would make the wrapping less jarring but it doesn’t.

I’m considering combining the two.

I need to find a way to keep grid items from wrapping but also make 6 columns with 10 rows. I’ve added blank grid items at the start and end of each row but am yet to successfully shrink them and enlarge the photo/grid item without a jarring effect.

if there was a way to keep the centered item center even when it wraps, that would help too.

sorry there’s no code yet but I hope this was descriptive enough. Thanks in advance.

I am running out of memory when running the code.

When running with iterations = 33, I get an error:

Mark-sweep 4622.7 (4655.5) -> 4212.1 (4244.9) MB, 2.0 / 0.0 ms (average mu = 0.993, current mu = 0.984) allocation failure; scavenge might not succeed

I am not entirely sure what this error means and couldn’t find much information online about it, can someone please help me? I am using VSC IDE if that helps.

function run(vals, count) {
let total = 0.5;
let { r, coef, cons, mod } = { ...vals };

        const startTime = performance.now();
    
        for (let j = 0; j < count; j++) {
            const newR = [];
            const newCoef = [];
            const newCons = [];
    
            for (let i = 0; i < r.length; i++) {
                const calculation = (coef[i] * r[i] + cons[i]) % mod;
    
                if (calculation === 0) {
                    if (coef[i] >= mod) {
                        newR.push(r[i], r[i] + mod);
                        newCoef.push(coef[i], coef[i]);
                        newCons.push(cons[i], cons[i]);
                    } else {
                        total += 1 / mod;
                    }
                } else {
                    newR.push(r[i], r[i] + mod);
                    newCoef.push(3 * coef[i], 3 * coef[i]);
                    newCons.push(3 * cons[i] + mod / 2, 3 * cons[i] + mod / 2);
                }
            }
    
            [r, coef, cons] = [newR, newCoef, newCons];
            mod *= 2;
        }
    
        const endTime = performance.now();
        const executionTime = endTime - startTime;
    
        return { total: total * 100, executionTime: executionTime.toFixed(2) };
    }    
    
    const initialVals = {
        r: [1],
        coef: [3],
        cons: [1],
        mod: 2,
    };
    
    const iterations = 32;
    
    const result = run(initialVals, iterations);
    console.log(`Iterations: ${iterations}, Total: ${result.total}%, Execution Time: ${result.executionTime}ms`);

I enter a command in visual studio code, namely in javascript let a = 10 or 2+2 and visual code does not respond to me at all, that is, it is not underfined and not 4. What am I doing wrong? code runner is installed, node js is also installed. Tell me pleaseenter image description here

I enter a command in visual studio code, namely in javascript let a = 10 or 2+2 and visual code does not respond to me at all, that is, it is not underfined and not 4. What am I doing wrong? code runner is installed, node js is also installed. Tell me please

I am making my first React application. Upon making the frontend, I ran into the following error:

Uncaught SyntaxError SyntaxError: Unexpected token '<'
    at moduleStrategy (node:internal/modules/esm/translators:118:18)
    at callTranslator (node:internal/modules/esm/loader:273:14)
    at moduleProvider (node:internal/modules/esm/loader:278:30)
    --- await ---
    at runMainESM (node:internal/modules/run_main:53:21)
    at executeUserEntryPoint (node:internal/modules/run_main:79:5)
    at <anonymous> (node:internal/main/run_main_module:23:47)
Process exited with code 1

This is my app.js file

import './App.css';
import axios from "axios";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    axios.get("http://localhost:3001/users").then((response) => {
      console.log(response);
    });
  }, []);

  return (
    
    <div className="App">
    
    </div>
    
  );
}

export default App;

I added “type”: “module” to my package.json file and changed the file name of my app.js to app.mjs but it still didnt make any difference.

Fairly new with JavaScript, and I am creating this project from The Odin Project, and inside the assignment section on number 4, it is telling me to “…separate your application logic (i.e. creating new todos, setting todos as complete, changing todo priority etc.).”

I am not sure by what it means to separate your application logic, though I was originally thinking of adding crud functions to the object themselves. But it got me thinking some more…

Is it better practice to separate the CRUD operations from the object itself to adhere to separation of concerns and have the application more maintainable?

What I was originally thinking:

class Todo {
    constructor(title, desc, dueDate, ...) {
        this.title = title;
        this.desc = desc;
        this.dueDate = dueDate;
        // ...
    }

    createTodo(toDo) {
        // Logic to create a new Todo
    }

    // Other CRUD methods
}

What I am thinking is better:

// User module
import ToDoHelper from './todoHelper';

class ToDo {
    // ToDo-related methods
}

export default ToDo;

// Usage
ToDoHelper.createToDo({
    // ...
});

// ToDoHelper module
class ToDoHelper {
    static createToDo(toDoData) {
        // Logic to create a ToDo
    }
    // Other CRUD methods...
}

export default ToDoHelper;

Or if there is another design pattern that I can use for JavaScript that I could implement?

Note: First time posting a question. If this is not the way to post questions on StackOverflow, I will edit/remove this question.

I have a jQuery code that needs to be converted into Javascript. It seems as a simple code… Unfortunately, the online converters totally failed doing this job. I was quite surprised that there are no tools to do this.

$('#spinimg, #spin').click(function(){
        $('#spinimg').css({'animation' : 'rotation 4s', 'animation-fill-mode' : 'forwards'});
        setTimeout(function() {
            $('.js_success-popup').toggleClass('popup--visible');
            $('body').css('overflow', 'hidden');
        }, 4300);
    });

For example, one of the converters returned this one:

document.querySelector('#spinimg, #spin').click(function(){
        document.querySelector('#spinimg').css({'animation' : 'rotation 4s', 'animation-fill-mode' : 'forwards'});
        setTimeout(function() {
            document.querySelector('.js_success-popup').toggleClass('popup--visible');
            document.querySelector('body').css('overflow', 'hidden');
        }, 4300);
    });

When i use a framer-motion in my component i get this type of error
What it could be?
Server Error
Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
node_modulesframer-motiondistescontextMotionConfigContext.mjs (6:42)
(rsc)/./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs
file:///C:/Users/lifec/OneDrive/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%20%D0%94%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC/wifionnext/.next/server/vendor-chunks/framer-motion.js (310:1)
webpack_require
file:///C:/Users/lifec/OneDrive/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%20%D0%94%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC/wifionnext/.next/server/webpack-runtime.js (33:42)
eval

I tried to reinstall react, framer-motion. I have all imports

I want to take user input in Node JS Console. As we take input from user in C++ console like
cin>>takeInput;

I didn’t try any method because I don’t know much about Node JS. I am just beginner in learning Node JS. I tried the prompt-sync method of NodeJS by googling but I didn’t succeed. I read NodeJS documentation and did as documentation says but still I am not getting the results which I was expecting.

I am making todo list with JS and jQuery. And I have come across a problem where, I am appending the button into the HTML with JS (code below). And the problem is that the button is appended with class to it. The class is set to just give the button width, height ,bacground-color, color, border, and border-radius.

The problem apears when I add the border-radius property to the button. The border becomes round and thas okay, but on the places where border shinked it is now white (image below).

But if I just put a button element in HTML code it works normaly. This is happening only when I am appending the button.

Does anyone knows why is this happening, and how can I fix this.

**//Everything is happening on a button click**


**//Here is the css class**

.btn{
    width: 30px;
    height: 30px;
    background-color: var(--boja1);
    color: var(--boja4);
    border: 2px solid var(--boja4);
    border-radius: 20px;
}

**//Here I am appending a div element to html**

var boxx=document.createElement("div");
boxx.innerHTML=`<div class="box" id="box"></div>`;

txt1.before(boxx);

**//Here I am apending not important P thag to the div eleement**

var element=document.createElement("p");
element.innerHTML=`<p class="newItem" id="new`+ne+`" >`+text+`</p>`;

$("#box").append(element);

**//And here I am appending the button that is causing me the problem  to the P thag above**

var bt=document.createElement("button");
bt.innerHTML=`<button class="btn" id=""> &#x2715</button>`


$(`#new`+ne+``).append(bt);

This is how the button looks before adding the border-radius property in css

ANd this is how it looks after I add it

//HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="td.css">

    <script src="https://code.jquery.com/jquery-3.7.1.min.js" 
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
    crossorigin="anonymous"></script>
</head>
<body>
    
    <div class="mDiv">

        <p class="naslov" id="naslov">ToDo List  </p>

        <div class="mmDiv" id="mmDiv">
            <input type="text" id="txt1" class="txt1">
            <button class="button1" id="button1"> Add</button>
        </div>
    </div>

    <button id="delete" class="delete">Delete</button>
    <button> <button class="btn">dwad</button> </button>
    
    


    <script src="td.js"></script>
</body>
</html>





//CSS CODE

*{
    padding: 0px;
    margin: 0px;
    border: 0px;
    outline: 0px;
    list-style-type: none;
    text-decoration: none;
    color: black;
    transition-duration: 0.5s;
    }
body{
     /* background: linear-gradient(45deg, var(--boja3) 10%, var(--gradient2) ) ; 
     --boja4: rgb(20,8,42);
    --boja1: rgb(252,245,219); 

     --boja3: rgb(212,149,143);
    --gradient2: rgb(189,156,173);  */

    background-color: var(--boja3);
    --boja1: #534859;
    --boja2: #FBF0E8;

    --boja3: #FBD0D0;
    --boja4: #F9688D;
    


    margin: 0.1px;
    overflow-x: hidden;
}
.n{
    display:none;
}

.mDiv{
    width: 600px;
    height: 820px;
    background-color: var(--boja1);
    position: absolute;
    top: 5%;
    left: 35%;
    border-radius: 10px;
    padding: 5px;
    /* text-align: center; */
}
.naslov{
    font-size: 40px;
    color: var(--boja4);
    font-weight: bold;
    text-shadow: 0px 0px 30px var(--boja4);
}
.txt1{
    font-size: 20px;
    padding: 5px;
    outline: 2px solid var(--boja4);
    border-radius: 10px;
    margin-left: 130px;
    background-color: var(--boja1);
    color: var(--boja4);
    box-shadow: 0px 0px 20px var(--boja4);
}
/* .txt1:focus{
    background-color: var(--boja4);
    color: var(--boja1);
} */
.button1{
    padding: 5px;
    background-color: var(--boja1);
    color: var(--boja4);
    outline: 2px solid var(--boja4);
    font-size: 20px;
    border-radius: 10px;
    margin-left: 5px;
    box-shadow: 0px 0px 20px var(--boja4);
}
.button1:hover{
    background-color: var(--boja4);
    color: var(--boja1);
    transform: scale(110%);
    transition-duration: 0.2s;
    box-shadow: 0px 0px 30px var(--boja4);

}
.button1:active{
    transform: scale(80%);
}
.newItem{
    color: var(--boja4);
    font-size: 40px;
    text-shadow: 0px 0px 5px var(--boja4);
    background-color: var(--boja1);
    /* margin-left: -240px;
    margin-top: 100px; */
    margin-left: 30px;
    padding-bottom: 10px;
    z-index: 20;
    /* border-radius: 20px; */
    /* background-color: transparent; */
}
/* .newItem::before{
    content: '';
    background-color: red;
    width: 20px;
    height: 20px;
    border: 2px solid var(--boja4);

} */
.mmDiv{
    outline:2px solid var(--boja4);
    width: 550px;
    margin-left: 15px;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px var(--boja4);
    margin-top: 20px;
    
}
.box{
   
    width: 550px;
    margin-left: 15px;
    padding: 5px;
    border-radius: 10px;
    margin-top: -5px;
    margin-left: -6px;
    
}
.linija{
    outline: 1px solid var(--boja4);
    width:100%;
    height: 0px;
}
.delete{
    font-size: 20px;
    color: var(--boja1);
    padding: 5px;
    border-radius: 5px;
    background-color: var(--boja1);
    color: var(--boja4);
    outline: 2px solid var(--boja4);
    position: absolute;
    top: 7%;
    left: 61.6%;   
    box-shadow: 0px 0px 20px var(--boja4);
}
.delete:hover{
    background-color: var(--boja4);
    color: var(--boja1);
    transform: scale(110%);
    transition-duration: 0.2s;
    box-shadow: 0px 0px 30px var(--boja4);
}
.delete:active{
    transform: scale(80%);
}
.radio{
    position: absolute;
    margin-top: -32px;
    margin-left: -26px;
    opacity: 0;
    width: 20px;
    height: 20px;
    z-index: 999999;

}
.radio:hover{
    cursor: pointer;
}
.cd{
    margin-top: -34px;
    margin-left: -28px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--boja4);
    background-color: var(--boja1);
}
.cm{
    position: absolute;
    margin-top: -27px;
    margin-left: -24px;
    color: var(--boja1);
    font-size: 20px;
    text-shadow: none;
    z-index: 99;
}
.btn{
    width: 30px;
    height: 30px;
    background-color: var(--boja1);
    color: var(--boja4);
    border: 2px solid var(--boja4);
    border-radius: 20px;
}

//JS CODE

let button1=$("#button1");
let txt1=$("#txt1");
let a=$("#r1");
let text;

let br=0;

let mmDiv=$("#mmDiv");
let x;

let box=$("#box");
let alert=document.createElement("p");
alert.innerHTML=`<p class="alert">You can have up to 15 points on the list!</p>`;

let i=0;
let r=0;
let cd1=0;
let cm1=0;
let ne=0;

function dodaj(){
    txt1.on('input',()=>{
        txt1.css("color","var(--boja1)");
        console.log(x);
        if(x=="Eneter something! "){
            txt1.val("");
            x=" ";
        }
    });

    txt1.focus(()=>{
        if(txt1.val()=="Eneter something! "){
            
            txt1.val("");
            return;
        }
        else{
            txt1.css("color","var(--boja1)");
        }
    });
    if(txt1.val()=="Eneter something! "){
        
        return;
    }
    if(txt1.val()==""){
        txt1.val("Eneter something! ");
        x=txt1.val();
        txt1.css("color","red");
        return;
    }

   
        if(br!=15)
        {
            if(i==0)
            {
                var boxx=document.createElement("div");
                boxx.innerHTML=`<div class="box" id="box"></div>`;
                i=1
            }


            br++;

            txt1.before(boxx);
            console.log("lmao");


            txt1.css("margin-top"," 10px");


            text=txt1.val();

            ne++;
            var element=document.createElement("p");
            element.innerHTML=`<p class="newItem" id="new`+ne+`" >`+text+`</p>`;
            
            var linija=document.createElement("div");
            linija.innerHTML=`<div class="linija"></div>`;

            r++;
            cd1++;
            cm1++;
            
            var del=document.createElement("p");
            del.innerHTML=`<input type="checkbox" class="radio" id="r`+r+`">`

            var cd=document.createElement('p');
            cd.innerHTML=`<p class="cd" id="cd`+cd1+`"></p>`;

            var cm=document.createElement("p");
            cm.innerHTML=`<p class="cm" id="cm`+cm1+`">&#10004</p>`

            var bt=document.createElement("button");
            bt.innerHTML=`<button class="btn" id=""> &#x2715</button>`

            $("#box").append(element);
            $("#box").append(linija);
            $(`#new`+ne+``).append(del);
            $(`#new`+ne+``).append(cd);
            $(`#new`+ne+``).append(cm);
            // $(`#new${ne}`).style.borderRadius("20px");
            $(`#new${ne}`).append(bt);
            // $(`#new`+ne+``).append(bt);
        
            txt1.val("");
            
            console.log(text);
        }
        if(br==15){
            
            txt1.before(alert);
            txt1.css("display","none");
            button1.css("display","none");
            $(".alert").css("color","red");
        }
}
a=$("#r1");
button1.click(()=>{
    dodaj();
});
document.addEventListener("keydown",(dugme)=>{
    if(dugme.key=="Enter")
    {
        dodaj();
    }
});

document.addEventListener("keydown",(dugme)=>{
    if(dugme.key=="/")
    {
        setTimeout(()=>{
            txt1.focus();
        },100);
    }
})

let del=$("#delete");
del.click(()=>{
    $("#box").remove();
    br=0;
    i=0;
    $(".alert").remove();
    txt1.css("display","inline-block");
    button1.css("display","inline-block");
    txt1.val("");
});

txt1.focus(()=>{
    txt1.css("color","var(--boja1)");
    txt1.css("background-color","var(--boja4)");
});

txt1.blur(()=>{
    txt1.css("color","var(--boja4)");
    txt1.css("background-color","var(--boja1)");
});

// $("#cd").css("background-color","var(--boja4)");
// $(`#txt1`).css("background-color","var(--boja4)");
let nb1541=0;
$("body").on("click", `#r1`, () => {
    
    if(nb1541==0){
        $(`#cd1`).css("background-color", "var(--boja4)");
        nb1541=1;
        console.log("Prvi: "+nb1541);
        return;
    }
    if(nb1541==1){
        $(`#cd1`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb1541);
        nb1541=0;
        return;
    }
});
let nb1542=0;
$("body").on("click", `#r2`, () => {
    
    if(nb1542==0){
        $(`#cd2`).css("background-color", "var(--boja4)");
        nb1542=1;
        console.log("Prvi: "+nb1542);
        return;
    }
    if(nb1542==1){
        $(`#cd2`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb1542);
        nb1542=0;
        return;
    }
});
let nb1543=0;
$("body").on("click", `#r3`, () => {
    
    if(nb1543==0){
        $(`#cd3`).css("background-color", "var(--boja4)");
        nb1543=1;
        console.log("Prvi: "+nb1543);
        return;
    }
    if(nb1543==1){
        $(`#cd3`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb1543);
        nb1543=0;
        return;
    }
});

let nb154=0;
$("body").on("click", `#r4`, () => {
    
    if(nb154==0){
        $(`#cd4`).css("background-color", "var(--boja4)");
        nb154=1;
        console.log("Prvi: "+nb154);
        return;
    }
    if(nb154==1){
        $(`#cd4`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb154);
        nb154=0;
        return;
    }
});

let nb155=0;
$("body").on("click", `#r5`, () => {
    
    if(nb155==0){
        $(`#cd5`).css("background-color", "var(--boja4)");
        nb155=1;
        console.log("Prvi: "+nb155);
        return;
    }
    if(nb155==1){
        $(`#cd5`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb155);
        nb155=0;
        return;
    }
});
let nb156=0;
$("body").on("click", `#r6`, () => {
    
    if(nb156==0){
        $(`#cd6`).css("background-color", "var(--boja4)");
        nb156=1;
        console.log("Prvi: "+nb156);
        return;
    }
    if(nb156==1){
        $(`#cd6`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb156);
        nb156=0;
        return;
    }
});
let nb157=0;
$("body").on("click", `#r7`, () => {
    
    if(nb157==0){
        $(`#cd7`).css("background-color", "var(--boja4)");
        nb157=1;
        console.log("Prvi: "+nb157);
        return;
    }
    if(nb157==1){
        $(`#cd7`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb157);
        nb157=0;
        return;
    }
});
let nb158=0;
$("body").on("click", `#r8`, () => {
    
    if(nb158==0){
        $(`#cd8`).css("background-color", "var(--boja4)");
        nb158=1;
        console.log("Prvi: "+nb158);
        return;
    }
    if(nb158==1){
        $(`#cd8`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb158);
        nb158=0;
        return;
    }
});
let nb159=0;
$("body").on("click", `#r9`, () => {
    
    if(nb159==0){
        $(`#cd9`).css("background-color", "var(--boja4)");
        nb159=1;
        console.log("Prvi: "+nb159);
        return;
    }
    if(nb159==1){
        $(`#cd9`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb159);
        nb159=0;
        return;
    }
});
let nb1510=0;
$("body").on("click", `#r10`, () => {
    
    if(nb1510==0){
        $(`#cd10`).css("background-color", "var(--boja4)");
        nb1510=1;
        console.log("Prvi: "+nb1510);
        return;
    }
    if(nb1510==1){
        $(`#cd10`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb1510);
        nb1510=0;
        return;
    }
});
let nb1511=0;
$("body").on("click", `#r11`, () => {
    
    if(nb1511==0){
        $(`#cd11`).css("background-color", "var(--boja4)");
        nb1511=1;
        console.log("Prvi: "+nb1511);
        return;
    }
    if(nb1511==1){
        $(`#cd11`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb1511);
        nb1511=0;
        return;
    }
});
let nb1512=0;
$("body").on("click", `#r12`, () => {
    
    if(nb1512==0){
        $(`#cd12`).css("background-color", "var(--boja4)");
        nb1512=1;
        console.log("Prvi: "+nb1512);
        return;
    }
    if(nb1512==1){
        $(`#cd12`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb1512);
        nb1512=0;
        return;
    }
});
let nb1513=0;
$("body").on("click", `#r13`, () => {
    
    if(nb1513==0){
        $(`#cd13`).css("background-color", "var(--boja4)");
        nb1513=1;
        console.log("Prvi: "+nb1513);
        return;
    }
    if(nb1513==1){
        $(`#cd13`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb1513);
        nb1513=0;
        return;
    }
});
let nb1514=0;
$("body").on("click", `#r14`, () => {
    
    if(nb1514==0){
        $(`#cd14`).css("background-color", "var(--boja4)");
        nb1514=1;
        console.log("Prvi: "+nb1514);
        return;
    }
    if(nb1514==1){
        $(`#cd14`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb1514);
        nb1514=0;
        return;
    }
});
let nb15=0;
$("body").on("click", `#r15`, () => {
    
    if(nb15==0){
        $(`#cd15`).css("background-color", "var(--boja4)");
        nb15=1;
        console.log("Prvi: "+nb15);
        return;
    }
    if(nb15==1){
        $(`#cd15`).css("background-color", "var(--boja1)");   
        console.log("Drugi: "+nb15);
        nb15=0;
        return;
    }
});

I am creating a Kanban board task viewer. In this kanban, I have many tasks and a date. I can drag and drop this into a group. I have a div outside of the draggable component. When I drag a task item to this div, I want to detect it. Is there any way to detect it?

This is what I am trying to achieve.

//MainTasks.vue

<template>
    <div class="min-h-screen py-12 gap-y-6 gap-x-4 grid "
        :class="appstore.view == 'kanban' ? 'grid-cols-2 md:grid-cols-4' : 'grid-cols-1'">
        <div v-for="(task, key) in tasks" :key="key" class="bg-[#F2F4F7] px-3 py-3 rounded-lg">
            <div class="flex justify-between items-center">
                <p class="texlist-groupt-gray-700 font-semibold font-sans tracking-wide text-md">{{ task.taskList.title }}
                </p>
            </div>

            <DraggableCard :list="task?.tasks" :key-value="key"
                :class="appstore.view == 'kanban' ? 'min-h-[400px]' : 'min-h-[100px]'" />

        </div>
    </div>
    <div id="droptarget" ref="dropZone" class="shadow-md w-[300px] left-1/2 fixed bottom-[25px] bg-white translate-x-[-50%] rounded-[25px] justify-center outline-dashed outline-2 outline-sky-700 p-3 gap-x-3 flex items-center drop-zone">
        <div class="pr-3 border-r-2 border-dashed border-r-sky-700">Todo Today</div>
        <div>Todo This Week</div>
    </div>
</template>

//DraggableCard.vue

<template>
    <draggable :modelValue="list" @update:modelValue="list = $event" class="list-group space-y-3" drag-class="drag"
        group="cards" item-key="id" animation="200" forceFallback="true" ghost-class="ghost" tag="ul">
        <template #item="{ element, index }">
            <task-card :key="`${keyValue}${index}`" :key-value="index" :task="element" :tasklistid="list.id"
                class="mt-3 cursor-move relative child-lines"></task-card>
        </template>
    </draggable>
        
</template>
<script setup>
import draggable from "vuedraggable";
const props = defineProps(['list', 'keyValue'])

</script>