javascript – Page 2347 – Blancer.com Tutorials and projects

How to send blob to php backend via ajax? [duplicate]

Hey I am new to javascript (asynchonous calls).
I would like to call the admin-ajax.php file which contains a function that needs an image/blob to insert in the DB.

So this is the ajax call I made:

jQuery.ajax({
    url:"//domain.com/wp-admin/admin-ajax.php",    //the page containing php script
    type: "POST",
    data: {action: "addimagetocart", image: blob},
    success:function(result){
        console.log(result);
    }
});

In the above code, the blob variable contains a blob (created by html2canvas) which could be saved as a .png file.

My questions:

How can I send the blob appropriately? At this moment, I receive the following errors:
I have tried to put the data in a FormData() object, but that does not work either.
Is it better to first convert the file into a .png or just send it as a blob and convert it in the php file?

Keep select visible when moving focus from input to select

Is there a way to make it like dropdown menu
so that Dropdown (select) disappears as soon as I click outside the input or select, and at the same time the select remains open when I put focus from input to select?

I expect that this can only be done with css.
If not, what might work on ssr Blazor? (I tried doing delay + cancellationToken but it doesn’t work well)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="multiselect">
    <input placeholder="search..." type="search"></input>
    <select multiple>
      <option>one</option>
      <option>two</option>
      <option>three</option>
      <option>four</option>
      <option>five</option>
    </select>
  </div>
  <script>

  window.onload = function () {
    hide();

    multisel.addEventListener("focus", focusin, true);
    multisel.addEventListener("blur", fucusout, true);
    // multisel.addEventListener("focusin", focusin);
    // multisel.addEventListener("focusout", fucusout);
  }

function focusin(event) {
  show();
}

function fucusout(event) {
  hide();
}

function hide() {
  let el = document.querySelector('select');
  el.style.display = 'none';
}

function show() {
  let el = document.querySelector('select');
  el.style.display = 'block';
}

</script>


<style>
body {
  font-size: 20px !important;
}

.multiselect {
  width: 400px;
}

select {
  width: 100%;
  font-size: 20px;
}

input {
  width: 100%;
  font-size: 20px;
}


</style>

</body>

</html>

JavaScript Tic Tac Toe not running function in forEach

Everything in this game works except for a function that checks possible winning combinations and displays who the winner is or a draw. This function works if placed in the addEventListener for clicking on the squares, however it does not work when placed outside of the addEventListener, but still inside the forEach. This will need to be outside addEventListener because the page needs to update as soon as a winning combination is detected (or draw) as opposed needing to click again for the game to update.

const addPlayer = (name, letter) => {
  return {
    name,
    letter
  };
}

//Form creates players and if names are left blank, will make names "Player 1" and "Player 2" by default.
//Will start the game upon clicking submit and hide the form in place of a game display
document.querySelector('#submit').addEventListener('click', (e) => {
  e.preventDefault();
  player1 = addPlayer(document.querySelector('#player1Name').value, 'X');
  if (player1.name == '') {
    player1.name = 'Player 1'
  }
  player2 = addPlayer(document.querySelector('#player2Name').value, 'O');
  if (player2.name == '') {
    player2.name = 'Player 2'
  }
  console.log(player1.name)
  console.log(player1.letter)
  console.log(player2.name)
  console.log(player2.letter)
  document.querySelector('.board').style = ('display: flex;')
  document.querySelector('.nameInput').style = ('display: none;')
  document.querySelector('.display').textContent = `${player1.name}'s turn`;
  document.querySelector('.display').style = ('font-size: 2em;');
  playGame()
})

const gameGrid = ['', '', '', '', '', '', '', '', ''];

let currentPlayer = '';
let playerTurn = 1;
let gameOver = false;

//Function to take turns switching from player 1 to player 2, starting with player 1. Display div displays whose turn it is once the current player has just taken a turn.
const takeTurns = () => {
  if (playerTurn === 1) {
    currentPlayer = player1.letter;
    document.querySelector('.display').textContent = `${player2.name}'s turn`;
    playerTurn = 0;
  } else if (playerTurn === 0) {
    currentPlayer = player2.letter;
    document.querySelector('.display').textContent = `${player1.name}'s turn`;
    playerTurn = 1;
  } else {
    return;
  }
}

