Category: javascript

Category Added in a WPeMatico Campaign

Edit a property inside an array getting the index

Currently learning Vue. In the next code I´m trying to store the global index of an element with a function clicking an icon, and then load a little menu with an input for edit the descriptionText property and don´t alter other elements with the same properties, but it doesn´t work. I´m confused

I´m using vue-draggable-next (npm install vue-draggable-next) for drag and drop

And I´m using Sweetalert2 (npm install sweetalert2)

I looked around internet and a possible way to fix it is use this, but I´m going to migrate JS logic to a folder and use this would be a big error

<template>
  <head>
    <!-- Boxicons -->
    <link
      href="https://unpkg.com/[email protected]/css/boxicons.min.css"
      rel="stylesheet"
    />
  </head>

  <div class="container-fluid row mt-2">
    <div class="col-md-3 float-start">
      <div class="panel-default border" style="background-color: #f7f9fa">
        <div class="panel-heading text-center">
          <h3 class="panel-title visible-panel-text">Draggable elements</h3>
        </div>

        <!-- Elements zone -->
        <draggable
          class="row mt-2"
          :list="draggableElements"
          :sort="false"
          :group="{ name: 'cloneableItems', pull: 'clone', put: false }"
          @end="generateJSON"
        >
          <div
            class="col-sm-6 mb-2"
            v-for="element in draggableElements"
            :key="element.id"
          >
            <div class="border drag-element">{{ element.visibleName }}</div>
          </div>
        </draggable>

        <!-- Copy JSON panel -->
        <div
          class="panel-json json-container mt-2 border"
          style="background-color: #f7f9fa"
        >
          <div
            class="panel-heading text-center"
            @click="state.showJSONPanel = !state.showJSONPanel"
          >
            <h3
              class="panel-title"
              style="text-align: center; cursor: pointer; user-select: none"
            >
              JSON
            </h3>
          </div>
          <div class="panel-body" v-show="state.showJSONPanel">
            <textarea
              class="json-textarea form-control"
              v-model="state.generatedJSON"
              style="width: 90%; margin: 0 auto; resize: none"
            ></textarea>
            <button class="btn btn-secondary btn-sm" @click="copyJSON">
              Copy JSON
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <!-- Show content -->
      <draggable
        class="w-100 h-100 border"
        :empty-insert-threshold="1000"
        :list="state.contentElements"
        @update="generateJSON"
        :group="{ name: 'putItems', pull: 'clone', put: true }"
      >
        <div
          v-for="element in state.contentElements"
          :key="element.id"
          class="container"
        >
          <template v-if="element.type == 'description'">
            <label>This is the description element</label>
            <div>{{ element.descriptionText }}</div>
          </template>

          <!-- Edit & delete -->
          <div
            class="iterable-icons-container"
            style="display: flex; justify-content: flex-end"
          >
            <!-- Edit icon -->
            <i class="bx bxs-cog edit-icon" @click="editElement(index)"></i>
            <!-- Delete icon -->
            <i class="bx bxs-trash-alt edit-icon" @click="deleteElement()"></i>
          </div>
        </div>
      </draggable>
    </div>

    <!-- Changes panel -->
    <div class="col-md-3 border">
      <div>
        <!-- Description -->
        <template
          v-if="
            state.editedIndex >= 0 &&
            state.contentElements[state.editedIndex].type == 'description'
          "
        >
          <label><strong>Description element</strong></label>
          <input type="text" v-model="edit.descriptionNewText" />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import "bootstrap";
import "bootstrap/dist/css/bootstrap.css";

import { reactive, ref } from "vue";

//Drag and drop library
import { VueDraggableNext as draggable } from "vue-draggable-next";

//Sweetalert
import Swal from "sweetalert2";
import "sweetalert2/dist/sweetalert2.min.css";

//Array with the main elements list
const draggableElements = [
  {
    id: crypto.randomUUID(),
    visibleName: "Description",
    descriptionText: "This is a description that you can edit",
    type: "description",
    mandatory: false,
  },
];

//Variable where the data flows
let state = reactive({
  //Store a global index to edit
  editedIndex: ref(-1),
  contentElements: reactive([]),
  showJSONPanel: ref(false),
  generatedJSON: ref(""),
});

