Category: javascript

Category Added in a WPeMatico Campaign

Adding element to the list on keypress and clearing the list

As in topic my job is to do a code where user writes some text into textbox and when user hits enter key, the text from the textbox should be added to ul list under Things header.
I added also reset button but it’s not working because adding elements to list isn’t working but I think it should work when I will fix it. I don’t know where I made mistake. Could anyone help me or give me advice what should I do?

<!DOCTYPE html>
<html>
<head>
    <title>List</title>
</head>
<body>
    <h1 id="title">List</h1>

    <form>
        <input type="text" id="user-todo" placeholder="List" required>
    </form>

    <h2 id="todo-header">Things</h2>
    <ul id="list">

    </ul>
    <button id="clear">Reset</button>
    <script>
        var input = document.getElementById("user-todo");
        input.addEventListener("keyup", function(event) {
            if (event.keyCode === 13) {
                event.preventDefault();
                // what happens when user hits ENTER
                $(document).ready(function() {
                    $('ul').append("<li>"+($('#user-todo').val()) + "</li>");
                });
            }
        });

        function clear() {
            document.getElementById("list").innerHTML = '';
        }
    </script>
</body>

</html>

Cannot run external script inside index.html

It is impossible to run any external script inside my index.html. I am getting the following message in the console:

Refused to load the script xxx because it violates the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-eval'”. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.

I tried to apply suggestions from Refused to load the script because it violates the following Content Security Policy directive
with no success. Any other idea?

When using POST with Fetch API to send user input to php file / Session variable it returns undefined array key

I’m trying to send user inputs with Fetch API to my php file using the POST method. I’ve tried this with XMLHttprequests and has no issue but now I want to start using Fetch API. When I use the GET method to send the variable to the $_SESSION array I have no problem and I can echo it out. When I use the POST method it would return always “Undefined array key” for the variables.

I’m new to this so any help is much appreciated.

PHP

<?php
// a sessions start
session_start();
// session variable
$number1 = $_POST['n1'];
$number2 = $_POST['n2'];

$_SESSION['numbers'] = $_POST;

echo $_SESSION['numbers']['n1'];
echo $_SESSION['numbers']['n2'];
?>

JS

document.getElementById('btn').addEventListener('click', addNumbers);

function addNumbers(){
    var input1 = document.getElementById('one').value;
var input2 = document.getElementById('two').value;
    fetch('serv.php',{
        method:"POST",
        body:'n1='+input1+'&n2='+input2,
        header: {   'Content-Type': 'application/x-www-form-urlencoded' }
        
    }).then((response) => response.text())
        .then((data) => {
            output.innerHTML += data;
            
        })
}

I know that I should check if the Session variable is empty or isset but i removed it just for visibility purposes.

Progress bar with multiple divisions

Hello to the whole stackoverflow community! Unfortunately, I have a problem and I can’t deal with it alone :c . I hope for your understanding and help in calculating this progress bar. How to properly calculate the completion of this progress bar? I am doing it in Vue. P.S already know about the fact that you can’t access the item through querySelector, I will fix that in the future.

enter image description here

<div class="main__position-bar">
            <div class="main__position-bar-junior-minus">
              <p class="main__position">Junior -</p>
              <div class="main__position-progress main__position-progress--beginning">
                <span class="main__position-progress--beginning"></span>
              </div>
              <p class="main__position-number">50</p>
            </div>

            <div class="main__position-bar-junior-plus">
              <p class="main__position">Junior +</p>
              <div class="main__position-progress">
                <span></span>
              </div>
              <p class="main__position-number">150</p>
            </div>

            <div class="main__position-bar-middle-minus">
              <p class="main__position">Middle -</p>
              <div class="main__position-progress">
                <span></span>
              </div>
              <p class="main__position-number">200</p>
            </div>

            <div class="main__position-bar-middle-plus">
              <p class="main__position">Middle +</p>
              <div class="main__position-progress">
                <span></span>
              </div>
              <p class="main__position-number">300</p>
            </div>

            <div class="main__position-bar-senior-minus">
              <p class="main__position">Senior -</p>
              <div class="main__position-progress">
                <span></span>
              </div>
              <p class="main__position-number">350</p>
            </div>

            <div class="main__position-bar-senior-plus">
              <p class="main__position">Senior +</p>
              <div class="main__position-progress main__position-progress--end">
                <span class="main__position-progress--end"></span>
              </div>
            </div>
          </div>

          export default {
           data() {
            return {         
             positionProgressValueOne: 150,
             positionProgressValueTwo: 1,
            }
           },
  methods: {
    positionProgressBar() {
      let positionJuniorMinus = document.querySelector('.main__position-bar-junior-minus .main__position'),
          positionJuniorMinusTime = document.querySelector('.main__position-bar-junior-minus .main__position-number'),
          progressBarJuniorMinus = document.querySelector('.main__position-bar-junior-minus span'),

          positionJuniorPlus = document.querySelector('.main__position-bar-junior-plus .main__position'),
          positionJuniorPlusTime = document.querySelector('.main__position-bar-junior-plus .main__position-number'),
          progressBarJuniorPlus = document.querySelector('.main__position-bar-junior-plus span'),

          percent = 100,
          valueOne = this.positionProgressValueOne,
          valueTwo = this.positionProgressValueTwo,
          calculationOne = valueOne / valueTwo,
          calculationTwo = percent / calculationOne;


      if (this.positionProgressValueOne <= 50) {
        this.userPosition = 'Junior -'

        function calculationProgressBar() {
          positionJuniorMinus.classList.add('main__position--active');
          positionJuniorMinusTime.classList.add('main__position-number--active');
          progressBarJuniorMinus.style.width = `${calculationTwo}%`
        }
      } else if (this.positionProgressValueOne >50 && this.positionProgressValueOne <= 150) {
        this.userPosition = 'Junior +'

        function calculationProgressBar() {
          positionJuniorPlus.classList.add('main__position--active');
          positionJuniorPlusTime.classList.add('main__position-number--active');
          progressBarJuniorMinus.style.width = '100%';
          progressBarJuniorPlus.style.width = `${calculationTwo}%`
        }
      }
    },
  },
   mounted() {
    this. positionProgressBar();
  }
}

