Manage Shiny Sweetalert Size with Bootstrap

Below is code showing that the size of a sweetalert when bootstrap is used is very large. If you comment out the navbarpage() code chunk I note in the sample below the sweetalert is smaller.

I suppose I could overwrite with new .css which is fine. But, is there an alternative way to deal with that via arguments in the function itself? I don’t see an argument in the help, but there is the ... which passes to .js. I’m not savvy enough with js to know if that’s an option and if so what might that look like?

Thanks for any suggestions

library(shiny)
library(bslib)
library(shinyBS)


ui <- fluidPage(

    ### Code Chunk to comment out
    navbarPage(
        theme = bs_theme(bootswatch = "flatly", version = 4),
        title = 'Methods',
        tabPanel('One'),
    ),
    ### end BS code chunk
    
  tags$h2("Sweet Alert examples"),
  actionButton(
    inputId = "success",
    label = "Launch a success sweet alert",
    icon = icon("check")
  ),
  actionButton(
    inputId = "error",
    label = "Launch an error sweet alert",
    icon = icon("remove")
  ),
  actionButton(
    inputId = "sw_html",
    label = "Sweet alert with HTML",
    icon = icon("thumbs-up")
  )
)

server <- function(input, output, session) {

  observeEvent(input$success, {
    show_alert(
      title = "Success !!",
      text = "All in order",
      type = "success"
    )
  })

  observeEvent(input$error, {
    show_alert(
      title = "Error !!",
      text = "It's broken...",
      type = "error"
    )
  })

  observeEvent(input$sw_html, {
    show_alert(
      title = NULL,
      text = tags$span(
        tags$h3("With HTML tags",
                style = "color: steelblue;"),
        "In", tags$b("bold"), "and", tags$em("italic"),
        tags$br(),
        "and",
        tags$br(),
        "line",
        tags$br(),
        "breaks",
        tags$br(),
        "and an icon", icon("thumbs-up")
      ),
      html = TRUE
    )
  })

}
shinyApp(ui, server)

Why can I not use getElementById as a predicate to Array#map?

To map an array of stringified numbers to actual Numbers, I can simply pass the Number function:

let arr = ["0", "1", "-2.5"];

console.log(arr.map(Number));

Now I would like to use the same approach with document.getElementById to map a list of id strings to their corresponding DOM nodes:

let arr = ["a", "b"];

console.log(arr.map(document.getElementById));
<div id="a">a <span id="b">b</span></div>

which gives me

"TypeError: 'getElementById' called on an object that does not implement interface Document."

Can someone explain the error?

How to send server request to back-end relay and return API data to front-end

I am building a simple weather app. I am a front-end developer who has barely touched anything related to the back-end. In the process of building my weather app I wanted to use an API. I encountered an issue, my API key was public for anyone to see. I did some research on how to hide it and found out you need to create a back-end server relay to (I assume) take a request from the front end, use the API to generate the data on the back-end, then return that data to the front end.

Because I have very little experience with the back-end, I have attempted to do all this myself but am confused.

My goal is to have the client enter a location in the search bar of the application, for example, ‘Paris’, then send that to the back-end server (Node.js), convert ‘Paris’ to coordinates using the geocoding API, send the longitude and latitude to the weather API which will use that data to return an object of weather data for that region.

So far I have managed to:

  1. get the server to return the data I need but I do not know how to send this data to the front end.
  2. I can only use the server to generate the data if I replace the ${INSERT_LOCATION_HERE} to a location name manually because I don’t know how to send for example ‘Paris’ from the front-end to the server.

Here is a smaller version of the application with all the code:

HTML

<!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">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=NTR&display=swap" rel="stylesheet">
    <title>Weather App</title>
