I have select element like this:

<select id='mySelect'>
    <option value=0>Monday</option>
    <option value=1>Tuesday</option>
</select>

Whenever I use protractor's isDisplayed() property to check visibility of option element it always returns true.

element.all(by.css('#mySelect option')).first().isDisplayed(); // always return true

I'm getting this behavior regardless of clicking on the select element. Ideally it should only return true if I click on <select> element first then check the visibility. Any solution ?

I am querying an AWS database of users with a search input, fetch and react hooks. In order to get it working, I had to set up a separate express server and make the fetch request to this, as there are CORS issues with AWS with little way to get around it.

My fetch request...

    const getUsers = async (query) => {
        const results = await fetch(`http://localhost:3005/search?`)      
        const userData = await results.json()
        console.log("this is the results", results, "this is the data", userData);

        return userData.results
    }

If I hard code the query on the express server like so...

const express = require('express'); 
const request = require('request'); 
const app = express();

app.get('/search', function(req, res, query){ 
    request(`https://search-*****-*****.eu-west-1.cloudsearch.amazonaws.com/2013-01-01/search?q=bob`, function (error, response, body) { 
      if (!error && response.statusCode === 200) { 
        console.log(body); 
        res.send(body); 
      } 
     }); 
  });

  app.listen(3005); 
console.log('Server running on port %d', 3005);

It works, console output is...

status: {rid: "****", time-ms: 1}
hits:
found: 1
start: 0
hit: [{…}]
__proto__: Object
__proto__: Object

With hits being an array of the user for Bob, however when I pass in a query string to my fetch request, it doesn't return any results

    const getUsers = async (query) => {
        const results = await fetch(`http://localhost:3005/search?q=${query}`)      
        const userData = await results.json()
        console.log("this is the results", results, "this is the data", userData);

        return userData.results
    }

const express = require('express'); 
const request = require('request'); 
const app = express();

app.get('/search', function(req, res, query){ 
    request(`https://search-*****-*****.eu-west-1.cloudsearch.amazonaws.com/2013-01-01/search`, function (error, response, body) { 
      if (!error && response.statusCode === 200) { 
        console.log(body); 
        res.send(body); 
      } 
     }); 
  });

  app.listen(3005); 
console.log('Server running on port %d', 3005);

It doesn't return any hits...

status: {rid: "****", time-ms: 1}
hits:
found: 0
start: 0
hit: [{…}]
__proto__: Object
__proto__: Object

I'm sure the best way to query is to have it in my fetch request but I'm not sure why it's not working. If anyone can shed any light I'd be grateful.

I have a box in Planck.js. I want to move this box with some keys. How can I do that? My code:

planck.testbed("boxworld", function(testbed) {
  var pl = planck,
    Vec2 = pl.Vec2;
  var world = new pl.World(Vec2(0, 0));

  //Box

  var box = world
    .createDynamicBody(Vec2(0.0, 10.0))
    .createFixture(pl.Box(0.5, 0.5), 20.0);
  box.render = { fill: "#FA8072", stroke: "black" };

  return world;
});

I am working with react-google-chart and what I want to do is to make a dual-y axis ColumnChart I have doe it with plain Javascript

google.charts.load('current', {'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {

  var chartDiv = document.getElementById('chart_div');

  var data = google.visualization.arrayToDataTable([
    ['Month', 'CTC', 'Gross Salary', 'Variation of CTC', 'Total No of Employes'],
    ['Jan', 35000, 27000, 10000, 3000],
    ['feb', 30000, 24000, 8000, 4000],
    ['Mar', 50000, 37000, 7000, 2000],
    ['May', 20000, 17000, 5000, 4123],
    ['June', 20000, 17000, 5000, 4000],
    ['July', 20000, 17000, 5000, 4000],
    ['August', 20000, 17000, 5000, 4000],
    ['Sep', 20000, 17000, 5000, 4000],
    ['Oct', 20000, 17000, 5000, 4000],
    ['Nov', 20000, 17000, 5000, 4000],
    ['Dec', 20000, 17000, 5000, 4000]
  ]);

  var materialOptions = {
    width: 900,
    chart: {
      title: 'Nearby galaxies',
    },
    series: {

      0: {
        axis: 'test'
      } // Bind series 1 to an axis named 'brightness'.
    },

  };



  function drawMaterialChart() {
    var materialChart = new google.charts.Bar(chartDiv);
    materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));


  }


  drawMaterialChart();
};

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><div id="chart_div" style="width: 800px; height: 500px;"></div>

