Attachment

I have a bootstrap react sidebar(check attachment), but how would I go about aligning few items bottom-up way instead of top-down? In the attachment, I would like bottom two items(FAQ and Contact) lined up to bottom of screen.

<Nav className="flex-column pt-2">
      <p className="ml-3">Menus</p>

      <Nav.Item>
        <Nav.Link href="/">
          <FontAwesomeIcon icon={faTable} className="mr-2" />
          Dashboard
        </Nav.Link>
      </Nav.Item>

      <Nav.Item>
        <Nav.Link href="/">
          <FontAwesomeIcon icon={faWarehouse} className="mr-2" />
          Inventory
        </Nav.Link>
      </Nav.Item>

      <Nav.Item>
        <Nav.Link href="/">
          <FontAwesomeIcon icon={faTruck} className="mr-2" />
          Create Order
        </Nav.Link>
      </Nav.Item>

      <SubMenu
        title="Manage"
        icon={faCopy}
        items={["Sales", "Employees"]}
      />

     *//I want to put these two to bottom*
      <Nav.Item>
        <Nav.Link href="/">
          <FontAwesomeIcon icon={faQuestion} className="mr-2" />
          FAQ
        </Nav.Link>
      </Nav.Item>

      <Nav.Item className="align-items-end">
        <Nav.Link href="/">
          <FontAwesomeIcon icon={faPaperPlane} className="mr-2" />
          Contact
        </Nav.Link>
      </Nav.Item>


    </Nav>

im trying to upload a image to firebase but im not sure of what im doing wrong when I run this I get error service is not available im not sure what im doing wrong im just following the documentation. I would really appreciate if someone took a look at this and tell me if im doing something wrong

 <script type="module">
    

    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries
      //Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-analytics.js";
    // Import the functions you need from the SDKs you need
    import { getStorage , ref , uploadBytes } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-storage.js";
    
     
    function run(){

        // Your web app's Firebase configuration
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
        apiKey: "my details",
        authDomain: "my details",
        databaseURL: "my details",
        projectId: "my details",
        storageBucket: "my details",
        messagingSenderId: "my details",
        appId: "my details",
        measurementId: "my details"
        };
    
        // Initialize Firebase
        const firebaseApp = initializeApp(firebaseConfig);
        
        const storage = getStorage(firebaseApp);
        const storageRef = ref(storage, `upcomingTasks/hi.jpg`);


        // 'file' comes from the Blob or File API
        const file = document.getElementById("myimg").files[0];
        console.log("running")

        uploadBytes(storageRef, file).then((snapshot) => {
            console.log('Uploaded a blob or file!');
        });

        
    }
    

    window.onload(run())



</script>

I created a discord.js bot that works all the time. In the terminal where the bot is running I would like the running time of the bot since it started up to be displayed below “I am connected !”.

Here is part of my console code :

client.on('ready', () => {
      console.log('I am connected !');

Do you have any ideas ?

Thank you in advance for your help.

I’m trying to pass in some data I’ve received from my POST request to be utilized inside my GET request as shown below:

app.post('/genre/non-fiction', (req, res, next) => {
  let received_data = req.body.myData;
});   

app.get('/genre/non-fiction/:id/read', (req, res) => {
   res.send("Hello World");
});

I’ve found this solution from this article that explains how to pass variables from one middleware to another using next(), and so I tried something like this:

app.post('/genre/non-fiction', (req, res, next) => {
  let received_data = req.body.myData;
  req.pass_data = received_data;
  next();
});    

// I've also tried passing the "recieved_data" variable into the middleFunction, but that doesn't do anything either.

function middleFunction(req, res, next) {
    console.log(req.pass_data);
    next();
}

app.get('/genre/non-fiction/:id/read', middleFunction, (req, res) => {
    res.send(req.pass_data);
});

When attempting to test it out, nothing shows up on the page. I’ve also console.logged the pass_data variable inside the GET request, but it returns undefined.

Any help would be greatly appreciated!

I am new to threejs and implementing shaders in it. I brought a fun shader in but I am having issues with displaying it. I believe it is related to the variable “len” in the code but I am not sure. Here is the link to the codepen https://codepen.io/Yerbs/pen/eYWgevO.Any Help would be appreciated
This is the frag shader

fragmentShader: `
uniform vec2 resolution;
uniform float time;

const int AMOUNT = 12;
         
        void main() {
    vec2 coord = 20.0 * (gl_FragCoord.xy - resolution / 2.0) / min(resolution.y, resolution.x);

    float len;

    for (int i = 0; i < AMOUNT; i++){
        len = length(vec2(coord.x, coord.y));

        coord.x = coord.x - cos(coord.y + sin(len)) + cos(time / 9.0);
        coord.y = coord.y + sin(coord.x + cos(len)) + sin(time / 12.0);
    }

    gl_FragColor = vec4(cos(len * 2.0), cos(len * 3.0), cos(len * 1.0), 1.0);
        }
      `
    });

