Category: javascript

> *** Dropdown Select-option Vehicle Type ***
<div class="col-md-8 col-sm-8">
<h5><strong>&emsp;Select <c style="color: #880707;">Vehicle</c></strong></h5>
    <select id="name" required>
       <option value="selectVehicle">----- Select Vehicle -----</option>
    <optgroup label="Pick-Up">
       <option value="Light_Truck" id="option_1">Light Truck</option>
    </optgroup>
    <optgroup label="Van">
       <option value="Van" id="option_2">Van (Manual)</option>
    </optgroup>
    <optgroup label="7-Seaters">
       <option value="Innova_AT" id="option_3">Innova (AT)</option>
       <option value="Innova_MT" id="option_4">Innova (Manual)</option>
       <option value="Xpander" id="option_5">Mitsubishi Expander</option>
       <option value="Suzuki_XL7" id="option_6">Suzuki XL7</option>
    </optgroup>
    <optgroup label="Sedan">
       <option value="Vios" id="option_7">Toyota Vios</option>
       <option value="Ciaz" id="option_8">Suzuki Ciaz</option>
       <option value="Mirage_G4" id="option_9">Mirage G4</option>
    </optgroup>
    <optgroup label="Hatchback">
       <option value="Mirage_GLS" id="option_10">Mirage GLS</option>
       <option value="Wigo" id="option_11">Toyota Wigo</option>
    </optgroup>
    </select>
</div>
> *** Days-Weeks-Months Rental Duration Input ***
<div class="col-md-12 col-sm-12">
<h5><strong>&emsp;Rental <c style="color: #880707;">Duration</c></strong></h5>
    <fieldsets>
       <input class="col-md-4" type="text" id="days" name="Days" pattern="d*" placeholder="Days*"/>
       <input class="col-md-4" type="text" id="weeks" name="Weeks" pattern="d*" placeholder="Weeks*"/>
       <input class="col-md-4" type="text" id="months" name="Months" pattern="d*" placeholder="Months*"/>
    </fieldsets>
</div>
> *** Total Cost Output ***
<div class="col-md-6 col-sm-12">
<h5><strong>&emsp;Total <c style="color: #880707;">Cost</c></strong><sup>&emsp;negotiable*</sup></h5>
   <fieldset name="Total">
      <output id="cost"> ₱ 0.00</output>
   </fieldset>
</div>

The script works fine, it would calculate when selecting vehicles then inputting duration of rental, but vise versa it wont calculate, it stays on $ 0.00.

<script>
const rates={
    option_1:[350,2200,5400],
    option_2:[380,2400,6000],
    option_3:[300,1800,4500],
    option_4:[250,1700,4200],
    option_5:[280,1680,4510],
    option_6:[250,1690,4250],
    option_7:[180,1200,3000],
    option_8:[180,1200,3000],
    option_9:[180,1200,3000],
    option_10:[160,980,2500],
    option_11:[160,980,2500]};
    
   const D=[], cost=document.getElementById("cost");
   
   document.querySelector("fieldsets").querySelectorAll("input").forEach(e=>{D.push(e);e.addEventListener("input",calc)});
   document.querySelectorAll("option").forEach(e=>{e.addEventListener("click",calc)});
   
   function calc(ev){
    const prod=document.querySelector("option:checked"),
      r=prod?rates[prod.id]:[0,0,0];
    cost.textContent='₱ '+ r.reduce((a,c,i)=>a+c*(D[i].value??0),0).toFixed(2);
   }
</script>

When inputting rental duration before selecting vehicle type it stays on $ 0.00 and vise versa works fine but after click other option the output stays as is.

The code should download the pdf file but it doesn’t.

Basically wanted to download pdf file from a link and save to my machine.

const puppeteer = require("puppeteer");
(async () => {
  const browser = await puppeteer.launch({
    headless: false,
  });
  const page = await browser.newPage();

  await page.goto(
    "https://www.thecampusqdl.com/uploads/files/pdf_sample_2.pdf"
  );
  const client = await page.target().createCDPSession();
  await client.send("Browser.setDownloadBehavior", {
    behavior: "allow",
    downloadPath: "C:/meu local/",
  });
})();

