Category: javascript

I am able to reply, tweet using the documentation but unable to achieve results as shown in this image.

I have some trouble implementing multiple color themes into my website. I have made a button connected to a state toggle, and every time the state switches, a useEffect handler sets the value of my context.provider to dark/light theme. When I log the useEffect handler it changes the theme, however the child components are not affected by it.

This is my App.tsx:

import {
  useContext,
  useState,
  Provider,
  createContext,
  useEffect,
} from "react";
import logo from "./logo.svg";
import "./App.scss";
import Nav from "./components/ui/nav/Nav";
import Welcome from "./components/ui/welcome/Welcome";
import Section from "./components/ux/section/Section";
import Prices from "./components/ui/prices/Prices";
import { themes, ThemeContext } from "./components/theme/theme";
import Background from "./components/ui/background/Background";

function App() {
  const theme = useContext(ThemeContext);
  const [darkmode, setdarkmode] = useState(true);
  const themeMode = themes.light;
  useEffect(() => {
    const themeMode = darkmode ? themes.light : themes.dark;
    console.log(themeMode);
  }, [darkmode]);

  document.body.style.background = theme.primary;
  document.body.style.color = theme.text;
  return (
    <ThemeContext.Provider value={themeMode}>
      <button
        onClick={() => {
          setdarkmode(!darkmode);
        }}
      >
        hello
      </button>
      <Background />

      <Section content={<Welcome />} />
      <Section content={<Prices />} />
    </ThemeContext.Provider>
  );
}

export default App;

And this is one of my components that should use the updated theme:

import React, { useContext, useState } from "react";
import "./button.scss";
import { themes, ThemeContext } from "../../theme/theme";
export default function Button(props: {
  invert: boolean;
  link: string | URL;
  content: string;
}) {
  var style = {};

  const theme = useContext(ThemeContext);
  const buttonStyle = {
    color: theme.primary,
    background: theme.cta,
    border: "solid 2px " + theme.cta,
  };
  const invertStyle = {
    color: theme.cta,
    background: theme.primary,
    border: "solid 2px " + theme.cta,
  };

  props.invert ? (style = invertStyle) : (style = buttonStyle);
  const [colorStyle, setColorStyle] = useState(false);
  colorStyle
    ? props.invert
      ? (style = buttonStyle)
      : (style = invertStyle)
    : props.invert
    ? (style = invertStyle)
    : (style = buttonStyle);
  return (
    <button
      onClick={() => {
        window.location.assign(props.link);
      }}
      onMouseEnter={() => {
        setColorStyle(!colorStyle);
      }}
      onMouseLeave={() => {
        setColorStyle(!colorStyle);
      }}
      className="ux-btn"
      style={style}
    >
      {props.content}
    </button>
  );
}

I am using Tab Navigation which contains two screen, I need to make the background of each screen transparent so the app background is visible.

This is how it looks right now, I want the background you can see on Tabs navigator be visible on the entire screen.

Using this SFC in Vue 3 I have been unable to get the scroll panel to stay scrolled to the bottom as the array of events expands. I’m wondering if i may just have to replace this with my own custom component because it seems like you can easily to this with a div? But i would like to stick to PrimeVue components if possible?

<template>
  <Card style="width: 20em; height: 570px" class="card p-tabview-panels">
    <template #subtitle> Event Log </template>
    <template #content>
      <ScrollPanel ref="scrollPanel" style="width: 100%; height: 500px">
        <div v-for="(e, i) in events" :key="i" class="event" :class="e.type">
          {{ e.message }}
        </div>
      </ScrollPanel>
    </template>
  </Card>
</template>

<script setup>
import ScrollPanel from "primevue/scrollpanel";
import Card from "primevue/card";
import { defineProps, onUpdated, ref } from "vue";

defineProps({ events: Array });

const scrollPanel = ref(null);

onUpdated(() => {
  console.log(scrollPanel.value);
  // these seem to be undefined
  scrollPanel.value.scrollTop = scrollPanel.value.scrollHeight;
});
</script>

I am trying to move two <i> tags inside of an input tag as a part of a success and error message, but I can’t figure out how to target the <i> tag inside of my div elements. I am using bootstrap classes :

<div class="mb-3 input-control">
  <label for="full-name">Full nameUser name</label><br>
  <p>*You can only have on user name per e-mail account</p>
  <input type="text" class="form-control" id="full-name" name="full-name" placeholder="Full name">
  <i class="fas fa-check-circle"></i>
  <i class="fas fa-exclamation-circle"></i>
  <small class="error-name">error</small>
  <br>
</div>

CSS

.fa-check-circle{
  position: absolute;
  top: 10px;
  right: 10px;
}

