Category: javascript

So, I’m trying to make a new year’s countdown timer so I can keep track of the time until it’s New Year’s. But now, one of the pieces of text isn’t blitting onto the screen. It’s the piece that is supposed to tell how much more time until New Year’s. Here’s my code so far:

text = countDown + "";
ctx.fillText(text, 450, 285);

This might be a fool question but let me try to explain myself, I want to run a function multiple times (insertOffice()) and each time I run it, add a number to a const, this number will increase depending of the times I want to run the code (in this case is 5).
Here is what I have tried:

function insertOffice() {
    var y = loop(i);
    console.log(y)
}

function loop() {
    for (var i = 1; i < 5; i++) insertOffice(i);
}

loop();

As you can see, lopp() runs insertOffice() 5 times, and insertOffice() print the numbers, I expect to print

1
2
3
4
5

I used this question to build my loop() function.

I’m trying not to repeat code and have a complicated function that’s used in at least 3 different components in react. I’m trying to put them all in one folder and importing them but there’s a ton of dependencies that I pass as function parameters and even after I’ve done that, I can’t figure out how to pass setState as a parameter because it keeps telling me it’s not a function.

export const doThing = (setState) => {
    code
}

import { doThing } from "./place"

doThing(setState)

TypeError: setState is not a function

Even if I can get setState working I still feel like there should be a better way. Really I’d just like it to act like a copy paste and use variables from the scope it was imported to. Any way to do that?

I am attempting to create a square from user inputs.

I thought that having having the height and width in my style multiplied together would create the square after clicking my button.

My question is: How do I get the user inputs to be used for the height and width of the box?

HTML:

<input type="text" id="width">
<input type="text" id="height">
    
<button onclick="calculate()">Click Me For Square</button>
<br>
<p id="box"></p>

Javascript:

    function calculate() {
        var w = document.getElementById("width").value;
        var h = document.getElementById("height").value;
        box = document.getElementById("box");
        box.innerHTML = " " + (w*h);
    }
    
    var square = document.createElement('div');
        square.className = 'square';
        document.body.appendChild(square);  

Style

 background: red;
  width: (h*w);
  height: (w*h);
  margin: 50px auto;
}

so I need to store two unique ID’s into the url and extract the id’s in another component to get data from the data base.

This task requires me to send an email with a link to complete a task. If the task is deleted I need to know who sent the task email.

Any information of the direction I should move in is appreciated.

import React from 'react';
// current setup
const Practice = () => {
    return (
      <div>
        <Router>
          <Something path="/task/:id" />
          <Something path="/task/:id/:action" />
        </Router>
      </div>
    );
  };
  
export default practice;


// desired setup
// I need to store Id's and make it not break the website. like lets say optional values or something.
// The only required value is the first /:id
const Practice = () => {
    return (
      <div>
        <Router>
          <Something path="/task/:id/:id?/:id?" />
        </Router>
      </div>
    );
  };
  
export default practice;
  
{ " desired output is = localhost:3000/task/111111?222222?33333" }
{ "so that I can store the last two id's in an array = "['localhost:3000/task/111111', '222222', '33333'] }

//component
const Task = ({ id, action, companyId, userId }) => {
const company = companyId
const user = userId
}

I need to type HOC for my component (and that was asked millions of times). But I need to do something opposite to the typical withSomething injection. I need to add an extra property to my outer component and pass all other (but unknown) properties to the inner component:

// @flow

import * as React from 'react'

// That's an example of a standard component doing nothing
type Props = {|  str: string,  num: number |}
const Hello = ({ str, num }: Props): React.Node => {
  console.log(str, num)
  return <div>'Hello'</div>
}

// That's the standard (and working) example of the component with injected prop.
// It's an equivalent of prop currying, I set str prop to some default value
type InnerInjected = {| str: string |}
const withInnerInject = <P>(
  Component: React.AbstractComponent<$Exact<{ ...P, ...InnerInjected }>>,
): React.AbstractComponent<P> => {
  return (props: P) => {
    return <Component str="aaa" {...props} />
  }
}

const InnerInjectHello = withInnerInject(Hello)


// And here is non-working example. 
export const withOuterInject = <P>(
  Component: React.AbstractComponent<P>,
): React.AbstractComponent<P> => {
  return (props: P) => {
    // I need to pass the bool (or some other variable) to my component to perform 
    // some action with it based on its value and return the standard component with all
    // that component properties that I don't know yet.
    const { bool, ...rest } = props
    return <Component {...rest} />
  }
}

