not able to redirect to next html template although code is correct

{% for cinema_hall in cinema_halls %}
    <div>
        <h2>{{ cinema_hall.name }}</h2>
        <div class="show-container" id="show-container-{{ cinema_hall.id }}">
            <!-- Loop through shows for each cinema hall -->
            {% for show in shows %}
                {% if show.cinemahall == cinema_hall %}
                    <div class="show-box" data-cinema_hall_id="{{ cinema_hall.id }}" data-show_id="{{ show.id }}">
                        Show: {{ show.timings }}
                        <br>
                         ₹ {{ show.price }} 
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
{% endfor %}

this is html code


// Click event handler for show-box elements
$(document).on('click', '.show-box', function() {
    // Get the cinema hall ID and show ID from the clicked element's data attributes
    const cinemaHallId = $(this).data('cinema_hall_id');
    const showId = $(this).data('show_id');
    
    // Redirect to seats.html with the cinema hall ID and show ID as query parameters
    window.location.href = `/seats/?cinema_hall_id=${cinemaHallId}&show_id=${showId}`;
});

this is js code

def seats(request):
    cinema_hall_id = request.GET.get('cinema_hall_id')
    show_id = request.GET.get('show_id')
    
    # Use cinema_hall_id and show_id to fetch relevant data
    # For example:
    # seats_data = Seat.objects.filter(cinema_hall__id=cinema_hall_id, show__id=show_id)
    
    context = {
        'cinema_hall_id': cinema_hall_id,
        'show_id': show_id,
        # Include other context data as needed
    }
    
    return render(request, 'screen/seats.html', context)

this is views.py code now what i want is that when that div is clicked it takes me to new url with website screen/seats.html but i am keep getting this error Page not found (404)
Request Method: GET
Request URL: http://127.0.0.1:8000/seats/?cinema_hall_id=undefined&show_id=undefined please help what the problem in my code , why it’s not working

How to Use and Image for a Mouse Pointer using Vanilla JavaScript?

I’m trying to create a mouse cursor that uses an image instead of the default pointer.

I’ve created a class and set the cursor to point an image in my CSS;

/* CSS Basic Reset */
*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
}

.mouse-pointer {
    cursor: url('/assets/images/cursor.png'), auto;
}

Then, I’m creating a logical division element with JavaScript, adding the 'mouse-pointer class to it, and appending the mousePointer element to the document.body;

const mousePointer = document.createElement('div');
mousePointer.classList.add('mouse-pointer'); // Update to 'mouse-pointer'

document.body.appendChild(mousePointer);

I was expecting to see an image instead of the default mouse cursor, but I see nothing. I’m new to this, so I’m not sure what I’m doing wrong.

I’m not looking for solutions in JQuery, or anything else outside of vanilla JavaScript. I’m not looking to use CSS to accomplish this effect either.

Thanks.

Scraping data off of website that uses Javascript using Google Sheets and/or App Script

