Is it possible to delete cookies after the same period of time while refreshing the page?

I want to make the cookie deletion code work after the same period of time with updating the page, in order to delete the cookies and update the page with it

Auto refresh manifest

{
  "manifest_version": 3,
  "name": "Auto Page Refresh",
  "version": "1.0",
  "description": "Automatically refresh a webpage every 5 seconds.",
  "permissions": [
    "activeTab",
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },
  "commands": {
    "toggle": {
      "suggested_key": {
        "default": "Ctrl+Shift+R",
        "mac": "MacCtrl+Shift+R"
      },
      "description": "Toggle Auto Refresh"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

popup.js

let refreshIntervalId = null;

function toggleAutoRefresh() {
  const startStopButton = document.getElementById("startStopButton");
  const refreshIntervalInput = document.getElementById("refreshInterval");

  if (refreshIntervalId) {
    clearInterval(refreshIntervalId);
    refreshIntervalId = null;
    startStopButton.textContent = "Start";
  } else {
    const intervalValue = parseInt(refreshIntervalInput.value);
    if (intervalValue <= 0 || isNaN(intervalValue)) {
      alert("Please enter a valid refresh interval (seconds).");
      return;
    }

    startStopButton.textContent = "Stop";
    refreshIntervalId = setInterval(() => {
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const currentTab = tabs[0];
        chrome.tabs.reload(currentTab.id);
      });
    }, intervalValue * 1000); // Convert to milliseconds
  }
}

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("startStopButton").addEventListener("click", toggleAutoRefresh);
});

popup.html

<html>
<head>
  <title>Auto Page Refresh</title>
</head>
<body>
  <h2>Auto Page Refresh</h2>
  <input type="number" id="refreshInterval" placeholder="Enter refresh interval (seconds)" />
  <button id="startStopButton">Start</button>
  <script src="popup.js"></script>
</body>
</html>

Cookie Remover manifest

{
  "manifest_version": 2,
  "name": "CookieRemover",
  "version": "0.0.1",
  "description": "remove cookies of current page",
  "author": "tricora",
  "browser_action": {
      "default_icon": "images/icon128.png",
      "default_title": "Remove Cookies of current page"
  },
  "permissions": [
      "tabs",
      "cookies",
      "*://*/*"
  ],
  "background": {
      "scripts": ["background.js"]
  }
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.cookies.getAll({
    url: tab.url
  }, function(cookies) {
    var url = new URL(tab.url);
    var domain = url.hostname;

    cookies.forEach(function(cookie) {
      chrome.cookies.remove({
        url: url.origin,
        name: cookie.name
      });
    });
  });
});

Make the cookie deletion code work after the same period of time while refreshing the page, in order to delete the cookies and update the page with it

Making my dropdown dynamic with the database [closed]

I am currently developing a booking project in Visual Studio, using HTML, CSS, ASP.NET, and C#. My goal is to implement a feature where, upon selecting an item from a dropdown list, the associated element’s class changes to red for visual representation, and this change is also reflected in the database.

``                <asp:DropDownList  ID="ddlTable" runat="server">
                    <asp:ListItem Text="Choose table" Value="0" />
                    <asp:ListItem Text="Table 1" Value="1" />
                    <asp:ListItem Text="Table 2" Value="2" />
                    <asp:ListItem Text="Table 3" Value="3" />
                    <asp:ListItem Text="Table 4" Value="4" />
                    <asp:ListItem Text="Table 5" Value="5" />
                </asp:DropDownList></td>`
``                <div id="venue">
    <div class="bord1"></div>
    <div class="bord2"></div>
    <div class="bord3"></div>
    <div class="bord4"></div>
    <div class="bord5"></div>
</div>`

