Category: javascript

I’m trying to make Node.js project in Ubuntu 20.04 and ESLint –fix is not working. ESLint is working but it is not fixing it.

This is my eslintrc.json file

{
  "root": true,
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  },
  "extends": ["airbnb-base", "plugin:prettier/recommended", "eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "quote-props": [
      "error",
      "as-needed",
      {
        "keywords": true
      }
    ]
  }
}

and when I do eslint –fix App.js

  7:5  error  Unquoted reserved word 'while' used as key  quote-props

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Saying it is FIXABLE but not fixing it.

Both not working in Ubuntu terminal and Webstorm –fix on save.

I tried Apply ESLint Code Style Rules and cleanup code in webstorm.
enter image description here

I want to apply autofix.

ive been stuck for this error for several hours, im trying to save my title, description, and image into my mongodb atlas. It only saves title and description but not the image.

When i try to display it on console log it shows this error:
[Object: null prototype] { title: ‘value’, description: ‘value’ }
CONTENT SAVED!

can anyone help me why it says Object: null prototype? thank you in advance

here’s my js file:

const express = require('express')
const router = express.Router()
const multer = require('multer')
const path = require('path')
const bodyParser = require('body-parser')

const User = require('../models/user-model')
const Post = require('../models/post-model')

router.use(bodyParser.json())

const uploadPath = path.join('public', Post.coverImageBasePath)

const imageMimeTypes = ['images/jpg', 'images/png', 'images/gif']
const upload = multer({
    dest: uploadPath,
    fileFilter: (req, file, callback) => {
        callback(null, imageMimeTypes.includes(file.mimetype))
    }
})

//SERVE EJS FILES:

router.get('/', (req, res) => {
    res.render('foodie/home')
})

router.get('/content', (req, res) => {
    res.render('foodie/posts/all')
})

router.get('/content/create', (req, res) => {
    res.render('foodie/posts/new')
})

//SAVE CONTENT
router.post('/', upload.single('coverImage') , async (req, res) => {
    console.log(req.body)
    const fileName = req.file != null ? req.file.filename : null
    const post = new Post({
        title: req.body.title,
        description: req.body.description,
        coverImage: fileName
    })

    try {
        const newPost = await post.save()
        console.log('CONTENT SAVED!')
    } catch (err) {
        console.log(err)
    }
})

this is my model:

const mongoose = require('mongoose')

const coverImageBasePath = 'uploads/contentCover'

const postSchema = new mongoose.Schema({
    title: {
        type: String,
        required: true,
        unique: true
    },
    description: {
        type: String,
        required: true
    },
    coverImage: {
        type: String
    },
    publishDate: {
        type: Date,
        required: true,
        default: Date.now
    }
}, {
    timestamps: true
})

module.exports = mongoose.model('Post', postSchema)
module.exports.coverImageBasePath = coverImageBasePath

This error shows up:

[Object: null prototype] { title: ‘value’, description: ‘value’ }

I was expecting to get a filename and not an Object null

This JavaScript code fetches user data from the ‘https://reqres.in/api/users’ API. It populates a dropdown list (nameFilter) with unique user names fetched from multiple API pages. The user data is displayed in a user-list element, where each user is represented by a user-box containing their name, avatar, ID, and email. Pagination buttons are created to navigate through the fetched user data.

When a user selects a name from the dropdown, it filters the displayed users. If ‘All’ is selected or no name is chosen, all users are shown with pagination. However, there are issues when selecting a specific user from the dropdown: the user data appears on the ‘All’ page, but clicking the same user in the filter list results in a blank display.

The code also includes event listeners for the name filter change, creating pagination buttons, and an initialization function (init()) that sets up the initial state by populating the filter and rendering users.

const userList = document.querySelector('.user-list');
    const nameFilter = document.getElementById('nameFilter');
    const paginationContainer = document.getElementById('pagination');

const apiUrl = 'https://reqres.in/api/users';
let currentPage = 1;
let totalPages = 1;
let allUsers = [];