My problem is with react I want to do it with react but don't know how to implement the materialChart.draw

This is react code I want to convert it like the above

I have a div with id="text" that I am adding text to:

var el = document.getElementById('text');
var p1 = document.createElement('p');
p1.appendChild(document.createTextNode('text to be inputted.'));
el.insertBefore(p1, el.childNodes[0] || null);

<div id="text"></div>

After inputting multiple lines of text, I want the older text at the bottom of the div to disappear.

Can I do this using a max number in the el.childNodes[] array? Or will I have to use collision detection as the text reaches the bottom of the div? Thanks!!!

I am working on react google-chart react-google-chart and it is working fine. What I want to do is to add click event to the labels of horizontal axis and get the label name and do what ever I want to do

I have google a lot but haven't found a correct solution

What I have done is this

import React, { Component } from 'react'
import { Chart } from "react-google-charts";
export default class manpowerGraph extends Component {
    render() {
     const data=[
        ['Year', 'Sales'],
        ['jan', 20],
        ['feb', 100],
        ['march', 55],
        ['april', 120],
        ['may', 200],
        ['june', 220],


      ]
     const options={
        // Material design options
        chart: {
          title: 'Manpower',
        },
      }
        return (
            <div className="manpowerChart">
<Chart
  chartType="Bar"
  width="100%"
  height="400px"
  data={data}
  options={options}
  legendToggle
  chartEvents={[
    {
      eventName: "ready",
      callback: ({ chartWrapper, google }) => {
        const chart = chartWrapper.getChart();
        google.visualization.events.addListener(chart, "onmouseover", e => {
          const { row, column } = e;
          console.warn("MOUSE OVER ", { row, column });
        });
        google.visualization.events.addListener(chart, "onmouseout", e => {
          const { row, column } = e;
          console.warn("MOUSE OUT ", { row, column });
        });
      }
    }
  ]}
/>

            </div>
        )
}
}

Working code Working code I want when user click on month label it should fire any event or console

I have found this with Javascriptwith Javascript

Hi I'm trying to remove duplicates from array of objects. But that is not working as expected.

This is my array:

const arr = [{
  PData: [{
      id: '1',
      name: 'Book'
    },
    {
      id: '2',
      name: 'Bag'
    },
    {
      id: '2',
      name: 'Bag'
    },
  ]
}]

const RemoveDuplicates = (array, key) => {
  return array.reduce((arr, item) => {
    const removed = arr.filter(i => i[key] !== item[key]);
    return [...removed, item];
  }, []);
};
var result = RemoveDuplicates(arr, 'id')
console.log(result);

Expected output:

[{
  PData: [{
      id: '1',
      name: 'Book'
    },
    {
      id: '2',
      name: 'Bag'
    },
  ]
}]

Based on id it supposed to remove duplicates but this is not happening currently..I know that couple of questions are existed regarding this but nothing is working for me. So anyone plz suggest me how to do.

Is there any way to hide the main div in a Vue app that is builded by Vue-CLI? I have tried appending display property but it didn't resolve the issue. I am trying to hide it inside the Channels component of mine. My main component looks like this :

<template>
  <div id="app">
    <Channels/>
  </div>
</template>

<script>
import Channels from './components/Channels'

export default {
  name: 'App',
  components: {
    Channels
  }
}
</script>

I'm trying to create an object with an array of multiple objects inside it, each inner-object representing a card.

I initialise all three outside of a forEach() loop, push each item into the array and then assign that array to a key in my outer-object:

const cart = {};
const cartItems = [];
const cartItem = {}

cart['cart-items'] = cartItems;

cartItems.push(cartItem); 

Inside the forEach() I take the card data, every time that cards button is clicked, and assign it to the inner-object:

///forEach() with 'click' event-handler for the buttons...