I have tested out previous code so I know it is related to the fragment itself.

What I want to solve

I’m building a service with Nuxt and Rails, but when I try to display events in the Vuetify calendar, I get an error. There seems to be a problem with the display format, but I’ve taken care of those issues. Specifically, I’m saving them in Rails as YYYY-MM-DD hh:mm. Why doesn’t it work? In the worst case scenario, I’m thinking of rebuilding the Rails table and changing it from datetime related to a string column.

Error

Error: undefined is not a valid timestamp. It must be a Date, number of seconds since Epoch, or a string in the format of YYYY-MM-DD or YYYY-MM-DD hh:mm. Zero-padding is optional and seconds are ignored.

Code

・
・
・
  mounted () {
    this.$axios.$get(url.SCHEDULE_API)
      .then((response) => {
        this.$store.commit('schedule/responseEvent', [{
          id: response.id,
          start: response.start,
          end: response.end,
          color: response.color
        }])
        console.log(response) 
      })
  },
・
・
・

console.log(response)

0:
color: "#2196F3"
created_at: "2022-02-18T21:00:11.936+09:00"
end: "2022-02-18T22:00:00.000+09:00"
id: 2
start: "2022-02-18T22:00:00.000+09:00"
updated_at: "2022-02-18T21:00:11.936+09:00"
[[Prototype]]: Object

store

export const state = () => ({
  events: [],
  selectedEvent: {}
})

export const mutations = {
  responseEvent (state, response) {
    state.events = response
  }
}

Rails

schema

  create_table "schedules", force: :cascade do |t|
    t.datetime "start"
    t.datetime "end"
    t.string "color"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

Data stored in Rails

 #<ActiveRecord::Relation [#<Schedule id: 2, start: "2022-02-18 13:00:00", end: "2022-02-18 13:00:00", color: "#2196F3", created_at: "2022-02-18 12:00:11", updated_at: "2022-02-18 12:00:11"

What I tried.

・I decided to change the format on the Nuxt side and save it.

① Using new Date
No error, but the value is not correct

  mounted () {
    this.$axios.$get(url.SCHEDULE_API)
      .then((response) => {
        this.$store.commit('schedule/responseEvent', [{
          id: response.id,
          start: new Date(response.start),
          end: new Date(response.end),
          color: response.color
        }])
        console.log(response)
      })
  },

conosle

