I’ve been trying to integrate PayPal buttons on my Django website, but I keep having this problem where the PayPal popup window appears as about:blank#blocked. I can see this error in console:

popup_open_error_iframe_fallback 
{err: 'n: Can not open popup window - blockedn    at Ie (…owser=false&allowBillingPayments=true:1342:297830', timestamp: '1644780862712', referer: 'www.sandbox.paypal.com', sdkCorrelationID: 'f12370135a997', sessionID: 'uid_d36969c1b2_mtk6mja6mzy', …}

What I don’t understand is that the problem isn’t there if I just open the HTML file itself in a browser… The script looks like this:

<!-- Set up a container element for the button -->
<div id="paypal-button-container" class='text-center mt-2'></div>

<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=blahblahmyid&currency=EUR"></script>

<script>
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({
        locale: 'it_IT',
        style: {
            color: 'gold',
            shape: 'rect',
            layout: 'vertical',
            label: 'pay'
        },

        // Set up the transaction
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '88.44'
                    }
                }]
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(orderData) {
                // Successful capture! For demo purposes:
                console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                var transaction = orderData.purchase_units[0].payments.captures[0];
                alert('Transaction '+ transaction.status + ': ' + transaction.id + 'nnSee console for all available details');

                // Replace the above to show a success message within this page, e.g.
                // const element = document.getElementById('paypal-button-container');
                // element.innerHTML = '';
                // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                // Or go to another URL:  actions.redirect('thank_you.html');
            });
        }


    }).render('#paypal-button-container');
</script>

What’s the problem ? I don’t understand.

The activity was to Log Array.prototype and Object.prototype to the console using only the arr variable and the proto property.

So these are the original code:

const arr = [1, 2, 3];

console.log(); // log the Array.prototype
console.log(); // log the Object.prototype

So What I did: I wrote on the first, console.log(arr.__proto__ === Array.prototype);
the second one is, console.log(arr.__proto__ === Object.prototype); but still not right.
It says that in the first log, the Array.prototype is the proto property of any array. the next one, the prototype property of Array.prototype refers to the object.prototype. I can’t figure it out what does it meant. I tried also writing like this: console.log(arr.__proto__ === Object.prototype); still not right. What am I missing here?

I´m quite unsure on how to handle multiple updates / inserts in knex and return whatever it was successfull on the end or not.

I´m passing an array through req.body loop through it and trigger actions based on informations inside the array.

Example:

const data = [...req.body]
for(let i = 0; i < data.length; i++) {
        data[i].totals.length
        for(let y = 0; y < data[i].totals.length; y++) {
            if(data[i].totals[y].info === "Holiday") {
                calcHoliday(data[i].totals[y].total, data[i].id)
            } else if(data[i].totals[y].info === "ZA") {
                calcZA(data[i].totals[y].total, data[i].id)
            }
        }
        calcOvertime(data[i].totalSum, data[i].id)

        if(i === data.length -1) {
            res.json("Success")
        }
    }

The Array I´m passing in looks like this:

[
    {
    "id": 1,
    "totals": [
        {
            "info": "Holiday",
            "total": 4
        }
    ]
    },
    {
    "id": 1,
    "totals": [
        {
            "info": "Holiday",
            "total": 4
        }
    ]
    }
]

Function Example which gets called in for loop:

const calcHoliday = (hours, userid) => {
        knex.transaction(trx => {
            trx.insert({
                created_at: convertedTime,
                info: "Booking Holiday - Hours: " + hours,
                statuscode: 200
            }).into("logs")
                .then(() => {
                    return trx("hours")
                        .decrement("holiday_hours", hours)
                }).then(trx.commit)
                .catch(trx.rollback)
        }).then(() => console.log("WORKED"))
            .catch(err => console.log(err))
}

