katex.render doesn’t render equation

I am new for html, javascript, and katex. I wonder if you could tell me why the following simple html does not show the equation.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css"
    integrity="sha384-yW1frltt4cd2K6QCmOMx4M+ylOmyrGb+NDouZ1f5VL2f4NN7uBu5PQsmUSgWib1W" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.js"
    integrity="sha384-ZfxPSr1+NHNHrv9KI48JF/1RkvdoxKWJPuYyfxE+iexlsGw8tyQR4OuNVNUuzwLN"
    crossorigin="anonymous"></script>
<title>My app</title>
</head>

<body>
<span id="idequ">equation</span>
<script>
    katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", document.getElementById("idequ"));
</script>
</body>

Event Listener not working when trying to close modal windows

I have this modal that opens when clicking a button, but the close button won’t work, here’s my HTML and JS code. Hope you can help me.

HTML

<div class="portfolio-modal flex-center">
                            <div class="portfolio-modal-body">
                                <i class="fas fa-times portfolio-close-btn"></i>
                                <h3>My MovieDB</h3>
                                <img src="https://pics.me.me/thumb_newspaper-dad-charizard-meme-is-not-amused-53734653.png" alt="">
                                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, debitis ipsum quo sint nulla aspernatur illum</p>
                            </div>
                        </div>

JS

    const portfolioModals = document.querySelectorAll(".portfolio-modal");
const imgCards = document.querySelectorAll(".img-card");
const portfolioCloseBtns = document.querySelectorAll(".portfolio-close-btn");

let portfolioModal = function(modalClick) {
    portfolioModals[modalClick].classList.add("active");
}

imgCards.forEach((imgCard, i) => {
    imgCard.addEventListener("click", () => {
        portfolioModal(i);
    });
});

portfolioCloseBtns.forEach((portfolioCloseBtn) => {
    portfolioCloseBtn.addEventListener("click", () => {
        portfolioModals.forEach((portfolioModalView) => {
            portfolioModalView.classList.remove("active");
        });
    });
});

How to make it so that when you click on the button again, it hides its menu

How to make it so that when you click on the button again, it hides its menu
The script works so that when opening another “btn”, the one that is active is hidden, + if you click outside the menu field, all are hidden.
How do I make it so that when I click on the active button again, its menu is hidden

<ul class="first_menu">
        <li class="menu_item">
            <button class="menu_btn">1 btn</button>
            <div class="dropdown">
                <ul class="dropdown__list">
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">1 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">2 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">3 Подпункт</a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="menu_item">
            <button class="menu_btn">2 btn</button>
            <div class="dropdown">
                <ul class="dropdown__list">
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">1 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">2 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">3 Подпункт</a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="menu_item">
            <button class="menu_btn">3 btn</button>
            <div class="dropdown">
                <ul class="dropdown__list">
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">1 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">2 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">3 Подпункт</a>
                    </li>
                </ul>
            </div>
        </li>
    </ul>

.first_menu {
    position: relative;
    justify-content: center;
    display: flex;
}
.menu_item,.dropdown__item {
    list-style-type: none;
}
.menu_btn {
    cursor: pointer;
    border: none;
    padding: 25px;  
    background-color: black;
    color: #ffffff;
    font-weight: bold;
}
.dropdown {
    transition: all 1s;
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    background-color: black;
}
.dropdown__item {
    text-align: center;
    padding-bottom: 20px;
}
.dropdown__link {
    text-decoration: none;
    color: white;
    font-weight: bold;
}
.active {
    top: 100px;
    transition: all 1s;
    transform: translateY(-30%);
}

const btn = document.querySelectorAll('.menu_btn')
btn.forEach(function(item, i){
    item.addEventListener('click', (e) => {
        let currentBtn = e.currentTarget; 
        let nextElemt = currentBtn.nextElementSibling; 
        document.querySelectorAll('.dropdown.active').forEach(function(item, i) { 
            item.classList.remove('active')
        })
        nextElemt.classList.add('active')
        const menuOff = document.querySelector('.first_menu');
            document.addEventListener('click', function(e) { 
            const click = e.composedPath().includes(menuOff); 
            if(!click) { 
        nextElemt.classList.remove('active')
        } 
    })
})
})

Return deltas from nested values in Javascript object

I am trying to find differences between nested number values for two successive dates. My object looks like this:

obj = [
  {
    id: 'rec09SOGKDp3cgcbs',
    fields: { date: '2022-10-21T13:37:00.000Z', value: 10 }
  },
  {
    id: 'rec2PVebECpT2CG18',
    fields: { date: '2022-10-22T13:37:00.000Z', value: 25 }
  },
  {
    id: 'recF2zznFNdVkr9i8',
    fields: { date: '2022-10-23T13:37:00.000Z', value: 55 }
  }
];

And the desired output would be:

deltas = [
      {
        id: 'rec2PVebECpT2CG18',
        fields: {delta: 15}
      },
      {
        id: 'recF2zznFNdVkr9i8',
        fields: {delta: 30}
      }
    ]

I tried some of the suggestions posted here but get stuck at comparing the proper objects and the nested values. Any tips on how to structure this?

TypeError: Cannot read properties of undefined (reading ‘create’) keep getting this error, checked all my code and still can’t see the cause

This is the error that I am getting in my terminal…

“TypeError: Cannot read properties of undefined (reading ‘create’)”

Says that the problem is stemming from my ‘comment-controller.js’ file, where it says ‘Comment.create(body)’ (line 2)

    console.log(body);
    Comment.create(body)
      .then(({ _id }) => {
        return Pizza.findOneAndUpdate(
          { _id: params.pizzaId },
          { $push: { comments: _id } },
          { new: true }
        );
      })
      .then(dbPizzaData => {
        if (!dbPizzaData) {
          res.status(404).json({ message: 'No pizza found with this id!' });
          return;
        }
        res.json(dbPizzaData);
      })
      .catch(err => res.json(err));
  }
}

module.exports = commentController;

This is the Schema for the comment


