Category: javascript

Is there a way to combine multiple Lottie animations into a single one?
I tried https://github.com/LottieFiles/lottie-js but failed.
Above lib offers good enough API to manipulate existing elements, but doesn’t allow to combine aniamtions.
Are there any other javascript libraries that may achieve this?

I’m trying to validate an object, which is an union type of two objects. It’s like two different subforms where you can fill either of them or both, but it shouldn’t be empty

here’s a simplified example:

// it's valid if it has all of the fields of the first sub-form
const valid1 = {
  a: "a",
  b: "b",
  c: "c"
};

// it's valid if it has all of the fields of the second sub-form
const valid2 = {
  d: "a",
  e: "b",
  f: "c"
};

// it's valid if it has all of the fields of both sub-forms
const valid3 = {
  ...valid1,
  ...valid2
};

// it's invalid if it's empty or has only one sub-form field

const invalid1 = {
  ...valid1,
  e: "b"
};

const invalid2 = {
  ...valid2,
  a: "a"
};

const invalid3 = {};

here’s a sandbox setup with all of my attempts so far

So i’m working on making a website for this bar, and the owner wants me to create his menu. The thing is, his menu change quite a bit from a week to another. So what i want to do is basically have the menu in a unordered list or a table in the HTML page, but i need to be able to add or delete some of the lines. I was thinking of making it in JavaScript, but here’s my problem :

I know how to change the value of something in html with javascript, but i don’t know how i can, for example, add rows to a table in javascript. If, let’s say, one day the menu have 30 drinks on it, but the next day the owner wants to add a 31st drink on it, the script needs to be able to add a new line to the menu. Same thing goes with removing a drink. Also, i need to make a little interface for the owner to be able to all of that himself, without me needing to go modify the code every few days.

I also thought i could do it with PHP and a mySQL Database, but i’m not really sure if that solution would really be efficient.

Could someone help me figuring out which way of doing this would be the best ?

Thanks a lot

trying to import data from firebase, however i get thrown this error back:REACT: TypeError: Cannot read properties of undefined (reading ‘map’).

Making a project that monitors health of cloud functions and if they are working. Any help would be much appreciated. 🙂

app.js- the map function is in app.js

import "./App.css";
import "semantic-ui-css/semantic.min.css";
import { Container, Divider, Card } from "semantic-ui-react";
import Header from "./components/Header";
import Cards from "./components/Cards/index";
import { useState, useEffect } from "react";
import { AppProvider } from "./Context/Context.js";
import "firebase/compat/auth";
import {} from "firebase/firestore";
import * as FirestoreService from "./components/service/firebase";
import firebase from "@firebase/app-compat";

function App() {
  const [user, setUser] = useState(null);
  const [cloudFucntions, setCloudFucntions] = useState();

  const [setError] = useState();

  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      setUser(user);

      const unsubscribe = FirestoreService.getCloudFunctionItems(
        (querySnapshot) => {
          const updatedCloundFunctions = querySnapshot.docs.map((docSnapshot) =>
            docSnapshot.data()
          );
          setCloudFucntions(updatedCloundFunctions);
          console.log(updatedCloundFunctions);
        },
        (error) => setError("list-item-get-fail")
      );
      return unsubscribe;
    });
  }, []);

  return (
    <AppProvider>
      <div>
        <Container>
          <Header />

          <Divider horizontal section>
            Cloud Function Monitor
          </Divider>

          {user ? (
            <Card.Group itemsPerRow="4">
              {cloudFucntions.map((cloudFunction) => {
                return (
                  <Cards
                    key={cloudFunction.id}
                    cloudFunctions={cloudFunction}
                  ></Cards>
                );
              })}
            </Card.Group>
          ) : (
            <h2> Please sign in using the button in the top right. </h2>
          )}
        </Container>
      </div>
    </AppProvider>
  );
}

export default App;

firebase.js:

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import { initializeApp } from "firebase/app";
import {
  getFirestore,
  query,
  orderBy,
  onSnapshot,
  collection,
  getDoc,
  getDocs,
  addDoc,
  updateDoc,
  doc,
  serverTimestamp,
  arrayUnion,
} from "firebase/firestore";

const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx.firebaseapp.com",
  projectId: "dxxxxdata-d1",
  storageBucket: "xxx-reportingdata-d1.appspot.com",
  messagingSenderId: "xxxxxxxx",
  appId: "xxxxxxxx",
  measurementId: "G-xxxxxxx",
};

firebase.initializeApp(firebaseConfig);

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export const getCloudFunctionItems = (snapshot, error) => {
  const itemsColRef = collection(db, "cloudFunctionsMonitor");
  const itemsQuery = query(itemsColRef);
  return onSnapshot(itemsQuery, snapshot, error);
};