I want to collect data about books by searching their titles in WorldCat ( https://search.worldcat.org/ ). For example, if my input was “Remarkable Creatures”, I want it to output:

Author Name: Tracy Chevalier
Genre: Historical fiction
Publication Date: 2010
Cover Image: https://coverart.oclc.org/ImageWebSvc/oclc/+-+784064419_140.jpg?allowDefault=false&client=WorldcatOrgUI

I want the end-result to be in a Google Sheet, so I would prefer if I could use Google Sheets or App Script to get this result, but I am aware that Google Sheets doesn’t have a built-in function to import from pages using javascript, so I’ll accept any help I can get. I’ve looked at a few solutions, but I haven’t found one that has worked for me yet; this might just be because I’m pretty new at coding.

I’ve tried using Google Sheets functions like ImportHTML and ImportXML with no success (due to the javascript functionality, I’ve learned). I’ve also looked for AppScript solutions, but I haven’t been able to find the appropriate code for what I’m trying to do.

Constructing an html element with js doesn’t make it render properly

The element works as expected when written by hand, but doesn’t render properly when created with js dynamically:

<!DOCTYPE html>
<html>
<body>
    <math display="block">
        <mfrac>
            <ms>this</ms>
            <ms>works</ms>
        </mfrac>
    </math>

    <script>
        let math = document.createElement('math');
        math.setAttribute('display', 'block');

        let mfrac = document.createElement('mfrac');
        let ms1 = document.createElement('ms');
        let ms2 = document.createElement('ms');

        ms1.textContent = 'this';
        ms2.textContent = 'doesn't';
        
        mfrac.appendChild(ms1);
        mfrac.appendChild(ms2);

        math.appendChild(mfrac);
        
        document.body.appendChild(math);
    </script>
</body>
</html>

Screenshot of the fraction not rendering

Updating the existing elements by inserting new children doesn’t change their appearance at all, despite the document changing in the inspector.

Create dynamic refs to access element

I need to access an element in a vue app. However, there are multiple duplicate elements generated via a component. So the ref only works on the first component. How do I target a specific element of duplicate elements?

The component below gets the prop type, and it would serve as the unique name of the ref.

How do I either (a) create a variable that has the name of the props.type, or (b) reference a div that is within multiple components.

<template>
  <div :ref="type">text</div>
</template>
<script>
  import {
    onBeforeUpdate,
    reactive,
    ref,
  } from 'vue';
  props: {type: {type: String}}
  export default {
    setup() {
      const div = ref(null);

    onMounted(() => {
       div.value = props.type;
    });

return {
  div,
 };
},
};
</script>

Using Query for image in Nextjs

I am just trying to take an image input file from the user, then take it in to another route to display it there, so I am using query to achieve this, but for some reason the image is not displaying in that route, and I am not facing any kind of error.

Route code that contain image :

router.push(`/?image=${URL.createObjectURL(selectedFile)}`);

the selectedFile variable value is an object that came from this : event.target.File[0]

Route where I want to display image in :

  const [fileList, setFiles] = useState();
  const { image } = router.query || {};

  useEffect(() => {
    if (image) {
      handleFileUpload(image);
    }
  }, [image]);

  const handleFileUpload = (image) => {
    setFiles(<img src={image} alt="Story" />)
  };

I tried many things and many complex ways from using fetch to save the image in local storage, but nothing is working as expected and leads for the same result, no error, nothing displayed, so I think there may be a problem in the logic or fundamentals of the code.

Invalid API Key provided Stripe

I am integrating Stripe with my React Vite app but when I am making payment I am getting
{type: ‘invalid_request_error’, message: ‘Invalid API Key provided: “pk_test****************…*********************************************sB”;’} error I setting the stripe publisher key in my env file but why I am getting this type of error please help to to resolve this issue.

import CheckoutInformation from "../../components/root/checkout/CheckoutInformation";
import OrderSummary from "../../components/root/checkout/OrderSummary";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";

const stripePromise = loadStripe(`${import.meta.env.VITE_STRIPE_PUBLIC_KEY}`);

const StripeProvider = ({ children }: { children: React.ReactNode }) => {
  return <Elements stripe={stripePromise}>{children}</Elements>;
};

const Checkout = () => {
  return (
    <StripeProvider>
      <div className="container py-4 my-8 flex lg:flex-row flex-col gap-8">
        <div className="flex-1">
          <CheckoutInformation />
        </div>
        <div className="lg:w-[500px] w-full">
          <OrderSummary />
        </div>
      </div>
    </StripeProvider>
  );
};

export default Checkout;

const stripe = useStripe();
  const elements = useElements();
  
   const paymentHandler = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    try {
      const paymentData = {
        amount: 10,
        currency: currencyCode,
      };
      const { data } = await axiosInstance.post(
        "/payment/process",
        paymentData
      );
      console.log(data);

      const client_secret = data.client_secret;
      const cardElement = elements?.getElement(CardNumberElement);
      if (!cardElement) {
        // Handle case where card element is not available
        console.error("Card element is not available");
        return;
      }
      const result = await stripe?.confirmCardPayment(client_secret, {
        payment_method: {
          card: cardElement,
    
        },
      });

      if (result?.error) {
        // Show error to your customer
        console.error(result?.error);
        toast.error(result?.error?.message as string);
      } else {
        console.log(result);

        // Payment successful
        console.log("Payment succeeded:", result.paymentIntent);
      }

      // const { data} = await axiosInstance.post("/payment/process")
    } catch (error) {
      let message;

      if (error instanceof AxiosError) {
        message = handleApiError(error);
      } else {
        message = "An unexpected error occurred.";
      }

      toast.error(message);
    }
  };

R shiny filter parent rows in nested datatable

I would like to filter parent rows in nested datatable by radio buttons. If I set paging to true, the last parent record on a page doesn’t show children. In provided data, one parent doesn’t have a child and that also creates issues with NestedData function. The following code can’t handle reactive data which is need for the buttons on parent rows and also for filtering via radio buttons. Thanks for your help.

library(dplyr)
library(DT)
library(stringr)
library(shiny)


#functions
NestedData <- function(dat, children){
  stopifnot(length(children) == nrow(dat))
  g <- function(d){
    if(is.data.frame(d)){
      purrr::transpose(d)
    }else{
      purrr::transpose(NestedData(d[[1]], children = d$children))
    }
  }
  subdats <- lapply(children, g)
  oplus <- ifelse(lengths(subdats), "&oplus;", "") 
  cbind(" " = oplus, dat, "_details" = I(subdats), 
        stringsAsFactors = FALSE)
}
shinyCheckbox <- function(id, values) {
  inputs <- character(length(values))
  for(i in seq_along(inputs)) {
    inputs[i] <- 
      as.character(
        checkboxInput(paste0(i, id), label = NULL, value = values[i], width = "10px")
      )
  }
  inputs
}
#buttons on parent rows
shinyInput <- function(FUN, len, id, ...) {
  inputs <- character(len)
  for (i in seq_len(len)) {
    inputs[i] <- as.character(FUN(paste0(id, i), ...))
  }
  inputs
}
#data
subdat <- data.frame(
  Gene_SUB=c("MUTYH","AR"),
  Location_SUB=c("chr1:45797228","chr2:45797228"),
  Exon_SUB=c(NA,23),          
  HGVS_p_SUB=c("NP_001121897.1:p.(Gly396Asp)","NP_001121897.1:p.(Gly396Asp)"),
  stopA=c(45797278,114925456),
  YN = c(FALSE, FALSE),
  stringsAsFactors = FALSE
)