This is my first post so I hope im doing this correctly.

I am taking a coding class and we were asked to make a piece of code that will ask for the input of a phrase, and will return in the console that phrase with the capital letters moved to the front, but still in the same order. Then print to the console this reordered phrase. (We aren’t allowed to use arrays)
For example:
Inputting "HeLLoTherE" would return "HLLTEeoher"

However the problem is im having issues understanding how to write this code. How can I make the code select these capital letters and move them to the front? using .toUpperCase()? How can i make that select the letter and move it in front of the rest?
If someone could show me an example of how this is done and explain it a little i would greatly appreciate it 🙂

A question seems fairly simple, but I don’t work with OOP at all.
I have a parent class. I want it to have service injected into constructor and to pass every argument needed in parent class. I just want to have an abstract class from which I can create more complex classes.

Let’s say parent class looks like this:

export class FormComponent {
  constructor(childArgs: someType, private readonly SthService){
    this.sth = childArgs.sth;
    // etc
  }
}

where childArgs are arguments that I want to pass down to child component and private readonly SthService is an injectable service I want to use in the component

The child class looks like that

@Component({
  selector: '...',
  templateUrl: './....html',
  styleUrls: ['./....scss']
})
export class ChildComponent extends FormComponent {
constructor(){
  super({
    firstProp: X,
    secondProp: Y,
    thirdProp: Z,
  });
}

What am I doing wrong? Can I just pass the arguments and have service injected altogether?
Because right now it says that there SthService is undefined.

I’m trying to flip de card with animation but it only flips instantaneously, can not see the transition.

My HTML:

<div class="tp-wrapper">
    <div class="tp-box" (click)="toggleFlip()" [@flipAnimation]="flipState">
        <div class="tp-box__side tp-box__front">
      <img class = "foto" src='src'>
        </div>
        <div class="tp-box__side tp-box__back">name
        </div>
    </div>
</div>

TypeScript:

import { Partida, Prueba } from './../../../utils/models/PartidaModel';
import { Component, Input, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { constants } from 'src/app/utils/constants';


@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css'],
  animations: [
    trigger('flipAnimation', [
      state('active', style({
        transform: 'rotateY(179deg)'
      })),
      state('inactive', style({
        transform: 'rotateY(0)'
      })),
      transition('active => inactive',[ animate('1000ms ease-out')]),
      transition('inactive => active',[ animate('1000ms ease-in')])
    ])
  ]
})
export class CardComponent implements OnInit {

  @Input() prueba : Prueba;
  @Input() partida : Partida;
  flipState: string = 'inactive' ;


  constructor() { }

  ngOnInit() {
    console.log(this.prueba);
  }


  toggleFlip() {
    this.flipState = (this.flipState == 'inactive') ? 'active' : 'inactive';
  }

When clicking on the card I am able to see the back face of the card, but I want to see how it turns over using the Angular Transition

We are building a Decentralized Storage Renting System using IPFS and we want to get the peers who are storing the chunks after adding a file in the network?

Is there any method that can provide us with any information or addresses of the storing nodes?

I am following this tutorial : https://www.codewall.co.uk/how-to-build-a-twitter-hashtag-viewing-tool-tutorial/
When i get to step Adjusting the index file to print hashtag variable passed in from the post handler i get a reference error.
I cannot see where is the problem as I am doing it step by step and the code is identical to the one provided in the tutorial.

Here is my server.js code :

const express = require('express')
const app = express()
const twit = require("twit")
app.set('view engine', 'ejs')
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: true }));

// Start serv & listen on port 3000.
app.listen(3000, function () {
    console.log('Node listening on port 3000')
})

//Listen for get request on root url. eg. http://localhost:3000
//Listen for get request on root url. eg. http://localhost:3000
app.get('/', function (req, res) {
    res.render('index', { welcomeMessage: "Welcome to my app." })
})


let Twitter = new twit({
    consumer_key: 'J936EwCiJBVWxsD77Jhhq6I3b',
    consumer_secret: 'v98qd4Cngwd0Q6809DA7bNCES5NikS7LTwXn6pYi5urQ5nJVd2',
    access_token: '2535925989-j4b5twUUcCg068t3ku1nli08ferTs4MFIDr9BGS',
    access_token_secret: 'TARyg3tBvydQHmJAUhsP0mqJizkNGSoVmiiCWOQzpPTi6',
    timeout_ms: 60 * 1000, // optional HTTP request timeout to apply to all requests.
    strictSSL: true, // optional - requires SSL certificates to be valid.
});