I’m using a particle.js plugin. And when I switch from canvas to window mode it makes the effect not sync with the mouse. I found out that you need to change the clientx/y to pagex/y in something called Mousemove. Does anyone know how to do that?

I looked over the internet but I couldn’t find anything

I’m just diving into Bootstrap and I’ve started at navbars, so I’ve created a navbar that opens as a toggler menu when screen size is mobile, the problem I have is that I press the menu and it opens but when the menu has dropped down it disappears, then when I press the menu again I see the menu slide back up.

The problem seems to be when the menu is fully open it isn’t visible?

``<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
  `</head>
  <body>
    <!----------------------Navigation bar code:----------------------------->
    <nav class="navbar navbar-expand-md bg-danger navbar-light">
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarTogglerDemo01"
        aria-controls="navbarTogglerDemo01"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <a class="navbar-brand">ELectro</a>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Portfolio</a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script
      src="https://code.jquery.com/jquery-1.12.4.min.js"
      integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
      crossorigin="anonymous"
    ></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"
      ></script>
      </body>
    </html>`
``

I have researched but can’t seem to find anyone who has had a similar problem.

I have multiple YouTube channels and I’m trying to find a way to embed a list or playlist of the latest videos from multiple channels. This is fairly easy to do for one channel, but I would like to combine multiple channels into one feed. I could do this through playlists, but I cannot find a way to auto add latest uploads to the playlists and I do not want to do this manually. Any help would be appreciated thank you.

I have googled to find a solution to no avail, and I tried doing it through a playlist which works but doesn’t auto add the latest videos.

I would like to add, I am not a programmer, nor a web developer, this is just a personal project as I like to mess about and learn new things. My html, js is pretty minimal.

In JavaScript, I am trying to move the values from array object variable into Model Attribute List . Looking for someone’s help to move the values from array into model class List variable from JavaScript and send to Controller post method. Here is the code. While invoking post method, ‘selectedEmployeeId’ should be updated with the values from variable ‘ids’ in JavaScript. selectedEmployeeId[1] = ’34’ and selectedEmployeeId [2] = ’37’ etc. and it should be getting in Post method of the controller.
Model class

public class EmployeeReinstateVM
 {
    public List<string> selectedEmployeeId { get; set; }      

 }

view file

@model EmployeeReinstateVM
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnUpdate").click(function () {
            var ids = $(".selected").map(function () {
                return $(this).attr("employee-id");
            }).get();             
            console.log(ids);           
        })
})
</script

Controller

 [HttpPost]  
  public IActionResult ReinstateEmployee(EmployeeReinstateVM model)
    {
      
    }

enter image description here

I want chekcboxes status to localStorage and when you checked the one, the others will unchecked automatically

            // checkbox tv shows  ====================================
            function save() {   
                const checkbox = document.getElementById("checkbox1");
                localStorage.setItem("checkbox1", checkbox.checked);    
            }
    
              //for loading
              const checked1 = JSON.parse(localStorage.getItem("checkbox1"));
              document.getElementById("checkbox1").checked = checked1;
              window.addEventListener('change', save);


            // checkbox documentary =========================================
            function save() {   
                const checkbox = document.getElementById("checkbox2");
                localStorage.setItem("checkbox2", checkbox.checked);    
            }
       
                //for loading
                const checked2 = JSON.parse(localStorage.getItem("checkbox2"));
                document.getElementById("checkbox2").checked = checked2;
                window.addEventListener('change', save);

When one is checked, the others is unchecked automatically

i have this code to convert English Number to arabic for example 123456789 to ٠١٢٣٤٥٦٧٨٩ in text input how can i change this to conver arabic ٠١٢٣٤٥٦٧٨٩ to 123456789 I want to reverse it

Thank you .

document.getElementById('myTextFieldId').addEventListener("keypress", function(e){
let code=e.keyCode-48;
        if (code>=0 && code<10) {
        e.target.value = e.target.value.slice(0,e.target.selectionStart)
        + "٠١٢٣٤٥٦٧٨٩"[code]
        + e.target.value.slice(e.target.selectionEnd);
        e.target.selectionStart = e.target.selectionEnd = e.target.selectionStart + 1;
        e.preventDefault();
            }
        })