//eslint-disable-next-line
let edit = reactive({
  descriptionNewText: ref(""),
});

function copyJSON() {
  const textarea = document.querySelector(".json-textarea");
  textarea.select();
  document.execCommand("copy");
  Swal.fire("Success", "JSON copied", "success");
}

function generateJSON() {
  //Actualizar valor del textarea
  let textarea = document.querySelector(".json-textarea");
  textarea.value = state.generatedJSON;

  //Generar el archivo JSON de acuerdo a lo puesto por el usuario
  state.generatedJSON = JSON.stringify(state.contentElements, null, 2);
}

//Edit
function editElement(index) {
  console.log("Button pressed");
  state.editedIndex = index;

  console.log("Index is: ", state.editedIndex)
}

//Delete element
//Eliminar elemento del panel de construcción del formulario
function deleteElement(index) {
  Swal.fire({
    title: "Confirm delete",
    text: "Are you sure?",
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: "Yes, delete",
    cancelButtonText: "Cancel",
  }).then((result) => {
    if (result.isConfirmed) {
      state.contentElements.splice(index, 1);
      state.generatedJSON = JSON.stringify(state.contentElements, null, 2);
    }
  });
}
</script>

<style scoped>
.drag-element {
  cursor: pointer;
}

.edit-icon {
  font-size: 25px;
}
.edit-icon:hover {
  color: blueviolet;
  cursor: pointer;
}
</style>

I tried to solve for myself during 2 days, but didn´t work

Trying to deep merge on type level

I have a JavaScript mergeDeep function that recursively merges objects and arrays. It works as expected in terms of functionality, but I want to improve it by ensuring that the return type of the merged object accurately represents the combination of the target and source types. The current implementation does not provide this type information.

Here’s the function for reference:

function mergeDeep(target, ...sources) {
  if (!sources.length) return target;

  const source = sources.shift();

  for (const key in source) {
    if (!Object.prototype.hasOwnProperty.call(source, key)) continue;

    const targetValue = target[key];
    const sourceValue = source[key];

    if (isArray(targetValue) && isArray(sourceValue)) {
      target[key] = targetValue.concat(sourceValue);
    } else if (isObject(targetValue) && isObject(sourceValue)) {
      target[key] = mergeDeep(Object.assign({}, targetValue), sourceValue);
    } else {
      target[key] = source[key];
    }
  }

  return mergeDeep(target, ...sources);
}

I’ve tried various modifications to the function, but I’m unsure how to achieve the desired return type. My goal is to have the return type inferred correctly for different merge scenarios, such as:

mergeDeep({ numbers: [1, 2, 3]}, [4, 5, 6]) // Return type should be { 0: number, 1: number, 2: number, numbers: number[] }
mergeDeep({ strings: ['a', 'b', 'c']}, { strings: ['d', 'e', 'f']}) // Return type should be { strings: string[] }
mergeDeep({ foo: ['bar']}, { foo: [55]}) // Return type should be { foo: (string | number)[] }
mergeDeep({ a: 1 }, { b: 2 }) // Return type should be { a: number, b: number }
mergeDeep({ a: 1 }, { a: 2 }) // Return type should be { a: number }
mergeDeep({ a: { b: 1 } }, { a: { c: 2 } }) // Return type should be { a: { b: number, c: number } }

How to stop navigation in useMutation

I have a signup form and I am using useMutation to post the request to database and on successful login I want to show a snackbar and then navigate to other page, but in my case it is not happening it immediately navigates to other page with showing snackbar, i want it to show and the navigate.

useMutation({
 mutationFn: fnname,
 onSuccess: () => {
 setOpen(true);
navigate("/somepath");
}
})

This setOpen is for React material sanckbar

How do I make the min-height of div change depending on the height of its child items?

I have a page made with plain html, css, and javascript that is completely responsive horizontally. It is only when I start shrinking the page vertically that I start to run into issues. Reason being because my page structure is a bit unorthodox. How my page works is that it’s divided into four parent containers with a height of 100%. Upon shrinking the page vertically, those containers’ items will start to overflow since the four parent containers are trying to keep the height of the window. The simple fix would be to add a min-height to these parent containers so before the items are able to overflow, the parent containers stop scaling to the height of the window. However, this leaves me with one problem. The items in the parent container get smaller and also change their layout upon shrinking the width of the window. So if I set the min-height of the parent container to a fixed value that would leave its items mere pixels from overflowing, all of a sudden, if the width of the page window changes that fixed value will no longer work anymore since the items are constantly changing sizes depending on the width of the window. Thus changing what size the parent container will be before the items will overflow. What would be the best way to solve this problem and get a responsive min-height? If this issue can be resolved, my page will be completely responsive. Thanks in advance; any reply is greatly appreciated!