axios interceptors not working as expected

I am trying to log out a user when I get a 401 response. By looking into how to achieve this, I can see I can do it with Axios interceptors, but it doesn’t seem to work for me. Is this the wrong way to use it or is there a better way to do what I need to do? Thank you

  axios.interceptors.response.use(
(response) => response,
(error) => {
  console.log(error);
  console.log("test");
}

);

Please tell me why only first click event is working? [duplicate]

My goal is that when I click on a button it will display other buttons hide only the button I clicked. It’s working on first attempt but then it’s not working. Please tell me why this is happening?

const sample = document.getElementById('sample')
const h1 = document.getElementById('h1')
const h2 = document.getElementById('h2')
const h3 = document.getElementById('h3')
const h4 = document.getElementById('h4')
h1.addEventListener('click', () => {
  sample.innerHTML = `
            <h4>H2</h4><button id="h2">h2</button>
            <h4>H3</h4><button id="h3">h3</button>
            <h4>H4</h4><button id="h4">h4</button>`
})
h2.addEventListener('click', () => {
  sample.innerHTML = `<h4>H1</h4><button id="h1">h1</button>
        <h4>H3</h4><button id="h3">h3</button>
        <h4>H4</h4><button id="h4">h4</button>`
})
h3.addEventListener('click', () => {
  sample.innerHTML = `<h4>H1</h4><button id="h1">h1</button>
        <h4>H2</h4><button id="h2">h2</button>
        <h4>H4</h4><button id="h4">h4</button>`
})
h4.addEventListener('click', () => {
  sample.innerHTML = `<h4>H1</h4><button id="h1">h1</button>
        <h4>H2</h4><button id="h2">h2</button>
        <h4>H3</h4><button id="h3">h3</button>
    `
})
<!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>
</head>

<body>
  <div class="sample" id="sample">
    <h4>H1</h4><button id="h1">h1</button>
    <h4>H2</h4><button id="h2">h2</button>
    <h4>H3</h4><button id="h3">h3</button>
    <h4>H4</h4><button id="h4">h4</button>
  </div>
  <script src="./app.js"></script>
</body>

</html>

Barba – will preloading my assets for the next page speed up its load time?

I looked around and I don’t think this is a duplicate, but forgive me if it is. I’m working on a sort of “showcase” for my agency that consists of five pages. I’m using barba.js to transition the pages, and the user will always go through the pages in the same sequence. It’s pretty image and video heavy, so I’d like to use the time that the user is browsing one section to preload and cache assets for the next section. I know how to do this using js, but my question is – will loading page 2’s assets on page 1 actually speed up load time on page 2? I have a pretty poor understanding of how browser caching works, and I don’t want to eat up memory on page 1 if it won’t pay off on loading page 2.

How to create a table from array?

Hello i would like my array to create a table for me with the information from the array

i have created a table but however i am not able to pass into the table why?
i would like it to create a table auto if can use the table id it be great

<table class="col-3 table tableforContact" id="contactinformation">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

This is how i have json parse my array

const responses = JSON.parse(user.Contacts)
console.log(responses)

And get this array

enter image description here

This is how my array response look like

[{"ContactName": "45551134", "ContactNumber": "95011225"}]

How to make zoom function to loook like I’m zooming

Can I make zoom functionality when I zoom to look like I’m zooming but actually I’m not zooming.

