Category: javascript

I am trying to use a matrix3d transformation that is working in firefox, but not in google chrome(version 100). I have tried a webkit like this:

document.getElementById(‘frontOfShip’).style.transition=’transform 3s’;
document.getElementById(‘frontOfShip’).style.webkitTransform=”matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,.58)”;
like this post,How to set the style -webkit-transform dynamically using JavaScript?, suggests.

The Element is not staying in place after the transformation, it snaps back to its original position. I did notice that the x and y values would work and the element stayed in place after the transformation as long as I don’t add a scaling factor.

When download is added to <a> tag, user can download a file when clicking the link instead of transitioning to the URL.

<a href="http://www.example.com/index.html" download>Download</a>

But is there a way to do bulk download (multiple files)? Thanks in advance!

I’m relatively new to Javascript and Node, but I have managed to create a bot for my discord server and implement a basic economy, granting points based off of post submissions. These points are stored in an NeDB. I’d like to allow users to redeem points to give someone a specific role for X amount of time.

I’m not sure how to even begin approaching this problem. Do I log a timestamp in my NeDB database with the user ID, and then somehow check this database at regular intervals to see if the timestamp has elapsed? Can I do this without blocking the bots other regular functions and command responses?

Additionally, how might I make the code robust so that if my bot disconnects unexpectedly, the user is not stuck with the temporary role?

I’m curious how someone with programming experience might approach this problem, and what solutions might be available that I don’t know about.

Thank you so much in advance!

I have a page with an url that looks like so:

some.unit.gov/app/source/index.jsp#someActivityPage?10/NEW/20?true

window.location.host      //returns : 'some.unit.gov' 
window.location.pathname  // returns : '/app/source/index.jsp
window.location.search    // always return ' '

