I am currently rewriting my <header></header> inside an index.html file with JavaScript functions. Every function was working perfectly fine.

The struggle comes with rewriting it as a custom component so I do not have to repeat the header code in every page (there are many). But the functionality is not that easy to rewrite because it seems I do not have access to certain things.

The custom header-component, everything working as expected:

const template = document.createElement('template');
template.innerHTML = `
  <style>
    .content-container {
    color: inherit;
    margin-inline: auto;
    max-width: 73.75rem;
    width: 90vw;
    }

    .header {
    display: block;
    background-color: inherit;
    width: 100%;
    }

    a {
    color: inherit;
    font-size: 1.125rem;
    text-decoration: none;
    }

    ul {
      background-color: inherit;
      list-style: none;
      padding-left: 0;
    }

    .header-container {
      align-items: center;
      display: flex;
      gap: 1.5rem;
      padding: 1rem 0;
    }

    .logo {
      flex-shrink: 1;
      height: 100%;
      max-height: 3.375rem;
      max-width: 15.5rem;
      padding-left: unset;
      width: 100%;
    }

    .nav-top {
      flex-grow: 1;
      text-align: end;
    }

    .nav-top a:hover,
    .active {
      color: var(--clr-primary);
      border-block-end: 2px solid var(--clr-primary);
    }

    .opened ul {
      background-color: var(--bg-primary);
      display: block;
      position: absolute;
      right: 0;
      width: 50%;
      z-index: 1;
    }

    .opened .has-submenu ul {
      width: 100%;
    }

    .opened ul li {
      padding: 0.5rem;
    }

    .opened ul li.has-submenu {
      display: flex;
      flex-direction: column;
      height: min-content;
    }

    .has-submenu ul {
      display: block;
      position: relative;
    }

    .opened ul li .active {
      border-block-end: unset;
    }

    .closed ul {
      display: none;
    }

    .nav-top.opened a {
      display: block;
      text-align: left;
    }

    .header-container .btn-primary {
      display: none;
    }

    .btn-menu {
      background-color: var(--bg-tertiary);
      border: 0;
      font-size: inherit;
      padding: 1em;
    }

    .btn {
      border: none;
    }

    .btn-primary {
      background-color: var(--bg-tertiary);
      color: var(--clr-primary);
      display: block;
      font-size: 1.125rem;
      padding: 1rem 1.5rem;
      text-align: center;
    }

    @media screen and (min-width: 790px) {
      .nav-top .btn-menu {
        display: none;
      }

      .nav-list li {
        display: inline-block;
        margin: 1rem;
      }

      .nav-list li.has-submenu {
        position: relative;
      }

      .nav-list li.has-submenu ul {
        display: none;
      }

      .closed ul,
      .opened ul {
        display: inherit;
      }

      .nav-list li.has-submenu:hover ul {
        background: var(--bg-primary);
        display: block;
        left: 0;
        position: absolute;
        right: 0;
        text-align: left;
        top: 100%;
        width: fit-content;
        width: -moz-fit-content;
      }
    }

    @media screen and (min-width: 1020px) {
      .header-container .btn-primary {
        display: block;
      }

      .nav-top {
        text-align: center;
      }
    }
  </style>

  <header id="header" class="header hero">
    <div class="content-container">
      <div class="header-container">
        <a href="../index.html" aria-label="Homepage" class="logo">
          <img src="/assets/logo.svg" width="248" height="54" alt="">
        </a>
        <nav class="nav-top closed" id="nav-top" aria-label="Main">
          <button type="button" id="btn-menu" class="btn btn-menu" aria-expanded="false" aria-controls="menu">
            Men&uuml;
            <span class="sr-only">&ouml;ffnen</span>
          </button>
          <ul id="nav-list" class="nav-list">
            <li><a href="../index.html">&Uuml;ber uns</a></li>
            <li class="has-submenu"><a href="../services" aria-expanded="false">Services &darr;</a>
              <ul>
                <li><a href="/planung">Planung</a></li>
                <li><a href="/instandhaltung">Instanthaltung</a></li>
                <li><a href="/montage+verlagerungen">Montage und Verlagerungen</a></li>
              </ul>
            </li>
            <li class="has-submenu">
              <a href="../produkte" aria-expanded="false">Produkte &darr;</a>
              <ul>
                <li><a href="/hebeeinrichtung+hubtische">Hebeeinrichtungen / Hubtische</a></li>
                <li><a href="/haengefoerdersysteme">H&auml;ngef&ouml;rdersysteme</a></li>
                <li><a href="/ketten-undgurtfoerderer">Ketten- und Gurtf&ouml;rderer</a></li>
              </ul>
            </li>
            <li><a href="../kontakt">Kontakt</a></li>
          </ul>
        </nav>
        <a href="../kontakt" class="btn btn-primary">Anfrage senden</a>
      </div>
    </div>
  </header>
`;

