Category: javascript

Category Added in a WPeMatico Campaign

Overriding script src tag

I want to disable “adblock” detector script on shinden.pl using extension, not existing one.
The file that I need to somehow change is https://shinden.pl/f/js/main-obfuscated.js?p

To make it work i can do 3 things:

  1. force aj variable to always be 0
  2. delete if(p&&aj>0x0)an(bt,data);else from main-obfuscated.js
  3. replace <script src="/f/js/main-obfuscated.js?p"></script> without if(p&&aj>0x0)an(bt,data);else

I searched for some examples how to do that but I couldn’t find any working solution, when i tried using one that executes code before page loads main-obfuscated.js function just didn’t want to execute but simple alert() worked.

If there is some simpler way to do it than to replace main-obfuscated.js please tell me.

JavaScript code to read the latest values from a json file that keeps getting updated every few seconds

I am very new to JavaScript and trying to display the latest values from a .json file that keeps getting updated every 10 seconds into a HTML page. I am reading the file every 10 seconds as well, but I am not getting the latest values from the file. I am getting values which are 50 to 60 seconds older.

I have tried disabling the browser cahche in chrome but stillthe same issue. Can somebody please help on this?

My JavaScript code to read the json file is as follows:

function readJsonFile(callback) {
 var request = new XMLHttpRequest();
 request.open('GET', 'http://localhost:8080/PersonalProject/filename.json');
 request.onload = function() {
  if(request.status>=100 && request.status<=100) {
   //perform some operation
   callback(request.responseText);
  }
  else{
   //perform some operation
   callback('FAILED');
  }
 };
 request.onerror = function() {
  console.error('Connection error');
 };
 request.send();
}


setInterval(function(){
 readJsonFile(function(stat){
  console.log(stat);
 });
}, 10000);

HTML Question about auto loading an excel file from the server

So here is the bulk of the code (Minus other pages, the css files, other js files, basically files unrelated to the question)

I am very happy with how this loads and creates the table and all of that. What I am trying to figure out now is how I can place this excel file on the server (Not on the user’s pc) and have it automatically select the excel file on page load. The file will be stored in “Files/Data.xlsx”

This filename is Inventory.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Some Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Reference the CSS File -->
    <link rel="stylesheet" href="css/main.css">

    <!--First we have to include Bootstrap Stylesheet and SheetJS library link at header of our HTML page.-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/xlsx.full.min.js"></script>
</head>

<body>
    <div id="topMenu">
        <ul>
            <!--This I am using as a navigation bar and is unrelated-->
        </ul>
    </div>
    <div class="container">
        <div class="card">
            <div class="card-body">
                <input type="file" id="excel_file" />
            </div>
        </div>
        <br />
        <table id="myTable">
            <tr id="search">
                <!--This is some stuff used to filter the table and is unrelated-->
            </tr>
            <tbody id="excel_data" class="mt-5">
            </tbody>
        </table>
    </div>
</body>

</html>

<script>
    const excel_file = document.getElementById('excel_file');
    excel_file.addEventListener('change', (event) => {
        if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel']
        .includes(event.target.files[0].type)) {
            document.getElementById('excel_data').innerHTML = 
            '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';
            excel_file.value = '';
            return false;
        }

        var reader = new FileReader();
        reader.readAsArrayBuffer(event.target.files[0]);
        reader.onload = function(event) {
            var data = new Uint8Array(reader.result);
            var work_book = XLSX.read(data, {
                type: 'array'
            });
            var sheet_name = work_book.SheetNames;
            var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {
                header: 1
            });
            if (sheet_data.length > 0) {
                var table_output = '<table class="table table-striped table-bordered">';
                for (var row = 0; row < sheet_data.length; row++) {
                    table_output += '<tr>';
                    for (var cell = 0; cell < sheet_data[row].length; cell++) {
                        if (row == 0) {
                            table_output += '<th>' + sheet_data[row][cell] + '</th>';
                        } else {
                            table_output += '<td>' + sheet_data[row][cell] + '</td>';
                        }
                    }
                    table_output += '</tr>';
                }
                table_output += '</table>';
                document.getElementById('excel_data').innerHTML = table_output;
            }
            excel_file.value = '';
        }
    });