const CommentSchema = new Schema({
  writtenBy: {
    type: String,
  },
  commentBody: {
    type: String,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

const CommentModel = model("Comment", CommentSchema);

module.exports = CommentModel;

I’m using insomnia to create the test comment, which is this

{
    "writtenBy": "Cade",
    "commentBody": "This is a test comment"
}

I saw that someone posted about this but I looked to see if their solution would work for mine but from my eyes I see that I have that syntax layout, so I’m confused if it may be something else or I’m just blind and I can’t see it for my self.

Why do you use the request-ip module in expressjs? [duplicate]

I wanted to know why you use the request-ip module in expressjs when you can use req.ip ? Thanks for the response!

How do I change the font in a website using Javascript? [closed]

This is code I’m using right now:

let h2 = document.getElementsByTagName("span");
for (let i = 0; i < h2.length; i++) {
    h2[i].innerText = "hello";
    h2[i].style.fontFamily = 'Roboto', sans-serif;
}

but I’m getting an error.

I am able to change the .innerText to "hello" for the `’ tags, but I’m not able to change the font inside. Please help 🙂

Do I still use local host once I deploy my react native app?

I am currently building the backend for my react-native app, and I was wondering:

I have the app.listen(“insert port”). This works fine, but when I want to deploy to lets say, the app store, do I need to change it? I mean, does my app have to keep loading on my local host? Or do I use some other port.

Thank you.

get an answer on the currently active breakpoint?

I am using MUI.

I want to know the currently used breakpoint, is it xs, sm, md,lg and so on.

does MUI provide a method for doing so?

maybe by doing:

import { useTheme } from '@mui/material'
const Component = () => {
  const theme = useTheme()
  console.log(theme.breakpoints.currentActiveBreakpoint) // lg
}

or maybe by doing:

import { useTheme } from '@mui/material'
const Component = () => {
  const theme = useTheme()
  console.log(theme.breakpoints.is('lg')) // true
}

Why?

I have a created component which takes a prop called oriantation, and I want to consume it like this:

<TabsPanelsLayout tabs={tabsList} oriantation={theme.breakpoints.isBetweenAndIncluding('xs', 'md') ? 'vertical' : 'horizintal'} />

which is important to render something either like this:

or like this:

How to filter items from an array?

I made an ecommerce website and I’m trying to filter all the items by category, but I’m not able to make it work because I load my products with json/fetch (I tried the same code without using json/fetch and it works fine).

I have all my products in an array, and each product has a category (“snacks”, “candy” or “drink”), all the info for each product is in the json(category, name, id, etc). I have filter buttons for each category with it’s corresponding id.

I don’t get any error, it simply does not work. Here’s the relevant code:

//FILTER BUTTONS

<div class="filter-btns">
     <button class="pb-3 filter-btn" id="all">All</button>
     <button class="pb-3 filter-btn" id="drinks">Drinks</button>
     <button class="pb-3 filter-btn" id="snacks">Snacks</button>
     <button class="filter-btn" id="candy">Candy</button>
</div>

// LOAD PRODUCTS WITH FETCH

const URL = "products.json"
const products = []

const showProducts = (products) =>
{
    let container = document.querySelector('#container');
    for (const product of products)
    {   
        let item = `<div class="filter-item all ${product.category}" id="${product.id}">
                        <div class="card h-100 shadow">
                            <img id="${product.id}" class="card-img-top" src="${product.img}" alt="..."/>
                            <div class="card-body p-4">
                                <div class="text-center">
                                    <h5>"${product.name}"</h5>
                                    <div class="d-flex justify-content-center small text-warning mb-2">
                                        <div class="bi-star-fill"></div>
                                    </div>
                                    <span class="text-muted text-decoration-line-through"></span>
                                    "${product.price}"
                                </div>
                             </div>
                            <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                <div class="text-center"><a class="cartButton btn btn-outline-dark mt-auto" id="${product.id}" href="#">Add to cart</a></div>
                             </div>
                        </div>
                    </div>`;
        container.innerHTML += item
    }
}

const getData = async () =>
{
    try
    {
        const response = await fetch(URL);
        const data = await response.json();
        products.push(...data);
        showProducts(data);
    }
    catch(e)
    {
        console.log(e);
    }
}

getData();

// FILTER ITEMS

const allFilterItems = document.querySelectorAll('.filter-item');
const allFilterBtns = document.querySelectorAll('.filter-btn');

allFilterBtns.forEach((btn) => {
  btn.addEventListener('click', () => {
    showFilteredContent(btn);
  });
});

function showFilteredContent(btn){
  allFilterItems.forEach((item) => {
    if(item.classList.contains(btn.id)){
      item.style.display ="block";
    }
    else {
      item.style.display = "none";
    }
  });
}

Any help would be amazing. Thanks!

Client is missing “GuildVoiceStates” intent error while making a discord bot from a tutorial on v14

I was using a tutorial on youtube to make a music Discord bot with javascript and I run into this problems with the guilds, i have already changed them for the new guild-names as seen on the source code, but it did not seem to work although I am using discord.js v14

This is the error message
PS C:UsersmatiaDesktopbot_de_discord> node index.js

    C:UsersmatiaDesktopbot_de_discordnode_modulesdiscord-playerdistPlayer.js:51
                throw new PlayerError_1.PlayerError('client is missing "GuildVoiceStates" intent');
                ^
    
    PlayerError: [PlayerError] client is missing "GuildVoiceStates" intent
        at new PlayerError (C:UsersmatiaDesktopbot_de_discordnode_modulesdiscord-playerdistStructuresPlayerError.js:28:15) 
        at new Player (C:UsersmatiaDesktopbot_de_discordnode_modulesdiscord-playerdistPlayer.js:51:19)
        at Object.<anonymous> (C:UsersmatiaDesktopbot_de_discordindex.js:28:17)
        at Module._compile (node:internal/modules/cjs/loader:1155:14)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
        at Module.load (node:internal/modules/cjs/loader:1033:32)
        at Function.Module._load (node:internal/modules/cjs/loader:868:12)
        at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
        at node:internal/main/run_main_module:22:47 {
      createdAt: 2022-10-22T20:46:33.101Z,
      statusCode: 'PlayerError'
    }

And this is the source code

const Discord = require("discord.js")
const dotenv = require("dotenv")
const { REST } = require("@discordjs/rest")
const { Routes } = require("discord-api-types/v9")
const fs = require("fs")
const { Player } = require("discord-player")

dotenv.config()
const TOKEN = process.env.TOKEN

const LOAD_SLASH = process.argv[2] == "load"

const CLIENT_ID = "1033422580654280774"
const GUILD_ID = "699272174736900117"



const { Client, GatewayIntentBits } = require('discord.js');

const client = new Discord.Client({
  intents: [
    GatewayIntentBits.Guilds,
    GatewayIntentBits.GuildMessages,
  ]
})

client.slashcommands = new Discord.Collection()
client.player = new Player(client, {
    ytdlOptions: {
        quality: "highestaudio",
        highWaterMark: 1 << 25
    }
})

let commands = []

const slashFiles = fs.readdirSync("./slash").filter(file => file.endsWith(".js"))
for (const file of slashFiles){
    const slashcmd = require(`./slash/${file}`)
    client.slashcommands.set(slashcmd.data.name, slashcmd)
    if (LOAD_SLASH) commands.push(slashcmd.data.toJSON())
}

if (LOAD_SLASH) {
    const rest = new REST({ version: "9" }).setToken(TOKEN)
    console.log("Deploying slash commands")
    rest.put(Routes.applicationGuildCommands(CLIENT_ID, GUILD_ID), {body: commands})
    .then(() => {
        console.log("Successfully loaded")
        process.exit(0)
    })
    .catch((err) => {
        if (err){
            console.log(err)
            process.exit(1)
        }
    })
}
else {
    client.on("ready", () => {
        console.log(`Logged in as ${client.user.tag}`)
    })
    client.on("interactionCreate", (interaction) => {
        async function handleCommand() {
            if (!interaction.isCommand()) return

            const slashcmd = client.slashcommands.get(interaction.commandName)
            if (!slashcmd) interaction.reply("Not a valid slash command")

            await interaction.deferReply()
            await slashcmd.run({ client, interaction })
        }
        handleCommand()
    })
    client.login(TOKEN)
}

Angular http get returning undefined

I tried to find an answer here but couldn´t. I´m new to Angular and I made a service for consulting an API, I checked on postman and the request and headers are valid, but my code is compiling and returning the following error on browser:

ERROR TypeError: Cannot read properties of undefined (reading 'get')

My code:

 http:HttpClient;

  constructor() { 

    console.log("creates here");

  }

  getCurrencySymbolList() {

    console.log("gets here");
    console.log(`${this.apiUrl}${this.apiSymbols}`);

    this.http.get("www.google.com");
  }
}

Thanks in advance!

Pass Success Message from PHP to HTML page after validation

I’m tiring to Pass a success message after pup checks the database and confirms the data
how do I display a message in case of a wrong password entry ,I tried many solutions with no success ,I tried using ajax solutions and JavaScript with no success as I don’t know the basics on ajax and my background in JavaScript is basic
Here’s my code

LoginTest.html

<html>
<link rel="stylesheet" href="LoginStyle.css">
<head>
    <title>Login</title>
</head>

<body>

    <div class="login-box">
        <h2>Login</h2>
        <form action="http://localhost/Test2/dbloginTest.php" method="post" name="loginform" class="loginform">
            
            <div class="user-box">
                <input type="number" name="civilid" required="">
                <label>Civil ID</label>
            </div>

            <div class="user-box">
                <input type="password" name="password" required="">
                <label>Password</label>
                
            </div>
            <input type="submit" name="submit" Value="Login">
        </form>
        
        <a href="Registration.html">
            <input type="submit" name="register" Value="Register">
        </a>

    </div>


</body>

</html>

dbloginTest.php

   <?php
require 'C:WindowsSystem32vendorautoload.php';
if (isset( $_POST['submit'] ) && isset( $_POST['civilid'] ) && isset( $_POST['password'] ) ) {

    $civilid = ( $_POST['civilid'] );
    $password = ( $_POST['password'] );
    $hashpass = "";
    $return = array();
    //echo extension_loaded( "mongodb" ) ? "loadedn" : "not loadedn";
    $con = new MongoDBClient( 'mongodb+srv://Admin:[email protected]/?retryWrites=true&w=majority' );
    // Select Database
    if ( $con ) {
        $db = $con->VoterDatabase;
        // Select Collection
        $collection = $db->Voters;
        $cursor = $collection->find( array( 'civilid' => $civilid ) );
        foreach ( $cursor as $row ) {
            ob_start();
            echo $row->password;
            $hashpass = ob_get_clean();
        }
        
       
        if ( password_verify($password,$hashpass) ) {
            echo "You Have Successully Logged In";
            header( 'Location:Voters.html' );
            exit;
        } else {
            
            echo "Your Civil ID or Password is Incorrect";
            header( 'Location:LoginTest.html' );
            exit;
        }
    } else {

        die( "Mongo DB not connected" );
    }
}
?>

Javascript: get percentage difference between two BigInt values [duplicate]

How to calculate the percentage difference between two BigInt numbers?
BigInt division rounds to integer, so I can’t use fractions.

Carrying an array from an AJAX call into an additional, nested AJAX Call

Using the Rick & Morty API to create a website that, given x characters, will return episodes that contain all x characters.

   $.ajax(url1)
    .then ((info1) => {
        char1Episodes = info1.results[0].episode
        
    })

this stores the array of episodes for a given character into a variable char1Episodes….how do I then take that into another AJAX call to compare it against an array of the second character’s episodes to check for any duplicates using a for loop, thus signifying episodes they share?