Here is the codepen to my page: https://codepen.io/COMMANDERY11/pen/Vwqjpwv

Just to clarify, my code is just slightly different from how I described it above. Basically my code does have the four parent containers, but in those parent containers is another container that takes up 90% of the width and height of the parent. This is because I want a cool video border effect. To do that, the parent container simply has a video/gif as its background and the container within that has the 90% width and height has a white background. The items are in this white container. I’ve tried using a min-height of 100% on the white container and give it a height of fit-content + Xpx but the borders of the backing video on its parent seem to vanish upon shrinking.

<!DOCTYPE html>
<html>

<head>
  <title>Adam's Website - Creative Design</title>
  <link rel="stylesheet" href="./creative_design.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300&display=swap" rel="stylesheet">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
</head>

<body>

  <div class="navbar">
    <a href="./home.html">
      <img class="navbar_logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa7bzddXqTB3wiGP7mDgrof4mdzWEfjVkXOg&usqp=CAU"/>
    </a>
    <div class="navbar_buttons">
      <button class="blue_button">Sign Up</button>
      <button class="blue_button">Log In</button>
    </div>
  </div>

  <div id="site_redesign" class="personal_package_division">
    
    <img src="https://media.tenor.com/sorHkexPZDwAAAAC/particles.gif" class="personal_package_division_backing_video"></img>

    <div class="personal_package_white_container">
      <div class="site_redesign_description fade_in">
        <h2 class="personal_package_description_header">New traffic strategy?</h2>
        <p class="personal_package_description_paragraph">Team up with a top<br> SEO specialist.<br> Expand your network,<br> create new paths, and grow your brand.</p>
      </div>

      <div class="site_redesign_functionality">
        <h1 class="personal_package_title">Site Re-design</h1>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa7bzddXqTB3wiGP7mDgrof4mdzWEfjVkXOg&usqp=CAU"/>
        <div class="button_group">
          <button class="blue_button">Full Site</button>
          <button class="blue_button">One Pager</button>
        </div>
      </div>

      <div class="ad">
      </div>
    </div>
  </div>

  <div id="creative_consultations" class="personal_package_division">
    <img src="https://media.tenor.com/sorHkexPZDwAAAAC/particles.gif" class="personal_package_division_backing_video"></img>

    <div class="personal_package_white_container">
      <div class="creative_consultations_description fade_in">
        <h2 class="personal_package_description_header">Writer's block wizard!</h2>
        <p class="personal_package_description_paragraph">With the endless supply of creativity<br> we can get to the core<br> story, personalize, internalize<br> and create.</p>
      </div>

      <div class="creative_consultations_functionality">
        <h1 class="personal_package_title">Creative Consultations</h1>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa7bzddXqTB3wiGP7mDgrof4mdzWEfjVkXOg&usqp=CAU"/>
        <div class="button_group">
          <button class="blue_button">Contact Me</button>
        </div>
      </div>

      <div class="ad">
      </div>
    </div>
  </div>

  <div id="asset_creation" class="personal_package_division">
    <img src="https://media.tenor.com/sorHkexPZDwAAAAC/particles.gif" class="personal_package_division_backing_video"></img>

    <div class="personal_package_white_container">
      <div class="asset_creation_description fade_in">
        <h2 class="personal_package_description_header">Mind the gap.</h2>
        <p class="personal_package_description_paragraph">Pick your custom asset team or individual.<br> The high quality asset creators are for<br> your every day projects,<br> although on an on call schedule.</p>
      </div>

      <div class="asset_creation_functionality">
        <h1 class="personal_package_title">Asset Creation</h1>
        <div class="asset_creation_slider">
          <div class="asset_creation_slides">

            <input type="radio" name="radio-btn" id="asset_creation_radio1">
            <input type="radio" name="radio-btn" id="asset_creation_radio2">
            <input type="radio" name="radio-btn" id="asset_creation_radio3">

            <div class="asset_creation_slide first">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa7bzddXqTB3wiGP7mDgrof4mdzWEfjVkXOg&usqp=CAU" alt="">
            </div>
            <div class="asset_creation_slide">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa7bzddXqTB3wiGP7mDgrof4mdzWEfjVkXOg&usqp=CAU" alt="">
            </div>
            <div class="asset_creation_slide">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa7bzddXqTB3wiGP7mDgrof4mdzWEfjVkXOg&usqp=CAU" alt="">
            </div>

          </div>

          <div class="asset_creation_navigation-manual">
            <label for="asset_creation_radio1" class="manual-btn"></label>
            <label for="asset_creation_radio2" class="manual-btn"></label>
            <label for="asset_creation_radio3" class="manual-btn"></label>
          </div>

        </div>

        <div class="button_group">
          <button class="blue_button">N/A</button>
          <button class="blue_button">N/A</button>
        </div>
      </div>

      <div class="ad">
      </div>
    </div>
  </div>

  <div id="no_code_websites" class="personal_package_division">
    <img src="https://media.tenor.com/sorHkexPZDwAAAAC/particles.gif" class="personal_package_division_backing_video"></img>

    <div class="personal_package_white_container">
      <div class="no_code_websites_description fade_in">
        <h2 class="personal_package_description_header">Platform for brands.</h2>
        <p class="personal_package_description_paragraph">Minimum 5 pages of your creative choice,<br> a few creative design meetings,<br> complete access, security and control,<br> and a free 1 year domain in your name.</p>
      </div>
      <div class="no_code_websites_functionality">
        <h1 class="personal_package_title">No-Code Websites</h1>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa7bzddXqTB3wiGP7mDgrof4mdzWEfjVkXOg&usqp=CAU"/>
        <div class="button_group">
          <button class="blue_button">N/A</button>
          <button class="blue_button example_website_button">Example Website</button>
          <button class="blue_button">N/A</button>
        </div>
      </div>
      <div class="ad">
      </div>
    </div>
  </div>

  <script type="text/javascript" src="C:UsersizayaOneDriveDocumentsHTML DocumentsMy ProjectsAdam's WebsiteAdamsWebsiteReposcript.js" defer></script>
  <body>

