Category: javascript

I’m attempting to return data from a GraphQL endpoint via Axios and capture that data in a variable outside of the Axios function (available globally). I can console.log the returned data within the axios function, but I need it available outside the function – here is my attempt at achieving this, but I get an empty set when the data is returned.

Here is my code:

var axios = require("axios");
var data = JSON.stringify({
  query: `{
    customers(first: 200) {
        
        pageInfo {
            startCursor,
            endCursor,
            hasNextPage
        }
        edges {
            cursor
            node {
                id: id,
                displayName: displayName,
                email: email,
                rep_name: metafield(
                    namespace: "hbsp"
                    key: "rep_name"
                ) {
                    value
                }
                rep_phone: metafield(
                    namespace: "hbsp"
                    key: "rep_phone"
                ) {
                    value
                }
                rep_email: metafield(
                    namespace: "hbsp"
                    key: "rep_email"
                ) {
                    value
                }
            }
        }
    }
}`,
  variables: {},
});

var config = {
  method: "post",
  url: "<endpoint>",
  headers: {
    "Token": "xxxxxxxxxxxxxxxxxxxxxxxx",
    "Content-Type": "application/json",
  },
  data: data,
};

const dataObj = async function(response) {

  axios(config)
    .then(function(response) {
      return response
    })
    .catch(function(error) {
      console.log(error);
    });
}

dataObj(data).then(function(data) {
  console.log(JSON.stringify(dataObj(data)));
});

I made a website, implemented some things and now when I moved some elements and CSS around to organize and declutter, my hamburger menu stopped showing when opened. Instead of sliding down with a nice animation the nav-bar disappear and the menu doesn’t show, if I inspect I can see that the menu is there but there is something covering it or some opacity being wrong. But I went trough all my z-index’s and opacity’s and there is nothing that is wrong, what I can see. So I would like some help with getting my hamburger menu to show when clicked to show.

The hamburger is only shown on mobile view FYI

I’ll include a snippet down below but here is the code I think is causing the trouble:

    <nav>
      <div class="nav-menu">
        <div class="burger-container">
          <div id="burger">
            <div class="bar topBar"></div>
            <div class="bar btmBar"></div>
          </div>
        </div>
        <ul class="menu">
          <li class="menu-item"><a href="#">Hem</a></li>
          <li class="menu-item"><a href="html/losenord.html">Lösenord</a></li>
          <li class="menu-item">
            <a href="html/sakerhetshot.html">Säkerhetshot</a>
          </li>
          <li class="menu-item">
            <a href="html/statlig-kontroll.html">Statlig kontroll</a>
          </li>
          <li class="menu-item">
            <a href="html/tredjepartskod.html">Tredjepartskod</a>
          </li>
          <li class="menu-item">
            <a href="html/webbhotell.html">Webbhotell</a>
          </li>
          <div class="flex-filler"></div>
          <li class="toggler-container">
            <div class="switcher">
              <span class="material-symbols-outlined"> dark_mode </span>
              <label class="switch">
                <input type="checkbox" id="checkBox" />
                <span class="slider"></span>
              </label>
              <span class="material-symbols-outlined"> light_mode </span>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <div class="wrapper">
      <header class="parallax">
        <img src="https://cdn.imgpaste.net/2022/10/10/Kem93m.png" class="background" />
        <img src="https://cdn.imgpaste.net/2022/10/10/KemO9N.png" class="foreground" />
        <div class="hero-text">
          <h1>Lagar och säkerhet</h1>
          <p>
            Hemsidan om lagar och säkerhet på internet här står det massa saker wow omg coolt :I
          </p>
        </div>
      </header>

    .wrapper {
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      perspective: 10px;
    }
    
    nav {
      overflow: hidden;
    
      position: sticky;
      top: 0;
      left: 0;
    
      width: 100%;
    
      transition: 0.5s ease;
    
      background-color: var(--black-color);
    }
    
    .parallax {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      transform-style: preserve-3d;
      z-index: -10;
    }
    
    .background {
      transform: translateZ(-10px) scale(2);
      -webkit-user-drag: none;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
    
    .foreground {
      transform: translateZ(-5px) scale(1.5);
      -webkit-user-drag: none;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
    
    .background,
    .foreground {
      position: absolute;
      height: 100%;
      width: 100%;
      object-fit: cover;
      z-index: -10;
    }
    
    .hero-text {
      text-align: center;
      color: var(--white-color);
    
      position: absolute;
      top: 50%;
      left: 50%;
    
      min-width: 14rem;
    
      transform: translate(-50%, -50%);
    }
    
    .hero-text > h1 {
      font-size: 3rem;
    }
    
    .hero-text > p {
      font-size: 1rem;
    }
    
    .burger-container {
      position: absolute;
      right: 1rem;
      top: 0.1rem;
    
      display: inline-block;
    
      height: 50px;
      width: 50px;
    
      transform: rotate(0deg);
      transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      user-select: none;
    
      z-index: 10;
    
      -webkit-tap-highlight-color: transparent;
    }
    
    #burger {
      position: relative;
      top: 50%;
    
      width: 18px;
      height: 8px;
    
      display: block;
    
      margin: -4px auto 0;
    }
    
    .bar {
      position: relative;
    
      width: 100%;
      height: 1px;
    
      display: block;
    
      background: var(--white-color);
    
      transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      transition-delay: 0s;
    }
    
    .topBar {
      transform: translateY(0px) rotate(0deg);
    }
    
    .btmBar {
      transform: translateY(6px) rotate(0deg);
    }
    
    .menu {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    
      padding: 0;
      background: var(--black-color);
      height: 100%;
    
      list-style: none;
    }
    
    .menu-item {
      transform: translateY(-200px);
      transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 1);
    }
    
    .menu-item a {
      display: block;
      position: relative;
    
      color: var(--white-color);
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      text-decoration: none;
      font-size: 1.3rem;
      line-height: 2.35;
    
      border-bottom: 1px solid var(--body-bg-color);
    
      width: 100%;
    }
    
    .menu-item a:hover {
      color: var(--text-hover-color);
      text-decoration: none;
    }
    
    .nav-menu {
      height: 3.5rem;
      transition: height 0.4s;
    }
    
    .nav-menu.menu-opened {
      transition: height 0.4s;
    
      position: absolute;
      top: 0;
      opacity: 1;
      z-index: 20;
    
      height: 100vh;
      width: 100vw;
    }
    
    .nav-menu.menu-opened .burger-container {
      transform: rotate(90deg);
    }
    
    .nav-menu.menu-opened .burger-container #burger .bar {
      transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      transition-delay: 0.2s;
    }
    
    .nav-menu.menu-opened .burger-container #burger .bar.topBar {
      transform: translateY(4px) rotate(45deg);
    }
    
    .nav-menu.menu-opened .burger-container #burger .bar.btmBar {
      transform: translateY(3px) rotate(-45deg);
    }
    
    .nav-menu.menu-opened ul.menu li.menu-item {
      transform: scale(1) translateY(0px);
    }

