Category: javascript

Category Added in a WPeMatico Campaign

Listen to imports in Deno

Lets say i have a module qwe.js and his content is following: import('./asd.js')

If i run this module somwhere from the client browser i can catch this import request on server side with Deno.serveHttp and generate some unique response even if file asd.js actually does not exist at all.

However if i run exact same module somewhere from the server im unable to make the same behaviour just becouse import statement goes uncatched with some built-in response logic.

Can i make so that my module with import would work identical both on client and server? Or in other words – can i listen/catch/intercept import requests originated from server to make custom responses for them?

Using one “class” or one “id” for multiple counters in javascript?

I am trying to use the same “id” or “class” for multiple buttons to incrementally count by 1 using javascript.

The code below shows how I can count by increments of 1 by clicking one button, but does not work with the other button using the same “id”.

To help myself start to understand the process of doing this, I copied code online that uses getElementById, which you can see below. This code does not do what I intend as only one button adds to the counter and not the other using the same “id”. Ideally, I’d like both buttons using only one “id” or one “class” to add to the counter. I want to do this to keep my code short:

HTML:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>COUNTER</title>
</head>

<body>

    <h1>Counter</h1>
    <div class="counter">
        <button id="shopping-cart-add-on">+</button>
        <button id="shopping-cart-add-on">+</button>
        <div id="counter-value">0</div>
    </div>

    <script>
        let counter = 0;

        const counterValue = document.getElementById('counter-value');
        const incrementBtn = document.getElementById('shopping-cart-add-on');
        const incrementBtnTwo = document.getElementById('shopping-cart-add-on-two');

        // To increment the value of counter
        incrementBtn.addEventListener('click', () => {
            counter++;
            counterValue.innerHTML = counter;
        });

        incrementBtnTwo.addEventListener('click', () => {
            counter++;
            counterValue.innerHTML = counter;
        });
    </script>

</body>

</html>

From what I’ve gathered online, “getElementById” cannot be used multiple times in the way I intend. I then researched into “getElementsByclassname” in hopes of using “class” to count by one for multiple buttons. I also looked into for loop options, but am having trouble with this.

What would be the best approach using javascript using one “class” or “id” to count for multiple buttons? I am trying to keep my javascript code short without having to write multiple “id” or “classes”, etc.

Thanks

How to get what the user want to print on printer?

I bought a desktop application called New Point, at the end of this app it prints the invoice,

here is the question could I get this invoice to my app before it gets printed in the printer so I can modify it, and if I could read the content of the invoice, using JS

you can’t find the app in GitHub or another to get the source code and change it, you have to buy this app, so I don’t think that you could get the source code

How do remove a class after revealing it?

I have a gif that I am trying to remove after 3 seconds of it being toggled on. Here is the breakdown.
• When the user clicks on the orange square it gets removed.
• A gif is toggled on.
• After 3 seconds
I want the gif to get removed and the brown circle toggle on.
I know I have to use the setTimeout method, but I do not know how to apply it. Can anyone help?
`

//Removes square
function remove(){
    this.remove();
    
}

//Adds gif
let gif = document.querySelector (".gif");

function showHide(){
    gif.classList.toggle("hide"); 
    
}

//Removes gif
*{
    padding:0;
    margin:0;
}
body{
    background-color:pink;
}
.parent{
    width:100vw;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.gif{
    border-radius: 20px;
    z-index: 1; 
}
.hide{
 display:none;
}
#square{
    width:200px;
    height:200px;
    position: absolute;
    background-color:orange; 
    border-radius: 20px;
    z-index: 2; 
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}

.circle{
    width: 200px;
    height:200px;
    background-color:brown;
    border-radius: 50%;   
}

.hide_2{
    display:none;
   }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> gif reveal </title>
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <div class="parent"> 
      <img class="gif hide" src="kuromi.gif">
        <div id="square" onclick="this.remove();showHide();">
            <div class="circle hide_2"></div>
        </div>    
       
    
    </div>
    <script src="index.js"></script>
    
</body>
</html>

How to create a javascript sdk with react

I would appreciate a direction as I am lost and cannot find any source that explains how I can create a global function that my customers can use. I have multiple REST API that customers can use however I am trying to create a javascrtipt SDK so they can simply call a function and everything else is taken care of.

For example, all the user has to do is import a script in head tag and then use my variable across the app to invoke functions. Like how stripe provides SDK.

Stripe.getCustomer('pass some data id');

I have a similar need, where user can save data to DB.

myapp.saveDatatoDb(data).then(response => {
});

the saveToDB will take care of calling an API and storing the information. Where do I get started?

GoDaddy Hosted Server Not Respoding to Requests

I’m using GoDaddy shared hosting, and I was able to follow these very helpful steps to SSH into the server. I’m also able to start the server successfully. I have server.js, script.js, index.html and styles.css all in the same directory (the default one, which is public_html). The problem is that making a GET request to /getRequest or even the root /, doesn’t work, even if it does locally when accessing localhost:3000. I couldn’t get all of these working together when accessing my site at example.com, so I tried to create a more simple server. I still can’t get this to work. Same problem happens where it works locally but not online. When trying online, the request to both the root and example.com/getRequest aren’t found. The /getRequest shows a 404 when inspecting in browser, and the request to the root returns the default ‘Coming Soon’ page. Why is the server unable to respond to requests? Is this some misconfiguration I’ve done through GoDaddy?

server.js is:

const express = require('express');
const app = express();
app.use(cors());

//app.get('/getRequest', (req, res) => {
app.get('/', (req, res) => {
  const variableString = "Hello, world!";
  
   
  res.json({ variableString });
});

app.listen(port, () => {
  console.log(`Server is running at http://${hostname}:${port}`);
});

