Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I have this segment of code that is meant to upload a csv file for analysis on javascript using d3.
import * as d3 from 'd3'
// Materials
d3.csv("disney_plus_shows.csv", function(data) {
console.log(data);
});
However, I am noticing that when I run npm build dev, the file cannot be found.
I am recieving this error
I have also tried placing copies of this csv file outside the src directory and root directory. I am not sure why I am unable to load it.
I am using a ftp server (say A) and in there, I created a php file with javascript fetch request to another server (say B). Now the criteria of B is, I have to whitelist the IP address from where the request is taken, so I have whitelisted the A’s server IP address but when I try doing the fetch request. It looks like the fetch request is taking my own public IP address rather than the A’s IP address and thereby I am getting 403 error!
therefore, I want to ask is there any way to make sure the fetch request uses the ftp server’s IP address (i.e. the A), rather than my system’s public IP address?
I am trying to add a span element before a referenced span element. However, there seems to be no space between the new element and the referenced span element.
// Create a new, plain <span> element
let sp1 = document.createElement("span");
// Set class attribute and value
sp1.setAttribute("class", "new-element");
// Write content to element
sp1.innerText = "foo bar";
// Get the reference element
let sp2 = document.querySelector(".third-element");
// Get the parent element
let parentDiv = sp2.parentNode;
// Insert the new element into before sp2
parentDiv.insertBefore(sp1, sp2);<div id="main-container">
<span>foo bar</span>
<span>foo bar</span>
<span class="third-element">foo bar</span>
<span>foo bar</span>
</div>I am using a library (xml2js‘s parseString) that, for backward compatibility reasons, uses a callback on a synchronous function (it used to be async, so the callback made sense, but now it is sync).
Here is my solution right now that works, but I’m not sure if it is the best way:
function getBookTitle(bookXml) {
let res;
parseString(bookXml, function(err, json) {
res = json.title;
});
return res;
});
parseString is synchournous, so this works.
I already read How do I return from synchronous callback? but the answer changes the original function so it is useless for my case.
I have setup hcaptcha to use in login process, after setting hcaptcha we get hcaptcha object on which we can call hcaptcha.getresponse to get the token for the solved captcha. However when I attach second hcaptcha div element on single page I get empty hcaptcha.getResponse() token
I can attach call back in the hcaptcha element for the second captcha and store the token response in the variable or cookie, however I wanted to use hcaptcha object as with first hcatcha element in the page, is there a way to do this
I’m making favorite buttons that saves them with localStorage in a different page. I added those favorite buttons to every paragraph. I don’t want to write a lots of same codes for each of them. The question is that, is there any way to make same buttons work independently and save their parent objects to another page. So far I’ve made just one favorite button to one paragraph and I’ve managed to save it to a different page. Here’s my code:
<form action="pages/login_screen.html">
<p>A<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span></p>
<p>B<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
<p>C<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
<p>D<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
<p>E<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
<script>
$(window).on('load',function(){
if(localStorage.toggled != "with_toggle"){
$(".heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');
}else{
$(".heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
}
});
$('.heart').toggleClass(localStorage.toggled);
$('.heart').on('click',function(){
if (localStorage.toggled != "with_toggle") {
$(".heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
$('.heart').toggleClass("with_toggle", true);
localStorage.toggled = "with_toggle";
localStorage.removeItem("paragraphValue");
} else {
$(".heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');
$('.heart').toggleClass("with_toggle", false);
localStorage.toggled = "";
var paragraph = document.querySelector(".heart").parentNode.innerHTML;
localStorage.setItem("paragraphValue", paragraph);
return false;
}
});
</script>
<form action="pages/login_screen.html">
Here’s the second page:
<div id="favorites"><!--FAVORITES HERE--></div>
<script>
document.getElementById("favorites").innerHTML = localStorage.getItem("paragraphValue");
</script>
let html=”
Some data
some more data
with
some other data
need to convert into string
”
I want it should be become a single string like
str=”Some data, some more data, some other data, need to convert into string”;
This I need in Reactjs functionality.
In comment section I have shared the details more
When the user clicks on the map, the address_box code block becomes visible.
<div id="adress_box" style="visibility: hidden">We are looking for delivery to <span id="address_confirm"></span></div>
How do I make the code below run when the visibility changes to visible?
alert('div is display!!!');
so far, I have only achieved that when the page loads, a similar code is executed:
<div id="adress_box" style="visibility: hidden">Ищем доставку по адресу <span id="address_confirm"></span></div>
<script>
let element = document.getElementById('address_confirm');
let cssObj = window.getComputedStyle(element);
if (cssObj.getPropertyValue("visibility") == 'visible') {
alert('div is NOT display!!!');
}
</script>
function beepBoop(input) {
let arrayBeep = []
if (Number.isInteger(input) === 0) {
return true
} else if (Number.isInteger(input) !== 0) {
let newNumber = -1
for (let i = 0; i <= input; i++) {
newNumber++;
arrayBeep.push(newNumber)
I have the above array and I want to be able to find all elements in that array that contain the number. Once all the numbers that contain have been identified I want to be able to change those numbers to the word Roar. I have already tried doing a for loop but I can’t see to get the syntax right.
Output = [0,1,2,Roar,4,5,6,7,8,9,10,11,12,Roar,14,15,16,17,18,19,20,21,22,Roar]
I have a MERN website that uses port 80 for the front-end and port 4000 for the back-end API. In MERN tutorials, they put axios.post('localhost:4000/login'...) to communicate with the backend API. But this won’t work in production if I have a domain like example.com. Is there a way to use relative URLs to specify a port, like axios.post(':4000/login')?
I`m a student and I facing such bug when I try webtorrent on nodejs on windows10.
Error: Cannot find module '../build/Release/wrtc.node'
Require stack:
- E:nodehlsnode_moduleswrtclibbinding.js
- E:nodehlsnode_moduleswrtclibindex.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (E:nodehlsnode_moduleswrtclibbinding.js:6:20)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'E:\node\hls\node_modules\wrtc\lib\binding.js',
'E:\node\hls\node_modules\wrtc\lib\index.js'
]
}
Same error on both local insatll and global install.
I checked the path, it is ok.
why my post data did not render it render array therefore my post displayed multiple times how I can resolve these errors please help me…
to figure out my error
if I can post a request from postman then it displays an array, therefore, my post is displayed multiple times, and then causes if I add a single post then it becomes a new array and render every post inside that array and makes multiple posts
please help me to figured out these problem which i am facing right now
post route…
const express = require('express');
const router = express.Router();
const multer = require('multer');
const path = require ('path');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads');
},
filename: function (req, file, cb) {
return cb(null, `${file.fieldname}_${Date.now()}${path.extname(file.originalname)}`);
}
});
const uploadImg = multer({
storage: storage,
fileFilter : (req, file, cb) => {
// reject a file
if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
cb(null, true);
} else {
console.log('only jpeg and png are accepted!!!')
cb(null, false)
}
},
limits: {
fileSize: 1024 * 1024 * 5
},
}
).single('image');
const {Posts} = require('../models/Posts');
// Get All post
router.get('/posts', (req, res, next) => {
Posts.find({}, (err, data) => {
if (!err) {
res.send(data);
} else {
console.log(err);
}
});
});
router.post('/posts/add', uploadImg, (req, res, next) => {
if (!req.file) return res.send('Please upload a file');
console.log(req.body);
const pos = new Posts({
title: req.body.title,
image: req.file.filename,
HeadingTitle: req.body.HeadingTitle,
datetime: req.body.datetime,
smallTitle: req.body.smallTitle,
MoviesContent: req.body.MoviesContent,
DownloadLinkButtonsHeading: req.body.DownloadLinkButtonsHeading,
Buttons: req.body.Buttons,
allCategories: req.body.allCategories,
});
pos.save((err, data) => {
const image = `http://localhost:5000/${req.file.filename}`
res.status(200).json({
code: 200, message: 'post Added Sucessfully',
addPosts: data,
image: image
})
})
});
// Get Single ID
router.get('/posts/:id', (req, res, next) => {
Posts.findById(req.params.id, (err, data) => {
if (!err) {
res.send(data);
} else {
console.log(err);
}
});
});
// Update post
router.put('/posts/edit/:id', (req, res, next) => {
if (!req.file) return res.send('Please upload a file');
const pos = {
post: req.body,
title: req.body.title,
image: req.file.filename,
HeadingTitle: req.body.HeadingTitle,
datetime: req.body.datetime,
smallTitle: req.body.smallTitle,
MoviesContent: req.body.MoviesContent,
DownloadLinkButtonsHeading: req.body.DownloadLinkButtonsHeading,
Buttons: req.body.Buttons,
allCategories: req.body.allCategories,
};
Posts.findByIdAndUpdate(req.params.id, { $set: pos }, { new: true }, (err, data) => {
if (!err) {
res.status(200).json({
code: 200, message: 'post Updated Successfully',
updatePosts: data
})
} else {
console.log(err);
}
});
});
// Delete post
router.delete('/posts/:id', (req, res, next) => {
Posts.findByIdAndRemove(req.params.id, (err, data) => {
if (!err) {
res.status(200).json({
code: 200, message: 'post Deleted Successfully',
deletePosts: data
});
} else {
console.log(err);
}
});
})
module.exports = routerand post from fronted for renders
import React, { useState, useEffect } from 'react'
import './Section.css'
import {
BrowserRouter as Router,
Link
} from "react-router-dom";
// import api from './components/api/post';
function Section() {
const [posts, setPosts] = useState([])
const Fetchpost = async () => {
const response = await fetch('http://localhost:5000/posts/');
setPosts(await response.json());
}
useEffect(() => {
Fetchpost();
}, []);
console.log(posts);
return (
<>
{
posts.map((post) => {
return (
// <div className="samplecontainer">
<div key={post._id} className="r1">
<>
<img src={`http://localhost:5000/${post.image}`} alt="myimg" />
<Link to={post.title}></Link>
<p className="heading">{post.title}</p>
</>
</div>
)
})
}
</>
)
}
export default Sectionand then it renders by these codes as client-side browser…
How to create an react app when click on the particular continents it show their respective country and when we click on the respective countries it shows the the respective info of that for ex(currency, continent, capital) through the enter image description here
Ok, long story short, I have a coding background but 0 html, css, JS work. I am taking an online file to build a website. I imbedded the CSS/HTML/JS into one file. It runs the HTML and CSS, but the JS does not activate. Code is below. (It creates a drop down menu) How can I make it auto run? (What I’ve googled the JS has to be “ran” and its not doing that. (yes ik its long, the part are separated like this: (This is all open source code, ik it works because I’ve tested it on sites)
//START OF REAL CODE
<html lang="en">
<head>
<style type = "text/css">
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
background: #f7f6ff;
}
h2 {
margin: 16px;
}
.container {
margin-top: 100px;
padding: 32px;
}
.select-box {
position: relative;
display: flex;
width: 400px;
flex-direction: column;
}
.select-box .options-container {
background: #2f3640;
color: #f5f6fa;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;
order: 1;
}
.selected {
background: #2f3640;
border-radius: 8px;
margin-bottom: 8px;
color: #f5f6fa;
position: relative;
order: 0;
}
.selected::after {
content: "";
background: url("img/arrow-down.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;
transition: all 0.4s;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
overflow-y: scroll;
margin-top: 54px;
}
.select-box .options-container.active + .selected::after {
transform: rotateX(180deg);
top: -6px;
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: #0d141f;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background: #525861;
border-radius: 0 8px 8px 0;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
}
.select-box .option:hover {
background: #414b57;
}
.select-box label {
cursor: pointer;
}
.select-box .option .radio {
display: none;
}
/* Searchbox */
.search-box input {
width: 100%;
padding: 12px 16px;
font-family: "Roboto", sans-serif;
font-size: 16px;
position: absolute;
border-radius: 8px 8px 0 0;
z-index: 100;
border: 8px solid #2f3640;
opacity: 0;
pointer-events: none;
transition: all 0.4s;
}
.search-box input:focus {
outline: none;
}
.select-box .options-container.active ~ .search-box input {
opacity: 1;
pointer-events: auto;
}
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>GTCoding</title>
<link rel="stylesheet" href="style.css" />
</style>
<script type = "text/javascript"
const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const searchBox = document.querySelector(".search-box input");
const optionsList = document.querySelectorAll(".option");
selected.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
searchBox.value = "";
filterList("");
if (optionsContainer.classList.contains("active")) {
searchBox.focus();
}
});
optionsList.forEach(o => {
o.addEventListener("click", () => {
selected.innerHTML = o.querySelector("label").innerHTML;
optionsContainer.classList.remove("active");
});
});
searchBox.addEventListener("keyup", function(e) {
filterList(e.target.value);
});
const filterList = searchTerm => {
searchTerm = searchTerm.toLowerCase();
optionsList.forEach(option => {
let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
if (label.indexOf(searchTerm) != -1) {
option.style.display = "block";
} else {
option.style.display = "none";
}
});
};
</script>
</head>
<body>
<div class="container">
<h2>Video Category</h2>
<div class="select-box">
<div class="options-container">
<div class="option">
<input
type="radio"
class="radio"
id="automobiles"
name="category"
/>
<label for="automobiles">Automobiles</label>
</div>
<div class="option">
<input type="radio" class="radio" id="film" name="category" />
<label for="film">Film & Animation</label>
</div>
<div class="option">
<input type="radio" class="radio" id="science" name="category" />
<label for="science">Science & Technology</label>
</div>
<div class="option">
<input type="radio" class="radio" id="art" name="category" />
<label for="art">Art</label>
</div>
<div class="option">
<input type="radio" class="radio" id="music" name="category" />
<label for="music">Music</label>
</div>
<div class="option">
<input type="radio" class="radio" id="travel" name="category" />
<label for="travel">Travel & Events</label>
</div>
<div class="option">
<input type="radio" class="radio" id="sports" name="category" />
<label for="sports">Sports</label>
</div>
<div class="option">
<input type="radio" class="radio" id="news" name="category" />
<label for="news">News & Politics</label>
</div>
<div class="option">
<input type="radio" class="radio" id="tutorials" name="category" />
<label for="tutorials">Tutorials</label>
</div>
</div>
<div class="selected">
Select Video Category
</div>
<div class="search-box">
<input type="text" placeholder="Start Typing..." />
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I’ve tried what I can find on google but not figuring it out. I know the CSS is running with the HTML, but the dropdown function doesn’t work (which I know the JS does) If I got anything wrong here don’t hesitate to LMK I’m not very good with HTML.
This is my code so far:
// Show and hide gradients
$(document).ready(function() {
$(".scroll-area").each(function(index) {
if ($(this)[0].scrollWidth <= $(this)[0].clientWidth) {
$(this).closest(".container").find(".left").css("display", "none");
$(this).closest(".container").find(".right").css("display", "none");
} else {
$(this).scroll(function() {
if ($(this)[0].scrollWidth > $(this)[0].clientWidth) {
if ($(this).scrollLeft() > 0) {
$(this).closest(".container").find(".left").css("display", "block");
}
if ($(this).scrollLeft() == 0) {
$(this).closest(".container").find(".left").css("display", "none");
}
var fullWidth = $(this)[0].scrollWidth - $(this)[0].offsetWidth - 1;
if ($(this).scrollLeft() >= fullWidth) {
$(this).closest(".container").find(".right").css("display", "none");
}
if ($(this).scrollLeft() < fullWidth) {
$(this).closest(".container").find(".right").css("display", "block");
}
}
});
}
});
});
// Scroll buttons
let interval;
$('.scroll-btn').on('mousedown', ({
target
}) => {
const type = $(target).attr('id');
interval = setInterval(() => {
var x = $('#a').scrollLeft();
$('#a').scrollLeft(type === 'left-arrow' ? x - 10 : x + 10);
}, 50);
});
$('.scroll-btn').on('mouseup', () => clearInterval(interval));* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.container {
width: 550px;
height: 80px;
background-color: grey;
position: relative;
margin-bottom: 20px;
}
.scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
.left,
.right {
width: 50px;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
}
.left {
background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
left: 0;
display: none;
}
.right {
background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
right: 0;
}
.arrow {
display: block;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 15px;
cursor: pointer;
}
.left-arrow {
left: 0;
}
.right-arrow {
right: 0;
}
.left-arrow div,
.right-arrow div {
font-size: 40px;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
<div id="x" class="left"></div>
<div class="right"></div>
<div class="arrow left-arrow">
<div class="scroll-btn" id="left-arrow">
<</div>
</div>
<div class="arrow right-arrow">
<div class="scroll-btn" id="right-arrow">></div>
</div>
<div id="a" class="scroll-area">
<div class="text">Scroll to right. The gradients and arrows should appear and disappear based on the scroll position. It should work with more than one container. Lorem ipsum.</div>
</div>
</div>The problem now is: I would like to show and hide the arrows in the same way like the gradients. So the left arrow should not be visible in the beginning, but after scrolling. And the right arrow should disappear if the full scroll amount is achieved. And then they should be visible again with scrolling back. If there is not enough text to cause a scrollable area, there should be no gradient and no arrow visible. The problem now is that the classes and ids are mixed in a weird way, and I have no idea how to connect them in a good way. The whole thing should also work with different containers.
Can somebody help me to fix that? I would be super thankful!