</html>

/*Base Code*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Barlow", sans-serif;
  font-weight: bold;
  color: black;
  scroll-behavior: smooth;
  border: 1px blue solid;
}

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

body {
  width: 100%;
  height: 100%;
  overflow: auto;
}

img {
  width: 100%;
}

/*Utility Classes*/
.fade_in {
  opacity: 0;
  transition: opacity 750ms ease-in;
}

.fade_in.appear {
  opacity: 1;
}

.personal_package_division {
  flex-grow: 1;
  flex-shrink: 0;
  padding: 1rem;
  flex-direction: column;
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 800px;
  scroll-snap-align: start;
}

.personal_package_division_backing_video {
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.personal_package_white_container {
  margin: auto;
  flex-shrink: 0;
  padding: 1rem;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  width: 95%;
  height: 95%;
}

.personal_package_description_header {
  font-size: clamp(2.5rem, 2.5vw, 3rem);
}

.personal_package_description_paragraph {
  font-size: clamp(1.4rem, 1.25vw, 1.5rem);
}

.personal_package_title {
  font-family: "Anton", sans-serif;
  font-size: clamp(2rem, 4.5vw, 5rem);
}

.button_group {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.blue_button {
  background-color: #b8eefc;
  border-radius: 6px;
  font-family: "Barlow", sans-serif;
  font-weight: bold;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  padding: 1em 1.25em;
  transition-duration: 0.2s;
}
.blue_button:hover {
  font-size: 1.25rem;
  background-color: white;
  cursor: pointer;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.ad {
  width: clamp(200px, 20%, 400px);
  aspect-ratio: 4/8;
}

/*Navbar*/
.navbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 0% 5%;
  pointer-events: none;
}

.navbar_logo {
  width: clamp(70px, 10vw, 90px);
  transition-duration: 0.2s;
  pointer-events: auto;
}
.navbar_logo:hover {
  width: clamp(80px, 12.5vw, 100px);
  cursor: pointer;
}

.navbar_buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
  gap: 50px;
}

/*Site Redesign*/
.site_redesign_functionality {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: clamp(200px, 40%, 800px);
  gap: 30px;
}

/*Creative Consultations*/
#creative_consultations .personal_package_division_backing_video {
  transform: scaleY(-1);
}