Snippet:

$(document).ready(function () {
  // Hamburger
  $(".burger-container").click(function () {
    $(".nav-menu").toggleClass("menu-opened");
    $("body").toggleClass("unscrollable");
  });

  // Dark-Light switcher
  $("body").toggleClass("light", localStorage.toggled == "light");

  document.getElementById("checkBox").addEventListener("click", darkLight);

  function darkLight() {
    if (localStorage.toggled != "light") {
      $("body").toggleClass("light", true);
      localStorage.toggled = "light";
    } else {
      $("body").toggleClass("light", false);
      localStorage.toggled = "";
    }
  }

  if ($("body").hasClass("light")) {
    $("#checkBox").prop("checked", true);
  } else {
    $("#checkBox").prop("checked", false);
  }
});

// Scroll to top
button = document.getElementById("scroll-button");

button.addEventListener("click", topFunction);

window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
}

function topFunction() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Dark colors */
:root {
  --white-color: #d9d9d9;
  --black-color: #0d0d0d;

  --grey-color-1: #595959;

  --body-bg-color: #262626;

  --text-hover-color: #a6a6a6;
}

/* Light colors */
:root .light {
  --body-bg-color: #dfdfdf;

  --black-color: blue;
  --white-color: black;
}

/* ======== MAIN CSS ======== */

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;

  background-color: var(--body-bg-color) !important;

  position: relative;

  overflow: hidden;

  font-family: "Nunito", sans-serif;
  color: var(--white-color);
}

main {
  background-color: var(--body-bg-color);
}

.wrapper {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
}

nav {
  overflow: hidden;

  position: sticky;
  top: 0;
  left: 0;

  width: 100%;

  transition: 0.5s ease;

  background-color: var(--black-color);
}

.unscrollable {
  overflow: hidden;
}

.active {
  text-decoration: underline;
}

/* ======= PARALLAX ======= */

.parallax {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transform-style: preserve-3d;
  z-index: -10;
}

.background {
  transform: translateZ(-10px) scale(2);
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.foreground {
  transform: translateZ(-5px) scale(1.5);
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.background,
.foreground {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -10;
}

.hero-text {
  text-align: center;
  color: var(--white-color);

  position: absolute;
  top: 50%;
  left: 50%;

  min-width: 14rem;

  transform: translate(-50%, -50%);
}

.hero-text > h1 {
  font-size: 3rem;
}

.hero-text > p {
  font-size: 1rem;
}

/* ======== HAMBURGER ======== */

.burger-container {
  position: absolute;
  right: 1rem;
  top: 0.1rem;

  display: inline-block;

  height: 50px;
  width: 50px;

  transform: rotate(0deg);
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  user-select: none;

  z-index: 10;

  -webkit-tap-highlight-color: transparent;
}

#burger {
  position: relative;
  top: 50%;

  width: 18px;
  height: 8px;

  display: block;

  margin: -4px auto 0;
}

.bar {
  position: relative;

  width: 100%;
  height: 1px;

  display: block;

  background: var(--white-color);

  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0s;
}

.topBar {
  transform: translateY(0px) rotate(0deg);
}

.btmBar {
  transform: translateY(6px) rotate(0deg);
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  padding: 0;
  background: var(--black-color);
  height: 100%;

  list-style: none;
}

.menu-item {
  transform: translateY(-200px);
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 1);
}