My project is to make an app where you can upload pdf files, click on a button to create a mark that you can grab and move where you want. I made that part but I can’t implement zoom functionality.

This is code for creating a mark also for moveing the mark:

function creatContent() {

var divMark = document.createElement("div");
divMark.classList = `markers mark`;

var pCounter = document.createElement("p");
pCounter.classList = "p-counter";
pCounter.innerHTML = showCounter;
divMark.appendChild(pCounter);



var img = $('<img class="comment" src="data:image/png;base64,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" alt="myimage" />');

$(divMark).append(img);
$(marksCanvas).append(divMark);




window.onload = addListeners();

    function addListeners() {
        divMark.addEventListener("mousedown", mouseDown, false);
        window.addEventListener("mouseup", mouseUp, false);
    }

    function mouseUp() {
        window.removeEventListener("mousemove", divMove, true);
    }

    function mouseDown(e) {
        window.addEventListener("mousemove", divMove, true);
    }

    function divMove(e) {
        var x = e.pageX;
        var y = e.pageY;
        divMark.style.top = y + "px";
        divMark.style.left = x + "px";
  zoomIn.onclick = function () {
        var myImg = document.getElementById("the-canvas");
        var currWidth = myImg.clientWidth;
        

        if (currWidth == 700) return false;
        else {
            myImg.style.width = currWidth + 100 + "px";
        }
        
    
            divMark.style.left = x + 30 + "px";
            divMark.style.top = y + 22 + "px";
        
  }
        
    }
showCounter++;

}

Here is demo https://jsfiddle.net/SutonJ/ru2g0s4d/27/.

Dont render Search component with Router React js

With react-router-dom, I can’t render my Search component, which I created, into the main Header component.

I think problem is in this line
<Route render={({ history }) => } />

but don’t know what to do for two days now…

I’m trying to implement a search on the website but I’m stuck

Please help 😀

Header.js

import React, { Fragment } from 'react';
import { Route, Routes } from 'react-router-dom';

import Search from './Search';

import '../../App.css';

const Header = () => {
  return (
    <Fragment>
      <nav className='navbar row'>
        <div className='col-12 col-md-3'>
          <div className='navbar-brand'>
            <img src='/images/shopit_logo.png' alt='Site logo' />
          </div>
        </div>

        <div className='col-12 col-md-6 mt-2 mt-md-0'>
          <Routes>
            <Route render={({ history }) => <Search history={history} />} />
          </Routes>
        </div>

        <div className='col-12 col-md-3 mt-4 mt-md-0 text-center'>
          <button className='btn' id='login_btn'>
            Login
          </button>

          <span id='cart' className='ml-3'>
            Cart
          </span>
          <span className='ml-1' id='cart_count'>
            2
          </span>
        </div>
      </nav>
    </Fragment>
  );
};

export default Header;

//Search.js

mport React, { useState } from 'react';

const Search = ({ history }) => {
  const [keyword, setKeyword] = useState('');

  const searchHandler = (e) => {
    e.preventDefault();

    if (keyword.trim()) {
      history.push(`/search/${keyword}`);
    } else {
      history.push('/');
    }
  };

  return (
    <form onSubmit={searchHandler}>
      <div className='input-group'>
        <input
          type='text'
          id='search_field'
          className='form-control'
          placeholder='Enter Product Name ...'
          onChange={(e) => setKeyword(e.target.value)}
        />
        <div className='input-group-append'>
          <button id='search_btn' className='btn'>
            <i className='fa fa-search' aria-hidden='true'></i>
          </button>
        </div>
      </div>
    </form>
  );
};

export default Search;

React hooks synchronise two arrays

I have a function that gives me an array of strings who depends if checkboxes are checked or not.

I want to fill another array with hooks method like so

