Category: javascript

i have HTML Codes which has table and row with drop down list

<tr>
      <td class="col-sm-3"> 
        <select class="form-control" name="classrooms[]">
                    <option value="" disabled>Select Room</option>
                    @foreach($rooms as $room)
                    <option value="{{$room->id}}">{{$room->description}}</option>
                    @endforeach
                        </select>
                    
             </td>
                <td class="col-sm-3"> 
        <select class="form-control" name="classroomstype[]">
                    <option value="" disabled>Select Room</option>
                    @foreach($rooms_type as $type)
                    <option value="{{$type->id}}">{{$type->description}}</option>
                    @endforeach
                        </select>
                    
             </td>
            <td class="col-sm-3">
                <input type="number"  class="form-control" name="classroomsnumber[]" />
                 @error('classroomsnumber')
                         <span class="invalid-feedback" role="alert">
                         <strong>{{ $message }}</strong>
                        </span>
                       @enderror
            </td>
              <td class="col-sm-3"> 
                <a href="javascript:void(0);" class="btn btn-primary addmore" ><i class="fa-solid fa-plus"></i></i></a>
                <a  href="javascript:void(0);" class="btn btn-danger remove" ><i class="fa-solid fa-circle-minus"></i></a>

            </td>
    </tr>

and Jquery for above HTML code to make new Row Dynamically

<script>
    $(document).ready(function() {
  $(".addmore").on('click',function(){

        data ='<tr>'+ $(this).closest('tr').html() +"</tr>";
        $('#myTable').find('tbody:last').append(data);
});
 
    $(".remove").on('click',function(){
        $(this).closest('tr').remove();
});
});
</script>

it work what i want , but only the first button work to make new rows not every row button work and also remove work only “One Time”.
here is the screenshot

So I’m building my first vue project and I’ve been trying to pass route parameters to an axios get request and it’s not working.
this is the code for the page, it gets rendered after the user clicks on a dynamic link in a table of tests

<template>
  <v-app>

    <app-navbar />

    <v-main>
        <h3>test {{$route.params.name}}, {{$route.query.status}},{{$route.query.tag}}</h3>
        <h3>{{items}}</h3>
    </v-main>
  </v-app>
</template>

<script>
import appNavbar from '../../../components/appNavbar.vue';
import axios from "axios";
export default {
  components : {appNavbar},
  name: "App",
  data() {
    return {
      items: [],
    };
  },
  async created() {
    try {
      const res = await axios.get(`http://localhost:3004/tests`,{ params: $route.params.name });
      this.items = res.data;
    } catch (error) {
      console.log(error);
    }
  },
};
</script>

<style lang="scss" scoped>

</style>

how can i pass the route params to the axios get function ?

I am creating a 2D platformer from scratch using Javascript and HTML. I have the tile maps, graphics, player movement, basic enemies that move back and forth, collision detection for blocks and enemy on player etc. However I need to add some level of complexity, and this needs some “AI”. I already have a flying enemy that follows my player at a slow speed using the player’s x y position and constantly updates to reach the player no matter where they move, however this flying enemy goes through blocks, and is too simple. I want to add a flying AI where it can not see my player until it comes into “visual” range, so floor tiles obstruct the range of the AI, and the AI will once it sees the player it will begin to follow him. The AI needs to avoid floor tiles, and as soon as it can no longer see the player it travels to the last known player position, then checks one last time if it can see the player, then return back to it’s starting position, or even go into a patrol mode where it spends a short time in the area “floating around”.

I have looked into some solutions and alot of people are suggesting an A* algorithm where I create a navmesh grid for my A* where it has the floor tile locations and once the player becomes visible a function is called and the A* uses the current players location and updates in a couple second intervals to not lag or increase the time it takes to run the game loop.

Would there be an easier way to implement this, or some easy things to add to get a better “complexity”? Any tips or tricks?

I also have many versions of the game with OOP tile maps, 1D array tileMap, 2D array tileMap, OOP created enemies, non OOP created enemies etc. What would be best to use with a A* or another type of algorithm where I need smart, efficient “AI”.

Thanks.