export const getCloudFunction = (cloudFunctionId) => {
  const cloudDocRef = doc(db, "cloudFunction", cloudFunctionId);
  return getDoc(cloudDocRef);
};

export const auth = firebase.auth();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });

export const signInWithGoogle = () => auth.signInWithPopup(provider);

export default firebase;

cards/index.js

import "../../App";
import "semantic-ui-css/semantic.min.css";
import { Icon, Card, Button } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import React, { Component } from "react";
import "semantic-ui-css/semantic.min.css";

export default class Cards extends Component {
  render() {
    return (
      <Card color={this.props.cloudFunction.functionColor}>
        {/* <h1> lastrunload: {this.propps.app.updatedCloundFunctions}</h1> */}
        <Card.Content>
          <Card.Header>
            {this.props.cloudFunction.cardFunctionHeader}
          </Card.Header>
          <Card.Description>
            {this.props.cloudFunction.cardFunctionDescription}
          </Card.Description>
        </Card.Content>
        <Card.Content extra>
          <Icon name="cog" />
          {this.props.cloudFunction.functionRunTime}
          <br />
          <Icon name="clock" />
          {this.props.cloudFunction.functionLastRun}
          <br />
          <Icon name="angle double down" />
          {this.props.cloudFunction.functionLastInsert}
        </Card.Content>
        <Card.Content extra>
          <div className="ui two buttons">
            <Button basic color={this.props.cloudFunction.functionColor}>
              {this.props.cloudFunction.functionButton}
            </Button>
          </div>
        </Card.Content>
      </Card>
    );
  }
}

I have this problem which I am trying to solve after I cloned a div multiple times using javascript. I want to replace the inner div with an empty div having a particular id for each. Assuming I have:

<div id="original">
    //some code here
        <div id="problem">
            //some code here
        </div>
    </div>

<div id="location">
//some code here
    <div id="problem">
        //some code here
    </div>
</div>

<div id="rep">
//some code here
    <div id="problem">
        //some code here
    </div>
</div>

I need to be able to get the div with id problem in the div location and replace it with something else and same to the div within the div repository.

el = document.getElementsByClassName(‘join-chat’)[0];
el.onmouseover = function(){el.click();}

The quill js works when hosted in a single HTML Page, but when if used with node js like this :

app.post(“/send_email”, attachmentUpload, (req, res) => {
if (!req.file) {

    return res.send("Error uploading file");
  } else {
    const recipient = req.body.email;
    const subject = req.body.subject;
    const message = req.body.message;
    const attachmentPath = req.file;
  
  
  console.log("recipient:", recipient);
    console.log("subject:", subject);
    console.log("message:", message);
    console.log("attachmentPath:", attachmentPath);
    
   
    return res.redirect("/success.html");

  }

I get fairly rendered quill js. Pic attached.

If have encountered a similar problem before kindly help. As u may have guessed, I am a newbie.

PICS

Is there any faster / more efficient way to type this piece of code? Someone told me all else if’s should be arrays or something

let a = 0,
    b = 0,
    c = 0,
    d = 0,
    e = 0,
    f = 0,
    g = 0,
    h = 0,
    i = 0;

(function() {
    if (a == 1 && b == 1 && c == 1) {
        console.log("hello")
    } else if (a == 1 && d == 1 && g == 1) {
        console.log("hello");
    } else if (a == 1 && e == 1 && i == 1) {
        console.log("hello");
    } else if (b == 1 && e == 1 && h == 1) {
        console.log("hello");
    } else if (c == 1 && e == 1 && g == 1) {
        console.log("hello");
    } else if (c == 1 && f == 1 && i == 1) {
        console.log("hello");
    } else if (d == 1 && e == 1 && f == 1) {
        console.log("hello");
    } else if (g == 1 && h == 1 && i == 1) {
        console.log("hello");
    } else console.log("Hi");
})();

These diagrams should get data from “MYSQL-DB” and update it’s data in live accordingly, without refreshing the page.
I do not have much experience in this field, this is one of my first personal front-end projects and I would much appreciate some assistance with the subject.

link for illustrate images
https://imgur.com/a/Wob7Ype

the demo below is not displayed well, which is why I included an “SCSS” file that should be inserted in the project as an additive.

---

@keyframes bake-pie {
  from {
transform: rotate(0deg) translate3d(0,0,0);
  }
}

body {
  font-family: "Open Sans", Arial;
  background: #EEE;
}
main {
  width: 400px;
  margin: 30px auto;
}
section {
  margin-top: 30px;
}
.pieID {
  display: inline-block;
  vertical-align: top;
}
.pie {
  height: 200px;
  width: 200px;
  position: relative;
  margin: 0 30px 30px 0;
}
.pie::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  background: #EEE;
  border-radius: 50%;
  top: 50px;
  left: 50px;
}
.pie::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  box-shadow: 0 0 3px 4px rgba(0,0,0,0.1);
  margin: 220px auto;
  
}
.slice {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px, 200px, 200px, 100px);
  animation: bake-pie 1s;
}
.slice span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
}
.legend {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  padding: 15px;
  font-size: 13px;
  box-shadow: 1px 1px 0 #DDD,
          2px 2px 0 #BBB;
}
.legend li {
  width: 110px;
  height: 1.25em;
  margin-bottom: 0.7em;
  padding-left: 0.5em;
  border-left: 1.25em solid black;
}
.legend em {
  font-style: normal;
}
.legend span {
  float: right;
}
footer {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 13px;
  background: #DDD;
  padding: 5px 10px;
  margin: 5px;
}


