How to get the first day of the next month in JavaScript

I need to get the first day of the next Month for a datePicker in dd/mm/yyyy format.

how can i do it?

i have this code :

var now = new Date();
if (now.getMonth() == 11) {
  var current = new Date(now.getFullYear() + 1, 0, 1);
} else {
  var current = new Date(now.getFullYear(), now.getMonth() + 1, 1);
}

console.log(current)

but it’s give this :

Sat Jan 01 2022 00:00:00 GMT+0200 

i need it like this 01/01/2022

any help here =)?

Why well-know symbols are in Symbol and not in Reflect API

I don’t understand one thing about well-known symbols in Javascript. What is the reason of putting those well-known symbols into Symbol instead of Reflect API? For me seems that the right place for them is the Reflect API as the Reflect API is made for metaprogramming, particularly for reflection and particularly for introspection and self-modification? Does anyone knows the reason of doing so?

Toogle active class using getElementById

I am trying to change class from none to active using document.getElementById but it is just adding active not removing it.

page.html

function toggleIt() {
  let collapseModel = document.getElementById(`collap_id`).className += "content active";
  collapseModel[0].classList.toggle("active")
}
.content {
  padding: 10px 20px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.content.active {
  padding: 10px 20px;
  display: block;
  overflow: hidden;
  background-color: #f1f1f1;
}
<button onclick="toggleIt();">Open</button>

<div class="content" id="collap_id">
  Here will be all the details
</div>

When I click on toggle it then it is opening but not closing , it is also showing "Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')"

I have tried many times but it is not toggling.

Change elements display order after click event – javascript

After i click on Calculate button “Reset” button appears below it, but i want to change the display styles how they both appear after the click event. I want them side by side and not on top of each other (picture in link represents the idea) I tried doing it by toggling a class after click, but in that way i could change only one element appearance. What would be the best way to do it?
Button order example

HTML code

<div class="container">
        <header>
          <div class="h1-background">
            <h1 class="h1">Tip calculator</h1>
          </div>
        </header>
        <div class="text">
    
          <p>How much was your bill?</p>
          <form name="theForm3">
            <input class="input-bill" placeholder="Bill Amount $">
            <p>How big tip will you give?</p>
            <!-- DROP DOWN-->
            <div class="select">
              <select class="percents">
                <option value="1">Nothing</option>
                <option value="0.5">5%</option>
                <option value="0.10">10%</option>
                <option value="0.15">15%</option>
                <option value="0.20">20%</option>
                <option value="0.30">30%</option>
    
              </select>
            </div>
          </form>
          <!-- AFTER DROP DOWN-->
          <p>How many people are sharing the bill?</p>
          <input class="input-people" placeholder="Number of people">
          <button onclick="calculateTip(), changeStyle()" class=" button center button-calc"
            type="button">Calculate
          </button>
    
          <button onclick="" class=" button center reset-button" type="button">Reset
          </button>

JS CODE

"use strict";
const buttonCalc = document.querySelector(".button-calc");
function calculateTip() {
    //Selectors
    const inputBill = document.querySelector(".input-bill").value;
    let inputPeople = document.querySelector(".input-people").value;
    const percents = document.querySelector(".percents").value;
    //Event listeners

    //validate input
    if (inputBill === "" || percents == 0) {
        alert("Please enter values");
        return;
    }



    //Check to see if this input is empty or less than or equal to 1
    if (inputPeople === "" || inputPeople <= 1) {
        inputPeople = 1;

        document.querySelector(".each").style.display = "none";

    } else {
        document.querySelector(".each").style.display = "block";
    }


    //Functions
    let total = (inputBill * percents) / inputPeople;
    console.log(total);
    //round to two decimal places
    total = Math.round(total * 100) / 100;
    //next line allows us to always have two digits after decimal point
    total = total.toFixed(2);
    //Display the tip

    // Display alert i there is no TIP
    if (percents == 1) {
        alert(`There is no tip, you must pay only the bill $${total}`)
        return;
    }


    document.querySelector(".reset-button").style.display = "block";
    document.querySelector(".totalTip").style.display = "block";
    document.querySelector(".tip").innerHTML = total;

}


function changeStyle() {
    let container = document.querySelector(".container");
    container.style.height = "400px";
    event.preventDefault();
}


//Hide the tip amount on load
document.querySelector(".reset-button").style.display = "none";
document.querySelector(".totalTip").style.display = "none";
document.querySelector(".each").style.display = "none";

What is difference between these Three?

class AppError extends Error{
    constructor(message,statusCode){
        super(message)
        this.statusCode = statusCode
    }
}

AND

class AppError extends Error{
    constructor(message,statusCode){
        super(message)
        this.message=message
        this.statusCode = statusCode
    }
}

AND

class AppError{
    constructor(message,statusCode){
        this.message = message
        this.statusCode = statusCode
    }
}

I am woking on nodeJs project using mongo.During error handling I created this class but not understading difference between these.

save as json format from Web Speech API Transcript

I am using web speech recognition API in Chrome to get transcripts & store in a string array variable(called notes). I would like to save the full transcripts as json so I can easily use it later.

Currently my project has html, css & script.js, the transcripts are stored in localStorage. May I know how should I work to save the transcript as json? Or if there are any useful links?

I watched the related videos(
https://youtu.be/T7s3st6xfpA?t=205
), result.js will be created if i assign the info in a variable (notesInfo) & call

node saveFile.js

saveFile.js

  const notesInfo = {
      date:'1.12.2021', content:'How are you'
  }

  const fs = require('fs');

  const saveData = (notesInfo) => {
        const finished = (error) => {
            if(error){
              console.error(error)
              return;
            }
        }

        const jsonData = JSON.stringify(notesInfo)
        fs.writeFile('result.json', jsonData, finished)
  }

  saveData(notesInfo)

result.json

{"date":"1.12.2021","content":"How are you"}

But this is suitable for assigning a predictable data ({“date”:”1.12.2021″,”content”:”How are you”})into a variable (notesInfo). But I want my string array variable (notes) which generated from Web Speech Recognition can be saved in a new json file automatically when i start using speech Recognition in my web brower. I worked for days but still have no ideas.

Thank you for your kindness!

Adding screen share option webrtc app. unable to get on other users

i was adding screen share funcanlity to my app but its is not working .. its only show screen share on my side but not on other user.
here is code :-
try{
navigator.mediaDevices.getDisplayMedia({
video: true,
audio:true
}).then(stream => {
const video1 = document.createElement(‘video’);
video1.controls = true;
addVideoStream(video1,stream)

    socket.on('user-connected', userId =>{
        const call = peer.call(userId, stream)
        stream.getVideoTracks()[0].addEventListener('ended', () => {
            video1.remove()
          });
        call.on('close', () => {

        })  
    })
        stream.getVideoTracks()[0].addEventListener('ended', () => {
          video1.remove()
        });
      });
    }catch(err) {
        console.log("Error: " + err);
    }

Text editor in javascript (like notepad)

Hello friends I am learning javascript but I have a question that how can we make a text editor like notepad in javascript by which we can open a text file and edit and save it. With the help of javascript,html and css.

PLEASE ANSWER MY QUESTION

How do I get around SPA framework undoing inserted CSS style?

I have a site and it uses Svelte. I inject custom CSS styling to certain rows of the table, but the styles seems get swapped into totally different rows as soon as the Table get updated with new data.

I tried to debug this issue using Devtools. From what I observe, Svelte reuse tds and change their text contents

The CSS style is injected using Javascript like this,

const tds = tr.getElementsByTagName("td");

tds[1].style.background = "black"

alert box not working properly in JavaScript

<script>
    function fun(){
          let i=document.getElementById("input")
          if(i==="sam")
            {
               alert("welcome SAM")
            }
          else
            {
               alert("welcome user")
            }
        }
      </script>
     
        <input id="input"/>
        <button onclick="fun()">click</click>

if user type input as ‘sam’ it should be follow the if block but every time it execute else part .how to change the condition that when user type ‘sam’ in textbox then only it follow if block or else execute else part

returns doesn’t wait for the cycle to end

I’ve a problem with my code (typescript):

async getAllServers(@Res() response) {
        const servers = await this.serverService.getAllServers();
        let bot = []
        
        servers.map(async server => {
            console.log(server.id)

            bot.push(await this.serverService.getInfo(server.id));

            console.log(bot)
        })
        
        return response.status(HttpStatus.OK).json({
            bot, 
            servers
        })
    }

This function need to return 2 array, but the second array (bot) is always empty.
This is because return is executed before the loop.
How I can execute the return when the loop finish?

Thanks in advance and sorry for bad english.

Removing html tags from API search result in react

The result of search in Wikipedia API in React by the code

const resultsList = results.map((result) => {
    return (
      <div key={result.pageid} className="item">
        <div className="content">
          <div className="header">{result.title}</div>
          {result.snippet}
        </div>
      </div>
    );
  });

which results is search results array, is sth as this image:

enter image description here

What is the best way to remove HTML tags in search result an have sth like this?:

Flower

biological function of a flower is to facilitate reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing

Gennifer Flowers

that he had had a sexual encounter with Flowers. During Bill Clinton’s 1992 presidential election campaign, Flowers came forward to say that she had had

Flowers in the Attic

Flowers in the Attic is a 1979 Gothic novel by V. C. Andrews. It is the first book in the Dollanganger Series, and was followed by Petals on the Wind

I am getting an error that says **Nothing was returned from render**. My code is given below

My code is given below and when I render I get a error saying that Nothing was returned from render and asks me to add a return statement but I don’t have any function to add return statement. So I don’t understand where to add a return statement.

    import reportWebVitals from './reportWebVitals';
    
>   ReactDOM.render(
     <React.StrictMode>
       <App />
    </React.StrictMode>,```

TypeError: setFilteredData is not a function

I’m currently trying to implement a filter component in my app to filter points shown on a map based on the selection of a dropdown box. The error occurs when I choose a selection from the dropdown menu and it occurs within my Filter Component which handles the onChange event to filter the data within my state.
Any help would be greatly appreciated!

enter image description here

App.js

import React from 'react';
import Map from './components/Map/Map'
import Sidebar from './components/Sidebar/Sidebar'
import { useState, useEffect } from 'react';
import "./app.css"

function App() {

  const url = "/data"
  const [data, setData] = useState([])
  const [filteredData, setFilteredData] = useState([])

  useEffect(()=>{
    const fetchData = async () => {
      const jobs = await fetch(url)
      const jobsData = await jobs.json();
      setData(jobsData)
      setFilteredData(jobsData)
    }
    fetchData()
  },[])

  

  return (
    <div className="app">
      <Map data={data} setData={setData} filteredData={filteredData} setFilteredData={setFilteredData}/>
      <Sidebar data={data} setData={setData} filteredData={filteredData} setFilteredData={setFilteredData}/>
    </div>
  );
}

export default App;

Sidebar.jsx

import React from 'react';
import Filter from '../Filter/Filter';
import "./sidebar.css"

function Sidebar(data, setData, filteredData, setFilteredData) {
    
    return (
        <div  style = {{float: "right", height: "97vh", width: "30%"}} className="sidebar" >
            <h1>Job Filters</h1>
            <Filter data={data} setData={setData} filteredData={filteredData} setFilteredData={setFilteredData}>
            </Filter>
        </div>
    );
}

export default Sidebar;

Filter.jsx

import React from 'react';
import "./filter.css"


export function Filter(data, setData, filteredData, setFilteredData) {

    const handleChangePriority = (e) =>{
        if(e.target.value === "all"){
            setFilteredData(data)
        }else{
            const result = [data].filter(job => job.priority === e.target.value)
            setFilteredData(result)
        }
    }

    const handleChangeStatus = (e) => {
        console.log(e.target.value)
    }
    return ( 
        <div className="wrapper">
            <div className="priority">
                <div className="box">
                    <h1>Priority: </h1>
                    <select className="priority-list" id="priority-list"  onChange={handleChangePriority}>
                        <option value="all">All</option>
                        <option value="low">Low</option>
                        <option value="medium">Medium</option>
                        <option value="high">High</option>
                    </select>
                </div>
            </div>
            <div className="status">
                <div className="box">
                    <h1>Status: </h1>
                    <select className="status-list" id="status-list" onChange={handleChangeStatus}>
                        <option value="all">All</option>
                        <option value="completed">Completed</option>
                        <option value="in-progress">In-Progress</option>
                        <option value="assigned">Assigned</option>
                        <option value="unassigned">Unassigned</option>
                    </select>
            </div>
            </div>
        </div>
    );
}

export default Filter;

How to add custom local JS files in Gatsby correctly

I´m a newbie on react and gatsby but i´m working on a little project as practice anda I have a little problem. I want to add a custom JS file to the project (little functions for a calculator on the index). I used Helmet to import them and on develop enviroment is working fine, but once build, is not.

import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"

export default function homePage() {
  return (
    <main>
      <Helmet>
        <script src={withPrefix('/functions.js')} type="text/javascript" />
        <script src={withPrefix('/escritura.js')} type="text/javascript" />
      </Helmet>
}

I´m not sure what I am doing wrong. Someone can help me, please? You can see the project proof version live here:

https://modest-hoover-aac2d1.netlify.app/

In the final version, every input should be filled automatically, but is not happening.