maindat <- data.frame(
  Gene=c("MUTYH","AR","TET1"),
  Location=c("chr1:45797228","chr2:45797228","chr10:70405855"),
  Exon=c(NA,23,4),          
  HGVS_p=c("NP_001121897.1:p.(Gly396Asp)","NP_001121897.1:p.(Gly396Asp)","NM_030625.2:p.Ile1123Met"),
  stopA=c(45797278,114925456,70405905),
  Classification=c('GroupA','GroupB','GroupC'),
  stringsAsFactors = FALSE
)

maindat$Action = shinyInput(actionButton, nrow(maindat), 'button_', label = "GL", onclick = 'Shiny.onInputChange("select_button",  this.id)' )

DFList<-split(subdat, factor(subdat$stopA, levels = unique(subdat$stopA)))
#want to be able to hide stopA and YN from child rows as the table loads
newlist<-lapply(DFList, transform, check = shinyCheckbox("check", YN))
#one parent doesn't have a child and it causing problems
Dat <- NestedData(maindat, newlist)
## whether to show row names
rowNames = FALSE
colIdx <- as.integer(rowNames)

## the callback
parentRows <- which(Dat[,1] != "")
callback <- JS(
  sprintf("var parentRows = [%s];", toString(parentRows-1)),
  sprintf("var j0 = %d;", colIdx),
  "var nrows = table.rows().count();",
  "for(let i = 0; i < nrows; ++i){",
  "  var $cell = table.cell(i,j0).nodes().to$();",
  "  if(parentRows.indexOf(i) > -1){",
  "    $cell.css({cursor: 'pointer'});",
  "  }else{",
  "    $cell.removeClass('details-control');",
  "  }",
  "}",
  "",
  "// --- make the table header of the nested table --- //",
  "var formatHeader = function(d, childId){",
  "  if(d !== null){",
  "    var html = ", 
  "      '<table class="display compact hover" ' + ",
  "      'style="padding-left: 30px;" id="' + childId + ", 
  "      '"><thead><tr>';",
  "    var data = d[d.length-1] || d._details;",
  "    for(let key in data[0]){",
  "      html += '<th>' + key + '</th>';",
  "    }",
  "    html += '</tr></thead></table>'",
  "    return html;",
  "  } else {",
  "    return '';",
  "  }",
  "};",
  "",
  "// --- row callback to style rows of child tables --- //",
  "var rowCallback = function(row, dat, displayNum, index){",
  "  if($(row).hasClass('odd')){",
  "    $(row).css('background-color', '#FFFFFF');",
  "    $(row).hover(function(){",
  "      $(this).css('background-color', '#d8ecf3');",
  "    }, function(){",
  "      $(this).css('background-color', '#FFFFFF');",
  "    });",
  "  } else {",
  "    $(row).css('background-color', '#F1F1F1');",
  "    $(row).hover(function(){",
  "      $(this).css('background-color', '#d8ecf3');",
  "    }, function(){",
  "      $(this).css('background-color', '#F1F1F1');",
  "    });",
  "  }",
  "};",
  "",
  "// --- header callback to style header of child tables --- //",
  "var headerCallback = function(thead, data, start, end, display){",
  "  $('th', thead).css({",
  "    'border-top': '3px solid black',", 
  "    'color': 'black',",
  "    'background-color': '#E5FFED'",
  "  });",
  "};",
  "",
  "// --- make the datatable --- //",
  "var formatDatatable = function(d, childId){",
  "  var data = d[d.length-1] || d._details;",
  "  var colNames = Object.keys(data[0]);",
  "  var columns = colNames.map(function(x){",
  "    return {data: x.replace(/\./g, '\\\.'), title: x};",
  "  });",
  "  var id = 'table#' + childId;",
  "  var subtable;",
  "  if(colNames.indexOf('_details') === -1){",
  "    subtable = $(id).DataTable({",
  "      'data': data,",
  "      'columns': columns,",
  "      'autoWidth': true,",
  "      'deferRender': true,",
  "      'info': false,",
  "      'lengthChange': false,",
  "      'ordering': data.length > 1,",
  "      'order': [],",
  "      'paging': false,",
  "      'scrollX': false,",
  "      'scrollY': false,",
  "      'searching': false,",
  "      'sortClasses': false,",
  "      'rowCallback': rowCallback,",
  "      'headerCallback': headerCallback,",
  "      'columnDefs': [{targets: '_all', className: 'dt-center'}]",
  "    });",
  "  } else {",
  "    subtable = $(id).DataTable({",
  "      'data': data,",
  "      'columns': columns,",
  "      'autoWidth': true,",
  "      'deferRender': true,",
  "      'info': false,",
  "      'lengthChange': false,",
  "      'ordering': data.length > 1,",
  "      'order': [],",
  "      'paging': false,",
  "      'scrollX': false,",
  "      'scrollY': false,",
  "      'searching': false,",
  "      'sortClasses': false,",
  "      'rowCallback': rowCallback,",
  "      'headerCallback': headerCallback,",
  "      'columnDefs': [", 
  "        {targets: -1, visible: false},", 
  "        {targets: 0, orderable: false, className: 'details-control'},", 
  "        {targets: '_all', className: 'dt-center'}",
  "      ]",
  "    }).column(0).nodes().to$().css({cursor: 'pointer'});",
  "  }", # THIS IS THE CODE I ADDED TO DEAL WITH THE CHECKBOXES:
  "  $(id).on('click', '[id^=check]', function(){",
  "    var id = this.getAttribute('id');",
  "    var i = parseInt(/check(\d+)/.exec(id)[1]);",
  "    var value = $(this).prop('checked');",
  "    subtable.cell(i-1, 5).data(value).draw();",
  "    Shiny.setInputValue('update', {child: childId, row: i, value: value});",
  "  });",
  "};",
  "",
  "// --- display the child table on click --- //",
  "// array to store id's of already created child tables",
  "var children = [];", 
  "table.on('click', 'td.details-control', function(){",
  "  var tbl = $(this).closest('table'),",
  "      tblId = tbl.attr('id'),",
  "      td = $(this),",
  "      row = $(tbl).DataTable().row(td.closest('tr')),",
  "      rowIdx = row.index();",
  "  if(row.child.isShown()){",
  "    row.child.hide();",
  "    td.html('&oplus;');",
  "  } else {",
  "    var childId = tblId + '-child-' + rowIdx;",
  "    if(children.indexOf(childId) === -1){", 
  "      // this child has not been created yet",
  "      children.push(childId);",
  "      row.child(formatHeader(row.data(), childId)).show();",
  "      td.html('&CircleMinus;');",
  "      formatDatatable(row.data(), childId, rowIdx);",
  "    }else{",
  "      // this child has already been created",
  "      row.child(true);",
  "      td.html('&CircleMinus;');",
  "    }",
  "  }",
  "});")

