Category: javascript

1. . If your collection contains at least one pair, return an array of two elements: true and the card number of the highest pair.
   Eg: highestCardPair([“A”, “A”, “Q”, “Q”, “6” ]) –> [true, “A”]
   highestCardPair([“J”, “6”, “3”, “10”, “8”]) –> false
   highestPair([“3”, “5”, “5”, “5”, “5”]) ➞ [true, “5”] – three or more of the same card still count as containing a pair

{
“0”: {
“name”: “ABC”,
“first_name”: “abc”,
“mobile”: “1111111111”,
“dailing_code”: “91”,
“email”: “[email protected]”
},
“1”: {
“name”: “XYZ”,
“first_name”: “xyz”,
“mobile”: “2222222222”,
“dailing_code”: “91”,
“email”: “[email protected]”
},
“2”: {
“name”: “PQRS”,
“first_name”: “pqrs”,
“mobile”: “8888888888”,
“dailing_code”: “91”,
“email”: “[email protected]”
}
}

Convert from above giver JSON to below JSON

[
{
“name”: “ABC”,
“first_name”: “abc”,
“mobile”: “1111111111”,
“dailing_code”: “91”,
“email”: “[email protected]”
},
{
“name”: “XYZ”,
“first_name”: “xyz”,
“mobile”: “2222222222”,
“dailing_code”: “91”,
“email”: “[email protected]”
},
{
“name”: “PQRS”,
“first_name”: “pqrs”,
“mobile”: “8888888888”,
“dailing_code”: “91”,
“email”: “[email protected]”
}
]

I’ve been working on a script that creates and updates stuff with the ExactOnline API.

when I run the script locally everything works fine but when I try to use it on a platform such as Zapier or n8n it doesn’t work as intended.

on Zapier it only runs just before it does a fetch request

this my code that I use in zapier:

var token = 'token';
var divisionid = 'divisionid';

var AMRelatieData = {
  "Name": "company name",
  "City": "city name",
  "Website": "website.com"
};


var AMContactData = {
  "FirstName": "firstname",
  "LastName": "lastname", 
  "City": "name city"
};
var testrlid;

async function actionHandeler(actionValue) {

  var action = actionValue;
  if (action == "cp_maken_&_relatie_maken") { 

    var maakRelatieWaarde = await maakRelatie(AMRelatieData);

      var POSTrelatieID = maakRelatieWaarde;

      AMContactData.Account = POSTrelatieID;

      var maakContactwaarde = await maakContact(AMContactData);
        var POSTcontactID = maakContactwaarde;

        testcpid = POSTcontactID;
        testrlid = POSTrelatieID;

  return ('maakContactwaarde succes');

  }

  //functions
  async function updateRelatie(updateData, relatieId) {

    var UpdateRelatiePUT = await PUTreq(1, updateData, relatieId);

    console.log(UpdateRelatiePUT);

    return ("updateRelatie succes");
  }

  async function maakRelatie(createData) {
    var relatieId;

    console.log('maakRelatie: ');

    var maakRelatiePOST = await POSTreq(1, createData); 

    console.log('maakRelatieFunc:' + JSON.stringify(maakRelatiePOST));

    return await maakRelatiePOST.d.ID;
  }

  async function maakContact(createData) {
    var contactId;


    var maaktcontactPOST = await POSTreq(2, createData);

    console.log('maaktcontactFunc:' + JSON.stringify(maaktcontactPOST));


    var jsonData = {
      MainContact: maaktcontactPOST.d.ID
    };

    var relatieIdUpdate = createData.Account;
    await updateRelatie(jsonData, relatieIdUpdate);
  }

  async function POSTreq(type, DATA) {
    console.log('postreq');

    var POSTendpoint = 'https://start.exactonline.nl/api/v1/'+ divisionid +'/crm/';
    if (type == 1) {

      POSTendpoint += 'Accounts';
    }
    if (type == 2) {

      POSTendpoint += 'Contacts';
    }

    var outputPOST;
    console.log(DATA);
    await fetch(POSTendpoint, {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + token,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(DATA)
    }).then(response => {
      return response.json();
    }).then(jsonResponse => {
      var responseOut = jsonResponse;
      outputPOST = responseOut;
    }).catch(error => {
      console.log(error);
    });
    return outputPOST;
  }

  async function PUTreq(type, DATA, id) {
    var PUTendpoint = 'https://start.exactonline.nl/api/v1/'+ divisionid +'/crm/';

    console.log('put data');
    console.log(id);
    console.log('data' + DATA);
    console.log(type);

    if (type == 1) {
      PUTendpoint += "Accounts(guid'" + id + "')";
    }
    if (type == 2) {
      PUTendpoint += "Contacts(guid'" + id + "')";
    }

    console.log(PUTendpoint);
    console.log(PUTendpoint);
    await fetch(PUTendpoint, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + token
      },
      body: JSON.stringify(DATA)
    });
  }
}