　“`
color: undefined
end: Invalid Date
id: undefined
start: Invalid Date

I am relatively new to React, so probably it will be an easy answer for some of you.

I have bumped into a little problem, I have solved it, but it doesn’t seem to be perfect as React Eslint is not happy.

My web-app is using React-Redux at the front and Node-Express-Mongo at the back. So, I have a functional component (screen/page), and whenever logged in user visits it, it needs to update user data state in Redux store to make sure it matches current data in database.

However, not registered and not logged in users also can visit that page, then obviously that database check is not needed.

I get user data as userInfo object from Redux:

const userLogin = useSelector((state) => state.userLogin);
const { loading: loadingUser, error: errorUser, userInfo } = userLogin;

Then, when component renders useEffect() hook shoots, I dispatch an action to get user data from backend (DB) using JWT token.

useEffect(() => {
    //update user details in case if access to restricted services changes
    if (userInfo && userInfo.token) {
      dispatch(refreshUser(userInfo.token));
    }
    // eslint-disable-next-line
  }, []);

As you can see I kept dependency array empty, and disabled it for eslint to keep Mr Eslint happy.

So far this is the only way I can make it work. If I put userInfo into dependency array – it creates infinite loop, because as we know {}==={} always returns false.

If I get rid of userInfo from useEffect() and keep just userInfo.token, but then it creates an error userInfo is undefined whenever user is not logged in

Of course I can populate Redux store with some initial state of empty userInfo or empty userInfo.token, but that seems to be unnecessary hassle. I also tried to put useEffect inside if (userInfo){} statement, but that was just silly, as useEffect() should stay at the top level…

As it is now, it does what I need it to do – runs just once as the component (page) loads.

So my question is:
Is it OK to leave it like that or there must be some elegant solution?

I have the following main.jsx file in my react app which displays a map. Here I am initially setting the latitude variable of my marker, and then I have a trigger function to change it every five seconds. This works as i have console logged the values each time.

However, it isn’t moving the marker on the map to reflect the new latitude value. Any ideas how i can keep refreshing the marker on the map when the latitude value changes?

const location = {
    lat: 53.41,
    lng: -2.89,
};

export const ChatPage = () => {
    const { name } = useParams();
    const ws = useRef();
    const MINUTE_MS = 5000;

    //initial latitude/longitude values
    let lat = 53.41;
    let long = -2.89;

    //triggers change latitude every 5 seconds
    useEffect(() => {
        const interval = setInterval(() => {
            lat = lat + 50;
        }, MINUTE_MS);

        return () => clearInterval(interval);
    }, []);


    return (
        <main className='chat-wrapper'>
            <MapSection location={location} zoomLevel={18} markerLat={lat} markerLong={long} />{' '}            
        </main>
    );
};

The map section component code is in this file, it gets the markerLat and markerLong and should update the MyNewMarker component:

const Map = ({ location, zoomLevel, markerLat, markerLong }) => (
    <div className='map'>
        <div className='google-map'>
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'keyid' }}
                defaultCenter={location}
                defaultZoom={zoomLevel}>
                <MyNewMarker lat={markerLat} lng={markerLong} text={'A'} />
            </GoogleMapReact>
        </div>
    </div>
);

export default Map;

Below is MyNewMarker component:

export default class MyNewMarker extends Component {
    static propTypes = {
        text: PropTypes.string,
    };
    static defaultProps = {};
    shouldComponentUpdate = shouldPureComponentUpdate;

    render() {
        return (
            <div style={greatPlaceStyle}>
                <img src={image1} alt='image1' />
            </div>
        );
    }
}

This is the code i have so far:

i have set up the function to detect the input is a valid email input.

i have set up the code to print an error message when there is no input.

No message is needed if email is correct, only when email is invalid.

"use strict";
function validEmail(email) {
    var re =
/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.
[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

function validate() {
  var errorMsg = "";
  var emailboxInput = document.getElementById("email");
  var emailbox = emailboxInput.value.trim();
  emailboxInput.value = emailbox;


  if (emailbox === "") {
    errormsg += "Email cannot be empty.<br>";
  }
  if (emailbox === (!validEmail(email))
   {
    }
else {
      errorMessage += "Provide a valid email address<br>";
    }

    else {
      errorMsg += "Provide a valid email address<br>";
    }
  return errorMsg;
}

I’m building a component on my project, which is actually getting all the data and console logging it, but here’s the problem: Inside my array of clients, i have some objects (address, documents, …), and i can’t manage to call them on my table.

My script:

<script>
export default {
  data: () => ({
    clients: [],
  }),

  methods: {
    getClients() {
      this.$api
        .get("/api_v1/clientes", {
        })
        .then((response) => {
          this.clients = response.data[0];
          console.log(response.data);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },

  mounted() {
    this.getClients();
  },
};
</script>

My table (inside ):

 <tbody>
          <tr v-for="client in clients" v-bind:key="client.id">
            <td>{{ client.id }}</td>
            <td>{{ client.name }}</td>
            <td>{{ client.email }}</td>
            <td>{{ client.documents.cpf || client.documents.cnpj }}</td>
            <td>{{ client.documents.celular }}</td>
            <td>{{ client.status }}</td>
            <td v-if="client.address">
              {{ `${client.address.localidade} / ${client.address.uf}` }}
            </td>
            <td v-else>-</td>

            <td>
              <a :href="`/see-client/${client.id}`"
                ><i class="icon-magnifier"></i
              ></a>

              <i class="icon-check" style="color: green"></i>
              <i class="icon-close" style="color: red"></i>
            </td>
          </tr>
        </tbody>

My controller:

  public function index(Request $request)
    {
        $data = [
            'pag' => 'All clients',
            'link' => '/'
        ];

        return view('clients.index', $data);
    }

The data:

Someone have a clue of a different approach i could have? I’m using Vue2. It’s one of my first big projects, so previously sorry for any rookie mistake. Thanks for your time and help!

I’m using this js (https://github.com/SupernovaIC/scrollable-tabs-bootstrap-5) to scroll tabs in bootstrap, on mobile devices. The problem is that i need to use them twice on the same page, so when I click on the arrows the two tabs scroll. How can i make a condition, so that only one of them scrolls?

<div class="w-100 pt-3">
        <div class="scroller scroller-left float-left mt-2"><i class="fa fa-chevron-left"></i></div>
        <div class="scroller scroller-right float-right mt-2"><i class="fa fa-chevron-right"></i></div>
        <div class="wrapper-nav">
            <nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
                <a class="nav-item nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="public"
                    aria-expanded="true">Tab1</a>
                <a class="nav-item nav-link" href="#tab2" role="tab" data-toggle="tab">Tab 2</a>
                <a class="nav-item nav-link" href="#tab3" role="tab" data-toggle="tab">Tab 3</a>
                <a class="nav-item nav-link" href="#tab4" role="tab" data-toggle="tab">Tab 4</a>
                <a class="nav-item nav-link" href="#tab5" role="tab" data-toggle="tab">Tab 5</a>
                <a class="nav-item nav-link" href="#tab6" role="tab" data-toggle="tab">Tab 6</a>
                <a class="nav-item nav-link" href="#tab7" role="tab" data-toggle="tab">Tab 7</a>
                <a class="nav-item nav-link" href="#tab8" role="tab" data-toggle="tab">Tab 8</a>
                <a class="nav-item nav-link" href="#tab9" role="tab" data-toggle="tab">Tab 9</a>
                <a class="nav-item nav-link" href="#tab10" role="tab" data-toggle="tab">Tab 10</a>
                <a class="nav-item nav-link" href="#tab11" role="tab" data-toggle="tab">Tab 11</a>
                <a class="nav-item nav-link" href="#tab12" role="tab" data-toggle="tab">Tab 12</a>
                <a class="nav-item nav-link" href="#tab13" role="tab" data-toggle="tab">Tab 13</a>
                <a class="nav-item nav-link" href="#tab14" role="tab" data-toggle="tab">Tab 14</a>
                <a class="nav-item nav-link" href="#tab15" role="tab" data-toggle="tab">Tab 15</a>
                <a class="nav-item nav-link" href="#tab16" role="tab" data-toggle="tab">Tab 16</a>
            </nav>
        </div>
        <div class="tab-content p-3" id="myTabContent">
            <div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab"
                aria-expanded="true">
                This is the content of Tab 1...
            </div>
            <div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 2...
            </div>
            <div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 3...
            </div>
            <div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 4...
            </div>
            <div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 5...
            </div>
            <div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 6...
            </div>
            <div class="tab-pane fade mt-2" id="tab7" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 7...
            </div>
            <div class="tab-pane fade mt-2" id="tab8" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 8...
            </div>
            <div class="tab-pane fade mt-2" id="tab9" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 9...
            </div>
            <div class="tab-pane fade mt-2" id="tab10" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 10...
            </div>
            <div class="tab-pane fade mt-2" id="tab11" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 11...
            </div>
            <div class="tab-pane fade mt-2" id="tab12" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 12...
            </div>
            <div class="tab-pane fade mt-2" id="tab13" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 13...
            </div>
            <div class="tab-pane fade mt-2" id="tab14" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 14...
            </div>
            <div class="tab-pane fade mt-2" id="tab15" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 15...
            </div>
            <div class="tab-pane fade mt-2" id="tab16" role="tabpanel" aria-labelledby="group-dropdown2-tab"
                aria-expanded="false">
                This is the content of Tab 16...
            </div>

        </div>
    </div>

<script>
var hidWidth;
    var scrollBarWidths = 40;

    var widthOfList = function() {
        var itemsWidth = 0;
        $('.list a').each(function() {
            var itemWidth = $(this).outerWidth();
            itemsWidth += itemWidth;
        });
        return itemsWidth;
    };

    var widthOfHidden = function() {
        var ww = 0 - $('.wrapper-nav').outerWidth();
        var hw = (($('.wrapper-nav').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
        var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());

        if (ww > hw) {
            //return ww;
            return (rp > ww ? rp : ww);
        } else {
            //return hw;
            return (rp > hw ? rp : hw);
        }
    };

    var getLeftPosi = function() {
        var ww = 0 - $('.wrapper-nav').outerWidth();
        var lp = $('.list').position().left;
        if (ww > lp) {
            return ww;
        } else {
            return lp;
        }
    };

    var reAdjust = function() {
        // check right pos of last nav item
        var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());

        if (($('.wrapper-nav').outerWidth()) < widthOfList() && (rp < 0)) {
            $('.scroller-right').show().css('display', 'flex');
        } else {
            $('.scroller-right').hide();
        }

        if (getLeftPosi() < 0) {
            $('.scroller-left').show().css('display', 'flex');
        } else {
            $('.scroller-left').hide();
        }
    }

    reAdjust();

    $(window).on('resize', function(e) {
        reAdjust();
    });

    $('.scroller-right').click(function() {
        $('.scroller-left').fadeIn('slow');
        $('.scroller-right').fadeOut('slow');

        $('.list').animate({
            left: `+=${widthOfHidden()}px`
        }, 'slow', function() {
            reAdjust();
        });
    });

    $('.scroller-left').click(function() {
        $('.scroller-right').fadeIn('slow');
        $('.scroller-left').fadeOut('slow');

        $('.list').animate({
            left: `-=${getLeftPosi()}px`
        }, 'slow', function() {
            reAdjust();
        });
    });
</script>

I have an APIs which returns File(byte[], “application/pdf”) | byte[] from server.

In the frontend part, I create a request and can save this file like a pdf file to a computer, but I need to store this file(State or some other way) and render inside react component like PDF file, it’s can be put on iframe or some another way(for me it’s doesn’t matter, just need render inside component after getting the file from API).

 const instance = axios.create({
  baseURL: process.env.REACT_APP_API_ROOT,
  headers: {
    "Content-Type": "application/json",
  },
});

    function getPdfByFileName(fileName: string): any {
  return instance.get(`pdfs/${fileName}`);
}

function getPdfAsBlobByFileName(fileName: string): any {
  return instance.get(`pdfs/${fileName}/array`);
}

 useEffect(() => {
      getPdfByFileName("fileName")
        .then((response: AxiosResponse) => {
          // const file = new Blob([response.data], { type: "application/pdf" }); // For  API which returns blob
          setPdf(response.data); // Need store file and correct render like PDF
        })
        .catch((err: AxiosError) => {
         // process err
        });
    }
  }, []);

     return (
    <div>
      <iframe title="pdf" width="100%" height="600px" srcDoc={pdf}></iframe>
    </div>
  );

The result: Inside component I render the data but it’s no PDF

I’m tryed:

1. use “Content-Type”: “application/pdf” inside these requests.
2. Put the URL to file inside Iframe src attribute(it’s works fine for
   Anonymous but we have Bearer and need to secure the data).
3. Generate URL from blob API response and put to Iframe(not works).
4. Different pdf viewers, they work fine with physical PDF files based on the path to file but don’t work in my case.

Thanks for any help.

I’m trying to print JSON data (this) in React. I came to this:

const print = data.forEach(e => {
    e.data.map(el => {
      return(
        <li>{el.account_id}</li>
      )
    })
  });
  return (
    <div>
      <ul>
        {print}
      </ul>
    </div>
  );

Yet it doesn’t work (when i do console.log(el.account_id) it logs everything, but doesn’t display the data in the ul). What am i doing wrong?

I have been programming a Battlesnake (https://play.battlesnake.com/) and I need to re-declare my move commands (like move="left" and move="right" for example) command but every time it goes over the code it uses the move command once and won’t use it again. It also only uses the first one it can and won’t use any other ones above it. Loops won’t work because to my understanding the Battlesnake servers call the handleMove function each turn and if the Battlesnake servers don’t get a response within 500 milliseconds the game will move for you. The code starts at the top of the handleMove and ends at the response.status thing. I know the code goes through the functions because I tracked it with console.log. The code goes through everything as intended, because I set console.log on all of the functions and inside all the if commands, and it runs through the move strings inside the if commands, but ignores all move commands it reaches after the code gets to response.status. That is where I am confused. A lot of the data is hosted on the Battlesnake servers, so if something is not declared in my code it probably came from the Battlesnake servers.
How can I fix this?

const express = require('express')

const PORT = process.env.PORT || 3000

const app = express()
app.use(bodyParser.json())

app.get('/', handleIndex)
app.post('/start', handleStart)
app.post('/move', handleMove)
app.post('/end', handleEnd)

app.listen(PORT, () => console.log(`Battlesnake Server listening at http://127.0.0.1:${PORT}`))


