Category: javascript

I recently started to love CLIs and decided to create a CLI where if we call the CLI and write music video from YouTube or any other platform for instance, then it will print the top 10 results from which user can select which video he wants to play and after that, it will automatically open in vlc or mpv video player. I am just creating this project for fun, I don’t have any idea where to start, I just want guidance like which packages are required and a way to make it from NodeJS, any help would be appreciated thanks.

I am trying to align my vehicle in the direction of the road using one map but can’t seem to figure out how. a) I cant figure out a way to get the direction to head inorder to rotate the marker

    displayMarkers(info: { location: number[]; name: string; plate: string; }){
    var greenIcon = L.icon({
      iconUrl: '/assets/images/truck-top.png',
      iconSize:     [40, 30], // size of the icon
      shadowSize:   [50, 64], // size of the shadow
      iconAnchor:   [20, 20], // point of the icon which will correspond to marker's location
      shadowAnchor: [4, 62],  // the same for the shadow
      popupAnchor:  [-3, -26] // point from which the popup should open relative to the iconAnchor
  });

    var loc = info['location']

    //console.log([location[0],location[1]]);
    var DriverName =info['name']
    var plateNo= info['plate']

    //add the popUp HTML
    var customPopup = `
    <p style="margin-bottom:10px"><b>PlateNumber: ${plateNo} </b></p> 
    <p style="margin:0px"><b>Trucker name: ${DriverName}</b></p>
    <hr style="width:100%", size="1", color=black>  
    <p style="color:red;margin:0px">Dispalys if any alert raised in vehicle</p>
    `;
  

  // specify popup options 
  var customOptions =
    {
    'maxWidth': '400',
    'width': '200',
    'className' : 'popupCustom'
    }
    
    //! add the marker and attach popup
    const marker= L.marker([loc[0],loc[1]],{icon: greenIcon}).addTo(this.map);
    marker.bindPopup(customPopup)
   
   }

This is my marker function and
The map image

I have an Excel file. In Excel, I have multiple sheets and in a sheet, there are multiple tables.

I need to catch tables data in different arrays. I have use below package for node js.

const ExcelJS = require('exceljs');

const workbook = new ExcelJS.Workbook();
await workbook.xlsx.readFile('test.xlsx');

const sheet = workbook.getWorksheet('Global variables');
const table = sheet.getTable('Commodities_prices');

I have already found the list of all the tables in the single sheet but not able to find all the data of the particular table

I have following structure in Vue3 template:

template:
/*html*/
`<div class='element1' @click='onClick'>
    <img :src='image_url' />
    <p>{{desc_text}}</p>
</div>`,
data() {
    return {
        image_url: "path/to/image",
        desc_text: "Some text goes here"
    }
},
methods: {
    onClick(e) {
        console.log(e);
    }
}

Depending on where I click, console outputs e.target to be either <img>, <p> or <div class='element1'>, and it will have e.path set to array of elements, from the element that was topmost under the pointer to the bottom-most, while currentTarget is set to null.

I am looking for a solution where event handler would be called with e.target that points to the element that has @click listener added, in this case, <div class='element1'>. Not to point to any of it’s children.

I’ve been looking at Vue3 documentation on the event bubbles, but so far no modifiers fit my need.

For example @click.self will only fire if e.target is the element that has the event listener, however, if pointer was above any of it’s children, it will not fire.

Right now, I use pointer-events: none; styling on all children elements I don’t want to have their own pointer event handling, which appears to have sufficient coverage. However, I’m surprised if Vue does not have any option on it’s own to handle this case, maybe I am missing it?

I’ve read through Vue3 Event Modifiers document, but no option listed there does this.

In some cases, I have dozen of sub-elements in an element (eg. a card showing image, title, paragraph etc.), and I’d like entire element to be one big button to click on, with just one @click event handler set.

I’m trying to hit an URL and upon hitting that I will hit consecutive URLs.

Both in Postman and Ruby (I’m using NET HTTP), I’m getting an error saying, “enable Javascript for website to function properly”.

But in browser, everything works fine.
In browser, if I turn off javascript, I see the same error.

Question:
Is it possible to simulate same browser experience in Postman or Ruby NET:HTTP ?

I am trying to test a function by passing in a date as a parameter to a function but I’m not to sure where I’m going wrong.
It gives an error of “Argument of type ‘number’ is not assignable to parameter of type ‘Date’.” when the code is structured this way:

import { Component, OnInit } from '@angular/core';
import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';

@Component({
  selector: 'app-fa-daform',
  templateUrl: './fa-daform.component.html',
  styleUrls: ['./fa-daform.component.css']
})
export class FADAFormComponent implements OnInit {

  constructor(private damageAssessmentReportService : DamageAssessmentReportService) { }
  
  //assessmentDescription: string, author: string, reportDateTime: Date
  createNewDAReport(){
    this.damageAssessmentReportService.createDAReport('Testing1','Testing2', 2022-10-10).subscribe(()=>{

    })
  }

  ngOnInit(): void {
  }

}

But changes to “Argument of type ‘string’ is not assignable to parameter of type ‘Date’.ts(2345)” when the code is changed to :

import { Component, OnInit } from '@angular/core';
import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';

@Component({
  selector: 'app-fa-daform',
  templateUrl: './fa-daform.component.html',
  styleUrls: ['./fa-daform.component.css']
})
export class FADAFormComponent implements OnInit {

  constructor(private damageAssessmentReportService : DamageAssessmentReportService) { }
  
  //assessmentDescription: string, author: string, reportDateTime: Date
  createNewDAReport(){
    this.damageAssessmentReportService.createDAReport('Testing1','Testing2', '2022-10-10').subscribe(()=>{

    })
  }

  ngOnInit(): void {
  }

}

I have a variable called definedArray that I’d like to set to the first array in conditional that is not empty. Is there a simpler/cleaner away to achieve this?

Current Code

const definedArray = this.state.priceRange.length ? this.state.priceRange : filterParams.length ? filterParams : defaultPriceRange

I originally thought this may work but found the || operator set my variable with empty array:

const definedArray = this.state.priceRange || filterParams || defaultPriceRange

I want to fetch data for a dependent API call and render the returned data as a list or table.
Here’s my code below

function Informal() {
  const [myLga, setMyLga] = useState([]);
  const [ward, setWard] = useState([]);
  const [wardCount, setWardCount] = useState([]);
  const [facility, setFacility] = useState([]);
  const [selectedLga, setSelectedLga] = useState("");
 

  const getLga = async (e) => {
    try {
      const fetchLocal = await Axios.get(
        "https://pshs3.herokuapp.com/informal/counts"
      );
      const item = Object.keys(fetchLocal.data.data);
    
      setMyLga(item);
    } catch (err) {
      console.log(err);
    }
  };

  const handleWard = (e) => {
    const result = e.target.value;
    Axios.get(`https://pshs3.herokuapp.com/${result}/informal/counts`).then(
      (response) => {
        const myWard = Object.keys(response.data.data);

        setWard(myWard);
       
      }
    );
  };
  
  const handleFac = (e) => {
   const output = e.target.value
    Axios.get(
      `https://pshs3.herokuapp.com/${output}/ward/details`
    ).then((response) => {
        const details = response.data.data;
        console.log(details)
    
    });

  };

  useEffect(() => {
    getLga();
  }, []);



  return (
    
        <Container >

          <div>
//Lga
              <TextField
                name="lga"
                select
                label="LGA"
                value={selectedLga}
                onChange={handleWard}
                SelectProps={{
                  native: true,
                }}
                sx={{
                  width: "23ch",
                }}
              >
                <option value="">Select LGA </option>
                {myLga?.map((curr) => (
                  <option key={curr}>{curr}</option>
                ))}
              </TextField>
             
               
//wards
              <div>
                <div>
                  {ward?.map((dep, id) => (
                    <p
                      style={{
                        cursor: "pointer",
                        borderLeft: "2px green",
                        borderLeftStyle: "solid",
                        paddingLeft: "5px",
                      }}
                      onClick={handleFac}
                      key={id}
                      
                    >
                      {dep}
                    </p>
                  ))}
                </div>
               
              </div>
            
//list of details
              <div>
                <h4>Details</h4>
                <ul>
                  {facility?.map((tul, index) => (
                    <li key={index}>{tul.name}</li>
                  ))}
                </ul>
              </div>
           
          </div>

        </Container>
      
  );
}

export default Informal;

The idea is, Lga is a dropdown while wards should be a list and details is a list. The lga fetch works fine. on selected lga, a fuction triggers to list the wards. finally onclick on the p tags triggers to fetch the details. my issues lies on the handleFac function as it returns an empty array thus not rendering on the UI. please what am i doing wrong here. I appreciate any idea or help

