Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I have this:
<label for="eventendtime">Event End Time</label>
<% var enddate = data[i].ENDDATE.split(' ') %>
<input type="time" name="eventendtime" id="eventendtime" value="<%= enddate[0] %>">
basically, the enddate[0] returns:
1:30
but when I put it as either value like you can see above, or placeholder, it still always forces it to go to 12:30, which is super strange! I can’t figure out how to do this. how can i fix it?
I’m trying to filter a nested object into two parts, then return the parent (and siblings) object back if there are any matching siblings to return.
I’ve been looking at this SO thread as reference.
I think I am close, but not quite sure what I’m doing wrong.
I have an order that looks like this:
{
"name": "Name",
"email": "[email protected]",
"createdAt": "2021-12-01T21:19:29.682Z",
"purchasables": [
{
"type": "FOO",
...
},
{
"type": "BAR",
...
}
]
}
Any given order can have multiple things within (purchasable). I am trying to filter the order date order.createdAt and then filter the purchasable type.
// vue.js
data() {
return {
items: [],
day: dayjs()
};
},
props: {
orders: {
type: Array,
required: false,
default: () => [],
},
},
methods: {
filterPurchasables() {
this.items = this.orders.filter((order) => {
order.purchasables.every((purchasable) => {
console.log('type: ', purchasable.type); // FOO
return purchasable.type === 'FOO';
});
return dayjs(order.createdAt).isSame(this.day, "date");
});
},
},
If I only filter on the order’s createdAt date, things seem to work well.
this.items = this.orders.filter((order) => {
return dayjs(order.createdAt).isSame(this.day, "date");
});
In the end, what I’m trying to get back is this:
{
"name": "Name",
"email": "[email protected]",
"createdAt": "2021-12-01T21:19:29.682Z",
"purchasables": [
{
"type": "FOO",
...
}
]
}
Currently, I am always getting both purchasables back. I had tried using .some() but was getting the same result.
Thank you for any suggestions!
below is my project in Vue JS and i’m using An API to view data .. my problem is: i have an API to view single data which is called building in my case, and when i try to console.log(this.Building.floors) it gives me all the array items from 0 to 21 and i want to view those numbers from 0 to 21 in a table but i couldn’t figure it out
<template>
<b-card no-body class="bg-default shadow">
<b-card-header class="bg-transparent border-0">
<h3 class="mb-0 text-white">Details</h3>
</b-card-header>
<el-table class="table-responsive table table-dark"
header-row-class-name="thead-dark"
:data="projects">
<el-table-column label="Project"
min-width="310px"
prop="name">
<template v-slot="{row}">
<b-media no-body class="align-items-center">
<a href="#" class="mr-3">
<b-img class="avatar" rounded="circle" alt="Image placeholder" :src="row.img" />
</a>
<b-media-body>
<span class="font-weight-600 name mb-0 text-sm" v-for="(building, index) in Building.floors"
:key="index">{{Building.floors}}</span> // i wanted to get the numbers from 0 to 21 but it didn't work
</b-media-body>
</b-media>
</template>
</el-table-column>
<el-table-column label="Budget"
prop="budget"
min-width="140px">
</el-table-column>
<el-table-column label="Status"
min-width="170px"
prop="status">
<template v-slot="{row}">
<badge class="badge-dot mr-4">
<i :class="`bg-${row.statusType}`"></i>
<span class="status" :class="`text-${row.statusType}`">{{row.status}}</span>
</badge>
</template>
</el-table-column>
<el-table-column label="Users" min-width="190px">
<div class="avatar-group">
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip"
data-original-title="Ryan Tompson">
<img alt="Image placeholder" src="img/theme/team-1.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip"
data-original-title="Romina Hadid">
<img alt="Image placeholder" src="img/theme/team-2.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip"
data-original-title="Alexander Smith">
<img alt="Image placeholder" src="img/theme/team-3.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip"
data-original-title="Jessica Doe">
<img alt="Image placeholder" src="img/theme/team-4.jpg">
</a>
</div>
</el-table-column>
<el-table-column label="Completion"
prop="completion"
min-width="240px">
<template v-slot="{row}">
<div class="d-flex align-items-center">
<span class="completion mr-2">{{row.completion}}%</span>
<div>
<base-progress :type="row.statusType" :value="row.completion"/>
</div>
</div>
</template>
</el-table-column>
</el-table>
</b-card>
</template>
<script>
import projects from './../projects'
import { Table, TableColumn} from 'element-ui'
import BuildingsService from "@/services/ApiService"
export default {
name: 'light-table',
components: {
[Table.name]: Table,
[TableColumn.name]: TableColumn
},
data() {
return {
Flats:[],
Floors:[],
Building:[],
projects,
currentPage: 1
};
},
mounted: function(){
BuildingsService.getOneBuilding(`${this.$route.params.id}`).then((response) => {
this.Building = response.data.response;
console.log(this.Building.floors,"single");
});
});
}
}
</script>
My Css looks like this, for .mySlides i tried every display still its not working………………………………………………………………………………………………………………………………………………………………………………..
.mySlides {
display: flex;
}
.slideshow-container {
max-width: 100%;
height: 450px;
position: cover;
margin: auto;
margin-top: 100px;
}
.dot {
height: 12px;
width: 12px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
margin-top: 1.5%;
margin-left: 1%;
}
.active {
background-color: #3b3b3b;
}
span {
color: black;
/* background-color: white; */
}
*** This is my javascript code ***
var slideIndex = 0;
showSlides ();
function showSlides () {
var i;
var slides = document.getElementsByClassName ('mySlides');
var dots = document.getElementsByClassName ('dot');
for (i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace (' active', '');
}
slides[slideIndex - 1].style.display = 'block';
dots[slideIndex - 1].className += ' active';
setTimeout (showSlides, 2000); // Change image every 2 seconds
}
showSlides ();
This is my html code i have not made use of w3-animate style idk how to use that
<div class="slideshow-container">
<div class="mySlides w3-animate-right">
<img
src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/7/53ae79ec-df56-4877-b133-b92f4cfd8c7f1638892785287-EORS-Prebuzz-Banner-DK.gif"
style="width: 100%"
/>
</div>
<div class="mySlides w3-animate-right">
<img
src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/11/073805e4-f274-4d37-b5e3-8ef4766a19531639241779767-K_Winterwear_Dk.jpg"
style="width: 100%"
/>
</div>
<div class="mySlides w3-animate-right">
<img
src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/11/b96ded76-646c-4baf-9422-7727cbf2b0a11639241779745-Kurtas_Dk.jpg"
style="width: 100%"
/>
</div>
<div class="mySlides w3-animate-right">
<img
src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/11/314e5e3a-0ce4-4ab3-90a3-7d02d335dbb21639241779725-Casual-Wear_Desk.jpg"
style="width: 100%"
/>
</div>
<div class="mySlides w3-animate-right">
<img
src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/11/16/11cc5325-37c6-4490-9adb-6f09ccb2a0781637049244895-luxe-banner.jpg"
style="width: 100%"
/>
</div>
</div>
<div style="text-align: center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
Usually, classes in JavaScript are presented like this:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return this.calcArea();
}
calcArea() {
return this.height * this.width;
}
}
As a fan of functional programming and as someone who want to make code scalable, I am tempted to have like this for the whole app instead:
calcArea({height, width}) {
return height * width;
}
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return calcArea(this);
}
}
Basically transform classes into structures and make all methods with related functions abstracted. This way I can easily export the calcArea function
Does this make sense, I would like to hear some thoughts on this, are there good articles about these architectures approaches?
Thank you
I have built an autocomplete in React using Chakra UI for styling.
When I fill in the form using the Autocomplete however, React-Hook-Form seems to think I haven’t filled in the fields because they throw the validation error to console.
I pass the ref along to the input which should be all it takes to register these fields.
The form code is:
const test: AutoCompleteSuggestions[] = [
{key: "US", value: "USA"},
{key: "UK", value: "United Kingdom"},
]
function onSubmit(values: QueryFormParams) {
console.log('V'); //Never gets called
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<FormControl isInvalid={errors.name}>
<AutoComplete
{...register('selectedDeparture', {
required: 'Select a departure',
})}
placeholder={'Departure country...'}
isValid={v => setIsItemSelected(v)}
suggestions={test}
/>
</FormControl>
</form>
)
The autocomplete code is as follows:
import React, {Ref, useState} from 'react';
import {Input, Table, Tbody, Td, Tr, VStack} from '@chakra-ui/react';
type AutoCompleteProps = {
suggestions: AutoCompleteSuggestions[]
isValid: (b: boolean) => void
placeholder: string
}
export type AutoCompleteSuggestions = {
key: string,
value: string
}
// eslint-disable-next-line react/display-name
export const AutoComplete = React.forwardRef(({suggestions, isValid, placeholder}: AutoCompleteProps, ref: Ref<HTMLInputElement>) => {
const [filteredSuggestions, setFilteredSuggestions] = useState<AutoCompleteSuggestions[]>();
const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
const [userInput, setUserInput] = useState<string>('');
function onChange(e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) {
console.log('Changing', userInput, e.currentTarget.value);
const newUserInput = e.currentTarget.value;
if (!newUserInput) {
//setActiveSuggestion(-1);
setFilteredSuggestions([]);
setShowSuggestions(false);
isValid(true);
setUserInput(e.currentTarget.value);
}
const filteredSuggestions = suggestions.filter(suggestion => suggestion.value.toLowerCase().startsWith(userInput.toLowerCase()));
//setActiveSuggestion(e.target.innerText);
setFilteredSuggestions(filteredSuggestions);
setShowSuggestions(true);
isValid(false);
setUserInput(e.currentTarget.value);
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
function onClick(e: MouseEvent<HTMLLIElement, MouseEvent>) {
console.log('Clicked', e.target.innerText);
setFilteredSuggestions([]);
setShowSuggestions(false);
isValid(true);
setUserInput(e.target.innerText);
}
let suggestionsListComponent;
if (showSuggestions && userInput) {
if (filteredSuggestions?.length) {
suggestionsListComponent = (
<Table className={'suggestions'} position={'absolute'} top={10} left={0} right={0} variant='simple' zIndex={999}>
<Tbody>
{filteredSuggestions?.map((suggestion, index) => {
return (
<Tr key={index}
_hover={{
background: 'gray.200',
color: 'green',
}}
onClick={onClick}>
<Td>
<span className={'selectedText'}>{suggestion.value}</span>
</Td>
</Tr>
);
})}
</Tbody>
</Table>
);
} else {
suggestionsListComponent = (
<div className="no-suggestions">
<em>No countries found for that input!</em>
</div>
);
}
}
return (
<>
<VStack position={'relative'}>
<Input
ref={ref}
type="text"
onChange={onChange}
value={userInput}
placeholder={placeholder}
/>
{suggestionsListComponent}
</VStack>
</>
);
});
export default AutoComplete;
I’m trying to make a loop to my game and I found this solution, but I’m struggling with making the function to cancel the loop. Here is my class where I’m getting the animation frame and I have function like “start”, which I’m calling when I want to start the game loop.
class Engine {
static renderFrame = getRequestAnimationFrame();
tick() {
console.log("test");
Engine.renderFrame(() => {
this.tick();
});
}
start() {
// Start the game ticking
Engine.renderFrame(() => {
this.tick();
});
}
}
Here is the “getRequestAnimationFrame” function, which I’m calling.
export const getRequestAnimationFrame = () => {
const fallback = callback => setTimeout(callback, 1000 / 30);
return (requestAnimationFrame || fallback).bind(window);
};
This is the function I’m trying to make, which should stop the game loop and also when I’ll call again “start” function it should be looping again, but nothing I tried worked (it probably isn’t even close).
end() {
(Engine.renderFrame).unbind(window);
}
are there any difference in script tag defer attribute placement? before src or after src?.
Some time ago I started trying to develop a music BOT for discord, but along the way I had several failures and I can’t run the script. The same goes on giving the errors below:
throw new RangeError(‘BITFIELD_INVALID’, bit);
^
RangeError [BITFIELD_INVALID]: Invalid bitfield flag or number: WEBHOOKS_UPDATE.
at Function.resolve (C:UserssantoÁrea de TrabalhoBot Música HCKnode_modulesdiscord.jssrcutilBitField.js:152:11)
at C:UserssantoÁrea de TrabalhoBot Música HCKnode_modulesdiscord.jssrcutilBitField.js:147:54
at Array.map ()
at Function.resolve (C:UserssantoÁrea de TrabalhoBot Música HCKnode_modulesdiscord.jssrcutilBitField.js:147:40)
at Client._validateOptions (C:UserssantoÁrea de TrabalhoBot Música HCKnode_modulesdiscord.jssrcclientClient.js:546:33)
at new Client (C:UserssantoÁrea de TrabalhoBot Música HCKnode_modulesdiscord.jssrcclientClient.js:73:10)
at Object. (C:UserssantoÁrea de TrabalhoBot Música HCKmusicBot.js:2:13)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32) {
[Symbol(code)]: ‘BITFIELD_INVALID’
}
How do websites know that the same computer is using 2 different accounts.. for example to avail a free trial period. I used up the free trial in one account and made another.. but they detected that I already used it up. Is my IP stored, if so can vpn bypass it?
Hi I want to create a web page which takes a number as input then Even or ODD background color changes depending upon the number for eg if I enter 2 then Odd background color becomes gray and even background color becomes Green, I hope u understand what I want to do, the thing is I want to place the input field in the middle like in the picture, Can anyone help me how to do that? it would be very helpful for future purposes also, Thank you!!!!
I’m building an Edge extension. I’m trying to get the exact same element as this question asks, but I want to use JS, not Selenium.
Element
I’m running the JS through my extension’s background script. In the future, I would like the popup to have a button and that button to read the syllable on screen.
The provided solution is in Selenium and I’d like to transpile it into JS.
driver.switch_to_frame(driver.find_element_by_xpath("//div[@class='game']/iframe[contains(@src,'jklm.fun')]"))
If none of this works, I guess I’ll have to use optical text recognition.
Here’s manifest.json
{
"name": "myName",
"description": "myDescription",
"version": "1.0.0",
"manifest_version": 3,
"icons": {
"128": "myIcon.png"
},
"content_scripts": [
{
"matches": [
"https://jklm.fun/*"
],
"js": [
"js/myScript.js"
]
}
]
}
Inside js folder, here’s myScript.js
console.log('myscript is running')
const syllableHandler = () => {
const iframe = document.getElementsByTagName("iframe")
console.log(iframe?.[0]?.contentWindow)
}
document.addEventListener('keydown', syllableHandler)
i have this code. I need to add an IF condition at the end so that it adds a “mr.” if they check the male gender and “miss.” if check female.
<%@ LANGUAGE="Javascript" %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft FrontPage 4.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<TITLE>Main Page</TITLE>
</HEAD>
<BODY TopMargin="0" Leftmargin="0">
<form action="./ask.asp" method="post">
Student name: <input type="text" name="name" size="20"><br><br>
Sex:
<input type="radio" name="choice" value="Male" id="choice-Male">
<label for="choice-Male">Male</label><br>
<input type="radio" name="choice" value="Female" id="choice-Female">
<label for="choice-Female">Female</label><br><br>
<input type="submit" value="Submit Form"><br>
</form>
<%
Response.Write("Thanks " + Request.Form("name"))
%>
</BODY>
</HTML>I’m in a react project that runs perfectly with no errors or warning when using yarn start, but when I try yarn build I get the following error in my console:
Cannot read property 'toLowerCase' of undefined
CompileError: Begins at CSS selector .m-n1
I have already searched in my code and there’s no “.m-n1” class or something like this in any component or scss.
Here it is my package.json file
"name": "removedForThisPost",
"version": "0.1.0",
"private": true,
"dependencies": {
"@clayui/alert": "^3.40.0",
"@clayui/card": "^3.41.0",
"@clayui/core": "^3.41.0",
"@clayui/css": "^3.41.0",
"@clayui/drop-down": "^3.41.0",
"@clayui/empty-state": "^3.40.0",
"@clayui/form": "^3.40.0",
"@clayui/icon": "^3.40.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"axios": "^0.24.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"sass": "^1.45.0",
"timeago.js": "^4.0.2",
"typescript": "^4.1.6",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Extra information: I’m using NVM for node versions and at this moment I’m at Node 14.18.2 (npm v6.14.15)!
If you guys need any other information let me know!
I am banging my head against this problem because it doesn’t make sense. The conditions for the while loop are not met, yet it continues to execute another 9 times before it stops. I console.log out the variable ‘donewithLoads’ right before the while loop. Even with it is True, the while loop continues. Makes no sense, any help is appreciated.
function gatherLoads()
{
var donewithLoads = loadSheet.getRange(currentRow,1).getValue().toString().length == 0;
console.log('donewithLoads value: ' + donewithLoads);
console.log('isFound Value: ' + isFound);
console.log(loadSheet.getRange(currentRow,1).getValue().toString().length);
while(donewithLoads == false) //while there are still invoice numbers, do this function.
{
var isFound = false;
var currentLoad = loadSheet.getRange(currentRow,1).getValue(); //record invoice number to
currentLoad
for (var s in allDispatcherSpreadSheets) //search allDispatcherSheets //iterates through
different dispatcher spreadsheets
{
var currentDispatchSpreadSheet = allDispatcherSpreadSheets[s];
var currentSheets = currentDispatchSpreadSheet.getSheets();
for (var o in currentSheets) //iterates through different sheets in spreadsheet
{
var currentSingleSheet = currentSheets[o];
if (currentSingleSheet.isSheetHidden() != true) // if sheet is visible and not hidden
{
//testerstuff
var testsheetname1 = currentSingleSheet.getName();
testsheetname1.toString();
var testSpreadSheetName = currentDispatchSpreadSheet.getName();
testSpreadSheetName.toString();
//currentRow2 is the row in the working single sheet that will be iterated to find
matching invoice number
for(var currentRow2 = 2; currentRow2 <= numRowsDispatchSheet; currentRow2++)
//iterates through rows in column 14 (invoice)
{
var currentLoad2 = currentSingleSheet.getRange(currentRow2,14).getValue();
if(currentLoad2 == currentLoad) //if found
{
var targetRange = currentSingleSheet.getRange(currentRow2, 1, 1, 15).getValues();
foundLoads.getRange(foundLoadscounter + 2,1,1,15).setValues(targetRange);
foundLoadscounter++;
isFound = true;
if(isFound == true)
{
loadSheet.getRange(currentRow,2).setValue('found');
loadSheet.getRange(currentRow,1).setBackground('green');
currentRow++;
processedLoadscounter++;
console.log('load found: ' + 'row ' + currentRow + 'processed loads:' + processedLoadscounter + ' found Loads: ' + foundLoadscounter);
console.log(loadSheet.getRange(currentRow,1).getValue());
gatherLoads(); // start function again
break;
}
}
}
}
}
}
if(isFound == false)
{
loadSheet.getRange(currentRow,2).setValue('not found');
loadSheet.getRange(currentRow,1).setBackground('red');
}
currentRow++;
processedLoadscounter++;
console.log('load found: ' + 'row ' + currentRow + 'processed loads:' + processedLoadscounter + ' found Loads: ' + foundLoadscounter);
console.log(loadSheet.getRange(currentRow,1).getValue());
gatherLoads();
break;
}
}