function handleIndex(request, response) {
  var battlesnakeInfo = {
    apiversion: '1',
    author: '',
    color: '#1c607d',
    head: 'caffeine',
    tail: 'leaf'
  }
  response.status(200).json(battlesnakeInfo)
}

function handleStart(request, response) {
  var gameData = request.body

  console.log('START')
  response.status(200).send('ok')
}

function handleMove(request, response) {
  var gameData = request.body
  var head = gameData.you.head
  var boardWidth = gameData.board.width
  var boardHeight = gameData.board.height
  var food = gameData.board.food[0]

  // code i wrote

  function moveUpB() {

    if (head.x < 1) {

      move = "up"
      //refuses to execute at all??
    }


  }


  function moveRightB() {

    if (head.y > (boardHeight - 2)) {

      move = "right"
      //only used once
    }

  }

  function moveDownB() {

    if (head.x > (boardWidth - 2)) {

      move = "down"
      //only used once
    }

  }

  function moveLeftB() {

    if (head.y < 1) {

      move = "left"
      //only used once
    }

  }


  moveUpB()

  moveRightB()

  moveDownB()

  moveLeftB()
  //aafter here it should go back to moveUpB but it doesent?



  //rest of the code needed for the snake to move
  console.log('MOVE: ' + move)



  response.status(200).send({
    move: move




  })

}





