javascript – Page 4231 – Blancer.com Tutorials and projects

JAvascript nested IF within an IF within an IF [closed]

I am having an issue getting the results I want concerning a nested if. I am accustomed to being able to set an if statement based on a previous if statement. Is this not possible in JavaScript?

I have the following code and am not getting the desired response. I want to set the variable PFF to a string based on several conditions. If the filename has a string in the name then check if a the value of another variable is P/F do something different for each occurrence. Then return to the first if and if is NOT then perform another if and and so on.

I have the code below that I am working with:

            var PFF

            if (file.indexOf('string of file variable') >= 0) {
                if (result_P_F = 'P') {
                    PFF = pVEN + file;
                } else {
                    PFF = fVEN + file;
                }
            } else
            if (CustomerCode = 'A') {
                if (result_P_F = 'P') {
                    if (TYPE = 'X') {
                        PFF = 'p5' + file;
                    } else {
                        PFF = 'p4' + file;
                    }
                } else if (TYPE = 'X') {
                    PFF = 'f5' + file;
                } else {
                    PFF = 'f4' + file;
                }
            }  else
            if (CustomerCode = 'B') { 
                if (result_P_F = 'P') { 
                    if (TYPE = 'X') {
                        PFF = 'pC5' + file;
                    } else {
                        PFF = 'pC4' + file;
                    }
                } else if (TYPE = 'X') {
                        PFF = 'fC5' + file;
                    } else {
                        PFF = 'fC4' + file;
                }
            }

Please let me know your solution.

Cypress – error occurs when I installed ‘del’ module, cant open cypress

I installed del module:
https://docs.cypress.io/api/plugins/after-spec-api#Delete-the-recorded-video-if-the-spec-passed

then I configured cypress config but this line:

const del = require('del')

makes that cypress is not working (I cant even select any browser):

When I commented out this line (const del = require(‘del’)), cypress worked normally.

How can I fix it?

I get file in email

I get weird email with file, I opened it with notebook++ and see that JS, what it for and what its doing?

If someone know, if didn’t know, don’t try this, this can be malware/spyware

I didn’t try anything, only want to know what its do

How to Filter by State Using TopoJson Data and D3

I have looked at several other posts about isolating by state in D3 (Display only a single state with counties from a full US counties map), and I can’t seem to integrate it successfully into this fiddle…

https://jsfiddle.net/hz7kea1y/

I’d like to filter the data by state first (including its counties) and then draw the map based on the state selected. Any help or advice is welcomed!

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js" integrity="sha256-tHoAPGoNdhIR28YHl9DWLzeRfdwigkH7OCBXMrHXhoM=" crossorigin="anonymous"></script>
    <title>Choropleth Map</title>
</head>
<body>
    <h2 id='title'>Florida Adult Education</h2>
    <div id='container'>
        <svg id='canvas'>
            
        </svg>
        <div id='rightSide'>
            <div id='tooltip'>

            </div>
            <svg id='legend'>
                <g>
                    <rect x="10" y="0" width="40" height="40" fill="#f16842"></rect>
                    <text x="60" y="20" fill="white">Less than 15%</text>
                </g>
                <g>
                    <rect x="10" y="40" width="40" height="40" fill="#ffa927"></rect>
                    <text x="60" y="60" fill="white">15% than 30%</text>
                </g>
                <g>
                    <rect x="10" y="80" width="40" height="40" fill="#ffe92c"></rect>
                    <text x="60" y="100" fill="white">30% to 45%</text>
                </g>
                <g>
                    <rect x="10" y="120" width="40" height="40" fill="#7aca5c"></rect>
                    <text x="60" y="140" fill="white">More than 45%</text>
                </g>
            </svg>
            <div id='description'>Percentage of adults age 25 and older with a bachelor's degree or higher (2010-2014). Source: <a href='https://www.ers.usda.gov/data-products/county-level-data-sets/download-data.aspx'>USDA Economic Research Service</a></div>

        </div>
        
    </div>
    
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

*{
    font-family: 'Source Sans Pro', sans-serif;
}

html, body{
    min-height: 100%
}

body {
    background-color: #2A2D2D;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FDF1E7;
    margin: none;
}

