How do I make my website's page speed fast? I am trying to hot the 100 mark on google speed insights and gt metrix. is this even possible?

I am trying to hit the 100% optimization mark on google speed insights and gt metrix but I have failed. Here is my website https://www.ugandawebsitedesign.com/. Please check it out and advise. Thank you!

Array keeps pushing the same object in loop or just pushes a single object [duplicate]

Hi I have been trying to push the filterCategory and selected filter when clicked on a check box. These are passed as filterName and filterValue respectively. The on change function just pushes the last selected value into the array. I even tried creating an empty object inside the for loop but it didn't work. Can someone help?

getSelectedFilter(filterName, filterValue) {
      const obj = {fieldName: filterName, values: [filterValue]}
      const filterArray = [];
        const checked = document.querySelectorAll('input[type=checkbox]:checked')
        checked.forEach(() => {
          filterArray.push(obj)
        })
        let requestObject ={
          filters: filterArray,
        console.log(requestObject)
      }

Use Javascript-Object with Json-objects in other methodes

why isn't it working? The ok () method doesn't give me the correct object. But when I use buttons to activate the methods one by one then it works. Even if I write "await" in front of the getdata () method. It doesn't work.

<script> 
   var javaobj = new Object() ;
    
   function ok(){
      console.log(javaobj);
    }

    function getdata()
    {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
        if (xhttp.readyState==4 && xhttp.status==200) {
          javaobj=JSON.parse(xhttp.response);
        }
      }
      xhttp.open("GET", "test.json", true);
      xhttp.send();
    }
  getdata()
  ok()
</script>

how does web-hosting sites host websites in backend like heroku, go-daddy etc?

i want to know by CODING(i dont need all codes but a reference like use this then that etc.) means how the coding part works in web hosting sites like heroku, godaddy etc?

Suppose i want to host a php ,node or django website , for that language how will the server behaves or detects the php code and host it online?

Any references would help me.

Thanks in advance

Differentiate between Take Photo and Browse in iphone browser

When I have input type file. It is showing option of "Take Photo" and "Browse" and "Photo Gallery" in iphone.

So when user uses "Take Photo", some iphone versions are having different orientation.

<input type="file" accept="image/*">

So is there a way to remove "Take Photo" option?

Or can we differentiate in javascript that it is from "Take Photo" option so that I can correct orientation if it is from "Take Photo" option?

Is that even feasable?: user click on a button on my website -> get data from another website -> display this data on my website

I tried to be the most explicit possible and I know I can do it in python but i'm trying to do it in javascript.

the data is in sms/tweet style and length so not very huge and I know where it's located on the other webiste

css class makes html element disappear

I have an html element which is an image . There is no problem seeing the image in mobile, but when you look at the page in computer, the image disappears. I found out the reason this element disappears is when I give it a class="ad_img". there is no style for appearing and disappearing this element inside that class. When I remove class="ad_img" the image shows up.

.ad_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad_main_div {
  width: 100%;
  max-width: 800px;
}

.ad_main_panel {
  background-color: rgba(0, 0, 0, 0.00);
  border-radius: 3px;
  overflow: hidden;
  border: 3px solid rgba(0, 0, 0, 0.00);
  display: inline-block !important;
  position: relative;
  object-fit: cover;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
  min-width: 100%;
  max-width: 800px;
  padding-bottom: 12.5%;
}

<center>
  <div class="ad_main_div">
    <p> With class </p>
    <button id="ad_main_button" class="ad_main_panel">
          <img src="https://pearlcapital.com/wp-content/uploads/2018/04/FB-Phone-GIF.gif"   id="ad_main_img" alt="No Image" class="ad_img"/>                 
    </button>
    
    <p> Without class </p> 
     <button id="ad_main_button" class="ad_main_panel">
          <img src="https://pearlcapital.com/wp-content/uploads/2018/04/FB-Phone-GIF.gif" id="ad_main_img" alt="No Image" />                 
     </button>
  </div>
</center>