.creative_consultations_functionality {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: clamp(200px, 30%, 500px);
  gap: 30px;
}
.creative_consultations_functionality .blue_button {
  width: 100%;
}

/*Asset Creation*/
.asset_creation_functionality {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: clamp(400px, 40%, 800px);
  gap: 50px;
}

.asset_creation_slider {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.asset_creation_slides {
  width: 500%;
  display: flex;
}
.asset_creation_slides input {
  display: none;
}

.asset_creation_slide {
  width: 20%;
  transition: 2s;
}
.asset_creation_slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*Manual Carosel Navigation*/
.asset_creation_navigation-manual {
  position: absolute;
  width: 100%;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn {
  border: 2px solid black;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}
.manual-btn:not(:last-child) {
  margin-right: 40px;
}
.manual-btn:hover {
  background: black;
}

#asset_creation_radio1:checked ~ .first {
  margin-left: 0;
}

#asset_creation_radio2:checked ~ .first {
  margin-left: -20%;
}

#asset_creation_radio3:checked ~ .first {
  margin-left: -40%;
}

/*No Code Websites*/
#no_code_websites .personal_package_division_backing_video {
  transform: scaleY(-1);
}

.no_code_websites_functionality {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: clamp(400px, 50%, 1000px);
  gap: 30px;
}
.no_code_websites_functionality .example_website_button {
  background-color: #ca74fc;
}
.no_code_websites_functionality .example_website_button:hover {
  background-color: white;
}