svg{
    background-color: #305555;
    /*box-shadow: 0px 3px 15px rgba(0,0,0,0.2); */
    /*border-radius: 5px; */
    padding: 10px;
    border-radius: 5px;
}

#canvas{
    min-height: 600px;
    min-width: 950px;
}


.county:hover{
    fill: black
}

g{
    color: #FDF1E7
}

#tooltip{
    visibility: hidden;
    height: auto;
    width: auto;
    margin-top: 2px;
    color: #FDF1E7;
    font-size: 24px;
    margin-bottom: 5px;
}

#legend{
    color: rgb(56, 58, 74);
    font-size: 18px;
    text-align: center;
    min-height: 150px;
    max-width: 180px;
    margin-top: 40px;
    margin-bottom: 40px;
}


#title{
    font-size: 28px;
    color: #FDF1E7;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 30px;
}

#description a{
    text-decoration: none;
    color: #FDF1E7;
    text-align: center;
}

#container{
    display: flex;
    align-items: center;
    width: 100%;
}

#rightSide{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
}

let countyURL = 'https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json'
let educationURL = 'https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json'

let countyData
let educationData

let canvas = d3.select('#canvas')
let tooltip = d3.select('#tooltip')

let drawMap = () => {
 
    canvas.selectAll('path')
            .data(countyData)
            .enter()
            .append('path')
            .attr('d', d3.geoPath())
            .attr('class', 'county')
            .attr('fill', (countyDataItem) => {
                let id = countyDataItem['id']
                let county = educationData.find((item) => {
                    return item['fips'] === id
                })
                let percentage = county['bachelorsOrHigher']
                if(percentage <= 15){
                    return '#f16842'
                }else if(percentage <= 30){
                    return '#ffa927'
                }else if(percentage <= 45){
                    return '#ffe92c'
                }else{
                    return '#7aca5c'
                }
            })
            .attr('data-fips', (countyDataItem) => {
                return countyDataItem['id']
            })
            .attr('data-education', (countyDataItem) => {
                let id = countyDataItem['id']
                let county = educationData.find((item) => {
                    return item['fips'] === id
                })
                let percentage = county['bachelorsOrHigher']
                return percentage
            })
            .on('mouseover', (countyDataItem)=> {
                tooltip.transition()
                    .style('visibility', 'visible')

                let id = countyDataItem['id']
                let county = educationData.find((item) => {
                    return item['fips'] === id
                })

                tooltip.text(county['fips'] + ' - ' + county['area_name'] + ', ' + 
                    county['state'] + ' : ' + county['bachelorsOrHigher'] + '%')

                tooltip.attr('data-education', county['bachelorsOrHigher'] )
            })
            .on('mouseout', (countyDataItem) => {
                tooltip.transition()
                    .style('visibility', 'hidden')
            })
}

d3.json(countyURL).then(
    (data, error) => {
        if(error){
            console.log(log)
        }else{
            countyData = topojson.feature(data, data.objects.counties).features
            console.log(countyData)

            d3.json(educationURL).then(
                (data, error) => {
                    if(error){
                        console.log(error)
                    }else{
                        educationData = data
                        console.log(educationData)
                        drawMap()
                    }
                }
            )
        }
    }
)

Unable to connect to db ConnectionRefusedError [SequelizeConnectionRefusedError]: connect ECONNREFUSED 127.0.0.1:3306

I have the following code. I’m using XAMPP to run a local MySQL database, but I can’t connect to it using sequelize.

import { Sequelize } from "sequelize";

const user_auth_db = new Sequelize('db_name', 'root', '', {
    host: 'localhost',
    dialect: 'mysql',
    port: "3306",
});

try {
    await user_auth_db.authenticate();
    console.log("Connection has been established succesfully");
} catch (error) {
    console.log("Unable to connect to db", error);
}

The error is the following:

parent: Error: connect ECONNREFUSED 127.0.0.1:3306
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3306,
    fatal: true
  },

I tried changing the port, password and user and try it that way but it didn’t work.

Employee_CRUD System

I was working on an employee crud system. To keep a track of employee information . I’m done with the coding part of the application, but there are a few errors that I’m unable to fix so I have attached the files that are showing errors. I’m new at coding so it’s difficult for me to figure this out. If anyone would be kind enough to help me with this it would be great. I have attached app.component.ts, app.module.ts, employee.components.ts , employee.service.ts these files were showing errors . If needed I shall share the rest of the files as well. I tried compiling the code but there were some errors popping, which I was unable to fix. Here is the Github link for the zip file. Link: https://github.com/PratyushSoren1874/employee_crud.git