<input type="text" id="myTextFieldId" />

It work to change english to arabic i would like to reverse it .

Quick question on the Quasar Uploader, is there a way to hold the file(s) in state?

The flow I’m trying to accomadate is something like so:

1. Ask user for data
2. Ask user for file
3. Ask user for more data
4. Use all the collected data to perform multiple API requests.

The issue is the file uploader seems to perform the request immediately, which is a problem because I don’t have the information needed at the point I am asking that question (yes, we could maybe move this step to the end, but thats not the point :D).

Factory Function

There is a factory function that you can use, but it seems to be immediately invoked. So unsure how that would work…

For example is something like this possible:

<template>
  <q-uploader :factory="factoryFn" />
</template>

<setup script>
factoryFn(){
  return (user_id, pet_id) => {
      new Promise...
   }
}

// and invoke factoryFn() later?
</script>

I tried variations of the above with no real luck…

I have a number of arrays, all of which have a number of UNIQUE elements in them. One element may be included in more than one array like so:

const folder1 = ["user1", "user2", "user3", "user4"];
const folder2 = ["user1", "user2"];
const folder3 = ["user3", "user4"];
const folder4 = ["user1"];

How would I go about finding all element combinations so that I can group those that appear over and over in the arrays?

For example, in the code above it is obvious that the best solution is:

const group1 = ["user1", "user2"];
const group2 = ["user3", "user4"];

// folder1 consists of both group1 and group2 elements
// folder2 consists of group1 elements
// folder2 consists of group2 elements
const folder1 = ...
const folder4 = ["user1"];

I have some Javascript code that runs a CSS animation. It works fine, but I need to refresh the browser to get it to run again. How can I modify my code to get it to run every time the button is clicked?

Below is the code I used.

/*Javascript*/
document.getElementById('LogoContainer').addEventListener('click',function() {
var c = document.getElementsByClassName('logo-rec');
for (var i = 0; i < c.length; i++) {
c[i].classList.add('logo-animate');
}
})

/*HTML*/    
<button id="LogoContainer">
<div class="logo-rec"></div>
</button>

/*CSS*/    
.logo-animate {
animation-name: MoveLeft;
animation-duration: 3s;  
}
    
@keyframes MoveLeft {
0% { transform : translatex(0px) }
50%  { transform : translatex(-15px) }
100%  { transform : translatex(35px) }
}

else{
    passport.authenticate("local")(req, res, function () {
    res.redirect("/secrets");
    });
}

Why is there no “.” after authenticate(“local”) (here)and before (req, res, function () ………)

I am trying to dequeue an enqueued inbound call to a conference room using PHP/Symfony and the JavaScript Voice SDK.

What I have working now is dequeuing the call to an individual agent. But I want to enable supervisory monitoring and coaching. For this, it seems, I need a conference room.

On the server side I enqueue the call using the default “Assign to Anyone” workflow…

        $voiceResponse = new VoiceResponse;
        $enqueue = $voiceResponse->enqueue('',['workflowSid' => $ccmanager->getWorkflowSid()]);
        $xml = $voiceResponse->asXml();
        $response = new Response($xml, Response::HTTP_OK, ['context-type' => 'text/xml']);
        return $response;

Client side, when one of the agents decides to pick up the call, I dequeue the reservation…

this.dequeueReservation = function(data)
{
    let contactUri = self.getContactUri();
    let reservation = self.getReservation(data.phone_number);
    if(reservation) {
        console.log('before reservation dequeue');
        reservation.dequeue(
            null,
            null,
            'record-from-answer',
            30, // seconds to answer
            'https://d72d-76-18-83-142.ngrok.io/anon/voice/status', // status callback url
            'initiated,ringing,answered,completed',
            contactUri,
            (error, newReservation) => onDequeue(data, error, newReservation)
        );
    }
}

Where getContactUri() is…