.menu-item a {
  display: block;
  position: relative;

  color: var(--white-color);
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  text-decoration: none;
  font-size: 1.3rem;
  line-height: 2.35;

  border-bottom: 1px solid var(--body-bg-color);

  width: 100%;
}

.menu-item a:hover {
  color: var(--text-hover-color);
  text-decoration: none;
}

.nav-menu {
  height: 3.5rem;
  transition: height 0.4s;
}

.nav-menu.menu-opened {
  transition: height 0.4s;

  position: absolute;
  top: 0;
  opacity: 1;
  z-index: 20;

  height: 100vh;
  width: 100vw;
}

.nav-menu.menu-opened .burger-container {
  transform: rotate(90deg);
}

.nav-menu.menu-opened .burger-container #burger .bar {
  transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0.2s;
}

.nav-menu.menu-opened .burger-container #burger .bar.topBar {
  transform: translateY(4px) rotate(45deg);
}

.nav-menu.menu-opened .burger-container #burger .bar.btmBar {
  transform: translateY(3px) rotate(-45deg);
}

.nav-menu.menu-opened ul.menu li.menu-item {
  transform: scale(1) translateY(0px);
}

/* ======== Dark Light switcher ====== */

.switcher > span {
  color: var(--white-color);
  padding: 0 0.5rem;
  font-size: 1.3rem;
}

.switcher {
  display: flex;
  align-items: center;
}

.toggler-container {
  display: block;
  margin-top: 1rem;
  transform: translateY(-200px);
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 1);
}

.nav-menu.menu-opened ul.menu li.toggler-container {
  transform: scale(1) translateY(0px);
}

.switch {
  position: relative;
  align-self: center;

  display: inline-block;

  width: 3.2rem;
  height: 1.5rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  cursor: pointer;

  background-color: #808080;

  -webkit-transition: 0.4s;
  transition: 0.4s;

  border-radius: 1rem;
}

.slider:before {
  position: absolute;
  left: 4px;
  bottom: 4px;

  content: "";

  height: 1rem;
  width: 1rem;

  background-color: var(--white-color);

  -webkit-transition: 0.4s;
  transition: 0.4s;

  border-radius: 50%;
}

input:checked + .slider {
  background-color: #808080;
}

input:checked + .slider:before {
  -webkit-transform: translateX(1.7rem);
  -ms-transform: translateX(1.7rem);
  transform: translateX(1.7rem);
}

/* ======== CONTENT ======= */

.content {
  text-align: center;
  margin: 0 5% 0 5%;
  padding-top: 1.5rem;
  color: var(--white-color);
}

.content h2 {
  font-size: 1.4rem;
  font-family: "Roboto", sans-serif;
}

.content p {
  font-size: 1.1rem;
  font-family: "Nunito", sans-serif;
}

.img {
  display: block;
}

/* ======== UP ARROW ========*/

#scroll-button {
  display: none;

  position: fixed;
  bottom: 1rem;
  right: 1.2rem;

  z-index: 10;

  border: none;
  outline: none;

  background-color: transparent;
  color: var(--white-color);
  font-size: 1.5rem;

  cursor: pointer;

  border-radius: 50%;
}

/* ======== FOOTER ======== */

footer {
  padding: 3rem 0 6rem 0;
  background-color: var(--grey-color-1);
  position: sticky;
  bottom: 0;
  z-index: -20;
}

footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 1.3rem;
}

footer ul a {
  color: var(--white-color);
  text-decoration: none;
}

footer ul li {
  display: block;
  padding: 0.25rem 0;
}

footer ul a:hover {
  color: var(--text-hover-color);
}

footer hr {
  color: var(--text-hover-color);
  max-width: 13rem;
  margin: 1.5rem auto;
}

footer .copyright {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-hover-color);
}

/* ======== MEDIA QUERIES ======== */

/* TABLET */
@media only screen and (min-width: 600px) {
  /* ======= FOOTER ======= */
  footer ul {
    font-size: 1.1rem;
  }

  footer ul li {
    display: inline-block;
    padding: 0 0.2rem;
  }

  footer hr {
    max-width: 35rem;
  }
}