async function actionHandlerFunc(){
  console.log("begin");
  await actionHandeler("cp_maken_&_relatie_maken");

  return ("done did sum stuff");
};



output = [actionHandlerFunc()]

I have nav bar that shrinks depending on the screen width and the button appears that toggles the dropdown menu. When I triggered the dropdown menu using checkbox (pure CSS), it worked perfectly. But after I started to use js instead of checkbox, it started to break the nav bar behaviour. When I shrink the window then press the button to toggle the dropdown menu and then expand window back, the nav bar doesn’t revert back to it’s “default” state. How to make the nav bar revert back to its state when the screen width increases? Is there any ability to apply style ONLY to media query css style but not to the main style? Here’s my code:

const menuButton = document.querySelector('.menuButton')
const menuDisplay = document.querySelector('nav ul')

menuButton.addEventListener('click', () => {
  if (menuDisplay.style.display == 'none') {
    menuDisplay.style.display = 'initial'
    setTimeout(() => {
      menuDisplay.style.height = '100vh'
    }, 0)
  } else {
    setTimeout(() => {
      menuDisplay.style.display = 'none'
    }, 300)
    menuDisplay.style.height = '0'
  }
})

header {
  background-color: rgba(24, 24, 24, 0.95);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10;
}

.menuButton {
  display: none;
  position: fixed;
  right: 0;
  color: white;
  font-size: 1.5em;
  line-height: 65px;
  margin: 10 30px;
  cursor: pointer;
}

.logo {
  color: white;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Fredoka One', sans-serif;
  line-height: 65px;
}

nav {
  padding: 10px 5%;
  display: flex;
  max-width: 900px;
  margin: auto;
  justify-content: space-between;
  align-items: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

nav ul {
  display: flex;
  list-style: none;
  font-weight: bold;
}

nav ul li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  margin: 5px;
}

.orderButton {
  border-radius: 5px;
  background-color: #e8e8e8;
  color: black;
  border: 2px solid #e8e8e8;
  text-align: center;
  padding: 14px 16px;
  margin: 5px;
  cursor: pointer;
  transition: all.3s ease;
  -webkit-transition: all.3s ease;
  -o-transition: all.3s ease;
  -moz-transition: all.3s ease;
}

.orderButton:hover {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}

nav ul li .active {
  color: #999999;
}

@media (max-width: 600px) {
  nav ul {
    width: 100%;
    text-align: center;
    transition: margin-top 0.3s ease-in-out, height 0.3s ease-in-out;
    -webkit-transition: margin-top 0.3s ease-in-out, height 0.3s ease-in-out;
    -moz-transition: margin-top 0.3s ease-in-out, height 0.3s ease-in-out;
    flex-direction: column;
    overflow: hidden;
    height: 0;
    display: none;
  }
  nav ul li {
    margin: 20px;
  }
  nav {
    flex-direction: column;
  }
  .logo {
    text-align: center;
  }
  .menuButton {
    display: block;
  }
}

<header>
  <div class="menuButton">&#9776;</div>
  <nav>
    <a href="index.html">
      <h1 class="logo">Cite</h1>
    </a>
    <ul>
      <li>
        <div class="orderButton">Заказать</div>
      </li>
      <div class="orderForm">
        <div class="form-wrap">
          <h2>Данные для связи</h2>
          <form method="post" action="order.php">

            <p>Имя</p>
            <input type="text" name="name" value="" placeholder="Имя" />

            <p>Телефон</p>
            <input type="tel" name="phone" value="" placeholder="Телефон" />

            <p>Почта</p>
            <input type="email" name="email" value="" placeholder="E-mail" />

            <p>Комментарий</p>
            <textarea name="other" placeholder="Комментарий к заявке"></textarea>
          </form>
        </div>
      </div>
      <li><a href="about.html">О нас</a></li>
      <li><a href="contact.html">Контакты</a></li>
    </ul>
  </nav>

  <script src="js/script.js" type="text/javascript"></script>

