Category: javascript

I have a revenue input field in a javascript/jquery form:

1. Need a dollar sign :before
2. add commas as the currency increases

I have a dollar sign showing via css, but issues centering it and ensuring the field entry point is next to it without overlapping. Unsure how to do the commas. Any suggestions or tips are welcome!

HTML:

  <form id="rev-calculator">
  <label for="price">Monthly Revenue</label>
  <div class="fields">
    <input type="number" name="price" id="price" min="0" max="10000000000" required data-type="number"> </input>
    <br>
  </form>

CSS:

  <style>
      .body {
        text-align: left;
      }
      
      .fields {
        margin: 0 10px 0 0;
      }
      
      .fields:before {
        content: "$";
        text-align: center;
        position: relative;
        left:30px;
      }
      
      #price {
        border-radius: 5px;
        margin: 15px;
        padding: 10px;
        color: black;
      }
    </style>

JS:

<script>
  $('#rev-calculator').on('click', 'button', function(e) {
    e.preventDefault();
    var price = $("#price").val();
    console.log(price);
  })
</script>

codepen: https://codepen.io/kedarPE/pen/JjroYyb

input field

This is the code which I wrote but I don’t know how to return the names and make them an array

const objects = [
  {
    name: "John",
    age: 30
  },
  {
    name: "Mike",
    age: 23
  }
];

const object = () => {
  Object.values(objects).forEach (element => {
    let names = element.name;

    console.log(names);
  });
};
object();

When using JSX syntax with Generics, Typescript is able to infer properties normally, except the type of function parameters.

Example code:

interface Dictionary {
  a: JSX.IntrinsicElements['a'];
  button: JSX.IntrinsicElements['button'];
}

type Props<T extends 'a' | 'button'> = Dictionary[T] & {
  as: T;
};

function Test<T extends 'a' | 'button'>(args: Props<T>) {
  return null;
}

<Test as="a" href="#" onClick={(arg) => {}} />; // Parameter 'arg' implicitly has an 'any' type.

Test({
  as: 'a',
  href: '#',
  onClick: (arg) => {}, // No error
});

TS Playground

If I place the mouse over the onClick property, it can tell the type of the onClick (React.MouseEventHandler<HTMLAnchorElement>), but still cannot infer the parameter’s type.

like in topic, i have tiny slider who is tweaking at first change of image like 2 times and then go smooth and all is good, but first load gives tweak of try 2 change image.
Maybe u can figure it out? Really thanks for time, and i am fresh in webdev so dont be rude at me 😛

$(function() {
  const wrapper = $('#slider');

  setInterval(function() {
    const firstChild = $(wrapper).children()[0];
    $(firstChild)
      .fadeOut(1000)
      .next('a')
      .fadeIn(1000)
      .end()
      .appendTo('#slider');
  }, 3000);
});

img {
  max-width: 100%;
}

#slider:after {
  content: "";
  display: table;
  clear: both;
}

#slider img {
  float: left;
  margin: 0 -100% 0 0;
}

#slider {
  width: 200px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure id="slider">
  <a target="_blank" href="http://www.google.pl">
    <img src="https://i1.kwejk.pl/k/obrazki/2020/11/kwzgq1D7NOtJnNRp.jpg" />
  </a>
  <a target="_blank" href="http://www.google.pl">

    <img src="https://media.istockphoto.com/vectors/adorable-hedgehog-in-modern-flat-style-vector-vector-id930758362?k=20&m=930758362&s=612x612&w=0&h=UjgzuyypJq1tNI3RVKqlB1DjS1He72xtlw47DNWvFi8=" />
  </a>
  <a target="_blank" href="http://www.google.pl">

    <img src="https://img.redro.pl/plakaty/african-hedgehog-rolling-over-while-looking-at-camera-happy-400-195157167.jpg" />
  </a>
</figure>

I have an electron app that builds and runs in development, but when packaging the app with electron-builder, the preload script is not packaged in the right location.

This is a well documented issue and there are very similar questions here and here for example, but none of the replies or solutions are working in my case.

From my electron.js file:

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(app.getAppPath(), 'src/preload.js'),
            contextIsolation: true,
        },
    });

    // In production, set the initial browser path to the local bundle generated
    // by the Create React App build process.
    // In development, set it to localhost to allow live/hot-reloading.
    const appURL = app.isPackaged
        ? url.format({
            pathname: path.join(__dirname, 'index.html'),
            protocol: 'file:',
            slashes: true,
        })
        : 'http://localhost:3000';
    mainWindow.loadURL(appURL);

    mainWindow.webContents.openDevTools();
}

My preload script:

const { contextBridge, shell } = require('electron')

contextBridge.exposeInMainWorld(
    'electron',
    {
        openBrowserWindow: (url) => shell.openExternal(url)
    }
)

