Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I’m getting objects from s3 and now I want to show them as thumbnails in my react app, so how can I achieve it?
var params = {
Bucket: BUCKET_NAME,
Prefix: 'media',
};
s3.listObjects(params, function (err, data) {
if (err) console.log(err, err.stack);
else {
console.log('objects list', data); // successful response
}
});
I’m getting the contents in the response but the question is how can I display them in my app?
I can’t call “function” in html onclick, I don’t know why.
tell me how to call “myfunction” when onclick
function commentHtml(data, commentId, userId) {
function myfunction() {
console.log("test");
}
const comment_text = document.querySelector(".comment_text");
const comment = comment_text.value;
const check = data.author._id === userId;
if (check) {
return `
<div class="comment-detail">
<div class="comment-nickname">${data.author.name}</div>
<div class="comment-text">${data.content}</div>
<button class="comment_delete" data-id = ${commentId} onclick="myfunction()" >x</button>
</div>`;
}
return `
<div class="comment-detail">
<div class="comment-nickname">${data.author.name}</div>
<div class="comment-text">${data.content}</div>
<button class="comment_delete" onclick="myfunction()" style="display: none;">x</button>
</div>`;
}
When I use GnomeBracks, like the demo, it just keeps getting annoying that there are ALWAYS multiple <head>s. I mean, look, the Chrome DevTools show this nonsense:
And I used 2 new Brack()s. Who does this?
So i’ve been trying to make a discord.js bot when a person with <@discordid> types $whitelist (my ip)
then it changes only the
$ip = array(‘ip address’,);
from the main.php
i’ve been trying to make this for 2 days but im just bad at node.js, pyton and all this stuff, i used to script roblox lua…
I need your help… I have an example:
{
"id": "1",
"name": "something",
"history": [
{"id": "1", "date": "example", "value": "example"},
{"id": "2", "date": "example", "value": "example"},
{"id": "3", "date": "example", "value": "example"},
{"id": "4", "date": "example", "value": "example"},
{"id": "5", "date": "example", "value": "example"},
]
}
I’m using a query in the prisma that is returning an array with several of these objects…
so I need it to only return in the history.. the last one that was added, for example like this
{
"id": "1",
"name": "something",
"history": [
{"id": "5", "date": "example", "value": "example"},
]
}
Does anyone know a query in the prisma that can do this?
help me guys you are my only chance
I am working on a Gatsby project and am having issues with a homepagebanner.
Using react-slick which works ok, but adding content on top of each pictures is causing problems. Setting a link for the second picure (“golflink”) is resulting in every image now being clickable leading to this href. Can someone help rewrite so only the second image is leading to the event page?
link to index page with banner below navbar https://zen-aryabhata-bd8020.netlify.app/
Thank you in advance.
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick"
import { Link } from "gatsby";
import "../styles/bannerstyles.css"
import banner_image_1 from '../img/banner1.jpg'
import banner_image_2 from '../img/golferin.jpg'
import banner_image_3 from '../img/baby.jpg'
import golf_cup_logo from '../img/golf_cup_logo.png'
const photos = [
{
id: '1',
url: banner_image_1,
css_id: "banner-image-one",
heading: 'unsere mission',
description: 'Lebensrettende Hilfe für die Schwächsten',
link: "/projekte",
link_text: "mehr erfahren",
},
{
id: '2',
url: banner_image_2,
css_id: "banner-image-two",
// description: 'Dabei sein und (Golf-) spielend Gutes tun!',
link_text: "mehr erfahren",
link: "/events#golf-turnier",
badge: golf_cup_logo,
golflink: "/events#golf-turnier"
},
{
id: '3',
url: banner_image_3,
css_id: "banner-image-three",
heading: 'unsere projekte',
description: 'Hilfe, die dort ankommt, wo sie am dringensten gebraucht wird!',
link: "/projekte",
link_text: "mehr erfahren"
}
]
class HomepageBanner extends Component{
render(){
const settings = {
dots: true,
fade: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
}
return (
<div id="homepagebanner">
<Slider {...settings}>
{photos.map((photo) => {
if (photo.id = 1) {
return (
<a href="/events#golf-turnier">
<div id="homepagebanner-img-container">
<img id="homepagebanner-img" width="100%" alt="homepagebanner-image" src={photo.url} />
<div className="homepagebanner-text" id={photo.css_id}>
<div>
<img src={photo.badge} width="100%" position="absolute" className="banner-badge"/>
</div>
<h1>{photo.heading}</h1>
<p>{photo.description}</p>
<a className="banner-link" href={photo.link}>{photo.link_text}</a>
</div>
</div>
</a>
)
} else {
return(
<div id="homepagebanner-img-container">
<img id="homepagebanner-img" width="100%" alt="homepagebanner-image" src={photo.url} />
<div className="homepagebanner-text" id={photo.css_id}>
<h1>{photo.heading}</h1>
<p>{photo.description}</p>
<a className="banner-link" href={photo.link}>{photo.link_text}</a>
</div>
</div>
)
}
})}
</Slider>
</div>
)
}
}
export default HomepageBanner
Iam doing project of PHP and Mysql right now. And i need to insert unique userid to each row. It should be less 5-6 char and including num and char
Its must should be unique
I am using vue3 and typescript, this is my code:
const data = reactive({
bytes : new Uint8Array(),
})
my confusion is that
when mouse hover on data, its type is:
const data: {
bytes: {
[x: number]: number;
readonly BYTES_PER_ELEMENT: number;
readonly buffer: {
readonly byteLength: number;
slice: (begin: number, end?: number | undefined) => ArrayBuffer;
readonly [Symbol.toStringTag]: string;
} | {
...;
};
... 30 more ...;
readonly [Symbol.toStringTag]: "Uint8Array";
};
}
but when mouse hover on bytes, its type is:
(property) bytes: Uint8Array
is that the reactive function change the type of the bytes? And how can I fix it?
I’m using this line of code to get all the transaction counts under a particular contract.
web3.eth.getTransactionCount("//contract address").then(console.log);
But I only want to count the transactions where the minting of NFTs was done.
So, as you can see in the screenshot, there are six transactions, and getTransactionCount() would return six. But I only want to count those transactions which have the method “Mint NFT”. So, is there any way to do that?
I’m using joi to structure data.
Now I’m unable to read environment variable set on startup.
I have a startup scrip.sh like:
PUBLIC_KEY="$(cat public_key.pem) docker-compose up --build"
Then I try to read that PUBLIC_KEY variable.
const envVariables = joi.object({
PUBLIC_KEY: joi.string()
.default('PUBLIC_KEY')
})
I thought this would automatically identify the variable but it does not.
Is it possible to get the variable set on start up with Joi?
I’m starting out in Cypress, I’m trying to select an element with this text:
Username is missing
My code is:
cy.get('[data-id="error"]').should('have.text', 'is missing')
Is there a way that I can just use a specific part of a string (in this case, ‘is missing’) and still be able to use the .should() assertion? I hope to pass the assertion using specific part of a string only.
I am fully aware that my problem most likely has something to do with me doing something wrong, but I can’t seem to figure it out. Here is my code:
for (let i = 0; i < formContentArray.length; i++) {
rowPosition = doc.y
columnPosition = doc.x
if (formContentArray[i].type == 'text' ) {
doc
.fill('#89cff0')
.fontSize(13)
.text(formContentArray[i].text, columnPosition, rowPosition, { align: "left" });
if (i == 0) {
doc.text('Done/Not Done', columnPosition, rowPosition, {align: 'right'})
}
}
else {
doc
.fill('#212121')
.fontSize(11)
.text(formContentArray[i].text,columnPosition, rowPosition, { align: "left" })
if (formContentArray[i].value) {
doc.text('Done', columnPosition, rowPosition, {align: 'right'})
}
else {
doc.text('Not Done', columnPosition, rowPosition, {align: 'right'} )
}
}
}
This works perfectly until the data fills out the page at which point PDFkit makes a new page. The next time it loops, it only does one loop, adds one line of text at the top of the 2nd page, and then adds a 3rd page. The loop then works perfectly on the 3rd page, finishing off the data. This obviously leaves the 2nd page though that is almost completely empty. I don’t understand? It has something to do with my rowPosition and columnPosition, I think. However, I need those in order to align text on the right-hand side with that on the left
I have embedded a chat window to my website with iframe that consists of a chat icon and on click of that, the chat window gets opened. I want that the iframe would always take minimal width and height to show the chat icon and chat window respectively.
I have creates a aside in react and I want to change their state to active when clicked on each of them, but when I click on any item all
of them suddenly get activated. how to fix this?
import React, { useState, useEffect } from "react";
import { Col, Image, Row } from "react-bootstrap";
import "./Company.scss";
// * api
import { getCoin } from "../services/api";
// *spinner
import Loader from "./Loader";
const Company = () => {
const [changeClass, setChangeClass] = useState(false);
const [coins, setCoins] = useState([]);
useEffect(() => {
const fetchAPI = async () => {
const data = await getCoin();
setCoins(data);
};
fetchAPI();
}, []);
const myHandler = () => {
setChangeClass(true);
console.log("trued");
};
const myHandler2 = () => {
console.log();
};
return (
<>
{coins.length ? (
coins.map((coin) => (
<Row
className={
changeClass
? "p-2 border-top d-flex align-items-center company-list-single-active"
: "p-2 border-top d-flex align-items-center company-list-single"
}
onClick={() => {
myHandler();
myHandler2();
}}
key={coin.id}
>
<Col xxl="2" xl="2" lg="2" md="2" sm="2" xs="2">
<Image
src={coin.image}
alt={coin.name}
className="coin-image mx-2"
fluid
/>
</Col>
<Col>
<span>{coin.name}</span>
</Col>
</Row>
))
) : (
<Loader />
)}
</>
);
};
export default Company;
plese help me for fixed bug
thanks
plese help me for fixed bug
thanksplese help me for fixed bug
thanksplese help me for fixed bug
thanksplese help me for fixed bug
thanksplese help me for fixed bug
thanksplese help me for fixed bug
thanksplese help me for fixed bug
thanksplese help me for fixed bug
thanksplese help me for fixed bug
thanks
This is my code:
function setToTop(t) {
var n = 0;
$(".box").each(function(t, o) {
var e = Number.parseInt($(o).css("z-index"));
e = Number.isNaN(e) ? 0 : e, n = Math.max(n, e)
}), t.css({
zIndex: n + 1
})
}
$(function() {
$(document).mouseleave(function() {
$(document).trigger("mouseup")
}), $(".box").draggable({
helper: "original",
containment: "body",
drag: function(t, n) {
n.offset.left < 0 && (n.position.left = n.position.left - n.offset.left)
},
stop: function(t, n) {},
start: function(t, n) {
setToTop(n.helper)
}
})
}), $(".box span").click(function() {
$(this).parents(".box").css("display", "none")
});* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font-size: 50px;
font-family: Arial;
background-color: rgb(220, 220, 220);
}
.box {
background-color: yellow;
color: black;
padding: 20px;
display: block;
position: absolute;
border: 2px black;
cursor: all-scroll;
border: 1px solid black;
}
.box:nth-child(1) {
left: 20%;
top: 10%;
}
.box:nth-child(2) {
left: 10%;
top: 15%;
}
.box:nth-child(3) {
left: 25%;
top: 30%;
}
.box:nth-child(4) {
left: 30%;
top: 20%;
}
.box span {
background-color: red;
color: white;
position: absolute;
top: -40px;
right: -40px;
padding: 10px;
cursor: pointer;
border: 1px solid black;
}<div class="box">Hello <span>✕</span></div>
<div class="box">Love <span>✕</span></div>
<div class="box">Freedom <span>✕</span></div>
<div class="box">Peace <span>✕</span></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>The function is:
✕ buttonUnfortunately, the ✕ button doesn’t work on many touch devices. My research has shown that it works well on Apple devices, but pretty bad on many Android devices.
Has anyone an idea to fix that? Also, does anyone have an idea to optimize the code?
Would be very thankful for help! <3