function sliceSize(dataNum, dataTotal) {
    return (dataNum / dataTotal) * 360;
  }
  function addSlice(sliceSize, pieElement, offset, sliceID, color) {
    $(pieElement).append("<div class='slice "+sliceID+"'><span></span></div>");
    var offset = offset - 1;
    var sizeRotation = -179 + sliceSize;


    $("."+sliceID).css({
      "transform": "rotate("+offset+"deg) translate3d(0,0,0)"
    });
    $("."+sliceID+" span").css({
      "transform"       : "rotate("+sizeRotation+"deg) translate3d(0,0,0)",
      "background-color": color
    });
  }
  
  function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) {
    var sliceID = "s"+dataCount+"-"+sliceCount;
    var maxSize = 179;
    if(sliceSize<=maxSize) {
      addSlice(sliceSize, pieElement, offset, sliceID, color);
    } else {
      addSlice(maxSize, pieElement, offset, sliceID, color);
      iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
    }
  }
  function createPie(dataElement, pieElement) {
    var listData = [];
    $(dataElement+" span").each(function() {
      listData.push(Number($(this).html()));
    });
    var listTotal = 0;
    for(var i=0; i<listData.length; i++) {
      listTotal += listData[i];
    }
    var offset = 0;
    var color = [ 
      "#4c1180", 
      "#17b2bd", 
      "#006666",
    ];
    for(var i=0; i<listData.length; i++) {
      var size = sliceSize(listData[i], listTotal);
      iterateSlices(size, pieElement, offset, i, 0, color[i]);
      $(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color[i]);
      offset += size;
    }
  }
  createPie(".pieID.legend", ".pieID.pie");





@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@-webkit-keyframes bake-pie {
  from {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
            transform: rotate(0deg) translate3d(0, 0, 0);
  }
}
@keyframes bake-pie {
  from {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
            transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

.pieID {
  display: inline-block;
  vertical-align: top;
}

.pie {
  height: 200px;
  width: 200px;
  position: relative;
  border: 0.2rem solid #fff;
  box-shadow: 0 0 .2rem #fff,
            0 0 .2rem #fff,
            0 0 2rem #0D43E3,
            0 0 0.8rem #0D43E3,
            0 0 2.8rem #0D43E3,
            inset 0 0 1.3rem #0D43E3; 
            border-radius: 50%; 
}

.pie::before {
  content: "";
  display: block;
  position: absolute; 
  z-index: 1;
  width: 100px;
  height: 100px;
  background: rgb(41, 41, 41);
  border-radius: 50%;
  top: 50px;
  left: 50px;
}

.pie::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 220px auto;
}    
.slice {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px, 200px, 200px, 100px);
  -webkit-animation: bake-pie 1s;
          animation: bake-pie 1s;
}

.slice span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 200px; 
  height: 200px;
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
}

.legend {
  /*position: relative; right: 50%;*/ 
  margin-top: 2.5%;
  margin-left: 2.5%;
  list-style-type: none;
  margin-right: 0%;
  background: rgb(14, 2, 68);
  color: rgb(255, 255, 255);
  padding: 15px;
  padding-bottom: 4px;
  font-size: 16px;
  border: 0.2rem solid #fff;
  box-shadow: 0 0 .2rem #fff,
 **strong text**               0 0 .2rem #fff,
            0 0 2rem #0D43E3,
            0 0 0.8rem #0D43E3,
            0 0 2.8rem #0D43E3,
            inset 0 0 1.3rem #0D43E3; 
}

.legend li {
  width: 110px;
  height: 1.25em;
  margin-bottom: 0.7em;
  padding-left: 0.5em;
  border-left: 1.25em solid black;
}

.legend em {
  font-style: normal;
}

.legend span {
  float: left;
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 13px;
  background: #DDD;
  padding: 5px 10px;
  margin: 5px;
}
/*# sourceMappingURL=donutTotal.css.map */