and script.js is (with ‘host’ and ‘port’ variables coming from the output from the server when it first starts):

//fetch('{myHost}:{myPort}/getRequest')
fetch('{myHost}:{myPort}')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data.message);
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

Decoding a random amount of strings into a message

This function should take a random amount of numbers represented in strings, parse them into ints and then replace each string with the correct letter of the alphabet wich index is the result of input string % 27. Also when input % 27 == 0 it switches between lower and uppercase, and also when you pass an input%9==0 it switches to ‘punctuation’ mode to retrieve the corresponding puntuation character detailed in the getPunctuation function.

function compareToAlphabet(number, mode){
                const alphabetUpper = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
                const alphabetLower = ['a','b','c','d','e','f','g','h','i','j','k','l','m','i','o','p','q','r','s','t','u','v','w','x','y','z']

                const index = parseNumber(number) - 1
                
                    let result = '';
                    if(mode=='uppercase'){
                        for (let i = 0; i <= alphabetUpper.length - 1; i++){
                        if (index === alphabetUpper.indexOf(alphabetUpper[i])){
                            result = alphabetUpper[i]
                            } 
                        } return result
                    }
                    if (mode=='lowercase'){
                        for (let i = 0; i <= alphabetLower.length - 1; i++){
                        if (index === alphabetLower.indexOf(alphabetLower[i])){
                            result = alphabetLower[i]
                            } 
                        } return result
                    }
                
            }
