Category: javascript

I have code below. We post room name with ajax to url /room-api

function getCreatedRoomName(x){

  $.ajax({
    type: "POST",
    url: "/room-api",
    data: { roomname: x },
    success: function(data) {
    },
    error: function(jqXHR, textStatus, err) {
    alert('text status '+textStatus+', err '+err)
    }
    });

  return x;
}

app.js

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));


var room_name;

app.post('/room-api', isLoggedIn, function(req, res){
  room_name = req.body.roomname;
  console.log(room_name);
});

Then we receive that data with app.post as you can see above. How can I create a new app.get with created name? I tried this.

app.post('/room-api', isLoggedIn, function(req, res){
  room_name = req.body.roomname;

  app.get(`/${room_name}`, isLoggedIn, function(req, res){
      res.redirect(`/${room_name}`);
  });

  console.log(room_name);
});

But it doesn’t work.

I get all movie datas from Firebase and also i get score of the movies. If the score of the movie is higher than 70, then i will change color of the id as “deepskyblue”, if it is 50 or higher it will be “orange” and lastly if it is lower than 50 it will be “crimson”(red). When i do this, it only changes my first movie’s id’s color. But i wanna change all of them. How can i do this?

My Website

Console.log(i)

  var movieNo = 0;
let html = '';
var body = document.getElementById('editor');
var body2 = document.getElementById('week');

function AddItemsToTable(name, score, img, id) {
  var movies = `<div class="content"><img src="${img}" ><p><a href="Admin.html?movieId=${id}">${name}</a></p> <p> <i class="fa fa-star" id="star"></i>&nbsp;<a class="scoretxt">${score}</a> </p> </div>`;
  html = movies;

  body.innerHTML += html;
  body2.innerHTML+=html;

}


        function AddAllItemsToTable(TheMovies){
            movieNo=0;
            var counter=0;

            TheMovies.forEach(element => {
              if (counter===6) {
                return;
              }
                AddItemsToTable(element.movieName, element.movieScore, element.movieImage, element.movieId);
                var i = document.getElementsByClassName("fa fa-star")[element.movieId];
                console.log(i);
                if (element.movieScore>=70) {
                  i.style.color= "deepskyblue";//good movie

                }
                  else if (element.movieScore>=50) {
                    i.style.color= "orange";//not bad
                  }
                  else {
                    i.style.color="crimson";//bad movie
                  }

                counter++;

        });

      }

        function getAllDataOnce(){
            const dbRef=ref(db);
            get(child(dbRef,"Movies"))
                    .then((snapshot)=>{
                        var movies=[];
                snapshot.forEach(childSnapshot => {
                    movies.push(childSnapshot.val())
                });
                AddAllItemsToTable(movies);
            });
        }
            window.onload= getAllDataOnce;

          <div class="body" id="body">

              <div class="baslik">Opening This Week</div>
              <div class="baslik2"><a href="series.html">See all</a></div>
              <div id="week">

              </div>
                <div class="baslik">Editor's Picks</div>
                <div class="baslik2"><a href="movies.html">See all</a></div>
<div id="editor">

</div>


</div>

I am trying to write a web page which can do some edit to a photo ,like brightness . And I choose a library called Caman.js to achieve my goal .But when I edit the brightness of the photo with this.brightness(…).render() ,I find that the picture could not return to its original state,it will become pure white or black , It seems that the picture has lost a lot of information .