</header>

Hi I’m just wondering if I can get horizontal smooth scroll snap in somewhere between the vertical scroll snap.

this one is what i’m with so far – https://codepen.io/tarunpatnayak/pen/rNYvvQb

and I’m trying to include something like this in between the vertical scroll – https://codepen.io/tarunpatnayak/pen/OJOQXwp

can someone please help me achieving this?

Thanks In advance

<section class="panel red">
  <p>This is page 1</p>
</section>
<section class="panel green">
  <p>This is page 2</p>
</section>
<section class="panel blue">
  <p>This is page 3</p>
</section>
<section class="panel orange">
  <p>This is page 4</p>
</section>
<section class="panel red">
  <p>This is page 5</p>
</section>
<section class="panel green">
  <p>This is page 6</p>
</section>
<section class="panel blue">
  <p>This is page 7</p>
</section>
<section class="panel orange">
  <p>This is page 8</p>
</section>


<style>
* {
  box-sizing: border-box;
  font-family: sans-serif;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.panel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel p {
  font-size: 6vw;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

.orange {
  background: orange;
}


</style>

<script>
gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(ScrollToPlugin);

let sections = gsap.utils.toArray(".panel");

function goToSection(i) {
  gsap.to(window, {
    scrollTo: { y: i * innerHeight, autoKill: false, ease: "Power3.easeInOut" },
    duration: 0.85
  });
}

ScrollTrigger.defaults({
  // markers: true
});

sections.forEach((eachPanel, i) => {
  // const mainAnim = gsap.timeline({ paused: true });

  ScrollTrigger.create({
    trigger: eachPanel,
    onEnter: () => goToSection(i)
  });

  ScrollTrigger.create({
    trigger: eachPanel,
    start: "bottom bottom",
    onEnterBack: () => goToSection(i)
  });
});


</script>

In my navbar there is a project submenu completed and ongoing both two are also a submenus containing abc project for completed submenu and ongoing submenu consist bcd project. when I click on completed its shows the abc project and when I click on ongoing its shows the bcd project but also redirect me to the page of bcd project .So the problem is I want bcd project page to appear only when I click on bcd project ‘a’ tag not on ongoing submenu click.it work fine for completed submenu. The flow should be I click on project menu then ongoing menu and then bcd project then clicking bcd project redirecting me to its page. but the flow here is project -> ongoing->redirecting to bcd project. On going menu also work when I first click on it , it doent redirect me but if I first open completed menu and then ongoing menu the problem is coming.

          <li class="dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="dropdown-toggle">Projects</a>
                    <ul class="dropdown-menu">
            
                        <li class="dropdown-submenu dropdown">
                            <a href="javascript:void(0)" data-toggle="dropdown" class="dropdown-toggle"><span>Completed</span></a>
                            <ul class="dropdown-menu">
                                <li><a href="portfolio-single.html">ABC Project</a></li>
            
                            </ul>
                        </li>
                      
                        <li class="dropdown-submenu dropdown">
                            <a href="javascript:void(0)" data-toggle="dropdown" class="dropdown-toggle"><span>Ongoing</span></a>
                            <ul class="dropdown-menu">
                                <li><a href="portfolio-2.html">BCD Project</a></li>
            
                            </ul>
                        </li>
            
                    </ul>
                </li>

Using React & Axios. My post request response is an array of arrays, the second element of nested array is string I am trying to load onto a div through using map. Error is ‘undefined is not iterable’ I am trying to use useState to use the array outside of post request. The entire section opens with useState via a button and by default is closed/not loaded. There is also a user input which the post request uses to get it data, all of that works fine. I am just unable to map the string from the array into a div. I tried to use window.var to access it but this was unsuccessful as well. Appreciate any help!

p.s pity the comments arent loaded because they explain whats going on for each function.

import './Turnersdiscoverybody.css'
import axios from 'axios'
import { useState, useEffect } from 'react';
import React, { Component } from 'react'
import Turnershomenav from "../../../components/homepage/homepage-components/Turnershomenav.js";
import orangegtr1 from './turnersdiscovery-images/orangegtr-1.jpg'
import searchicon from './turnersdiscovery-images/searchicon.png'
export default function Turnersdiscoverybody() {


    const [showSearchForm, setShowSearchForm] = useState('noForm')
    const [input, setInput] = useState['']
    //functions for opening and closing search feature

    const handleClick = () => {
        setShowSearchForm('showForm')
    }
    const handleClickBack = () => {
        setShowSearchForm('noForm')
    }


    //axios post request starts

    //function that handles searching the documents with the user input, using axios

    const handleSearch = (e) => {
        let userQuery = document.getElementById('userInput').value

        e.preventDefault()
        axios.post(`http://localhost:8081/getDocumentdata/${userQuery}`)
            .then(res => {
                setInput(res.data)
                console.log(res.data)
            })

    }


    //axios post request ends

    return (
        <div>
            <div className="turnersdiscoverynav">
                <Turnershomenav />
            </div>
            <div className='backgroundimg-container'>
                <img src={orangegtr1} alt="background-img" className='turnersdiscovery-backgroundimg'></img>
            </div>
            {showSearchForm === 'showForm' &&
                <>
                    <img className="img-btn-search" alt="search icon" src={searchicon} onClick={handleClickBack}></img>
                    <div className='form-search-container'>
                        <div className='form-search-container-top'>
                            <input
                                id="userInput"
                                required
                                type="text"
                                placeholder='enter your query'
                            ></input>
                            <button onClick={handleSearch}>hello click me for stuff</button>
                        </div>

                        <div className='form-search-container-bottom'>
                            <div className='form-search-container-bottom-content'>
                                {input.map((data) => (
                                    <div>{data[1]}</div>
                                )
                                )}
                            </div>
                        </div>

                    </div>
                </>
            }
            {showSearchForm === "noForm" && <img className="img-btn-search" alt="search icon" src={searchicon} onClick={handleClick}></img>}
        </div>
    )
}

I have a handler function in my react project. I used hard reload to run the function.

const deleteTask = (index) => {
    let tempList = taskList;
    tempList.splice(index, 1);
    localStorage.setItem("taskList", JSON.stringify(tempList));
    setTaskList(tempList);
    window.location.reload();
  };

If I turn off the function:

 window.location.reload();

Then I have to refresh the browser after I hit the delete button.

If so, what is the right solution so that I don’t have to refresh the browser when the delete button is pressed to delete data. Thanks.

when i try to change the value in autocomplete of material-ui, i always get its value 0, here i have uploaded my whole code, can anyone please check my code and help me to resolve this issue ? any help will be really appreciated.

type Props = {
    team?: Team;
    onSubmit: (params: TeamParams) => Promise<unknown>;
    onDelete?: () => void;
};

type State = {
    userId: string;
};

export const TeamForm: FC<Props> = ({ team, onSubmit, onDelete }) => {
  const { users } = useDataContext();
  const [state, setState] = useState<State>({
    userId: tearm?.userId.toString() || '',
  });

  :
  :

const userValue =
        users.find(user => user.id == Number(state.userId))
return (
  <Autocomplete
    options={users.map(
      c => `${c.id}: ${c.name}`,
    )}
    value={state.userId}
    inputValue={
      userValue?.id +
      userValue?.name
     }
     onChange={event =>
          setState({
               ...state,
               userId: (event.target as HTMLInputElement).value,
           })
      }
     renderInput={params => (
       <TextField
         {...params}
         fullWidth
         label='ユーザー'
       />
     )}
   />
  );
};

Also, if you add the following, you cannot modify the text box.
can anyone please check my code and help me to resolve this issue ? any help will be really appreciated.

inputValue={`${userValue?.id}: ${userValue?.organizationName} ${userValue?.name}`}

I’m using this great snippet to create a JS and CSS flip book: https://codepen.io/captain_anonym0us/pen/ybVbpv

It works great in Chrome 98 but acts differently in Firefox 97.0 (64-Bit).

Somehow an element with a z-index somewhere in the middle of all available z-indexes seems to be on top of it all.

<div class="pages">
  <div class="page" style="z-index: 29;"></div>
  <div class="page"></div>
  <div class="page" style="z-index: 27;"></div>
  ...
  <div class="page"></div>
  <div class="page" style="z-index: 15;"></div>
  <div class="page"></div>
  <div class="page" style="z-index: 13;"></div>
  <div class="page"></div>
  <div class="page" style="z-index: 11;"></div>
  <div class="page"></div>
  ...
  <div class="page"></div>
  <div class="page" style="z-index: 1;"></div>
</div>

In this example, the element with z-index 13 seems to be on top of it all in Firefox.

Is this a bug or is there something (additional) in the code missing?

Thanks in advance!

Trying to unlock my boot loader a125u oem unlock is not accessible on my device in developer menu or any place how can i use linux to access it and how.

Hello StackOverFlow Community

I am currently working on my web development and web application development skills. The goal of this small project is to develop a web app that takes the source code of several opensource HTML5 games along with JS games to be accessible all from one application.

I am not asking for advice on the code I need to write such an application because I am familiar with the tools. I am simply asking where I can start with developing such an app. (e.g. resources, youtube videos, etc.)

I created a UI mockup of what the site should look like. It is relatively simplistic.

UI Mockup at a Basic Level

Any advice is greatly appreciated.

I do this system but I cannot output from this I exactly want name:’mancing’or ‘mancing’
can anyone solve this problem

const data = [
  [name = 'john doe', name2 = 'hello'],
  [age = 23],
  [hobby = [{
    name: 'mancing'
  }]]
];
data.map((item, key) => console.log(item, key))

for my web application I need to login towards AWS Cognito.
But other parts of my website requires the authorization code.

So, this is my code:

    function signInButton() {
      var authenticationData = {
        Username : document.getElementById("inputUserName").value,
        Password : document.getElementById("inputPassword").value,
      };

      var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);

      var poolData = {
        UserPoolId : _config.cognito.userPoolId,
        ClientId : _config.cognito.clientID,
        ClientSecret : _config.cognito.clientSecret,
      };

      var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

      var userData = {
        Username : document.getElementById("inputUserName").value,
        Pool : userPool,
      };

      var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);

      cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: function (result) {
          var accessToken = result.getAccessToken().getJwtToken();
          console.log(accessToken);
          console.log(result);
        },

        onFailure: function (err) {
          alert(err.message || JSON.stringify(err));
          console.log(userData);
        },
      });
    }