ui <- fluidPage(
  #br(),
  #actionButton("print", "Print child rows"),
  mainPanel(
    radioButtons("tb_filters",
                 label = h4("Options:"),
                 choices = list(
                   "GroupA" = "groupa",
                   "GroupB" = "groupb",
                   "GroupC" = "groupc"
                 ),
                 
                 inline=TRUE),
    br(),
    actionButton("print", "Update db"),
    br(),
    DTOutput("dtable")
  )
  
)
#setting paging to true breaks the last record on a page
server <- function(input, output, session) {
  
  dataset <- shiny::reactive({
   #user can filter parent rows by Classification
    if ("groupa" %in% input$tb_filters) Dat <- Dat[with(Dat, grepl("GroupA", paste(Classification))),]
    if ("groupb" %in% input$tb_filters) Dat <- Dat[with(Dat, grepl("GroupB", paste(Classification))),]
    if ("groupc" %in% input$tb_filters) Dat <- Dat[with(Dat, grepl("GroupC", paste(Classification))),]
    Dat
  })
  output[["dtable"]] <- renderDT({
    datatable(
      isolate(dataset()), 
      callback = callback, rownames = rowNames, escape = FALSE,
      #-colIdx-1,
      selection = "none",
      options = list(
        paging = TRUE,
        searching = TRUE,
        columnDefs = list(
          list(
            visible = FALSE, 
            targets = ncol(Dat)-1+colIdx
          ),
          list(
            orderable = FALSE, 
            className = "details-control", 
            targets = colIdx
          ),
          list(
            className = "dt-center", 
            targets = "_all"
          )
        )
      )
    )
  })
  
  observeEvent(input[["update"]], {
    child <- 
      stringr::str_extract(input[["update"]][["child"]], "\d+$")
    row <- as.integer(input[["update"]][["row"]])
    value <- input[["update"]][["value"]]
    i=as.numeric(child)+1
    DFList[[i]][row, "YN"] <<- value
    print(DFList[[i]])
    
  })
  
  shiny::observeEvent(input$select_button, {
    selectedRow <- as.numeric(strsplit(input$select_button, "_")[[1]][2])
    
    test <- main_data[selectedRow,2]
    print(test)
    
  })
  
  observeEvent(input[["print"]], {
    #update db

  })

}

shinyApp(ui, server)

Animate mask-image property

I have the following mask-image as a theme toggle. When it is light, it creates a clip-path, and when it is dark, it changes the mask-image to a black hole, adjusting the mask-position and size to emulates a black hole behavior with the background:

<div className="alternate-gradient-bg">
    <svg xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="goo">
              <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
              <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo" />
              <feBlend in="SourceGraphic" in2="goo" />
            </filter>
        </defs>
    </svg>
    <div className="alternate-gradients-container">
      <div className="alternate-g1"></div>
      <div className="alternate-g2"></div>
      <div className="alternate-g3"></div>
      <div className="alternate-g4"></div>
      <div className="alternate-g5"></div>
      <div className="alternate-interactive-container">
        <div className="alternate-interactive" ref={interBubbleRefAlternate}></div>
      </div>
    </div>