The host application consists other embedded links , which when clicked redirects the page
(which is the part after ‘#’).

Please note:
values ‘someActivityPage’, ‘NEW’, ‘true’ – are all dynamic values
Both numbers (10, 20) – are dynamic as well

How can I extract the ‘true’ value of the url in a render() method of BackboneJS.

The issue is :
In chrome dev tools

window.location.href.substr(window.location.href.lastIndexOf('?') + 1);  //returns 'true' exactly what I need

But inside the application, I suspect since javascript loads all the views on initial application load, always returns some.unit.gov/app/source/index.jsp because the view has already been initialized.

I also tried :

var searchParams = new URLSearchParams(window.location.search);
searchParams.has('false');

This always returns false regardless of what argument I provide.

I’m trying to include an icon as part of my website, currently my code looks like the following:

app.js

const http = require('http');
const fs = require('fs');
const express = require('express')
const path = require('path')

const hostname = '127.0.0.1';
const port = 3000;
const html_file = "./index.html";

var app = express()
app.use(express.static(path.join(__dirname, 'public')));
//app.use(express.static('public'));
console.log(path.join(__dirname, 'public'));

fs.readFile(html_file, function (err, html)  {
    if (err) {
        throw err;
    }
    const server = http.createServer((req, res) => {
      res.statusCode = 200;
      res.setHeader('Content-Type', 'text/html');
      res.write(html);
      res.end();
    }).listen(port);
console.log(`Listening on http://${hostname}:${port}`)
});

While my html file looks like this:

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <body>
<p>test text</p>
    </body>
</html> 

However, the icon is never loaded properly.
I can see that the request returns in the network inspection tab, and there are no errors from nodejs in the console, but no matter what it fails.

I’ve tried switching between adding and not including the /public/ in the link line too, as well as moving the HTML file to the public folder itself.

Any ideas?

enter image description hereI wanted to do this in WordPress. I tried a Logo that rotates when clicking on that arrow and when its horizontal it shows the tabs with individual content. I tried different css and javascript codes but they all never worked out. enter image description here

Is there even a possible way without using javascript?
I would be very happy for ideas.

example store

  getters: {
    setName: (state) => (string: string) => {
      state.user.username = string;
    },
    setUser: (state) => {
      setName('Tom'); // setName is undefined.
    }
  }

Is there any way to access the setName inside an arrow function?

Example only show you can get this inside normal functions
https://pinia.vuejs.org/core-concepts/getters.html#accessing-other-getters

i am trying to parse a list of json objects from a string and it kept giving me errors about the use of quotations and double quotations so i replaced all of them and now it is giving me this weird error when the syntax looks good, maybe the problem is me i just can’t see how the string may be wrong

const { row } = props;
row.reciept = '{"data": ' + row.reciept + '}'
console.log(row.reciept)
console.log(JSON.parse(row.reciept.replace("'", '"')))

console output:

{"data": [{'id': 4, 'name': 'test msg', 'description': '12', 'price': 123, 'quantity': 11, 'discount': 1, 'user': 1, 'shop': 1, 'amount': 5}, {'id': 3, 'name': 'Chipsy', 'description': '.', 'price': 5, 'quantity': 1000, 'discount': 0, 'user': 1, 'shop': 1, 'amount': 2}]}

error:

SyntaxError: Unexpected end of JSON input

Good day folks,

I am creating a to-do app, and so far when I enter the task in via the input the console shows my object firing but does not display it on the screen. Please look at my code and help me point out the issue, I have been debugging this for some time today.

HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/to-doStylesheet.css">
    
    <title>To-Do App</title>
</head>
<body>
    
    <div class=container>
        <div class= base>
            <div class = screen>
                <img src="images/WarGreymon_Render.png" alt="Wargreymon">
                <div id ="speach-bubble"> What is on your 
                    agenda for today?
                </div>
                <div class = "dateTime">
                </div>
            </div>
           
    <div class = "nameInput" id = "inputContainer">
        <form class ="form">
            <input type="text" class ="userInput" placeholder="Add Agenda and press enter">
            <input type="submit" value ="Add">   
        </form>
        
    </div>
    </div>

<ul class="list"></ul>

    <script src="js/add-task.js"></script>
</body>
</html>

CSS

.form
{
  margin-left: 400px;
}

.userInput
{
    width: 394px;
    height: 30px;
    background-color: #B62626;
    font-family: Digimon Basic;
    color: #33D61A;
    margin-left: -359px;
}

.userInput ::placeholder
{
    color: #33D61A;
    font-family: Digimon Basic;
}

.list:empty
{
  display: none;
}

.list
{
  list-style: none;
  margin-bottom: 20px;
}

.input[type="checkbox"] {
  display: none;
}

.tick {
  width: 30px;
  height: 30px;
  border: 3px solid #333;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.todo-item {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.todo-item span {
  flex-grow: 1;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 22px;
}

JS

let tasks = [];

const currentdt = new Date()

function todo(text) {
  const todo = {
    text,
    checked: false,
    id: Date.now(),
    timestamp: currentdt
  };

  tasks.push(todo);
  console.log(tasks);
}

// Select the form element
const form = document.querySelector('.form');
// Add a submit event listener
form.addEventListener('submit', event => {
  // prevent page refresh on form submission
  event.preventDefault();
  // select the text input
  const input = document.querySelector('.userInput');

  // Get the value of the input and remove whitespace
  const text = input.value.trim();
  if (text !== '') {
    todo(text);
    input.value = '';
    input.focus();
  }
});

//This function is to display new to do on the screen
function displaytasks(todo)
{
    const list = document.querySelector('list');

    const isChecked = todo.checked ? 'done': '';

    const addedList = document.createElement("li");

    addedList.setAttribute('class', `todo-item ${isChecked}`);

    addedList.setAttribute('data-key', todo.timestamp);

    addedList.innerHTML = `<input id="${todo.timestamp}" type="checkbox"/>
    <label for="${todo.timestamp}" class="tick js-tick"></label>
    <span>${todo.text}</span>
    <button class="delete-todo js-delete-todo">
    <img class = "delete" src="images/delete.png" alt="delete icon">
    </button>`;

    list.append(addedList);
}

So I am busy with the js file at the moment, I think it has to do something with the innerHTML, but I am not sure what exactly is wrong there, because when I look in the console on the HTML side I do not see the <ul class="list"></ul> firing at all to bring the new HTML elements.

Your help will be much appreciated

I would like to redirect users in my middleware. However, Next.js middleware behaves inconsistently. If I place the middleware in /pages/_middleware.ts the redirect will work. If I place it in /pages/api/_middleware.ts the redirect will not work.

// /pages/_middleware.ts
export function middleware() {
  return NextResponse.redirect(
    `http://example.com`
  );
}

// /pages/api/_middleware.ts
export function middleware() {
  return NextResponse.redirect(
    `http://example.com`
  );
}

console.log(new Date(2022, 4, 6));

will output

2022-05-06T05:00:00.000Z

will give me an offset 05 hours. However I live in Texas which is currently behind UTC time by 5 hours, not ahead of it.

I find this confusing.

If I do:

console.log(new Date('2022-04-06'))

There is no offset and I get:

2022-04-06T00:00:00.000Z

I have React components:

Pokemon.jsx

import React from "react";
import { useState, useEffect } from "react";
import { TailSpin } from "react-loader-spinner";
import { PokemonDetails } from "./PokemonDetails";

function Pokemon({ name, url }) {
  const [data, setData] = useState(null);
  const [open, isOpen] = useState(false);

  useEffect(() => {
    fetch(url)
      .then((r) => r.json())
      .then(setData);
  }, [url]);

  const handleMore = (e) => {
    isOpen(true);
  };

  const handleBack = (e) => {
    isOpen(false);
  };

  return (
    <div>
      {data ? (
        <div>
          <div className="card" onClick={handleMore}>
            <div className="animate__animated animate__bounceInUp">
              <div className="card-image">
                <img src={data.sprites.front_default} alt="pokemon_img" />
                <span className="card-title">{name}</span>
              </div>
              <div className="card-content">
                {data.abilities.map((n, index) => (
                  <p key={index}>{n.ability.name}</p>
                ))}
              </div>
            </div>
          </div>
          {open ? (
            <PokemonDetails
              height={data.height}
              weight={data.weight}
              name={name}
              onClick={handleBack}
            />
          ) : (
            <div></div>
          )}
        </div>
      ) : (
        <div>
          <TailSpin type="Puff" color="purple" height={100} width={100} />
        </div>
      )}
    </div>
  );
}

export { Pokemon };

PokemonDetails.jsx

import React from "react";

function PokemonDetails({ height, weight, name, onClick }) {
  return (
    <div className="card card_more ">
      <div className="animate__animated animate__flipInX">
        <span className="card-title">{name}</span>
        <p>{height}</p>
        <p>{weight}</p>
        <button onClick={onClick}>Back</button>
      </div>
    </div>
  );
}

export { PokemonDetails };

When you click on div with onClick action, additional information about the Pokémon appears.
The problem is that I need to display the PokemonDetails component instead of the entire content.
I don’t think it’s a good idea to overlay CSS styles. Maybe someone can suggest the best way to do it?*

I have created a Link on a Post that links to the Post Page. When the link is clicked with the url at '/' the link doesn’t work correctly, it displays the correct link in the url e.g. http://localhost:3000/posts/624a771b42211849eaada885 but the page doesn’t redirect, the only way it works is if I refresh the page. However, if I am on my Popular Posts page the link works correctly. To be clear the Post is in a component called Posts which displays all of the Posts. The Posts component is a shared component across many components, such as Home page ('/') and Popular Posts (/popular) the link works in all other pages except for when at '/'

Below is the Link.

<Link to={`/posts/${_id}`}>
  <h2 className='post-title'>{title}</h2>
</Link>

My routes are set up with the following:

<Route element={!token ? <Navigate replace to='/login' /> : <Navbar />}>
  <Route
    path='/'
    element={<Home />}
  >
    <Route
      path='/popular'
      element={<Popular />}
    />
    <Route 
      path='/posts/:postId' 
      element={<PostPage />} 
    />
  </ Route>
</Route>

and finally, in my Home.js I have this:

<div className='home-posts-container'>
  {window.location.pathname === '/' ? <PopularPosts /> : <Outlet />}
</div>

My sandbox on JSFIDDLE

When ‘OPEN’ is clicked, the content div should expand to full width, but it ended up expanding by 100px width like on the red box. I tried to set width: 100%, in the gray box div and it didn’t work.

In the .content class, I had the width set to 100vw without margin: 0 auto and it expanded 100% width to the right side, not screen-fulled size.

I’m testing this function before I deploy it on my website.

jQuery –

$(".openit").on("click", function() {
  $(".expandBG").toggleClass("content");
  $(".openit").hide();
  $(".closeit").show();
  $(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
  $(".expandBG").toggleClass("content");
  $(".openit").show();
  $(".closeit").hide();
  $(".text").hide();
});

HTML –

<div class="wrapper">


<div class="back">BG
<div class="expandBG">
  <div class="openit">OPEN</div>
  <div class="flex-col">
    <div class="closeit">CLOSE</div>

    <div class="content text" style="display: none;">
      <div>(CONTENT HERE)</div>
    </div>
  </div>
</div>
</div>


</div>

CSS –

body {
background-color: #000;
}
.wrapper {
width: 100%;
margin: 0 auto;
text-align: center;
border: solid red 1px;
}
.back {
position: relative;
color: #fff;
width: 110px;
height: 110px;
background-color: red;
margin: 0 auto;
text-align: center;
display: block;
}
.expandBG {
display: block;
width: 100px;
height: 100px;
transition: ease 0.3s;
background-color: #192D38;
overflow: hidden;
margin: 0 auto;
bottom: 0;
text-align: center;
font-family: sans-serif;
color: #fff;
position: relative;
}
.flex-col {
flex-direction: column;
}
.openit {
display: block;
text-align: center;
height: 100%;
cursor: pointer;
margin: 0 auto;
}
.closeit {
display: block;
text-align: center;
cursor: pointer;
width: 100%;
margin: 0 auto;
z-index: 1;
position: relative;
}
.text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -25px;
}
.content {
width: 100%;
height: 50vw;
position: relative;
margin: 0 auto;
}

Im building a workout web app and need to show how many round are going to do done per workout and how many exercises per round.

As the amount of rounds and exercise per round will be different for every workout, I’ve set them as forEach.

But I need to know the docID (shown as “roundID”) of the rounds collection to get that specific collections, sub collection to show the specific exercises.

Currently it is not showing the exercises as I need to wait for the first fetch to be complete and then use that docId which, I am unable to do.

I have tried await with loops, async but have been unable to get it to work.

Currently my code is:

Main forEach getting the rounds

const Rnds = document.getElementById("rnds");

const roundRef = query(collection(db, "user", uid, "yourWorkouts", id, "rounds"));
const unsub = onSnapshot(roundRef, (querySnapshot) => {

     querySnapshot.forEach((doc) => {

          const roundID = doc.id;
          const rounds = doc.data().round;
          const rests = doc.data().rest;

          console.log("Round", roundID);

          Rnds.innerHTML += `
               
               <h2>${rounds}</h2>
                            
               A list of the amount of exercise docs in "exercise" collection
                            
               <p>${rests}</p>
                        `
     });
});

and then, fetch the exercise for the rounds

const exerciseRef = query(collection(db, "user", uid, "yourWorkouts", id, "rounds", roundID, "exercises"));
const exerciseUnsub = onSnapshot(exerciseRef, (querySnapshot) => {

     querySnapshot.forEach((doc) => {

          const reps = doc.data().rep;
          const names = doc.data().exerciseName;

          console.log("Exercises", doc.data());

     });
});

I am aiming for it to look like this