this.getContactUri = function() {
    switch(self.agent.call_routing) {
        case 'workstation':
            return 'client:' + self.agent.worker_name;
        case 'business_phone':
            return '+1' + self.agent.business_phone;
        case 'other_phone':
            return '+1' + self.agent.other_phone;
        default:
            return null;
    }
}

So all this works great, but there is no way to add supervisor functions with this approach (apparently). What I need to do (apparently) is to dequeue the reservation to a conference room and then separately connect the agent to the conference room.

This would be easy if I was able to create a contactUri for a conference room. However there does not seem to be a ‘conference_room:” form of the contactUri however.

Alternately I could perhaps, server-side, route the inbound call first to a conference room and then enqueue the conference room. This does not seem possible.

In any event I need the task queue as part of the solution so I can properly route calls to the various agents.

How do I do this?

I am building a game, where the computer makes a patter of four colors and you have to remember the pattern and repeat it.
And it works almost fine, but there is one error which i cant figure out.
When i played a round and lost and the game restarts the level value goes to 2 instead of 1.
And when the new game starts the first two buttons get pressed at the same time.
At the first round everything works fine but the next round not.

var gamePattern = [];

var playerPattern = [];

var buttonColors = ["red", "blue", "green", "yellow"]

var level = 0;



$(".btn").click(function () {
    if (patternDone) {
        pressButton(this.id);
        playerPattern.push(this.id);
        checkAnswer();
    }
});

function resetGame() {
    gamePattern = [];
    playerPattern = [];
    gamePattern.length = 0;
    playerPattern.length = 0;
    patternDone = false;
    level = 0;
    $("h1").html("Press A Key to Start")
    $(document).keypress(startGame);
}

//start
$(document).keypress(startGame);


//start Game
function startGame() {
    level = level + 1;
    console.log("level " + level);
    console.log(level);
    gamePattern = [];
    playerPattern = [];
    createLevel();
    console.log(gamePattern)
    playPattern();
    patternDone = true;
    $("h1").html("Level " + level)
}


//play the patter
async function playPattern() {
    for (k = -1; k < level; k++) {
        d = level - k;
        // console.log(gamePattern);
        abcColor = gamePattern[gamePattern.length - d];
        console.log(abcColor);
        await delay(1000);
        pressButton(abcColor);
        d = 0;
    }
}


//create the level
function createLevel() {
    for (y = 0; y <= level; y++) {
        var randomColor = buttonColors[Math.floor(Math.random() * buttonColors.length)];
        gamePattern.push(randomColor);
    }
}

//update h1
function h1Level() {
    levelCopy = level + 1;
    $("h1").html("level " + levelCopy);
}

//pressButton
function pressButton(colord) {
    // console.log(colord);
    animatePress(colord);
    playSound(nameSound = colord);
}

// Sound
function playSound(nameSound) {
    var audio = new Audio("sounds/" + nameSound + ".mp3");
    audio.play();
}

// animateClick
function animatePress(currentColor) {
    $("#" + currentColor).addClass("pressed");
    // console.log(currentColor);
    setTimeout(function () {
        $("#" + currentColor).removeClass("pressed");
    }, 100);
}

//delay
const delay = millis => new Promise((resolve, reject) => {
    setTimeout(_ => resolve(), millis)
});


//Button click and deciding if its right
async function checkAnswer() {
    if (playerPattern.length === gamePattern.length) {
        if (playerPattern.join(',') === gamePattern.join(',')) {
            $("h1").html("Correct!");
            console.log("correct");
            await delay(1000);
            startGame();
        } else if (playerPattern.join(',') !== gamePattern.join(',')) {
            $("h1").html("Wrong!");
            level = 0;
            console.log("wrong");
            await delay(3000);
            resetGame();
        }
    }
}

I am doing After Effects animation and i’m usually importing the PSD. One thing After Effects doesn’t like at all is layers with the same names, it glitches and it crashes.

Before importing the PSD into AE, i would like to know if there’s a script for PS to check if all the layers have different names and there are no duplicates (just names)

I’ve tried some GTPbot from OpenAI to write me something but it fails miserably.