</div>
  <style>
  .alternate-gradient-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    background: linear-gradient(-40deg, var(--alternate-color-bg1), var(--alternate-color-bg2));
    top: 0;
    left: 0;
    z-index: -2;
    clip-path: circle(4.4% at 95.25% 90.5%);
  }
  .light .alternate-gradient-bg{
    clip-path: circle(150% at 95.25% 90.5%);
    mask-image: none;
    mask-composite: exclude;
    mask-repeat: no-repeat;
    mask-size: 4500px;
    mask-position: bottom -2180px right -2180px;
    transition: 1s ease-out;
  }
  .dark .alternate-gradient-bg{
    clip-path: circle(4.4% at 95.25% 90.5%);
    mask-image: url("/BlackHole.svg");
    mask-composite: exclude;
    mask-repeat: no-repeat;
    mask-size: 100px;
    mask-position: bottom 20px right 20px;
    transition: 1s ease-out;
  }
  </style>
  //BlackHole.svg
  <svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
    <path d="m962.98 370.77c-56.961-219.76-321.69-331.88-541.46-274.92 184.24 20.664 298.97 86.176 355.24 194.2-50.43-55.348-116.43-97.625-193.78-119.01-218.79-60.547-448.26 112.65-508.82 331.46 120.71-163.71 246.33-227.99 381.5-206.97-20.238 2.7227-40.309 6.9297-59.996 12.629l0.042969 0.070312c-72.199 22.168-139.12 64.332-191.65 125.93-147.34 172.7-87.352 453.87 85.367 601.23-77.938-142.97-96.805-261.85-62.164-361.88-6.5898 50.629-3.8125 103.31 9.7656 155.71 56.977 219.76 321.71 331.88 541.48 274.92-184.21-20.652-298.95-86.133-355.21-194.13 50.441 55.289 116.43 97.555 193.73 118.96 218.81 60.535 448.27-112.66 508.84-331.47-120.73 163.76-246.35 228.01-381.53 206.97 20.254-2.7227 40.324-6.9453 60.023-12.645l-0.027343-0.027344c72.184-22.18 139.11-64.348 191.65-125.95 147.33-172.71 87.336-453.87-85.379-601.23 77.98 143.01 96.832 261.94 62.137 361.97 6.6172-50.668 3.8398-103.38-9.75-155.82z" fill-rule="evenodd"/>
  </svg>

The animation is working well so far, but I’m wondering if it’s possible to apply a rotation effect to the mask-image (specifically, the SVG BlackHole) without affecting the rotation of the alternate-gradient-bg.

content_scripts does not trigger for every match in Manifest V3

I’m trying to develop a Chrome extension that would automatically block every YouTube video from being displayed by overwriting the html content of the page.

The only exceptions would be specific YouTube urls that I would have whitelisted. These urls are stored and retrieved using chrome local storage.

The script works just fine when I first try to load a YouTube video, either blocking it or displaying it if it is indeed whitelisted.
However, when I whitelist a blocked url, reload the page and browse YouTube, the next videos wont be blocked, even though they should be.

When I encounter this phenomenon, reloading the page correctly applies the whitelist.

My current content_script is as such :

"content_scripts": [
        {
            "js": ["scripts/blocker.js"],
            "matches": [
                "https://www.youtube.com/watch?v=*",
                "https://www.youtube.com/shorts/*"
            ]
        }
    ]

Ada gak yang bisa open enc code java secript [closed]