</head>
<body>
    <section class="search-bar">
        <div class="container">
            <span class="input-container">
                <input class="input" type="text" placeholder="Enter a city">
                <button class="set">SET</button>
            </span>
        </div>
    </section>
    <section class="weather-information">
        <div class="success-container">
            <div class="inner-container">
                <div class="weather-details">
                    <header class="temperature">-°</header>
                    <p class="feels-like-temperature">Feels like: -°</p>
                    <p class="weather">Weather: -</p>
                    <p class="smaller-line-height humidity">Humidity: -%</p>
                    <p class="smaller-line-height wind-speed">Wind Speed: -m/s</p>
                </div>
            </div>
        </div>
    </section>
    <script src="script.js"></script>
</body>
</html>

CSS

/* Code to remove all element default styling */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: 'NTR', sans-serif;
    font-size: 20px;
}

button,
button:hover {
    background: transparent;
    box-shadow: 0px 0px 0px transparent;
    text-shadow: 0px 0px 0px transparent;
}

button {
    -webkit-tap-highlight-color: transparent;
    border: 0px solid transparent;
}

button:active,
button:focus
.submit-button,
input:focus, textarea:focus, select:focus {
    outline: none;
}
  
button:active,
.wrapper-for-each-form-section input,
.wrapper-for-each-form-section textarea,
.submit-button {
    border: none;
}

/* All Devices */

.search-bar {
    font-size: 0.75rem;
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 25px;
    letter-spacing: 1px;
}

