I do not understand how this JS code is working; how are these two lines being returned?

let specificSuffix = function(words, suffix) {
  if (!Array.isArray(words)) {
    return [];
  return words.filter(function(word){
 return word.endsWith(suffix)

console.log(specificSuffix(['family', 'hound', 'catalyst', 'fly', 'timidly', 'bond'], 'ly'));
// [ 'family', 'fly', 'timidly' ]
console.log(specificSuffix(['simplicity', 'computer', 'felicity'], 'ily'));
// [ ]

I’m confused specifically about:

return words.filter(function(word) {
return word.endsWith(suffix)

How am I returning both of these things? The filter is saying, return this empty new array, fill it with the words that endWith the suffix… (I think)

It’s really just the two returns that are throwing me. How does this work?

How to blend navigation bar and background picture in html css

I have been trying to create a website using HTML and CSS by watching a tutorial. As in the tutorial they have their Navigation bar and background blended in I did everything the same as their code except for a few pictures but my nav bar has a sharp outline which is pretty visible

my website

tutorial’s website

I’m just learning HTML and CSS so any help is appreciated. Thanks!

    margin: 0;
    padding: 0;


    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    cursor: pointer;
   width: 50%;
   align-items: center;
   display: flex;

.nav-list li{
    list-style: none;
    padding: 20px 30px;


.nav-list li a{
text-decoration: none;
color: white;
.nav-list li a:hover{
    text-decoration: none;
    color: blue;

    width: 50%;
    text-align: right;

    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;


.logo img
    width: 35%;
    border: 3px solid white;
    border-radius: 50px;

    padding: 5px;
    font-size: 17px;
    border: 2px solid goldenrod;
    border-radius: 9px;

    background: rgba(0, 0, 0, 0.7) url(/img//back.jpg) ;
    background-size: cover;
    background-blend-mode: darken;

display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
max-width: 50%;
margin: auto;
height: 80%;

    width: 80%;
    display: flex;
    justify-content: center;
    flex-direction: column;


    width: 30%;

    height: 100vh;  

.sndhalf img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    /* width: 60%;

    border: 4px white;
    border-radius: 150px; */
    display: block;
    margin: auto;

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

    <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" href="css/style.css">

    <nav class="navbar background">
        <ul class="nav-list">
            <div class="logo"><img src="img/logo" alt="logo"></div>
            <li><a href="#home">home</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#Services">Services</a></li>
            <li><a href="#Contact_us">contact Us</a></li>
        <div class="rightNav">
            <input type="text" name="search" id="search">
            <button class="btn btn-sm">search</button>
    <section class="background firstsection">
        <div class="box-main">
            <div class="firsthalf">
                <p class="big-text">big text</p>
                <p class="small-text">small text</p>

Adding The data into another spreadsheet

Continuing from previous question

This code recodes the last edited data from Spreadsheet A Sheet1 into the same Spreadsheet A Sheet2, but I want that data (Spreadsheet A Sheet1) to be added into another Spreadsheet B Sheet2

I couldn’t configure how to modify the code since it looks a little complex to me.

Can you please help me to modify this code?

function onEdit(e) {
  const range = e.range;
  const sheet = range.getSheet();
  if (sheet.getSheetName() != "Sheet1" || range.rowStart == 1) return;
  const col = range.columnStart - 1;
  const [header, ...values] = sheet.getDataRange().getDisplayValues();
  const value = values[range.rowStart - 2];
  const v = [[`${value[0]} - ${value[1]}`, `${header[col]} - ${value[col]}`]];

How could I extract this variable from a JavaScript string using regex?

I’m trying to extract the value of this variable which is in a string along with other Javascript. Any help to get beyond where I’m at would be very helpful!

  const someObject = {
    name: 'About Us',
     objectProp: [{
        type: 'text',
        default: {
            value: 'Hey there'
     permissions: [],
     position: 'relative',
     breakpoints: [],
     slots: [],

This gets me close but terminates at the first } under value: 'Hey there'


Can anyone give me a guidance for this task its regarding my job i just need a Gidence

Create an SPA (Single Page App) for the following task. You can use HTML5/CSS3/JS and JS frameworks like react, vue or angular to implement the same.

  1. Lists Videos in a grid with following details – Image, title, Description. You are free to categorize videos. You can choose images on your own.
  2. On click Shaka player must open up and play the video content (
    https://github.com/google/shaka-player )
    (You can use the following site to get video streams –
    https://bitmovin.com/mpeg-dash-hls-examples-sample-streams/ )
  3. The app should handle interactions, buttons and states.
  4. You should host the app and code on GitHub

mongoose value number to string format of digit 15 change to character e+15

i have a problem, when trying to create a new field in mongoose aggregate.
when I try to convert a number to a string. where the number has digits 15 and above.

but the result of adding the string e+15

        $addFields: {
          stringCode: {$toString : "$number_code"}
        $lookup: {
          from: "member",
          localField: "number_code", //string
          foreignField: "stringCode", // intiger to string
          as: "member",

the example number I’m trying to change is 123456789123456

and the result is “stringCode”: “1.2345e+15”

I hope the result is “123456789123456”

Passing data to Child Component ReactJS


I am working on a website where I have parent components and child components. The snippet below is a Google Map wrapper and a map component.


import React, { useEffect, useState, useRef } from "react";

// reactstrap components
import { Card, Container, Row } from "reactstrap";

// core components
import Header from "components/Headers/Header.js";
import LocationSearchInput from "../../components/Places";
import { useAuthenticator } from "@aws-amplify/ui-react";
import * as queries from "../../graphql/queries";
import { API, graphqlOperation } from "aws-amplify";
import { geocodeByAddress, getLatLng } from "react-places-autocomplete";
import * as _ from "lodash";
import { collapseTextChangeRangesAcrossMultipleVersions } from "typescript";

const MapWrapper = (data, loc) => {
  const mapRef = useRef(null);
  console.log("child props", data, loc);

  console.log("foo child", loc);
  // geocodeByAddress(loc[0].HomeLocation)
  //     .then(results => getLatLng(results[0]))
  //     .then(latLng => console.log('Success', latLng))
  //     .catch(error => console.error('Error', error))

  useEffect(() => {
console.log("child mount");
    let google = window.google;
    let map = mapRef.current;
    let lat = "40.748817";
    let lng = "-73.985428";
    const myLatlng = new google.maps.LatLng(lat, lng);
    const mapOptions = {
      zoom: 12,
      center: myLatlng,
      scrollwheel: false,
      zoomControl: true,
      styles: [
          featureType: "administrative",
          elementType: "labels.text.fill",
          stylers: [{ color: "#444444" }],
          featureType: "landscape",
          elementType: "all",
          stylers: [{ color: "#f2f2f2" }],
          featureType: "poi",
          elementType: "all",
          stylers: [{ visibility: "off" }],
          featureType: "road",
          elementType: "all",
          stylers: [{ saturation: -100 }, { lightness: 45 }],
          featureType: "road.highway",
          elementType: "all",
          stylers: [{ visibility: "simplified" }],
          featureType: "road.arterial",
          elementType: "labels.icon",
          stylers: [{ visibility: "off" }],
          featureType: "transit",
          elementType: "all",
          stylers: [{ visibility: "off" }],
          featureType: "water",
          elementType: "all",
          stylers: [{ color: "#5e72e4" }, { visibility: "on" }],

    map = new google.maps.Map(map, mapOptions);

    const marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      animation: google.maps.Animation.DROP,
      title: "Light Bootstrap Dashboard PRO React!",

    const contentString =
      '<div class="info-window-content"><h2>Light Bootstrap Dashboard PRO React</h2>' +
      "<p>A premium Admin for React-Bootstrap, Bootstrap, React, and React Hooks.</p></div>";

    const infowindow = new google.maps.InfoWindow({
      content: contentString,

    google.maps.event.addListener(marker, "click", function () {
      infowindow.open(map, marker);
  }, []);

  console.log("child render");
  return (
        style={{ height: `600px` }}

const Maps = () => {
  const [foo, setFoo] = useState([]);

  const { user, signOut } = useAuthenticator((context) => [context.user]);
  // console.log("user map", user);

  const [pin, setPin] = useState([]);

  const fetchFoo = async () => {
    try {
      const todoData = API.graphql(
        graphqlOperation(queries.listEmployees, {
          filter: {
            Email: {
              eq: user.attributes.email,
      ).then((response) => {
          console.log("fetch resp", response);
        .catch((err) => {
    } catch (err) {
      console.log("error facing Todos:", err);
  console.log("parent render");

  useEffect(() => {
    console.log("parent mount")
  }, []);

  var json = [{a: "a", b:"b"}]

  return (
      <Header />
      {/* Page content */}
      {/* {foo} */}
      <Container className="mt--7" fluid>
          <div className="col">
            {/* <LocationSearchInput /> */}
          <div className="col">
            <Card className="shadow border-0">
              {/* <> */}
              <MapWrapper data={json} loc={{foo}}/>
              {/* </> */}

export default Maps;


console output #1
console output #2


The child component when it first reads the data it is empty but it is populated the second time it is loaded. I have tried to tweak the useEffect to work but the only difference I get is it’ll perform an infinite loop if I remove the empty array.

I have an RESTFul API that renders HTML through a GET endpoint. How can I display this html in my wordpress website with custom header from the form?

I’m using a nocode API that returns some HTML based on some parameters in the URL when the user makes a GET request. I’d like to improve the user experience and have a form like a contact 7 form that can map user input for each form field in the call to API.

For example form would look like following:

Name: Todd
Email: [email protected]

My API is example https://api.com/endpoint/v1/

When the user enters name, email and key I need to make a call like this:

My API is example https://api.com/endpoint/v1?name={name}&email={email} with the Key field passed in as a header (X-BLOBR-KEY: {key})

I couldn’t figure out how to do this with javascript or with a wordpress plugin.

Functional Programming, JavaScript, chaining, and no external library to calculate average on array of objects

I want to use Functional Programming, JavaScript, chaining, and no external library to reduce an array of objects to the average of the grade of the element with the condition that enrolled >1.
So far I’m able to calculate the sum under the requested condition
But how can I calculate the average? ( Note that I want to use Functional Programming, JavaScript, chaining, and no external library)

Here is what I have come so far …

let enrollment= [
    {enrolled: 2, grade:100},
    {enrolled: 2, grade:80},
    {enrolled: 1, grade:89}

const sum = (accumulator, curr) => accumulator + curr.grade;
const average = (total,arr) =>  total/arr.length

    .filter( elem => elem.enrolled >1)

Now how do I chain the average function to the above block of code?
Thanks in advance

SWUP works on initial page load, fails on first request, and succeeds on every subsequent request?

I am using swup.js with a Laravel project that also uses Livewire. I almost have it working right, but I’m getting a bizarre error.

Here’s the situation:

  • The first page loads perfectly fine. Everything works as intended.
  • Once you click a swup link and “load” your next page, everything fails. No Javascript will be executed, Livewire can’t function, either.
  • But, once you make your second trip to that page by clicking the link, it’s as if everything has loaded correctly in cache and is working – Javascript, Livewire, everything seems fine.

I can’t figure out why this is happening. Here is my setup + code:


import Swup from 'swup';
import SwupScriptsPlugin from '@swup/scripts-plugin';
import SwupLivewirePlugin from '@swup/livewire-plugin';

const swup = new Swup({
    cache: false,
    debugMode: true,
  plugins: [
      new SwupLivewirePlugin(),
      new SwupScriptsPlugin({
          head: true,
          body: true,
          optin: true

My master blade template, layouts.app.blade.php:

<livewire:scripts />

<main id="swup" class="">
    <script data-swup-ignore-script src="{{ asset('js/app.js') }}"></script>

My home.blade.php file:


<section class="mt-24 mb-32 py-12 relative">
  <div class="max-w-7xl mx-auto px-4">
        <div class="flex flex-col space-y-3 lg:w-1/2 w-full ml-auto">
          <span class="block text-3xl xl:inline">I'm a...</span>
          <span id="role" class="block text-indigo-600 xl:inline text-7xl">Hymn Writer</span>


<script data-swup-reload-script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/2.17.0/core.min.js" integrity="sha512-o6alMAMTI5qAmVC1UvuRPgTl3UOOkP8NZ6212+rq1Oslsuy8Owt9r5Z0Wu0LNxpw/Q8N8ToGiyovHV+kyOulxg==" crossorigin="anonymous"></script>

<script data-swup-reload-script>
  function init() {
    var role = document.getElementById('role');

    var typewriter = new Typewriter(role, {
        loop: false,

    typewriter.typeString('Hymn Writer')
        // ...etc

  document.addEventListener('swup:contentReplaced', init);

I can’t figure out why it’s working on initial page load and subsequent link clicks but not the very first time the link is clicked when starting from another page? What is going on here?

getting the names of customers who id is more than 1500? From sorting this array…I.E homework question

Here is the problem: recieve an array produce an array with the persons name and number of products id above 1500 and if they are below 1500 (1436 – 1600 ) you cant include them.

 customers = [ { name :" stacy "  
        age : "45"
        products ordered id : "1500 - 1600"
       name : "ashley"
       age : "87"
       products ordered id : "1455 - 1660"
       name: " gabrielle"
       age : "67"
       products orderes id : "1568 -1600"


I need to return there name of the customers who order is more than > 1500
This is a homework question.. the format may be off but this is exactly how they gave it to me.

Grab multiple properties of a JSON

I’m working with a large JSON file that looks like this:

    "name": "Superproduct",
    "description": "Enjoy this amazing product.",
    "brand": "ACME",
    "categories": [
      "Soccer Ball",
      "Beach Ball"
    "type": "Online product",
    "price": 50,
    "price_range": "50 - 100",
    "image": "someImageURL",
    "url": "SomeProductURL",
    "free_shipping": true,
    "popularity": 10000,
    "rating": 2,
    "objectID": "1234"

I am trying to access every object with the Ball category, so that I can add a discount to that specific item. I realized that every object can have multiple variations of the word Ball in the category array.

Is there a way I can target the word ball in the array, so that I can add that to an array and apply the discount to every product with said criteria?

This is what I have so far, but I’m not sure if this is the best way, or if there’s a better way to accomplish what I’m trying to do:

async function setDiscount() {

    let discountedRate = 0.5;
    .then(res => res.json())
    .then(data => {for (let i = 0; i < data.length; i++) {
        if (data[i].categories[i] == "Ball") {
            data[i].price -= (data[i].price * discountedRate);



P.S.: I’m a newbie.

Express/mongoose returns empty array when trying to get request

I am trying to get the list of books from the database. I inserted the data on mongoose compass. I only get an empty array back.

//Model File
import mongoose from "mongoose";

const bookSchema = mongoose.Schema({
title: {
type: String,
required: true,
description: {
type: String,
required: true,
releasedDate: {
type: String,
required: true,

const Book = mongoose.model("Book", bookSchema);
export default Book;

//Routes file
import express from "express";
import Book from "./bookModel.js";
const router = express.Router();

 router.get("/", async (req, res) => {
   const books = await Book.find({});


Vue Router not scolling to correct hash location

When clicking a link on the app, the Router does not scroll to the correct hash location given. But it DOES scoll. The scroll is always about 1 element to high on the page. For example, if my page is this:

    <div id="div1">Div1</div>
    <div id="div2">Div2</div>
    <div id="div3">Div3</div>
    <div id="div4">Div4</div>

Then if i click a link that goes to hash “div3” it will scroll me so the top of the page is sitting at div2. Only a very few selec elements are scrolled to corrently. Is there a reason for this? Setting page margins?

Router code:

const router = new VueRouter({
  mode: 'history',
  base: "/",
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
        return {
          selector: to.hash,
          behavior: 'smooth',
    } else {
        return { x: 0, y: 0 }

Example of code that calls the hash routing:

if (item.title == "Mission") {
                            router.push({name: 'Explore', hash: '#mission-statement'});
                        } else if (item.title == "Our Story") {
                            router.push({name: 'Explore', hash: '#our-story-container'});
                        } else if (item.title == "Shared principles") {
                            router.push({name: 'Explore', hash: '#shared-principles-container'});
                        } else if (item.title == "Volunteer Opportunities") {
                            router.push({name: 'Explore', hash: '#volunteer-container'});
                        } else if (item.title == "Gallery") {
                            router.push({name: 'Explore', hash: '#galleries'});
                        } else if (item.title == "Living") {
                            router.push({name: 'Explore', hash: '#living-container'});
                        } else if (item.title == "Contact Us") {
                            router.push({name: 'Explore', hash: '#contact-us-container'});
                        } else {