if (cartItem.id !== currentCardId) {
  cartItem['id'] = currentCardId;
  cartItem['name'] = currentCardName;
  cartItem['price'] = this.dataset.cardPrice;
  cartItem['quantity'] = 1;
} else {
  cartItem.quantity = cartItem.quantity + 1;
}

///...end of forEach()

This increments the 'quantity' of the 'card' if I click the same button multiple times, but when I click on a separate button it overwrites the existing card and it's 'quantity' value.

I understand if I initialise cartItem and cartItems inside the loop it prevents this overwriting, but then the cards 'quantity' doesn't increment, it just creates a separate object with a 'quantity' of '1'.

Any idea how I can work around this?

I got a JavaScript object which I would like to get x-www-form-urlencoded.

Something like $('#myform').serialize() but for objects.

The following object:

{
    firstName: "Jonas",
    lastName: "Gauffin"
}

would get encoded to:

firstName=Jonas&lastName=Gauffin (do note that special characters should get encoded properly)

I'm runnig command :

npm install udev

And I'm getting this error:

npm WARN enoent ENOENT: no such file or directory, open '/home/mitesh/package.json'
npm WARN mitesh No description
npm WARN mitesh No repository field.
npm WARN mitesh No README data
npm WARN mitesh No license field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! udev@0.6.0 install: `node-pre-gyp install --fallback-to-build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the udev@0.6.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/mitesh/.npm/_logs/2020-03-16T11_44_35_032Z-debug.log

I'm trying to Merge two arrays in a array using javascript but i'm not getting the exact output using concat method ,can any one help me

  var v1 = [[0, 1],[1, 5],[2,5]];
  var v2 = [[0,5],[1,6],[2,8]];
//output
  var result=[[0,1,5],[1,5,6],[2,5,8]];

I need a help where the "UPLOAD BUTTON" should select the text file, READ DATA & Consider only first 256 CHAR and the convert the DATA for "Ex:NAME" into # or * and post Data Masking should provide a "DOWNLOAD OPTION" to download the converted File.

Below is the Code I use and so far I only knew this Logic as I couldn't find more help on the internet:

var openFile = function(event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function(){
        var text = reader.result;
        var node = document.getElementById('output');
        node.innerText = text;
        console.log(reader.result.substring(0,256));
    };
    reader.readAsText(input.files[0]);
};

I am working on a project based on a template where I would like to add the quantity and product details to the cart so that to proceed with the transaction. I would like to get a help on what I can do ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<?php session_start(); ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Cart</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Nisc website">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
    <link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="styles/cart.css">
    <link rel="stylesheet" type="text/css" href="styles/cart_responsive.css">
    </head>

    <body>
    <?php
    if(isset($_POST['product_id'])){
        $found = false;
        if(!empty($_SESSION['cart'])){
            foreach($_SESSION['cart'] as $i => $product_id){
                if($_POST['cart'] == $product_id){
                    $founf = true;
                    $_SESSION['qty'][$i] = $_SESSION['qty'][$i] + 1;
                }
            }
        }
        if (!found){
            $cart->AddToCart();
        }
    }
    ?>
    <div class="super_container">

        <!-- Header -->

        <header class="header">
            <div class="header_container">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="header_content d-flex flex-row align-items-center justify-content-start">
                                <div class="logo"><a href="#">NISC GROUP</a></div>
                                <nav class="main_nav">
                                    <ul>
                                        <li class="hassubs active">
                                            <a href="index.html">Home</a>
                                            <ul>
                                                <li><a href="categories.html">Categories</a></li>
                                                <li><a href="product.html">Product</a></li>
                                                <li><a href="cart.html">Cart</a></li>
                                                <li><a href="checkout.html">Check out</a></li>
                                                <li><a href="contact.html">Contact</a></li>
                                            </ul>
                                        </li>
                                        <li class="hassubs">
                                            <a href="categories.html">Categories</a>
                                            <ul>
                                                <li><a href="categories.html">Category</a></li>
                                                <li><a href="categories.html">Category</a></li>
                                                <li><a href="categories.html">Category</a></li>
                                                <li><a href="categories.html">Category</a></li>
                                                <li><a href="categories.html">Category</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Accessories</a></li>
                                        <li><a href="#">Offers</a></li>
                                        <li><a href="contact.html">Contact</a></li>
                                    </ul>
                                </nav>
                                <div class="header_extra ml-auto">
                                    <div class="shopping_cart">
                                        <a href="cart.html">
                                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                     viewBox="0 0 489 489" style="enable-background:new 0 0 489 489;" xml:space="preserve">
                                                <g>
                                                    <path d="M440.1,422.7l-28-315.3c-0.6-7-6.5-12.3-13.4-12.3h-57.6C340.3,42.5,297.3,0,244.5,0s-95.8,42.5-96.6,95.1H90.3
                                                        c-7,0-12.8,5.3-13.4,12.3l-28,315.3c0,0.4-0.1,0.8-0.1,1.2c0,35.9,32.9,65.1,73.4,65.1h244.6c40.5,0,73.4-29.2,73.4-65.1
                                                        C440.2,423.5,440.2,423.1,440.1,422.7z M244.5,27c37.9,0,68.8,30.4,69.6,68.1H174.9C175.7,57.4,206.6,27,244.5,27z M366.8,462
                                                        H122.2c-25.4,0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h139.3v41
                                                        c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h45.2l26.9,302.3C412.8,445.2,392.1,462,366.8,462z"/>
                                                </g>
                                            </svg>
                                            <div>Cart <span></span></div>
                                        </a>
                                    </div>
                                    <div class="search">
                                        <div class="search_icon">
                                            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                            viewBox="0 0 475.084 475.084" style="enable-background:new 0 0 475.084 475.084;"
                                             xml:space="preserve">
                                            <g>
                                                <path d="M464.524,412.846l-97.929-97.925c23.6-34.068,35.406-72.047,35.406-113.917c0-27.218-5.284-53.249-15.852-78.087
                                                    c-10.561-24.842-24.838-46.254-42.825-64.241c-17.987-17.987-39.396-32.264-64.233-42.826
                                                    C254.246,5.285,228.217,0.003,200.999,0.003c-27.216,0-53.247,5.282-78.085,15.847C98.072,26.412,76.66,40.689,58.673,58.676
                                                    c-17.989,17.987-32.264,39.403-42.827,64.241C5.282,147.758,0,173.786,0,201.004c0,27.216,5.282,53.238,15.846,78.083
                                                    c10.562,24.838,24.838,46.247,42.827,64.234c17.987,17.993,39.403,32.264,64.241,42.832c24.841,10.563,50.869,15.844,78.085,15.844
                                                    c41.879,0,79.852-11.807,113.922-35.405l97.929,97.641c6.852,7.231,15.406,10.849,25.693,10.849
                                                    c9.897,0,18.467-3.617,25.694-10.849c7.23-7.23,10.848-15.796,10.848-25.693C475.088,428.458,471.567,419.889,464.524,412.846z
                                                     M291.363,291.358c-25.029,25.033-55.148,37.549-90.364,37.549c-35.21,0-65.329-12.519-90.36-37.549
                                                    c-25.031-25.029-37.546-55.144-37.546-90.36c0-35.21,12.518-65.334,37.546-90.36c25.026-25.032,55.15-37.546,90.36-37.546
                                                    c35.212,0,65.331,12.519,90.364,37.546c25.033,25.026,37.548,55.15,37.548,90.36C328.911,236.214,316.392,266.329,291.363,291.358z
                                                    "/>
                                            </g>
                                        </svg>
                                        </div>
                                    </div>
                                    <div class="hamburger"><i class="fa fa-bars" aria-hidden="true"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Search Panel -->
            <div class="search_panel trans_300">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="search_panel_content d-flex flex-row align-items-center justify-content-end">
                                <form action="#">
                                    <input type="text" class="search_input" placeholder="Search" required="required">
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Social -->
            <div class="header_social">
                <ul>
                    <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </header>

        <!-- Menu -->

        <div class="menu menu_mm trans_300">
            <div class="menu_container menu_mm">
                <div class="page_menu_content">

                    <div class="page_menu_search menu_mm">
                        <form action="#">
                            <input type="search" required="required" class="page_menu_search_input menu_mm" placeholder="Search for products...">
                        </form>
                    </div>
                    <ul class="page_menu_nav menu_mm">
                        <li class="page_menu_item has-children menu_mm">
                            <a href="index.html">Home<i class="fa fa-angle-down"></i></a>
                            <ul class="page_menu_selection menu_mm">
                                <li class="page_menu_item menu_mm"><a href="categories.html">Categories<i class="fa fa-angle-down"></i></a></li>
                                <li class="page_menu_item menu_mm"><a href="product.html">Product<i class="fa fa-angle-down"></i></a></li>
                                <li class="page_menu_item menu_mm"><a href="cart.html">Cart<i class="fa fa-angle-down"></i></a></li>
                                <li class="page_menu_item menu_mm"><a href="checkout.html">Checkout<i class="fa fa-angle-down"></i></a></li>
                                <li class="page_menu_item menu_mm"><a href="contact.html">Contact<i class="fa fa-angle-down"></i></a></li>
                            </ul>
                        </li>
                        <li class="page_menu_item has-children menu_mm">
                            <a href="categories.html">Categories<i class="fa fa-angle-down"></i></a>
                            <ul class="page_menu_selection menu_mm">
                                <li class="page_menu_item menu_mm"><a href="categories.html">Category<i class="fa fa-angle-down"></i></a></li>
                                <li class="page_menu_item menu_mm"><a href="categories.html">Category<i class="fa fa-angle-down"></i></a></li>
                                <li class="page_menu_item menu_mm"><a href="categories.html">Category<i class="fa fa-angle-down"></i></a></li>
                                <li class="page_menu_item menu_mm"><a href="categories.html">Category<i class="fa fa-angle-down"></i></a></li>
                            </ul>
                        </li>
                        <li class="page_menu_item menu_mm"><a href="index.html">Accessories<i class="fa fa-angle-down"></i></a></li>
                        <li class="page_menu_item menu_mm"><a href="#">Offers<i class="fa fa-angle-down"></i></a></li>
                        <li class="page_menu_item menu_mm"><a href="contact.html">Contact<i class="fa fa-angle-down"></i></a></li>
                    </ul>
                </div>
            </div>

            <div class="menu_close"><i class="fa fa-times" aria-hidden="true"></i></div>

            <div class="menu_social">
                <ul>
                    <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </div>

        <!-- Home -->

        <div class="home">
            <div class="home_container">
                <div class="home_background" style="background-image:url(images/cart.jpg)"></div>
                <div class="home_content_container">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <div class="home_content">
                                    <div class="breadcrumbs">
                                        <ul>
                                            <li><a href="index.html">Home</a></li>
                                            <li><a href="categories.html">Categories</a></li>
                                            <li>Shopping Cart</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cart Info -->

        <div class="cart_info">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <!-- Column Titles -->
                        <div class="cart_info_columns clearfix">
                            <div class="cart_info_col cart_info_col_product">Product</div>
                            <div class="cart_info_col cart_info_col_price">Price</div>
                            <div class="cart_info_col cart_info_col_quantity">Quantity</div>
                            <div class="cart_info_col cart_info_col_total">Total</div>
                        </div>
                    </div>
                </div>


                    <?php 
                    $product_id = $_SESSION['cart'];
                    foreach($product_id as $pid) {
                        $query ="SELECT * from tbl_product WHERE product_id=$pid"; 
                        require_once 'dbconnect.php';
                        $results=mysqli_query($DBcon,$query);
                        $product=mysqli_fetch_object($results);

                        ?>
                        <div class="row cart_items_row">
                        <div class="col">
                        <!-- Cart Item -->
                        <div class="cart_item d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start">
                        <!-- Name -->
                            <div class="cart_item_product d-flex flex-row align-items-center justify-content-start">
                                <div class="cart_item_image">
                                    <div><img src="\nisc\Admin\admin\item_images\<?php echo $product->product_image;?>" alt=""></div>
                                </div>
                                <div class="cart_item_name_container">
                                    <div class="cart_item_name"><a href="#"><?php echo $product->product_name;?></a></div>
                                </div>
                            </div>
                            <!-- Price -->
                            <div class="cart_item_price">Kshs <?php echo $product->product_price;?></div>
                            <!-- Quantity -->
                            <div class="cart_item_quantity">
                                <div class="product_quantity_container">
                                    <div class="product_quantity clearfix">
                                        <span>Qty</span>
                                        <input id="quantity_input" type="text" name="prod_qty" pattern="[0-9]*" value="1">
                                        <div class="quantity_buttons">
                                            <div id="quantity_inc_button" class="quantity_inc quantity_control"><i class="fa fa-chevron-up" aria-hidden="true"></i></div>
                                            <div id="quantity_dec_button" class="quantity_dec quantity_control"><i class="fa fa-chevron-down" aria-hidden="true"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Total -->
                            <div class="cart_item_total"></div>
                        </div>

                    </div>
                </div>
                <?php
                            }
                            ?>
                <div class="row row_cart_buttons">
                    <div class="col">
                        <div class="cart_buttons d-flex flex-lg-row flex-column align-items-start justify-content-start">
                            <div class="button continue_shopping_button"><a href="index.html?location=categories">Continue shopping</a></div>
                            <div class="cart_buttons_right ml-lg-auto">
                                <div class="button clear_cart_button"><a href="?reset=true">Clear cart</a></div>
                                <div class="button update_cart_button"><a href="?add=<?php echo($i); ?>">Update cart</a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row row_extra">
                    <div class="col-lg-4">

                        <!-- Delivery -->
                        <div class="delivery">
                            <div class="section_title">Shipping method</div>
                            <div class="section_subtitle">Select the one you want</div>
                            <div class="delivery_options">
                                <label class="delivery_option clearfix">Next day delivery
                                    <input type="radio" name="radio">
                                    <span class="checkmark"></span>
                                    <span class="delivery_price">$4.99</span>
                                </label>
                                <label class="delivery_option clearfix">Standard delivery
                                    <input type="radio" name="radio">
                                    <span class="checkmark"></span>
                                    <span class="delivery_price">$1.99</span>
                                </label>
                                <label class="delivery_option clearfix">Personal pickup
                                    <input type="radio" checked="checked" name="radio">
                                    <span class="checkmark"></span>
                                    <span class="delivery_price">Free</span>
                                </label>
                            </div>
                        </div>

                        <!-- Coupon Code -->
                        <div class="coupon">
                            <div class="section_title">Coupon code</div>
                            <div class="section_subtitle">Enter your coupon code</div>
                            <div class="coupon_form_container">
                                <form action="#" id="coupon_form" class="coupon_form">
                                    <input type="text" class="coupon_input" required="required">
                                    <button class="button coupon_button"><span>Apply</span></button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 offset-lg-2">
                        <div class="cart_total">
                            <div class="section_title">Cart total</div>
                            <div class="section_subtitle">Final info</div>
                            <div class="cart_total_container">
                                <ul>
                                    <li class="d-flex flex-row align-items-center justify-content-start">
                                        <div class="cart_total_title">Subtotal</div>
                                        <div class="cart_total_value ml-auto">$790.90</div>
                                    </li>
                                    <li class="d-flex flex-row align-items-center justify-content-start">
                                        <div class="cart_total_title">Shipping</div>
                                        <div class="cart_total_value ml-auto">Free</div>
                                    </li>
                                    <li class="d-flex flex-row align-items-center justify-content-start">
                                        <div class="cart_total_title">Total</div>
                                        <div class="cart_total_value ml-auto">$790.90</div>
                                    </li>
                                </ul>
                            </div>
                            <div class="button checkout_button"><a href="checkout.html">Proceed to checkout</a></div>
                        </div>
                    </div>
                </div>
            </div>      
        </div>

        <!-- Footer -->

        <div class="footer_overlay"></div>
        <footer class="footer">
            <div class="footer_background" style="background-image:url(images/footer.jpg)"></div>
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="footer_content d-flex flex-lg-row flex-column align-items-center justify-content-lg-start justify-content-center">
                            <div class="footer_logo"><a href="#">NISC GROUP.</a></div>
                            <div class="copyright ml-auto mr-auto">
    Copyright &copy;2019 NISC GROUP LIMITED COMPANY<script>document.</script> All rights reserved | This website is developed<i class="" aria-hidden="true"></i> by <a href="https://niscgroup.com" target="_blank"><u>NISC GROUP LIMITED COMPANY</u></a></div>
                            <div class="footer_social ml-lg-auto">
                                <ul>
                                    <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>

The user fills out an input form with the number of pages and I want the user to be able to input the pages done (var pagesToBeSubtracted) and the function to subtract the pages and update it on the site.

function subtractPages() {
 // Total pages that are grabbed from the input form
var totalPages = document.getElementById("numPages").value;

//Value of the input type number for done pages
var pagesToBeSubtracted = document.getElementById("donePages").value;

var remainingPages;

remainingPages = totalPages - pagesToBeSubtracted;

//Updating the number on the actual website
document.getElementById("pagesLeft").innerHTML = remainingPages;

However if you have total pages at 100 and you put that you did 5 pages it will go to 95 but if you press it again it will stay the same, if you bump it to 10 it will go down to 90 etc...

I get I should somehow save the result so that the next time the function is called, it doesn't start from the original number every time but from the updated one. But I can't figure out how to do it since I set the variable for total pages from the input form and every time the function is called it sets it at the same number again.

I'm sure I'm missing something elementary but I can't figure it out.

Hello I have changed the flip card element from w3schools and added javascript that they will rotate 60px if they are in viewport with that user can understand that there is a textt behind card. It works well on scroll but now I release that hover effekt is not working.Can you please help me?

https://www.w3schools.com/howto/howto_css_flip_card.asp

https://jsfiddle.net/mqbkzLy2/

var x = 0;
$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).scroll(function() {

  if ($(".flip-card-inner").isInViewport() && x == 0) {
    setTimeout(function() {
      $(".flip-card-inner").css('transform', 'rotateY(80deg)');
    }, 400);
    setTimeout(function() {
      $(".flip-card-inner").css('transform', 'rotateY(0)');
    }, 800);
    x++;
    console.log(x);
    console.log("in");
  }
  if (!$(".flip-card-inner").isInViewport() && x != 0) {
    x = 0;
    console.log('No success.');
    console.log(x);
    console.log("out");

  }
});

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div style="height:120vh;background-color:yellow;"></div><h1>Card Flip with Text</h1><h3>Hover over the image below:</h3><div class="flip-card"><div class="flip-card-inner"><div class="flip-card-front"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG" alt="Avatar" style="width:300px;height:300px;"></div><div class="flip-card-back"><h1>John Doe</h1><p>Architect & Engineer</p><p>We love that guy</p></div></div></div>

I have a form that I created using HTML and PHP, how to make this form refresh automatically every 20 seconds.

<div class="row">
   <div class="col-lg-12 col-xs-6">
     <input type="text" id="searchInput" class="controls" placeholder="Pencarian data...">
     <div class="card" id="map_canvas" style="width:100%; height:550px;"></div>
   </div>
 <div>

My function

$(document).ready(function() {
  setInterval(function() {
    $("#map_canvas").load('<?php echo base_url('backend/dashboard'); ?>');
  }, 20);
});

How to refresh this card ?

I'm new here and new to php. I searched for this exact problem, but couldn't find anything proper for my problem.

I am writing a wordpress plugin where I am creating the working schedule for employees. I just finished my vacation tool where the employees can take their vacations. These gets written into a database table.

In the second tool where I am creating the schedule, I have a simple form with html, js and php where I am first selecting then date and time (as shown in the code below) and after that picking the employee from a dropdown list (also the code below). Now I want the employee only show up if he isn't on vacation at this date from the first input field.

I know that php is server sided and can not solve this problem properly, so how could I manage this with js or even jquery?

Code for datetime selection: (just simple input)

<input type="datetime-local" name="date" required/>

Code for select option field:

<?php 

global $wpdb;
$result = $wpdb->get_results("SELECT * FROM wp_einteilung_referees WHERE license_type ='Hauptschiedsrichter'");
?>
        <select name="hsr1" class="require_3">
            <option value="" disabled selected>Select HSR1</option>
                <?php foreach($result as $value){ ?> 
                    <option value="<?php echo $value->lastname; ?>"><?php echo $value->lastname; ?></option>        
                <?php } ?>
        </select>

Hi I have been messing around with three.js for the past week or so, I am completely new to the lib so apologies for anything stupid I may say or ask. I have my code which throws no errors but it does have 1 warning:

  three.module.js:18314 THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(193,23-137): warning X3571: pow(f, e) will not work for negative f, use abs(f) or conditionally handle negative values

I'm not sure if that is important or not but anyway! Everything is working fine the model shows but the problem is it doesn't play any animation what am I doing wrong? here is the code:

import * as THREE from './js/three.module.js';

import {
    RGBELoader
} from './js/RGBELoader.js';
import {
    OrbitControls
} from './js/OrbitControls.js';
import {
    GLTFLoader
} from './js/GLTFLoader.js';
import {
    RoughnessMipmapper
} from './js/RoughnessMipmapper.js';


var container, controls;
var camera, scene, renderergl, model, mixer, clock;

init();
animate();

function init() {

    container = document.createElement('div');
    container.className = "experience-div";
    $('body').prepend(container);


    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 0.6, 5.7);


    scene = new THREE.Scene();
    clock = new THREE.Clock();

    new RGBELoader()

        .load('royal_esplanade_1k.hdr', function(texture) {


            var envMap = pmremGenerator.fromEquirectangular(texture).texture;


            scene.environment = envMap;

            texture.dispose();
            pmremGenerator.dispose();

            render();


            var roughnessMipmapper = new RoughnessMipmapper(renderergl);
            let mixer;
            const loader = new GLTFLoader();
            loader.load('untitled.gltf', function(gltf) {
                const model = gltf.scene;
                scene.add(model);
                mixer = new THREE.AnimationMixer(model);
                gltf.animations.forEach((clip) => {
                    mixer.clipAction(clip).play();
                });
                gltf.scene.traverse(function(child) {

                    if (child.isMesh) {

                        roughnessMipmapper.generateMipmaps(child.material);

                    }

                });



                roughnessMipmapper.dispose();



            });


        });

    renderergl = new THREE.WebGLRenderer({
        antialias: true
    });
    renderergl.setPixelRatio(window.devicePixelRatio);
    renderergl.setSize(window.innerWidth, window.innerHeight);
    renderergl.toneMapping = THREE.ACESFilmicToneMapping;
    renderergl.toneMappingExposure = 0.8;
    renderergl.outputEncoding = THREE.sRGBEncoding;
    container.appendChild(renderergl.domElement);
    $('.experience-div canvas').attr('id', 'canvas');

    var pmremGenerator = new THREE.PMREMGenerator(renderergl);
    pmremGenerator.compileEquirectangularShader();

    controls = new OrbitControls(camera, renderergl.domElement);


    controls.enableKeys = false;
    controls.enableZoom = false;
    controls.enableDamping = true;
    controls.maxPolarAngle = 2.2;
    controls.minPolarAngle = 1.1;
    controls.dampingFactor = 0.1;
    controls.rotateSpeed = 0.2;
    controls.minDistance = 2;
    controls.maxDistance = 500;
    controls.update();


    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderergl.setSize(window.innerWidth, window.innerHeight);

    render();

}



function animate() {
    controls.update();
    requestAnimationFrame(animate);
    var delta = clock.getDelta();
    if (mixer) mixer.update(delta);
    render();

}


function render() {

    renderergl.render(scene, camera);

}

Thank you for any help you can get the model I am using from here: https://ui-unicorn.co.uk/model-key.zip

I have several Async functions. The first two are creating needed values for the third function. Both values have been stored in the object customerId. Now when trying to pass the values on, the first value(customerId.id), which is a string, is being accepted. The second one, which is an object({source:customerId.source}), is being refused with error: undefined. Though when logging the value, it is defined. When passing the value in its "pure" form ({source:'tok.123456789'}) it is working as expected. Am I passing it on not correctly?

let customerId = {};
customerId.id = cus.123456789;
customerId.source = tok.123456789;

let addCardToCustomer = async function () {
return stripe.customers.createSource(customerId.id, {source:customerId.source}, function (err, card) 
  {
  if (err) {
    console.log("err:" + err);


    console.log(customerId.source);
    //OUTPUT: tok.123456789 

  }
  if (card) {
    console.log("success: " + JSON.stringify(card, null, 2));
  } else {
    console.log("something went wrong");
  }
  });
  };

This is not working

let addCardToCustomer = async function () {
return stripe.customers.createSource(customerId.id, {source:'tok.123456789'}, function (err, card) 

This is working