Get element position inside double nested SVG

How do I get the position of an element that sits inside an SVG element that sits inside SVG element?

<svg width=1280 height=800>
  <g style="transform: translateX(10px) translateY(4px)">
    <svg width=3 height=3 viewBox="0 0 3 3">
      <circle cx=1 cy=3 r=1 />
    </svg>
  </g>
</svg>

The element position I am looking for is the most nested circle element. I don’t need DOMPoint, just its absolute position to the root SVG element. getBBox() does not help me with this, it returns values relative to the element’s parent SVG at best.

error after installing and while compiling react app

the react app has been installed but after trying to compile, it shows 1 error on the browser as well as on the console that

ERROR:

[eslint] Plugin “react” was conflicted between “package.json » eslint-config-react-app » C:UsersDelldesktopmy-appnode_moduleseslint-config-react-appbase.js” and “BaseConfig » C:UsersDellDesktopmy-appnode_moduleseslint-config-react-appbase.js”.

i tried to delete one of the files that have been installed twice however when tried to delete baseconfig, it wouldnt run at all but after deleting package.json it would run but still show the same error that there are two similar files even though i tried deleting it,
i deleted the file after arriving through the path given above, but i dont think that is the correct path, can anyone tell me the path that i should write to arrive at these folders that have similar files or what should i do?
thanks

Tab stuck on child element

I have a div which has tabindex 0 and inside it there are child items with tabindex 0. I can’t tab through children, it gets stuck on the first child. And I can’t go back through shift + tab. Does anyone knows how to tab through children.

I tried changing the tabindex to -1, to change the tabindexes to 1 or 2, to work with on focus, on blur and stoppropagation.

sum total of values inside dynamic inputs with same class and Auto re-sum total of values even I change any value in the input or add or delete row

I want to get the calculation of the sum of the values that are inside these inputs when the page loads automatically, and when I change the values also, the recalculation should be done .and olso when I delete or Add new dynamic row I should get the new sum total include the new value or when I delet row I should get new total .

<table id="dynamic">
        <tr>
          <th class="wd-15p fontColor">Quantity</th>
          <th class="wd-15p fontColor">Amount</th>
        </tr>
        <tr>
          <td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity"/></td>
          <td class="td"><input type="number" value="1000" name="amount[]" class="form-control amount"/></td>
        </tr>
        <tr>
          <td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity"/></td>
          <td class="td"><input type="number" value="1000" name="amount[]"class="form-control amount"/></td>
        </tr>
        <tr>
          <td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity"/></td>
          <td class="td"><input type="number" value="1000" name="amount[]" class="form-control amount" /></td>
          <td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success">Add More</button></td>
        </tr>
      </table>

 <input type="text" class="form-control sum_of_quantity" readonly>             <input type="text" class="form-control sum_of_amount" readonly >