const player1WinDisplay = () => {
  console.log(`${player1.name} wins!`)
  console.log('game over')
  gameOver = true;
  document.querySelector('.display').textContent = `${player1.name} wins!`;
  return null
}

const player2WinDisplay = () => {
  console.log(`${player2.name} wins!`)
  console.log('game over')
  gameOver = true;
  document.querySelector('.display').textContent = `${player2.name} wins!`;
  return null
}

const determineWinner = () => {
  if (gameGrid[0] != '' && gameGrid[0] == gameGrid[1] && gameGrid[2] == gameGrid[1]) {
    if (gameGrid[0] == 'X' && gameGrid[1] == 'X' && gameGrid[2] == 'X') {
      player1WinDisplay()
    } else {
      player2WinDisplay()
    }
  } else if (gameGrid[3] != '' && gameGrid[3] == gameGrid[4] && gameGrid[5] == gameGrid[4]) {
    if (gameGrid[3] == 'X' && gameGrid[4] == 'X' && gameGrid[5] == 'X') {
      player1WinDisplay()
    } else {
      player2WinDisplay()
    }
  } else if (gameGrid[6] != '' && gameGrid[6] == gameGrid[7] && gameGrid[8] == gameGrid[7]) {
    if (gameGrid[6] == 'X' && gameGrid[7] == 'X' && gameGrid[8] == 'X') {
      player1WinDisplay()
    } else {
      player2WinDisplay()
    }
  } else if (gameGrid[0] != '' && gameGrid[0] == gameGrid[3] && gameGrid[6] == gameGrid[3]) {
    if (gameGrid[0] == 'X' && gameGrid[3] == 'X' && gameGrid[6] == 'X') {
      player1WinDisplay()
    } else {
      player2WinDisplay()
    }
  } else if (gameGrid[1] != '' && gameGrid[1] == gameGrid[4] && gameGrid[7] == gameGrid[4]) {
    if (gameGrid[1] == 'X' && gameGrid[4] == 'X' && gameGrid[7] == 'X') {
      player1WinDisplay()
    } else {
      player2WinDisplay()
    }
  } else if (gameGrid[2] != '' && gameGrid[2] == gameGrid[5] && gameGrid[8] == gameGrid[5]) {
    if (gameGrid[2] == 'X' && gameGrid[5] == 'X' && gameGrid[8] == 'X') {
      player1WinDisplay()
    } else {
      player2WinDisplay()
    }
  } else if (gameGrid[0] != '' && gameGrid[0] == gameGrid[4] && gameGrid[8] == gameGrid[4]) {
    if (gameGrid[0] == 'X' && gameGrid[4] == 'X' && gameGrid[8] == 'X') {
      player1WinDisplay()
    } else {
      player2WinDisplay()
    }
  } else if (gameGrid[6] != '' && gameGrid[6] == gameGrid[4] && gameGrid[2] == gameGrid[4]) {
    if (gameGrid[6] == 'X' && gameGrid[4] == 'X' && gameGrid[2] == 'X') {
      player1WinDisplay()
    } else {
      player2WinDisplay()
    }
  } else if (gameGrid[0] && gameGrid[1] && gameGrid[2] && gameGrid[3] && gameGrid[4] && gameGrid[5] && gameGrid[6] && gameGrid[7] && gameGrid[8] != '') {
    console.log('Draw')
    document.querySelector('.display').textContent = `It's a draw`;
    return null
  }
}