<ul class="pieID legend">
              <li>
                <em>south</em>
                <span>192</span>
              </li>
              <li>
                <em>north</em> 
                <span>192</span>
              </li>
              <li>
                <em>center</em>
                <span>192</span>
              </li>
            </ul> 
            <div class="pieID pie">
             </div>

Hello everyone I have a array of objects now those objects hold have multiple keys and those keys are dynamic so I have no idea how can I loop through data and show them in the table I am not sure how can I access those when I loop through. I was able to get the object keys into a separate array but don’t how to utilize them. Here is the array of data and the array of keys can anyone guide or help me

This is the data array

var data = {
"data": [
        {
            "nationality": "Indonesia",
            "gender": "Male",
            "country": "Indonesia",
            "preferred_role": "Customer Service",
            "work_experience": "More than 1 year and less than 2 years",
            "preferred_work_environment": "Open to both",
            "count": 381
        },
              ]
    }

This is the keys array

["nationality", "gender","country","preferred_role","work_experience","count","preferred_work_environment"]

world… again.

I’m stumped by something that should be straightforward, but right now I cant see it. I’m trying to map over a simple array and display values. Each card should have a button that opens a bs modal which should show more information on the particular array object. but instead it returns infomation only on the first object in the array.

I think there’s a concept here that I’m not getting and it’s a shade embarassing. Thaank’s in advance for your help.

import "./styles.css";

export default function App() {
  const modalInfo = [
    { name: "james", number: "1" },
    { name: "Jackie", number: "2" },
    { name: "Ariane", number: "3" },
    { name: "Mike", number: "4" }
  ];
  return (
    <>
      <div className="App">
        {modalInfo.map((info) => (
          <div className="card">
            <h1>{info.name}</h1>
            <button
              type="button"
              class="btn btn-primary"
              data-bs-toggle="modal"
              data-bs-target="#staticBackdrop"
            >
              Show more
            </button>

            <div
              class="modal fade"
              id="staticBackdrop"
              data-bs-backdrop="static"
              data-bs-keyboard="false"
              tabindex="-1"
              aria-labelledby="staticBackdropLabel"
              aria-hidden="true"
            >
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">
                      #{info.number}
                    </h5>
                    <button
                      type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                    ></button>
                  </div>
                  <div class="modal-body">{info.name}</div>
                  <div class="modal-footer">
                    <button
                      type="button"
                      class="btn btn-secondary"
                      data-bs-dismiss="modal"
                    >
                      Close
                    </button>
                    <button type="button" class="btn btn-primary">
                      Understood
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

Hi I am trying to declare a generic interface with multiple elements and try to assign in object keys values from other JSON objects but need to assign particular key from the interface , here is the detail code

interface DbInterface {
  userName: string;
  password: string;
port: string;
}

auth = {
"userName" :"admin",
"password" : "password"
"previousPassword" : "admin"
}

let dbConfig: DbInterface = {}
for (const key in auth) {

lodash.set(dbConfig, key, value)
}

It’s Returning

dbConfig: {
  "userName": "admin";
  "password": "password";
"previousPassword":"admin";
}

instead of

dbConfig: {
  "userName": "admin",
  "password": "password"
}

What is my issue?

I have an object containing arrays of data. Here is list of arrays in in data object.

EMC: (4) ['EMC Symmetric VMAX', 'EMC Symmetric VMAX', 'EMC Symmetric VMAX', 'EMC Symmetric VMAX']
MICROSOFT: (8) ['OFFICE 365', 'Windows', 'OFFICE 365', 'Windows', 'OFFICE 365', 'Windows', 'OFFICE 365', 'Windows']
Open Source: (4) ['OpenSSL', 'OpenSSL', 'OpenSSL', 'OpenSSL']
Oracle: (12) ['IAM', 'MySQL Server', 'MySQL Server', 'IAM', 'MySQL Server', 'MySQL Server', 'IAM', 'MySQL Server', 'MySQL Server', 'IAM', 'MySQL Server', 'MySQL Server']
RED HAT: (4) ['RHEL', 'RHEL', 'RHEL', 'RHEL']

I managed to display a single array data by mentioning array name as follows

  const DisplayData = data.MICROSOFT.map((vendor) => {
    return (
      <tr>
        <td>{vendor}</td> 
      </tr>
    );
  });
  //displays: 'OFFICE 365', 'Windows', 'OFFICE 365', 'Windows', 'OFFICE 365', 'Windows', 'OFFICE 365', 'Windows'

How can I display all array data’s from this object?

Thanks

I want to highlight text of pdf in react native. I had already searched for resource on web but can’t find any all the resource are for react native

I’m working on an web application with ReactJS and Nodejs and I use Nodemailer to send email. All work fine but, my current issue is that I’m looking for a way to categorize the sent email so that recipients receive it in for example updates or Promotions category like on this screenshot.