function handleEnd(request, response) {
  var gameData = request.body

  console.log('END')
  response.status(200).send('ok')
}

https://jsfiddle.net/SaifMinhaz/m1heq9z8/

Please have a look at this faddle, 3 buttons with exact same class, CSS, and JavaScript with a different id. Only 1st button is working completely fine but the 2nd and 3rd buttons are not working. Please help me to solve this problem. Thank you in advance. I’m attaching the code below.
Extra: It would be very helpful for me if you can suggest me, how I can put multiple photos stacked in the modal body without losing the shape of the modal. It will show a single photo in the modal body but if someone swap over the picture then the next picture will arrive. Thank you so much.

// Modal
// Get DOM Elements
const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelector('#modal-btn');
const closeBtn = document.querySelector('.close');

// Events
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);

// Open
function openModal() {
  modal.style.display = 'block';
}

// Close
function closeModal() {
  modal.style.display = 'none';
}

// Close If Outside Click
function outsideClick(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
}

/* Modal section styling */

:root {
    --modal-duration: 1s;
    --modal-color: crimson;
  }
  
  .button {
    font-family: 'poppins', sans-serif;
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
  }
  
  .button:hover {
    color: crimson;
    background: none;
  }
  
  .modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    margin: 50px auto;
    width: 60%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
  }
  
  .modal-header h2,
  .modal-footer h3 {
    margin: 0;
  }
  
  .modal-header {
    background: var(--modal-color);
    text-align: center;
    padding: 10px;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  
  .modal-body {
    padding: 10px 5px 1px 5px;
    background: #fff;
  }
  
  .modal-footer {
    background: var(--modal-color);
    padding: 10px;
    font-size: 15px;
    font-weight: lighter;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .close {
    color: #ccc;
    float: right;
    font-size: 30px;
    color: #fff;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .responsive {
    width: 100%;
    height: auto;
  }
  
  @keyframes modalopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

<!-- Modal Button 1 start -->
<button id="modal-btn" class="button">Parkit</button>
<div id="my-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Vehicle Parking Application</h3>
    </div>
    <div class="modal-body">
      <img src="https://thefinancialexpress.com.bd/uploads/1575560371.jpg" alt="Vehicle Parking Application" class="responsive">
    </div>
    <div class="modal-footer">
      <p>
      Footer
      </p>
    </div>
  </div>
</div>
<!-- Modal Button 1 end -->

<!-- Modal Button 2 start -->
<button id="modal-btn2" class="button">IPDC IMS</button>
<div id="my-modal2" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Asset Management System</h3>
    </div>
    <div class="modal-body">
      <img src="#" alt="Asset Management System" class="responsive">
    </div>
    <div class="modal-footer">
      ...
    </div>
  </div>
</div>
<!-- Modal Button 2 end -->

<!-- Modal Button 3 start -->
<button id="modal-btn3" class="button">Gaming Website</button>
<div id="my-modal3" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Gaming Website</h3>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">

    </div>
  </div>
</div>
<!-- Modal Button 3 end -->