`
So whenever i hit the Book button, it only comes with a confirmation that the table is booked and it get stored to database. my database looks like this: database

photo for reference

i just need help achieve this, ive been struggling for hours now..

thanks in advance

I tried javascript scripts and c#, nothing seem to work.. it stores the data nicely in database, but the color doesnt change.

How to get the JSON keys or keyField?

I have JSON:

{
  "category":[
    {"id":"1","name":"Decorative Objects", "bg_url":"decorative.jpg","url":"/decorative"},    
    {"id":"2","name":"Asian Arts", "bg_url":"asian_art.jpg","url":"/asian_arts"}, 
    {"id":"3","name":"Glassware", "bg_url":"glassware.jpg","url":"/glassware"}, 
    {"id":"4","name":"Antiques", "bg_url":"antique.jpg","url":"/antiques"}
  ]
}

I manage to get the first key by using

keyIndex = Object.keys(data)[0];

But after that, I would like to get also the inside keyField.

I tried

keyField = Object.keys(data)[keyIndex][0]; 

but no luck. I’m newbie in JavaScript.

I would like to return:

{id,name,bg_url,url}

I don’t need to return the other. Only the first [0].

I’ve found the solution:

keyIndex = Object.keys(data)[0];
keyField = Object.keys(data[keyIndex][0]);

How to set up a magnific-popup-gallery for filtered selection in isotope-packery layout?

I am working on a wordpress site. On the home-page it shows CPT in packery-layout using isotope. The content is filterable with combined filters.

Now I want to use magnific-popup to display a popup-gallery when a image is clicked. The gallery should then only contain the posts that are currently displayed – in other words only the posts that are displayed according to the filters.

So far the popup works as the clicked image is showed as intended. Only the gallery does not work. So i can not move to the previous or next image.

I am not sure if i selected the elements in the right way so that magnific-popup knows which elements should be in the gallery. Is it a problem, that the img sits inside the a-element?

I am still a beginner in web-development. So probably I am doing a very simple mistake or I am not aware of a fundamental problem in my plan. I’de be grateful for every help!

I apply the magnific-popup to all <a>-elements in the div with the class .grid.

$(document).ready(function() {
  $('.grid').each(function() {
    $(this).magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1] // Will preload 0 - before current, and 1 after the current image
      },
      image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        titleSrc: function(item) { 
          return item.el.attr('title') + '<small>© Maximilian Bächli</small>';
        }
      }
    });
    });
});

The html-structure (here for only two elements) looks like this:

<div id="jobs" class="grid" style="position: relative; height: 373.5px;">
    <div class="grid-sizer"></div>
        <div class="element-item width1 drawing eckhaus-in-muttenz" style="position: absolute; left: 0%; top: 0px;"><!-- adds the filter classes to the div -->
            <div class="card-content-wrapper">
                <a href="http://wordpress.test/wp-content/uploads/2023/08/19_hs_plan_section-scaled.jpg">
                    <img src="http://wordpress.test/wp-content/uploads/2023/08/19_hs_plan_section-scaled.jpg" alt="">
                        <p>19_hs_plan_section-scaled.jpg</p>   
                </a>
            </div>
        </div>
        <div class="element-item width1 axo access-for-all" style="position: absolute; left: 14.2854%; top: 0px;"><!-- adds the filter classes to the div -->
            <div class="card-content-wrapper">
                <a href="http://wordpress.test/wp-content/uploads/2023/08/20_hs_axo_sustainability-concept.jpg">
                    <img src="http://wordpress.test/wp-content/uploads/2023/08/20_hs_axo_sustainability-concept.jpg" alt="">
                        <p>20_hs_axo_sustainability-concept.jpg</p>   
                </a>
            </div>
        </div>

Define duration of a css property change with javascript [closed]

I have this javascript animation where as I click one text, a div with the display property set as “none” becomes visible. So far so good, but I would like to have control over the duration of the transition.

My final goal is to have that div appear with a smooth opacity effect.
Here is a codepen
https://shorturl.at/cfwJ7
Thank you!

I wanted to make a div appear with an opacity effect.

How to mimic typing behavior in input field jest test

I have a component when the user types inside the text field, a type ahead appears i.e. data from the server that contains the user input. I want to test this behavior. So when the user types in “some data“, I want to mimic that behavior in my react test class but now sure how to do.


useEffect(() => {
    if (inputValue) {
      if (inputValue.length > 2) {
        getTypeahead();
      }
    }
}, [inputValue]);

const getTypeahead = () => {
    service
      .getData(inputValue)
      .then((response) => {
        const slicedData = response.data.slice(0, 10);
        if (inputValue.toLowerCase().includes('some data')) {
          slicedData.push({name: 'test something'});
        }
      })
      .catch((error) => {
        console.log(error);
      });
};


<FormField>
    <input value = {inputValue || ''} data-testid="test-id" />
</FormField>

import { render, screen, fireEvent } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

jest.mock("../../service/Service", () => ({
  __esModule: true,
  default: () => ({
    getData: async () => ({
      data: { name : 'test' },
    }),
  }),
}));

describe('Testing...', () => {
  test('Testing...', async () => {
    render(<Typeahead />);
    const input = screen.getByTestId('test-id');
    fireEvent.change(input, {target: {value: 'something 2'}})
  });
});

Changes Angular 17 RXJS [closed]

Is there any change regarding RXJS in angular 17?

Angular 17 event didn’t say what the changes were about RXJS.
Another question is what is the difference between Angular.io and angular.dev.

angular.dev only for angular 17?

Fetching data from JSON and parse it as link

I have a little issue setting up a list of links. All my links are stored in a database and I fetch it as a json. The response data should be an URL and not plain text. Can someone help?

    export default function ExampleCheckbox() {
      const [showWerkzeug, setshowWerkzeug] = useState();

      // const [showVplatz, setshowVplatz] = useState();
      const apiUrl = "/api/Strava";
      let allData;

      function pullJson() {
        fetch(apiUrl)
          .then((response) => response.json())
          .then((responseData) => {
            allData = responseData
              // .filter((el) => el.category == "Werkzeug")
              .map(function (liste) {
                return <p key={liste.id}>{liste.link}</p>;
              });
            setshowWerkzeug(allData);
          });
      }

Why is the includes function returning only one character?

I am attempting to make a programming language, and I am starting small by simply trying to “scan” a word that it comes across.

I am attempting this by using a while loop inside of a funciton that keeps repeating until it reaches a special character (which I put each one inside of an array called specialChars for efficiency). In my while loop, I have a piece of code where it checks if the character that it stopped on was inside of the array (to prevent it infinitly looping), using the includes() function.

However, it is returning only the first character that is comes across inside of the statement (explained in the code provided).

I tried to use an if statement instead, but it crashes my webpage. I am also hosting this on Replit.

Code

JavaScript

// Variables

let kw = "" ;
let char = "" ;
let keyword = "" ;
let statement = "create(" ;
let letterNum = 0 ;

const specialChars = [
    " ", 
    ";", 
    "(", 
    ")"
] ;

// The function below scans for the keyword and
// returns a trimmed result

function scanKeyword(resetLN) {

    let returnKW = "" ;
    let returnChar = "" ;
    let onSpecialChar = false ;
    let specialCharElement = "" ;
    let specialCharElementCount ;
    let stopScanning = false ;
    resetScannerVariables() ;

    if (resetLN) {
        letterNum = 0 ;
    }

    while (!(onSpecialChar)) {
        char = statement.charAt(letterNum) ;
        kw += char ;
        letterNum++ ;

        if (!(specialChars.includes(char))) {
            onSpecialChar = true ;
        }
    }

    kw = kw.trim() + " " ;
    
    for (let i = 0 ; i < kw.length - 1 ; i++) {
        returnChar = kw.charAt(i) ;
        returnKW += returnChar ;
    }

    return returnKW.trim() ;
    
}

function resetScannerVariables() {
    kw = "" ;
    char = "" ;
    keyword = "" ;
}

keyword = scanKeyword(true) ;
document.getElementById("p1").innerHTML = """ + keyword + """ ;

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Morai - Editor</title>
</head>

<body>

    <p id="p1"></p>

    <!-- JavaScript File Links -->
    
    <script src="morai/versions/alpha-v00s00/compiler/alpha_v00s00_compiler.js"></script>

    <!-- Website Badge -->

    <script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>
</body>

</html>

Combine contents of svelte store with store of stores

I am trying to create a derived store which concatenates the values of a store with the values of a store of an array of stores

import {writable, derived} from 'svelte/store';

const a = writable(1);
const b = writable([writable(2), writable(3)]);

const combined = derived([a, b], ([$a, $b]) => {

    ?

} 

How can I create a derived store which combines these values so that when I subscribe to the derived store I get an array of all three values:

console.log($combined) = [1, 2, 3]

Swiper set slides width to “auto”

I am trying to make width of my slides in future – by their width. I have already tried thousand of recommendations but nothing helped me. Can you recommend something to me, so that my slides will appear by their width (at 1 page)?

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/style1.5test.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>

<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide card"><span>Four words text</span></div>
            <div class="swiper-slide card"><span>Two words</span></div>
            <div class="swiper-slide card"><span>Just three words</span></div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="/script-test.js"></script>
</body>

</html>

CSS

body {
    margin: 0;
}

.swiper-slide {
    width: auto;
}

.swiper-slide span {
    background: yellow;
}

JS

const swiper = new Swiper('.swiper', {
    slidesPerView: 'auto',
    spaceBetween: 10
});

I am trying to achieve width of my slides by their content

How to export a function from one file and use it in another in a Javascript-based GitHub Action

I am developing a JavaScript-based GitHub Action and aiming to organize the action’s logic across multiple files for a cleaner structure. Unfortunately, I’m facing a problem with exporting functions from one file and importing them into another.

Here’s the setup:

index.js
main.js
config.js

My goal is for a function defined in config.js to be available for use in main.js. However, I’ve encountered several issues during implementation, as outlined below:

Attempt 1:

In main.js, I used:

const { validateAndFetchConfig } = require('./config')
async function run() {
  try {
    validateAndFetchConfig()
  } catch (error) {
    core.setFailed(error.message)
  }
}

In config.js, I had:

import { getInput } from '@actions/core'
function validateAndFetchConfig() {
  // do sth
}
module.exports = { validateAndFetchConfig }

This resulted in an error::

| ReferenceError: require is not defined in ES module scope, you can use import instead
| This file is being treated as an ES module because it has a '.js' file extension and '/dist/package.json' contains "type": "module".

After removing type: module, the error changed to:

 ReferenceError: __dirname is not defined in ES module scope
| This file is being treated as an ES module because it has a '.js' file extension and '/dist/package.json' contains "type": "module".

Attempt 2:

I switched to using the ES6 import syntax:

import { validateAndFetchConfig } from './evaluationConfig.js';

And changed the export style to:

export function validateAndFetchConfig

Attempt 3: Removed type:module from dist’s package.json. Now, I’m getting:

| Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: 621

What baffles me on top on that is that the template for the action uses the syntax presented in approach 1), and it magically works (for index-main interaction).

The only workaround I’ve found, which is highly cumbersome, involves explicitly annotating each function with module.exports.func = function() ... and referencing them with the module.exports. prefix upon usage.

nearley.js grammar is not handling multiplication operator (*) when using functions parsing

I’ve built a nearley.js grammar – it mostly works for arithmetic (2+3*5) and function calls (round(5.43)) but when I mix the two together, it does not understand arithmetic.

Maybe its something obvious, but I’ve been trying a lot of different things and haven’t found a solution yet. Appreciate any additional suggestions to try.

passing test cases:

        p.feed('2 + 3 * 5 - 4');
        expect(p.finish()[0]).toEqual(13);


        p.feed('round(4.55123, 2)');
        expect(p.finish()[0]).toEqual(4.55)

failing:


        p.feed('round(38 div 5) * 5');
        expect(p.finish()[0][0]).toEqual(35);

Error: Syntax error at line 1 col 17:

1 round(38 div 5) * 5
                  ^

Unexpected "*". Instead, I was expecting to see one of the following:
@builtin "whitespace.ne"
@builtin "string.ne"

@{%

function log(scope, item){
    console.log('LOG:' +scope, JSON.stringify(item, null, 4))
}

function getFirst(d){
    while(Array.isArray(d)){
        d = d[0];
    }
    return d;
}

// IF gets handled in 2 steps
// step 1: if  _ ifParams
// step 2: "(" _ EQ _ "," _ param _ "," _ param ")"
function handleIf(d){ 
    const ifParams = d[2];
    const [condition, trueValue,falseValue] = ifParams;
    if(condition){
        return getFirst(trueValue);
    } 
    return getFirst(falseValue);
}

// "concat" _ commaparentheses
// "(" _ commaparams _ ")"
// (param _ ",":? _):+
function handleConcat(d) {
    return d[2].map(item => ''+item).join(''); 
}

// "selected" _ commaparentheses
function handleSelected(d){
    return d[2][0] === d[2][1];
}


function handleRound(d){
    const value = d[2][0];
    const places = d[2][1] || 1;
    const multiplier = Math.pow(10, places);

    return Math.round(value * multiplier) / multiplier;
}

%}

main -> _ EQ _ {% function(d) {return d[1]; } %}
    | _ MixedFunction _ {% function(d) { return d[1]; } %}
    | _ AS _ {% function(d) { return d[1]; } %}

# PEMDAS!
# We define each level of precedence as a nonterminal.

# Parentheses
P -> "(" _ AS _ ")" {% function(d) {return d[2]; } %}
    | "(" _ ")" {% function(d){ return null; } %}
    | param             {% id %}

# Exponents
E -> P _ "^" _ E    {% function(d) {return Math.pow(d[0], d[4]); } %}
    | P             {% id %}

# Multiplication and division
MD -> MD _ "*" _ E  {% function(d) {return getFirst(d[0]) * getFirst(d[4]); } %}
    | MD _ "div" _ E  {% function(d) {return getFirst(d[0]) / getFirst(d[4]); } %}
    | MD _ "mod" _ E  {% function(d) {return getFirst(d[0]) % getFirst(d[4]); } %}
    | E             {% id %}

# Addition and subtraction
AS -> AS _ "+" _ MD {% function(d) {return getFirst(d[0]) + getFirst(d[4]); } %}
    | AS _ "-" _ MD {% function(d) {return getFirst(d[0]) - getFirst(d[4]); } %}
    | MD            {% id %}

# equality checks
EQ -> EQ _ "=" _ param {% function(d) { return getFirst(d[0]) == getFirst(d[4]); } %}
    | EQ _ ">" _ param {% function(d) { return getFirst(d[0]) > getFirst(d[4]); } %}
    | EQ _ ">=" _ param {% function(d) { return getFirst(d[0]) >= getFirst(d[4]); } %}
    | EQ _ "<" _ param {% function(d) { return getFirst(d[0]) < getFirst(d[4]); } %}
    | EQ _ "<=" _ param {% function(d) { return getFirst(d[0]) <= getFirst(d[4]); } %}
    | EQ _ "and" _ EQ {% function(d) { return getFirst(d[0]) && getFirst(d[4]) } %}
    | EQ _ "or" _ EQ {% function(d) { return getFirst(d[0]) || getFirst(d[4]) } %}
    | AS            {% id %}

# other functions
MixedFunction -> 
      "concat" _ commaparentheses {% handleConcat %}
    | "if" _ ifParams {% handleIf %}
    | "selected" _ commaparentheses {% handleSelected %}
    | "today" _ commaparentheses {% function() { return new Date(); } %}
    | "now" _ commaparentheses {% function() { return new Date(); } %}
    | "once" _ commaparentheses {% function(d){ return d[2]; } %}

    | "sin" _ P     {% function(d) {return Math.sin(d[2]); } %}
    | "cos" _ P     {% function(d) {return Math.cos(d[2]); } %}
    | "tan" _ P     {% function(d) {return Math.tan(d[2]); } %}
    
    | "asin" _ P    {% function(d) {return Math.asin(d[2]); } %}
    | "acos" _ P    {% function(d) {return Math.acos(d[2]); } %}
    | "atan" _ P    {% function(d) {return Math.atan(d[2]); } %}

    | "pi" _ P      {% function(d) {return Math.PI; } %}
    | "sqrt" _ P    {% function(d) {return Math.sqrt(d[2]); } %}
    | "log" _ P      {% function(d) {return Math.log(d[2]); }  %}
    | "round" _ commaparentheses      {% handleRound  %}

ifParams -> "(" _ EQ _ "," _ complexParam _ "," _ complexParam ")" {% function(d){
    return [
        d[2],
        d[6],
        d[10],
    ]
} %}

# function helpers
commaparentheses -> "(" _ commaparams:? _ ")" {% function(d){ return d[2]; } %}

commaparams -> (complexParam _ ",":? _):+ {% function(d) { 
    return d[0].map(item => getFirst(item)); 
}%}

complexParam -> param | MixedFunction | EQ {% id %}

param -> float | bool | string  {% id %}

bool -> "true"i | "false"i {% id %}

float ->
      int "." int   {% function(d) {return parseFloat(d[0] + d[1] + d[2])} %}
    | int           {% function(d) {return parseInt(d[0])} %}

int -> [0-9]:+        {% function(d) {return d[0].join(""); } %}

string -> dqstring |sqstring {% id %}