@media (max-width: 1280px) {
  /*Site Redesign Responsiveness*/
  #site_redesign .personal_package_white_container {
    display: grid;
    grid-template-columns: clamp(300px, 60%, 700px) clamp(200px, 30%, 350px);
    justify-content: center;
    align-content: center;
    grid-template-areas: "functionality ads" "description ads";
    grid-gap: 20px;
  }
  #site_redesign .personal_package_white_container .ad {
    grid-area: ads;
    width: 100%;
    height: 100%;
  }
  .site_redesign_functionality {
    width: 100%;
    grid-area: functionality;
    gap: 20px;
  }
  .site_redesign_functionality .personal_package_title {
    font-size: clamp(3rem, 6vw, 4.25rem);
  }
  .site_redesign_description {
    grid-area: description;
  }
  .site_redesign_description .personal_package_description_header {
    font-size: clamp(2rem, 3.75vw, 2.5rem);
  }
  .site_redesign_description .personal_package_description_paragraph {
    font-size: clamp(1.15rem, 2vw, 1.25rem);
  }
  /*Creative Consultations Responsiveness*/
  #creative_consultations .personal_package_white_container {
    display: grid;
    grid-template-columns: clamp(200px, 50%, 600px) clamp(200px, 30%, 350px);
    justify-content: center;
    align-content: center;
    grid-template-areas: "functionality description" "functionality ads";
    grid-gap: 20px;
  }
  #creative_consultations .personal_package_white_container .ad {
    grid-area: ads;
    width: 100%;
    height: 100%;
  }
  .creative_consultations_functionality {
    grid-area: functionality;
    width: 100%;
    height: 100%;
    gap: 20px;
  }
  .creative_consultations_functionality .personal_package_title {
    font-size: clamp(3rem, 6vw, 4.25rem);
  }
  .creative_consultations_description {
    grid-area: description;
  }
  .creative_consultations_description .personal_package_description_header {
    font-size: clamp(2rem, 3.75vw, 2.5rem);
  }
  .creative_consultations_description .personal_package_description_paragraph {
    font-size: clamp(1.15rem, 2vw, 1.25rem);
  }
  /*Asset Creation Responsiveness*/
  #asset_creation .personal_package_white_container {
    display: grid;
    grid-template-columns: clamp(300px, 60%, 700px) clamp(200px, 30%, 350px);
    justify-content: center;
    align-content: center;
    grid-template-areas: "functionality ads" "description ads";
    grid-gap: 20px;
  }
  #asset_creation .personal_package_white_container .ad {
    grid-area: ads;
    width: 100%;
    height: 100%;
  }
  .asset_creation_functionality {
    width: 100%;
    grid-area: functionality;
    gap: 20px;
  }
  .asset_creation_functionality .personal_package_title {
    font-size: clamp(3rem, 6vw, 4.25rem);
  }
  .asset_creation_description {
    grid-area: description;
  }
  .asset_creation_description .personal_package_description_header {
    font-size: clamp(2rem, 3.75vw, 2.5rem);
  }
  .asset_creation_description .personal_package_description_paragraph {
    font-size: clamp(1.15rem, 2vw, 1.25rem);
  }
  /*No Code Websites Responsiveness*/
  #no_code_websites .personal_package_white_container {
    display: grid;
    grid-template-columns: clamp(300px, 60%, 700px) clamp(200px, 30%, 350px);
    justify-content: center;
    align-content: center;
    grid-template-areas: "functionality ads" "description ads";
    grid-gap: 20px;
  }
  #no_code_websites .personal_package_white_container .ad {
    grid-area: ads;
    width: 100%;
    height: 100%;
  }
  .no_code_websites_functionality {
    width: 100%;
    grid-area: functionality;
    gap: 20px;
  }
  .no_code_websites_functionality .personal_package_title {
    font-size: clamp(3rem, 6vw, 4.25rem);
  }
  .no_code_websites_description {
    grid-area: description;
  }
  .no_code_websites_description .personal_package_description_header {
    font-size: clamp(2rem, 3.75vw, 2.5rem);
  }
  .no_code_websites_description .personal_package_description_paragraph {
    font-size: clamp(1.15rem, 2vw, 1.25rem);
  }
}
@media (max-width: 640px) {
  .navbar_buttons {
    width: 180px;
    gap: 0px;
  }
  .personal_package_division {
    padding: 1% auto;
  }
  /*Site Redesign Responsiveness Phone*/
  #site_redesign .personal_package_white_container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
  }
  #site_redesign .personal_package_white_container .ad {
    order: 3;
    width: 90%;
    min-height: 125px;
    max-height: 175px;
  }
  .site_redesign_functionality {
    order: 1;
    width: 90%;
    gap: 25px;
  }
  .site_redesign_functionality .personal_package_title {
    font-size: clamp(2rem, 10vw, 4rem);
  }
  .site_redesign_description {
    order: 2;
  }
  .site_redesign_description .personal_package_description_header {
    font-size: clamp(1.5rem, 8vw, 2.25rem);
  }
  .site_redesign_description .personal_package_description_paragraph {
    font-size: clamp(0.9rem, 4vw, 1.15rem);
  }
  /*Creative Consultations Responsiveness Phone*/
  #creative_consultations .personal_package_white_container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
  }
  #creative_consultations .personal_package_white_container .ad {
    order: 3;
    width: 90%;
    min-height: 125px;
    max-height: 175px;
  }
  .creative_consultations_functionality {
    order: 1;
    width: 75%;
    gap: 25px;
  }
  .creative_consultations_functionality .personal_package_title {
    font-size: clamp(2rem, 10vw, 4rem);
  }
  .creative_consultations_description {
    order: 2;
  }
  .creative_consultations_description .personal_package_description_header {
    font-size: clamp(1.5rem, 8vw, 2.25rem);
  }
  .creative_consultations_description .personal_package_description_paragraph {
    font-size: clamp(0.9rem, 4vw, 1.15rem);
  }
  /*Asset Creation Responsiveness Phone*/
  #asset_creation .personal_package_white_container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
  }
  #asset_creation .personal_package_white_container .ad {
    order: 3;
    width: 90%;
    min-height: 125px;
    max-height: 175px;
  }
  .asset_creation_functionality {
    order: 1;
    width: 90%;
    gap: 25px;
  }
  .asset_creation_functionality .personal_package_title {
    font-size: clamp(2rem, 10vw, 4rem);
  }
  .asset_creation_description {
    order: 2;
  }
  .asset_creation_description .personal_package_description_header {
    font-size: clamp(1.5rem, 8vw, 2.25rem);
  }
  .asset_creation_description .personal_package_description_paragraph {
    font-size: clamp(0.9rem, 4vw, 1.15rem);
  }
  /*No Code Websites Responsiveness Phone*/
  #no_code_websites .personal_package_white_container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
  }
  #no_code_websites .personal_package_white_container .ad {
    order: 3;
    width: 90%;
    min-height: 125px;
    max-height: 175px;
  }
  .no_code_websites_functionality {
    order: 1;
    width: 90%;
    gap: 25px;
  }
  .no_code_websites_functionality .personal_package_title {
    font-size: clamp(2rem, 10vw, 4rem);
  }
  .no_code_websites_functionality .button_group {
    flex-direction: column;
    gap: 10px;
  }
  .no_code_websites_description {
    order: 2;
  }
  .no_code_websites_description .personal_package_description_header {
    font-size: clamp(1.5rem, 8vw, 2.25rem);
  }
  .no_code_websites_description .personal_package_description_paragraph {
    font-size: clamp(0.9rem, 4vw, 1.15rem);
  }
}/*# sourceMappingURL=creative_design.css.map */