class Header extends HTMLElement {
  constructor() {
    super();

    this.showMenu = false;

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }

  openMenu() {
    this.showMenu = !this.showMenu;

    const toggle = this.shadowRoot.querySelector('#btn-menu');
    const navBar = this.shadowRoot.querySelector('#nav-top');

    const show = () => {
      toggle.setAttribute('aria-expanded', true);
      navBar.classList.remove('closed');
      navBar.classList.add('opened');
    };

    const hide = () => {
      toggle.setAttribute('aria-expanded', false);
      navBar.classList.remove('opened');
      navBar.classList.add('closed');
    };

    this.showMenu ? show() : hide();
  }

  connectedCallback() {
    this.shadowRoot.querySelector('#btn-menu').addEventListener('click', () => this.openMenu());
  }

  disconnectedCallback() {
    this.shadowRoot.querySelector('#btn-menu').removeEventListener();
  }
};

window.customElements.define('header-component', Header); 

Now I do have some function with add changes to this header-compontent depending on the window element itself (scroll) or window.size. But I do not have access to anything inside the header-component or using the window outside I do not have access to the elements withing the header-compontent.

How is header or footer typically handled within a large vanilla JS application? I thought custom components is the answer, but adding functionality seem difficult and barely answers on how to rewrite these function (which seem common to me) to use within a custom component.

Functions from index.js

close open menu in mobile view on scroll

const toggle = document.getElementById("btn-menu");
const navBar = document.getElementById("nav-top");
const menuItems = document.getElementById("nav-list").getElementsByTagName("a");
const menuItemsArray = [...menuItems];

window.addEventListener("onscroll", (e) => {
  e.stopPropagation();
  if (toggle.getAttribute("aria-expanded") == true) {
    hide();
  }
});

const handleClosure = (e) => !navBar.contains(e.target) && hide();
const handleResize = () => {
  if (window.innerWidth > 600) {
    navBar.classList.remove("opened");
    navBar.classList.add("closed");
  }
};

window.addEventListener("click", handleClosure);
window.addEventListener("focusin", handleClosure);
window.addEventListener("resize", handleResize);
menuItemsArray.forEach((item) => {
  item.addEventListener("click", hide);
});

Or active menu items

const current = window.location.href;

for (let i = 0; i < menuItems.length; i++) {
  if (menuItems[i].href === current) {
    menuItems[i].className = "active";
    // menuItems[i].focus();
  }
}

and some others, I am sure I can figure out myself when I get these working.

Check this code

interface PriceFormatOptions {
  unit: string;
}
export default class PriceHelper {
  /**
   * Adds unit and separates thousands
   */
  static format(
    price: Parameters<typeof PriceHelper.#separateThousands>[0],
    options: PriceFormatOptions = {} as PriceFormatOptions
  ) {
    let unit = options.unit || "تومان";

    const separatedPrice = this.#separateThousands(price);
    if (unit) unit = ` ${unit}`;

    return separatedPrice + unit;
  }

  /**
   * Converts numeral prices to persian words
   */
  static toWords() {}

  static #separateThousands(price: string | number) {
    return String(price || 0).replace(/B(?=(d{3})+(?!d))/g, ",");
  }
}

when I wite separateThousands like this

static separateThousands(price: string | number) {
return String(price || 0).replace(/B(?=(d{3})+(?!d))/g, ",");

}

and use it like this

price: Parameters<typeof PriceHelper.#separateThousands>[0],