/* DESKTOP */
@media only screen and (min-width: 769px) {
  /* ======== MAIN CSS ======== */

  .hero-text {
    position: absolute;
    top: 40%;
    left: 30%;
    max-width: 20rem;
  }

  .hero-text > h1 {
    font-size: 3.5rem;
  }

  .hero-text > p {
    font-size: 1.2rem;
  }

  /* ======= Scrollbar ======== */
  ::-webkit-scrollbar {
    width: 7px;

    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 100px;

    background: rgb(109, 109, 109);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(148, 148, 148);
  }

  /* ======== HAMBURGER ======== */

  .nav-menu {
    transition: all 0.3s ease-in, 0.5s ease-in;
    transition-delay: 0.25s;

    width: 100%;
    height: 3.5rem;

    display: flex;
    align-items: center;
  }

  .nav-menu.menu-opened {
    height: 100%;
  }

  .burger-container {
    display: none;
  }

  .menu-item {
    transform: scale(1) translateY(0px);

    display: inline;

    margin-right: 0.8rem;
    border-bottom: 0;
    margin-top: 0;
  }

  .menu {
    flex-direction: row;

    position: absolute;
    top: 0;

    margin: 0 0 0 1.5rem;

    height: 3.5rem;
    width: 100%;
  }

  .menu-item a {
    display: inline;

    border: none;

    font-size: 1rem;

    transition: all 0.15s cubic-bezier(0.54, 0.12, 0.54, 0.94);
  }

  .flex-filler {
    flex: 1 1 auto;
  }

  /* ======== Dark-light switcher ======== */

  .toggler-container {
    display: block;
    margin: 0 2.5rem 0 0;
    transform: scale(1) translateY(0px);
  }

  .switcher > span {
    font-size: 1.2rem;

    padding: 0 0.4rem;
  }

  .switch {
    width: 2.5rem;
    height: 1.3rem;
  }

  .slider:before {
    height: 0.8rem;
    width: 0.8rem;

    left: 4px;
    bottom: 4px;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(1.2rem);
    -ms-transform: translateX(1.2rem);
    transform: translateX(1.2rem);
  }

  /* ======== CONTENT ========*/

  .content {
    margin: 0 20% 0 20%;
    padding-top: 2rem;
  }

  .content h2 {
    font-size: 1.5rem;
  }

  .content p {
    font-size: 1.15rem;
  }

  /* ======== UP ARROW ========*/

  #scroll-button {
    position: fixed;

    height: 3rem;
    width: 3rem;

    bottom: 1.1rem;
    right: 1.1rem;
  }

  #scroll-button:hover {
    background-color: rgba(160, 160, 160, 0.568);
    backdrop-filter: blur(15px);
  }

  /* ======= FOOTER ======= */
}

/* XL-DESKTOP */
@media only screen and (min-width: 1200px) {
  /* ======= HAMBURGER ======= */

  .menu-item {
    margin-right: 1.3rem;
  }

  .menu-item a {
    font-size: 1.1rem;
  }

  /* ======= FOOTER ======= */
  footer ul {
    font-size: 1.2rem;
  }

  footer ul li {
    padding: 0 0.4rem;
  }

  footer hr {
    max-width: 40rem;
  }
}

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lagar och säkerhet | Hem</title>
    <link rel="stylesheet" href="css/style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
    />
    <script defer src="js/script.js"></script>
  </head>
  <!--
    Att göra: 
    
    Fixa bilder till Hero parallax
    Skriva content
    Fixa bilder till content (Picture element, bootstrap)
    Lägga in all content på index och subpages (Bootstrap)
    Fixa up arrow så den funkar
    Tablet responsive media query
    Hamburger close animation (Inte prio)
  -->
  <body>
    <nav>
      <div class="nav-menu">
        <div class="burger-container">
          <div id="burger">
            <div class="bar topBar"></div>
            <div class="bar btmBar"></div>
          </div>
        </div>
        <ul class="menu">
          <li class="menu-item"><a href="#">Hem</a></li>
          <li class="menu-item"><a href="html/losenord.html">Lösenord</a></li>
          <li class="menu-item">
            <a href="html/sakerhetshot.html">Säkerhetshot</a>
          </li>
          <li class="menu-item">
            <a href="html/statlig-kontroll.html">Statlig kontroll</a>
          </li>
          <li class="menu-item">
            <a href="html/tredjepartskod.html">Tredjepartskod</a>
          </li>
          <li class="menu-item">
            <a href="html/webbhotell.html">Webbhotell</a>
          </li>
          <div class="flex-filler"></div>
          <li class="toggler-container">
            <div class="switcher">
              <span class="material-symbols-outlined"> dark_mode </span>
              <label class="switch">
                <input type="checkbox" id="checkBox" />
                <span class="slider"></span>
              </label>
              <span class="material-symbols-outlined"> light_mode </span>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <div class="wrapper">
      <header class="parallax">
        <img src="https://cdn.imgpaste.net/2022/10/10/Kem93m.png" class="background" />
        <img src="https://cdn.imgpaste.net/2022/10/10/KemO9N.png" class="foreground" />
        <div class="hero-text">
          <h1>Lagar och säkerhet</h1>
          <p>
            Hemsidan om lagar och säkerhet på internet här står det massa saker wow omg coolt :I
          </p>
        </div>
      </header>
      <main>
        <div class="content">
          <section>
            <h2>Hejehje</h2>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni in aut quisquam ipsa,
              reiciendis quidem rem facilis quaerat nam est! Lorem ipsum dolor sit amet consectetur,
              adipisicing elit. Libero, nulla perferendis? Officia illo vitae alias obcaecati nulla
              porro quisquam, praesentium id vel ex culpa deleniti neque reiciendis officiis nisi
              quaerat.
            </p>
          </section>
          <picture class="img">
            <source media="(min-width: 900px)" srcset="imgs/template1000.jpg" />
            <img src="imgs/template500.jpg" alt="template500" />
          </picture>
        </div>
        <button id="scroll-button" title="Gå till toppen">
          <i class="fas fa-arrow-up"></i>
        </button>
      </main>
      <footer>
        <ul class="list">
          <li>
            <a href="#" class="active">Hem</a>
          </li>
          <li>
            <a href="html/losenord.html">Lösenord</a>
          </li>
          <li>
            <a href="html/sakerhetshot.html">Säkerhetshot</a>
          </li>
          <li>
            <a href="html/statlig-kontroll.html">Statlig kontroll</a>
          </li>
          <li>
            <a href="html/tredjepartskod.html">Tredjepartskod</a>
          </li>
          <li>
            <a href="html/webbhotell.html">Webbhotell</a>
          </li>
        </ul>
        <hr />
        <p class="copyright">Copyright &copy; All rights reserved by Vincent Cornelius</p>
      </footer>
    </div>
  </body>