</script>

My next big task will be figuring out how to write the data from the below form to the next empty row in the excel document….

This filename is AddItem.html

<form>
    <label for="prNumberInput">Enter the PR Number: </label>
    <input type="text" name="prNumberInput" placeholder="Enter the PR Number" /><br>

    <label for="netbuildNumberInput">Enter the NetBuild Number: </label>
    <input type="text" name="netbuildNumberInput" placeholder="Enter the NetBuild Number" /><br>

    <label for="trackingNumberInput">Enter the Tracking Number: </label>
    <input type="text" name="trackingNumberInput" placeholder="Enter the Tracking Number" /><br>

    <label for="partNumberInput">Enter the Part Number: </label>
    <input type="text" name="partNumberInput" placeholder="Enter the Part Number" /><br>

    <input type="button" onclick="AddItemSubmit()" value="Add Item">
</form>

Google Firebase user.PhotoURL doesn’t Change After Upload

I’ve been trying to figure out how to update the user photo after uploading it to Google Firebase. The user photo uploads to Firebase, however doesn’t chance after uploading. Only it changes when the page is refreshed.

Is there a way to refresh the user profile photo without refreshing the whole page?

import { useEffect, useState } from "react";
import { useAuth, upload } from "./firebase";

export default function Profile() {
  const currentUser = useAuth();
  const [photo, setPhoto] = useState(null);
  const [loading, setLoading] = useState(false);
  const [photoURL, setPhotoURL] = useState("https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png");

  function handleChange(e) {
    if (e.target.files[0]) {
      setPhoto(e.target.files[0])
    }
  }

  function handleClick() {
    upload(photo, currentUser, setLoading);
  }

  useEffect(() => {
    if (currentUser?.photoURL) {
      setPhotoURL(currentUser.photoURL);
    }
  }, [currentUser])

  return (
    <div className="fields">
      <input type="file" onChange={handleChange} />
      <button disabled={loading || !photo} onClick={handleClick}>Upload</button>
      <img src={photoURL} alt="Avatar" className="avatar" />
    </div>
  );

Code is taken from LogicismX GitHub page.

My onclick function doesn’t recognize my class [duplicate]

  <div id="hoursList" class="hours__list"></div>

I will put some html tag inside to this class “hours_list”.

function booking_hours(hourArray) {
  console.log("heyyyy");

  var table;
  for (var i = 0; i < hourArray.length; i++) {
    // if (parseInt(hourArray[i].childNodes[0].nodeValue) < 9)
    table +=
      "<div data-hours='0" +
      hourArray[i].childNodes[0].nodeValue +
      ".00-0" +
      (parseInt(hourArray[i].childNodes[0].nodeValue) + 1) +
      ".00' class='hour_cell'>" +
      "<p>" +
      "0" +
      hourArray[i].childNodes[0].nodeValue +
      ".00 - 0" +
      (parseInt(hourArray[i].childNodes[0].nodeValue) + 1) +
      ".00" +
      "</p></div>";
 }
  document.getElementById("hoursList").innerHTML = table.slice(9);
}

This function works with this action.

function xhttp() {
  // Create an XMLHttpRequest object
  const xhttp = new XMLHttpRequest();
  var hourArray;
  // Define a callback function
  xhttp.onload = function () {
    var parser, xmlDoc;
    var text = this.responseText;
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(text, "text/xml");
    hourArray = xmlDoc.getElementsByTagName("item");
    booking_hours(hourArray);
  };
  // Send a request
  xhttp.open("GET", "hours.xml");
  xhttp.send();
}

Everything is ok, until now. But The problem is this ” $(“.hour_cell”).click(function ()”. This function doesn’t work. I tested with consol.log but I couldn’t see this message. So how can I solve this problem? Please, help me, I want to le

// Onclick hour cell
$(document).ready(function () {
  $(".hour_cell").click(function () {
    var th = $(this).data().hours.slice(0, 2);
    console.log("H E R E");

    for (var i = 0; i < counterReservedHours; i++) {
      if (i + 1 == counterReservedHours && reservedHours[i] != th) {
        counterReservedHours++;
        reservedHours[i] = th;
        break;
      } else if (reservedHours[i] == th) {
        reservedHours.splice(reservedHours.indexOf(th), 1);
        counterReservedHours--;
        break;
      }
    }
    $(this).toggleClass("isSelected");
  });
});

How to navigation background color change on scroll

**# I want to navigation background color change when story data scroll. When our story data scroll 1 to 100% together nav story background color changes 1 to 100%. I was trying to scroll progress used but I could not solve it. I can’t understand how should solve please, anyone, help As like https://maat-law-firm.webflow.io/story **

import React, { useEffect, useState } from 'react';
import { Col, Container, Image, Row } from 'react-bootstrap';
import './OurStory.css';
      
const OurStory = () => {
     const [story, setStory] = useState([]);
     useEffect(() => {
         fetch('https://pure-refuge-33072.herokuapp.com/story')
            .then(res => res.json())
            .then(data => setStory(data))
     }, []);
return (
   <div className="pb-5">
     <div className="ourStory">
        <Container>
              <div id='ourStory' className='mainSection'>
                  {
                    story.map((story, index) => <div key={story?._id}>
                      <div id={story?._id} className='py-5'>
                          <Row>
                             <Col xs={12} lg={6}>
                                <div className="big-font singleStory">
                                   <h3 className='storyAbout'>{story?.about}</h3>
                                    <h1>{story?.title}</h1>
                                 </div>
                               </Col>
                               <Col xs={12} lg={6}>
                                 <div>
                                    <div className="big-font singleStory">
                                       <h2>{story?.sub_title}</h2>
                                        <p>{story?.description}</p>
                                        <Image className='w-100' src={story?.image} />
                                     </div>
                                 </div>
                               </Col>
                             </Row>
                         </div>
                         <div className='mt-5 pt-5'>
                            <hr className='bg-white' />
                          </div>
                      </div>)
                   }
                </div>
            </Container>
            <div className='navStoryContainer'>
               <Container >
                  <Row className='navStory'>
                     {
                        story.map((story, index) => <div
                           className='navStoryItem'
                            key={story?._id}>
                         <a href={`#${story?._id}`}>
                           <div className='big-font'>
                               <h5>{story?.about}</h5>
                               <p>{story?.title}</p>
                            </div>
                         </a>
                      </div>)
                    }
                 </Row>
              </Container>
           </div>
        </div>
    </div >
   );
 };      
export default OurStory;

How can “All Mail” data be extracted into Google sheet?

I’m trying to extract all my gmail emails into spreadsheet & used below code which is working fine for “Inbox” data.. I need to get “All Mail” data instead of just inbox. Is it possible? Also, i want a new line added to the spreadsheet as soon as a new email is arrived in my inbox.. my current code is actually creating multiple duplicates of I run it again or set a time trigger. Any help in this would be much much much appreciated!!?Part-1

Part-2

My react app is working in browser but not in my mobile

I’m developing a react app, I want to try some functions in my mobile but when I try to connect to it, I have an error.
I understand that is an asynchronus problem… I’m trying to map an (by the moment) undefined array. But I don’t understand by in the browser is working well and in my mobile not.

const eventsFetch = async () => {
    const resEvents = await getAllEvents();
    const newArray = resEvents.filter((e) => {
        const date = new Date(e.date);

    return date.getTime() >= Date.now();
    });

    newArray.sort((e) => e.important === true ? -1 : 1);
    setEvents(newArray);
}

Here is an screenshot from the mobile browser.. I tried with Chrome, Safari and Brave and always I got the same error.
enter image description here

By last, I already try adding the optional chaining operator to the array, but I have the same result.

How to set one State with few value of inputs

i would like to know how can i set one state with few inputs value for the example this is the state

const [userBirthday, setUserBirthday] = useState('')

there are 3 inputs, i want to get e.target.value from each one and conbain them in the state

something like that
**I know the syntax actually not good but it is only to simplify my question

      <input type="text"
           placeholder='Day'
           onChange={(e) => {
              setUserBirthday(userBirthday += e.target.value)
           }}
      />
      <input type="text"
           placeholder='Day'
           onChange={(e) => {
              setUserBirthday(userBirthday += e.target.value)
           }}
      />
      <input type="text"
           placeholder='Day'
           onChange={(e) => {
              setUserBirthday(userBirthday += e.target.value)
           }}
      />

`

console.log(userBirthday) == Result: 12 September 2020

(Firebase Firestore)TypeError: n.indexOf is not a function

I’m trying to add another field value in a document but firebase returns TypeError: n.indexOf is not a function. Here’s the code:

async function linkLCSN(cor, sn) {
  try {
    await setDoc(doc(db, "cor", cor), {
      sn: sn,
    }, {merge: true});
  } catch(e) {
    console.error(e);
  }
}

I’ve already succeeded in doing this way but I don’t know why this time it keeps giving me this error. This is the working code:

async function submitToDatabase(name, email, cor, cs, cn, concern) {
    try {
        //Set Datas 
        await setDoc(doc(db, "cor", cor), {
        name: name,
        email: email,
        cor: cor,
        courseSection: cs,
        contactNumber: cn,
        isViewed: false,
        timestamp: serverTimestamp(),
        }, {merge: true});
        const docRef = await addDoc(collection(db, "cor", cor, "concerns"), {
        concernData: concern,
        });
        console.log("Yung betlog nasa:" + docRef.id);
        //Do page changes
        let a = document.querySelector(".concern-main-container");
        let b = document.querySelector(".concern-preview-container");
        a.style.display = "none";
        b.style.display = "block";
    } catch(e) {
        console.error(e);
        //Custom Alert
    }
}

How to use timeline_item.add content field to use a repeating image Vis.js Timeline

I have been using the timeline_item add function with content field to represent the element with a image. It works fine.

timeline_items.add({
    id                        : entity_id,
    group                     : "timeline_group_id",
    start                     : start_date,
    end                       : end_date,
    content                   : "<img src='" + element_src_link + "'></img>",
    className                 : 'timeline-imagecontainer',
});

However, although I explicitly define a className, that does not help with the style properties of the image.

I want to have a repeating background with the img inside the timeline element.

How can I achieve this ?

How to move index 0 to index 1 array in the javascript [duplicate]

I have an array that I want to find an item with an ID of 1.
Then change the index of the found item from 0 to 1.
This is not working properly. Please guide me to get the answer.

My expected output:

[
{id:2,name:"sara"},
{id:1,name:"jhon"},
{id:3,name:"James"},
]


const arr=[
{id:1,name:"jhon"},
{id:2,name:"sara"},
{id:3,name:"James"},
]

function move(arry, from, to) {
  let numberOfDeletedElm = 1;

  const elm = input.splice(from, numberOfDeletedElm)[0];

  numberOfDeletedElm = 0;

  arry.splice(to, numberOfDeletedElm, elm);
}

const findIndex =arr.findIndex((element) => element.id === 1);
const result = move(arr, findIndex, findIndex++);

console.log(result);

JS output for the get ABC function [duplicate]

I looking for this issue where I have the functions
getA - > sync fn getB - > async fn getC - > promise fn
and another fn which is combining and returning the response of all the three functions, i.e getABC fn, which should give me a result in this form.

Result should be in:-

[ result A, result B, Result C]

    function A() {
        return 'A';
    }
    
    function B(callback) {
        setTimeout(() => {
            callback('B')
        }, 10);
    }
    
    function C() {
        return Promise.resolve('C');
    }
    
    function getABC() {
        const extractData = (data) => {
            return data;
        }
        return Promise.all([A(), B(extractData), C()]);
    }

I am getting result something like this ['A', undefined, 'C]
expected => ['A', 'B', 'C']

Moving circles with pure javascript and html canvas

I am new to programming and am playing around with HTML canvas and JavaScript. I am only using vanilla JavaScript right now, and I am trying to get a circle to move and get bigger or smaller when I click some buttons.

Everything that I’ve tried to do has resulted in, for example, the more I press the move left button, the faster it goes left, and if I press the move right button while it is moving left, it just slows down until it stops. Then it goes right.

This happens with every direction and size. All of the attempts I’ve made are basically this same code in a different order, so if anyone knows how to do this, I’d appreciate it. Thx.

Ignore the file names… they are from an old project. The styling looks weird in here because I made it on a much larger screen. I’m not that good with CSS yet.

const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext('2d',);
const posUp = document.getElementById("posUp");
const posDown = document.getElementById("posDown");
const posRight = document.getElementById("posRight");
const posLeft = document.getElementById("posLeft");
const radUp = document.getElementById("radUp");
const radDown = document.getElementById("radDown");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let size = 0;
let PI = Math.PI;
let posX = window.innerWidth/2;
let posY = window.innerHeight/2;
let angle = 0;
let radius = 50;



const rrgb = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`
const strokeRRGB = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`


function posUpFunc() {    
    posY-= 2;
}
function posRightFunc() {
    posX+= 2;
}
function posDownFunc() {
    posY+= 2;
}
function posLeftFunc() {
    posX-= 2;
}
function radUpFunc() {
    radius++;
}
function radDownFunc() {
    radius--;
}

posUp.onclick = () => {
    console.log(posY)

    setInterval(posUpFunc, 10);
}

posRight.onclick = () => {
    console.log(posY)    
    setInterval(posRightFunc, 1);

}

posDown.onclick = () => {
    console.log(posY)
    setInterval(posDownFunc, 10);

}

posLeft.onclick = () => {
    console.log(posY)
    setInterval(posLeftFunc, 10);

}

radUp.onclick = () => {
    console.log(posY)
    setInterval(radUpFunc, 10);

}

radDown.onclick = () => {
    console.log(posY)
    setInterval(radDownFunc, 10);

}


function draw() {
    ctx.fillStyle = rrgb;
    ctx.strokeStyle = strokeRRGB;
    ctx.lineWidth = 3;
    ctx.clearRect(0,0,window.innerWidth,window.innerHeight)
    ctx.beginPath();
    ctx.arc(posX, posY, radius, 0, PI * 2);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}    



setInterval(draw, 10)
body {
    overflow: hidden;
}


#canvas1 {
    position: absolute;
    border: 2px solid black;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

button {
    height: 2.5%;
    width: 5%;
    position: absolute;
    cursor: pointer;
    z-index: 100;
}

button:hover {
    border: 1px solid black;
}

#posUp {
    left: 5%;
}

#posRight {
left: 10%;
top: 6.5%;
}

#posDown {
left: 5%;
top: 10%;
}

#posLeft {
left: 0%;
top: 6.5%;

}

#radUp {
left: 50.5%;
}

#radDown {
left: 50.5%;
top: 10%;
}

#circle-direction {
position: relative;
top: 5%;
left: 3%;
width: fit-content;
height: fit-content;
z-index: 100;

}

#circle-size {
    position: absolute;
    top: 0.9%;
    left: 50%;
    width: fit-content;
    height: fit-content;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="aestheticPasswordStrengthMeter.js" defer></script>
<link rel="stylesheet" href="aestheticPasswordStrengthMeter.css">  
  <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>
</head>
<body>
    <div id="circle-direction">Change circle direction.</div>
    <div id="circle-size"> Change circle size.</div>
    <button id="posUp">⇑</button>
    <button id="posRight">⇒</button>
    <button id="posDown">⇓</button>
    <button id="posLeft">⇐</button>
    <button id="radUp">⇑</button>
    <button id="radDown">⇓</button>
    <canvas id="canvas1"></canvas>
</body>
</html>