function getPunctuation(number){
                const index = parseNumber(number);
                let result = '' 
                    switch(index){
                        case 1: result = '!';
                        break;
                        case 2: result = '?';
                        break;
                        case 3: result = ',';
                        break;
                        case 4: result = '.';
                        break;
                        case 5: result = ' ';
                        break;
                        case 6: result = ';';
                        break;
                        case 7: result = '"';
                        break;
                        case 8: result = ''';
                        break;  
                    } return result
                
            }
    function decoder(...args) {
    let resultArr = [];
    let mode = 'uppercase'; 

    for (let i = 0; i < args.length; i++) {
        let index = parseNumber(args[i]);
        function getLetter(index, mode) {
            
             
            // Update mode based on conditions
           
            if (index % 27 === 0 && mode === 'uppercase') {
                mode = 'lowercase';
            } else if (index % 27 === 0 && mode === 'lowercase') {
                mode = 'uppercase';
            } else if (index % 9 === 0 &&(mode === 'lowercase'||mode==='uppercase')){
                mode === 'punctuation'
            }
            if(mode === 'lowercase' || mode === 'uppercase'){
                return compareToAlphabet(index % 27, mode);
            }
            if(mode === 'punctuation'){
                return getPunctuation(index % 9)
            }
            
        }

        let emptyLetter = getLetter(index, mode)

        if (emptyLetter !== ''){//skips pushing empy strings
            resultArr.push(getLetter(index, mode));
        }

        mode = (index % 27 === 0 || index % 9 === 0) ? 
        ((mode === 'uppercase' || mode === 'lowercase') ? 'punctuation' : 
         (mode === 'punctuation' ? (index % 27 === 0 ? 'lowercase' : 'uppercase') : mode)) : mode;

    }
    
    return resultArr.join('');
}

Ri"'?kr"es! <— this is the output i get
Right?Yes! <— this is the expected output

what am i doing wrong?

Find Asp.net Web Forms control in script in Js (JavaScript) file

I have the following script in a Web Forms project:

function myScriptInAspxFile() {
         var obj = document.getElementById("<%= TextBox1.ClientID %>");
         if (obj) {                 
             obj.value = "My Text";                 
         }
     }

this works fine when I put the script inside the Web forms aspx file, but when I change the script to a Js (JavaScript) file the line:

var obj = document.getElementById("<%= TextBox1.ClientID %>");

The assignment returns me a null value for the obj variable. How could I find a control from a script in a Js (JavaScript) file? Greetings and thank you in advance.

Sveltekit on change function not being called when added to a component

I’ve got the following component called NumericField:

<script>
    import {isNumber} from "../../helpers/index.js";
    import {onMount} from "svelte";

    export let name;
    export let id;
    export let value;
    export let readOnly=false;
    export let disabled=false; // use disabled so we don't submit the value.
    export let styleClass="input w-full py-4 font-medium bg-gray-100 border-gray-200 text-smn" +
        "                                  focus:outline-none focus:border-gray-400 focus:bg-white";


    onMount(() => {
        // if a value is provided for the field then format it and place it in it.
        if (value !== null && value !== undefined) {
            value = formatNumber(value);
            return;
        }

        // if a value was not provided or is not a valid numeric field then set the field value to empty.
        value="";
    });

    const formatNumber = e => {

        // on keyup validate if the value is "", if so return. This is to avoid placing a NaN on the field.
        if (e.target?.value == "") {
            return
        }

        if (parseInt(String(e).replace(/,/g,'')) === NaN) {
            e.target.value = "";
            return
        }

        // if e is not an event (event is of type object) but a number (this will apply for on edit mode or read only fields).
        if (typeof e !== 'object' && (isNumber(e) || isNumber(parseInt(e)))) {
            console.log("not an event. value = ", e)
            // remove all commas (,) from the number and return it.
            return parseInt(String(e).replace(/,/g,'')).toLocaleString("en-US");
        }

        // reformat the given number by adding commas to it but since this is recalculated on the fly first we
        // have to remove any existing commas.
        e.target.value = parseInt(e.target.value.replace(/,/g,'')).toLocaleString("en-US");
    }


</script>

<input
        id={id}
        on:keyup={formatNumber}
        name={name}
        readonly={readOnly}
        disabled={disabled}
        type="text"
        bind:value
        class={styleClass}
    />

And I’ve got a form in which I’m using the component:

<NumericField
                            on:change={updateTotal}
                            bind:purchasedPrice
                            id="purchasedPrice"
                            name="purchased_price"
                    />

I’m calling updateTotal to calculate the total based on the value inputed in the component, but my function is never called:

const updateTotal = () => {
        console.log("here in updateTotal")
    }

what am I doing wrong?

Thanks

Assistance with codes [closed]

I m new and this world is totally unknown for me. I need help with reading I guess on some computer codes that I have.

Im not even sure how to explain but its conected to something – arrays stringw, json, node something…

Im totally out of that computer stuff world but ill attach some part of what I need help.

If someone is willing message me. Picture
(https://i.stack.imgur.com/2AcIJ.jpg)

Im not sure where to get help or what I should look.for

Create new array using values from another array

I’ve simplified the below array to prevent confusion. Here’s my progress up to now… I’ve attempted various methods to generate a fresh array, but haven’t succeeded yet. I’ve even scoured Stack Overflow for solutions. The result is accurate, but unfortunately, I’m only receiving a single object in the fieldsArray. I believe I’m close to the solution with my current approach. Any assistance you can offer would be greatly appreciated. Thank you.

I have the following array.

[
    {
        fileName: 'Home_AIT_Spraying-1_29062023.agdata',
        fileType: 'AgData',
        metadata: {
            tags: [
                {
                    type: 'Field',
                    value: 'Home',
                    uniqueId: null,
                },
                {
                    type: 'Farm',
                    value: 'OTF',
                    uniqueId: null,
                },
                {
                    type: 'Grower',
                    value: 'Jim Smith',
                    uniqueId: null,
                }
            ],
        },
    },
    {
        fileName: 'AIT_AIT_Spraying-1_30062023.agdata',
        fileType: 'AgData',
        metadata: {
            tags: [
                {
                    type: 'Field',
                    value: 'Oscar',
                    uniqueId: null,
                },
                {
                    type: 'Farm',
                    value: 'OTF',
                    uniqueId: null,
                },
                {
                    type: 'Grower',
                    value: 'Jasper Jones',
                    uniqueId: null,
                }
            ],
        },
    }
]

I’d like the output to look like the following:

[
    {
        Field: 'AIT',
        Farm: 'OTF',
        Grower: 'Jim Smith',
    },
    {
        Field: 'Oscar',
        Farm: 'OTF',
        Grower: 'Jasper Jones',
    },
];

And my current solution:

const fieldsMetaArray = [] as [];

data.forEach((val, key) => {
    console.log('key', key);
    val.metadata.tags.map((tag) => {
        console.log(`key: ${tag.type} value: ${tag.value}`);
        fieldsMetaArray[tag.type] = tag.value;
    });
});

console.log(fieldsArray);

Trouble with and framework materialize

I’m trying to learn how to use the materialize framework (it’s for a uni assignment) I have added the framework to my project but it seems that the framework has somehow vanished the <select>, why this is happening?

here is my code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Inscripción en línea</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <script>
        $(document).ready(function(){
            $("#nivel").on("change", function(){
                var nivel = $(this).val();
                crearListaCarreras(nivel);
            });
        });

        var oferta = {
            'lic_e':['Administración y Dirección de Empresas', 'Derecho', 'Comunicación y Entornos Digitales', 'Ingeniería en Sistemas Computacionales', 'Psicología'],
            'lic_m':['Administración', 'Derecho', 'Ingeniería Industrial', 'Informática'],
            'mae_e':['Administración y Gestión de Instituciones Educativas', 'Derecho Fiscal', 'Derecho Privado', 'Redes y Telecomunicaciones', 'Impuestos'],
            'doc_e':['Ciencias Administrativas', 'Derecho', 'Ingeniería en Tecnologías Emergentes', 'Educación']
        };

        function crearListaCarreras(nivel){
            var carreras = $("#carrera").empty().append($("<option value=''>Seleccione una opción</option>"));
            if(nivel !== ""){
                var lista_carreras = [];
                var costo = 0;
                switch(nivel){
                    case 'lic_e': lista_carreras = oferta.lic_e; costo = 1500; break;
                    case 'lic_m': lista_carreras = oferta.lic_m; costo = 2500; break;
                    case 'mae_e': lista_carreras = oferta.mae_e; costo = 3000; break;
                    case 'doc_e': lista_carreras = oferta.doc_e; costo = 3500; break;
                }

                if(lista_carreras.length > 0){
                    $.each(lista_carreras, function(k,v){
                        carreras.append(
                            $("<option>").text(v)
                        )
                    });

                    $("#costo").val(costo);
                }
            }
        }
    </script>
</head>
<body>
<div class="container">
<img src="https://servicios.ver.ucc.mx/icecc/img/logo_ucc_transparente.png" style="background:#002449"/>
<h1>Inscripción en línea</h1>
<h3>Ingreso</h3>
Nivel<br>

<select id="nivel">
    <option value="">Seleccione una opción</option>
    <option value="lic_e">Licenciatura escolarizada</option>
    <option value="lic_m">Licenciatura mixta</option>
    <option value="mae_e">Maestría</option>
    <option value="doc_e">Doctorado</option>
</select><br>

Carrera<br>
<select id="carrera">
    <option value="">Seleccione una opción</option>
</select>

<h3>Datos personales</h3>
C.U.R.P<br />
<input type="text" /><br>

Nombre<br />
<input type="text" /><br>

Apellidos<br />
<input type="text" /><br>

E-mail<br />
<input type="text" /><br>

Celular<br />
<input type="text" /><br>

Teléfono<br />
<input type="text" /><br>

Escuela de procedencia<br />
<input type="text" />

<h3>Información de pago</h3>
Total a pagar<br />
<input type="text" id="costo" readonly/><br>

Método de pago<br />
<input type="checkbox" /> depósito referenciado<br>
<input type="checkbox" /> tarjeta de crédito o débito<br>
<input type="checkbox" /> en cajas de la UCC<br>

<input type="button" value="Enviar"/>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>
</html>

I have tried to read the documentation but it has prove unhelpful.