And I find a tutorial on youtube ,and it have the same problem (https://codepen.io/bradtraversy/pen/qoJZBy ). But the example on the official website( http://camanjs.com/examples/ ) is good ,want to know how to do that .

<input type="range" min="0" max="20" value="10" id="slider_bright"/>

<script>
Caman("canvas",image_src,() => {
    this.render();
  })

const slider_bright = document.getElementById('slider_bright')
var pre_slider_bright_value = 20;

slider_bright.addEventListener('input',()=>{
    Caman("canvas",image_src,function () {
        if(pre_slider_bright_value<slider_bright.value*1){
            //decrease brightness 
            this.brightness(slider_bright.value*1 - pre_slider_bright_value).render();
        }else{
            //increase brightness
            this.brightness(slider_bright.value*1 - pre_slider_bright_value).render();
        }
        pre_slider_bright_value = slider_bright.value    
      })
})
</script>

i want to render below JSON to the image shown

let finalSplit = [
    {
      start: "73",
      end: "76",
      splits: [
        {
          word: "Now",
          start: "73",
          color:"#FF6262",
          name:"extra",
          end: "76",
        },
      ],
    },
    {
      start: "27",
      end: "72",
      splits: [
        {
          word: "GitHub Actions",
          start: "31",
          name:"sub1",
          color:"#DFF652",
          end: "45",
        },
        {
          word: "the GitHub Actions “New Workflow” experience.",
          start: "27",
          name:"main",
          color:"#62FF8E",
          end: "72",
        },
        {
          word: "GitHub",
          start: "31",
          name:"sub2",
          color:"#9483FF",
          end: "37",
        },
      ],
    },
  ];
  

i tried to loop each array and render but since it format it have duplicate not able to render aggregated version

const Mark = () => {
    
    return (
        <>
        {
            finalSplit.map((i)=>{
                return (
                    <div>
                        i.split.map((j)=>{
                            <div>{j.text}</div>
                        })
                    </div>
                )
            })
        }
        <>
    );
}

need to some how generate other structure
text : “announcing improvements to the GitHub Actions “New Workflow” experience. Now, when you want to create”
and each place we get offsets also

I am just starting my journey as a Front-End Developer. I taught myself Html/CSS and JavaScript, will that be enough to apply for my first position?
I am currently working on projects and my portfolio, my roadmap for myself is Html, CSS, JavaScript, React, Typescript, nodejs, python, graphQl, and AWS. I haven’t thought of what database I want to work with yet. But I am looking for someone to just talk too about what’s next.

I am developing a Woocommerce website using wordpress and Neve wordpress theme. I am also using plugin wp-configurator. On desktops, everything is working fine I can add product to the cart and everything is working correctly. But on mobile, afer I choose configuration and tap on the button “Add to cart”, I just see the hover of the button but nothing happens.
What I already tried:

• switch to another theme
• reset permalinks
• disable all plugins (I kept just woocoommerce and wp-configurator, after I disabled also wp-configurator, the button started to work)

Any suggestions, please?

I’m trying change styles of element by clicking anywhere on the screen, but it’s not working. can anyone help me out. thankyou.

   <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
    </style>
 
   <p>Click to toggle</p>
   <div id="myDIV">This is my DIV element.</div>
    
    <script>
    window.addEventListener('click', 
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.width === "100%") {
        x.style.width = "10%";
      } else {
        x.style.width = "100%";
      }
    }
    </script>

I am trying to deploy this site to netlify: https://github.com/Koda-Pig/joshkoter.com
But I am getting this error:

10:02:31 AM: Module not found: Can't resolve '../styles/home.module.css' in '/opt/build/repo/pages'
10:02:31 AM: > Build failed because of webpack errors

My next.config.json file looks like this:

module.exports = {
   reactStrictMode: true
 }
 
 const withVideos = require('next-videos')
 
 module.exports = withVideos()

According to Next.js website, there is built-in support for CSS modules, and Netlify doesn’t seem to have a problem with any of the other CSS modules I’ve created, so I don’t understand why there is a a webpack error.

I have tried specifying a CSS loader in next.config.js like this:

module.exports = {
   reactStrictMode: true,
   module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
 }
 
 const withVideos = require('next-videos')
 
 module.exports = withVideos()

I also tried with this config:

module.exports = {
   reactStrictMode: true,
   module: {
    rules: [
      {
        test: /.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
 }
 
 const withVideos = require('next-videos')
 
 module.exports = withVideos()

But I got the same error message. This is my first time deploying a next.js site to Netlify, so forgive me if I am missing something obvious.

Any help would be greatly appreciated.

I have an object that looks like below

const tableData = [
    {
        
        "Location": "London",
        "Status": "Unknown"
    },
    {
        
        "Location": "Delhi",
        "Status": "Reachable"
    },
    {
        
        "Location": "Berlin",
        "Status": "Unknown"
    },
    {
        
        "Location": "Tokyo",
        "Status": "Busy"
    },
]

Now I want to create a 2D array which will hold this information in a certain way. Here is my code below

const statusOrder = {"Reachable": 0, "Busy": 1, "Unknown": 2}
let statusOrderInfo = Array(Object.keys(statusOrder).length).fill([]);
for(let i=0; i< tableData.length; i++) {
    const status = tableData[i]["Status"].trim()
    const statusIndex = statusOrder[status]
    statusOrderInfo[statusIndex].push(tableData[i])
}
console.log(statusOrderInfo)

As you can see I want each item of the tableData object to be in a certain index of the 2D array. So the item that contains Status as Reachable should be at index 0, the item that contains the Status as Busy should be at index 1 and so on.

So the final output should look like

[
   [
      {
         "Location":"Delhi",
         "Status":"Reachable"
      }
   ],
   [
      {
         "Location":"Tokyo",
         "Status":"Busy"
      }
   ],
   [
      {
         "Location":"London",
         "Status":"Unknown"
      },
      {
         "Location":"Berlin",
         "Status":"Unknown"
      }
   ]
]

But I get a wrong output on running the above code even though I am targeting the correct index. What’s wrong in my approach?

I have a clear command that is implemented like this

async execute(interaction) {
  const amount = interaction.options.getInteger('amount')
  
  if (interaction.member.permissions.has(Permissions.FLAGS.ADMINISTRATOR)) {
    if (amount <= 100) {
      interaction.channel.bulkDelete(amount)
      .then(console.log(`Cleared ${amount} messages`))
      .catch(console.error)
      await interaction.reply({ content: `Cleared `${amount}` messages`, ephemeral: true })
    } else {
      interaction.channel.bulkDelete(100)
      await interaction.reply({ content: `Cleared `100` messagesnIt seems like you've somehow bypassed the 1-100 integer limitn>100 clear is dangerous and won't be implemented (learning from past mistake)`, ephemeral: true })
    }
  } else {
    await interaction.reply({ content: `You can't use the `clear` command. It is restricted to admins-only for now.`, ephemeral: false })
  }
}

Before I’ve tried to reply with an ephemeral response showing buttons labeled Yes/No asking if they really want to clear messages but I don’t know how to store the numbers so after pushing the button it would fail (and I lost the code since I didn’t commit that piece of code)

How can I make it so it could store the clear amount somewhere somehow that can’t be overwritten accidentally when someone else use the clear command somewhere else so after pushing the button then it will actually clear (since the function that handles button presses and the function that handles commands execution are 2 different funcs)

Any better idea than this is appreciated (btw im not a native English speaker so it might sounds weird here and there)

I have created custom tree view using ui and li.
I want to add drag and drop on top of it without any custom plugin. Any child can be dragged in inside any li node.

like in this image 3rd parties can drag into Asset Management as child.

I have used $("$id").sortable(); but it’s just working in single child level only, i want to add it on multilevel.

example : http://wwwendt.de/tech/fancytree/demo/sample-ext-dnd.html

I have a C# code that check’s for falseNumber on regex basis:

public bool falseNumber(string num)
    {
        try
        {
            num = num.Replace("-", "");
            string re = @"(?x)
            ^
            # fail if...
            (?!
                # repeating numbers
                (d) 1+ $
                |
                # sequential ascending
                (?:0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)|9(?=0)){5} d $
                |
                # sequential descending
                (?:0(?=9)|1(?=0)|2(?=1)|3(?=2)|4(?=3)|5(?=4)|6(?=5)|7(?=6)|8(?=7)|9(?=8)){5} d $
            )
            # match any other combinations of 6 digits
            d+
            $
        ";
            return Regex.IsMatch(num, re);
        }
        catch (Exception y) { return true; }
    }

I need this code to be converted to JS, so I have written:

const falseNumber = (num) =>
{
  num = num.replaceAll("-", "");
  let re = /(?x)^(?!(d)1+$|(?:0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)|9(?=0)){5}d$|(?:0(?=9)|1(?=0)|2(?=1)|3(?=2)|4(?=3)|5(?=4)|6(?=5)|7(?=6)|8(?=7)|9(?=8)){5}d$)d+$/
  return re.test(num);
}

But that gives me error:

VM46:5 Uncaught SyntaxError: Invalid regular expression:
/((?x)^(?!(d) 1+
$|(?:0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)|9(?=0)){5} d
$|(?:0(?=9)|1(?=0)|2(?=1)|3(?=2)|4(?=3)|5(?=4)|6(?=5)|7(?=6)|8(?=7)|9(?=8)){5} d $)d+$)/: Invalid group
at falseNumber (:5:12)
at :1:1

Any help would be highly appreciated.

Thank you.

const falseNumber = (num) =>
{
  num = num.replaceAll("-", "");
  let re = /(?x)^(?!(d)1+$|(?:0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)|9(?=0)){5}d$|(?:0(?=9)|1(?=0)|2(?=1)|3(?=2)|4(?=3)|5(?=4)|6(?=5)|7(?=6)|8(?=7)|9(?=8)){5}d$)d+$/
  return re.test(num);
}


console.log(falseNumber('33-3333333-33'));

I am a beginner in JS so can’t resolve. Please help.
I can’t change the button background color.

Here’s the code ->

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">`enter code here`
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS Game</title>
    
        <link rel="stylesheet" href="style.css">
    
    </head>
    
    <body>
        <button class="btn1" onclick="change()"></button>
    </body>
    
    <script>
        function change() {
            document.getElementsByClassName('btn1').style.
            backgroundColor="lightblue";
        }
    </script>
    
    </html>

I’m newbie to the JS, I want to know what the below regex pattern will do

/[0-9]{7}$/

in Python, you can get a list like this (array in JavaScript)

a = ["one", "two", "three"]
print(a[:]) # ["one", "two", "three"]

I’m wondering how I can do this too but in JavaScript. If it is possible, please tell me 🙂