Category: javascript

My current code opens up an input via a click by adding a class. I’m having trouble adding a second click that removes the added class when the user clicks off the input. I added a second click event but it just stops my first click event from working.

Is there a different way to approach this using pure JavaScript?

(Commented out failed attempt.)

let searchElement = document.querySelector('#searchElement');
let offCanvas = document.querySelector('#main');

searchElement.addEventListener('click', () => {
  searchElement.classList.add('extendInputSearch');
});


// offCanvas.addEventListener('click', () => {
  // searchElement.classList.remove('extendInputSearch');
// });

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #e1e2f1;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

input {
  width: 100%;
  height: 32px;
  border: none;
  outline: none;
  font-size: 1rem;
}

.inputSearch {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 15px;
  padding: 8px 20px;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.inputSearch:hover {
  border: 1px solid #7e51fa;
}

.inputSearch i {
  color: #7e51fa;
  margin-right: 20px;
}

.extendInputSearch {
  max-width: 400px;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<main id="main">
    <form>
      <div id="searchElement" class="inputSearch">
        <i class="fas fa-search"></i>
        <input type="text" placeholder="Search">
      </div>
    </form>
  </main>

I want to get an image from a blob. And I want to pass the parameter imageToShow in createImageFromBlob , but the function does not see it

Where is the error?

imageToShow: any;
    
...
this.createImageFromBlob(data, this.imageToShow);
...


createImageFromBlob(image: Blob, imageToShow: any) {
  let reader = new FileReader();
  reader.onload = () => {
    imageToShow = reader.result;
  };
  reader.readAsDataURL(image);
}

What’s is the cookies? And what’s its benefits? And me as web dev how to use it?
like I always see it on a lot of sites and I heard about it in lectures.

I wrote a simple page on js and php to live record audio from microphone. Logic is simple:

JS

1. Get chunk of data from mic;
2. Base64 encode it and urlencode it;
3. Send it via POST request;

PHP

4. Base64 decode data;
5. (re)Write to .ogg file;
6. Repeat 1 after delay.

The data is successfully written to file, but when I try to play it, player says that file is broken.

The blob solution from Mozilla guide is worked for me, I want exactly PHP solution with saving (rewriting) to file.

The full code below, what am I doing wrong?

<?php
if(isset($_POST["data"]))
{
file_put_contents("r.ogg", base64_decode($_POST["data"]));
exit;   
}
?>

<script>
var mediaRecorder = null;
let chunks = [];

if (navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
   console.log('getUserMedia supported.');
   navigator.mediaDevices.getUserMedia (
      {
         audio: true
      })
      .then(function(stream) {
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start(2000);
        
        mediaRecorder.ondataavailable = function(e) {
            chunks.push(e.data);
            const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
            chunks = [];
            var reader = new FileReader();
            reader.readAsDataURL(blob); 
            reader.onloadend = function() {
            var data = reader.result.split(";base64,")[1]; 
            requestp2("a.php", "data="+encodeURIComponent(data));
            }
}
      })
      .catch(function(err) {
         console.log('The following getUserMedia error occurred: ' + err);
      }
   );
} else {
   console.log('getUserMedia not supported on your browser!');
}

function requestp2(path, data)
{
var http = new XMLHttpRequest();
http.open('POST', path, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.send(data);
}
</script>

I want to call function with paramter from child compponent, i pass the function as a props and when i call this function its get to her but the paramter that i pass to the function is undiffend.

how can i call this function and send to her parmetrs?

here is my code:

perent function:

  async function doSomething(param){
//here i see in debug that param is undiffend
var do = param*2
console.log(do)
}

the call of the child componnet:

<child doSomething ={()=>doSomething()}/>

child:

export default function child(props) {
    const { doSomething} = props;
return (
            <div  onClick={() => doSomething(3)}>
           <button></button>
            </div>
    
)
 }

I am confused why on converting “8/20/2021” to ISO(cosmosDB format) I am getting “2021-08-19T18:30:00.000Z”?

const event = new Date('8/20/2021');
console.log(event.toISOString()); //"2021-08-19T18:30:00.000Z"

all the date are saved as string in my cosmosdb and hence I was not able to filter based on given date range and as result we ended up converting string to Date but now when I am trying to convert in to cosmos db expected format it gives me incorrect or may be correct date to update my database.

should I go ahead and update DB to ‘2021-08-19T18:30:00.000Z’ inplace of ‘8/20/2021’? or it should be ‘2021-08-20T00:00:00.000Z’?

please suggest

If I have a JavaScript constructor function:

function Foo() {}
Foo.prototype.bar = 123

Now I create a new object from Foo and change the bar property on prototype object.

const foo = new Foo()
Foo.prototype.bar = 321
console.log(foo.bar) // 321

But If I replace Foo.prototype with a object like this:

const foo = new Foo()
Foo.prototype = { bar: 321 }
console.log(foo.bar) // 123

Why the two code snippets’ output is different?

I have a synchronous function myFunction in which I need to retrieve the contents of a website. However, the async parameter I’m currently using is deprecated and I’m only aware of async AJAX requests. Thus I’m looking for a better solution how I can wait for the asynchronous call to finish and process the result synchronously.

The myFunction function is embedded in a library that I cannot modify. Thus there are the following limitations:

• I cannot turn myFunction into a async function
• I cannot use any third-party libraries, only plain javascript and jQuery

    var myFunction = function(url) {
        var mydata = false;

        $.get(
            {
                url: url,
                async: false
            })
            .done(content => {
                // Do something with content.

                if(content === 'xyz') {
                     mydata = content;
                     return;
                }
            });

        return mydata;
    };

I have already looked into Promises and async/await but I couldn’t find a good solution for wrapping async calls. I also didn’t found another method that can make synchronous Get requests. What’s the best way to implement this?

I have the following code

let exampleArr = JSON.parse(localStorage.getItem("persons") || "[]");

let input = prompt("Write Any String");

exampleArr.push(input);

localStorage.setItem("exampleArr ", JSON.stringify(exampleArr ));

console.log(exampleArr);

To read user input and store into an array. However, because this uses local storage the Array is different from website to website. How would I make this work with ALL websites where if I add something to the exampleArr it will be like that for ALL websites? I have tried using the Chrome Storage Sync documentation found here

https://developer.chrome.com/docs/extensions/reference/storage/

But end up getting errors.

Typescript is taking a long time to run, so I used generateTrace from https://github.com/microsoft/TypeScript/pull/40063

It showed that most of the time was comparing complicated classes with their subclasses. E.g. one of the classes is the base Objection model (https://github.com/vincit/objection.js), which is the base class that all my models inherit.

E.g. I have code like:

class User extends Model {}

function doSomething(model: typeof Model) {}

doSomething(User);

I have ~50 models. I think the first time TS encounters each model is slow, then it caches it. It takes about 5s for TS to compare a specific model with the base Model. The Model uses types from several libraries. Here’s a screenshot of the trace, it takes 5min just to compare each model with Model:

Is there a way to get TS to stop comparing Model with itself? I.e. since User extends Model, there’s no need to check the fields it inherited.

This is my gs code:

function onOpen(){
  var ui = SpreadsheetApp.getUi();
  var menu = ui.createMenu("bot")
  menu.addItem("test", "runForm")
  menu.addToUi();
}
    
function runForm() {
  var html = HtmlService.createHtmlOutputFromFile('picbox')
  SpreadsheetApp.getUi().showModelessDialog(html, 'form');
}
    
 function f(filePath) {
    SpreadsheetApp.getActiveSheet().getRange("A15").setValue(filePath)
    return true;
 } 

and this is my html code:
picbox.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body> 
    <input type="file" id="file123" />
    <input type="button" value="send file path"  onClick="func();"/>   
    <script>
      function func() {
        var a = document.getElementById("file123").Value
        google.script.run
        .withSuccessHandler(function(){google.script.host.close();})
        .f(a);
      }
    </script>
    </body>
</html>

when i run it the form apear but the file path dosnt shown on A15 cell. i know that f function calld and working i jusr dont know why the file path dont written.

I want to ask how can I simplify my code? It seems hard to read and has too much if-else condition here. Any way to simplify the code?

if (e.shiftKey && this.idx > 0) {
  this.idx= this.idx - 1;
} else if (!e.shiftKey && this.idx < trapFocus.length - 1) {
  this.idx = this.idx + 1;
} else if (!e.shiftKey && this.idx < trapFocus.length + 1) {
  this.idx= this.idx - 2;
} else if (e.shiftKey && this.idx > - 1) {
  this.idx= this.idx + 2;
}

Im trying to change the a tag href once clicked on it.

    <div class="yotpo-bottomline pull-left  star-clickable" tabindex="0">  
        <span class="yotpo-stars"> 
            <span class="yotpo-icon yotpo-icon-star rating-star pull-left"></span>
            <span class="sr-only">4.0 star rating</span>
        </span>  
        <a href="javascript:void(0)" class="text-m" aria-label="2 reviews" tabindex="-1">2 Reviews</a>   
    </div>  
</div>

I’ve got a greyscale backdrop-filter applied to a .cover behind one of my overlaid menus. I sometimes, with JavaScript, want to set the .cover‘s background-color to an opaque black to darken the background, too.

I have the following CSS being applied to the cover:

body {
    --darkMode: transparent;
}
.cover {
    -webkit-backdrop-filter: grayscale(100%);
    backdrop-filter: grayscale(100%);
    background-color: var(--darkMode); /* Notable Line */
}

The JavaScript that sets the --darkMode variable is just document.body.style.setProperty("--darkMode", "rgba(0, 0, 0, 0.5)");

However, when darkMode is not enabled, and therefore the .cover‘s background-color is transparent, the backdrop-filters don’t work at all, even though when the “Notable Line” is removed, they work perfectly!

Thanks for any insights you might have, and have a splendid day, person who was willing to read this question.

I am using a GeoJSON to draw borders of countries on google map using JS api. I am trying to add a style or texture to polygon of few countries such as in the image attached.
diagonal line texture.