const OuterInjectHello = withOuterInject(Hello)

const Example = (): React.Node => {
  return (
    <>
      {/* Both num and str props are set as intended */}
      <Hello num={25} str="something" >
      {/* str is injected with value of 'aaa' */}
      <InnerInjectHello num={25} />
      {/* Works, but typing is wrong */}
      <OuterInjectHello str="aa" num={25} bool />
    </>
  )
}

I tried several $Diff<> and $Rest<> approaches but they simply don’t work with generics.

So I am trying to write a script to add a whole, newly added, section to Adobe Analytics. I am not sure I can do it though, so I will appreciate your help. I thought I should add a class name to the section and use document.getElementsbyClassName but it does not seem to work? I also need to add the nested divs and their styles again using JS?
Here is my code:

<section class="flex-columns" style="
    background-color: crimson;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
"> 
   <div style="
    top: 132px;
    left: 340px;
    width: 400px;
    height: 400px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    margin-left: 5px;
    margin-right: 15px;
">
    <p style="
    top: 187px;
    left: 391px;
    width: 31px;
    height: 138px;
    text-align: left;
    font: normal normal bold 120px/36px Value;
    letter-spacing: 0px;
    opacity: 1;
    margin-top: 65px;
    margin-left: 30px;
    color: black;
    border-style: solid;
    border-color: black;
">1</p>
    <p style="
    top: 326px;
    left: 391px;
    width: 298px;
    height: 152px;
    text-align: left;
    font: normal normal bold 45px/50px Value;
    letter-spacing: 0px;
    color: #888888;
    opacity: 1;
    margin-left: 30px;
">Find your nearest store</p>
</div>
    <div style="
    top: 132px;
    left: 340px;
    width: 400px;
    height: 400px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    margin-left: 5px;
    margin-right: 15px;
"> 
<p style="
    top: 187px;
    left: 811px;
    width: 66px;
    height: 138px;
    text-align: left;
    font: normal normal bold 120px/36px Value;
    letter-spacing: 0px;
    color: black;
    opacity: 1;
    margin-top: 65px;
    margin-left: 30px;
">2</p>
<p style="
    top: 326px;
    left: 811px;
    width: 298px;
    height: 152px;
    text-align: left;
    font: normal normal bold 45px/50px Value;
    letter-spacing: 0px;
    color: #888888;
    opacity: 1;
    margin-left: 30px;
">Book a free hearing test</p>
</div>
    <div style="
    top: 132px;
    left: 340px;
    width: 400px;
    height: 400px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    margin-left: 5px;
    margin-right: 15px;
">
    <p style="
    top: 187px;
    left: 1231px;
    width: 68px;
    height: 138px;
    text-align: left;
    font: normal normal bold 120px/36px Value;
    letter-spacing: 0px;
    color: black;
    border: 2px;
    border-color: black;
    margin-top: 65px;
    margin-left: 30px;
">3</p>
    <p style="
    top: 326px;
    left: 1231px;
    width: 298px;
    height: 152px;
    text-align: left;
    font: normal normal bold 45px/50px Value;
    letter-spacing: 0px;
    color: #888888;
    opacity: 1;
    margin-left: 30px;
    /* margin-bottom: 0px; */
">Get supported by our experts</p>
</div>
</section>

I’m trying to make a chart that displays cryptocurrency prices using the CoinGeckoAPI and Chart.js. The data will be updated about every minute or so. I want my chart x-axis to look similar to this:

My x-axis data is an array of unix time values that I need to convert to Date before setting them as labels in the chart. I’m using SignalR and a background task in an ASP.NET Core MVC application to periodically send CoinGeckoAPI data to the client.

How can I set specific dynamic values as the x-axis ticks? Ideally the ticks would be set to something like every third hour within my dataset.

HTML:

<canvas id="myChart" width="400" height="400"></canvas>