function _0x5b5d(_0x45d9ee, _0x29232b) { var _0x239cbb = _0x239c(); return _0x5b5d = function (_0x5b5da8, _0x11d674) { _0x5b5da8 = _0x5b5da8 – 0x155; var _0x25b4b6 = _0x239cbb[_0x5b5da8]; return _0x25b4b6; }, _0x5b5d(_0x45d9ee, _0x29232b); } var _0x136b3a = _0x5b5d; (function (_0x1bcdbc, _0x26b582) { var _0x51d896 = _0x5b5d, _0x57601f = _0x1bcdbc(); while (!![]) { try { var _0x297539 = parseInt(_0x51d896(0x191)) / 0x1 * (parseInt(_0x51d896(0x19f)) / 0x2) + -parseInt(_0x51d896(0x15a)) / 0x3 + -parseInt(_0x51d896(0x193)) / 0x4 * (parseInt(_0x51d896(0x171)) / 0x5) + parseInt(_0x51d896(0x189)) / 0x6 + parseInt(_0x51d896(0x195)) / 0x7 * (parseInt(_0x51d896(0x15c)) / 0x8) + -parseInt(_0x51d896(0x184)) / 0x9 + parseInt(_0x51d896(0x158)) / 0xa; if (_0x297539 === _0x26b582) break; else _0x57601f’push’; } catch (_0x46e567) { _0x57601f’push’; } } }(_0x239c, 0x2e0b0), $(‘#id’)[‘on’](_0x136b3a(0x161), function () { var _0x14bd7a = _0x136b3a, _0x3aaaf6 = $(this)_0x14bd7a(0x19c); newno = _0x3aaaf6_0x14bd7a(0x17b)_0x14bd7a(0x1a1); var _0x3953a3 = newno[_0x14bd7a(0x16d)](0x0, 0x3)_0x14bd7a(0x17b)_0x14bd7a(0x1a1), _0x47b6c7 = newno[_0x14bd7a(0x16d)](0x3, 0x10)’replace’_0x14bd7a(0x1a1); if (_0x3953a3 == _0x14bd7a(0x157)) { let _0x5f2405 = 0x0; $(this)[_0x14bd7a(0x19c)](_0x5f2405 + _0x47b6c7); } else $(this)[_0x14bd7a(0x19c)](_0x3953a3 + _0x47b6c7); }), $(_0x136b3a(0x18d))[‘on’](_0x136b3a(0x161), function () { var _0x33b904 = _0x136b3a, _0x35f1af = $(_0x33b904(0x186))’val’, _0x318769 = $(this)_0x33b904(0x19c), _0x3a82f9 = $(this)’find”data’; _0x35f1af === ” ? (Swal[_0x33b904(0x1a3)]({ ‘icon’: _0x33b904(0x17c), ‘title’: _0x33b904(0x166), ‘text’: _0x33b904(0x16b) }), $(this)[_0x33b904(0x16a)](_0x33b904(0x170), 0x0)) : (getData(_0x318769), getRek(_0x35f1af, _0x3a82f9)); })); function getData(_0x4e38e1) { var _0x2de5c1 = _0x136b3a, _0x9c117 = $(‘#id’)_0x2de5c1(0x19c), _0x35e746 = myStoreLink; $[_0x2de5c1(0x197)]({ ‘type’: _0x2de5c1(0x168), ‘url’: _0x2de5c1(0x165), ‘data’: { ‘api’: api, ‘nama’: username, ‘kategori’: _0x4e38e1, ‘main’: ” }, ‘dataType’: _0x2de5c1(0x19e), ‘beforeSend’: function () { var _0x4750f0 = _0x2de5c1; $(‘#data’)_0x4750f0(0x178); for (let _0x46a242 = 0x0; _0x46a242 < 0xa; _0x46a242++)$(_0x4750f0(0x18b))’append’; }, ‘success’: function (_0x2c2183) { var _0x507c5e = _0x2de5c1; $(_0x507c5e(0x167))’html’, $(_0x507c5e(0x18b))_0x507c5e(0x178); if (_0x2c2183[_0x507c5e(0x17e)] === 0xc8) _0x2c2183[_0x507c5e(0x159)][_0x507c5e(0x179)] !== 0x0 ? $[_0x507c5e(0x185)](_0x2c2183[‘data’], function (_0x47db84, _0x45b154) { var _0x283a63 = _0x507c5e; $(_0x283a63(0x180))[_0x283a63(0x196)](_0x283a63(0x17f) + _0x45b154[_0x283a63(0x160)] + _0x283a63(0x18c) + _0x45b154[_0x283a63(0x175)] + _0x283a63(0x187) + _0x45b154[_0x283a63(0x181)] + _0x283a63(0x169)); }) : $(_0x507c5e(0x180))_0x507c5e(0x178); else _0x2c2183[_0x507c5e(0x17e)] === 0x190 && Swal[‘fire’]({ ‘icon’: _0x507c5e(0x17c), ‘title’: ‘Oops…’, ‘text’: _0x2c2183[_0x507c5e(0x159)] }); }, ‘error’: function () { } }); } function _0x239c() { var _0x1d27bd = [‘#fake’, ‘x27)x22><divx20class=x22rowx20p-1x20align-items-centerx22>x20<divx20class=x22colx22>x20<px20id=x22prod-namex22x20class=x22text-startx20m-0x22x20style=x22font-size:14px;x22>’, ‘.mySelect’, ‘full’, ‘option:selected’, ‘#no_tujuan’, ‘258616kwxPdO’, ‘href’, ‘4ufjjdx’, ‘.submit-form’, ‘46942afpFYj’, ‘append’, ‘ajax’, ‘attr’, ‘#linkBeli’, ‘#short-desc’, ‘#full-desc’, ‘val’, ‘<divx20class=x22col-12×22>x20<divx20class=x22btnx20btn-lightx20w-100x20mb-2x20skeletonx22><px20class=x22skeleton-textx22>

x20′, ‘json’, ‘2QqRQxq’, ‘JSON’, ‘trim’, ‘modal’, ‘fire’, ‘click’, ‘#harga’, ‘+62’, ‘1995430MPOLNe’, ‘data’, ‘643980HlvfOz’, ‘#mask’, ‘8ZQbJit’, ‘
-x20′, ‘value’, ‘#nama_produk’, ‘links’, ‘change’, ‘error_msg’, ‘#link-extra-info’, ‘action’, ‘https://api-otomatis.my.id/api/products/basic’, ‘Oops…’, ‘#loading’, ‘POST’, ‘x20x20x20’, ‘prop’, ‘Nox20Tujuanx20Tidakx20Bolehx20Kosong!’, ‘&key=’, ‘substring’, ‘#modalTrx’, ‘https://api-otomatis.my.id/api/products/detail’, ‘selectedIndex’, ‘486690TlBKJm’, ‘hasOwnProperty’, ‘addClass’, ‘name’, ‘names’, ‘price’, ‘GET’, ‘html’, ‘length’, ‘text’, ‘replace’, ‘error’, ‘submit’, ‘statusCode’, ‘<divx20class=x22col-12×22><buttonx20class=x22btnx20btn-lightx20bg-bodyx20borderx20w-100x20mb-2x20shadowx22x20id=x22btn-linkx20p-3x22x20onclick=x22getDetail(x27’, ‘#data’, ‘prices’, ‘#nick’, ‘<divx20class=x27d-gridx27><divx20class=x20x27containerx20text-centerx27x20>x20Datax20Akunx20Demox20Errorx20/x20Salahx20!x20</divx20>x20’, ‘1228221mSapQN’, ‘each’, ‘#id’, ‘x20x20<divx20class=x22col-4×22>x20<px20class=x22m-0x20fw-boldx20bg-hargax20rounded-5x22x20style=x22font-size:14px;x22>’, ‘show’, ‘1033164SzazLD’, ‘https://api-otomatis.my.id/trueid/ewallet/’]; _0x239c = function () { return _0x1d27bd; }; return _0x239c(); } function getDetail(_0x3e5f1b) { var _0x493031 = _0x136b3a, _0x49cd2b = $(_0x493031(0x186))_0x493031(0x19c); _0x49cd2b == ” ? Swal[_0x493031(0x1a3)]({ ‘icon’: ‘error’, ‘title’: ‘Oops…’, ‘text’: _0x493031(0x16b) }) : ($(_0x493031(0x199))_0x493031(0x198), $[_0x493031(0x197)]({ ‘type’: ‘POST’, ‘url’: _0x493031(0x16f), ‘data’: { ‘produk’: _0x3e5f1b, ‘api’: api, ‘nama’: username }, ‘dataType’: _0x493031(0x1a0), ‘beforeSend’: function () { var _0x86f9e6 = _0x493031; $(‘#nama_produk’)_0x86f9e6(0x17a), $(_0x86f9e6(0x190))’text’, $(‘#harga’)_0x86f9e6(0x17a), $(_0x86f9e6(0x19a))_0x86f9e6(0x17a), $(_0x86f9e6(0x19b))_0x86f9e6(0x17a), $(_0x86f9e6(0x199))[‘attr’](‘href’, ” + myStoreLink + _0x3e5f1b), $(_0x86f9e6(0x15b))’removeClass’, $(_0x86f9e6(0x16e))_0x86f9e6(0x1a2), $(_0x86f9e6(0x190))_0x86f9e6(0x17a); }, ‘success’: function (_0x590b0c) { var _0x55d3a3 = _0x493031; let _0x366f52 = _0x590b0c[_0x55d3a3(0x159)]; $(_0x55d3a3(0x15f))’text’, $(_0x55d3a3(0x156))_0x55d3a3(0x17a), $(‘#short-desc’)_0x55d3a3(0x17a); let _0x4fccde = _0x366f52[_0x55d3a3(0x18e)], _0x2a5c1e = _0x4fccde[_0x55d3a3(0x17b)](/|/g, _0x55d3a3(0x15d)); $(_0x55d3a3(0x19b))’append’, $(_0x55d3a3(0x15b))_0x55d3a3(0x173); }, ‘error’: function () { } })); } $(document)[‘on’](_0x136b3a(0x155), _0x136b3a(0x194), function () { var _0x10f0e5 = _0x136b3a, _0x347ccb = $(_0x10f0e5(0x186))_0x10f0e5(0x19c); return $(‘#link-extra-infox20input’)’val’, $(‘#link-extra-info’)[_0x10f0e5(0x198)](_0x10f0e5(0x164), $(this)_0x10f0e5(0x198)), $(_0x10f0e5(0x163))_0x10f0e5(0x17d), ![]; }); function getRek(_0x194e1a, _0x46df02) { var _0xdd4ef3 = _0x136b3a; $[_0xdd4ef3(0x197)]({ ‘type’: _0xdd4ef3(0x177), ‘url’: _0xdd4ef3(0x18a) + _0x46df02 + ‘?hp=’ + _0x194e1a + _0xdd4ef3(0x16c) + api, ‘dataType’: _0xdd4ef3(0x19e), ‘success’: function (_0x3e7702) { var _0xcc49bb = _0xdd4ef3; _0x3e7702_0xcc49bb(0x172) ? $(_0xcc49bb(0x182))_0xcc49bb(0x17a) : $(_0xcc49bb(0x182))_0xcc49bb(0x17a); } }); }

Bantu saya openkan secript ini

Saya berharap temen2bisa bantu saya unc code di atas

Why the user is getting “undefined” as value

Here I am trying to verify the user using jwt token and then deletion of his account will be take place.

File: user.route.js

import express from "express";
import { verifyToken } from "../utils/verifyUser.js";
import { deleteUser } from "../controllers/user.controller.js";
const router = express.Router();

router.delete("/delete/:userId", verifyToken, deleteUser);

export default router;

File: verifyUser.js

import jwt from "jsonwebtoken";
import { errorHandler } from "./error.js";

 export const verifyToken = (req, res, next) => {
 console.log("Verifying process is called..");

 const token = req.cookies.access_token;

 console.log(`Token data: ${token}`);

 // console.log(`Your Token :${token}`);

  if (!token) {
   console.log("No Token found");
   return next(errorHandler(401, "Unauthorized"));
  }

  jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
   if (err) {
   console.log("Token verification error");
   return next(errorHandler(401, "Unauthorized"));
  }
   console.log(`User data: ${JSON.stringify(user)}`);
   //user is added to the request
   req.user = user;
   // to invoke the second function in the put()
   next();
  });
};