And my Electron app package.json:

    "build": {
        "extends": null,
        "appId": "com.app",
        "productName": "App",
        "directories": {
            "output": "dist"
        },
        "mac": {
            "target": {
                "target": "pkg",
                "arch": [
                    "universal"
                ]
            },
            "darkModeSupport": "true",
            "extendInfo": "app"
        },
        "pkg": {
            "installLocation": "/Applications",
            "overwriteAction": "upgrade"
        },
        "files": [
            "**",
            "../app/src/*",
            "src/preload.js"
        ],
        "extraResources": [
            "../app/src/*",
            "src/preload.js"
        ],
        "extraFiles": [
            "../app/src/*",
            "src/preload.js"
        ]
    }

Above I have tried to make sure the “src/preload.js” file is copied over in different ways, but I still get the error:

Unable to load preload script: …app/Contents/Resources/app.asar/src/preload.js

Error: Cannot find module ‘…app/Contents/Resources/app.asar/src/preload.js’

The preload script is in fact copied over, but it is not part of the app.asar file. It is copied in to a src folder outside of the Resources folder which contains the app.asar file:

How do I correctly configure electron-builder so this file is in the right location and can be accessed at package runtime?

I have a question. enter image description here. i want to show a text in box on webpage that show me differen different text on each click on it. like showing count no. on .JS

I’m stuck. Trying to push input values into an array, which actually works, but then I want to get them out into an unordered list, and they don’t show up. What am I doing wrong?

const inputBtn = document.querySelector("#input-btn");
let myLeads = [];
const inputEl = document.querySelector("#input-el");
const ulEl = document.querySelector("#ul-el");

inputBtn.addEventListener("click", function() {
  myLeads.push(inputEl.value);
  console.log(myLeads);
});

for (let i = 0; i < myLeads.length; i++) {
  ulEl.innerHTML += "<li>" + myLeads[i] + "</li>";
}

<input type="text" id="input-el" />
<button id="input-btn">SAVE INPUT</button>
<ul id="ul-el"></ul>

When I run yarn build I get a .LICENSE.txt for every .js file in addition to my .js files. I would like it to stop making those files

I am basing my current solution off of this link
Webpack – omit creation of LICENSE.txt files

The .LICENSE is still being created. This is my webpack.config.js code

const commonConfig = require('./webpack-config/webpack.common.config.js');
const developmentConfig = require('./webpack-config/webpack.development.config.js');
const productionConfig = require('./webpack-config/webpack.production.config.js');
const TerserPlugin = require('terser-webpack-plugin');

// - Webpack configurations
// merge configurations
module.exports = merge(
  // entryPlus plugin allows us to use dynamic entries
  {
    entry: entryPlus(entryObjectsArray),
  },
  // include config needed across all builds
  commonConfig,
  developmentConfig,
  productionConfig,
  {
    optimization: {
      minimizer: [new TerserPlugin({
        extractComments: false,
      })],
    }
  }
  
);

I would want to execute in parallel two API calls inside my thunk. However, I need to properly handle the errors. I have prepared simplified version of my async functions. Sections I want to parallelize are commented.

async function addCredentialA() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.5)
        return resolve({status: '200'})
      else
        return reject({status: '500'})
    }, 1000)
  });
}

async function addCredentialB() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.3)
        return resolve({status: '200'})
      else
        return reject({status: '500'})
    }, 2000)
  });
}

async function addCredentials(sendRequestA: boolean, sendRequestB: boolean) {
  try {
    // This should be parallel
    if (sendRequestA) {
      try {
        await addCredentialA()
        console.log('Successfully added credential A')
      } catch (e) {
        console.log('Something wrong with credential A', e)
        throw e
      }
    } 

    // This should be parallel
    if (sendRequestB) {
      try {
        await addCredentialB()
        console.log('Successfully added credential B')
      } catch (e) {
        console.log('Something wrong with credential B', e)
        throw e
      }
    } 

    console.log('Succesfully added two credentials')
  } catch (e) {
    console.log('There was problem with adding credentials')
    console.log(e)
  }
}

addCredentials(true, true)

TypeScript playground

I am trying to deploy a full-stack node project on Bluehost via c panel.
How do I install Node.js in the c panel in the first place ?
Could someone please provide a resource/article to refer ?

function test(event)
{
    document.getElementById('ausgabe').innerHTML =
    'test';
}

document.addEventListener("DOMContentLoaded", (event) => {
    document.getElementById("input1").addEventListener("submit", (event) => {
        test(event);
    })
})

Clicking the Button does basically nothing. The website doesn’t change when I’m clicking it.

i have a json file as a server, i need filter the data json when i click in a button, example, in the Navbar i have:

const NavBar = ({setSearchValue, setType}) => {
  const handleType = (heroType) =>{
    setType(heroType)
    }

  return (
// this input is ok, i can search data from here
              <input id='searchInput' placeholder='Search' onChange={(event) => {setSearchValue(event.target.value)}}/>
//these are the buttons
            <Nav.Link onClick={() => handleType('All')}>All Heroes</Nav.Link>
            <Nav.Link onClick={() => handleType('Flying')} >Flying Heroes</Nav.Link>
            <Nav.Link onClick={() => handleType('Flightless')}>Flightless Heroes</Nav.Link>

and this is where i need to show it

  //import Navbar
        import NavBar from "./NavBar";
        
        const Home = () => {
    // saved the data i need to show 
          const [content, setContent] = useState();
    // saved the searchvalue of navbar, its ok.
          const [searchValue, setSearchValue] = useState("");
    // i tried save the button data here, next with a IF function i tried to show it, no work
          const [type, setType] = useState("Flying");
        
          useEffect(() => {
// get json dta
            const getData = async () => {
              const response = await db.get("data");
        
              let data = response.data.filter((val) => {
// if no searchValue, return all
                if (searchValue === "") return val;
//if searchVale, return coincidences
                else if (val.nombre.toLowerCase().includes(searchValue.toLowerCase()))
                  return val;
              });
        // returns bootstrap rows depending on number of elements
              const rows = [...Array(Math.ceil(data.length / 3))];
              const imagesRows = rows.map((row, idx) =>
                data.slice(idx * 3, idx * 3 + 3)
              );
        //saved all in setContent
              setContent(
                //code
                )
            getData();
          }, [searchValue]);
        
          return (
            <>

              <NavBar setSearchValue={setSearchValue} setType={setType} />
//show content
              <Container>{content >= 0 ? <p>No results</p> : content}</Container>
            </>
          );
        };

I’ve tried a lot of things, i think i need change a lot of code i a want this work.
Any help would be extremely appreciated.

I’m trying to have the Accordion MUI component NOT move and NOT apply top and bottom margins to summary elements while it is in the expanded mode. I add this code to the summary element but that’s not working. what do you offer me? it worth mentioning that it works on the first accordion but not the others!!!!!!!!!!

sx={{
   "&.Mui-expanded": {
   minHeight: 0,
   margin: '12px 0',
   },
   "& .MuiAccordionSummary-content.Mui-expanded": {
   margin: 0,
   }
}}

I want to change an iframe src when you click the menu bar. My menu bar is in another component, on which you are able to change the language in a dropdown menu. I want to change the iframe src depending on which language was clicked.

Here is my HTML menu wth a function named ‘updateSrc()’:

<nav>

<div class="select-box">
                      <div class="select-box__current" tabindex="1">
                        <div class="select-box__value" (click)="updateSrc(first_url)">
                          <input class="select-box__input" type="radio" id="0" value="1" name="Ben" checked="checked"/>
                          <p class="select-box__input-text">Es</p>
                        </div>
                        <div class="select-box__value" (click)="updateSrc(second_url)">
                          <input class="select-box__input" type="radio" id="1" value="2" name="Ben"/>
                          <p class="select-box__input-text">En</p>
                        </div>
                        <div class="select-box__value">
                          <input class="select-box__input" type="radio" id="2" value="3" name="Ben"/>
                          <p class="select-box__input-text">It</p>
                        </div>
                        <img class="select-box__icon" src="http://cdn.onlinewebfonts.com/svg/img_295694.svg" alt="Arrow Icon" aria-hidden="true"/>
                      </div>

                      <ul class="select-box__list">
                        <li>
                          <label class="select-box__option" for="0" aria-hidden="aria-hidden">Es</label>
                        </li>
                        <li>
                          <label class="select-box__option" for="1" aria-hidden="aria-hidden">En</label>
                        </li>
                        <li>
                          <a href="https://esourcecapital.it/">
                          <label class="select-box__option" aria-hidden="aria-hidden">It</label>
                          </a>
                        </li>
                      </ul>
                    </div> 

</nav>

Here is my TS file:

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  menu:boolean = false;

  constructor(private translate: TranslateService,
              private sanitizer: DomSanitizer)
    {  }

  ngOnInit(): void {

  }

  first_url = "https://www.youtube.com/embed/4oP20QZxahk";
  second_url = "https://www.youtube.com/embed/Q_ZPBqVF0_8";
  current_url: SafeUrl;

  updateSrc(url) {
    this.current_url=this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }


}

And also the iframe I want to change is in another component as I said before:

<div class="center">
                            <iframe width="640" height="360" id="frame" frameborder="0" src="https://www.youtube.com/embed/4oP20QZxahk" [src]="current_url" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!--                            <div class="pairs">
                                <button md-button (click)="updateSrc(first_url)" id="first" class="top-link">Video en español</button>
                                <button md-button (click)="updateSrc(second_url)" id="second" class="top-link">Video in english</button>
                            </div> -->
                        </div>

if everything were in the same component it would work, but the menu is in one component and the iframe tag in another.

I’m using quite a new technology called Astro (https://astro.build/) to build a completely static, server side rendered page, shipping zero JS.

I have a page with a form that is a simple text input, when the user fills this in and clicks the submit button, it sends a GET request to an astro page. The url will look something like this ….

/?search=1234

What I want to be able to do is get access to that querystring parameter in order to redirect my user to another static page /1234.

I am trying to access the quesrystring parameter with Astro.request, but the object, including the parameters attribute is completely empty.

Is there anyway to access the querystring parameters from a .astro page/file?