I’m not entirely sure how to fix this. My goal is to call the filereader on the excel doc and then be able to retrieve additional information after the file has been parsed. But sync FileReader is async, when i go to access the obj properties like obj.workbook, it always prints null. How do i resolve this?

So in the code below you’ll notice after i call ‘parse()’ i call console.log('obj.workbook:', obj.workbook) which prints null in the console. I would expect it to print the workbook value assigned in the parse method called prior.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>

  class ExcelDoc {

    constructor(file) {
      this.file = file;
      this.workbook = null;
    }

    // Methods
    parse() {
      var reader = new FileReader();

      reader.onload = () => {
        this.workbook = XLSX.read(reader.result, {
          type: 'binary'
        });
      };

      reader.onerror = function(ex) {
        console.log(ex);
        reader.abort();
      };

      reader.readAsBinaryString(this.file);
    }
  }


  function handleFileSelect(evt) {

    var files = evt.target.files; 
    var obj = new ExcelDoc(files[0]);
    obj.parse()
    console.log('obj.file:', obj.file)
    console.log('obj.workbook:', obj.workbook)
    console.log('obj:', obj)
  }


</script>

<form enctype="multipart/form-data">
  <input id="upload" type=file name="files[]">

  Sheets
  <select id="sheetSelector">
    <option>Choose a sheet</option>
</select>

</form>

<textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>

<script>
  document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>

I wanted the Particles.js to be served as background. However, it only shows inside the Card Component. And also how can I make the particles.js not pass through the card. As of now, the card is like a transparent one where you could just see the lines passing through it. I just wanted the Particles.js to stay behind the Card. How can I do this? Thank you.

I recreated it here: https://codesandbox.io/s/basiccard-material-demo-forked-p644e?file=/Form.js

Card Component

import React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { CardHeader, styled } from "@mui/material";

const StyledCard = styled((props) => <Card {...props} />)(({ theme }) => ({
  maxWidth: 500,
  margin: "0 auto",
  marginBottom: "1rem",
  marginTop: "1rem"
}));

const CardComponent = (props) => {
  const { title, content } = props;

  return (
    <StyledCard sx={{ minWidth: 275 }} elevation={5}>
      <CardHeader title={title} />
      <CardContent>{props.children}</CardContent>
    </StyledCard>
  );
};

export default CardComponent;

Form

import React from "react";
import CardComponent from "./CardComponent";
import { TextField } from "@mui/material";

const Form = (props) => {
  const { children } = props;

  return (
    <CardComponent>
      <form
        style={{
          position: "relative",
          width: "100%",
          height: "200px"
        }}
      >
        <TextField
          label="sample1"
          style={{
            position: "absolute",
            top: "25%",
            left: "50%",
            marginLeft: "-150px",
            width: "300px",
            zIndex: "1",
            color: "red"
          }}
        />

        <TextField
          label="sample2"
          style={{
            position: "absolute",
            bottom: "25%",
            left: "50%",
            marginLeft: "-150px",
            width: "300px",
            zIndex: "1"
          }}
        />
        {children}
      </form>
    </CardComponent>
  );
};

export default Form;

Particles.js

import React, { Component } from "react";
import Particles from "react-tsparticles";

class Canvas extends Component {
  render() {
    return (
      <Particles
        style={{
          position: "absolute",
          top: "0",
          left: "0",
          height: "100%",
          width: "100%",
          margin: "0",
          padding: "0",
          zIndex: "0"
        }}
        options={{
          fullScreen: {
            enable: false
          },
          particles: {
            number: {
              value: 80,
              density: {
                enable: true,
                area: 800
              }
            },
            color: {
              value: "#fbc106"
            },
            shape: {
              type: "circle"
            },
            opacity: {
              value: { min: 0.1, max: 0.4 },
              animation: {
                enable: true,
                speed: 1,
                sync: false
              }
            },
            size: {
              value: { min: 0.1, max: 3 },
              animation: {
                enable: true,
                speed: 2,
                sync: false
              }
            },
            links: {
              enable: true,
              distance: 100,
              color: "#fbc106",
              opacity: 1,
              width: 1
            },
            move: {
              enable: true,
              speed: 1,
              direction: "none",
              random: false,
              straight: false,
              outModes: {
                default: "out"
              }
            }
          },
          interactivity: {
            detectsOn: "window",
            events: {
              onHover: {
                enable: false
              },
              onClick: {
                enable: false
              },
              resize: true
            }
          },
          detectRetina: true
        }}
      />
    );
  }
}