I get successfully the token, but how can I obtain the authCode?

I am trying to fetch user information from instagram but now instagram sending request to the user to allow me to fetch their information and then only I can get their data

Will there be any way to make this process App to App communication without user concern

GET AUTH CODE

app.get("/get-auth-code", (req, res, next) => {
console.log(INSTA_REDIRECT_URI);
return res.send(
`<a href='https://api.instagram.com/oauth/authorize?  client_id=${INSTA_APP_ID}&redirect_uri=${INSTA_REDIRECT_URI}&scope=user_media,user_profile&response_type=code'> Connect to Instagram </a>`
  );
 });

To Get Access Token From Instagram API

app.get("/getAccessToken",asyncHandler((req, res, next) => {
    request.post(
      {
        url: "https://api.instagram.com/oauth/access_token",
        form: {
          redirect_uri: INSTA_REDIRECT_URI,
          client_id: INSTA_APP_ID,
          client_secret: INSTA_APP_SECRET,
          code: INSTA_AUTH_CODE,
          grant_type: "authorization_code",
       },
     },
      function (err, httpResponse, body) {
        /* ... */
        console.log("err: " + err);
        console.log("body: " + body);
        return res.status(200).json(body);
      }
    );
  })
);

To Get User Details from Instagram API

app.get("/getDetail",asyncHandler((req, res, next) => {
    request.get(
      {
         url: `https://graph.instagram.com/${INSTA_USER_ID}? 
               fields=id,username,media_type&access_token=${INSTA_ACCESS_TOKEN}`,
      },
      function (err, httpResponse, body) {
         /* ... */
        console.log("err: " + err);
        console.log("body: " + body);
        return res.status(200).json(body);
      }
    );
  })
);

So the point is to get users information without getting permission from the user , Is there any way to do this