everything is fine but when I use it as private field (with #) like above code snippet typescript complains with this error

ESLint: Parsing error: Identifier expected.

on this line

price: Parameters<typeof PriceHelper.#separateThousands>[0],

I don’t have any idea how can I fix that

I am trying to figure out why I am getting this blue background on some MuiLinks when they are clicked on.
This color is my primary theme color, but I changed the primary theme color and the components still appear blue when clicked.
The buttons only appear with a blue background when clicked on mobile. The first two components have an ‘a’ html tag, and the third has a ‘button’ html tag.
Here are three different instance where this behavior is occuring, with the class names.
class=”MuiTypography-root MuiTypography-h5 MuiTypography-noWrap css-sg2lwt-MuiTypography-root”
class=”MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1gboe1e-MuiTypography-root-MuiLink-root”
class=”gm-control-active gm-fullscreen-control”

I have tried multiple solutions with editing the MuiTouchRipple in my deaultTheme, trying to edit ‘a’ tags with css, and trying to disable touchRipple with props on these components.

I’m confused if there is anyway to detect the check and uncheck checkbox in table. All I want is when I check the checkbox item on table it will add on array list if it is already check it should not add in arrayList otherwise it will add through push , in short every item stored in array list should be unique, if I uncheck the item that already added in array list it should be remove , how do I achieve that? it possible? I’m being using console right now.

I have duplicate value on index 0 and 2 the output should only 0 and 1 since it already exist

I tried using just to unique the value before it prints but it doesn’t work

  var unique = selected_items.filter(function(itm, i, selected_items) {
     return i == selected_items.indexOf(itm);
});

var selected_items = [];
$("#allcb").change(function() {
      $('tbody tr td input[type="checkbox"]').prop(
        "checked",
        $(this).prop("checked")
      );
    });


$('.checkboxtype').click(function(event){

var grid = document.getElementById("Table1");
var addedCheckboxes = $(".whole-div-class .row");

var checkBoxes = $(`input[type=checkbox]`);
var str = '';

for (var i = 0; i < checkBoxes.length; i++) {
    if (checkBoxes[i].checked && checkBoxes[i].name !== "allcb") {
          var row = checkBoxes[i].parentNode.parentNode;
        
          var stck_id = checkBoxes[i].id;

          var array_id = {
            id: stck_id,
            item :  row.cells[1].innerHTML,
            quantity :  row.cells[2].innerHTML
          }
          selected_items.push(array_id);
    }
 
  }

  console.log("selected Items");
  console.log(selected_items);

});

$("#allcb").change(function() {
   $('tbody tr td input[type="checkbox"]').prop(
       "checked",
       $(this).prop("checked")
    );
});

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <table border="1" id="Table1">
        <thead>
          <tr>
            <th>
              <input type="checkbox" id="allcb" name="allcb" />
            </th>
            <th>Number</th>
            <td>Age</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="checkbox" class="dt-checkboxes form-check-input checkboxtype" id="cb1" name="cb1" />
            </td>
            <td>200</td>
            <td> 25</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox"  class="dt-checkboxes form-check-input checkboxtype" id="cb2" name="cb2" />
            </td>
            <td>300</td>
            <td>30</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox"  class="dt-checkboxes form-check-input checkboxtype" id="cb3" name="cb3" />
            </td>
            <td>400</td>
            <td>50</td>
          </tr>
        </tbody>
      </table>
      <br />
     
      <ul class="list-group mb-3 whole-div-class"></ul>

I need some help using a Blob in JavaScript.

Basically, I stream a file to save it on my computer from my server using CORS. However, how do I handle an error? I am having trouble with that.

Server 1

jQuery.ajax({
    xhr: () => {
        // the 'XHR' function creates a new 'XMLHttpRequest' object and
        // sets up an event listener to track the progress of the request
        let xhr = new window.XMLHttpRequest();
        xhr.addEventListener("progress", evt => {
            // handle progress events to track the amount of data loaded
            if (evt.lengthComputable) {
                let percentComplete = evt.loaded / evt.total;
                // TODO send the results to an animated progress bar on the page
            }
        }, false);

        // this internal approach allows us to customize the XHR object and its behavior before making the request.
        // in this case, an event listener for progress tracking is added to the XHR object before returning it.
        // By returning the XHR object, we effectively override the default XHR object that jQuery would use, thus
        // providing us with more control and customization options for the AJAX request
        return xhr;
    },
    type: "GET", // the request type
    url: link, // the URL to send the request to
    processData: false, // the data should not be processed
    contentType: false, // the data should not be converted to a query string
    cache: false, // disable caching
    timeout: 180000, // set the timeout for the request to 180 seconds (3 minutes)
    xhrFields: {
        responseType: 'blob' // force the response type to be a Blob object
    },
    /**
     * callback function to handle the 'successful' response
     * @data is the response data from the server
     * @status is the return code
     * @jqXHR is a parameter of the success callback function
     * it represents the jQuery XHR(XMLHttpRequest) object that encapsulates the HTTP response received from the server.
     * the 'jqXHR' object provides various properties and methods to access and manipulate the response data.
     * in the code, it is used to retrieve the value of the 'Content-Disposition' header from the response
     */
    success: (data, status, jqXHR) => {
        // we expect the data to be a 'blob' so we'll try to handle it
        let disposition = jqXHR.getResponseHeader('Content-Disposition');
        let filename = ''; // the filename to download (will be replaced by the headers and refined by regex)

        // debugging
        console.log(disposition);

        // if we have a valid response header and it was flagged that we have an attachment
        if (disposition && disposition.indexOf('attachment') !== -1) {
            // then extract the filename from the 'Content-Disposition' header
            let filenameRegex = /filename[^;=n]*=((['"]).*?2|[^;n]*)/;
            let matches = filenameRegex.exec(disposition);

            // replace any quotes in the filename and update the filename variable
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');

            // call the 'saveAs' function with the retrieved data and filename
            // this will actually produce the file as a downloaded file in the web browser
            saveAs(data, filename);
        } else {
            // handle the scenario where the response is not an attachment
            errorCallback(jqXHR, 'error', 'Invalid Response Header');
        }
    },

    /**
     * handles an 'error' based response
     * @jqXHR represents the jQuery XHR (XMLHttpRequest) object that encapsulates the HTTP response received from the server.
     * @textStatus represents the status of the error ('timeout', 'error', or 'abort')
     * @errorThrown represents the error thrown, if any
     */
    error: function(jqXHR, textStatus, errorThrown) {
        //errorCallback(jqXHR, textStatus, errorThrown);
        let errorMessage = jqXHR.getResponseHeader('X-Powered-By');
        console.log(errorMessage);
    }
});

/** 
 * create a new 'Blob' object from the data array with a specified MIME type
 * @data is the response data from the server
 * @filename is the name of the file we wish to save as
 */
function saveAs(data, filename) {
    let rawdata = new Blob([data], {
        type: "application/octet-stream"
    });

    // Internet Explorer and Chrome browsers?
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(rawdata, filename); // use the built-in function to save the file
    } else {
        // all other browsers?
        let menulink = window.document.createElement("a"); // create an 'a' element
        menulink.href = window.URL.createObjectURL(rawdata); // set the URL to the Blob via 'rawdata'
        menulink.download = filename; // set the download name
        document.body.appendChild(menulink); // create a child object on the page
        menulink.click(); // simulate a click event
        document.body.removeChild(menulink); // remove the child object on the page
    }
}

Server 2

header('Access-Control-Allow-Origin: *');
header('X-Error-Message: Second Server Test'); // Set the custom header with the error message
http_response_code(500);
die();

I tried setting a custom header in order to convey a message across (since I cannot use JSON as the object is forced to be a Blob) but that didn’t work. The header is being set, but I cannot read the header. I just get null at the moment in the console log when console.log(errorMessage) is called.

I’ve read a few questions/answers such as Play mp3 file after uploading it with html5 drag and drop upload but it’s not exactly what I’m looking for :

I want to be able to drag and drop a MP3 on a HTML page, and then have a player (with PLAY PAUSE STOP buttons) that can instantly play the MP3 without uploading the file to server – it should be played locally for the client instead.

How to do this with JavaScript?

The only things I have tried/found is to do this with a file upload and <audio> tag.

Repeated ajax calls to WebMethod on server got stuck after 100 calls,
It seems thers a boundery in browsers – Chrom/Edge how many ajax calls can be made from the the same aspx page to the same WebMethod

At first I trievd setInterval(MyAjaxFunc,5000)
Than tried not to count on the timer and instead call MyAjaxFunc recorsively, No use

I am using mapbox in order to show a map in which the size of the circles is according to the amount in each country
But I couldn’t understand howyour text to use interpolate (expression) and the circles appear the same size.

map.current.on("load", () => {
      map.current.addSource("Amount", {
        type: "geojson",
        data: data,
      });

      map.current.addLayer({
        id: "amount-circles",
        type: "circle",
        source: "Amount",
        layout: {},
        paint: {
          "circle-color": [
            "match",
            ["get", "Country"],
            "Egypt",
            "#fbb03b",
            "Algeria",
            "#223b53",
            "Russia",
            "#e55e5e",
            "United Kingdom",
            "#3bb2d0",
            /* other */ "#ccc",
          ],
          "circle-opacity": 0.75,
          "circle-radius": [
            "interpolate",
            ["linear"],
            ["get", "Amount"],
            6,
            10,
            8,
            20,
          ],
        },
      });
      
    });

enter image description here

How can I fill a pdf form dynamically using JavaScript or PHP?

Empty pdf file

I am working in a project there I need to need to feel a form like this. How can i do this?

I will use there bangla font so please explain how can i do this.

TypeError: Cannot read properties of undefined (reading ‘toString’) I’m getting this error from dayjs

Full error:

TypeError: Cannot read properties of undefined (reading 'toString')
    at m2.isValid (dayjs.min.js:1:2793)
    at m2.toJSON (dayjs.min.js:1:6195)
    at stringify (<anonymous>)
    at stringifySafely (index.js:37:27)
    at Object.transformRequest (index.js:100:14)
    at transform (transformData.js:22:15)
    at Object.forEach (utils.js:255:10)
    at Object.transformData (transformData.js:21:9)
    at Axios.dispatchRequest (dispatchRequest.js:40:31)
    at Axios.request (Axios.js:148:33)

I have narrowed down the problem to the ant design Date Picker but I cant figure out why. Here is the code for the DatePicker

<div className="info-div w-33">
    <p>
        <Form.Item
            label={<h4 className="text-center" style={{ paddingBottom: 0, marginBottom: 0 }}>Date of Birth</h4>}
            name={["personalInfo", "dateOfBirth"]}
            rules={[
                {
                    required: true,
                    message: 'Please input your Date of birth!',
                }
            ]}
        >
                <DatePicker
                    style={{ width: "375px", height: "32px" }}
                    format="DD-MM-YYYY"
                />
        </Form.Item>
    </p>
</div>

I want to send a api request with data that I get from the form this is what will happen when the code gets submitted:

const onFinish = (values) => {
    const cleanData = removeUndefined(values);
    cleanData.user = auth.currentUser._id;
    cleanData.agency = auth.currentUser.createdBy

    createStudentProfile(cleanData).then(res => {
        console.log(res)
        if (res) {
            navigate("/dashboard")
        }
    })
};

and the api code:

export const createStudentProfile = async (body) => {
    try {
        console.log(body)
        const { data } = await axiosInstance.post("/student/create", body);
        toast.success("Successfully created student profile")
        return data;
    } catch (e) {
        console.log(e)
        if (e?.response?.status === 400) {
            toast.error(e.response.data.error)
            return false;
        } else {
            toast.error("Server error Occurred")
        }
    }
}

I have seen that in most stackoverflow that has faced this question had to do something with .? but i havent even called the personalInfo.dateOfBirth nor have i called the .toString function in my entire code base

In this Code, I use react-redux and react-router. the react-redux version is old but I want to know where I went wrong in this piece of code (in this version of react-redux and react-router I meant).
I try to get ingredients in main.jsx and use it in OrderSummary Component but I got errors like:

• Cannot read properties of undefined,
• state not found.

github repository

main.jsx:

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from "./store/reducer";

export default function Main(props) {
  const store = createStore(
    reducer /* preloadedState, */,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );

  return (
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<App />} />
            <Route
              path="/burger-builder/order-page"
              exact
              element={
                <OrderSummary
                  ingredients={props.ingredients}
                  totalPrice={props.totalPrice}
                />
              }
            />
            <Route path="*" element={<NoPage />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Main />);

BurgerBuilder.jsx:

import * as actionTypes from "../../store/action";
import { connect } from "react-redux";

function BurgerBuilder(props) {
return (
    <>
      <Burger ingredients={props.ings} />
      <BurgerControls
        addIngredients={props.onIngredientAdded}
        removeIngredients={props.onIngredientRemoved}
        totalprice={props.totalPrice}
        disabled={disableButton}
      />
    </>
  );
}

const mapStateToProps = (state) => {
  return {
    ings: state.ingredients,
    price: state.totalPrice,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onIngredientAdded: (ingName) =>
      dispatch({ type: actionTypes.ADD_INGREDIENT, ingredientName: ingName }),
    onIngredientRemoved: (ingName) =>
      dispatch({
        type: actionTypes.REMOVE_INGREDIENT,
        ingredientName: ingName,
      }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(BurgerBuilder);

part of

reducer.js:

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.ADD_INGREDIENT:
            return {
                ...state,
                ingredients: {
                    ...state.ingredients,
                    [action.ingredienName]: state.ingredients[action.ingredientName] + 1
                },
                totalPrice: state.totalPrice + INGREDIENT_PRICES[action.ingredientName]
            };

Are there any strong reference and pointer mechanisms in javascript? For example now if I execute a code like this, the pointer that was referenced to USER and was added to MAP , will be lost. But I expect a behavior where when I assign an object, js understands that this pointer has an object in memory and it also changes the object in Map previously added.

let user = { age: 21 };
let cat = { age: 55 }

var m = new Map();
m.set(1, user);
user = cat;
cat.age = 77;

i wanted to try this out and somehow I have seen similar stuff with CSS circle on the web like

function throwCircles() {
  const cube = document.querySelector('.cube');
  cube.classList.add('throw-animation');

  setTimeout(() => {
    for (let i = 0; i < 2; i++) {
      const circle = document.createElement('div');
      circle.classList.add('circle');
      circle.style.top = '50%';
      circle.style.left = '50%';
      document.body.appendChild(circle);

      setTimeout(() => {
        circle.style.transform = `translate(${i * 58}px, ${i * -48}px)`;
        circle.style.opacity = '1';
      }, 200 * i);
    }
  }, 1000);
}

.container {
  position: relative;
  perspective: 800px;
}

.cube {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transition: all 1s;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0.8;
}

.front {
  transform: translateZ(50px);
}

.back {
  transform: translateZ(-50px);
}

.right {
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: blue;
  border-radius: 50%;
  opacity: 0;
  transition: all 1s;
}

<div class="container">
  <div class="cube"></div>
</div>
<button onclick="throwCircles()">Throw Circles</button>

but the problem is how I will replace it with pictures. After I press the button, only then the first circle is visible, and it can’t be visible without pressing the button. when the button is pressed it should be popping 2nd circle out

please need help on it

My download() only passes to btnAction() when I include a debugger statement. If I remove the debugger, it no longer passes to btnAction()

  download(helpAction, modal){
    if(this.component === 'templateComponent')
    debugger
      this.templateComponent.btnAction(helpAction, modal);
  }

  btnAction(action, modal) {
    this.page.action = action;
    this.page.helpAction = action;
    this.modal = modal;
    let dto = serializeForm(this.dynForm.form.value, this.dynForm.fieldsDates);
    this.submit(dto);
  }  

and this the HTML   

 <div class="form-group" [formGroup]="group" *ngIf="!field.hidden">
    <label [for]="field.name">{{ field.label }}
      <span *ngIf="required()" class="danger">*</span>
       <a *ngIf="field.help && field.helpAction" href="javascript:;" (click)="download(field.helpAction, modal)">
         <i class="icon-question"></i>
       </a>
    </label>
<ng-select #select [items]="field.options" [bindLabel]="field.name" placeholder="Selecione..." [formControlName]="field.name" [readonly]="field.readonly" (change)="field.action ? onSelect(field.name, field.action, $event) : null" [style]="field.style" [ngClass]="field.class" (close)="select.blur(); select.focus();"></ng-select>
<ng-container *ngFor="let validation of field.validations">
    <small *ngIf="group.get(field.name)?.hasError(validation.name)" class="form-text text-muted danger">{{ validation.message }}</small>
</ng-container>
</div>

I implemented a web push system in my app stack using VAPID keys and my own server. It works fine for some time (approximately within 1 hour of last use of the PWA). But as soon as I leave my phone idle for 1 or 2 hours or more it stops receiving notifications until, get this, until either I open the PWA itself or the chrome browser. It shows up immediately as if they were being held back by some background service in Android.
Please explain this wired behaviour because I’m puzzled as i followed every steps mentioned in Google’s own documentation correctly.