$("#add-btn").click(function() {
$("#dynamic").append('<tr><td class="td"><input type="number" name="quantity" class="form-control quantity"/></td>
 <td class="td"><input type="number" value="1000" name="amount" class="form-control amount"/></td>
 <td class="td2"><button type="button" value="1000" name="add" class="btn btn-danger remove-tr">Remove</button></td></tr>');
  });
  $(document).on('click', '.remove-tr', function() {
    $(this).parents('tr').remove();
  });

    $(document).ready(function() {
      var total =0;
        $('.quantity').each(function() {
          total += parseFloat($(this).val());
          $('.sum_of_quantity').val(total);
        });
        var sum =$('.one').val();
        $(".quantity").on("change keyup", function() {
        sum += parseFloat($(this).val());
      $('.one').val(sum).toFixed(2);
    });
      });

Randomised video background webflow

I’m trying to get a randomised video background for my webflow site. I’ve tried doing it in with Javascript pulling in the following links:

“https://s3.amazonaws.com/webflow-prod-assets/63e4f3713963c5649a7bb382/63f787b42f81b8648e70feda_Goldfish.mp4” 10% of the time

“https://s3.amazonaws.com/webflow-prod-assets/63e4f3713963c5649a7bb382/63f787fb4b2937100792cf14_Black%20Texture.mp4” 45% of the time

and

“https://s3.amazonaws.com/webflow-prod-assets/63e4f3713963c5649a7bb382/63eb5f178ae8e42595f1d524_Fish%20TV.mp4” 45% of the time

This is the code I’ve tried – this was put in section of the custom code in Webflow.

(function() {
  var videoUrls = [
    {
      url: "https://s3.amazonaws.com/webflow-prod-assets/63e4f3713963c5649a7bb382/63f787fb4b2937100792cf14_Black%20Texture.mp4",
      probability: 0.45
    },
    {
      url: "https://s3.amazonaws.com/webflow-prod-assets/63e4f3713963c5649a7bb382/63f787b42f81b8648e70feda_Goldfish.mp4",
      probability: 0.1
    },
    {
      url: "https://s3.amazonaws.com/webflow-prod-assets/63e4f3713963c5649a7bb382/63eb5f178ae8e42595f1d524_Fish%20TV.mp4",
      probability: 0.45
    }
  ];

  var backgroundVideo = document.querySelector('.bg-video');

  // Create an array with one element for each video URL, where each element's value
  // is the URL repeated a number of times proportional to its probability
  var videoUrlsWeighted = videoUrls.reduce(function(acc, curr) {
    var weightedArray = Array(Math.round(curr.probability * 100)).fill(curr.url);
    return acc.concat(weightedArray);
  }, []);

  function playRandomVideo() {
    // Choose a random video URL from the weighted array
    var randomIndex = Math.floor(Math.random() * videoUrlsWeighted.length);
    var randomUrl = videoUrlsWeighted[randomIndex];

    // Set the background video to the chosen URL
    backgroundVideo.style.backgroundImage = 'url(' + randomUrl + ')';
  }

  // Play a random video when the page loads
  playRandomVideo();

  // Play a new random video after the current video has finished
  backgroundVideo.addEventListener('ended', function() {
    playRandomVideo();
  });
  
  // Set the videos to loop
  backgroundVideo.loop = true;
})();

Chart.js tooltip shows only parts of items in the labels on hover

I’m trying to make a Pie Chart using chart.js and react-chartjs-2, but when it is hovered, the tooltip for ‘B Trans’ and ‘B QC’ also shows the label of ‘A Trans’ and ‘A QC’ each in the first line as you can see in the images attached. But I want the first line to be removed from the first line. Can you tell me what the problem is?
Tooltip shows the first A Trans label for A Trans data when hovered And it also shows A label for B data

The codes are:

import React from 'react'
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Pie } from 'react-chartjs-2';
ChartJS.register(ArcElement, Tooltip, Legend);
const PieChart = ({rangedJobs, rangedJobB}) => {
const type = rangedJobs.map(job=>job.fields['type'][0])
const numOfTrans = type.filter(type=>type === 'TRS').length
const numOfQC = type.filter(type=>type === 'QC').length
const typeB = rangedJobB.map(job=>job.fields['type'][0])
const numOfTransB = typeB.filter(type=>type === 'TRS').length
const numOfQCB = typeB.filter(type=>type === 'QC').length
const data = {
  labels : ['A Trans', 'A QC', 'B Trans', 'B QC', ],
  datasets: [
        {
          data: [numOfTrans, numOfQC],
          backgroundColor:  ['#F38787', '#FCCACA'],
        }, 
        {
          data: [numOfTransB, numOfQCB],
          backgroundColor: ['#74ABE2', '#B2D4F5'],
        },
      ]
    }
    const options = {
      maintainAspectRatio: false,
      responsive: true,
      plugins: {
        legend: {
          display: true,
          position: 'top',
          labels: {
            generateLabels: function(chart) {
              const original = ChartJS.overrides.pie.plugins.legend.labels.generateLabels;
              const labelsOriginal = original.call(this, chart);
              let datasetColors = chart.data.datasets.map(function(e) {
                return e.backgroundColor;
              });
              datasetColors = datasetColors.flat();
              labelsOriginal.forEach(label => {
                label.datasetIndex = (label.index - label.index % 2) / 2;
                label.hidden = !chart.isDatasetVisible(label.datasetIndex);
                label.fillStyle = datasetColors[label.index];
              });
              return labelsOriginal;
            }
          },
          onClick: function(mouseEvent, legendItem, legend) {
            legend.chart.getDatasetMeta(
              legendItem.datasetIndex
            ).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
            legend.chart.update();
          }
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              const labelIndex = (context.datasetIndex * 2) + context.dataIndex;
              return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
            }
          }
        },
        title: {
          display: true,
          text: 'Compare Type Frequency',
        },
      }
    }
    return (
        <>
        <Pie width={100} height={50} options={options} data={data}/>
        </>
    )
}
export default PieChart