async function fetchUsers(page) {
  try {
    const response = await fetch(`${apiUrl}?page=${page}`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log('Fetched data for page ' + page + ':', data);
    totalPages = data.total_pages;
    return data.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    return [];
  }
}

async function fetchUserNames() {
  try {
    const response = await fetch(`${apiUrl}?page=1`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    const totalPages = data.total_pages;

    const names = new Set(['All']);
    for (let i = 1; i <= totalPages; i++) {
      const pageResponse = await fetch(`${apiUrl}?page=${i}`);
      const pageData = await pageResponse.json();
      const pageNames = new Set(pageData.data.map(user => user.first_name));
      pageNames.forEach(name => names.add(name));
    }

    return Array.from(names);
  } catch (error) {
    console.error('Error fetching user names:', error);
    return [];
  }
}

async function populateNameFilter() {
  const names = await fetchUserNames();
  names.forEach(name => {
    const option = document.createElement('option');
    option.value = name;
    option.textContent = name;
    nameFilter.appendChild(option);
  });
}

async function renderUsers() {
  try {
    allUsers = await fetchUsers(currentPage);
    const selectedName = nameFilter.value;
    const filteredUsers = (selectedName === 'All' || !selectedName)
      ? allUsers
      : allUsers.filter(user => user.first_name === selectedName);

    userList.innerHTML = '';

    filteredUsers.forEach((user, index) => {
      const userBox = document.createElement('div');
      userBox.className = 'user-box';
      const nameBar = document.createElement('div');
      nameBar.className = 'name-bar';
      nameBar.textContent = `${user.first_name} ${user.last_name}`;
      const userImage = document.createElement('img');
      userImage.src = user.avatar;
      userImage.alt = `${user.first_name} ${user.last_name}`;
      const userDetails = document.createElement('div');
      userDetails.className = 'user-details';
      userDetails.innerHTML = `
        <p>ID: ${user.id}</p>
        <p>Email: ${user.email}</p>
      `;
      userBox.appendChild(nameBar);
      userBox.appendChild(userImage);
      userBox.appendChild(userDetails);

      if (index % 2 === 0) {
        userBox.classList.add('even-box');
      } else {
        userBox.classList.add('odd-box');
      }

      userList.appendChild(userBox);
    });

    if (selectedName === 'All' || !selectedName) {
      createPaginationButtons();
    } else {
      paginationContainer.innerHTML = ''; // Clear pagination buttons if a specific user is selected
    }
  } catch (error) {
    console.error('Error rendering users:', error);
  }
}

nameFilter.addEventListener('change', () => {
  currentPage = 1;
  renderUsers();
});

function createPaginationButtons() {
  paginationContainer.innerHTML = '';
  for (let i = 1; i <= totalPages; i++) {
    const button = document.createElement('button');
    button.textContent = i;
    button.addEventListener('click', () => {
      currentPage = i;
      renderUsers();
    });
    if (i === currentPage) {
      button.classList.add('active');
    }
    paginationContainer.appendChild(button);
  }
}

async function init() {
  await populateNameFilter();
  await renderUsers();
}

init();

Following the official documentation, the following code should produce a working Save to Drive button:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
   data-src="//example.com/path/to/myfile.pdf"
   data-filename="My Statement.pdf"
   data-sitename="My Company Name">
</div>

A variation on this has been working for us for some years in all the relevant browsers. Some time in the last few months, it stopped working in Chrome, Chromium, and Safari, but it still works correctly in Firefox.

In all of the browsers, pressing the button brings up a popup window which allows you to set the destination in your Google Drive. Once you have selected the destination, you press Save, and the popup window disappears. In Firefox, you then see a colourful animation where the Save to Drive button was, and when it’s complete, it tells you where the file was saved and gives you a link. In Chrome, Chromium, and Safari, the popup window disappears, and then nothing happens. The file does not appear at the destination, and there are no errors visible in the JavaScript console.

In Chromium, I’ve tried clearing the browser cache, disabling the ad blocker (uBlock Origin) and switching the security settings to “no protection”, but none of these have made a difference.

The production version is embedded in a Drupal webform, but to rule that out as a contributing factor, I’ve made a simple static site which includes the following code:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
   data-src="/blankfile.txt"
   data-filename="blankfile.txt"
   data-sitename="ASC D10 Placeholder">
</div>

This produces the same behaviour. It works in Firefox, but not in the other browsers I’ve tested. At the time of writing, you can try it out here.

Is anyone else encountering this problem? Do you know of a way to fix it or work around it?

I want to create this effect using HTML, JavaScript, and p5.js, but I don’t know the name of this effect, and I don’t know how to work on it.
https://yalegraphicdesign.tumblr.com/post/182779665334/simone-cutri-mfa-2019

Similarly, I want to make the text wobble like mold or cells, and also want to give it an effect of spreading like below. If the above content is difficult, I would appreciate advice for a similar effect.
https://martingroch.tumblr.com/post/188814239759/poster-for-theatre-meetfactory
https://codepen.io/Mertl/pen/rNvEEYr

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <script>
        const MAX = 1000;
        let particles = [];
        let list = [];
        let axis;
        let count = 0;
        let typedText = 'Macro';
        let inputText = [];
        let graphics;

        function setup() {
            createCanvas(1200, 600);
            colorMode(RGB, 255, 255, 255);
            frameRate(30);
            noStroke();
            noCursor();

            graphics = createGraphics(width, height);
            graphics.textFont("Arial", 300);
            graphics.fill(0);
            graphics.textAlign(CENTER, CENTER);
            graphics.text(typedText, width / 2, height / 2 - 70);
            typedText = "";
            inputText = [];

            count = 0;
            list = new Array(width * height);

            graphics.loadPixels();

            for(let y = 0; y <= height - 1; y++) {
                for(let x = 0; x <= width - 1; x++) {
                    let index = (x + y * graphics.width) * 4;
                    if(graphics.pixels[index] < 128) {  
                        list[y * width + x] = 0;  
                    } else {  
                        list[y * width + x] = 1;  
                    }
                }
            }

            graphics.updatePixels();
            particles = [];
        }

        function draw() {
            if (count < MAX) {
                let i = 0;

                while(i < 3) {
                    axis = createVector(int(random(100, width - 300)), int(random(100, height - 300)));
                    if(list[int(axis.y * width + axis.x)] == 0) {
                        particles.push(new Particle(axis.x, axis.y));
                        i++;
                        count++;
                    }
                }
            }
            background(239);
            for (let i = 0; i < particles.length; i++) {
                let p = particles[i];
                fill(20);
                p.display();
                p.update();
            }
        }

        function keyReleased() {
            if (keyCode == ENTER) {
                typedText = inputText.join('');
                setup();
            } else {
                inputText.push(key);
            }
        }

        class Particle {
            constructor(x, y) {
                this.location = createVector(x, y);
                this.velocity = createVector(0, 0);
                this.scale = random(0.35, 0.9);
                this.radius = this.scale * 45;
                this.border = 15;
            }

            update() {
                let noiseX = noise(this.location.x * 0.005, this.location.y * 0.005);
                let noiseY = noise(this.location.y * 0.005, this.location.x * 0.005);
                this.velocity.x = map(noiseX, 0, 1, -0.5, 0.5);
                this.velocity.y = map(noiseY, 0, 1, -0.5, 0.5);
                this.location.add(this.velocity);

                // Check if the particle is out of the text area
                if(list[int((this.location.y + this.velocity.y) * width + int(this.location.x + this.velocity.x))] == 1) {
                    this.velocity.mult(-1);
                }
            }

            display() {
                ellipse(this.location.x, this.location.y, this.radius, this.radius);
            }
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <script>
        const MAX = 1000;
        let particles = [];
        let list = [];
        let axis;
        let count = 0;
        let typedText = 'Macro';
        let inputText = [];
        let graphics;

        function setup() {
            createCanvas(1200, 600);
            colorMode(RGB, 255, 255, 255);
            frameRate(30);
            noStroke();
            noCursor();

            graphics = createGraphics(width, height);
            graphics.textFont("Arial", 300);
            graphics.fill(0);
            graphics.textAlign(CENTER, CENTER);
            graphics.text(typedText, width / 2, height / 2 - 70);
            typedText = "";
            inputText = [];

            count = 0;
            list = new Array(width * height);

            graphics.loadPixels();

            for(let y = 0; y <= height - 1; y++) {
                for(let x = 0; x <= width - 1; x++) {
                    let index = (x + y * graphics.width) * 4;
                    if(graphics.pixels[index] < 128) {  
                        list[y * width + x] = 0;  
                    } else {  
                        list[y * width + x] = 1;  
                    }
                }
            }

            graphics.updatePixels();
            particles = [];
        }

        function draw() {
            if (count < MAX) {
                let i = 0;

                while(i < 3) {
                    axis = createVector(int(random(100, width - 300)), int(random(100, height - 300)));
                    if(list[int(axis.y * width + axis.x)] == 0) {
                        particles.push(new Particle(axis.x, axis.y));
                        i++;
                        count++;
                    }
                }
            }
            background(239);
            for (let i = 0; i < particles.length; i++) {
                let p = particles[i];
                fill(20);
                p.display();
                p.update();
            }
        }

        function keyReleased() {
            if (keyCode == ENTER) {
                typedText = inputText.join('');
                setup();
            } else {
                inputText.push(key);
            }
        }

        class Particle {
            constructor(x, y) {
                this.location = createVector(x, y);
                this.velocity = createVector(0, 0);
                this.scale = random(0.35, 0.9);
                this.radius = this.scale * 45;
                this.border = 15;
            }

            update() {
                let noiseX = noise(this.location.x * 0.005, this.location.y * 0.005);
                let noiseY = noise(this.location.y * 0.005, this.location.x * 0.005);
                this.velocity.x = map(noiseX, 0, 1, -0.5, 0.5);
                this.velocity.y = map(noiseY, 0, 1, -0.5, 0.5);
                this.location.add(this.velocity);

                // Check if the particle is out of the text area
                if(list[int((this.location.y + this.velocity.y) * width + int(this.location.x + this.velocity.x))] == 1) {
                    this.velocity.mult(-1);
                }
            }

            display() {
                ellipse(this.location.x, this.location.y, this.radius, this.radius);
            }
        }
    </script>
</body>
</html>

I’ve tried various methods using the above images, but I’m frustrated because I don’t know the specific name of the effect. I would appreciate it if you could give me as much advice as possible.

I have a page with multiple divs. I want there to be buttons that, when clicked on, go to the next div. E.g. Div #1 is visible on the page. It has a ‘next’ button on it. When the user clicks the next button, it goes to another div on the same page that was previously hidden/invisible (set to display:none). This is the webpage I’m editing. I’m willing to use non-JS solutions to this if that’s possible but I assume JS is the best/most efficient way to approach this?

I was thinking something like this but copying it didn’t work and neither did anything else I’ve tried no matter how much I modified my code.

I don’t know much about javascript yet so it’s my fault for trying this before having the necessary knowledge but I’m desperate to make it work haha

This is a highly simplified version of what I was trying to do with my code:

CSS:

.entry {
      text-align: left;
      padding-top: 0px;
      padding-bottom: 1px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 15px;
      font-family: Book Antiqua;
      width: 550px;
      height:500px;
      overflow:auto;
      margin: auto;
    }

HTML:

<div class="entry">

<p>paragraph text 1</p>

<button class="next">Next</button>
</div>


<div class="entry" style="display:none;">

<p>paragraph text 2</p>
<button class="back">Back</button>
<button class="next">Next</button>

</div>


<div class="entry" style="display:none;">

<p>paragraph text 3</p>
<button class="back">Back</button>
<button class="next">Next</button>

</div>

Javascript:

$('.next').click(function(){
   $(this).parent().hide().next().show();//hide parent and show next
});

$('.back').click(function(){
   $(this).parent().hide().prev().show();//hide parent and show previous
});

I believe the problem is to do with a lack of a parent element? But I’m not sure.

after i input the ‘npm run dev’ instruct, while compiling, enter image description here
and then a lot of log began to show in the terminal, like this (this are console log in the encrypted JavaScript file), enter image description here
then i have to wait about 2min to start this project again, it’s too much impact on development efficiency.
How can i avoid these logs input in the terminal???

I want to make these logs not printed on the terminal.

I have a reactjs application that is listing an array object of music tracks in a stack. The array maps over a waveplayer component that has play/pause capabilities.

I want to try and fix the components – so that when a user plays one track, and if they try to play another – it pauses the last track – so we don’t have an uncontrollable situation of multiple tracks playing at once.

What is the best way of architecting the flag and control mechanism for this?

https://codesandbox.io/s/modest-lake-8tsz3n

Here is my stack js

import React, { Component } from 'react';

import SoundBite from './SoundBite';

import './SoundStack.scss';

class SoundStack extends Component {

  constructor(props, context) {
    super(props, context);
    this.state = {
        isPlaying: "",
        isStopped: ""
    };
        
        this.isPlaying = this.isPlaying.bind(this);
        this.isStopped = this.isStopped.bind(this);
  }

  componentDidMount(){
  
  }

  isPlaying(resp){
    console.log("isPlaying", resp);
  
    this.setState({
        isPlaying: resp
    })
  }

  isStopped(resp){
    console.log("isStopped", resp);
  
    this.setState({
        isStopped: resp
    })

    //remove from isPlaying
    if(this.state.isPlaying === resp){
        this.setState({
                isPlaying: ""
            })
    }

  }  

  render() {    
        let that = this;

      return(
        <>
                {/*this.state.isPlaying*/}
                {/*this.state.isStopped*/}

            <ul className="sound-stack">
              {
                this.props.stack.map(function(item, i){
                 return (
                  <li key={i}>
                    <SoundBite 
                      id={item.id}
                      title={item.title}
                      artist={item.artist}
                      url={item.track}
                      isPlaying={that.isPlaying}
                      isStopped={that.isStopped}
                      //autoPause={that.state.IsPlaying === item.id? true: false}
                    />
                  </li>
                );
               })
              }
            </ul>
        </>
      )
  }
}

export default SoundStack;

and here is the wave component itself

import React, { Component } from 'react';

import Grid from '@mui/material/Grid';
import WaveSurfer from 'wavesurfer.js'
import Avatar from '@mui/material/Avatar';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import PauseIcon from '@mui/icons-material/Pause';

import MicIcon from '@mui/icons-material/Mic';

import './SoundBite.scss';

class SoundBite extends Component {

  constructor(props, context) {
    super(props, context);
    this.state = {
        isPlaying: false,
        autoPause: this.props.autoPause
    };
 
    this.waveformDomRef = React.createRef();
  }

  componentDidMount(){
    this.startWaveSurfer(this.props.url);
  }

    componentWillReceiveProps(nextProps) {
    // You don't have to do this check first, but it can help prevent an unneeded render
        
        let that = this;

        /*
    if (
      JSON.stringify(nextProps.autoPause) !== JSON.stringify(this.state.autoPause)) {
    //if (nextProps.data !== this.state.data) {
      //console.log("PROPS HAVE CHANGED FOR CHART");        
      this.setState({ autoPause: nextProps.autoPause });       
      console.log("PAUSE THIS RECORDING")        
    }
    */    
  }

  startWaveSurfer(url){
    this.waveformDomRef.current.innerHTML = "";

        const wavesurfer = WaveSurfer.create({
          "container": this.waveformDomRef.current,
          "height": 40,
          "splitChannels": false,
          "normalize": false,
          "waveColor": "#8f8f8f",
          "progressColor": "#5fdd74",
          "cursorColor": "#ddd5e9",
          "cursorWidth": 2,
          "barWidth": 3,
          "barGap": 3,
          "barRadius": null,
          "barHeight": null,
          "barAlign": "",
          "minPxPerSec": 1,
          "fillParent": true,
          "url": url,
          "mediaControls": false,
          "autoplay": false,
          "interact": true,
          "dragToSeek": false,
          "hideScrollbar": false,
          "audioRate": 1,
          "autoScroll": true,
          "autoCenter": true,
          "sampleRate": 8000          
        })

        wavesurfer.on('interaction', () => {
          wavesurfer.play();
        })

    this.setState({ 
      wavesurfer: wavesurfer
    });
  }

  playFile(){
    this.state.wavesurfer.playPause();

    if(this.props.isPlaying){
        this.props.isPlaying(this.props.id);
    }

    this.setState({ 
      isPlaying: true
    });
  }

  pauseFile(){
    this.state.wavesurfer.pause();

    if(this.props.isStopped){
        this.props.isStopped(this.props.id);
    }

    this.setState({ 
      isPlaying: false
    });     
  }

  render() {
    return (
      <div className="sound-bite">
        <Grid container spacing={1}>
            <Grid item xs={12} sm={12} md={12}>

                            <div className="wrapperWave">
                                <h3>{this.props.title}</h3>
                                <h4>{this.props.artist}</h4>
                                
                                <div className="innerWrapper">
                              <div className="controls">
                                  {this.state.isPlaying
                                    ? <PauseIcon className="pauseIcon" onClick={()=>this.pauseFile()} />
                                    : <PlayArrowIcon className="playIcon" onClick={()=>this.playFile()} />
                                  }
                              </div>
                                    <div className="waveForm" ref={this.waveformDomRef} id="waveform"></div>                                    
                                </div>
                            </div>

            </Grid>
        </Grid>     
      </div>
    )
  }
}

export default SoundBite;

Simple but deceptively difficult question:

I got what I was trying to get working here: Using OPFS (Origin Private FileSystem) with SQLite WASM in background.js Chrome Extention (Worker is not defined error)

But, I can’t seem to find where the .sqlite3 file is stored?

I have tried sudo find / -type f -name "mydb.sqlite3" and sudo find / -type f -name "*.sqlite3" searching the entire computer for the file but it doesn’t seem to be found. This tells me I must be missing something fundamental about this?

I know the database is remembering data somehow because I can view the console messages after refreshing the extention and see more and more rows when I read the database.

I have tried the OPFS extention to try viewing the database but that doesn’t work either (refer to screenshot)

I feel like a complete idiot that I can’t figure out where this file is being stored. Anyone know? I just want to be able to view it with an SQLite reader and verify everything is storing correctly in an easier manner. Currently I can query it using SQL commands to verify it works but this is very slow and tedious and I feel unnecessary. In my screenshot it says LIMIT 3, but I can remove that to show all rows just fine just FYI

My project is to make a todo list using the prompt box and the console. so far if I type in q/quit it will stop, and if I enter list it will list all the todo in the console. I already have 2 to-dos embedded in the JS but whenever I enter new it should ask me what I want to add but all it does is list the to-dos.
my code:

let   input = prompt('what would you like to do?')  
const todos = ['Collect Chicken Eggs', 'Clean Litter Box']  
while(  input !== 'quit' &&   input !== 'q'){
  if (  input = 'list'){
    console.log('****************')
    for (let i = 0; i < todos.length; i++){
      console.log(`${i}:${todos[i]}`)
    } 
    console.log('****************')
  } else if (  input === 'new'){
    const newTodo = prompt('OK, what do you want to add');
    todos.push(newTodo);
    console.log(`${newTodo} added to the list`)
  }
  input = prompt('what would you like to do')
}
console.log('ok have a nice day')

Answer:

let   input = prompt('what would you like to do?');
const todos = ['Collect Chicken Eggs', 'Clean Litter Box'];
while (  input !== 'quit' &&   input !== 'q') {
  if (  input === 'list') {
    console.log('*****************')
    for (let i = 0; i < todos.length; i++) {
      console.log(`${i}: ${todos[i]}`);
    } 
    console.log('*****************')
  } else if (  input === 'new') {
    const newTodo = prompt('Ok, what is the new todo?');
    todos.push(newTodo);
    console.log(`${newTodo} added to the list!`)
  } else if (  input === 'delete') {
    const   index = parseInt(prompt('Ok, enter an   index to delete:'));
    if (!Number.isNaN(  index)) {
      const deleted = todos.splice(  index, 1);
      console.log(`Ok, deleted ${deleted[0]}`);
    } else {
      console.log('Unknown   index')
    }
  }
  input = prompt('what would you like to do?')
}
console.log('OK QUIT THE APP!')

I have a page item with the following value

P10_PLOT_ARRAY := ‘{"plots":[{name:"Days on market Sydney (SUA) Houses", value:"Bar" }, {name:"Typical value Brisbane (SUA) Houses", value:"Bar" }, {name:"Typical value Melbourne (SUA) Houses", value:"Line" }]}’

I am using the Dynamic action javescript to search a name and get the value as the following one I am expecting the value “Line”
But getting error as find is not a function how do I fix this.

let arr = $v('P10_PLOT_ARRAY'); 

 //apex.message.alert('array'+resultObject);
var value;
//var arr1 =JSON.parse(arr);  
  var b = arr.find(function(a) {
    return "Typical value Melbourne (SUA) Houses" === a.name;
  });
  apex.message.alert('value'+b);

I have a video with my custom controls.

I need to make the controls available at any time., but when I open fullscreen version of the video, the controls hide.

Here is my code:

var video = document.querySelector(".video");
var toggleButton = document.querySelector(".toggleButton");
var toggleButtonId = document.getElementById("toggleButton");
var progress = document.querySelector(".progress");
var progressBar = document.querySelector(".progress__filled");
var progressId = document.getElementById('progressId');
var volumeBar = document.getElementById('volume-bar');
function togglePlay() {
 if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
 }
}
function updateToggleButton() {
  toggleButtonId.innerHTML = video.paused ? "►" : "❚❚";
}

function handleProgress() {
  const progressPercentage = (video.currentTime / video.duration) * 100;
  progressBar.style.flexBasis = `${progressPercentage}%`;
}

function scrub(e) {
  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
  video.currentTime = scrubTime;
}
volumeBar.addEventListener("change", function(evt) {
    video.volume = evt.target.value;
});
video.addEventListener("click", togglePlay);
video.addEventListener("play", updateToggleButton);
video.addEventListener("pause", updateToggleButton);

video.addEventListener("timeupdate", handleProgress);
progressId.addEventListener("click", scrub);
var mousedown = false;
progressId.addEventListener("mousedown", () => (mousedown = true));
progressId.addEventListener("mousemove", (e) => mousedown && scrub(e));
progressId.addEventListener("mouseup", () => (mousedown = false));
function toggleFullScreen() {
  if (video.requestFullscreen) {
      if (document.fullScreenElement) {
          document.cancelFullScreen();
      } else {
          video.requestFullscreen();
      }
  }
  else if (video.msRequestFullscreen) {
      if (document.msFullscreenElement) {
          document.msExitFullscreen();
      } else {
          video.msRequestFullscreen();
      }
  }
  else if (video.mozRequestFullScreen) {
      if (document.mozFullScreenElement) {
          document.mozCancelFullScreen();
      } else {
          video.mozRequestFullScreen();
      }
  }
  else if (video.webkitRequestFullscreen) {
      if (document.webkitFullscreenElement) {
          document.webkitCancelFullScreen();
      } else {
          video.webkitRequestFullscreen();
      }
  }
  else {
      alert("Pantalla completa no esta soportada");
  }
}

<html data-bs-theme="dark" >
  <head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

  </head>
  <div>
<video id="video" class="video w-100">
<source src="https://test.loro.ec/www/t/test.loro.ec/images/articles_blocks/608.mp4" type="video/mp4">
</video>
  <div class="controls position-relative" style="top: -50px;margin-left: 8px;">
  <div class="row">
  <div class="col-1">
      <button class="controls__button toggleButton btn" id="toggleButton" title="Toggle Play" onclick="togglePlay()">►</button>
      </div>
      <div class="progress col-5 p-0" id="progressId">
      <div class="progress__filled" style="background: rebeccapurple;"></div>
    </div>
    <div class="col-4">
     <i class="bi bi-volume-up"></i> 
     <input class="form-range" style="width: 80%;" type="range" id="volume-bar" title="volume" min="0" max="1" step="0.1" value="1">
     </div>
  <div class="col-1">
    <button class="btn" onclick="toggleFullScreen()"><i class="bi bi-arrows-fullscreen"></i></button>
    </div>
    </div>
  </div></div>
</html>

Codepen: https://codepen.io/alexvambato/pen/QWYGeGV

I have implemented external library (bootstrap)

I need any answer without the use of jquery

I am trying to make an Electron app that will handle a certain file format, so if someone were to double-click a file of that format in their file explorer and selected the app in the “Open With” dialog that would pop up, the Electron app could use that selected file. How can I do this?

Whenever I trigger a button event, I receive the following error.

Cannot read properties of undefined (reading ‘appendChild’)
TypeError: Cannot read properties of undefined (reading ‘appendChild’)
at HTMLButtonElement.buildProjectForm (http://localhost:8080/index.bundle.js:3577:25)

I can’t figure out why.

index.js:

import { baseAppHtml } from '../view/baseView.js';

baseAppHtml.buildBaseHtml();
baseAppHtml.addProjectBtn.addEventListener('click', baseAppHtml.buildProjectForm)

baseView.js

export const baseAppHtml = {
    body: document.body,
    appHeader: document.createElement('header'),
    appTitle: document.createElement('h1'),
    sideNavSvgCtr: document.createElement('div'),
    sideNav: document.createElement('nav'),
    appCtr: document.createElement('div'),
    projectsDiv: document.createElement('div'),
    **projectsUl: document.createElement('ul')**,
    homeUl: document.createElement('ul'),
    homeDiv: document.createElement('div'),
    addTaskBtn: document.createElement('button'),
    addProjectBtn: document.createElement('button'),
    displayHeader: document.createElement('h1'),

    **projectFormLi: document.createElement('li')**,



    buildBaseHtml() {

        //app header bar
        this.appHeader.innerHTML = `
          <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
                <svg fill="#000000" width="100px" height="100px" viewBox="0 0 52 52" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><path d="M50,12.5H2a2,2,0,0,1,0-4H50a2,2,0,0,1,0,4Z"/><path d="M50,28H2a2,2,0,0,1,0-4H50a2,2,0,0,1,0,4Z"/><path d="M50,43.5H2a2,2,0,0,1,0-4H50a2,2,0,0,1,0,4Z"/></svg>
           

            <!--Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools-->
            <svg fill="#000000" width="100px" height="100px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <g data-name="Layer 2">
                    <g data-name="done-all">
                        <rect width="24" height="24" opacity="0" />
                        <path d="M16.62 6.21a1 1 0 0 0-1.41.17l-7 9-3.43-4.18a1 1 0 1 0-1.56 1.25l4.17 5.18a1 1 0 0 0 .78.37 1 1 0 0 0 .83-.38l7.83-10a1 1 0 0 0-.21-1.41z" />
                        <path d="M21.62 6.21a1 1 0 0 0-1.41.17l-7 9-.61-.75-1.26 1.62 1.1 1.37a1 1 0 0 0 .78.37 1 1 0 0 0 .78-.38l7.83-10a1 1 0 0 0-.21-1.4z" />
                        <path d="M8.71 13.06L10 11.44l-.2-.24a1 1 0 0 0-1.43-.2 1 1 0 0 0-.15 1.41z" />
                    </g>
                </g>
            </svg>`

        this.appHeader.appendChild(this.appTitle);
        this.appTitle.textContent = 'get 'er done';
        this.body.appendChild(this.appHeader);

        //sideNav
        this.homeDiv.innerHTML = `
        <h2>Home</h2>
        `;

        this.projectsDiv.innerHTML = `
        <h2>Projects</h2>
        `;

        this.projectFormLi.innerHTML = `
        <form action="">
            <input type="text" placeholder="Project Title">
            <button>Add</button>
            <button>Cancel</button>
        </form>
        `;

        this.addProjectBtn.textContent = 'Add Project';
        this.addTaskBtn.textContent = 'Add Task';

        this.homeDiv.appendChild(this.homeUl);
        this.projectsDiv.appendChild(this.projectsUl);
        this.sideNav.appendChild(this.homeDiv);
        this.sideNav.appendChild(this.projectsDiv);
        this.sideNav.appendChild(this.addProjectBtn);
        this.body.appendChild(this.sideNav);

        this.appCtr.appendChild(this.displayHeader);
        this.appCtr.appendChild(this.addTaskBtn);
        this.body.appendChild(this.appCtr);

    },

    **buildProjectForm() {
        this.projectsUl.appendChild(this.projectFormLi);
    }**
}

Can someone help me resolve this?

Since I am using Webpack with HtmlWebpackPlugin and running it via web-dev-server. I don’t believe it’s an issue with where/when my script is located and running in the html file. Also the first function runs no problem. I’m just learning the import/export es6 modules content and I’m attempting to implement it. I’m also trying to implement an MVC structure which is a concept I’m very new to. It’s why I’ve separeted the code in this way.

Auto playing video in the HTML5 gives an exception:

DOMException: play() failed because the user didn't interact with the document first.

There is a workaround by muting the video first.

I’m wondering how is youtube able to get around this restriction and not have to mute their videos (if you navigate to a youtube video URL directly in incognito, it plays on it’s own).

Note: muting and unmuting the video doesn’t work