Twitter.get('search/tweets', {
    q: '#100DaysOfCode',
    count: 100,
    result_type: "mixed"
}).catch(function (err) {
    console.log('caught error', err.stack)
}).then(function (result) {
    console.log('data', result.data);
});
app.post('/', function (req, res) {
    console.log(req.body.hashtag);
    if (req.body.hashtag !== undefined) {
      res.render('index',  {hashtag: req.body.hashtag})
    }
    res.render('index',  {hashtag: null})
    
  });

Here is my index.ejs code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Twitter Hashtag Viewer</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
        type="text/css">
    <link href="/css/style.css" rel="stylesheet" type="text/css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        type="text/css">
</head>
<body>

    <div class="container">
        <div class="form mb-2 mt-2"> 
        <fieldset>
            <form action="/" method="post">
                <div class="input-group">
                <input class="form-control" name="hashtag" placeholder="eg. #100DaysOfCode" required type="text">
                <input type="submit" value="Analyze!">
                </div>
            </form>
        </fieldset>
    </div>   
    </div>
    <% if(hashtag !== null){ %>
        <h3>All popular tweets for <%- hashtag %></h3>
    
        <% } %>
    

  </body>
</html>

Here is the error that I am getting:
error

I have been trying to use Leaflet realtime to draw a polyline between a starting latitude and longitude and the current latitude and longitude of each feature from the GeoJSON.

The expected behavior is that I should be able to change the current latitude and longitude for each for entries in the database and it would update the polylines going from the start latitude and longitude to the current position.

I want to draw a line between the StartLatitude and StartLongitude to the latitude and longitude entries for each of the rows (latitude and longitude entries is the Current Position)

I am adding GeoJson to the leaflet map and auto-updating it using leaflet realtime

var map = L.map('map', undefined, options),
realtime = L.realtime(function(success, error) {
    fetch('http://localhost/Vand/GetFromDB.php?bruger=1')
    .then(function(response) {
     return response.json(); 
 })
    .then(function(data) {



        success({
            type: 'FeatureCollection',
            features: [data]
        });
    })

    .catch(error);
}, {
    interval: 5050,
    pointToLayer: function(feature,latlng){
  return L.marker(latlng);
},
    getFeatureId: function(feature) 
    { 
        //console.log(feature.properties.Maskine_ID);
        return feature.properties.Maskine_ID; 
    },
    onEachFeature: onEachFeature,
}).addTo(map);

Example response of GetFromDB.php

This is what I am using to initially draw the polylines of the two features

And this is how I am trying to update them

function RedrawPolyLine(feature) {
polylines.forEach(function (item) {
map.removeLayer(item);
polylines = [];
var pointsForJson = [];
pointsForJson.push([feature.properties.StartLongitude, feature.properties.StartLatitude]);
pointsForJson.push(feature.geometry.coordinates);
console.log(lngLatArrayToLatLng(pointsForJson));
var polyline = L.polyline(lngLatArrayToLatLng(pointsForJson)).addTo(map);
polylines.push(polyline);  
});
}


realtime.on('update', function(e) {
//console.log(realtime.getBounds());
Object.keys(e.update).forEach(function(id) {
    var feature = e.update[id];
    this.getLayer(id).bindPopup('<h4>Maskine ID:' +feature.properties.Maskine_ID+'</h4> 
<p>Status: '+feature.properties.Status+'</p>');
    RedrawPolyLine(feature);
  }.bind(this));
});

The actual result when changing the current position (latitude and longitude in DB for Maskine_ID
1)

how to convert image stream to base64 in nodejs/nestjs, please help me

I have a string like this:

“First player vs. Second player     Percentage%”

First player and Second player can be multiple words and before the Percentage% I’m using three “&emsp”.
How can I split this string to have an array containing First player and Second player (Percentage is not neccessary)?

I have a file like this (a1.js):

function foo(z,y){
     //....
}

// --> I want to inset in this section

function bar(z,y){
     //....
}

I want to write a new function in above section without overwrite on next function then my file converted to this (a1.js modified):

function foo(z,y){
     //....
}

function new(z,y){
     //....
}

function bar(z,y){
     //....
}

What should I do?

i am trying to install npm libraries on windows to work with javascript but it showing this error in cmd…

C:Userstusha>npm install

npm ERR! code ENOENT

npm ERR! syscall open

npm ERR! path C:Userstusha/package.json

npm ERR! errno -4058

npm ERR! enoent ENOENT: no such file or directory, open ‘C:Userstushapackage.json’

npm ERR! enoent This is related to npm not being able to find a file.

npm ERR! enoent

npm ERR! A complete log of this run can be found in:

npm ERR! C:UserstushaAppDataLocalnpm-cache_logs2022-04-24T10_37_38_185Z-debug-0.log

C:Userstusha>

also photothe cmd

Also the log for this process
the log file for this