const [firstArray, setFirstArray] = useState([]);
...
const myFunction = (array) => {
    // array like so => [firstString, secondString, etc..]
    array.forEach(arr => {
        setFirstArray([...firstArray, ...arr])
        // if function array change i want to filter firstArray
        if(??){
            setFirstArray(
                firstArray.filter(check => check !== arr)
            )
        }
    }
    
}

which way is the best ?

Change fill collor for svg dynamically styled-components

I’m trying to target the fill property of my svg via css in styled-components but to no success.

This is my svg

<svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.8667V13.7334H6.83075H13.6615V6.8667V0H6.83075H0V6.8667ZM34.2257 6.8667V13.7334H41.0564H47.8872V6.8667V0H41.0564H34.2257V6.8667ZM9.47623 4.36809L9.4552 4.92533L8.50249 4.94546L7.54978 4.96542V7.44408V9.92256H6.83075H6.11173V7.44408V4.96542L5.15902 4.94546L4.20631 4.92533L4.18527 4.36809L4.16424 3.81084H6.83075H9.49726L9.47623 4.36809ZM41.9414 3.91815C45.0675 4.73227 45.0675 9.00113 41.9414 9.81525C41.6333 9.8956 41.1073 9.92256 39.8549 9.92256H38.1803V6.8667V3.81084H39.8549C41.1073 3.81084 41.6333 3.8378 41.9414 3.91815ZM17.1128 11.1809V18.0476H23.9436H30.7743V11.1809V4.31416H23.9436H17.1128V11.1809ZM51.3385 11.1809V18.0476H58.1693H65V11.1809V4.31416H58.1693H51.3385V11.1809ZM39.6184 6.8667V8.77212H40.4722C42.1033 8.77212 42.7981 8.20301 42.7981 6.8667C42.7981 5.53039 42.1033 4.96128 40.4722 4.96128H39.6184V6.8667ZM24.8519 8.15304C26.4692 8.58374 27.4607 10.08 27.1943 11.6878C26.6101 15.2135 21.1343 15.1689 20.6341 11.6344C20.3085 9.33458 22.4991 7.52659 24.8519 8.15304ZM59.0776 8.15304C60.6948 8.58374 61.6864 10.08 61.42 11.6878C60.8358 15.2135 55.36 15.1689 54.8598 11.6344C54.5342 9.33458 56.7247 7.52659 59.0776 8.15304ZM23.3477 9.37772C22.5318 9.5972 22.0475 10.3193 22.0862 11.2585C22.1877 13.7233 25.7723 13.6477 25.7723 11.1809C25.7723 9.86019 24.652 9.02701 23.3477 9.37772ZM57.5734 9.37772C56.7574 9.5972 56.2732 10.3193 56.3118 11.2585C56.4134 13.7233 59.9979 13.6477 59.9979 11.1809C59.9979 9.86019 58.8777 9.02701 57.5734 9.37772Z" fill="#1F1F2A"/>
</svg>

This is how I’m using it:

export const Logo = styled.svg`
  background-image: url('./logo.svg');
  background-repeat: no-repeat;
  background-size: contain;
  height: 2em;
  & path {
    fill: #a4a4bc;
  }
  @media ${devices.desktop}{
    height: 3.4em;
  }

`

I’ve tried other variations to change the fill, none of which worked. Any ideas?

How to integrate razorpay payment gateway in Next.Js App?

I tried to integrate razorpay gateway but there is some confusion about it so plz help me I can integrate it.

import style from '../styles/Cart.module.css';
import Image from 'next/image';
import { useDispatch,useSelector } from 'react-redux';
import { useEffect } from "react";
import { useState } from 'react/cjs/react.development';

const Cart = () => {

how to razorpay payment gateway integrate

const [open,setOpen] = useState(false)
const [cash,setCash] = useState(false)
const dispatch =  useDispatch();
const cart = useSelector((state)=> state.cart);
const router = useRouter();
 return (
    <div className={style.container}>
        <div className={style.left}>
            <table className={style.table}>
            <tbody>
                <tr className={style.trTitle}> 
                <th>Product</th>
                <th>Name</th>
                <th>Extra</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
                </tr>
                </tbody>
                <tbody>
                {
                    cart.products.map((product) =>(
                <tr className={style.tr} key={product._id}>
                <td>
                    <div className={style.imgContainer}>
                        <Image src={product.img} alt='' layout='fill' 
                   objectFit='cover' />
                    </div>
                </td>
                <td>
                    <span className={style.name}>{product.title}</span>

                </td>

                <td>
                    <span className={style.extras}>
                    {
                        product.extras.map((extra)=>(
                            <span key={extra._id}>{extra.text}, </span>
                        ))
                    }
                    </span>
                </td>
                <td>
                    <span className={style.price}>${product.price}</span>
                </td>
                <td>
                    <span className={style.quantity}>{product.quantity}</span>
                </td>
                <td>
                    <span className={style.total}>${product.price * 
                  product.quantity}.      </span>
                </td>

                </tr>
                ))}
                </tbody>
            </table>
        </div>

here is the cart container where I want to show Razorpay gateway.

        <div className={style.right}>
            <div className={style.wrapper}>
                <h2 className={style.title}>CART TOTAL</h2>

                <div className={style.totalText}>
                    <b className={style.totalTextTitle}>Subtotal: </b> ${cart.total}
                </div>
                <div className={style.totalText}>
                    <b className={style.totalTextTitle}>Discount:</b> $0.00
                </div>
                <div className={style.totalText}>
                    <b className={style.totalTextTitle}>Total:</b> ${cart.total}
                </div>

I want to add here Razorpay gateway button below the cash on the delivery button

                {open ? (
            <div className={style.paymentgateway}>
            <button className={style.payButton} onClick={()=>setCash(true)}>CASH ON 
             DELIVERY</button>
              </div>
             )
              }

how to integrate Razorpay payment gateway on this jsx page in next.js

export default Cart