Category: javascript

Category Added in a WPeMatico Campaign

Bootstrap Navbar toggledown not displaying links

I am fairly new to bootstrap and I can’t seem to figure out why, when resized to the size of a phone screen, the dropdown toggle that appears doesn’t do anything.

Here is my code for the navbar:

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

<head>
    <!--Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, name=viewport">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/style.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200">
    <script type="text/javascript" src="/static/javascript.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        ul#menu li {
            display: inline;
        }
    </style>
    {% if title %}
    <title>{{ title }}</title>
    {% else %}
    <title>Finance Tracker</title>
    {% endif %}
</head>

<body>
    <nav class="navbar navbar-expand-sm navbar-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href='#'>Navbar</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a></li>
                <li class="nav-item"><a class="nav-link" href="/allexpenses">All Expenses</a></li>
                <li class="nav-item"><a class="nav-link" href="/allincomes">All Incomes</a></li>
                <li class="nav-item"><a class="nav-link" href="/expenses">Add Expenses</a></li>
                <li class="nav-item"><a class="nav-link" href="/incomes">Add Incomes</a></li>
                <li class="nav-item"><a class="nav-link" href="/goal">Add Goal</a></li>
            </ul>
        </div>
    </nav>
    <div class="container-fluid">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        {% for message in messages %}
        <div class="alert alert-success">
            {{ message }}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}
        {% block content %}{% endblock %}
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>

</html>

I am also utilizing flask and this is the base.html template although I don’t believe that should affect the bootstrap.
Any help would be appreciated!

MSW Doesn’t Seem to Intercept Rest API GET Request When Upgrading to 2.0.1

I have something like this in my MSW 1.3.* version and it is working as expected.

const server = setupServer(
  rest.get(
    'http://localhost:1800/users_info',
    (req, res, ctx) => {
      return res(
        ctx.json({
          userId: 123,
        })
      );
    }
  )
);

When upgrading to MSW 2.0.1, I had to update to something like this

const server = setupServer(
  http.get(
    'http://localhost:1800/users_info',
    ({ request, params, cookies }) => {
      return HttpResponse.json({
        userId: 123,
      });
    }
  ),

thrown: HttpError {
      "attempt": undefined,
      "description": "HTTP request failed.  Request was to URL http://localhost:1800/users_info but the error was an unexpected exception "TypeError: Failed to fetch"",
      "error": [TypeError: Failed to fetch],
      "request": Object {
        ...
      },
      "status": 0,
      "willRetry": undefined,
    }

but it appears on running my jest test that it isn’t getting registered and intercepted. Does anyone know why that would be?

Tried downgrading back to v1 and it works, but want to use v2 now

How to convert or append textarea value to input file? [closed]

How to convert value of a textarea into labels? Add the file type name and file name. Get data from textarea to input file.

      <input  type="file"   onchange="convert()" style="display: none;" />
      
   
   <textarea cols="30" rows="20" id="create" hidden="hidden" 
                    placeholder="text will appear here">
            </textarea>

<button id="create">Create File</button>

Unable to accept multiple files as an input in HTML & JS

my code in pug/html

            .form__group.form__photo-upload
              label.label__photo(for='photo') Product Images
              input.form__upload_product_images(type='file', id="files" name="files" ,style="display:none;")

code in js

const uploadProductImages = document.querySelector(
  '.form__upload_product_images'
);
  uploadProductImages.multiple = true;

I am unable to select multiple files i tried adding the multiple attribute by both hard code and js dom please help if someone has a fix!

DOMException: play() failed because the user didn’t interact after tab goes out of focus

I’m building a website that has various recurring timers. When a timer goes off it plays a short audio notification.

Initially, everything works well. However, after the user minimizes the window and it stays idle for some time the audio playback begins to throw the following error.

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

It seems that after some random amount of time the initial user interaction that was made to get the audio working gets reset and the user needs to interact with the website again to keep the audio notifications to play.

This is clearly and issue but I haven’t been able to find anything to fix this specific problem.

I’m loading and playing the audio via the HTML5 Audio API

// initiate audio object
const audio = new Audio('/audio/ping.mp3') 
// after some time a timer calls
audio.play()

Any insight or a push in the right direction would be much appreciated! Thank you!

How can I improve the focus on a skip to main content button in square space?

I have a skip to main content button on a square space site I have been asked to look into and I can’t figure out how to set the focus, the solutions for a regular html site do not work.

this is the current anchor tag I have toggeled as the “main content” to recieve focus after button click.

<a href="/contact" id="page" aria-label=" Get in touch, This link redirects to the contact us page" tabindex="0" class="first"> Get In Touch </a>

and this is the skip to main content anchor tag that I do not have direct access to because I assume square space automatically populates the header as I was unable to find any way to access the header.

<a href="#page" tabindex="1" class="header-skip-link sqs-button-element--primary" id="skiptomaincontent" aria-label="Skip to Main content">
      Skip to Content
    </a>

As this is square space I do not have direct access to the header where the button and navigation links are at.

Here are the solutions I tried that were successful in adding an id and aria label to the button

<script>
    document.getElementsByClassName('header-skip-link sqs-button-element--primary')[0].setAttribute("id", "skiptomaincontent");
 document.getElementById("skiptomaincontent").setAttribute("aria-label", "Skip to Main content")
});