.search-bar .container {
    height: 100%;
    width: 75%;
    border-bottom: 2px solid #d6d6d6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.search-bar .container .input-container {
    height: 70%;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-bar .container .input-container input {
    font-size: 1.5rem;
    border: none;
    width: 70%;
}

.search-bar .container .input-container button {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #adadad;
    cursor: pointer;
}

.weather-information {
    height: 20rem;
    width: 100%;
    position: relative;
    top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-information .success-container {
    height: 100%;
    width: 75%;
    border-radius: 1rem;
    background: #f6f5fa;
    box-shadow: 0 10px 10px 0 rgb(0 0 0 / 16%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 100%;
    position: absolute;
    z-index: 10;
}

.weather-information .success-container .inner-container {
    height: 85%;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.weather-information .success-container .inner-container .image-container {
    display: flex;
    width: 100%;
    height: 35%;
    align-items: center;
    justify-content: center;
}

.weather-information .success-container .inner-container .image-container img {
    height: 100%;
}

.weather-information .success-container .inner-container .weather-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 65%;
}

.weather-information .success-container .inner-container .weather-details header {
    font-size: 3.5rem;
    line-height: 3.5rem;
}

.weather-information .success-container .inner-container .weather-details p:nth-child(2),
.weather-information .success-container .inner-container .weather-details p:nth-child(3) {
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 400;
}

.weather-information .success-container .inner-container .weather-details .smaller-line-height {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 500;
}

JavaScript (client)

const inputField = document.querySelector('.input');
const setButton = document.querySelector('.set');

// All elements for weather details when API call is successful:
const weatherDetailsContainer = document.querySelector('.success-container');
const temperature = document.querySelector('.temperature');
const feelsLiketemperature = document.querySelector('.feels-like-temperature');
const weather = document.querySelector('.weather');
const humidity = document.querySelector('.humidity');
const windSpeed = document.querySelector('.wind-speed');

setButton.addEventListener('click', () => {
    // insert code to send data to server
})

JavaScript (Server)

// These import necessary modules and set some initial variables
require("dotenv").config();
const express = require("express");
const fetch = require("node-fetch");
const rateLimit = require("express-rate-limit");
var cors = require("cors");
const app = express();
const port = 3000;
const axios = require("axios");

const limiter = rateLimit({
  windowMs: 1000, // 1 second
  max: 1, // limit each IP to 1 requests per windowMs
});

//  apply to all requests
app.use(limiter);

// Allow CORS from any origin
app.use(cors());

// Routes

app.get("/", (req, res) => res.send("Hello World!"));

app.get("/api/search", async (req, res) => {
  try {
    const coordAPI = await fetch(`https://api.openweathermap.org/geo/1.0/direct?q=${INSERT_LOCATION_HERE}limit=1&appid=${process.env.API_KEY}`);

    const coordAPIResponse = await coordAPI.json();

    const coordAPIResults = {
      lat: coordAPIResponse[0].lat,
      lon: coordAPIResponse[0].lon
    }

    const weatherDataAPI = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${coordAPIResults.lat}&lon=${coordAPIResults.lon}&appid=${process.env.API_KEY}&units=metric`)

    weatherDataAPIResponse = await weatherDataAPI.json();

    res.send({
      success: true,
      results: weatherDataAPIResponse,
    });
  } catch (err) {
    return res.status(500).json({
      success: false,
      message: err.message,
    });
  }
});

// This spins up our sever and generates logs for us to use.
// Any console.log statements you use in node for debugging will show up in your
// terminal, not in the browser console!
app.listen(port, () => console.log(`Example app listening on port ${port}!`));

jquery sort table without plugin

Hello i’m using jquery to sort a table on click on the “th” tag, my code working well but only with numbers and words, but not with the date, is there anything wrong in the code :

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>b</td>
      <td>13/03/1998</td>
    </tr>
    <tr>
      <td>3</td>
      <td>a</td>
      <td>02/01/2005</td>
    </tr>
    <tr>
      <td>2</td>
      <td>c</td>
      <td>10/12/2022</td>
    </tr>
  </tbody>
</table>

and the js :

$(document).on('click', 'th', function() {
  var table = $(this).parents('table').eq(0);
  var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));
  this.asc = !this.asc;
  if (!this.asc) {
    rows = rows.reverse();
  }
  table.children('tbody').empty().html(rows);
});

function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index),
      valB = getCellValue(b, index);
    return $.isNumeric(valA) && $.isNumeric(valB) ?
      valA - valB : valA.localeCompare(valB);
  };
}

function getCellValue(row, index) {
  return $(row).children('td').eq(index).text();
}

thank you in advance

Why when I send data from firebase to google sheets it is only shown in the first row of the sheet?

I’m trying send some data from firebase to google sheets. I used the method push() to insert the data into a variable and call it in “resource {values: duplicitiesWithJudicialCharges}”.

I know that have more than one value, but in my google sheet it’s apearing just one line.

From what I’ve observed, the last value erases the previous one and sticks to the first line. I would like all the values in the rows to appear in sequence.

import * as functions from 'firebase-functions'
import { google } from 'googleapis'
import { initializeApp } from 'firebase-admin/app'
const serviceAccount = require('../sheets_updater_service_account.json')
const sheets = google.sheets('v4')
import { getFirestore } from "firebase-admin/firestore"
initializeApp()
const firestore = getFirestore()


module.exports.readAndUpdateAdministrativeSheet = functions.https.onRequest(async (request, response) => {

    // =========================== AUTENTICAÇÃO FIREBASE ===================================
    const jwtClient = new google.auth.JWT({
        email: serviceAccount.client_email,
        key: serviceAccount.private_key,
        scopes: ['https://www.googleapis.com/auth/spreadsheets']
    })

    await jwtClient.authorize()


    // ================= CONEXÃO COM A PLANILHA CRIAÇÃO DE FILTROS =========================
    const { data } = await sheets.spreadsheets.values.get({
        auth: jwtClient,
        spreadsheetId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        range: `Listagem de pagamento!A2:X6`,
    })

    // ========= CRIAÇÃO DE BANCO DE DADOS DA COLEÇÃO LISTAGEM DE PAGAMENTO ================
    const generateDuplicities = data.values!.map(async row => {
        const [idade, nome, cpf, cpf_x, numeroRequerimento, arbitramentoHonorários,
            valorArbitrado, valorDeferido, valorComplementar, status, resultado, codigoBanco,
            banco, agencia, conta, dataDoRequerimento, dataRequerimento, dataStatus,
            comarca, vara, ato, assistidos, email, telefone] = row
        firestore.collection("Listagem de pagamento").doc(numeroRequerimento).set({
            idade, nome, cpf, cpf_x, numeroRequerimento, arbitramentoHonorários,
            valorArbitrado, valorDeferido, valorComplementar, status, resultado, codigoBanco,
            banco, agencia, conta, dataDoRequerimento, dataRequerimento, dataStatus, comarca, vara, ato,
            assistidos, email, telefone
        })

        const resultduplicitiesWithJudicialCharges = firestore.collection("Processos judiciais").where("documentosDosautores", "==", cpf)
        const duplicitiesWithJudicialCharges = new Array()

        resultduplicitiesWithJudicialCharges.get().then((querySnapshot) => {
            querySnapshot.forEach((parentDoc) => {
                //functions.logger.log(parentDoc.id, " => ", parentDoc.data())
                parentDoc.ref.collection("fee-arbitrations - Base de Execução").where('arbitramentoDeHonoráriosBE', '==', arbitramentoHonorários).get().then((querySnapshot) => {
                    querySnapshot.forEach(async (childDoc) => {
                        //duplicitiesWithJudicialCharges.push(`${'arbitramentoHonorários'}: ${arbitramentoHonorários}`, `${'nome'}: ${nome}`, `${'processoBE'}: ${childDoc.data().processoBE}`)
                        await duplicitiesWithJudicialCharges.push(`${arbitramentoHonorários}`, `${nome}`, `${childDoc.data().processoBE}`)
                        functions.logger.log(duplicitiesWithJudicialCharges)
                        // let res = [duplicitiesWithJudicialCharges]
                        // functions.logger.log(res)
                        const updateOptions = {
                            auth: jwtClient,
                            spreadsheetId: '1j9-R6gRj46Lxs0Zlj9LDTv37Hv-hW339Nph6dRI2W9c',
                            //range: 'grpr!A12',
                            range: '3. Duplicidades judiciais!A2:H1000',
                            valueInputOption: 'USER_ENTERED',
                            resource: { values: [duplicitiesWithJudicialCharges] },
                        }
                        await google.sheets({ version: 'v4', auth: jwtClient }).spreadsheets.values.clear({
                            range: '3. Duplicidades judiciais!A2:H1000', // SEMPRE QUE FOR QUERER DELETAR, VERIFIQUE A AS LINHAS E COLUNAS QUE POSSUEM VALOR
                            spreadsheetId: '1j9-R6gRj46Lxs0Zlj9LDTv37Hv-hW339Nph6dRI2W9c',

                            // Request body metadata
                            requestBody: {
                                // request body parameters
                                // {}
                            },
                        });
                        await google.sheets({ version: 'v4', auth: jwtClient }).spreadsheets.values.update(updateOptions)
                    })
                })
            })

        })
    })
    await Promise.all(generateDuplicities)
})

Does anyone knows where is the problem?

Infinite loop rerender react

I have faced the problem of infinite rerender after checkColor is true
I setIsCorrect to true and let the child component call handleCorrectAnswer to setIsCorrect to false after resetting the Clock Why I got an infinite loop?

This is main component
on update function I receive data from firebase and when the data in firebase match the current color that I generated I want to reset clock

import { Typography } from '@mui/material';
import React, { useEffect, useState } from 'react';
import CountdownTimer from './CountdownTimer';
import ColorBox from './ColorBox';
import app from '../utils/firebase';
import { getDatabase, ref, onValue } from 'firebase/database';

function genColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    return { r, g, b };
}

function checkColor(color1, color2) {
    const { r: r1, g: g1, b: b1 } = color1;
    const { r: r2, g: g2, b: b2 } = color2;
    const diffR = Math.abs(r1 - r2);
    const diffG = Math.abs(g1 - g2);
    const diffB = Math.abs(b1 - b2);
    return diffR < 25 && diffG < 25 && diffB < 25;
}

export default function Game() {
    const [isCorrect, setIsCorrect] = useState(false);
    const [colorFromUser, setColorFromUser] = useState({ r: 0, g: 0, b: 0 });
    const [gameColor, setGameColor] = useState({ r: 300, g: 300, b: 300 });
    const [timestamp, setTimestamp] = useState(0);

    if (checkColor(colorFromUser, gameColor)) {
        setIsCorrect(true);
    }

    function handleCorrectAnswer() {
        setIsCorrect(false);
        console.log('correct');
        const newColor = genColor();
        setGameColor((prevState) => {
            return { ...prevState, ...newColor };
        });
    }

    function update() {
        var userId = 'XJI27hbv5eVmvEXTaCJTQnhZ33C2';
        const dbRef = ref(getDatabase(app));

        onValue(dbRef, function(snapshot) {
            const data = snapshot.val().UsersData[userId].readings;

            const dataColor = data.data.split(' ');
            console.log(dataColor);
            setColorFromUser((prevState) => ({
                ...prevState,
                r: Number(dataColor[0]),
                g: Number(dataColor[1]),
                b: Number(dataColor[2]),
            }));
            setTimestamp(data.timestamp);
        });
    }

    useEffect(() => {
        update();
        handleCorrectAnswer();
    }, []);

    return (
        <div className="main-container">
            <div className="main">
                <div className="current-color">
                    <ColorBox
                        color={`rgb(${gameColor.r}, ${gameColor.g}, ${gameColor.b})`}
                    />
                    <CountdownTimer
                        isCorrect={isCorrect}
                        handleCorrectAnswer={handleCorrectAnswer}
                        setIsCorrect={setIsCorrect}
                    />
                </div>
            </div>
        </div>
    );
}

This is clock component that I want to reset in onComplete method

export default function CountdownTimer(props) {
    const [key, setKey] = useState(0);
    return (
        <div className="timer">
            <CountdownCircleTimer
                key={key}
                onComplete={() => {
                    console.log('done');
                    return { shouldRepeat: true, delay: 2 };
                }}
                onUpdate={(remainingTime) => {
                    if (props.isCorrect) {
                        setKey((prevKey) => prevKey + 1);
                        console.log('update');
                        props.handleCorrectAnswer();
                    }
                    console.log(remainingTime);
                }}
                size={130}
                isPlaying
                duration={60}
                colors="#C18FEE"
            >
                {({ remainingTime, color }) => (
                    <Typography sx={{ color, fontSize: 40 }}>
                        {remainingTime}
                    </Typography>
                )}
            </CountdownCircleTimer>

        </div>
    );
}

Trying send upload image to image server on button click , then return url and store to the backend. How to do it sequentially

this is the image upload code the URL only returns after the form has been submitted to the backend. Trying send upload image to an image server on button click, then return URL and store to the backend. How to do it sequentially

    const handleImgUpload = async imgb => {
 
    try {
  const images = imgb;
  let promiseArray = [];
  let imgbb = images.toString('base64');
  const details = {image: `${imgbb}`};
  let formBody = [];
  for (const property in details) {
    const encodedKey = encodeURIComponent(property);
    const encodedValue = encodeURIComponent(details[property]);
    formBody.push(encodedKey + '=' + encodedValue);
  }
  formBody = formBody.join('&');
  promiseArray.push(
    fetch(
      'https://api.imgbb.com/1/upload?key=xxxxxxxxxxxx',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
        body: formBody,
      },
    ).then(r => r.json()),
  );

  Promise.all(promiseArray)
    .then(values => {
      if (values[0].success) {
        let thumb = '';
        values.map(imgs => {
          thumb = values[0].data.thumb.url;
          setImgUrl(imgs.data.url.replace(/["']/g, ''));
        });
        // setImageLoader(false);
        //YOU SEND imgURL
        // handleSubmitButton();
      } else {
        // setImageLoader(false);
        alert(
          'An error occurred while uploading image, please check your connection and try again',
        );
      }
    })
    .catch(err => {
      // setImageLoader(false);
      console.log('ERORRRRR', err);
      alert(err);
    });
} catch (e) {
  // setImageLoader(false);
  console.log('ERRRR', e);
}

};

this is the submit button code
I want to fetch the return URL first and then store it to a state then upload it to backend**

 const handleSubmitButton = async () => {


handleImgUpload(img); **handle upload function**

// Show Loader
setLoading(true);

UserApi.ElectionReport({

  imgUrl,
 
})
  .then(function (response) {
    // response handling
    setValue(response);
    console.log('res', response.data);

    if (response.data == 'successful') {
      // console.log('res', response.data)
      navigation.navigate('Home');

      alert('Sent Successfully');
      return;
    }
    setLoading(false);
    console.log('res', response.data);
  })
  .catch(function (error) {
    // error handling
    if (error.response) {
      alert(error.message);
      setLoading(false);
    }
  });

};

How can I create an “add to cart” type of code?

I guys! I’m new to coding and I want to create a type of ” add to cart” project. The thing is I don’t know how to incorporate the javascript in it. I have the css, html but the javascript is the hard part and I would like some help. I will leave here the html code and css code associated with it. I just want to press the button add to cart and it adds and summs up the value to a page. Thanks to anyone who could help. Really appreciate it![Add to cart display!

.IMC .area h1{
    margin-block-start: 0em;
    color: #ffffff;
}
.IMC .input_area h2{
    color: #000000;
}

.IMC .input_area{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
input{
    height: 1.5em;
}
textarea{
    width: 100%;
    margin-top: 2em;
}
.IMC .container{
    background-color: #1C1C1C;
    display: inline-flex;
    padding: 1.5em;
    border-radius: 0.5em;
    flex-direction: column;
    align-items: center;
    width: 20em;
}

.area{
    display: flex;
    justify-content: center;
}

button{
    height: 2em;
    width: 100%;
    background-color: #FF9500;
    border: none;
    color: #f8ff00;
}
button:hover{
    cursor: pointer;
}
<section class="products" id="products">

    <h1 class="heading"> latest <span>products</span> </h1>

    <div class="box-container">

        <div class="box">
            <span class="discount">-10%</span>
            <div class="image">
                <img src="ben-u-ron%20500.%203,49.jpg" alt="">
                <div class="icons">
                    <a href="#0" class="fas fa-heart"></a>
                    <a href="#0" class="cart-btn">add to cart</a>
                    <a href="#0" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Ben-u-Ron 500mg</h3>
                <div class="price"> 3.49€ <span>3.84€</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-15%</span>
            <div class="image">
                <img src="berocca-performance-30-comprimidos-10.04.jpg" alt="">
                <div class="icons">
                    <a href="#0" class="fas fa-heart"></a>
                    <a href="#0" class="cart-btn">add to cart</a>
                    <a href="#0" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Berocca Performance 30 comp.</h3>
                <div class="price"> 10.04€<span>11.55€</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-5%</span>
            <div class="image">
                <img src="parazitol%2039,00.png" alt="">
                <div class="icons">
                    <a href="#0" class="fas fa-heart"></a>
                    <a href="#0" class="cart-btn">add to cart</a>
                    <a href="#0" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Parazitol</h3>
                <div class="price"> 39.00€ <span>40.56€</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-20%</span>
            <div class="image">
                <img src="mebocaina-20%20capsulas,%209-75.png" alt="">
                <div class="icons">
                    <a href="#0" class="fas fa-heart"></a>
                    <a href="#0" class="cart-btn">add to cart</a>
                    <a href="#0" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Mebocaina  20 cap.</h3>
                <div class="price"> 9.75€ <span>11.70€</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-17%</span>
            <div class="image">
                <img src="WOMAN%20ISDIN%20ANTI-ESTRIAS%202X%20250ML%20PROMO-30,13.jpg" alt="">
                <div class="icons">
                    <a href="#0" class="fas fa-heart"></a>
                    <a href="#0" class="cart-btn">add to cart</a>
                    <a href="#0" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Woman Anti Stretch Marks</h3>
                <div class="price"> 30.13€ <span>35.25€</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-3%</span>
            <div class="image">
                <img src="Infla%20vet%2026,99.png" alt="">
                <div class="icons">
                    <a href="#0" class="fas fa-heart"></a>
                    <a href="#0" class="cart-btn">add to cart</a>
                    <a href="#0" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Infla Vet</h3>
                <div class="price"> 26.99€ <span>27.80€</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-18%</span>
            <div class="image">
                <img src="OnyCostopProSpray%2036.90.png" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="cart-btn">add to cart</a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Costop Pro Spray</h3>
                <div class="price"> 26.90€ <span>31.74€</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-10%</span>
            <div class="image">
                <img src="brufen%20400mg%206,41.jpg" alt="">
                <div class="icons">
                    <a href="#0" class="fas fa-heart"></a>
                    <a href="#0" class="cart-btn">add to cart</a>
                    <a href="#0" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Brufen 400mg</h3>
                <div class="price"> 5.76€ <span>6.41€</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-5%</span>
            <div class="image">
                <img src="NATALBEN%20SUPRA%2030%20CÁPSULAS-15,42.jpg" alt="">
                <div class="icons">
                    <a href="#0" class="fas fa-heart"></a>
                    <a href="#0" class="cart-btn">add to cart</a>
                    <a href="#0" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Natalben 20 cap.</h3>
                <div class="price"> 15.42€ <span>16.20€</span> </div>
            </div>
        </div>

    </div>

</section>

//Page where I want the info to display! (Note that there are random pictures displaying there with no javascript code attached!

<div class="shopping-cart">
        <div class="box">
            <i class="fas fa-trash"></i>
            <img src="image/cart-img-1.png.jpg" alt="">
            <div class="content">
                <h3>ben-u-ron 500</h3>
                <span class="price">2.40€/-</span>
                <span class="quantity">qty : 1</span>
            </div>
        </div>
        <div class="box">
            <i class="fas fa-trash"></i>
            <img src="image/cart-img-2.png.jpg" alt="">
            <div class="content">
                <h3>brufen</h3>
                <span class="price">6.50€/-</span>
                <span class="quantity">qty : 1</span>
            </div>
        </div>
        <div class="box">
            <i class="fas fa-trash"></i>
            <img src="image/cart-img-3.png.jpg" alt="">
            <div class="content">
                <h3>mebocaina forte</h3>
                <span class="price">7.90€/-</span>
                <span class="quantity">qty : 1</span>
            </div>
        </div>
        <div class="total"> total : 16.80€/- </div>

    </div>

]1

d3-table is not a function

I want to create a table in D3, no csv at the moment.
I found this package called d3-table which can help me in the job. The problem is that then when I create the table I have the following error “TypeError: d3.table is not a function”.

Here below is the code that I have wrote

<script src="https://d3js.org/d3.v4.js"></script>
<script src='d3-selection.v1.min.js'></script>
<script src='d3-table.min.js'></script>

let table = d3.table(); // I use d3.table as suggested on the page of the package

table.data([
    { id: 0, name: 'Freddie', feature_one: 0.1 },
    { id: 1, name: 'Daphne', feature_one: 0.2 },
    { id: 3, name: 'Nathan', feature_one: 3}
]).columns([
    function (person) { return person.name; },
    function (person) { return person.feature_one; }
]);

table('#someTable');

What I am missing or I am doing wrong?

Error invoking remote method ‘GUEST_VIEW_MANAGER_CALL’: Error: ERR_ABORTED (-3) loading ‘https://www.google.com/’ in WebView in Electron

I am using webview in my electron 18.2.3 application for opening websites in application itself.

Everything works fine but sometime clicking a link in website in webview I am getting error

Error invoking remote method 'GUEST_VIEW_MANAGER_CALL': Error: ERR_ABORTED (-3) loading 'https://www.google.com/'

Call Stack
 undefined
  com/':undefined:undefined

This is my application

import React from 'react';
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import icon from '../../assets/icon.svg';
import './App.css';

type Props = {

}

type State = {
  url: any,
  key: string
}
class Hello extends React.Component<Props, State> {
  webview: any;
  constructor(props) {
    super(props);
    this.state = {
      url: {
        blank: 'about:blank',
        youtube: 'https://www.youtube.com/',
        google: 'https://www.google.com/',
        wikipedia: 'https://en.wikipedia.org/wiki/Main_Page',
        w3schools: 'https://www.w3schools.com/'
      },
      key: 'blank'
    };
    this.webview = React.createRef()
  }

  componentDidMount() {
    let webview = this.webview.current
    webview.addEventListener('did-start-navigation', (event: any) => {
      console.log('event:', event)
      let newUrl = event.url
      if (newUrl != 'about:blank' && event.isInPlace && event.isMainFrame) {
        let url = { ...this.state.url }
        url[this.state.key] = newUrl
        this.setState({ ...this.state, url })
      }
    })
  }

  selectUrl(key: string) {
    this.setState({ ...this.state, key: key })
  }

  handleBack = () => {
    this.webview.current.goBack()
  }

  handleForward = () => {
    this.webview.current.goForward()
  }

  render() {
    return (
      <>
        <span onClick={this.handleBack.bind(this)}>Back</span>
        <span style={{margin: '1rem'}}></span>
        <span >Forward</span>
        <div style={{ width: '640px', height: '360px', border: 'solid' }}>
          <webview
            ref={this.webview}
            src={ this.state.url[this.state.key]}
            id="myWebview"
            style={{ display: 'inline-flex', width: '640px', height: '360px' }}
            allowpopups="true"
          />
        </div>
        <div style={{ border: 'solid' }}>
          <span onClick={() => this.selectUrl('youtube')} style={{ border: 'solid' }}>YouTube</span>
          <span onClick={() => this.selectUrl('google')} style={{ border: 'solid' }}>Google</span>
          <span onClick={() => this.selectUrl('wikipedia')} style={{ border: 'solid' }}>wikipedia</span>
          <span onClick={() => this.selectUrl('w3schools')} style={{ border: 'solid' }}>w3schools</span>
        </div>
      </>
    );
  }
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Hello />} />
      </Routes>
    </Router>
  );
}

What can be the reason of getting this error and how can I fix this?

Manifest.json : What is wrong with this file?

{
  "name": "Play Next : YouTube",
  "version": "0.1.1",
  "manifest_version": 3,
  "description": "Add videos to queue",
  "homepage_url": "https://www.youtube.com",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "cookies",
    "tabs",
    "storage",
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/*"],
      "css": ["src/inject/inject.css"],
      "js": ["src/inject/inject.js"]
    }
 ],
  "web_accessible_resources": [
    {
      "resources": ["src/inject/main.js"]
    }
  ]
}

Error : Invalid value for ‘web_accessible_resources[0]’. Entry must at least have resources, and one other valid key.

Question : Can someone provide a nice tutorial for Manifest V3, with examples?

How to change url param id using primeng dropdown in angular

I am very new to primeng and Angular, Can you help me in this please:

How to change my param in URL (ex. shop1 in URL) http://localhost:4200/#/shops/shop1/dashboard using Primeng drop-down in Angular:

 <p-dropdown [options]="clientShops" [(ngModel)]="selectedShop" optionLabel="name"></p-dropdown>

where shop1 is by default param and want to change it by shop2 both values are present in the Primeng drop-down.

Just want to make a code that changes a param in URL on selecting the drop-down option.

Shopify We Are Unable To Authenticate You

`
Unable to access store after attempting to download a marketing application. Message appears:

We were unable to authenticate you

Looks like something went wrong on our end. Operation engineers are aware of this problem and are working hard to get it solved. In the meantime, you can keep an eye on the status page for updates.

[LOG IN]

Request ID:
XXYYZZ
`