Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I have been using this logger in node:
// https://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color
function logC(text) {
console.log('x1b[36m%sx1b[0m', text);
}
However it does not work for multiple arguments. I want to be able to use it like:
logC(text1, text2)
Obviously, I could write out the arguments in the function signature but I was hoping there was a way to do it with the built in arguments.
I am trying to complete the FreeCodeCamp 25 + 5 clock project with React. When I website runs the project tests, it says that the timer is not reaching 00:00, even though when I click play, it clearly reaches 00:00.
I am wondering if I am having this issue because of some sort of drifting? How would I go about fixing that?
Thank you.
Codepen: https://codepen.io/Jamece/pen/jOazYvQ
I also tried a version where i use SetTimeout and implement this Stack overflow answer (setInterval timing slowly drifts away from staying accurate), but it still wouldn’t pass the test. See that codepen: https://codepen.io/Jamece/pen/mdqGomq
I also tried delaying the this.atZero function 1 second and that didn’t work
My Code:
const minTime = 1;
const maxTime = 60;
class Application extends React.Component {
constructor(props) {
super(props);
this.state = {
breakLength: .1,
sessionLength: .1,
started: false,
mode: "Session",
intervalId: "",
timeLeft: .1
};
this.breakIncrement = this.breakIncrement.bind(this);
this.breakDecrement = this.breakDecrement.bind(this);
this.sessionIncrement = this.sessionIncrement.bind(this);
this.sessionDecrement = this.sessionDecrement.bind(this);
this.sessionTimer = this.sessionTimer.bind(this);
this.breakTimer = this.breakTimer.bind(this);
this.pause = this.pause.bind(this);
this.timers = this.timers.bind(this);
this.initialDisplay = this.initialDisplay.bind(this);
this.switchMode = this.switchMode.bind(this);
this.begin = this.begin.bind(this);
this.reset = this.reset.bind(this);
this.atZero = this.atZero.bind(this);
}
initialDisplay() {
let initialDisplay =
this.state.sessionLength < 10
? "0" + this.state.sessionLength + ":" + "00"
: this.state.sessionLength + ":" + "00";
return initialDisplay;
}
begin() {
this.setState({ started: !this.state.started });
if (this.state.started) {
this.pause();
} else {
if (this.state.mode == "Session") {
this.sessionTimer();
} else {
this.breakTimer();
}
}
}
atZero(){
var audio = document.getElementById("beep");
clearInterval(this.state.intervalId);
this.switchMode();
audio.play();
}
switchMode() {
if (this.state.mode == "Session") {
this.setState({
mode: "Break",
timeLeft: this.state.breakLength
});
this.breakTimer();
} else if (this.state.mode == "Break") {
this.setState({
mode: "Session",
timeLeft: this.state.sessionLength
});
this.sessionTimer();
}
}
breakIncrement() {
if (!this.state.started) {
if (this.state.breakLength !== maxTime) {
this.setState((state) => ({
breakLength: state.breakLength + 1
}));
}
}
}
breakDecrement() {
if (!this.state.started) {
if (this.state.breakLength !== minTime) {
this.setState((state) => ({
breakLength: state.breakLength - 1
}));
}
}
}
sessionIncrement() {
if (!this.state.started) {
if (this.state.sessionLength !== maxTime) {
this.setState((state) => ({
sessionLength: state.sessionLength + 1
}));
}
}
}
sessionDecrement() {
if (!this.state.started) {
if (this.state.sessionLength !== minTime) {
this.setState((state) => ({
sessionLength: state.sessionLength - 1
}));
}
}
}
timers(length, display, paused) {
var start = Date.now();
const timer = () => {
const distance = (length) - (((Date.now() - start) / 1000) | 0);
var minutes = (distance / 60) | 0;
var seconds = distance % 60 | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
this.setState({ timeLeft: distance / 60 });
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
};
if (distance < 0) {
this.atZero();
}
};
timer();
var intervalId = setInterval(timer,1000);
this.setState({
intervalId: intervalId
});
}
sessionTimer() {
var length = this.state.timeLeft * 60;
var display = document.getElementById("time-left");
this.timers(length, display);
this.setState({ started: true });
}
breakTimer() {
var length = this.state.timeLeft * 60;
var display = document.getElementById("time-left");
this.timers(length, display);
this.setState({ started: true });
}
pause() {
if (this.state.intervalId) {
clearInterval(this.state.intervalId);
}
this.setState({ started: !this.state.started });
}
reset() {
clearInterval(this.state.intervalId);
this.setState({
breakLength: 5,
sessionLength: 25,
started: false,
mode: "Session",
intervalId: "",
timeLeft: 25
});
let resetValue = this.initialDisplay();
let resetDisplay = document.getElementById("time-left");
resetDisplay.textContent = resetValue;
var audio = document.getElementById("beep");
audio.pause();
audio.currentTime = 0;
}
render() {
let pausePlayStyle = this.state.started
? "fa-solid fa-pause"
: "fa-solid fa-play";
return (
<div className="container-fluid px-0">
<div className="main d-flex justify-content-center align-items-center">
<div className="d-flex flex-column align-items-center">
<div className="heading">25 + 5 Clock</div>
<div className="d-flex">
<div className="d-flex flex-column break align-items-center">
<div id="break-label" className="mb-3 h3">
Break Length
</div>
<div className="d-flex flex-row">
<button
className="btn btn-top"
id="break-increment"
onClick={this.breakIncrement}
>
<i class="fa-solid fa-arrow-up"></i>
</button>
<div className="mx-3 h3" id="break-length">
{this.state.breakLength}
</div>
<button
className="btn btn-top"
id="break-decrement"
onClick={this.breakDecrement}
>
<i class="fa-solid fa-arrow-down"></i>
</button>
</div>
</div>
<div className="d-flex flex-column align-items-center session">
<div id="session-label" className="mb-3 h3">
Session Length
</div>
<div className="d-flex flex-row">
<button
className="btn btn-top"
id="session-increment"
onClick={this.sessionIncrement}
>
<i class="fa-solid fa-arrow-up"></i>
</button>
<div className="h3 mx-3" id="session-length">
{this.state.sessionLength}
</div>
<button
className="btn btn-top"
id="session-decrement"
onClick={this.sessionDecrement}
>
<i class="fa-solid fa-arrow-down"></i>
</button>
</div>
</div>
</div>
<div className="d-flex flex-column align-items-center timer-border">
<div className="h2 mb-3 session" id="timer-label">
{this.state.mode}
</div>
<div className="display-1 timer mb-4" id="time-left">
{this.initialDisplay()}
</div>
<div className="d-flex flex-row">
<button
className="btn btn-bottom"
id="start_stop"
onClick={this.begin}
>
<i className={pausePlayStyle}></i>
</button>
<button
className="btn btn-bottom"
id="reset"
onClick={this.reset}
>
<i className="fa-solid fa-rotate"></i>
</button>
</div>
</div>
</div>
</div>
<audio
id="beep"
preload ="auto"
src="https://docs.google.com/uc?export=download&id=12NsFWtJh3pBCqQ8gV62EZF3OevgAy8ff"
/>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById("root"));
This is my code
<!-- Script to submit the form - execute hCaptcha -->
<script>
function onSubmit(token) {
document.getElementById('digForm').submit();
}
function validate(event) {
event.preventDefault();
document.getElementById("digBut").innerHTML="Please solve the captcha.";
document.getElementById("digBut").disabled = true;
hcaptcha.execute();
}
function onload() {
var element = document.getElementById('digBut');
element.onclick = validate;
}
</script>
enter code here
<!-- Button -->
<button class="btn btn-success h-captcha" id="digBut" data-sitekey="ExampleKey123" data-callback="onSubmit">Ready!</button>
When clicking the button the captcha appears successfully, but the innerHtml of the button and the disabled does not change, and when the captcha is solved the form is not submitted
I am trying to install puppeteer in the VSC terminal, but whenever i run the install in npm, it does not download and says something needs funding. Help!!
npm i puppeteer
up to date, audited 67 packages in 5s
8 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
I have this code below where I’m loading google maps API and I want to issue a callback when loaded to instantiate some other stuff in another component.
How can I call a component from this initMap()?
I tried adding this code below in my app.component.ts file in the ngOnInit method but it wasn’t called.
window[‘initMap’] = function() {…}
This code below is my index.html file for an Angular application.
// index.html
<script>
function initMap() {
// call component here
console.log('test');
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=my-secret-key&libraries=places&callback=initMap" type="text/javascript"></script>How do I assign class="active" to a link element when another link is clicked?
i.e I have:
<a href="hello.php"></a>
<a href="world.php"></a>
But when the second link is clicked, I want to have:
<div id="bing">
<a href="hello.php" class="active"></a>
</div>
<a href="world.php"></a>
Basically I was thinking something like:
var foo = $(this).attr("href");
if ($(this).attr("href") == "hello.php")
//insert code to assign that link the class="active"
Hi I am new to ajax and I have a json response from django with a list of names to be displayed as a list of buttons. I want to disable the button once it is clicked.
Below is the html code I currently write, the button display successfully but it does not do the disable button action.
I would also like to ask what is the scope of this onclick function? Does the function dies at the end of the curly bracket }? Or does this function check even it is out of scope?
<h3>User List:</h3>
<ul id="userLists"> </ul>
$(document).ready(function(){
$.ajax({
type:"GET",
// getUserList is a django views where it query the database and returns JsonResponse of the user's name
url: "{% url 'getUserList' %}",
success: function(response){
$("#userLists").empty();
// Create a list according to number of users in json
for (var key in response.users){
var temp="<button type="button", name=""+ response.users[key].user +"", class=""btn btn-outline-danger">" + response.users[key].user + "</button>";
$("#userLists").append(temp);
// Here I want to do when clicked, it disables the button and leave others as is.
// Current implementation does not work...
document.getElementsByName(response.users[key].user).onclick =
function(){document.getElementsByName(response.users[key].user).prop('disabled', true)};
};
}
});
})
Thanks all.
I am uploading some files to my MongoDB database but currently my upload.js middlware fileInfo object only accepts a single static bucket string since I cannot dynamically change the bucketName string. How can I pass the upload.js middeware any string I want for the bucketName?
ACTION:
export const uploadPhoto = (img) => (dispatch) => {
const formData = new FormData();
formData.append("file", img);
const bucketName = "photos"; //HOW DO USE THIS BUCKET NAME IN THE upload.js Middlware?
axios
.post("/video/upload", formData)
.then((res) => {})
.catch((err) => {
console.log(err);
});
};ROUTES:
const router = require("express").Router();
var mongoose = require("mongoose");
var Schema = mongoose.Schema;
var ObjectId = require("mongodb").ObjectId;
const { authUser } = require("../middleware/auth");
const uploadMulter = require("../middleware/upload");
//HOW DO I PASS DATA TO THE uploadMulter Middleware?
router.post("/upload", authUser, uploadMulter, (req, res) => {
console.log(req.file);
});Upload Middleware:
const path = require("path");
var mongoose = require("mongoose");
const crypto = require("crypto");
const multer = require("multer");
const { GridFsStorage } = require("multer-gridfs-storage");
const db = require("../config/.env").mongoURI;
const storage = new GridFsStorage({
url: db,
file: (req, file) => {
return new Promise((resolve, reject) => {
crypto.randomBytes(16, (err, buf) => {
if (err) {
return reject(err);
}
const filename = buf.toString("hex") + path.extname(file.originalname);
const fileInfo = {
filename: filename,
bucketName: "HOW DO I CHANGE THE BUCKETNAME?", //<--?
metadata: {
author: req.user._id,
},
};
resolve(fileInfo);
});
});
},
});
const upload = multer({ storage });
module.exports = upload.single("file");I’ve been trying to use an API to get JSON data, but it requires you to add a token using an Authorization header.
I tried looking directly at the docs: https://nodejs.org/en/knowledge/HTTP/clients/how-to-create-a-HTTP-request/, but I followed it directly and it didn’t work.
Here is my current code:
const http = require('http')
require('dotenv').config()
const token = process.env.ROBOTEVENTS_TOKEN
const host = 'www.robotevents.com', path = '/api/v2/events?sku%5B%5D=RE-VRC-21-5414&myEvents=false'
var options = {
host: host,
path: path,
headers: {
Authorization: `Bearer: ${token}`,
accept: 'application/json'
}
};
callback = function(response) {
var str = ''
response.on('data', function (chunk) {
str += chunk;
console.log('chunk')
});
response.on('end', function () {
console.log(str);
});
}
var req = http.request(options, callback);
req.end();
In Javascript, how would I get the index of the key when using:
Object.keys(gp[0].data.gb[0][0]).forEach(key=>{
};
I know I could use a variable and increment it each time but wondered if there is a way the index of the key could be returned.
So if I had:
gp[0].data.gb[0][0].raceCar = "BMW";
gp[0].data.gb[0][0].color = "blue";
gp[0].data.gb[0][0].reg = "W1 8QT";
how can I return the index of the key raceCar/color or reg?
Thanks.
HTML:
<h1 id="ws-title"></h1>
<time datetime="" id="ws-date"></time>
JS:
inp1 = document.querySelector("input[name='ws-date']");
out1 = document.querySelector("#ws-date");
inp1.addEventListener("input", e => {
out1.textContent=e.target.value;
});
inp2 = document.querySelector("input[name='ws-title']");
out2 = document.querySelector("#ws-title");
inp2.addEventListener("input", e => {
out2.textContent=e.target.value;
});
Works as expected (i.e: changing input changes corresponsing h2).
However:
function pairListen(name) {
inp = document.querySelector(`input[name='${name}']`);
out = document.querySelector(`#${name}`);
inp.addEventListener("input", e => {
out.textContent=e.target.value;
});
}
pairListen("ws-title");
pairListen("ws-date");
Causes <h2 id="ws-date"> to be changed when <input name="ws-title"> is changed and vice versa.
Why is that? All difference is that repeated code is embedded in a function.
my overall code is correct, it compiled successfully but , during running time at first its shown the result , but after an a second or so it started showing blank screen, what are the possible solutions
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushPassiveEffectsImpl @ react-dom.development.js:23620
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
chart.esm.js:4892 Uncaught Error: "category" is not a registered scale.
at Registry._get (chart.esm.js:4892:1)
at Registry.getScale (chart.esm.js:4847:1)
at chart.esm.js:5518:1
at each (helpers.segment.js:105:1)
at Chart.buildOrUpdateScales (chart.esm.js:5505:1)
at Chart._updateScales (chart.esm.js:5652:1)
at Chart.update (chart.esm.js:5613:1)
at new Chart (chart.esm.js:5402:1)
at renderChart (chart.tsx:41:1)
at chart.tsx:90:1
_get @ chart.esm.js:4892
getScale @ chart.esm.js:4847
(anonymous) @ chart.esm.js:5518
each @ helpers.segment.js:105
buildOrUpdateScales @ chart.esm.js:5505
_updateScales @ chart.esm.js:5652
update @ chart.esm.js:5613
Chart @ chart.esm.js:5402
renderChart @ chart.tsx:41
(anonymous) @ chart.tsx:90
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
react-dom.development.js:67 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at App (http://localhost:3000/static/js/bundle.js:52:85)
this is the error message which is getting recurred .
r
I am working on this project https://www.youtube.com/watch?v=VuN8qwZoego to make a drum kit using Vanilla JS.
Everything has worked thus far, except the last step of removing a transition using an eventListener. In the tutorial the javascript code is within script tags in the HTML file, but I wanted to practice using an externally linked .js file. I think this is causing an issue with the last function to remove the transition, but I can’t pinpoint why it doesn’t work. HTML/CSS and JS below:
<pre><code>
<!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.0">
<title>Drum Kit</title>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
</head>
<body>
<div class = "keys">
<div data-key = "65" class = "key">
<kbd>A</kbd>
<span class = "sound">clap</span>
</div>
<div data-key = "83" class = "key">
<kbd>S</kbd>
<span class = "sound">hihat</span>
</div>
<div data-key = "68" class = "key">
<kbd>D</kbd>
<span class = "sound">kick</span>
</div>
<div data-key = "70" class = "key">
<kbd>F</kbd>
<span class = "sound">openhat</span>
</div>
<div data-key = "71" class = "key">
<kbd>G</kbd>
<span class = "sound">boom</span>
</div>
<div data-key = "72" class = "key">
<kbd>H</kbd>
<span class = "sound">ride</span>
</div>
<div data-key = "74" class = "key">
<kbd>J</kbd>
<span class = "sound">snare</span>
</div>
<div data-key = "75" class = "key">
<kbd>K</kbd>
<span class = "sound">tom</span>
</div>
<div data-key = "76" class = "key">
<kbd>L</kbd>
<span class = "sound">tink</span>
</div>
</div>
<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>
</body>
</html>
</pre></code>
<pre><code>
window.addEventListener('keydown', function(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if(!audio) return; // stops the function completely
audio.currentTime = 0;
audio.play();
key.classList.add('playing');
});
document.addEventListener('DOMContentLoaded', function(){
function removeTransition(e) {
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
}})
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
</pre></code>
<pre>
html {
font-size: 10px;
background: url('./background.jpg') bottom center;
background-size: cover;
}
body,html {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.keys {
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
justify-content: center;
}
.key {
border: .4rem solid black;
border-radius: .5rem;
margin: 1rem;
font-size: 1.5rem;
padding: 1rem .5rem;
transition: all .07s ease;
width: 10rem;
text-align: center;
color: white;
background: rgba(0,0,0,0.4);
text-shadow: 0 0 .5rem black;
}
.playing {
transform: scale(1.1);
border-color: #ffc600;
box-shadow: 0 0 1rem #ffc600;
}
kbd {
display: block;
font-size: 4rem;
}
.sound {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: .1rem;
color: #ffc600;
}
So I have this selection FlatList where the user can select a country. When I press on a item it’s going to take a second and after the second it is displaying the checkmark.
The Problem is the second. The user cannot wait a second to see that the country was selected.
<FlatList
keyExtractor={item => item.countryid}
data={countryChoices}
renderItem={({item}) => {
return(
<CountryComponent
item={item}
conditionToCheck={country == item.countryname}
onPress={() => setCountry(item.countryname)}
/>
)
}}
/>
This is my Flatlist. countryChoices is just an array with different objects for the countries. the conditionToCheck checks wether to show or to hide the checkmark. If the selected Country is equal to the item then it’s going to show the checkmark.
But after clicking on it it’s taking too long :/
I also tried wrapping the FlatList Item in a useCallback but it wasn’t (much) faster
I’m trying to make a Graphic EQ using web audio and the goal is build a function that
calculates an array of fixed center frequency’s using a band count (a.k.a number) as input.
In other words it generates an array for fixed center frequencies.
example:
function calcBands(bands) {
// Since there are different graphic EQ's they usually around 6 - 31 bands
// but professionally it's normally 31 bands
// band parameter needs to be a number between 6 and 31
//insert code here:
const freqs = new Array(bands);
return freqs;
}
function buildFilters(bands) {
let centers = calcBands(bands);
let filters = [];
for (let i = 0; i < bands; i++) {
let filter = context.createBiquadFilter();
filter.type = "peaking";
filter.frequency.value = centers[i];
filter.Q.value = Math.SQRT1_2;
if (i > 0) {
filters[i - 1].connect(filter);
}
filters.push(filter);
}
return filters;
}
The thing is I tried doing some research and I found out that there are ISO standards and other things, but I just can’t do the maths of it.
All I can understand from this is that:
Can anyone please help me?
Feel free to correct me if I’m wrong
references:
https://www.cross-spectrum.com/audio/articles/center_frequencies.html
https://sound.stackexchange.com/questions/14101/what-is-the-frequency-step-formula-for-10-and-31-band-eqs
http://www.tonmeister.ca/main/textbook/intro_to_sound_recordingch13.html