export default Canvas;

Demo.js

import React from "react";

import Particles from "./Particles";

import Form from "./Form";

const styles = {
  root: {
    fontFamily: "sans-serif",
    textAlign: "center",
    height: "100%",
    background: "#222",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  }
};

export default function BasicCard() {
  return (
    <div
    //  style={styles.root}
    >
      <Form>
        <Particles />
      </Form>
    </div>
  );
}

I need to set my jwplayer DVR stream to rewind to -50 seconds on load so when the page is loaded and video starts its automatically delayed 50 seconds from being “LIVE” so any idea how to create a :on load” command? here is my code i need to add it to

<script type="text/javascript" src="https://content.jwplatform.com/libraries/PEeU9yMk.js"></script>
                <script type="text/javascript">jwplayer.key="3SYLbRo6MN5cBDxwpZh3dl1gb0lMTUOos31M5hoAlf4=";</script>
</div>
<script type="text/javascript">
                // jwplayer.key="2U/m9jOYEC49U1j3cNoou7IjxvGS5j03XTpetE5wCVBAwRqhG9pSYWQIMW0=";
                jwplayer.key = '3SYLbRo6MN5cBDxwpZh3dl1gb0lMTUOos31M5hoAlf4=';</script>
<div id="video4">
            </div>
            <script type="text/javascript">
                jwplayer('video4').setup({
                    'skin': 'bekle',
                    logo: {
                        file: '',
                        position: 'top-right',
                        hide: false

                    },
                    'file': "https://bigb9868-bigb9868-us-west-2-ms.global.ssl.fastly.net/bblf23thumb-clips/master/bblf23thumb-clips.m3u8",
                    'title': '',
                    'aspectratio': '16:9',
                    stretching: 'exactfit',
                    'bufferlength': '5',
                    'height': '110px',
                    'width': '620px',
                    'primary': 'hls',
                    'mute': 'true',
                    'controls': 'true',
                    'autostart': 'true',
                    'wmode': 'opaque',
                    'image': '',
                    'abouttext': '',
                    'aboutlink': ''
                });
            </script>

I’m working with a task list application for my website, and have successfully added the tasks to the local storage. However, when I retrieve it, all the previous CSS disappears and the tasks are shown plainly.

How do I retain the original CSS for the retrieved tasks from local storage? The functions for my local storage are as follows:

``const storageInput = document.querySelector('.task__input');

const text = document.querySelector('.task__list');

const saveButton = document.querySelector('.save-btn');

const clearButton = document.querySelector('.clear-btn');


const storedInput = localStorage.getItem('tasksinput')

if(text){
    text.textContent = storedInput
}

const saveToLocalStorage = () => {
    localStorage.setItem('tasksinput', text.textContent)
}

function clearStorage(){
    localStorage.clear();
    task__list.clear();
}

clearButton.addEventListener('click', clearStorage);
saveButton.addEventListener('click', saveToLocalStorage);``

The image here explains my problem more clearly too:
Task List

What is the purpose of the HTML <data> tag? Does anybody use this tag?

How does it differ from the data-* attributes used in other tag elements?

Documentation indicates it is for machine-readable information. What machine?

Is there an example of how the HTML tag <data value=’12345′> Jumbo Shrimp </data> would be used with javascript?
(Reference example at: https://www.w3schools.com/tags/tag_data.asp)

Help, I’ve been using this website called “codepen” to do some javascript coding. But I accidently made it send me infinite prompts, everytime I open the project. Now I can’t access the code. I searched for some time for an answer but I found none. heres a link to the problem: https://codepen.io/Aibel-Roy/pen/zYPBeEW

//I can't post the code because of the infinite prompts. Sorry.

i’m a really newbies with tampermonkey i need help about auto click button without id i already tried many code but nothing worked.

const inputElement = document.querySelector('input[value="reset_otp(46)"]');

    inputElement.addEventListener('click', () => {
    
        // log "Hello" in the console when clicked
        console.log("hello"); 
    
    })
    
    // simulate a click on the input element with the click() method
    inputElement.click();

<a onclick="reset_otp(46)" class="btn btn-flat">Reset</a>