How to have circular button for login with the Facebook?

Below is a code snippet where I am implementation login with the Facebook.

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v16.0&appId=app_id_here&autoLogAppEvents=1"
    nonce="nonce_here"></script>
    

<div class="fb-login-button" data-width="" data-size="large" data-button-type="continue_with" data-layout="" data-auto-logout-link="false" data-use-continue-as="false"></div>

How can I make the button circular and set its width and height so it just displays the icon?

QtWebEngineWidgets: how to refresh the page after runJavaScript

Currently, I want to set value for html using runJavaScript.

The following code works:

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *


class Widget(QWidget):

    def __init__(self):
        super().__init__()

        lay = QVBoxLayout()
        self.btn = QPushButton('change html value')
        self.browser = QWebEngineView()
        lay.addWidget(self.btn)
        lay.addWidget(self.browser)

        self.setLayout(lay)

        self.browser.setHtml(
            '''
            <html>
                <head>
                    <title>My Page</title>
                </head>
                <body>
                    <h1 id="welcome">Welcome to my page!</h1>
                    <h1 id="value"> 0 </h1>
                </body>
            </html>
            '''
        )

        self.btn.clicked.connect(self.btnClickSlot)

    def btnClickSlot(self, check=False):
        self.browser.page().runJavaScript('document.getElementById("value").innerHTML = "1"')

if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = Widget()
    win.show()
    app.exec_()

The value changes from 0 to 1 after click the change html value button.

But, I don’t want to trigger the operation by click. I want to directly change the value.

And the modified code is:

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *


class Widget(QWidget):

    def __init__(self):
        super().__init__()

        lay = QVBoxLayout()
        self.btn = QPushButton('change html value')
        self.browser = QWebEngineView()
        lay.addWidget(self.btn)
        lay.addWidget(self.browser)

        self.setLayout(lay)

        self.browser.setHtml(
            '''
            <html>
                <head>
                    <title>My Page</title>
                </head>
                <body>
                    <h1 id="welcome">Welcome to my page!</h1>
                    <h1 id="value"> 0 </h1>
                </body>
            </html>
            '''
        )

        self.browser.page().runJavaScript('document.getElementById("value").innerHTML = "1"')
        
if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = Widget()
    win.show()
    app.exec_()

The value don’t change as I expect.

How can I directly change the value? Any suggestion is appreciated~~~

Reduce an array of arrays (Javascript)

I have an array of arrays i.e:
const arrayDaddy = [[x, 1], [x, 1], [y, 2], [y, 2], [y, 2], [z, 3]]

my end goal is to take the above arrayDaddy and mutate it by adding the number in arrayDaddy[i][1] if the two items have the same value arrayDaddy[i][0]. Additionally, I want to throw out nested arrays with repeated arrayDaddy[i][0] values after they have been added. The desired result of this process on arrayDaddy would be as follows:

arrayDaddy = [[x, 2], [y, 6], [z, 3]]

I am wondering if there is a way to use Array.prototype.reduce(); to achieve this. If not, what is a simple way to achieve this goal?

NOTE: not sure if this is important, but all items with the same value in index 0 will share an index 1 value. for example consider [z, 3]. any addition [z, ] items will also have a 3 in index 1.

I did try reduce(); but did not have success. my code looked something like this:

const arrayDaddy = [[x, 1], [x, 1], [y, 2], [y, 2], [y, 2], [z, 3]] ;

arrayDaddy.reduce((arr1, arr2) => {
  if(arr1[0] === arr2[0]){
    arr1[1] += arr2[1]
    // do something here to delete arr2... but I can't use delete on a local variable?
  } else {
    //do nothing, continue to the next arr in arrayDaddy
  }
});

I also considered map, but want to avoid creating a new array. I want to mutate the arrayDaddy