This is working perfectly fine but I can´t figure out how to gather the results from each table update in order to respond if everything worked or an error appeared. If I call e.g. after one calcHoliday call .then(resp => res.json(resp) I receive only the response from the first operation.

In short I need a way on how to res.json if everything succeeded or an error appeared somewhere.

Thanks in advance!

This is what I’m trying to make:

Closer I got was bridge text like this example, but it uses a Top baseline for the bridge and I’m not sure how to addapt it to my needs:

Bridge Text Effect in HTML5 Canvas

Fiddle:

https://jsfiddle.net/0btz7a1g/

Is there any way to arc text while keeping each letter vertical like in the images?

Thank you! 🙂

I have a completed script that acts as a parser. The script is written in NodeJS and it works properly. The script returns an array of data and also saves it to my computer.
I would like to run this script from the frontend, at the click of a button. As far as I understand, I have to send a request to the server? It’s suggested to use Express for the server, but I still haven’t figured out how to call a third-party script from it, much less return any data from it.
Right now all I want is for my script to run when I make a request for the root directory “/” and send me a json in response (or for example a json file)

const express = require('express')
const runParser = require("./parser");
const app = express()
const port = 3000

const  doParse=async(req,res,next)=>{
   await runParser()
}

app.get('/', async (req, res,next) => {
  await doParse(req,res)
    next()
})

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

I have the following code and am looking to add a circle element for each data point, however, am getting the error:

Error: attribute cx: Expected length, “NaN”.

Any help is greatly appreciated!

  var w = 960;
  var h = 500;
  var margin = { top: 75, right: 75, bottom: 75, left: 75 };
  var width = w - margin.left - margin.right,
      height = h - margin.top - margin.bottom;

// append svg element to the body of the page
// set dimensions and position of the svg element
  var svg = d3.select("body").append("svg")
      .attr("id", "line_chart")
      .attr("width", w)
      .attr("height", h);
  var container = svg.append("g")
      .attr("id", "container")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.dsv(",", pathToCsv, function (d) {
      if (+d.year >= 2015 && +d.year <= 2019) {
          return {
              name: d.name,
              year: +d.year,
              rating: Math.floor(+d["average_rating"]),
              users: +d["users_rated"]
          }
      }
  }).then(function (data) {
      console.log(data);
  
  // Define x axis scale for line chart
      var xScale = d3.scaleLinear()
          .domain([0, d3.max(data, function (d) { return d.rating; })])
          .range([0, width]);
      var xAxis = d3.axisBottom(xScale)
            .ticks(10);

      var yScale = d3.scaleLinear()
          .domain([0, d3.max(filtered_data[2], function (d) { return d.count; })])
          range([height, 0]);
      var yAxis = d3.axisLeft(yScale);
      y_axis.call(yAxis);

      // d3's line generator
      var line = d3.line()
          .x(function (d) { return xScale(d.rating); })
          .y(function (d) { return yScale(d.count); })

      // colors list
      var colors = ["#1f77b4", "#ff7f0e", "#17becf", "#bcbd22", "#bcbd22"];

      // Add each line to line chart
      lines.selectAll("line-paths")
          .data(filtered_data)
          .enter()
          .append("path")
          .attr("d", function (d) { return line(d); })
          .style("fill", "none")
          .style("stroke", function (d, i) { return colors[i]; });

      circles.selectAll("line-circles")
              .data(filtered_data)
              .enter()
              .append("circle")
              .attr("cx", function (d) { return xScale(d.rating); })
              .attr("cy", function (d) { return yScale(d.count); })
              .attr("r", 3);

For reference, my data is formatted as follows:

Data Setup

so essentially its a nested array with 5 lines and need to append 50 total elements.

I’m trying to change my icons to flex but that didn’t work. This was my original CSS code:

.recipe-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 1rem;
  margin: 2rem 0;
  text-align: center;
}

I also tried setting display to flex, justify-content to center and all that but that didn’t work either. How can I fix this? This is my html code for my icons:

div class="recipe-icons">
            <article>
              <!-- single recipe icon -->
              <i class="fas fa-clock"></i>
              <h5>prep time</h5>
              <p>30 min.</p>
              <!-- single recipe icon -->
              <i class="far fa-clock"></i>
              <h5>cook time</h5>
              <p>15 min.</p>
              <!-- single recipe icon -->
              <i class="fas fa-user-friends"></i>
              <h5>servings</h5>
              <p>6 servings</p>
              <!-- recipe tags -->
              <div class="recipe-tags">
                Tags: <a href="tag-template.html">beef</a>
                <a href="tag-template.html">breakfast</a>
                <a href="tag-template.html">pancakes</a>
                <a href="tag-template.html">food</a>
              </div>
            </article>
</div>

I am using a Cordova app to embed a React app. In a certain point, the user connects to the camera and a notification appears when a QR code is detected. I want that the code execution waits until user has entered his/her answer “Yes/No”, but I can’t get it to work. Notification prompt message works as expected though.

I need it to pause somehow, as in an async function (like prompt would, for instance). How could I pause the code execution until the user has chosen Yes/No in screen? I guess with some async/await but don’t see where… I have tried unsuccessfully so far:

let test = null;
let input2 = null;
notification = navigator.notification.prompt("Do you know this QR code?",
     async function(input) {
     input2 = input;
     test = await NotificationFunction(input, Camera_content);
     console.log(test)
     console.log('input2')
     return [test, input2]
     });

let test2= await notification
console.log(test2)
console.log(notification)
console.log(await test)

Thanks a lot in advance!

Everyone!
I’m currently working on the project where I should merge some pdf files into one using Laravel.
I receive response from Airtable response.
The main thing is that after merging pdf files I’m gonna set a name of merged pdf file.
For example, I have to merge these files:

0:"D:DevelopmentsAirtablePDFCombinerairtable-pdf-combinerstorageapp/pdf_filesSalvageQuoteSummaryreportChristenPretrick.pdf"
1:"D:DevelopmentsAirtablePDFCombinerairtable-pdf-combinerstorageapp/pdf_filesSummaryReportChristenPretrick.pdf"
2:"D:DevelopmentsAirtablePDFCombinerairtable-pdf-combinerstorageapp/pdf_filesEstimateChristenPretrick.pdf"
3:"D:DevelopmentsAirtablePDFCombinerairtable-pdf-combinerstorageapp/pdf_filesPhotoSheetChristenPretrick.pdf"
4:"D:DevelopmentsAirtablePDFCombinerairtable-pdf-combinerstorageapp/pdf_filesComp26700.00.pdf"
5:"D:DevelopmentsAirtablePDFCombinerairtable-pdf-combinerstorageapp/pdf_filesComp26888.00.pdf"
6:"D:DevelopmentsAirtablePDFCombinerairtable-pdf-combinerstorageapp/pdf_filesComp27991.00.pdf"
7:"D:DevelopmentsAirtablePDFCombinerairtable-pdf-combinerstorageapp/pdf_filesNADA.pdf"

As you see, in first three files there is a name of person: “ChristenPretrick”, which should be a name of the merged pdf file.

But how to get only this name in this array using the Laravel Controller.
Please leave me feedback, will be extremely appreciated to your answer.
Best Regards.

what is the best book for learn react js ?

hello guy’s i am going to learn react js.
so that’s why i need a book to learn react.
now can u guy’s suggest me a good book to learn react???

I am using selectareas.js to select some parts of the image with mouse event and getting coordinates x,y,z of the image, as I am selecting multiple areas of the image, all the values are printing/console in my browser correctly.

• Now I am trying to Show all those selected coordinates of image areas as a new image in a different canvas/div on a button click event.

• So technically when I am selecting 2,3 or 4 areas all coordinates values prints like this in an array

   0: {id: 0, x: 10, y: 20, z: 0, height: 100,width: 60}
   1: {id: 1, x: 159.5, y: 286, z: 0, height: 73,width: 220}
   2: {id: 2, x: 464.5, y: 300, z: 100, height: 117,width: 221} 
  

• Now I am trying to figure out how to show these coordinates as a different new image on my
  page or downloads all as a new image by converting into base64.

HTML-

<div class="image-decorator">
  <img alt="Image principale" id="example" src="example.jpg" />
</div>
  <table>
    <tr>
     <td class="actions">
      <input type="button" id="btnView" value="Display areas" class="actionOn" />
     <td>
    <div id="output" class='output'> </div>
   </td>
  </tr>
 </table>

</div> 

JQUERY:

      $(document).ready(function () {
            $('img#example').selectAreas({
                minSize: [10, 10],
                onChanged: debugQtyAreas,
                width: 1000
            });
            $('#btnView').click(function () {
                var areas = $('img#example').selectAreas('areas');
                displayAreas(areas);
            });
    }); 

Was following a tutorial and my localhost is completely blank after importing {Link} from react-router-dom. Followed word for word but my local host is blank as soon as I added link in navbar.js. Please help.

import React from 'react';
import {Link} from 'react-router-dom';

function Navbar() {
    return(
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
            
                <Link to="/" class="navbar-brand">SkyCloud</Link>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-togglser-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <Link to="/" class="nav-link active">Home</Link>
                    </li>

                    <li class="nav-item">
                    <Link to="/about" class="nav-link active">About</Link>
                    </li>

                    <li class="nav-item">
                    <Link to="/contact" class="nav-link active">Contact</Link>
                    </li>

                    </ul>
                    
                </div>
                </div>
      </nav>  

    );




}

export default Navbar;

And this is my App.js file…

import React from 'react';
import Navbar from './components/inc/Navbar';
import Home from './components/pages/Home';
import About from './components/pages/About';
import Contact from './components/pages/Contact';
import {BrowserRouter as Router} from 'react-router-dom'; 

function App() {
  return (
    
    <Router>
    <div>
     <Navbar/>
    <Home/>
   <About/>
   <Contact/>

  
    </div>
    </Router>
    
   
  );
}

export default App;

Please help(this is my first question btw).

I am trying to generate a input value based on 2 earlier input values the user filled in. First is a name, the second one is a date. Now I need to concat and format these 2 values and set them for another input.

This is what I already come up with:

1. Event listener for first input: Name
2. Format the Name value
3. Event listener for second input: Date
4. Format the Date value
5. Concat these 2 values
6. Set the concat value in third input

The code I have so far:

    window.onload = function () {
        
        /* event listener for first input: Name */
        document.getElementById('input_7_1').addEventListener('change', formatTitle);
        
        /* function to format the name value properly */
        function formatTitle(){
            document.getElementById('input_7_1').addEventListener("input", function(){
              var title = document.getElementById('input_7_1').value;
              var formatTitle = title.replace(/s+/g, '');
            });
        }
        
        /* event listener for second input: Date */
        document.getElementById('input_7_3').addEventListener('change', formatDate);
        
        /* function to format the date value properly */
        function formatDate(){
            document.getElementById('input_7_3').addEventListener("input", function(){
              var date = document.getElementById('input_7_3').value.replace(///g, '');
              var formatDate = date.slice(0, -4);
            });
        }
        
        /* concat both values in a variable */
        var studentNummer = formatTitle.concat(formatDate);

        /* set value in the third input: Studentnummer */
        function generateInput(){
            document.getElementById('input_7_9').value = studentNummer;
        }
    }

I am almost there for my feeling. What am I missing here?

I’m looking how to trigger onChange function when an option is already selected and clicked by the user to deselect it, it’s like multiselect.
you can select an option and deselect it by clicking on it a second time.
this is what i’ve already tried.
everything is working when there is more than 1 option selected, but not when there is only one option selected.

const handleChangeGroup = (selectedItems) => {
    const groups = [];
    for (let i = 0; i < selectedItems.length; i++) {
      if (groupArray.includes(selectedItems[i].value)) {
        if (groupArray.length === 0) {
          setGroupArray([]);
        } else {
          var newArray = groupArray.filter(
            (value) => value != selectedItems[i].value
          );
          setGroupArray(newArray);
        }
      } else {
        groups.push(selectedItems[i].value);
        setGroupArray(groupArray.concat(groups));
      }
    }
  };


<select
            multiple={true}
            value={groupArray}
            onChange={(event) =>
              handleChangeGroup(event.target.selectedOptions)
            }>
            {data[selectType] !== undefined
              ? Object.keys(data[selectType]).map((group, index) => (
                  <option value={group} key={group}>
                    {group}
                  </option>
                ))
              : null}
          </select>

Uncaught TypeError: $(…).slicknav is not a function

I’ve downloaded free html template and it works correctly when i open it without Laravel, but when i compile CSS and JS with Laravel Mix one of the JS libraries stops working. The error looks like i didn’t plug it in html, but everything is ok and other libraries work correctly. I also tried npm install slicknav and include it in webpack.mix.js‘s autoload, rebuild after that but nothing changes.

bottom of index.blade.php:

<script src="{{mix('js/jquery-3.3.1.min.js')}}"></script>
<script src="{{mix('js/bootstrap.min.js')}}"></script>
<script src="{{mix('js/jquery.nice-select.min.js')}}"></script>
<script src="{{mix('js/jquery-ui.min.js')}}"></script>
<script src="{{mix('js/jquery.slicknav.js')}}"></script>
<script src="{{mix('js/mixitup.min.js')}}"></script>
<script src="{{mix('js/owl.carousel.min.js')}}"></script>
<script src="{{mix('js/main.js')}}"></script>

webpack.mix.js:

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/jquery-3.3.1.min.js', 'public/js')
    .js('resources/js/bootstrap.min.js', 'public/js')
    .js('resources/js/jquery.nice-select.min.js', 'public/js')
    .js('resources/js/jquery-ui.min.js', 'public/js')
    .js('resources/js/jquery.slicknav.js', 'public/js')
    .js('resources/js/mixitup.min.js', 'public/js')
    .js('resources/js/owl.carousel.min.js', 'public/js')
    .js('resources/js/main.js', 'public/js')

    .css('resources/css/bootstrap.min.css', 'public/css')
    .css('resources/css/font-awesome.min.css', 'public/css')
    .css('resources/css/elegant-icons.css', 'public/css')
    .css('resources/css/nice-select.css', 'public/css')
    .css('resources/css/jquery-ui.min.css', 'public/css')
    .css('resources/css/owl.carousel.min.css', 'public/css')
    .css('resources/css/slicknav.min.css', 'public/css')
    .css('resources/css/style.css', 'public/css')
    .postCss('resources/css/app.css', 'public/css')

    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery'],
        mixitup: ['mixitup']
    })
    .sourceMaps()

The error in chrome console:
https://i.stack.imgur.com/WnHCI.png