Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
i have few numbers.
i want to format those number with comma(,)separator if number>999
But if number less than 999 it returns only number
99-->99
i want to get like below right side number.
9999.19-->9,999.19
899920.14--->8,99,920.14
2166593.35--->2,16,513.35
how can get these comma separator value if value greater than 999?
I am building an application that should alert a user by push notification when it’s time to pray. I am setting custom time by getting the current date and setting hours and minutes by (.setHours) and vise versa. my date format is correct but still it is not giving me any notification.
kindly help me with this.
I am trying to implement speech to text and it is working on most of the devices except the Oneplus (Android 11).
from this URL – https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition
if (window.hasOwnProperty('webkitSpeechRecognition')) {
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.lang = "en-US";
recognition.start();
recognition.onstart = function(e) {
recognizing = true;
startImgThree.src = './images/mic-animate.gif';
};
recognition.onresult = function (e) {
document.getElementById('transcriptthree').value = e.results[0][0].transcript;
recognition.stop();
document.getElementById('labnol').submit();
};
recognition.onerror = function (e) {
recognition.stop();
};
recognition.onend = function(e) {
recognizing = false;
startImgThree.src = './images/mic-inactive.png';
}
}
where is the mistake please help me with that
I want to scale in component and shape javascript but it’s not working with following svg .. can you guide me how to solve this issue???
<g text-anchor="middle" font-family="sans-serif" font-size="14" stroke="#000000" fill="#FFFFFF" type="svg-ext-proceng-pumpjet" id="SHE_6769b48c-0bde4e24">
<path d="M342,232A20,20 0 0 1 322,252A20,20 0 0 1 302,232A20,20 0 0 1 322,212A20,20 0 0 1 342,232" id="SHE_80a3b7ab-a1794e09"></path>
<path d="M302,232L322,212L342,232M310.8,223.2C316.87,230.58 316.87,241.22 310.8,248.6M333.2,223.2C327.13,230.58 327.13,241.22 333.2,248.6" id="SHE_41f771e5-37da4534"></path>
</g>
I have a component file and it works recursively by array data. I am calling this component home.vue. For example:
<div>
<mycomponent :data=mydata />
</div>
and if mydata nested array mycomponent call itself again and again. I need to implement these steps on home.vue, I dont want to create another file for mycomponent. But How can I call againg component template again? for example:
home.vue:
<template id = "c1">
<div v-for:"">
data
</div>
// if a condition is true then call "id" template again.
</template>
I’m writing a small TypeScript library to be used by multiple sub-systems.
In a different project I linked to the library using npm, but WebStorm only displays the TSDoc for methods, not for classes.
package.json:
{
"name": "shared-utilities",
"version": "1.0.0",
"description": "A package description...",
"main": "src/index.ts",
"license": "ISC",
"scripts": {
"prepare": "npm run build",
"build": "tsc"
},
"devDependencies": {
"typescript": "^4.5.4"
},
"files": [
"./dist"
]
}
tsconfig:
{
"compilerOptions": {
"module": "commonjs",
"target": "es2015",
"declaration": true,
"outDir": "./dist"
},
"include": [
"src/**/*"
]
}
The TSDoc of a class is not displayed:
While the TsDoc of a method is displayed:
Additionally, WebStorm doesn’t import classes automatically when using them, like it does with other libraries. I would have to import it manually.
Any ideas on what I might be doing wrong?
what will be the query to get min and max at once I am getting errors in this query
router.get('/min/:date', (req, res) => {
const date = req.params.date;
console.log(typeof date);
connection.query(
`select max(temperature) as highesttemperature; select min(temperature) as lowesttemperature from weather_data where dt=?`,
[date],
(err, results, field) => {
if (err) {
console.log(err);
} else {
res.status(200).send(results);
console.log(results);
}
}
);
});
Hello I have made this To-Do project
And I want to create a button that when you click it, it will print ONLY the todos as shown below (shopping, homework, pay the bills).
So i want to print something like this in the paper:
I have searched it up and I have seen ways that only print the ID of the div. However, in my code I dont use ids. In the javascript and html file of this project, I only use class names. I have tried adding id names too in the divs and then use the js code to print, but it doesnt work because my project only works with classes on the divs.
I am a begginer in javascript, sorry if I dont make this clear enough.
Can someone provide me with a working method?
I have 2 choices in front of me one is a Full-stack developer course and the other is a data analytics course. I’m not able to pick up which is the best option to switch my career with.
How I can disable CSS hover using javascript, I have a CSS hover like this:
.bgImg:hover {
border: 7px solid red;
height: 138px !important;
}
But I want to disable this hover after 2 seconds using javascript/jquery.
Thanks
hello i am new to coding , this is a google sheet app script problem that i have, so, i have 2 sheet and i want to sort in order both of them, sort different column , ive succeded in making the code work for both of them but my issue is that it will only work for 1 of them, seem like the function im creating only work for the 1st function ive enter, the second below dont work, but will work individualy, what im trying to do is to create 1 function that work for both of my sheet, anyone know ?
SHEET_NAME = "The Convenant { Member Roster )";
SORT_DATA_RANGE = "B5:J1187";
SORT_ORDER = [
{column: 5, ascending: true}, // 5 = column number, sorting by descending order
{column: 4, ascending: true}, // 1 = column number, sort by ascending order
];
function onEdit(e){
multiSortColumns();
}
function multiSortColumns(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName(SHEET_NAME);
var range = sheet.getRange(SORT_DATA_RANGE);
range.sort(SORT_ORDER);
ss.toast('Sort complete.');
}
SHEET_NAME = "The Convenant ( War Roster )";
SORT_DATA_RANGE = "B5:I1086";
SORT_ORDER = [
{column: 3, ascending: true}, // 3 = column number, sorting by descending order
{column: 2, ascending: true}, // 1 = column number, sort by ascending order
];
function onEdit(e){
multiSortColumns();
}
function multiSortColumns(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName(SHEET_NAME);
var range = sheet.getRange(SORT_DATA_RANGE);
range.sort(SORT_ORDER);
ss.toast('Sort complete.');
}
I need to change this image slider class component to functional component
import * as React from "react";
import { StyleSheet, View, ScrollView, Dimensions, Image } from "react-native";
const DEVICE_WIDTH = Dimensions.get("window").width;
class BackgroundCarousel extends React.Component {
scrollRef = React.createRef();
constructor(props) {
super(props);
this.state = {
selectedIndex: 0
};
this.scrollRef = React.createRef();
}
componentDidMount = () => {
setInterval(() => {
this.setState(
prev => ({
selectedIndex:
prev.selectedIndex === this.props.images.length - 1
? 0
: prev.selectedIndex + 1
}),
() => {
this.scrollRef.current.scrollTo({
animated: true,
x: DEVICE_WIDTH * this.state.selectedIndex,
y: 0
});
}
);
}, 3000);
};
setSelectedIndex = event => {
const contentOffset = event.nativeEvent.contentOffset;
const viewSize = event.nativeEvent.layoutMeasurement;
// Divide the horizontal offset by the width of the view to see which page is visible
const selectedIndex = Math.floor(contentOffset.x / viewSize.width);
this.setState({ selectedIndex });
};
render() {
const { images } = this.props;
const { selectedIndex } = this.state;
return (
<View style={{ height: "100%", width: "100%" }}>
<ScrollView
horizontal
pagingEnabled
onMomentumScrollEnd={this.setSelectedIndex}
ref={this.scrollRef}
>
{images.map(image => (
<Image
style={styles.backgroundImage}
source={{ uri: image }}
key={image}
/>
))}
</ScrollView>
<View style={styles.circleDiv}>
{images.map((image, i) => (
<View
style={[
styles.whiteCircle,
{ opacity: i === selectedIndex ? 0.5 : 1 }
]}
key={image}
active={i === selectedIndex}
/>
))}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
backgroundImage: {
height: "100%",
width: Dimensions.get("window").width
},
circleDiv: {
position: "absolute",
bottom: 15,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: 10
},
whiteCircle: {
width: 6,
height: 6,
borderRadius: 3,
margin: 5,
backgroundColor: "#fff"
}
});
export { BackgroundCarousel };
When I change this, I have error.
import React ,{useState,useEffect} from 'react'
import { StyleSheet, View, ScrollView, Dimensions, Image } from "react-native";
const DEVICE_WIDTH = Dimensions.get("window").width;
const BackgroundCarousel =({ images })=>{
// const isCarousel = React.useRef(null)
const scrollRef = React.useRef();
const[selectedIndex,setSelectedIndex]=useState(0);
// useEffect(()=>{
// setInterval(() => {
// this.setState(
// prev => ({
// selectedIndex:
// prev.selectedIndex === this.props.images.length - 1
// ? 0
// : prev.selectedIndex + 1
// }),
// () => {
// this.scrollRef.current.scrollTo({
// animated: true,
// x: DEVICE_WIDTH * this.state.selectedIndex,
// y: 0
// });
// }
// );
// }, 3000);
// })
// componentDidMount = () => {
// setInterval(() => {
// this.setState(
// prev => ({
// selectedIndex:
// prev.selectedIndex === this.props.images.length - 1
// ? 0
// : prev.selectedIndex + 1
// }),
// () => {
// this.scrollRef.current.scrollTo({
// animated: true,
// x: DEVICE_WIDTH * this.state.selectedIndex,
// y: 0
// });
// }
// );
// }, 3000);
// };
useEffect(()=>{
setSelectedIndex = event => {
const contentOffset = event.nativeEvent.contentOffset;
const viewSize = event.nativeEvent.layoutMeasurement;
// Divide the horizontal offset by the width of the view to see which page is visible
const selectedIndex = Math.floor(contentOffset.x / viewSize.width);
this.setState({ selectedIndex });
};
})
return (
<View style={{ height: "100%", width: "100%" }}>
<ScrollView
horizontal
pagingEnabled
onMomentumScrollEnd={selectedIndex}
ref={scrollRef}
>
{images.map(image => (
<Image
style={styles.backgroundImage}
source={{ uri: image }}
key={image}
/>
))}
</ScrollView>
<View style={styles.circleDiv}>
{images.map((image, i) => (
<View
style={[
styles.whiteCircle,
{ opacity: i === selectedIndex ? 0.5 : 1 }
]}
key={image}
active={i === selectedIndex}
/>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
backgroundImage: {
height: "100%",
width: Dimensions.get("window").width
},
circleDiv: {
position: "absolute",
bottom: 15,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: 10
},
whiteCircle: {
width: 6,
height: 6,
borderRadius: 3,
margin: 5,
backgroundColor: "#fff"
}
});
export { BackgroundCarousel };
here is homescreen
import { BackgroundCarousel } from "../components/BackgroundCarousel";
<BackgroundCarousel images={[{uri : card.photo},{uri : card.photoo},{uri : card.photooo}]}/>
how can change to functional component and how can add press function to move image slider instead of auto slide by interval.
when press right corner , move to right and when press left corner ,move left.
please help me.
Currently, I’m using react-slick to implement it.
I want to access the slider dom with useref (ref.cuurent), but the moment the modal opens, it becomes null.
You can access it by sliding it.
I think it’s probably because I’m accessing it within a modal.
How do I get a ref.cuurent the moment the modal opens?
export const index: React.FC = () => {
const [isShowHowToModal, setIsHowToModal] = useState(true)
return (
<Box>
<div>hello</div>
{isShowHowToModal && <Modal setIsHowToModal={setIsHowToModal} />}
</Box>
)
}
import Slider from 'react-slick'
export const Modal = React.FC<Props>(setIsModal) => {
const onClickCancel = () => {
setIsModal(false)
}
const refs = useRef<Slider>(null)
console.log(refs)
const settings = {
dots: false,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
}
return (
<Slider ref={refs} {...settings}>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</Slider>
}
It would be helpful if you could answer with the function component.
I am currently making a calendar and would really appreciate some help as I am currently learning javascript by myself.
Whenever the month button is clicked, a new output is created and ‘stacked’ underneath the original entry. Is there a way to get the new month to replace the old one?
I have found problems online with button replacements but not code that includes multiple buttons / outputs.
Thanks for your help!! This is driving me crazy!!
<!DOCTYPE html> <!-- states the doctype -->
<html>
<head> <!-- heading -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
</head>
<h1>
Calendar
</h1>
<div id="info" class="btn-group" style="width:100%;">
<button onclick="daysinmonth(0, 2021)" style="width:20%;">January</button>
<button onclick="daysinmonth(1, 2021)" style="width:20%;">Febuary</button>
<button onclick="daysinmonth(2, 2021)" style="width:20%">March</button>
<button onclick="daysinmonth(3, 2021)" style="width:20%">April</button>
<button onclick="daysinmonth(4, 2021)" style="width:20%">May</button>
<button onclick="daysinmonth(5, 2021)" style="width:20%">June</button>
<button onclick="daysinmonth(6, 2021)" style="width:20%">July</button>
<button onclick="daysinmonth(7, 2021)" style="width:20%">August</button>
<button onclick="daysinmonth(8, 2021)" style="width:20%">September</button>
<button onclick="daysinmonth(9, 2021)" style="width:20%">October</button>
<button onclick="daysinmonth(10, 2021)" style="width:20%">November</button>
<button onclick="daysinmonth(11, 2021)" style="width:20%; margin-bottom:40px;">December</button>
</div>
<script>
function daysinmonth(month, year) {
//clearit();
var dt = new Date();
dt.setMonth(month+1);
dt.setFullYear(year);
dt.setMonth(dt.getMonth(), 0);
var lastday = dt.getDate();
daystomonth(lastday, month, year)
}
function daystomonth(lastday, month, year) {
dayslist = []
const d = new Date(year, month, 1);
var firstday = d.getDay();
for (i = 1; i < lastday+1; i++) {
dayslist[i-1] =+ i;
}
calender(firstday, dayslist, lastday)
}
function calender(firstday, dayslist, lastday) {
const body = document.body,
tbl = document.createElement('table');
tbl.style.border = '1px solid black';
tbl.style.boxSizing = 'border-box';
var daysnames = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY", "SUNDAY"];
var weekcount = 10; var count = 0;
var daycount = firstday - 1;
if (daycount == -1) { //Monday = 1
daycount = 6;
}
for (let i = 0; i < weekcount; i++) {
const tr = tbl.insertRow();
if (i == 0) {
for (let j = 0; j < 7; j++) {
const td = tr.insertCell();
td.appendChild(document.createTextNode(`${daysnames[j]}`));
}
}
if (i == 1) {
const tr = tbl.insertRow();
for (let j = 0; j < 7; j++) {
if (daycount <= j) {
const td = tr.insertCell();
td.appendChild(document.createTextNode(`${dayslist[count]}`));
count = count + 1;
} else {
const td = tr.insertCell();
td.appendChild(document.createTextNode(` `));
}
}
}
if ( i > 1) {
for (let j = 0; j < 7; j++) {
if (count >= lastday) {
const td = tr.insertCell();
td.appendChild(document.createTextNode(` `));
count = count + 1;
}
else {
const td = tr.insertCell();
td.appendChild(document.createTextNode(`${dayslist[count]}`));
count = count + 1;
}
}
}
if (count >= lastday) {
weekcount = i + 1;
}
}
body.appendChild(tbl);
}
</script>
I am making a standard slider which has two buttons to go through the images. However I want to make it modular. So that the end user can add 200 images if they like. I use Jquery to hide and show the images. But I don’t want to write 200 if statement, so I used a switch and wanted to loop through that switch which changes the cases active slide to display and hide the other element and stops if the amount of items has been reached.
But I have been having some issues, is there someone more experienced than me that can help
$('.slider-wrap').each( function() {
let itemsAmount = $('.slider-img', $(this)).length;
console.log(itemsAmount);
});
let currentPic = 0;
$('.sliderbuttonPlus').on('click', () => {
currentPic++;
let itemsAmount = $('.slider-img', $('.slider-wrap')).length;
switch(currentPic) {
case 0:
$('.slider-img').css('display', 'none');
$('#slider-block-image-0').css('display', 'block');
break;
case 1:
$('.slider-img').css('display', 'none');
$('#slider-block-image-1').css('display', 'block');
break;
case 2:
$('.slider-img').css('display', 'none');
$('#slider-block-image-2').css('display', 'block');
break;
case 3:
$('.slider-img').css('display', 'none');
$('#slider-block-image-3').css('display', 'block');
break;
case 4:
$('.slider-img').css('display', 'none');
$('#slider-block-image-4').css('display', 'block');
break;
case 5:
$('.slider-img').css('display', 'none');
$('#slider-block-image-5').css('display', 'block');
break;
case 6:
$('.slider-img').css('display', 'none');
$('#slider-block-image-6').css('display', 'block');
break;
case 7:
$('.slider-img').css('display', 'none');
$('#slider-block-image-7').css('display', 'block');
break;
case 8:
$('.slider-img').css('display', 'none');
$('#slider-block-image-8').css('display', 'block');
break;
case 9:
$('.slider-img').css('display', 'none');
$('#slider-block-image-9').css('display', 'block');
break;
}
if(currentPic > itemsAmount) {
currentPic = itemsAmount;
};
console.log(currentPic);
});
$('.sliderbuttonMinus').on('click', () => {
currentPic--;
switch(currentPic) {
case 0:
$('.slider-img').css('display', 'none');
$('#slider-block-image-0').css('display', 'block');
break;
case 1:
$('.slider-img').css('display', 'none');
$('#slider-block-image-1').css('display', 'block');
break;
case 2:
$('.slider-img').css('display', 'none');
$('#slider-block-image-2').css('display', 'block');
break;
case 3:
$('.slider-img').css('display', 'none');
$('#slider-block-image-3').css('display', 'block');
break;
case 4:
$('.slider-img').css('display', 'none');
$('#slider-block-image-4').css('display', 'block');
break;
case 5:
$('.slider-img').css('display', 'none');
$('#slider-block-image-5').css('display', 'block');
break;
case 6:
$('.slider-img').css('display', 'none');
$('#slider-block-image-6').css('display', 'block');
break;
case 7:
$('.slider-img').css('display', 'none');
$('#slider-block-image-7').css('display', 'block');
break;
case 8:
$('.slider-img').css('display', 'none');
$('#slider-block-image-8').css('display', 'block');
break;
case 9:
$('.slider-img').css('display', 'none');
$('#slider-block-image-9').css('display', 'block');
break;
}
if (currentPic <= 0){
currentPic = 0;
};
console.log(currentPic);
});
if (currentPic === 0) {
$('.slider-img').css('display', 'none');
$('#slider-block-image-0').css('display', 'block');
}
console.log(currentPic);
});
HTML displayed on the site
<div class="slider-wrap">
<div class="button-wrap">
<button class="sliderbuttonMinus">Links</button>
</div>
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/warhammer-1.jpg" alt="" id="slider-block-image-0" style="display: block;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/xcom-1.jpg" alt="" id="slider-block-image-1" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Skyrim-1.jpg" alt="" id="slider-block-image-2" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Skylines-1.jpg" alt="" id="slider-block-image-3" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Sea-of-thieves-1.jpg" alt="" id="slider-block-image-4" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Mario-1.jpg" alt="" id="slider-block-image-5" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Minecraft-1.jpg" alt="" id="slider-block-image-6" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Overwatch-1.jpg" alt="" id="slider-block-image-7" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Half-life-1.jpg" alt="" id="slider-block-image-8" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/hearthstone-1.jpg" alt="" id="slider-block-image-9" style="display: none;">
<div class="button-wrap">
<button class="sliderbuttonPlus">Rechts</button>
</div>
</div>
PHP
<div class="slider-wrap">
<div class="button-wrap">
<button class="sliderbuttonMinus">Links</button>
</div>
<?php
// Check rows exists.
if( have_rows('afbeeldingen_slider') ):
$x = 0;
// Loop through rows.
while( have_rows('afbeeldingen_slider') ) : the_row();
// Load sub field value.
$image = get_sub_field('slider_image');
$image_url = $image['url'];
$image_alt = $image['alt'];
?>
<img class="slider-img" src="<?php echo $image_url; ?>" alt="<?php echo $image_alt; ?>" id="slider-block-image-<?php echo $x?>">
<?php
// Do something...
$x++;
// End loop.
endwhile;
// No value.
else :
// Do something...
endif;
?> <div class="button-wrap">
<button class="sliderbuttonPlus">Rechts</button>
</div>
</div>