Anchor Tag with Prevented Default Behavior Not Executing Ajax Call

I’m encountering a peculiar issue within Haml views where a clickable image is configured within an anchor tag. The desired behavior is to execute an Ajax call when the image “Button” is clicked. However, despite various attempts, including using javascript:void(0) and href=”, to prevent the anchor tag’s default behavior, the Ajax call doesn’t execute as expected. It’s worth noting that using href=” results in an unwanted page reload, and using href=’#’ requires an initial page reload.

Expected Behaviour:

Upon clicking the clickable image, the Ajax call should execute, leading to the specified action or request.

Note:
I have verified the Ajax call is working as expected but the clickable image’s behaviour is the problem here. Another thing to note here is that reloading the url makes the Ajax call/clickable image work.

here’s what I have setup:

%a#generic-button.button{'data-generic-id' => generic-id, :href => 'javascript:void(0);'}
  = image_tag('https://www.example.com/test/generic-button.svg', id: 'Generic Image')

and the Ajax call:

$(document).on('click', '#generic-button.button', function(event) {
  event.preventDefault();
  var genericId = $(this).data('generic-id');

  $.ajax({
    url: '/generic-action',
    method: 'POST',
    headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
    data: { generic_id: genericId },
    success: function(response) {
      if (response.success) {
        // Handle success logic here
      }
    },
    error: function() {
      // Handle error logic here
    }
  });
});

When x += y NEQ x = x + y | Can anyone explain? [duplicate]