</html>

I’m trying to add exemplars to the metrics generated in my Javascript based API. I’m using the opentelemetry JS API and SDK to instrument my code.

This is my counter.

/**
 * Using a counter to measure the total number of posts received by the API
 */
exports.postCount = apiMeter.createCounter('api.posts.count.total', {
    description: "Total number of posts received",
    unit: "posts"
});

And I increment in conditionally

// inside the condition
postCount.add(1)

How do I add the exemplars using Opentelemetry API? I tried adding my Trace Context as labels like this

postCount.add(1, {trace_id: xxxxeeia});

but I figured later it’s the wrong way to do it.

I have an issue which I want to get all the data from list, so I want to loop every single data from selected items and insert it to database,
currently it returns the data like this when I print it ['[object Object]', '[object Object]'],
how can I insert these data one by one? or just print it one by one?

I have this list which is selected_items I loop the data and then pass it to ajax

selected_items = []; 
for (var i = 0; i < checkBoxes.length; i++) {        
     var selected_obj ={ 
        stock_id: checkBoxes[i].id,
        quantity: row.cells[3].innerHTML
      }
      selected_items.push(selected_obj);
}

when console the selected_items it’s just like this

so now I want to pass these list to django using ajax

console.log(selected_items);
  $.ajax({
      type: "POST",
      url: "{% url 'sales-item' %}",
      data:{
        multiple_list: selected_items.join(','), item_size: selected_items.length
      }
  }).done(function(data){...

views.py

out_items = request.POST.getlist('multiple_list[]')
print(out_items)

and it prints like this

['[object Object]', '[object Object]']

I’m working on a JavaScript project that uses Firebase Firestore. I have a file called index.js that initializes Firebase and exports a few functions, and another file sort.js that imports these functions and uses them. However, when I try to run my project, I’m getting an error that seems to indicate that sort.js can’t import the functions from index.js.

Here is my index.js:

import { initializeApp } from "firebase/app";
import { getFirestore, addDoc, collection } from "firebase/firestore";

const firebaseConfig = {
  apiKey: ,
  authDomain:,
  databaseURL: ,
  projectId: ,
  storageBucket: ,
  messagingSenderId: ,
  appId: ,
  measurementId: 
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// People tabel 
async function savePersonToFirestore(personData) {
  const { name, age, gender, group } = personData;
  try {
    const docRef = await addDoc(collection(db, "people"), {
      name: name,
      age: age,
      gender: gender,
      group: group,
    });
    console.log("Person data saved with ID: ", docRef.id);
    return docRef.id;
  } catch (error) {
    console.error("Error saving person data: ", error);
    throw error;
  }
}

// Rooms
async function saveRoomToFirestore(roomData) {
  const { name, seats } = roomData;
  try {
      const docRef = await addDoc(collection(db, "rooms"), {
          name: name,
          seats: seats,
      });
      console.log("Room data saved with ID: ", docRef.id);
      return docRef.id;
  } catch (error) {
      console.error("Error saving room data: ", error);
      throw error;
  }
}

export { db, savePersonToFirestore, saveRoomToFirestore };

THis is my sort.js code:

import { collection, query, orderBy, onSnapshot } from "firebase/firestore";
import { db, saveRoomToFirestore } from "../index.js";

document.addEventListener('DOMContentLoaded', () => {
    const roomForm = document.getElementById('room-form');
    const roomsContainer = document.getElementById('rooms-container');

    // Fetch and display existing rooms from Firestore
    fetchRoomsFromFirestore(roomsContainer);

    roomForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        const roomName = document.getElementById('room-name').value;
        const seats = document.getElementById('seats').value;

        try {
            const roomId = await saveRoomToFirestore({ name: roomName, seats: parseInt(seats) });

            // Clear input fields
            roomForm.reset();

        } catch (error) {
            console.error('Error saving room to Firestore:', error);
        }
    });
});

function fetchRoomsFromFirestore(roomsContainer) {
    const roomsRef = collection(db, 'rooms');
    const roomsQuery = query(roomsRef, orderBy('name', 'asc'));

    roomsContainer.innerHTML = '';

    onSnapshot(roomsQuery, (querySnapshot) => {
        querySnapshot.forEach((doc) => {
            const roomData = doc.data();

            const roomElement = document.createElement('div');
            roomElement.classList.add('room');
            roomElement.innerHTML = `<strong>${roomData.name}</strong> - Seats: ${roomData.seats}`;

            roomsContainer.appendChild(roomElement);
        });
    }, (error) => {
        console.error("Error fetching rooms: ", error);
    });
}

I checked the file paths, checked the export statements, checked the package.json file, checked the wepack.config.cjs, Reinstalled Node Modules.

I’m building a music app, I’m trying to use an event listner that when I click on each song the song plays, and the details of the song get added to the playing now section and the equalizer strats moving, The problem is when Click the first time it doesn’t work the sconde it works the third it the does’nt …, here is an example of what I’m doing.

[1] : https://i.stack.imgur.com/FI9sI.png

My Code :

const playingNow = document.querySelector('.song-p-now');
const equalizer = document.querySelectorAll('.eq')
const btns = Array.from(document.querySelectorAll('.song-details'));

const music = [
    {
    img: 'img/2.jpg',
    id:1,
    songName: 'Am I Wrong',
    audio : new Audio('audio/Am-I-wrong.mp3'),
    artist: 'Nico & Vinz',
    },
    {
    img: 'img/3.jpg',
    id:2,
    songName: 'Sex,Drugs,Etc',
    audio : new Audio('audio/Sex-Drugs-Etc.mp3'),
    artist: 'Beach Weather',
    
    },
    

    {
    img: 'img/7.jpg',
    id:3,
    songName: 'Me Myself & I ',
    audio : new Audio('audio/Me-Myself-I.mp3'),
    artist: 'G-easy',
    },

    {
    img: 'img/4.jpg',
    id:4,
    songName: 'Blood In The Water',
    audio : new Audio('audio/Blood-In-The-Water.mp3'),
    artist: 'grandson',  
    },

    {
    img: 'img/5.jpg',
    id:5,
    songName: 'Eastside',
    audio : new Audio('audio/Eastside.mp3'),
    artist: 'Benny Blanco',
    },

    {
    img: 'img/6.jpg',
    id:6,
    songName: 'Everything Black ',
    audio : new Audio('audio/Everything-Black.mp3'),
    artist: 'Unlike Puto',
    
    },
    
]



let isPlaying = true;


const btnsLoop = () => {
    for (j = 0; j < btns.length; j++) {
        const musicObject = music[j];
        const { img, id, songName, audio, artist } = musicObject;
        
    
        btns[j].addEventListener('click', () => {
            playingNow.innerHTML = `<div class="song-poster"><img src="${img}" alt=""></div>
            <div class="song-artist-name">
                <div class="song-name">${songName}</div>
                <div class="artist-name">${artist}</div>
            </div>`

            music.forEach(element => {
              element.audio.pause();
            });
            if (isPlaying) {
                musicObject.audio.play();
                equalizer.forEach((eq) => {
                eq.classList.add('animation');
                })
                isPlaying = false;
            }
            else {
                musicObject.audio.pause();
                musicObject.audio.currentTime = "0";
                equalizer.forEach((eq) => {
                    eq.classList.remove('animation');
                })
                isPlaying = true;
            }
            
  
            
          });
    }
}

btnsLoop();

I’m using JavaScript to select an HDF5 file on the client-side and send it to a Julia server. The Julia server is supposed to save the file and then read data from it. The read data should then be sent back to the web application.

However, I’m encountering an error when trying to save the file on the server. Despite the error, the file is actually being saved correctly.

Furthermore, I have also ruled out any issues with returning the data to the web application, as everything works fine when I exclude the write_h5 function and only read an existing file. This suggests that the problem lies specifically with the write_h5 function or the process of saving the HDF5 file on the server.

I hope i presented my problem clearly.
Thank you in advance for your assistance and support in resolving my issue.

Activating project at `~/julia`
[ Info: Listening on: 127.0.0.1:8081, thread id: 1
┌ Error: handle_connection handler error
│   exception =
│    IOError: write: broken pipe (EPIPE)
│    Stacktrace:
│      [1] uv_write(s::Sockets.TCPSocket, p::Ptr{UInt8}, n::UInt64)
│        @ Base ./stream.jl:1064
│      [2] unsafe_write(s::Sockets.TCPSocket, p::Ptr{UInt8}, n::UInt64)
│        @ Base ./stream.jl:1118
│      [3] unsafe_write
│        @ ~/.julia/packages/HTTP/NVWp3/src/Connections.jl:122 [inlined]
│      [4] write
│        @ ./strings/io.jl:244 [inlined]
│      [5] write
│        @ ./io.jl:674 [inlined]
│      [6] unsafe_write(http::HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.Connections.Connection{Sockets.TCPSocket}}, p::Ptr{UInt8}, n::UInt64)
│        @ HTTP.Streams ~/.julia/packages/HTTP/NVWp3/src/Streams.jl:95
│      [7] write
│        @ ./strings/io.jl:244 [inlined]
│      [8] write(io::HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.Connections.Connection{Sockets.TCPSocket}}, s::Base.CodeUnits{UInt8, String})
│        @ Base ./strings/basic.jl:758
│      [9] (::HTTP.Handlers.var"#1#2"{typeof(handle_requests)})(stream::HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.Connections.Connection{Sockets.TCPSocket}})
│        @ HTTP.Handlers ~/.julia/packages/HTTP/NVWp3/src/Handlers.jl:61
│     [10] #invokelatest#2
│        @ ./essentials.jl:729 [inlined]
│     [11] invokelatest
│        @ ./essentials.jl:726 [inlined]
│     [12] handle_connection(f::Function, c::HTTP.Connections.Connection{Sockets.TCPSocket}, listener::HTTP.Servers.Listener{Nothing, Sockets.TCPServer}, readtimeout::Int64, access_log::Nothing)
│        @ HTTP.Servers ~/.julia/packages/HTTP/NVWp3/src/Servers.jl:447
│     [13] (::HTTP.Servers.var"#16#17"{HTTP.Handlers.var"#1#2"{typeof(handle_requests)}, HTTP.Servers.Listener{Nothing, Sockets.TCPServer}, Set{HTTP.Connections.Connection}, Int64, Nothing, Base.S

Julia and package versions:

julia> versioninfo()
  Julia Version 1.8.2
  Commit 36034abf260 (2022-09-29 15:21 UTC)
  Platform Info:
    OS: macOS (x86_64-apple-darwin21.4.0)
    CPU: 8 × Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    WORD_SIZE: 64
    LIBM: libopenlibm
    LLVM: libLLVM-13.0.1 (ORCJIT, skylake)
    Threads: 1 on 8 virtual cores

(julia) pkg> st
  Status `~/Project.toml`
    [f67ccb44] HDF5 v0.16.14
    [cd3eb016] HTTP v1.8.1
    [682c06a0] JSON v0.21.4

My Julia code:

using HTTP,HDF5,JSON

function handle_requests(req::HTTP.Request)
    if startswith(req.target, "/process-file")
        return process_file(req)
    end
    return HTTP.Response(404, CORS_RES_HEADERS, "Not found")
end

HTTP.serve(handle_requests, "127.0.0.1", 8081)

dir  = "tmp"

function write_h5(filename,data)
    file = joinpath(dir, "$(filename)")    
    open(file, "w") do fid
         write(fid, data)
    end
end

function read_h5()
    file = readdir(dir,join=true)[1]
    fid  = HDF5.h5open(file, "r")["Data"]
    data = fid["data"] |> read
    d = Dict("data" => data)
    close(fid)
    return d
end

function process_file(req::HTTP.Request)   
    multipart = HTTP.parse_multipart_form(req)
    filename = multipart[1].filename
    filedata =  multipart[1].data |> read 
    write_h5(filename,filedata)
 
    d = read_h5()

    result = Dict(
        "message" => "File saved successfully",
        "data" => d
    )
 
       return HTTP.Response(200, CORS_RES_HEADERS, JSON.json(result))

end

My HTML code:

<input type="file" id="browse-measurements" accept="application/x-hdf,application/x-hdf5"/> 

My JavaScript code:

// Browse on PC
  async function sendFileToServer(file) {
     const formData = new FormData();
     formData.append("file", file);
      
     const response = await fetch("http://127.0.0.1:8081/process-file", {
         method: "POST",
         body: formData,
         header: {
           "Access-Control-Allow-Origin": "*",
           "Access-Control-Allow-Methods":"GET, OPTIONS, HEAD, PUT, POST"},
     });  
     const result = await response.json();
     console.log("Ergebnis vom Server:", result.message);
  }
  
  document.getElementById("browse-measurements").addEventListener("change", async (event) => {
      const file = event.target.files[0];
      if (!file) return;
      await sendFileToServer(file);
  });

I’m using chromium embedded in my application. Using it, I would like to load the web-version of Visual Studio Code ( https://vscode.dev/ ), and then automatically open a specific directory on the device, without the user having to do it manually.

I’m sure this is possible using JavaScript (even if not officially supported), but I’m not sure how to find out which commands are responsible for opening a folder. When you press “Open Folder…” in VS Code, it opens a file dialog window where you can select the target directory. If I could break when a folder has actually been selected (and confirmed), I could probably narrow it down, but I couldn’t find a listener even that would work for such a case.

Is there a simple way to do this without having to take a deep dive into the entire source code?

I have the following API call and a local activesubscribers = {} variable

//Add Subscriber to the List
app.post("/AddSubscriber", (req, res) => {
  const { Name, EmailAddress } = req.body;

  request(
    {
      method: "POST",
      uri: "https://website.json}",
      headers: {
        Authorization:
          "Bearer" +
          "+0znPsUJtRLLInRp",
      },
      body: JSON.stringify(Name, EmailAddress),
    },
    function (error, response, body) {
      if (error) {
        console.error(error);
      }
      const data = JSON.parse(body);
    }
  );
});

the response from the api looks like this :

{
    "Results": [
        {
            "EmailAddress": "[email protected]",
            "Name": "Person One",
        }
    ]
}

what i want is to get the API’s response and store it to the activesubscribers = {} variable so i can make a validation if the user already exists in req.body user data already exist. What i have tried so far is activesubscribers = JSON.parse(data) but im stuck.

When I try to use this moment for a date having an issue with IOS it’s not getting reflected as expected, but on Desktop and Android the date is displayed only in IOS its showing as “Invalid date”, so please help me to solve this issue ASAP, Thanks in Advance

{(this.state.apidata.length > 0 ? (this.state.apidata[0].startdate ? moment(this.state.apidata[0].startdate).locale((this.state.Language === ‘English’ ? ‘en’ : ‘ar’)).format(“MMM YYYY”) : moment(this.state.projectData.ProjectStartDate).locale((this.state.Language === ‘English’ ? ‘en’ : ‘ar’)).format(“MMM YYYY”)) : moment(this.state.projectData.ProjectStartDate).locale((this.state.Language === ‘English’ ? ‘en’ : ‘ar’)).format(“MMM YYYY”))}

Tried with _monthsShort but it’s raising an error

I want to implement this page https://tidio.com/panel/bots/create with React. Does anyone know what library or tool to use to connect these commands to each other? How can I implement this page with exactly the same graphic appearance with React?Thank you for helping me

I have following code

function delay(f, ms) {
    return new Proxy(f, {
        apply(target, thisArg, args) {
            console.log(this)
            console.log(thisArg)
            setTimeout(() => f.apply(thisArg, args), ms)
        }
    })
}

function sayHi(user) {
    alert(`Hello, ${user}!`);
}

sayHi = delay(sayHi, 3000);


let container = {
    f: sayHi
}

container.f("Paul")

Why is this inside apply function equal to {apply: f} and not to the container object.
This is the object before dot, isn’t it?

I got a problem loading files for later use:

let moduleDefaults = new Map();

const registerComponents = () => {
    // ^ Check for .ce files -> then register components
    for (const [key, value] of Object.entries(filePaths)) {
        if (value.name.toLowerCase().includes(".ce.vue")) {
            let name = value.name.split(/[\/]/).pop().toLowerCase(),
                tagName = name.substr(0, name.indexOf('.'));

            // Problem arises here
            // The module get's initialized and loads all CSS into the DOM 
            value().then(module => {
                moduleDefaults.set(name.substr(0, name.indexOf('.')), module.default);
                customElementsMap.set(tagName, defineCustomElement(moduleDefaults.get(tagName)));
                window.customElements.define("pk-custom-" + tagName, customElementsMap.get(tagName));
            });
        }
    }
}

I want to initialize the webcomponents on page load to render them as soon as I need them.
The CSS files should be scoped inside the components scope. When I initialize them using

value().then(module => { ...

The CSS files (Tailwind in this case) is available in the global scope and affecting the style which is definitely not wanted. Is there a way to keep the CSS scope to the components?

I need some help. I have a nav-bar and I want my username to be shown on a button and when you click that, a dropdown with multiple actions should appear. I saw in angulars documentation that this is not hard to do, but I have a problem when the dropdown is displayed.

As it can be seen, when I press the “menu” button, the Items are on the left side of the page under my page container. Here is my code:

  <nav
    class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"
  >
    <div class="container">
      <a class="navbar-brand" [routerLink]="['/']">What's up doc?</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target=".navbar-collapse"
        aria-label="Toggle navigation"
        [attr.aria-expanded]="isExpanded"
        (click)="toggle()"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div
        class="navbar-collapse collapse d-sm-inline-flex justify-content-end"
        [ngClass]="{ show: isExpanded }"
      >
        <ul *ngIf="userInfo" class="navbar-nav flex-grow">
          <li
            class="nav-item"
            [routerLinkActive]="['link-active']"
            [routerLinkActiveOptions]="{ exact: true }"
          >
            <a class="nav-link text-dark" [routerLink]="['/']">Home</a>
          </li>
          <li class="nav-item" [routerLinkActive]="['link-active']">
            <a class="nav-link text-dark" [routerLink]="['/counter']"
              >Counter</a
            >
          </li>
          <li class="nav-item" [routerLinkActive]="['link-active']">
            <a class="nav-link text-dark" [routerLink]="['/fetch-data']"
              >Fetch data</a
            >
          </li>
          <div *ngIf="userInfo" class="user-section-holder">
            
            <button mat-button [matMenuTriggerFor]="menu">Menu</button>
              <mat-menu #menu="matMenu" [overlapTrigger]="false">
                <button mat-menu-item>Item 1</button>
                <button mat-menu-item>Item 2</button>
              </mat-menu> 
          </div>
        </ul>
      </div>
    </div>
  </nav>
</header>

This is the array of prices from which I want to remove all the values of “price~”(and Not price_enquire~) except for the filter of the price at the last or the latest. I can’t just pick the last index because there can be another filter at the last too like gende~male or anything e.t.c,

let prices = [
    "price~960822 TO 8000000",
    "price~1175308 TO 8000000",
    "price_enquire~No",
    "price~660541 TO 8000000",
    "color~red"
]

The desired result I want

newArray=[
    "price_enquire~No",
    "price~660541 TO 8000000",
    "color~red"
]

As the price~ at the last was the latest so Leaving that all the other old price~ should be removed.