const playGame = () => {
  let squares = document.querySelectorAll('.square');

  squares.forEach((square) => {

    const a1 = document.querySelector('#a1');
    const a2 = document.querySelector('#a2');
    const a3 = document.querySelector('#a3');
    const b1 = document.querySelector('#b1');
    const b2 = document.querySelector('#b2');
    const b3 = document.querySelector('#b3');
    const c1 = document.querySelector('#c1');
    const c2 = document.querySelector('#c2');
    const c3 = document.querySelector('#c3');

    square.addEventListener('click', () => {
      //Locks in div display and array if div has been clicked; prevents takeTurns and turn display from changing if clicking on filled square
      determineWinner()
      if (square.textContent != '') {
        return
      } else if (square.textContent == '' && gameOver == false) {
        takeTurns()
        if (square == a1) {
          gameGrid[0] = currentPlayer;
          a1.textContent = currentPlayer;

        } else if (square == b1) {
          gameGrid[1] = currentPlayer;
          b1.textContent = currentPlayer;

        } else if (square == c1) {
          gameGrid[2] = currentPlayer;
          c1.textContent = currentPlayer;

        } else if (square == a2) {
          gameGrid[3] = currentPlayer;
          a2.textContent = currentPlayer;

        } else if (square == b2) {
          gameGrid[4] = currentPlayer;
          b2.textContent = currentPlayer;

        } else if (square == c2) {
          gameGrid[5] = currentPlayer;
          c2.textContent = currentPlayer;

        } else if (square == a3) {
          gameGrid[6] = currentPlayer;
          a3.textContent = currentPlayer;

        } else if (square == b3) {
          gameGrid[7] = currentPlayer;
          b3.textContent = currentPlayer;

        } else if (square == c3) {
          gameGrid[8] = currentPlayer;
          c3.textContent = currentPlayer;

        }
        console.log(gameGrid);
      }
    })
  })
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

form {
  display: flex;
  flex-direction: column;
}

.header {
  margin-bottom: 100px;
}

.board {
  display: none;
}

.square {
  display: flex;
  height: 175px;
  width: 175px;
  border: 1px solid black;
  justify-content: center;
  align-items: center;
  font-size: 4em;
}

#a1,
#b1,
#c1 {
  border-top: none;
}

#a3,
#b3,
#c3 {
  border-bottom: none;
}

#a1,
#a2,
#a3 {
  border-left: none;
}

#c1,
#c2,
#c3 {
  border-right: none;
}

#player1Name {
  margin-bottom: 10%;
}

#player2Name {
  margin-bottom: 10%;
}

label {
  font-size: 1.2em;
}

<!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>Tic-Tac-Toe</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="header">
      <h1>Tic Tac Toe</h1>
      <div class="display">
        <form action="nameInput" class="nameInput">
          <label for="player1Name">Player 1 Name</label>
          <input type="text" id="player1Name" name="player1Name" required>
          <label for="player2Name">Player 2 Name</label>
          <input type="text" id="player2Name" name="player2Name" required>
          <input type="submit" id="submit" name="submit" value="Submit / Start">
        </form>
      </div>
    </div>
    <div class="board">
      <div class="columnA">
        <div class="square" id="a1"></div>
        <div class="square" id="a2"></div>
        <div class="square" id="a3"></div>
      </div>
      <div class="columnB">
        <div class="square" id="b1"></div>
        <div class="square" id="b2"></div>
        <div class="square" id="b3"></div>
      </div>
      <div class="columnC">
        <div class="square" id="c1"></div>
        <div class="square" id="c2"></div>
        <div class="square" id="c3"></div>
      </div>
    </div>
  </div>
  <script src="script.js" defer></script>
</body>

</html>

I have tried calling the function in various places but will either not work or not work as needed.

React not importing component properly

I have this simple React code but is not importing properly, I don’t know why.

import teste from './components/teste';
import './App.css';


function App() {
  return (
    <Container>
        <teste/>
    </Container>
  );
}