JavaScript:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="text/javascript">

        //Establish SignalR connection
        var connection = new signalR.HubConnectionBuilder().withUrl("/hub").build();

        //Set up chart and initial empty configuration
        const config = {
            type: 'line',
            data: {},
            options: {}
        };
        const myChart = new Chart(document.getElementById('myChart'),
            config);

        //Pass data from SignalR Hub to client
        connection.on("CryptoPriceUpdated", function (unixTimeArray, priceArray) {

            //Convert unix time array to Date array with desired date formatting
            var formattedDateArray = new Array();
            for (var i = 0; i < unixTimeArray.length - 1; i++) {
                var dateTemp = new Date(unixTimeArray[i]);
                formattedDateArray[i] = dateTemp.getHours() + ':' + dateTemp.getMinutes();
            }

            //Configure chart with new data
            var labels = formattedDateArray;
            var data = {
                labels: labels,
                datasets: [{
                    label: 'Price',
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    radius: 1,
                    data: priceArray
                }]
            };
            var options = {
                responsive: true,
            }

            //Update chart
            myChart.data = data;
            myChart.options = options;
            myChart.update();
        });

        connection.start();
    </script>

I am trying to implement React Beautiful DND in an existing project. Everything is working fine.

What needs to be done?

1. I want to know how we can map through the array directly to make draggable and droppable divs instead of array objects
2. I want to know how we can add static draggable text without mapping over the array. Thanks in advance

Here is what I have tried so far: https://codesandbox.io/s/hardcore-colden-un7el?file=/src/App.js:89-108

I am scraping a website and need to remove all the /n and /t from my strings.

I have tried the following code:

item.post_category = [];
 Array.from($doc.find('h6.link')).forEach(function(link){ 
            console.log(link.textContent.replace(/t+n+/gm, ""));        
            item.post_category.push(link.textContent);
          })
//this removes the linebreaks but not the tabs

Here are multiple sample array I have to iterate over:

["ntttttJune 15, 2021 • nttttttntttttnttttttttttntttttttttttttttnttttttFamily,ntttttntttttttttttttttntttttttttttttttnttttttGender Equality,ntttttntttttttttttnttttttnttttttnttttttntttttntttttntttttttttttntttttIn the Newsntttt"]

["ntttttJune 13, 2020 • nttttttntttttnttttttnttttttnttttttnttttttntttttntttttntttttttttttntttttIn the Newsntttt"]

["ntttttJuly 5, 2021 • nttttttntttttnttttttnttttttnttttttnttttttntttttntttttntttttttttttntttttNewsntttt"]

IDEALLY, I would want my arrays to look like this. Remove the date AND the n and t.

["Family,Gender Equality,In the News"]
["In the News"]
["News"]

I have the encryption_key but the below code generates another public key as below.
I need help in writing the same code in Javascript. Please let me know how can I do it.

Note: I am creating an AES key(random 32 bytes) and iv(initialization vector) of 16 bytes, then use these to encrypt my payload. This AES Key & IV will be then encrypted by public key(below generated). But, I have exhausted all options to rewrite the below code in Javascript.

public static PublicKey getOtherPublicKey(String encryption_key) {
    try {
        byte[] publicBytes = Base64.getDecoder().decode(encryption_key);
        X509EncodedKeySpec keySpec = new X509EncodedKeySpec(publicBytes);
        KeyFactory keyFactory = KeyFactory.getInstance("RSA");
        return keyFactory.generatePublic(keySpec);
    } catch (NoSuchAlgorithmException e) {
        throw new RuntimeException(e);
    } catch (InvalidKeySpecException e) {
        System.out.println("Invalid key specification.");
        throw new IllegalArgumentException(e);
    }
}

I plan to create visual testing for my library jQuery Terminal. But I need to know, if it’s possible to check the CSS box model (margin, padding, width, and height) of the elements.

I need to check if the CSS is working as it should, sice I unintentionally introduced bugs, like spacing before an image caused by ::before pseudo element or invalid width of the span that contained wider characters (like Chinese or Japanese). Can you test stuff like this with Cypress?

I was searching but was not able to find any information. There is DOM API but I don’t see size.

I have a lot of followers on Instagram
But sometimes I upload my videos on YouTube and share the video link on Instagram Story.
The problem is that:
Instagram’s internal browser does not allow you to open links in the youtube app.
I want to make this possible using php code.
I already saw a code in JavaScript that does this, but I want to use php.

Can anyone help me?

I’m creating a React project and I want to implement the BrowserRouter but the problem is that when I used it, it always throw the React Error of:

***Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.***

