How to completely remove repeated numbers from an array.
For example if:
array = [1,1,2,3,1,2,5]
The output would be:
[3,5]
Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
How to completely remove repeated numbers from an array.
For example if:
array = [1,1,2,3,1,2,5]
The output would be:
[3,5]
I’m a novice to Javscript DOM
and try making a Rock Paper Scissors Game
. In that game, I want to customize the onclick
event that I’m the person who can decide and click on both options among paper, scissors, or rock
.
In game.html
I have 3 options as 3 button events for each paper, rock, and scissors
<div class="decisions">
<input
class="options"
type="image"
disabled="true"
src="./assets/rock.svg"
value="Rock"
/>
<input
class="options"
disabled="true"
type="image"
src="./assets/paper.svg"
value="Paper"
/>
<input
class="options"
type="image"
disabled="true"
src="./assets/scissors.svg"
value="Scissors"
/>
</div>
main.js
const options = document.querySelectorAll(".options")
const startGame = () => {
// list of options
const _options = ["Rock", "Paper", "Scissors"]
options.forEach(option => {
option.addEventListener("click", function () {
// this is my turn
let hInput = this.value
// this is random turn for computer, but I want to to make this turn
// by myself
let cInput = _options[Math.floor(Math.random() * 3)]
if (hInput && cInput) {
updateScore(hInput, cInput)
compareInputs(hInput, cInput)
}
})
})
}
How do I separate the addEventListender
to make 2 different turns by myself?
I’m currenttly building an NFT marketplace, I am done with all the major functionalities, i.e listing, selling, buying etc. but the problem is, when wiriting the code earlier I used a fixed listing fee of 0.1 ether and now I would like to integrate a 2.5% fee on every sale
Here’s my solidity code
function createMarketSale(address nftContract, uint256 itemId, uint256 commission)
public
payable
nonReentrant
{
uint256 price = idToMarketItem[itemId].price;
uint256 tokenId = idToMarketItem[itemId].tokenId;
require(
msg.value == price,
"Please submit the asking price in order to complete the purchase"
);
idToMarketItem[itemId].seller.transfer(msg.value);
IERC721(nftContract).transferFrom(address(this), msg.sender, tokenId);
idToMarketItem[itemId].owner = payable(msg.sender);
idToMarketItem[itemId].sold = true;
_itemsSold.increment();
payable(owner).transfer(commission);
}
Here’s How my web3 frontend interacts with the contract
async function buyNFT() {
const web3Modal = new Web3Modal();
const connection = await web3Modal.connect();
const provider = new ethers.providers.Web3Provider(connection);
const signer = provider.getSigner();
const contract = new ethers.Contract(nftmarketaddress, Market.abi, signer);
const price = ethers.utils.parseUnits(nft.price.toString(), "ether");
const fee = +((2.5 / 100) * nft.price);
let commission = fee.toString();
let transaction = await contract.createMarketSale(nftaddress, nft.itemId, commission, {
value: price,
});
await transaction.wait();
window.location.replace("/profile");
}
but I keep getting an Error: Transaction reverted: function call failed to execute when it gets to this line :
payable(owner).transfer(commission);
I have no idea what I’m doing wrong, please help
I need to optimize this code:
<div class="temporadas">
<?php $i = 0;
foreach ($temporadas as $temporada) {
$i++; ?>
<div data-id="<?= $temporada['temporada']; ?>" class="temporadaBox" onclick="temporadaTab(<?= $temporada['temporada']; ?>)">
<span class="temporada">
Temporada <?= $temporada['temporada']; ?>
<?= (!empty($temporada['nome']) ? '- '.$temporada['nome'].'' : ''); ?>
</span><img id="arrow<?= $temporada['temporada']; ?>" <?= (($i == 1) ? 'class="arrowDown"' : 'class="arrowLeft"'); ?>>
</div>
<div class="temporadaContainer" id="temporadaContainer<?= $temporada['temporada']; ?>" <?= (($i == 1) ? '' : 'style="display:none;"'); ?>>
<?php foreach ($episodios as $episodio) {
if ($episodio['temporada'] == $temporada['temporada']) { ?>
<div class="item" data-id="<?= $episodio['episodio']; ?>">
<a href="<?= $config['site_url']; ?>/<?= (($temporada['hidden_temporada'] == 1) ? $temporada['url_anime'] : $temporada['url_temporada']); ?>/episodio-<?= encodeInt($episodio['episodio']); ?>/">
<img src="<?= $config['site_url']; ?>/images/background_episodios/<?= $episodio['url_anime']; ?>/small/t=<?= $episodio['temporada']; ?>&ep=<?= $episodio['episodio']; ?>.jpg"/>
<div class="blank"></div>
<div class="titulo">
<span class="description"><u>Episódio <?= $episodio['episodio']; ?></u><?= ((!empty($episodio['titulo'])) ? " - ".$episodio['titulo']."" : ""); ?></span>
<span class="date"><?= ucfirst(strftime('%b. %d, %Y', $episodio['data'])); ?></span>
</div>
</a>
<div class="clearfix"></div>
</div>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
</div>
Explaining the code, $temporadas have about 20 rows, and $episodios have about 1000 rows..
I need to put each episodio with temporadaID inside current temporada container..
The problem as you can see, is that if we have 20 rows of $temporada and 1000 rows of $episodio, we will loop 20,000 times.
I though in leave $episodio foreach outside $temporada, and organize the episodios with Javascript after complete the loop, however i have no idea how to do it..
Someone could help me? I appreciate, thank you!!
I am trying to create a page on html that automatically creates a pie chart with data provided from the user input form. I am trying to pass the values tax, mort,f,transport,and saving from collect() to drawChart() so that it could use those values to create the pie chart, but it doesn’t seem to work. Does anyone know why?
function collect() {
var tax = +document.getElementById("taxes").value;
document.getElementById('tax').innerHTML = tax;
var mort = +document.getElementById("mortage").value;
document.getElementById('mort').innerHTML = mort;
var f = +document.getElementById("food").value;
document.getElementById('f').innerHTML = f;
var transport = +document.getElementById("transportation").value;
document.getElementById('transport').innerHTML = transport;
var saving = +document.getElementById("savings").value;
document.getElementById('saving').innerHTML = saving;
drawChart(tax,mort,f,transport,saving);
}
function drawChart(val1,val2,val3,val4,val5) {
var data = google.visualization.arrayToDataTable([
['Expense/Income', '$ per Month'],
['Taxes',val1],
['Mortage', val2],
['Food', val3],
['Transportation', val4],
['Savings',val5]
]);
var options = {'title':'Monthly Budget', 'width':550, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<div class="editTable">
<div class="left">Taxes: </div><div class="right"><input type="number" name="taxes" id="taxes"></div><br><br>
<div class="left">Mortages: </div><div class="right"><input type="number" name="mortage" id="mortage"></div><br><br>
<div class="left">Food: </div><div class="right"><input type="number" name="food" id="food"></div><br><br>
<div class="left">Transportation: </div><div class="right"><input type="number" name="transportation" id="transportation"></div><br><br>
<button onclick="collect();" class="editRowBtn">Update</button><br><br>
</div>
const Discord = require("discord.js");
const client = new Discord.Client({ ws: { intents: new Discord.Intents(Discord.Intents.ALL) } });
‘this is a code that requires all intents is it wrong’
client.once('ready', () => {
console.log('Coleria is online!');
});
const prefix = '*'
‘can i go with this prefix’
client.on(“message”, message =>{
if(!message.content.startsWith(prefix) || message.author.bot) return;
const args = message.content.slice(prefix.length).split(" ");
const command = args.shift().toLowerCase();
if(command === 'sa'){
messageCreate.channel.send('As kardeşim hoşgeldin.');
}
});
client.login("my token");
‘cant give my token xd’
I have this collection structure:
[
"_id": "61a013b59f9dd0ebfd23ftgb",
"modules": [
{
"_id": "61a013b59f9dd0ebfd964dgh",
"videos": [
{
"_id": "213412",
"progress": 100
},
{
"_id": "61a013b59f9dd0ebfd965f4a",
"progress": 0
},
]
},
{
"_id": "43556hujferwdhgsdft",
"videos": [
{
"_id": "fdsg3sg98er989890",
"progress": 66
},
{
"_id": "fdsg3sg98er989890",
"progress": 100
},
{
"_id": "fdsg3sg98er989890",
"progress": 100
}
]
}
]
]
I am trying to return the overall progress for each “module” by adding up all the videos that have progress of 100 and creating a percentage based on number of videos in the module. For example, the first module should return “module_progess” of 50 within it as this has 1/2 videos completed.
{
"_id": "61a013b59f9dd0ebfd964dgh",
"module_progress": 50,
"videos": [
{
"_id": "213412",
"progress": 100
},
{
"_id": "61a013b59f9dd0ebfd965f4a",
"progress": 0
},
]
},
How do i access each videos object to make this calculation and add the new field to the response?
I am trying to add multiple views to one view, but it conflicts with scripts and repeating IDs, these are previsualization views before convert to PDF file, these are generating charts.
What i do to add the multiple views is:
$view .= view('system.administrator.history.pdf.layout-multiple', compact('sample', 'samples', 'tests'))->render(); // These is into a foreach loop
return $view; // This is what i received at the AJAX function and is sended to a form element hidden to send data to a new view
Function to add multiple views at one is working, my problem is with scripts, and IDs.
Any solution?
In my project I’ m using react-router and Suspence for rendering multiple lazy pages.
The only thing that doesn’ t seem working is the fallback prop of the Suspence component, that is, the LoadingSpinner component doesn’ t load when you go from one page to another.
The App.js code:
import React, { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import { AppContainer, RedirectComponent } from './app.styles';
import SearchField from '../components/search-field/search-field.component';
import ErrorBoundary from '../components/error-boundary/error-boundary.component';
import LoadingSpinner from '../components/loading-spinner/loading-spinner.component';
import RefreshRoute from '../components/refresh-route/refresh-route.component';
const PageNotFound = lazy(() => import('../pages/page-not-found/page-not-found.component'));
const MainPage = lazy(() => import('../pages/main-page/main-page.component'));
const CurrentForecast = lazy(() => import('../components/current-forecast/current-forecast.component'));
const App = () => (
<AppContainer>
<RedirectComponent to='/'>GO TO HOME PAGE</RedirectComponent>
<SearchField />
<ErrorBoundary>
<RefreshRoute>
<Suspense fallback={<LoadingSpinner />}>
<Routes>
<Route exact path='/' element={<MainPage />} />
<Route exact path='/details/:detailsID' element={<CurrentForecast isMainPage={false} />} />
<Route exact path='*' element={<PageNotFound />} />
</Routes>
</Suspense>
</RefreshRoute>
</ErrorBoundary>
</AppContainer>
);
export default App;
I´m generating dinamic user´s config tables with PHP, and there is a function to match the password for each user, individualy.
When I have one table only, I can use getElementById and the functions works fine. With multiple tables, using querySelectorAll(“.class”) something happens and I don´t know what is going on.
So I made a test.php script and made a test function to see the javascript console output.
I have 3 tables, and the for last one user´s input it appears for all the tables, but it should work for each one table individually, as the user inputs stuff for each one. Here goes the code:
(HTML)
<div class='config_user' >
<table>
<tr><td>Senha: <td><input type='text' class='senha1' oninput='testE()'>
<tr><td>Confirmar Senha: <td><input type='text' id='senha1'>
</table>
<table>
<tr><td>Senha: <td><input type='text' class='senha1' oninput='testE()'>
<tr><td>Confirmar Senha: <td><input type='text' id='senha2'>
</table>
<table>
<tr><td>Senha: <td><input type='text' class='senha1' oninput='testE()'>
<tr><td>Confirmar Senha: <td><input type='text' id='senha3'>
</table>
</div>
(JS)
function retornaV(x){
document.getElementById("senha1").value = x;
document.getElementById("senha2").value = x;
document.getElementById("senha3").value = x;
}
function testE(){
var teste = window.document.querySelectorAll(".senha1");
teste.forEach(function(item, index){
retornaV(item.value);
console.log(index + " <- index , valor -> " + item.value);
})
}
The console.log returns all the inputs just fine, but retornarV() just give me the value of the last table for all tables.
If someone can help, I appreciate.
Roberto Carreira
I have one component that have one input, the input value indicates the unit of measurement, the measurements can be kilogram, gram, units, etc …
I have registered in the database
Kg = 0.1
g = 100
unit = 1
The type of input value, is selected from a select
so in my code I have:
<template>
<tr>
<td class="product-quantity">
<input
class="quantity no-round-input"
type="numeric"
v-model="item.quantity"
min="0"
@keypress="isNumber($event)"
/>
</td>
<td class="product-price">
<select
name="unit"
class="form-control"
v-model="item.attributes.unit"
>
<option v-bind:key="unit.id" v-for="unit in units" :value="unit.abr">
{{ unit.unit }}
</option>
</select>
</td>
</tr>
</template>
the value I get from props, so in my vue I have:
<script>
export default {
props: ["item"],
watch: {
'item.quantity' (){
if( (this.item.quantity - Math.floor(this.item.quantity)) !== 0 ){
this.item.quantity = this.item.quantity.toFixed(1);
}else{
this.item.quantity = this.item.quantity;
}
}
},
methods: {
isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();;
} else {
return true;
}
},
}
}
</script>
so, I just want that when v-model is Kg, the value input is in decimals, only decimals to Kg, so I implemented in propiety watch to observe input(item.quantity) but it’s not working, do you can help me please?
im trying to create a simple force graph with react+ts and d3.
after long research everything i found online isn’t updated lately.
so i would like to use your help with that.
Main issue
i have now is to connect my nodes with a line
heres my code:
import React from "react";
import { forceSimulation, forceManyBody, forceLink, forceCenter } from 'd3-force'
import d3 ,{ SimulationNodeDatum } from "d3";
import { Box } from "@mui/system";
type Node = {
id: string;
class: string;
x?: string;
y?: string;
}
type Link = {
source: string;
target: string;
connectionType: string;
}
the data (in the same file)
const { links, nodes } = {
nodes: [{
id: "honda",
class: "cars",
}, {
id: "civic",
class: "cars",
},{
id: "toyota",
class: "cars",
},{
id: "corola",
class: "cars",
}],
links: [{
source: 'civic',
target: 'honda',
connectionType: 'm2o'
},{
source: 'corola',
target: 'toyota',
connectionType: 'm2o'
}]
}
and heres the component
function Rd4Component (): JSX.Element {
const simulation = forceSimulation(nodes as SimulationNodeDatum[]);
simulation
.force('charge', forceManyBody().strength(-100))
.force('link',
forceLink(links)
.id((d) => (d as Node).id)
.distance(75)
)
.force("center", forceCenter(300, 300));
const svg = d3.select('#Target');
const node = svg
.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r", 15)
.attr("stroke", "green")
.attr("stroke-width", 0.5)
.style("fill", "red");
const link = svg
.selectAll('path.link')
.data(links)
.enter()
.append("path")
.attr("stroke", "black")
.style("fill", "none");
function ticked() {
link
.attr("x1", function (d: any) {
return d.source.x;
})
.attr("y1", function (d: any) {
return d.source.y;
})
.attr("x2", function (d: any) {
return d.target.x;
})
.attr("y2", function (d: any) {
return d.target.y;
});
node
.attr("cx", function (d: any) {
return d.x;
})
.attr("cy", function (d: any) {
return d.y;
});
// label
// .attr("x", function (d: any) {
// return d.x + 5;
// })
// .attr("y", function (d: any) {
// return d.y + 5;
// });
}
simulation.nodes(nodes as SimulationNodeDatum[])
.on("tick", ticked)
return <Box sx={{overflowY: "scroll"}}>
<svg height={600} width={600} id="Target" />
</Box>
}
export default Rd4Component;
and here the results
the render
inspected results
i cant find a way to render the lines, looked at the docs and even paid online courses. seems that nothing works.. )):
thanks in advanced
I have a txt file full of stuff that I want the bot to upload to the chat. So far I have found no such code on the internet and I have tried nothing yet. Can anyone write me a script that uploads the whole txt file to the chat(not the content, UPLOAD the text file)? Thanks.
I am making a code to send information by bits, it is LIFI information that the flash uses to send said information. I have managed to turn on the torch from the web with JS but at the time of sending the message I have an error, any idea what I can do?
The code is this:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<div class="input-group mt-3 ml-auto mr-auto">
<input id="msg" class="form-control" type="text" name="msg" placeholder="Type message here..." />
<div class="input-group-append">
<button id="toggle" class="btn btn-primary">Send</button>
</div>
<script>
//have a console on mobile
var consoleOutput = document.getElementById("console");
const log = function(msg){
// consoleOutput.innerText = `${consoleOutput.innerText}n${JSON.stringify(msg)}`;
document.getElementById("console").innerText = msg;
console.log(msg);
}
//Test browser support
const SUPPORTS_MEDIA_DEVICES = 'mediaDevices' in navigator;
if (SUPPORTS_MEDIA_DEVICES) {
//Get the environment camera (usually the second one)
navigator.mediaDevices.enumerateDevices().then(devices => {
const cameras = devices.filter((device) => device.kind === 'videoinput');
if (cameras.length === 0) {
log('No camera found on this device.');
}
const camera = cameras[cameras.length - 1];
// Create stream and get video track
navigator.mediaDevices.getUserMedia({
video: {
deviceId: camera.deviceId,
facingMode: ['environment', 'user'],
height: {ideal: 1080},
width: {ideal: 1920}
}
}).then(stream => {
const track = stream.getVideoTracks()[0];
//Create image capture object and get camera capabilities
const imageCapture = new ImageCapture(track)
imageCapture.getPhotoCapabilities().then(capabilities => {
//let there be light!
var isTorchOn = false;
const btn = document.querySelector('.switch');
// if (capabilities.torch){
btn.addEventListener('click', function(){
isTorchOn = !isTorchOn;
log("El flash esta encendido?: " + isTorchOn)
try{
track.applyConstraints({
advanced: [{torch: isTorchOn}]
});
} catch(err){
log(err);
}
});
const btn2 = document.querySelector('.switchOff');
if (!capabilities.torch){
log("Precione habilitar y encender");
}
btn2.addEventListener('click', function(){
try{
track.applyConstraints({
advanced: [{torch: false}]
});
} catch(err){
log(err);
}
});
});
}).catch(log);
}).catch(log);
const msg = document.getElementById("msg");
const button = document.getElementById("toggle");
let interval = null;
button.onclick = () => {
if (interval) {
clearInterval(interval);
interval = null;
}
const seq = [];
["x02", ...msg.value, "n", "x03"].forEach(c => seq.push(...encode(c.charCodeAt(0))));
interval = setInterval(() => {
if (!seq.length) {
clearInterval(interval);
interval = null;
} else if (seq.shift()) {
try{
track.applyConstraints({
advanced: [{torch: isTorchOn}]
});
} catch(err){
log(err);
}
} else {
try{
track.applyConstraints({
advanced: [{torch: false}]
});
} catch(err){
log(err);
}
}
}, 50);
function parity(val) {
val = val ^ (val >> 1);
val = val ^ (val >> 2);
val = val ^ (val >> 4);
return val & 1;
}
function encode(char) {
const bits = [1];
for (var i = 0x80; i > 0; i >>= 1) {
bits.push(char & i ? 1 : 0);
}
bits.push(parity(char));
bits.push(0);
return bits;
}}}
</script>
</head>
<body>
<button class="switch">Encender / Apagar</button> -
<button class="switchOff">Apagar</button>
<h2>
Console output
</h2>
<div id="console">Precione habilitar y encender</div>
</body></html>
When you click on turn On / Off the torch turns on, but I need that when a user enters a message or a number in the textbox a sequence is turned on when pressing accept. It should be clarified that this program only works in Chrome
I have a array of objects:
const arr = [
{
name: "Name 1",
symbol: "S1"
},
{
name: "Name 2",
symbol: "S2"
},
]
And I want to transform this on this
{
S1: "Name 1", S2: "Name 2"
}
I tried this
arr.map((a) => { [a.symbol]: a.name })
But no luck. How can I achieve this?