You can just look at this Codepen (https://codepen.io/rcrooks/pen/abPYzVQ) or run this code for yourself:

<p id="demo"></p>

<script>
const numbers = [2, 4, 6];

let start = 0;
for (let x of numbers) {
  start += x + "<br>";
}

document.getElementById("demo").innerHTML = start;
</script>
  
<br>
  
<p id="demo2"></p>

<script>
const numbers2 = [2, 4, 6];

let start2 = 0;
for (let x of numbers2) {
  start2 = start2 + x + "<br>";
}

document.getElementById("demo2").innerHTML = start2;
</script>

Why in the first script is += treated as string concatenation, but only on the first iteration?

give overlay different ids from foreach

I have a foreach fetched by firestore, each document has a button classed
“update Sets” this is connected to an overview with has more information to edit. I tried to make each overview have different ids by giving an id from firestore in place of the id=”” part but I’m not sure how to make the overview know what document is clicked on

const Session = document.getElementById("session");

                const roundRef = collection(db, "uuid", uid, "programme", id, "exercises");
                const roundOrder = query(roundRef, orderBy("order"));

                const roundsUnsub = onSnapshot(roundOrder, (querySnapshot) => {
                    querySnapshot.forEach((doc) => {

                        const DocId = doc.id;
                        const data = doc.data()
                        const exerciseID = doc.data()

                        console.log(data)

                        //need to remove the arrow clickers on the number input , but to only she the numbers on the keyboard ehrb its clicked

                        Session.innerHTML += `
                        
                            <div class="sets-list">
                                <div class="exercise-name">${data.name}</div>
                                <div class="update-button" id="${exerciseID}">Update Sets</div>
                            </div> 
                            
                            <div id="myNav" class="overlay">
                                <div class="overlay-content">
                                    <div class="overlay-tab"></div>
                                    <div class="exercise-set-name">${data.name}</div>

                                    <div class="set-row">
                                        <div class="set">Set 1</div>
                                        <div class="reps">Reps</div>
                                        <input inputmode="numeric" pattern="[0-9]*" class="exercise-input" id="${data.exerciseID}oneReps" type="text" placeholder="${data.oneReps}"></input>
                                        <div class="weight">Weight</div>
                                        <input inputmode="numeric" pattern="[0-9]*" class="exercise-input" type="number" placeholder="${data.oneWeight}"></input>
                                    </div>

                                    <div class="set-row">
                                        <div class="set">Set 2</div>
                                        <div class="reps">Reps</div>
                                        <input inputmode="numeric" pattern="[0-9]*" class="exercise-input" id="reps" type="number" placeholder="${data.twoReps}"></input>
                                        <div class="weight">Weight</div>
                                        <input inputmode="numeric" pattern="[0-9]*" class="exercise-input" type="number" placeholder="${data.twoWeight}"></input>
                                    </div>
                              
                                    <div class="set-row">
                                        <div class="set">Set 3</div>
                                        <div class="reps">Reps</div>
                                        <input inputmode="numeric" pattern="[0-9]*" class="exercise-input" id="reps" type="number" placeholder="${data.threeReps}"></input>
                                        <div class="weight">Weight</div>
                                        <input inputmode="numeric" pattern="[0-9]*" class="exercise-input" type="number" placeholder="${data.threeWeight}"></input>
                                    </div>

                                    <div class="set-row">
                                        <div class="set">Set 4</div>
                                        <div class="reps">Reps</div>
                                        <input inputmode="numeric" pattern="[0-9]*" class="exercise-input" id="reps" type="number" placeholder="${data.fourReps}"></input>
                                        <div class="weight">Weight</div>
                                        <input inputmode="numeric" pattern="[0-9]*" class="exercise-input" type="number" placeholder="${data.fourWeight}"></input>
                                    </div>

                                    <a href="javascript:void(0)" id="closeNav">
                                        <div class="exercise-save-button">Save Set</div>
                                    </a>

                                </div>
                            </div>`

                        document.getElementById(exerciseID).addEventListener("click", function openNav() {
                            document.getElementById("myNav").style.height = "60%";
                        });

                        document.getElementById("closeNav").addEventListener("click", function closeNav() {
                            document.getElementById("myNav").style.height = "0%";
                        });
                    });

Using inertiajs and vue 3 scroll to an element after first visit page loading

i am trying to scroll into a specific element on the page after the first visit page loading is finished and it works but sadly it scrolls back immediately to the top of the page because of the preserveScroll feature included in inertiajs
how can i stop this behavior from re-scrolling back to the top ?

i tried to listen on all kinds on events in inertia but no luck the scroll keeps happening before the check on the preserveScroll value
i tried also using the scroll inside the onMounted hook but also no luck

Uncaught TypeError: Cannot read properties of undefined (reading ‘classList’) at HTMLButtonElement. (index.js:46:46)

This is HTML
This is JavaScript
This is my console attempt of same code after click
Here, i am getting error of ClassList being null while it is not..

I am just here trying to add the “click” eventlistener to each of the drum buttons and so tried to access their classList to append the new “pressed” class in it. I am ensuring that HTML and CSS code is completely correct but experiencing difficulties in understanding this logic of javascript. Anyone pls help..

Using nested forEach with filter returns an empty array

I want to filter an array of objects according to its rate but instead I get an empty array.
My code is like the following:

let ratings = ['4', '1'];
let objects = [{ rate: 1 }, { rate: 4.5 }, { rate: 3.4 }];
let filtered = objects.filter((obj) => {
  ratings.forEach((rating) => {
    if (Math.round(obj.rate) < Number(rating)) {
      return true;
    }
  });
});

How can I do this?

Content Security Policy directive: “script-src ‘none'”

I faced the issue that on my webpage sometimes I am getting the error from content security policy that ->

[Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘none'”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-lrDdfLLxqOJeQihCgTDZKkuSQiZSz5vqmq3u8IkuqSE=’), or a nonce (‘nonce-…’) is required to enable inline execution.

when I have this error , I have this more than 300 times . but it’s really hard to reproduce , can you suggest me the ways , what should be the reason? why it’s throwing the error randomly?