I don’t know what is this about, because as far as I know, I’m not using hooks and I read the documentation and other tutorials to solve this problem (like deleting double react or npm link and that’s stuff) but this still a problem.

Here are my files.

App.js

import { BrowserRouter, Route, Routes, Link } from "react-router-dom";

import Navbar from "./components/navbar"
import Login from "./components/login";
// import CreateExercise from "./components/create-exercise.component";
// import CreateUser from "./components/create-user.component";

function App() {
  return (
    // <h1>HOASNKFNLSA</h1>
    // <div>
    //   <Home/>
    
    // </div>
    <BrowserRouter>
      <Routes>
      <Route path="/" render={() => {
      <h1>HOKAKSFNAKSO</h1>
    }}>

    </Route>
    </Routes>
    </BrowserRouter>
    
    
    
  );
}

function Home() {
  return (
    <div className="container text-center"> 
      <h1>KEVIN STYLE PELUQUERIA</h1>
      
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

package.json

{
  "name": "kevin-style-peluqueria",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I don’t know if you need anything else, but if you do, ask me in comments. If you need to know more extra info, I’m not using webpack. I’m using the classic React structure application when you do the command npx create-react-app. I’m also using express and MongoDB like my backend (basically I’m creating an application with the MERN Stack).

Hello i am new to Vue and trying to use probs, but in my component i cant use the prob-data, because the probs are always undefined and appears as $attrs in the Vue-Debugger.

My Plan:
I want to Use the TabWrapper Component to fill the Modal-Component-Slot. The has an unnamed slot for multiple . Now i want to pass data via probs to the to define the “title” and the selected status, which has a default of false! Here, however, my probs are apparently not recognized because they appear as “attr” in the Vue debugger.

Vue-Debugger-Screenshot

parent.vue

.<template>
  <div class="options">
    <div class="textbox">
      <!-- todo -->
      <p class="login" @click="$refs.modalName.openModal()">Login / Registrieren</p>
      <p class="settings">Einstellungen</p>
      <p class="darkmode">Dunkles Design
        <input @click="toggleTheme" type="checkbox" name="switch" id="switch">
        <label for="switch"></label>
      </p>
    </div>
  </div>

  <!-- User-Settings-Modal -->
  <BasicModal ref="modalName">

    <template v-slot:header>
        <h1>Modal title</h1>
    </template>

    <template v-slot:body>

      <TabWrapper>
        <Tab title="Title-A" :selected="true">
           Demo Content: A
        </Tab>
        <Tab title="Title-B" >
           Demo Content: B
        </Tab>
        <Tab title="Title-C">
           Demo Content: C
        </Tab>
        <Tab title="Title-D">
           Demo Content: D
        </Tab>
      </TabWrapper>

    </template>
    
  </BasicModal>

</template>

<script>
import BasicModal from '@/components/Ui/BasicModal.vue'
import TabWrapper from '@/components/Ui/TabWrapper.vue'
import Tab from '@/components/Ui/Tab.vue'

export default {
  components: {
    BasicModal,
    TabWrapper,
    Tab
  },
  data() {
    return {
      theme: ''
    }
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme == 'darkMode' ? 'root' : 'darkMode'
      document.documentElement.setAttribute('data-theme', this.theme);
    }
  }
}
</script>

tabwrapper.vue

<template>
<div class="tabs-wrapper">
  <div class="tabs-navigation">
    <ul>
      <li v-for="(tab, index) in tabs" :key="index">
        <div class="tabs-navigation-item"
            :class="{ 'is-active': tab.isActive }"
            @click="selectedTab(tab)">

            {{ tab.name }}

        </div>
      </li>
    </ul>
  </div>
    <div class="tabs-content">
        <slot></slot>
    </div>
</div>

</template>

<script>
export default {
  data() {
    return {
      tabs: []
    }
  },
  methods: {
    selectedTab(selectedTab) {
      this.tabs.forEach(tab => {
        tab.isActive = (tab.name === selectedTab.name);
      });
    }
  }
}
</script>

tab.vue

<template>
    <div v-show="isActive">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        probs: {
            title: { required: true},
            selected: {
                type: Boolean,
                default: false
            }
         }
        ,
        data() {
            return {
                 isActive: this.selected,
                 name: this.title
            }
        },
        created() {
            console.log(this.title)
            this.$parent.tabs.push(this);
        }
    }
</script>