const Container = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: blue;
`

export default App;

also have the teste component

import React from 'react'

export default function teste() {
  return (
    <div>teste</div>
  )
}

This is the folder structure

could someone help me?

How to Change a Custom HTML Attribute by Screen Width using Javascript [duplicate]

I’m trying to change the data-smooth-scroll-offset attribute value for the following div if the screen width is larger than 959px:

This div:

<div id="Table-Of-Contents" data-smooth-scroll="1" data-smooth-scroll-offset="20"></div>

The JS:

function adjustWidth(){

    var actual_width = window.innerWidth;

    if(actual_width > 959) {
        document.getElementById("Table-Of-Contents").data-smooth-scroll-offset="111";
    }
}

It appears that data-smooth-scroll-offset is a custom html attribute. Any ideas how to change its value?

Mask a sticker image so that it fits onto a main image without parts of the sticker that are outside the image being visible – How?

Main image (car) and sticker – everything under the blue line should not be visible(https://i.stack.imgur.com/NcN0W.png)

I want to create a website where you have a main image and stickers that you can stick on the main image. The stickers should behave like real stickers, so when you stick them on an edge, only the part of the sticker that is on the front is visible, not the bottom. For example, everything below the blue line in the example image must be cut off the sticker. The stickers should be able to be moved at any time, so the code to mask the stickers should be written relatively dynamically or generally and not specifically for a certain place on the car, for example. I searched a lot but couldnt find anything which was satisfying, does anybody know how you could do that?

I already tried different things with CSS mask-image, but when I tried to use for example mask-composite it didn’t do anything – I dont know if I just implemented it wrong.

How Can I Use the Poppins Font on My Website (coded with HTML, CSS, and JavaScript)? [duplicate]

While working on a coding tutorial online, I noticed they used the Poppins font. They were working in the VS Code editor, just like me. But they had a different font than I did. It didn’t mess up the program’s functionality, but it didn’t help its looks. Could someone guide me through what’s wrong and give me a solution? Thanks so much!

I tried installing the Poppins font in my C:/Windows/Fonts directory, but it didn’t work when I tried rerunning the script.

This isn’t necessarily a programming question, but it is related and any help is much appreciated.

Get input to alert box from multiple labels using querySelectorAll [duplicate]

I want to get the user input from 3 labels and display onto an alert box. I am trying to use the queryAllSelector to grab the 3 id’s from the labels which works. But when I try to type into the boxes and press the button to display the alert box, it just says [object NodeList].

HTML

<meta charset="UTF-8">
    <title>Form</title>
    <link href="form.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
    <form>
        <label class="title">Title:</label><br>
        <input type="text" id="form-scream1" name="Title"  placeholder="Enter Text">
        <br>
        <label class="title" for="body text">Body Text:</label><br>
        <input type="text" id="form-scream2" name="Body Text" placeholder="Write Something...">
        <br>
        <label class="title">Button For text:</label><br>
        <label for="bodyy"></label><input type="text" id="form-scream3" name="Body Text" placeholder="Text">
    </form>
    <button onclick="getinput()"> platypus</button>
</div>

<script>
    function getinput()
    {
        const inputVal = document.querySelectorAll("#form-scream1, #form-scream2, #form-scream3");
        alert(inputVal);
    }
</script>



</body>
</html>

Sync sftp folder with local folder

So I am trying to make my sftp folder synced with a local folder using nodejs. That means that they both always have the same files and also get updated based on which one is newer. The Problem I have with my script is that it is always uploading the folders and files even if I haven’t changed anything. Maybe the date is different?

const fs = require('fs');
const path = require('path');
const Client = require('ssh2-sftp-client');

const SFTP_CONFIG = {
  host: '123456',
  username: 'user',
  password: '1234',
  port: 22,
  remotePath: '/',
  localPath: './content',
  syncInterval: 10000, 
};

const sftp = new Client();

async function syncFiles() {
  try {
    await sftp.connect(SFTP_CONFIG);

    await syncDirectory(SFTP_CONFIG.remotePath, SFTP_CONFIG.localPath);

    setInterval(async () => {
      await syncDirectory(SFTP_CONFIG.remotePath, SFTP_CONFIG.localPath);
    }, SFTP_CONFIG.syncInterval);
  } catch (err) {
    console.error('Error:', err);
  }
}

async function syncDirectory(remotePath, localPath) {
  try {
    const remoteFiles = await sftp.list(remotePath);
    const localFiles = await getLocalFiles(localPath);

    // Download new or modified files from the remote server
    for (const remoteFile of remoteFiles) {
      const localFile = localFiles.find((f) => f.name === remoteFile.name);
      if (!localFile || remoteFile.modifyTime > localFile.modifyTime) {
        const remoteFilePath = path.posix.join(remotePath, remoteFile.name);
        const localFilePath = path.join(localPath, remoteFile.name);
        if (remoteFile.type === 'd') {
          await downloadDirectory(remoteFilePath, localFilePath);
        } else {
          await downloadFile(remoteFilePath, localFilePath);
        }
      } else if (remoteFile.modifyTime < localFile.modifyTime) {
        const remoteFilePath = path.posix.join(remotePath, remoteFile.name);
        const localFilePath = path.join(localPath, remoteFile.name);
        if (localFile.type === 'd') {
          await uploadDirectory(localFilePath, remoteFilePath);
        } else {
          await uploadFile(localFilePath, remoteFilePath);
        }
      }
    }

    // Upload new or modified files to the remote server
    for (const localFile of localFiles) {
      const remoteFile = remoteFiles.find((f) => f.name === localFile.name);
      if (!remoteFile || localFile.modifyTime > remoteFile.modifyTime) {
        const remoteFilePath = path.posix.join(remotePath, localFile.name);
        const localFilePath = path.join(localPath, localFile.name);
        if (localFile.type === 'd') {
          await uploadDirectory(localFilePath, remoteFilePath);
        } else {
          await uploadFile(localFilePath, remoteFilePath);
        }
      }
    }
  } catch (err) {
    console.error('Error syncing directory:', err);
  }
}

async function downloadFile(remotePath, localPath) {
  try {
    await sftp.fastGet(remotePath, localPath);
    console.log(`Downloaded ${remotePath} to ${localPath}`);
  } catch (err) {
    console.error('Error downloading file:', err);
  }
}

async function downloadDirectory(remotePath, localPath) {
  try {
    await fs.promises.mkdir(localPath, { recursive: true });

    const remoteFiles = await sftp.list(remotePath);
    for (const remoteFile of remoteFiles) {
      const fileName = remoteFile.name;
      const remoteFilePath = path.posix.join(remotePath, fileName);
      const localFilePath = path.join(localPath, fileName);
      if (remoteFile.type === 'd') {
        await downloadDirectory(remoteFilePath, localFilePath);
      } else {
        await downloadFile(remoteFilePath, localFilePath);
      }
    }
  } catch (err) {
    console.error('Error downloading directory:', err);
  }
}

async function uploadFile(localPath, remotePath) {
  try {
    await sftp.fastPut(localPath, remotePath);
    console.log(`Uploaded ${localPath} to ${remotePath}`);
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}

async function uploadDirectory(localPath, remotePath) {
  try {
    await sftp.mkdir(remotePath, true);
    console.log(`Uploaded ${localPath} to ${remotePath}`);
    const localFiles = await getLocalFiles(localPath);
    for (const localFile of localFiles) {
      const fileName = localFile.name;
      const localFilePath = path.join(localPath, fileName);
      const remoteFilePath = path.posix.join(remotePath, fileName);
      if (localFile.type === 'd') {
        await uploadDirectory(localFilePath, remoteFilePath);
      } else {
        await uploadFile(localFilePath, remoteFilePath);
      }
    }
  } catch (err) {
    console.error('Error uploading directory:', err);
  }
}

async function getLocalFiles(dirPath) {
  try {
    const files = await fs.promises.readdir(dirPath, { withFileTypes: true });
    return Promise.all(
      files.map(async (file) => {
        const filePath = path.join(dirPath, file.name);
        const stats = await fs.promises.stat(filePath);
        return { name: file.name, modifyTime: stats.mtimeMs, type: file.isDirectory() ? 'd' : 'f' };
      })
    );
  } catch (err) {
    if (err.code === 'ENOENT') {
      console.error(`Local path "${dirPath}" does not exist.`);
      return [];
    } else {
      console.error('Error reading local directory:', err);
      throw err;
    }
  }
}

syncFiles();

How to add a eCharts DataZoom to a graph

I have implemented an eCharts graph. See this fiddle:

https://jsfiddle.net/qgf4c2jy/3/

    option = {
        title: {
            text: 'Basic Graph'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
            {
                type: 'graph',
                layout: 'none',
                symbolSize: 50,
                roam: true,
                label: {
                    show: true
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    fontSize: 20
                },
                data: [
                    {
                        name: 'A',
                        x: 300,
                        y: 300
                    },
                    {
                        name: 'B',
                        x: 800,
                        y: 300
                    },
                    {
                        name: 'C',
                        x: 550,
                        y: 100
                    },
                    {
                        name: 'D',
                        x: 550,
                        y: 500
                    },
                    {
                        name: 'E',
                        x: 1000,
                        y: 300
                    },
                    {
                        name: 'F',
                        x: 1200,
                        y: 300
                    }
                ],
                // links: [],
                links: [
                    {
                        source: 'A',
                        target: 'C'
                    },
                    {
                        source: 'B',
                        target: 'C'
                    },
                    {
                        source: 'B',
                        target: 'D'
                    },
                    {
                        source: 'A',
                        target: 'D'
                    },
                    {
                        source: 'B',
                        target: 'E'
                    },
                    {
                        source: 'E',
                        target: 'F'
                    }
                ],
                lineStyle: {
                    opacity: 0.9,
                    width: 2,
                    curveness: 0
                }
            }
        ]
    };

The resulting graph basically looks like this:

The x position of each node corresponds to the time axis. Thus, in this example graph, “E” happens before “F” and after “B”.

How can I extend this graph with a DataZoom on the xAxis like in this example? https://echarts.apache.org/examples/en/editor.html?c=custom-error-scatter

Why can’t i click the “register-selection” in bootstrap and JS?

I am making a website and I want to display an alert if the “register-selection” is clicked. But I can’t do it. Firstly; I tried to do it with Jquery but it did not work. After that; I tried it with the vanilla Javascript. But it did not work either. I tried to find the solution on the web and ChatGPT but I couldn’t find it again. How can I solve my Problem ?

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Register/Login</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script src='main.js'></script>
</head>
<style>
    body{
    background-color: #0A0A0A !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 6rem;
}


#register-login-selection{
    padding-top: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 5rem;
    word-break: break-all;
}


#register-selection{
    width: 15%;
    text-align: center;
    cursor: pointer;
    word-break: break-all;
}


#register-selection>h1{
    color: #FFF08D;
}



#login-selection{
    width: 15%;
    text-align: center;
    cursor: pointer;
    word-break: break-all;
}


#login-selection>h1{
    color: #FFF08D;
}

#login-form{
    width: 30%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
    background-color: #0A0A0A;
    border: 0.1rem solid #292929;
}

label{
    color: #FFF08D;
}

input{
    background-color: #0A0A0A !important;
    border-color: #292929 !important;
    color: #6b6b6b !important;
}

.form-group{
    padding-bottom: 2em;
}

button{
    background-color: #FFF08D !important;
    color: #0A0A0A !important;
    border-color: #FFF08D !important;
}


button:hover{
    background-color: #1A1A1A !important; 
    color: #FFF !important;
}


#register-form{
    width: 30%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
    display: none;
    background-color: #0A0A0A;
    border: 0.1rem solid #292929;
}
</style>
<body>
    
    <div id="register-login-selection" class="container-fluid">
        
        <div id="register-selection" class="">
            <h1>Register</h1>
        </div>

        <div id="login-selection" class="">
            <h1>Log In</h1>
        </div>
    </div>



    <form id="login-form">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>


    <form id="register-form">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">asd</button>
    </form>
</body>


</body>


<script>
    var RegisterButton=document.getElementById("register-selection");


    RegisterButton.addEventListener("click",function(){
        RegisterButton.style.color="red";
    })

</script>
</html>

Why does the Google Cloud Function return 500 Internal Server Error?

I have a Google Cloud Function which does a Stripe Checkout API post call. But everytime the functions is called, in DevTools i see that it returns a “500 Internal Server Error” : {“error”:{“message”:”INTERNAL”,”status”:”INTERNAL”}}

The code looks likte this:

const functions = require('firebase-functions');
const http = require('http');

// This Cloud Function handles requests from clients and creates a Stripe checkout session for an evening shop.
exports.stripeAvondwinkel = functions.region('europe-west3')
  .runWith({
    memory: '128MB'
  }).https.onCall((data, context) => {
    // Extract the converted list of items from the request data
    const convertedList = data.convertedList;

    // Define constants for the checkout session parameters
    const successUrl = 'https://example.com/succes';
    const mode = 'payment';
    const automaticTaxEnabled = 'true';
    const bezorgkosten = 'XXXXXXXX';

    // Convert the convertedList into line items for the checkout session
    const lineItems = convertedList.map(item => {
      const [prijsID, aantal] = item.split(',');
      return {
        price: prijsID,
        quantity: aantal
      };
    });

    // Construct the form data for the checkout session
    const formData = {
      'success_url': successUrl,
      'mode': mode,
      'automatic_tax[enabled]': automaticTaxEnabled,
      'shipping_options[0][shipping_rate]': bezorgkosten
    };

    // Add line items to the form data
    lineItems.forEach((item, index) => {
      formData[`line_items[${index}][price]`] = item.price.toString();
      formData[`line_items[${index}][quantity]`] = item.quantity;
    });

    // Log the constructed form data
    console.log('Form Data:', formData);

    // Add API post call logic
    return new Promise((resolve, reject) => {
      const req = http.request({
        hostname: 'api.stripe.com',
        path: '/v1/checkout/sessions',
        method: 'POST',
        headers: {
          'Authorization': 'Bearer XXXXXXXXXX',
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }, res => {
        let data = '';
        res.on('data', chunk => {
          data += chunk;
        });
        res.on('end', () => {
          // Log the response data
          console.log('Response Data:', data);
          // Resolve or reject the promise based on the response status code
          if (res.statusCode === 200) {
            const url = JSON.parse(data).url;
            resolve(url);
          } else {
            const errorMessage = JSON.parse(data).error.message;
            reject(new Error(`Failed to create checkout session: ${errorMessage}`));
          }
        });
      });

      // Handle request errors
      req.on('error', error => {
        console.error('Request Error:', error);
        reject(new Error(`Request error: ${error}`));
      });

      // Write form data to request body and end the request
      req.write(new URLSearchParams(formData).toString());
      req.end();
    });
  });

I attempted to execute the provided code for a Google Cloud Function, expecting it to successfully create a checkout session with the Stripe API based on the provided input data. However, upon execution, I encountered a 500 Internal Server Error. I double-checked the code for any syntax errors or misconfigurations, but couldn’t identify the root cause. Any insights or suggestions on resolving this issue would be greatly appreciated.

How to show only one question & answer one at a time versus showing all the questions on the webpage? [closed]

Im new to javascript and currently trying to create a quiz through it. I my database for he questions and answers are embedded in javascript and I’m trying to show 1 q&a at a time versus showing all of them at once. How would I do this and add a btn function so that the user can submit their answer and it will automate to the next question. Thanks!

Javascript Code:

text

HTML

text

How to get all checked checkbox value in JavaScript and put it into the variable “result”?

My task is to do a test and use the alert command to show the number of points scored. So one of the questions involves checkboxes, several of which are correct and have a value of “1”. Accordingly, incorrect ones have the value “-1”. Here’s the code:

<p>
<label for="smth">What kinds of weather are <strong>the 
deadliest</strong>?</label><br>
<label> <input type="checkbox" name = "weather" value="1" id="h"> Heat <br> </label>
<label> <input type="checkbox" name = "weather" value="1" id="f"> Flooding <br> </label>
<label> <input type="checkbox" name = "smth" value="-1" id="t"> Thunder <br> </label>
<label> <input type="checkbox" name = "smth" value="-1" id="w"> Wind <br> </label>
</p>

How should I display the value through the alert command if the beginning of the code
function calculate(){
var result = 0
and result is a variable into which the values are added and which will be output as alert(result). I am a student and a beginner and therefore I strongly ask for a not very complex code in the answer. Thank you!

Is it possible to make an sliding img animation continuous at a faster rate?

I am trying to do something like this

.image_wrap {
   width:580px;
   height:260px;
   overflow:hidden;
}
.image_wrap img {
        width:100%;
        height:100%;
        transform:scale(1.2);
        -webkit-animation: 1s slideImg linear infinite;
        animation: 1s slideImg linear infinite;
    }
    
    @-webkit-keyframes slideImg {
        from { transform: translateY(100%); }
        to { transform: translateY(-100%); }
    }
    @keyframes slideImg {
        from { transform: translateY(100%); }
        to { transform: translateY(-100%); }
    }

but I am trying to make it so the there isn’t a white space between repetitions. Is this possible?

To be honest I’ve only tried a few things but the latest thing I was planning on trying is to use the background-img and set that in a separate div and try animating that?