and here is the code I tried to get the focus to go to the tag with the main content of page

   document.getElementsByClassName('header-skip-link sqs-button-element--primary')[0].addEventListener("click", () => {
  document.getElementById("page").focus();

One thing I have noticed is that even with out the focus code on the section above for some reason I have to hit tab a 2nd time after initally hitting enter in order to skip the links and get to the anchor tag so it IS skipping the links but it is not working the way it normally would, also on mobile the skip doesn’t work so I am hoping someone here can give me some guidance.

Sticky position glitch

I have a .job-banner div in the middle of my page with CSS position:sticky and javascript watcher adding a “sticky” class whenever scrolling past it. Due to the style guide I need to apply different spacing and font size within .job-banner when it’s sticky. I found that my implementation often glitches when scrolling and I’m not sure how to fix it.

Here is a simplified Codepen to demonstrate: https://codepen.io/anzuj/pen/GRzqPGP

Any tips would be welcome!

Secret not working with @googlemaps/google-maps-services-js and firebase function

I am developing a mobile app with React Native.
I create a serverless function which I deploy on Firebase to find a place nearby with Google Maps API.
I can get the data if I insert manually the Google Key in the code but if I use either google secret manager or env variable doesn’t work.
I console log the key both using env and google secret manager and I can see the value.
But seems that is not available to the code when it does the request to the API.
I use @googlemaps/google-maps-services-js module to do such request.

This is my function:

// index.js
const { onRequest } = require("firebase-functions/v2/https");
const { placesRequest } = require("./places");
const { Client } = require("@googlemaps/google-maps-services-js");
const client = new Client({});

exports.placesRequest = onRequest((request, response) => {
  placesRequest(request, response, client);
});

// places.js
const { defineSecret } = require("firebase-functions/params");
const googleApiKey = defineSecret("GOOGLE_API_KEY");
const { mocks, addMockImages } = require("./mock");
const url = require("url");
const functions = require("firebase-functions");

module.exports.placesRequest = (req, res, client) => {
  const { location, mock } = url.parse(req.url, true).query;

  if (mock === "true") {
    const data = mocks[location];
    if (data) {
      data.results = data.results.map(addMockImages);
    }
    res.json(data);
  }

 functions.logger.log("Logging googleApiKey from secret:", googleApiKey);
  functions.logger.log(
    "Logging googleApiKey from env:",
    process.env.GOOGLE_API_KEY
  );

  client
    .placesNearby({
      params: {
        location,
        radius: 1500, //15km - is set in meter
        key: process.env.GOOGLE_API_KEY, // or googleApiKey
      },
      timeout: 1000,
    })
    .then((response) => {
      console.log("place response", response.data);
      response.data.results = response.data.results.map(addGoogleImage);
      return res.json(response.data);
    })
    .catch((err) => {
      res.status(400);
      return res.send(err);
    });
};

Any tips? Would be highly appreciate

Create “ogame” trade script to calculate how much resources to buysell for given condition

Here is the given: there are three type of resorces – metal, crystal, deuterium. I have a 100 metal, 0 crystal, 0 deuterium. There is a ship costs 10metal + 6crystal + 2deut. I can trade metal for crystal and deut for 1crystal = 1.35metal, 1 deut = 2.61 metal (in ogame it is given as a ratio 2.61m:2c:1d). So the question is how to automatically calculate how much metal I should sell for the other resourcess so metal+crys+deut became in a ratio of 10:6:2, or even better to see the amount of crystal and deut I should buy.
I calculated that manually and got the digits close to what I need:
enter image description here
on the picture there is an example when I sell crystal.

The goal is to have a script or table where I enter the amount of res I have and want to sell, the exnchange ratio in a way 2.61:2:1, the target ration for result of trading 10:6:3
and get calcutions: metal to sell for crys, metal to sell for deut, crys to buy for metal, deut to buy for metal and results of the trade: metal:crys:deut.

And same if I sell any other ress. Thank you in advance

Converting API query results to an array in Javascript is dropping some results

I’ve got a weird issue: I’m working on a javascript script in Vrealize Orchestrator that is making an API query through a module to get a list of results, whose total count is 1018 individual result objects. I’m then converting those results to an array in Javascript with the following line:

var existingResults = JSON.parse(results)[“results”];

Then, when I inspect the new existingResults variable, I find that the length is now 1000 and several of the returned results, which I confirmed were present in results[“results”] before that line, are no longer there. Is there some sort of limit to how long the output of JSON.parse() can be? Or is there some other issue that I’m not seeing here?

How can we share a variable from state in a different scope in a custom hook

I am trying to understand why the console.log(batches) is always empty even after I dispatch the new array

import { useDispatch, useSelector } from "react-redux";
import { useCallback} from "react";

const useAlterBatches = () => {

const batches = useSelector((state)=> state.batches.batches) || [];

const onQuantityChange = useCallback(( quantity, item, value) => {
  
  let newArr = [];
  let newItem = {...item} //item is an object

  console.log(batches)

   newArr = JSON.parse(JSON.stringify(batches)); //deep copy of array of objects
      const index = newArr.findIndex(
        (item) => item.batchId=== newRecord.batchId
      );
      if (index > -1 && value > 0) {
        newArr[index].selectedQuantity = value > quantity ? quantity : value;
      } else if (index > -1 && value <= 0) {
        newArr.splice(index, 1);
      } else {
        newRecord.selectedQuantity = value;
        newArr.push(newRecord);
      }
      return dispatch(setBatches(newArr));
    },
    [batches]
  );

}

export default useAlterBatches;


... 
// This is the component I am using. The values are parameters are correct always.
       <NumberInput
          onChange={(value) => onQuantityChange(text, record, value)}
        />
...

I try to get the variable batches from selector inside my function but its not updating.
I want to check if the item is already in the batches with the correct value but its always empty even though I dispatch the newArr with an element inside.
What I am expecting is for the batches variable to be updated in the callback function.

Limit Q-Select choices line number

using a q-select in order to choose options. But if there is to many the q-select content grows in so much lines. I want to limit to 2 lines :
Too many opts example

              <q-select
            v-model="option.selectedDocuments"
            :options="option.tasks"
            :readonly="selectedOption !== option"
            option-label="title"
            multiple
            emit-value
            use-chips
            stack-label
            @input="handleTaskEditionAdd"
          >
            <template v-slot:option="scope">
              <q-item
                :data-test-id="`el-select-option-${scope.index}`"
                v-bind="scope.itemProps"
                v-on="scope.itemEvents"
              >
                <q-item-section
                  :class="{'text-feedback-success-darkest': selectedOption.selectedDocuments.includes(scope.opt)}"
                >
                  <q-item-label v-html="scope.opt.title" />
                </q-item-section>
                <q-item-section
                  v-if="selectedOption.selectedDocuments.includes(scope.opt)"
                  side
                >
                  <q-icon name="mdi-check" color="primary"/>
                </q-item-section>
              </q-item>
            </template>
          </q-select>

Order Javascript Array Then and By using categoryID

This is my array of books, which is not listed in order of appearance. I’m making an attempt to put things in ascending order.

const booksArr = [
    {
        "bookID": 178844,
        "name": "English Book 2",
        "sequencePosition": 2,
        "categoryID": 1        
    },
    {
        "bookID": 178845,
        "name": "English Book 1",
        "sequencePosition": 1,
        "categoryID": 1
     },
    {
        "bookID": 178850,
        "name": "English Book Z",
        "sequencePosition": 0,
        "categoryID": 1     
    },
    {
        "bookID": 178851,
        "name": "Spanish Book 2",
        "sequencePosition": 2,
        "categoryID": 2
        
    },
    {
        "bookID": 178846,
        "name": "Spanish Book 1",
        "sequencePosition": 1,
        "categoryID": 2      
    },
    {
        "bookID": 178846,
        "name": "Spanish Book Z",
        "sequencePosition": 0,
        "categoryID": 2      
    }
];

Sorting the books array:

booksArr.sort((a, b) => a.sequencePosition - b.sequencePosition);

The books array is currently being sorted according to the sequence position:

{ bookID: 178850, name: "English Book Z", sequencePosition: 0, categoryID: 1 }, 
{ bookID: 178846, name: "Spanish Book Z", sequencePosition: 0, categoryID: 2 },
{ bookID: 178845, name: "English Book 1", sequencePosition: 1, categoryID: 1 }, 
{ bookID: 178846, name: "Spanish Book 1", sequencePosition: 1, categoryID: 2 }, 
{ bookID: 178844, name: "English Book 2", sequencePosition: 2, categoryID: 1 }, 
{ bookID: 178851, name: "Spanish Book 2", sequencePosition: 2, categoryID: 2 }]

How can I use the category to sort the array such that the first categoryID is sorted in ascending order, followed by the second category in the same manner? Thanks

I need help creating a program that will accept a mathematical expression as input from the user using standard algebraic format

I’m creating a program that will accept a mathematical expression as input from the user using standard algebraic format.

Numbers (N) in the equation may be positive or negative. ie: 3 / -25. They may also be any valid numeric value such as -3.1415 etc.

Allow the user to repeat the inputting of expressions as many times as they would like. The program must not fail due to improper user input, so, you must catch error exceptions and handle them.

My errors are ;
Exception in thread “main” java.lang.Error: Unresolved compilation problems:
Syntax error on token(s), misplaced construct(s)
The type StackInterface is already defined
Cannot instantiate the type StackInterface
The method push(double) is undefined for the type StackInterface
The method pop() is undefined for the type StackInterface

Any syggestions?

 

    package stacks;
    import java.util.ArrayList;
    import java.util.List;
    import java.util.EmptyStackException;
    import java.util.Scanner;

    public class StackInterface {
            private List stack;
        private Object top;
        private Node link;

     public StackInterface()
      {
        top = null;
            this.link = null;
      }
    
    private void push(double num) {
        // create new node temp and allocate memory
                Node temp = new Node();

                // check if stack (heap) is full. Then inserting an
                // element would lead to stack overflow
                if (temp == null) {
                    System.out.print("nHeap Overflow");
                    return;
                }

                // initialize data into temp data field
                num = temp.getNodeType();

                // put top reference into temp link
                //temp = top;

                // update top reference
                top = temp;
        
    }
    
    // Utility function to check if the stack is empty or not
        public boolean isEmpty()
        {
            return top == null;
        }

        // Utility function to return top element in a stack
        public int peek()
        {
            // check for empty stack
            if (!isEmpty()) {
                return (double) top;
            }
            else {
                System.out.println("Stack is empty");
                return -1;
            }
        }

    private void double pop() {
        // check for stack underflow
                if (top == null) {
                    System.out.print("nStack Underflow");
                    return;
                }
                        else{
                // update the top pointer to point to the next node
                    top = link;
                        }
                        return (double) top;
    }
        public static double evaluateMathExpression(String expression) {
            StackInterfacenumStack= new StackInterface();     
            OperatorStack opStack = new OperatorStack();
            int i = 0;

            while (i