File: user.controller.js

import { errorHandler } from "../utils/error.js";
import User from "../models/user.model.js";
//Delete Account Function
export const deleteUser = async function (req, res, next) {
//checking the user id
if (req.user.id !== req.params.userId) {
  console.log(`User ID: ${req.user.id}`);
  console.log(`Params: ${req.params.userId}`);
  return next(errorHandler(403, "You're not allowed to delete this user"));
}
try {
  await User.findByIdAndDelete(req.params.userId);
  res.status(200).json("User account is deleted");
} catch (error) {
  next(error);
}

};

But While checking the user in the verifyUser.js is assigned with undefined value.

As the result, req.user gets undefined as value.

So, that the deletion is not working as expected.

Can anyone help me with a solution for this?

React Use State Containing JSON Object Reverts Updates?

Running into a really weird issue. I have a Postgres table which upon program startup, loads a bunch of values into a JSON object stored as a Use State Object at the start. It is a big object, but I will give you an example below.

const [person, setPerson] = useState({
id: 0,
name: "John Smith"
phones: [{
   number: "(111) 111-1111"
   type: "Cell"
   }]
})

When I use setPerson to update the JSON object, I am doing it as such:

setPerson({
...person,
name: "New Name"
})

The update takes place, and I see the dashboard dynamically change. However, when I run my next update, for example:

let new_phones = person.phones.push({
   number: "new number",
   type: "Cell"
})

setPerson({
...person,
phones: new_phones
})

What ends up happening is that the phones correctly update, and I now see my two phones shown instead of one. However, the updated name reverts to the old name. Instead of showing “New Name” as it should, it goes back to showing the name before any updates took place, “John Smith”.

The only fields that don’t get reverted would be the fields in Person that contain an array. If I make another change after updating phones, phones will not revert back to only containing 1 object. It will still show 2. The fields that revert at the static fields that contain strings, ints, etc.

My game starts automatically and I don’t want it to

I followed a tutorial on YouTube about how to make a version of Google’s dino runner game, where you jump the T-Rex over cacti. The version I wound up with is much more simple: he just jumps over a single cactus, over and over again, always at the same interval. Every jump gives a point, and the jump action is tied to W for right now. If you miss a jump, you get a pop-up alert that gives your score and stops the game.

My problem is two-fold:

  1. How can I get the game to start by clicking a button rather than as soon as the page loads and
  2. How can I make clicking the game-over pop-up take the player back to the game’s initial state in which they have to click the start game button to go again?

I’ve tried wrapping the startInterval function in an eventlistener that listens for a click on the startgame button, but all that does is break the collision detection and scoring in the game itself. I’ve gone to w3schools and chatgpt for help on this, as well as a few other resources, but nothing’s worked so far. I feel like the answer is really simple, but I’m just not seeing it.

This is the HTML for the game:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dino Game</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="game">
    <div id="dino"></div>
    <div id="scores">Score:</div>
    <div id="cactus"></div>
    <button id="startgame">Play Game</button>
</div>

<script src="scripts.js"></script>
</body>
</html>

This is the JavaScript:

// JavaScript source code
const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");
const scoreElement = document.getElementById("scores");


let isAlive;
let score = 0;

document.addEventListener("keydown", function (event) {
    if (event.key === "w") {
        jump();
    }
});

function jump() {
    if (dino.classList != "jump") {
        dino.classList.add("jump");

        setTimeout(function () {
            dino.classList.remove("jump");
        }, 300);
    }
}

isAlive = setInterval(function () {

    // get current dino Y position
    let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("top"));
    console.log(dinoTop);


    // get current cactus X position
    let cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("left"));
    console.log(cactus);



    // detect collision
    if (cactusLeft < 50 && cactusLeft > 0 && dinoTop >= 750) {
        // collision
        if (!hasJumpedOverCactus) {
            alert("Game over! Your score: " + score);
            clearInterval(isAlive);
        }
    } else if (cactusLeft >= 630 && dinoTop <= 750) {
        // dino jumped over the cactus
        if (!hasJumpedOverCactus) {
            score++;
            scoreElement.textContent = "Score: " + score;
            hasJumpedOverCactus = true;
        }
    } else {
        hasJumpedOverCactus = false; // reset the flag when the cactus is off the screen
    }
}, 5);

And because it might be relevant, here is the CSS styling for the button:

#startgame {
    background-color: dodgerblue;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    position: absolute;
    top: 920px;
    left: 450px;
}