I want to implement a chart like below.
But my problem is collision of the numbers in this chart and I couldn’t find a suitable solution for this. For example when two or three values are very close together, the collision happens. (the image below)
Category: javascript
Category Added in a WPeMatico Campaign
Get limits of a polygon in google maps
Dear communities have a greeting from me, I want to make a query, and that is that I am developing a map of coverage areas and I have been able to draw many areas on the map, in the code that I am going to share with you below I have only left 3 for Example and demonstration uses, now, what my code should do is that every time the google maps marker leaves the red polygon its value becomes false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Electronica 2001</title>
<meta name="description" content="Electronica 2001">
<meta name="author" content="Electronica 2001">
<!-- Favicon -->
<link rel="shortcut icon" href="https://electronica2001es.com/images/favicon2.ico">
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans:300,400,600,700,800','Poppins:300,400,500,600,700' ] }
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'assets/js/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
<script type="text/javascript"></script>
<!-- Plugins CSS File -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Main CSS File -->
<link rel="stylesheet" href="assets/css/style.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/fontawesome-free/css/all.min.css">
<style>
body {
margin: 0;
padding: 0
}
html,
body,
#map {
height: 100%;
font-family: Arial, sans-serif;
font-size: .9em;
color: #fff;
}
#note {
text-align: center;
padding: .3em; 10px;
background: #009ee0;
}
.bool {
font-style: italic;
color: #313131;
}
.info {
display: inline-block;
width: 40%;
text-align: center;
}
.infowin {
color: #313131;
}
#title,
.bool{
font-weight: bold;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCA3CvqkU5D5dLfADaABJi3OxjoWL64keA&callback=initMap&libraries=places,geometry,drawing&v=weekly" defer></script>
</head>
<body onload="init()">
<div id="note">
<span id="title">»Inside the circle?«</span>
<hr />
<span class="info">Marker <strong>A</strong>: <span id="a" class="bool"></span></span> ←♦→ <span class="info">Marker <strong>B</strong>: <span id="b" class="bool"></span></span>
</div>
<div id="map">test</div>
<p id="demo"></p>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/plugins.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
function sueltala() {
Swal.fire({
icon: 'success',
title: '¡Información importante!',
text: 'Something went wrong!',
footer: '<a href>Why do I have this issue?</a>'
})
}
</script>
<!-- Main JS File -->
<script src="assets/js/main.min.js"></script>
<script>
var x = document.getElementById("demo");
window.onload = function init() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
function showPosition(position) {
x.innerHTML = position.coords.latitude + "," + position.coords.longitude;
var
contentCenter = '<span class="infowin">Center Marker (draggable)</span>',
contentA = '<span class="infowin">Marker A (draggable)</span>',
contentB = '<span class="infowin">Marker B (draggable)</span>';
var
latLngCenter = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
latLngCMarker = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
latLngA = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
latLngB = new google.maps.LatLng(38, -93),
coords = [ [ [-89.19868711734125, 13.69215075483513], [-89.19807557368586, 13.691410653984653], [-89.19831965470621, 13.690871212812844], [-89.19834915900537, 13.69033177040379], [-89.19825796389887, 13.690128501928752], [-89.19697050357172, 13.690097229840053], [-89.19645551944086, 13.69013371394311], [-89.19598345065424, 13.690670550805194], [-89.19385914111444, 13.691295990264242], [-89.19233564639399, 13.691963123853995], [-89.19868711734125, 13.69215075483513], [-89.19868711734125, 13.69215075483513], [-89.19868711734125, 13.69215075483513]], [ [-89.19570795712826, 13.673281378361137], [-89.19570795712826, 13.673281378361137], [-89.19570795712826, 13.673281378361137], [-89.19654480634091, 13.673281378361137], [-89.19667355237362, 13.671175564389776], [-89.19562212643979, 13.6697786279033], [-89.1954075497186, 13.670612620832053], [-89.19602982221005, 13.67232229710495], [-89.19570795712826, 13.673281378361137]], [ [-89.18643520663386, 13.704821815720464], [-89.18654249499446, 13.703946250391347], [-89.1831092674554, 13.703550160242049], [-89.18302343676692, 13.70413387180797], [-89.18403194735652, 13.70430064627475], [-89.18403194735652, 13.704592501306768], [-89.1865854103387, 13.704842662474233], [-89.18643520663386, 13.704821815720464], [-89.18643520663386, 13.704821815720464]]],
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: latLngCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}),
markerCenter = new google.maps.Marker({
position: latLngCMarker,
title: 'Center of Circle',
map: map,
draggable: true
}),
infoCenter = new google.maps.InfoWindow({
content: contentCenter
}),
markerA = new google.maps.Marker({
position: latLngA,
title: 'A',
map: map,
label: 'A',
draggable: true
}),
infoA = new google.maps.InfoWindow({
content: contentA
}),
markerB = new google.maps.Marker({
position: latLngB,
title: 'B',
map: map,
label: 'B',
draggable: true
}),
infoB = new google.maps.InfoWindow({
content: contentB
})
// exemplary setup:
// Assumes that your map is signed to the var "map"
// Also assumes that your marker is named "marker"
,
/* circle = new google.maps.Circle({
map: map,
clickable: false,
// metres
radius: 100000,
fillColor: '#fff',
fillOpacity: .6,
strokeColor: '#313131',
strokeOpacity: .4,
strokeWeight: .8
}); */
bounds = new google.maps.LatLngBounds();
for (var i = 0; i < coords.length; i++) {
var polygonCoords = [];
for (var j = 0; j < coords[i].length; j++) {
var pt = new google.maps.LatLng(coords[i][j][1], coords[i][j][0])
bounds.extend(pt);
polygonCoords.push(pt);
}
// Construct the polygon.
circle = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
};
// attach circle to marker
circle.bindTo('center', markerCenter, 'position');
google.maps.Polygon.prototype.getBounds = function() {
var bounds = new google.maps.LatLngBounds();
this.getPaths().forEach(function(path) {
path.forEach(function(point) {
bounds.extend(point);
});
});
return bounds;
};
var
// get the Bounds of the circle
bounds = circle.getBounds()
// Note spans
,
noteA = jQuery('.bool#a'),
noteB = jQuery('.bool#b');
noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(),markerCenter.getPosition())));
noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(),markerCenter.getPosition())));
// get some latLng object and Question if it's contained in the circle:
google.maps.event.addListener(markerCenter, 'dragend', function() {
latLngCenter = markerCenter.position;
noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(),markerCenter.getPosition())));
noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(),markerCenter.getPosition())));
});
google.maps.event.addListener(markerA, 'dragend', function() {
latLngA = markerA.position;
noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(),markerCenter.getPosition())));
});
google.maps.event.addListener(markerB, 'dragend', function() {
latLngB = markerB.position;
noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(),markerCenter.getPosition())));
});
google.maps.event.addListener(markerCenter, 'click', function() {
infoCenter.open(map, markerCenter);
});
google.maps.event.addListener(markerA, 'click', function() {
infoA.open(map, markerA);
});
google.maps.event.addListener(markerB, 'click', function() {
infoB.open(map, markerB);
});
google.maps.event.addListener(markerCenter, 'drag', function() {
infoCenter.close();
noteA.html("draggin…");
noteB.html("draggin…");
});
google.maps.event.addListener(markerA, 'drag', function() {
infoA.close();
noteA.html("draggin…");
});
google.maps.event.addListener(markerB, 'drag', function() {
infoB.close();
noteB.html("draggin…");
});
}
};
</script>
</body>
</html>
Displaying and modifying the content of an html div stored in a database
I’m working on a project and I want to record all the content of a html to store it in a database and also to be able to display it so I can modify it later.
I did this with javascript (but I only manage to save the ‘label’, the other fields are not saved I don’t know why) and I have this which is therefore saved on my database :
data received in the ‘formulaire’ field of my database :
So I also want to know how to display the same content that is in my database (and that is encoded in a different way)
the page code :
<form id="form-builder" method="post" action="{{route('submit')}}" enctype='multipart/form-data'>
@csrf
@if(session()->has('message'))
<div class="alert alert-success close-message">
{{ session()->get('message') }}
</div>
@endif
<input type="hidden" id="form-data" name="formulaire" value="">
<div class="box-rightsave @error('formulaire') is-invalid @enderror" id="contents-2" style="min-height: 150px" name="formulaire" id="formulaire">
{{ old('formulaire') }}
</div>
</form>
and the javascript code :
window.jsPDF = window.jspdf.jsPDF;
const doc = new jsPDF({
orientation: "landscape",
unit: "in",
format: [4, 2],
});
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
const db = localStorage;
const _ = (el) => {
return document.querySelector(el);
};
const getTpl = (element) => {
return tpl[element];
};
const makeEditable = () => {
let elements = document.querySelectorAll('.drop-element');
let toArr = Array.prototype.slice.call(elements);
Array.prototype.forEach.call(toArr, (obj, index) => {
if (obj.querySelector('img')) {
return false;
} else {
obj.addEventListener('click', (e) => {
e.preventDefault();
obj.children[0].setAttribute('contenteditable', '');
obj.focus();
});
obj.children[0].addEventListener('blur', (e) => {
e.preventDefault();
obj.children[0].removeAttribute('contenteditable');
});
}
});
};
const removeDivsToSave = () => {
let elements = document.querySelectorAll('.drop-element');
let toArr = Array.prototype.slice.call(elements);
let html = '';
Array.prototype.forEach.call(toArr, (obj, index) => {
obj.children[0].removeAttribute('contenteditable');
html += obj.innerHTML;
});
return html;
};
const tpl = {
'header1': '<label>Entrez un label</label>',
'header2': '<input class="form-control"/>',
'header3': '<textarea rows="10" cols="30"></textarea>',
'shortparagraph': '<select class="form-control" id="cars"><option value="volvo">Valeur1</option> <option value="saab">Valeur2</option> <option value="fiat">Valeur3</option> <option value="audi">Valeur4</option> </select>',
'image': '<input type="file" name="file" id="inputGroupFile02">'
};
/**
* init dragula
*
* @type function
*/
const containers = [_('.box-left'), _('.box-rightsave')];
const drake = dragula(containers, {
copy(el, source) {
return source === _('.box-left');
},
accepts(el, target) {
return target !== _('.box-left');
}
});
dragula([document.getElementsByClassName('.drop-element')], {
removeOnSpill: true
});
drake.on('out', (el, container) => {
console.log(el)
if (container == _('.box-rightsave')) {
el.innerHTML = getTpl(el.getAttribute('data-tpl'));
el.className = 'drop-element';
if (el.getAttribute('data-tpl') != "image") {
makeEditable();
}
db.setItem('savedData', _('.box-rightsave').innerHTML);
}
if (container == _('.box-left')) {
el.innerHTML = el.getAttribute('data-title');
}
});
if (typeof db.getItem('savedData') !== 'undefined') {
_('.box-rightsave').innerHTML = db.getItem('savedData');
makeEditable();
}
;
_('.reset').addEventListener('click', (e) => {
e.preventDefault();
db.removeItem('savedData');
if (confirm('En êtes-vous sûr !?')) {
_('.box-rightsave').innerHTML = '';
}
});
_('.save').addEventListener('click', (e) => {
e.preventDefault();
var blob = new Blob([removeDivsToSave()], {
type: 'text/html;charset=utf-8'
});
db.setItem('savedData', _('.box-rightsave').innerHTML);
});
//
$(document).ready(function () {
// $(document).on("click","input[name=file]",function () {
// console.log($('.custom-file-input').click());
// // $(this)[0].trigger("click");
// // $(this).trigger("input[name=file]");
//
//
// });
$(document).on("dblclick", ".drop-element", function () {
$(this).remove();
db.removeItem('savedData');
db.setItem('savedData', $("#contents-2").html())
})
setTimeout(function () {
$(".close-message").hide();
}, 2000)
$(".form-submit").on("click", function (e) {
e.preventDefault();
$("#form-data").val(JSON.stringify($("#contents-2").html()));
$("#form-builder").submit();
});
$(".save").on("click", function () {
html2canvas(document.querySelector("#contents-2")).then(canvas => {
document.body.appendChild(canvas)
var myImage = canvas.toDataURL("image/jpeg,1.0");
// Adjust width and height
var imgWidth = (canvas.width * 120) / 650;
var imgHeight = (canvas.height * 70) / 340;
// jspdf changes
var pdf = new jsPDF('p', 'mm', 'a4');
pdf.addImage(myImage, 'png', 15, 2, imgWidth, imgHeight); // 2: 19
pdf.save(`FormBuilderPDF.pdf`);
});
})
})
I hope you can help me
TypeError: The “original” argument must be of type Function in Vue.js application
I’m trying to call a soap webservice using the ‘soap’ module in my Vue SPA, but I get this error just by importing the module. I already searched a lot but didn’t find a solution.
My code:
// /src/services/soapService.js
import soap from 'soap';
var soapService = {
users: {
getAllUsers() {
const url = 'http://127.0.0.2:8000/?wsdl'
soap.createClient(url, function(err, client) {
client.getAllUsers(function(err, result) {
console.log(result);
})
})
}
}
}
export default soapService;
Then I call my function in a Vue component:
<template>
<div></div>
</template>
<script>
import soapApi from '@/services/soapService'
export default {
name: 'Users',
methods: {
getAllUsers() {
this.allUsers = soapApi.users.getAllUsers();
}
},
mounted() {
this.getAllUsers();
}
}
</script>
When I try to load the Users.vue component, I get this error:
TypeError: The "original" argument must be of type Function
at promisify (util.js?3022:602)
at eval (index.js?4f62:7)
at Object.../node_modules/get-stream/index.js (0.js:529)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (client.js?e3c8:24)
at Object.../node_modules/soap/lib/client.js (0.js:586)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at Object.eval (soap.js?3fc0:19)
abort @ vue-router.esm.js?8c4f:2316
eval @ vue-router.esm.js?8c4f:2369
eval @ vue-router.esm.js?8c4f:2138
eval @ vue-router.esm.js?8c4f:2203
Promise.then (async)
eval @ vue-router.esm.js?8c4f:2150
eval @ vue-router.esm.js?8c4f:2171
eval @ vue-router.esm.js?8c4f:2171
flatMapComponents @ vue-router.esm.js?8c4f:2170
eval @ vue-router.esm.js?8c4f:2106
iterator @ vue-router.esm.js?8c4f:2362
step @ vue-router.esm.js?8c4f:2004
step @ vue-router.esm.js?8c4f:2008
step @ vue-router.esm.js?8c4f:2008
step @ vue-router.esm.js?8c4f:2008
runQueue @ vue-router.esm.js?8c4f:2012
confirmTransition @ vue-router.esm.js?8c4f:2392
transitionTo @ vue-router.esm.js?8c4f:2260
push @ vue-router.esm.js?8c4f:2715
push @ vue-router.esm.js?8c4f:3037
handler @ vue-router.esm.js?8c4f:1139
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961
Node v16.11.1
npm v8.1.3
vue v2.6.11
I want to take input from user and print it on screen but my code is not working correctly (In Javascript)
` function Input2() {
let a = document.getElementById(“Input”).value
document.write(a)
} ` ( this is my code that i am using for onclick function of button tag in html)
[][1]
[1]: https://i.stack.imgur.com/fZvSK.png
check the radio button when click on the li using javascript
I have radio button
Html code:
<input type="radio" class="first" name="bright" checked>
<input type="radio" class="second" name="bright" >
<input type="radio" class="third" name="bright">
<input type="radio" class="four" name="bright">
And i have a nav bar
Html code
<ul class="nav">
<li class="st st1 active" data-cont="first">
<h2 class="inner">وزارة الاستثمار</h2>
</li>
<li class="st st2" data-cont="second">
<h2 class="inner">وزارة التجارة</h2>
</li>
<li class="st st3" data-cont="third">
<h2 class="inner">جهات حكومية اخرى</h2>
</li>
<li class="st st4" data-cont="four">
<h2 class="inner">مكتب هندسي</h2>
</li>
</ul>
These 2 are conected with the data-cont that have the class of the radio button
I want when i click on the li the correct radio button be checked using javascript
I tried to make it using this code in JavaScript
let radio = document.querySelectorAll("input");
let radioArray = Array.from(radio);
let tabs = document.querySelectorAll(".nav li");
let tabsArray = Array.from(tabs);
tabsArray.forEach((ele) => {
ele.addEventListener("click", function (e) {
tabsArray.forEach((ele) => {
ele.classList.remove("active");
});
e.currentTarget.classList.add("active");
document.querySelector(e.currentTarget.dataset.cont).checked = true;
});
});
I try to remove the active class from li and put it on the li where i click then i want the radio button be checked
Any body can help me on this?
js assign new input value to form object without enforcing datetime-local format
The datetime-local html input type accepts a value in the format 2021-12-04T18:45, however my app uses dates in the 2021-12-04 18:45 format, so I’m trying to change the value of the datetime-local input with JavaScript on form submit:
document.getElementById('myform').onsubmit = (event) => {
let _form = event.target;
_form.elements.namedItem('date_from').value = '2021-12-10 20:50';
};
but get the following error:
The specified value “2021-12-10 20:50” does not conform to the
required format. The format is “yyyy-MM-ddThh:mm” followed by
optional “:ss” or “:ss.SSS”.
How do I bypass the formatting enforcement in this scenario?
I’d prefer using datetime-local input type, to take advantage of the built-in date and time picker as opposed to having to use extra library. So changing the input field type would not be a preferable solution.
P.S. I cannot control the backend processing of the form, so I have to change the value in the frontend before the form is submitted further.
Unclear why Fetch for UPS XML API failing
I’m working on an airtable automation that is putting in an address validation request to the USPS API. For some reason, when I try to fetch it times out. I’ve validated that the URL I’m testing on works just fine and provides a response, but no matter what I try, I cannot get this to work.
AFAIK, using Fetch is the only way I can access the XML response in airtable automations. I’m open to anything that gets me the data (I know that because it’s an XML response I can’t parse it immediately.)
Here’s an example of a URL (with my ID marked out) that is failing:
let geo2 = await fetch( 'http://secure.shippingapis.com/ShippingAPI.dll?API=Verify&XML=<AddressValidateRequest%20USERID="00000000"><Address><Address1>null</Address1><Address2>7400%20Quebec Pl NW</Address2><City>Brooklyn</City><State>NY</State><Zip5>20202</Zip5><Zip4></Zip4></Address></AddressValidateRequest>').then(response => response.text())
I can’t find any similar errors online, and have found code in other places (not airtable) that has worked. Any idea why this isn’t working, and if there are alternatives that work in airtable? I can’t use XMLhttpRequest as far as I can tell.
Delete item from table React
I create a table so you can add and remove items. Deletion as far as I understand needs to be done through the .filter() for the unique id of each item I apply Date.now(). The problem is that I can not pass the value of the id from the child(Li) element to the parent(App). React constantly shows the error that deleteRow is not a function. As if I understand that it is a parameter but how then can it be called. Thank you to everyone who responds !!!
App.js
import { Button } from 'primereact/button';
import './App.css';
import Li from './components/Li'
import './component_style/Ul.css'
import { useState } from 'react';
function App() {
let tableId = 0 ;
const [tableRows, setTableRows] = useState([
{
id: Date.now(),
firstName: "lorem",
secondName: "lorem",
lastName: "lorem"}
]);
const addNewRow = () =>{
const newRow = {
id:Date.now(),
firstName: "",
secondName: "",
lastName: ""
}
setTableRows([...tableRows, newRow])
}
/////////////////////////////////////////
function deleteRow(){
console.log("tableId")
}
//////////////////////////////////////////
return (
<div className="App">
<Button onClick = {deleteRow}>Add new stroke</Button>
<ul className = 'ul__box'>
{tableRows.map((row,id) =>{
if(row)
return(<Li row={row} key={id} deleteRows = {deleteRow} /> )
}
)}
</ul>
</div>
);
}
export default App;
Li.js
import Inputs from './Inputs';
import {Button} from '../../node_modules/primereact/button'
import '../component_style/Li.css'
function Li(props, deleteRows){
let idTable = props.row.id
const showProps = () =>{
console.log(props.row.id)
}
///////////////////
const removeRow = () =>{
console.log(idTable) // id Element
let a = deleteRows.deleteRow(idTable) // non-work code
}
///////////////////
return(
<li className = "item_li">
<Inputs valTable = {props}/>
<Button onClick = {removeRow}>Delete</Button>
</li>
)
}
export default Li;
What is the meaning of ‘local’ in Bloodhound typeahead.js
var findState=new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local:''
})
so here what is the use of local and what it does?
Header tag and paragraph tag are shown in single line tinymce
I’m using TinyMCE in my backend for content entry. But the content are displayed weirdly in the frontend.
I’ve not set any kind of css for this layout.
I’m using the following tools and plugins:
menubar: 'file edit view insert format tools table help',
toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media template link anchor codesample | ltr rtl',
toolbar_sticky: true,This is the project I’m working on.
link
I couldn’t find what is causing the layout issue.
How to remove repeated number from an array?
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]
How to separated onclick event in the list of buttons Javascript DOM
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?
How to integrate 2.5% sales fee in an NFT Marketplace
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
Optimize Foreach inside another Foreach PHP/Javascript
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!!