I want to use this pattern in my project

 isCorrectCode(code) {
    const codeRegex = new RegExp(/^(?! s)[p{L}/\|.,";:¿()@#$%^&*'`+-— ?!_{}()>=[]0-9]+$/, 'gu');
   return codeRegex.test(code);
}

but I got the next issue

can anyone know how this can be fixed?

in all cases all the icons are enable. I want to enable the icons which make sense and disable the other icons`

<p-pickList (click)="refresh();" [source]="available" [target]="selected" 
   sourceHeader="Available" targetHeader="Selected" [responsive]="true">
    <ng-template let-items pTemplate="item">
        <div class="ui-helper-clearfix">
            <div>{{item.type}}</div>
        </div>
    </ng-template>
</p-pickList>

`

We have a website with a background video. And have an issue, when a user is on Low power mode on IOS devices (iPhone, Mac, etc.).

Is it possible to handle only low power mode and set fallback image instead of video with play button?

I saw a variant with a suspend event, but it fired also when the video fully loaded, so it’s not a correct solution for us.

I have a table a such

I’m getting the dropdown values using JavaScript as such :

let selectElementEnv = document.getElementById('env');
let optionNamesEnv = [...selectElementEnv.options].map(o => o.text);
console.log(optionNamesEnv );

Console output is

[ '100', '900']

To get the Depot values

let selectElementDepot = document.getElementById('Depot');
let optionNamesDepot = [...selectElementDepot.options].map(o => o.text);
console.log(optionNamesDepot );

Console output

[ 'AAA', 'AbA', 'AAA', 'AbA', 'ABC', '']   

To get the Articles values

let selectElementArticles = document.getElementById('Articles');
let optionNamesArticles = [...selectElementArticles .options].map(o => o.text);
console.log(optionNamesArticles );

Console output

[ 'Capacitor', 'Diode', 'mike', 'modem', '']   

How could i transform this outputs to get this json format ?

var myjson = [
{
"env": "100 ",
"depot": " AAA",
"articles": "Capacitor"
}, {
"env": "100 ",
"depot": "AbA",
"articles": "Diode"
}, {
"env": "100 ",
"depot": " AAA",
"articles": "cable"
},{
"env": "100 ",
"depot": "AbA",
"articles": "mike"
}, {
"env": "100 ",
"depot": "ABC",
"articles": "modem"
}, {
"env": "900",
"depot": "",
"articles": ""
}
 }];

I’m trying to make a random slide show using react hooks and set interval. How can I make a transition/ animation between the images?

thank you!

    const imgArray = [img1, img2,img3,img4]
    const [slideImg, setSlideImg] = useState(imgArray[utilService.getRandIntInclusive(0, imgArray.length - 1)])
   
    useEffect(() => {
        const intervalId = setInterval(() => {
            setSlideImg(imgArray[utilService.getRandIntInclusive(0, imgArray.length - 1)])
        }, 3000)

        return function cleanup() {
            clearInterval(intervalId)
        }
    })

    return (
        <section className='filter flex'>
            <img src={slideImg} alt="" ></img>
          
        </section >)
}

I have some RegExp from TinyColor for CSS unit and integers

// <http://www.w3.org/TR/css3-values/#integers>
const CSS_INTEGER = '[-\+]?\d+%?';

// <http://www.w3.org/TR/css3-values/#number-value>
const CSS_NUMBER = '[-\+]?\d*\.\d+%?';

I want to do something similar for angles:

// <https://www.w3.org/TR/css3-values/#angle-value>
const CSS_ANGLE = '[-\+]?\d*\.\d+(deg|rad|grad|turn)?';

const angleRegExp = new RegExp(CSS_ANGLE);

// test
console.log(angleRegExp.exec('hsl(120deg 100% 50%)'))

How can I make it work?

please I have information coming from some meters and I wanna program an alarm of this: Weekly consumption (n+1) > x% weekly consumption(n) with javascript
anyone helps me with this

So, I’m using fullpage.js jquery for scrolling on my website.
Each scroll section is divided in hashes, like index.html/#firstPage etc.
I’ve made a fixed scroll to top button, but I wanna make him disappear if hash equals #firstPage.
I’ve made a Js script too, but it doesn’t work. Any ideas?

mybutton = document.getElementById("scroll_top_button");

var stringHash = window.location.hash;
console.log(stringHash); // Returns hash and it works
function hashDisappear() {
  if (stringHash == "#firstPage") {// this thing doesn't work at all.
    mybutton.style.display = "none";
  } else {
    mybutton.style.display = "block";
  }
}

I am developing a single page application using Vanilla Js. My code contains a function which utilizes fetch using a proxy to get data from a site. But, the problem is that after I open the single page application (index.html file) and come back to it later it redirects to the website with the url specified in fetch. For example, if this is my Js function

...
function getData() {
    fetch('https://young-waters-99383.herokuapp.com/https://example.com/thisFile.md')
    .then(response => response.blob())
    .then(blob => blob.text())
    .then(data => {
        let myDiv = document.querySelector('#myDiv');
        myDiv.innerHTML = data;
    }
}
...    

then the website now goes to https://example.com/thisFile.md after I leave it open and return to it after some time. What could be the problem?

I have one question regarding Node js

Method 1:

app.post('/password-reset', resetPassword)

function resetPassword() {
// code here
}

vs

Method 2:

app.post('/password-reset',  function(req, res){
// code here
});

I understand that both are doing the same thing but why do we need method 1?

Is that any scenario that I must use method 1?

I have a php link that returns below response.

var count = 0;
var movies = ["1917","Saving Private Ryan", "Titanic"];
var years = {
    "1997": "Titanic",
    "1998": "Saving Private Ryan",
    "2019": "1917",
};
for (var i in years) {
    if (i == ' ') r_space = years[i];
}

I am using BS4 in Python to get this response but I don’t know how to parse it correctly so I can read content in var movies and var years separately. Loading to JSON obviously gives me an error. How can I get the values of var movies and var years separatley in Python? I am a beginner so would appreciate any help.

I am totally okay to devaite from BS4 as well.

Is there anyway to write a regular expression to check the number fall in between 1402 to 1423strong text