Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
context.accessToken[namespace + 'org'] = context.organization;
I am learning how to incorporate JavaScript into HTML and am trying to build a very simple web game based off a class project. (This is a sidebar, I successfully completed the project itself.)
I need two specific images to randomly populate the entire table. My code successfully creates the array of appropriate length and translates that correctly to the HTML, but the image sources don’t seem to populate correctly. One image of each always shows up so I am confident my source paths are correct, and one of the images is always in the lower right hand corner, but the rest of the field is blank. When examining DevTools the array is there with appropriate img attributes but there is no source, except obviously on the img‘s that have a visible image.
class Field {
static generateField(h, w, pct = .2) {
let board = [];
let tempArray = [];
while (board.length < h) {
while (tempArray.length < w) {
const random = Math.random();
if (random < pct) {
tempArray.push(imageB);
} else {
tempArray.push(imageA);
}
}
board.push(tempArray);
}
for (let a = 0; a < h; a++) {
let row = document.createElement("tr");
for (let b = 0; b < w; b++) {
let cell = document.createElement("td");
let img = document.createElement("img");
img = board[a][b];
img.style.width = "100%";
img.style.height = "100%";
cell.appendChild(img);
row.appendChild(cell);
}
tblBody[0].appendChild(row);
}
}
}
The tblBody is defined outside the class. Originally my code was nested for loops and gave the exact same result.
Where am I going wrong?
I am building Pokemon filtered search app using Vue 3 with Composition API, based on the following tutorial: https://www.youtube.com/watch?v=QJhqr7jqxVo. The Home view in the app uses a fetch method to fetch Pokemon from the PokemonAPI:
fetch('https://pokeapi.co/api/v2/pokemon?offset=0')
.then((res)=> res.json())
.then((data)=> {
console.log(data)
state.pokemons = data.results;
state.urlIdLookup = data.results.reduce((acc, cur, idx)=>
acc = { ...acc, [cur.name]:idx+1 }
,{})
})
Each Pokemon in the JSON response includes an index number. The second promise uses a reduce method to handle urlIdLookup. urlIdLookup is then passed into the router-link path used to redirect to Pokemon about/details page:
<div class="ml-4 text-2x text-blue-400"
v-for="(pokemon, idx) in filteredPokemon" :key="idx">
<router-link :to="`/about/${urlIdLookup[pokemon.name]}`">
{{ pokemon.name }}
</router-link>
</div>
The tutorial, however, does not explain why it is necessary to create a new accumulator object (“acc”) inside the reduce method, and then deconstruct the accumulator (“…acc”). Could someone perhaps explain why it’s necessary to create that object, then deconstruct it? Also, is there perhaps a better method for retrieving the id and passing it into the router link?
Here is the full component:
<template>
<div class="w-full flex justify-center">
<input type="text" placeholder="Enter Pokemon here"
class="mt-10 p-2 border-blue-500 border-2" v-model="text"/>
</div>
<div class="mt-10 p-4 flex flex-wrap justify-center">
<div class="ml-4 text-2x text-blue-400"
v-for="(pokemon, idx) in filteredPokemon" :key="idx">
<router-link :to="`/about/${urlIdLookup[pokemon.name]}`">
{{ pokemon.name }}
</router-link>
</div>
</div>
</template>
<script>
import { reactive, toRefs, computed } from 'vue';
export default {
name: 'Home',
setup() {
const state = reactive({
pokemons: [],
urlIdLookup:{},
text: "",
filteredPokemon: computed(()=> updatePokemon())
})
const updatePokemon = () => {
if(!state.text) {
return []
}
return state.pokemons.filter((pokemon) =>
pokemon.name.includes(state.text)
)
}
fetch('https://pokeapi.co/api/v2/pokemon?offset=0')
.then((res)=> res.json())
.then((data)=> {
console.log(data)
state.pokemons = data.results;
state.urlIdLookup = data.results.reduce((acc, cur, idx)=>
acc = { ...acc, [cur.name]:idx+1 }
,{})
})
return { ...toRefs(state), updatePokemon }
}
}
</script>
The Full error msg: UNAUTHENTICATED: Failed to retrieve auth metadata with error: reason: Client network socket disconnected before secure TLS connection was established.
I created a watcher collection where on create documents in the watcher, it will delete other documents and finally will delete the document itself inside watcher but it manage to delete like 450 out of 500 documents, the rest of the documents can’t be deleted. I have checked the documents, there are in the correct format. I was wondering if there is a issue with Firebase limitation
Essentially, I’m trying to recreate the “alert” and “prompt” functions, but in a single function that uses a modal window. I have it set up so that when one of the function’s parameters is set to 1, it adds a text field to the modal window and records that text field’s value when it closes. I’m having trouble making it so that when the window is opened, the program waits until the window is closed again. How can I do this?
Button 01
<Buttons
title={
!editPasswordState ? "Edit Full Password" : "Cancel"
}
outline
onClick={() => {
setEditPasswordState(!editPasswordState);
}}
class="
inline-flex
justify-center
py-2 px-4 border
border-transparent
shadow-sm text-sm
font-medium rounded-sm
text-white bg-red-400
hover:bg-red-400
focus:outline-black
focus:ring-2
focus:ring-offset-2
focus:ring-white"/>
Button 02
<button
onClick={handlePublishProductList}
className={"inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-sm text-white bg-red-400 hover:bg-white hover:text-red-400 hover:border-red-400 focus:text-black focus:border-black"}>
Publish
</button>
I need to add button 01
title={
!editPasswordState ? "Edit Full Password" : "Cancel"
}
to Button 02 also, how can I do that? (Button one has a self-closing tag and button two has button start and button stop tags)
I wanted to try these out where the expandable row data came from the data itself where it will display these data inside the expandable row
"Personal Information1",
"Personal Information2",
"Personal Information 3"
All examples that I’ve seen is that the data of the expandable row is not from the variable data itself.
How do I access the data of the 3 different personal informations in which these will be displayed inside the expandable row?
Codesandbox:
https://codesandbox.io/s/mui-datatables-expandable-rows-forked-ulf34d?file=/src/ExpandableRowTable.js:1378-1467
Codes:
const options = {
filter: true,
onFilterChange: (changedColumn, filterList) => {
console.log(changedColumn, filterList);
},
selectableRows: "single",
filterType: "dropdown",
responsive: "scrollMaxHeight",
rowsPerPage: 10,
expandableRows: true,
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta);
return (
<React.Fragment>
<tr>
<td colSpan={6}>
<TableContainer component={Paper}>
<Table style={{ minWidth: "650" }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Pesonal Information 1 label</TableCell>
<TableCell align="right">
Pesonal Information 2 label
</TableCell>
<TableCell align="right">
Pesonal Information 3 label
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</td>
</tr>
</React.Fragment>
);
},
page: 1
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
};
export default ExpandableRowTable;
I want to highlight column gaps somehow so it looks like separated.
So e.g. I want the gap be in red color between columns and no color between rows.
Setting borders to each element in grid makes the border lines intermittent.
So I thought there should be a way to style gap itself.
const Grid = styled.div`
display: grid;
grid-template-columns: 100px 50px 50px;
grid-template-rows: 50px 50px 50px;
grid-gap: 10px;
`;
I am playing with jQuery and Javascript. Working on a TODOs app using li items and with this API: https://jsonplaceholder.typicode.com/todos. I receive 200 items from this API.
I am trying to post a new item created with a click from the button (btn-add) and everything works as expected, with the exception that the post request is leaving in blank one property which is “title”. Here is my HTML and JS 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">
<link href="/CSS/styles.css" rel="stylesheet">
<title>TO DO List</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="/JS/index.js"></script>
</head>
<body>
<div id="inputDIV">
<input id="input" type="text" placeholder="Enter new item">
</div>
<div id="buttons">
<button id="btn-add">Add List Item</button>
<button id="btn-update">Update First Item</button>
<button id="btn-delete">Delete First Item</button>
</div>
<div id="ulDIV">
<ul id="list">
<!-- Here we will insert the list items via JS-->
</ul>
</div>
</body>
</html>
$(document).ready(function(){
let inputNew = $('#input');
let list = $('#list');
let currentInputValue = "";
$('#btn-add').click(createTODOItemAtBackend);
inputNew.on({
"input": function(e){
console.log(e.target.value);
currentInputValue = e.target.value;
},
"keyup": function(e){
if(e.keyCode === 13){
createTODOItemAtBackend();
}
}
})
getTODOListFromBackend();
function clearInputData(){
inputNew.val("");
currentInputValue = "";
}
function createTODODynamically(id, title){
let newListElement = document.createElement("li");
let textNode = document.createTextNode(title);
newListElement.appendChild(textNode);
newListElement.id = id;
return newListElement;
}
function getTODOListFromBackend(){
$.get("https://jsonplaceholder.typicode.com/todos", function(data, status){
let response = data;
for(let i=0; i < response.length; i++){
list.append(createTODODynamically(response[i].id, response[i].title));
}
});
}
let obj = {
"userId": 1,
"title": currentInputValue,
"completed": false
};
function createTODOItemAtBackend(){
$.post("https://jsonplaceholder.typicode.com/todos", obj, function(data, status){
let response = data;
list.append(createTODODynamically(response.id, currentInputValue));
console.log("Item Added to the list!");
clearInputData();
});
}
})
And this is what I see when I read the post information in the web browser:
{userId: "1", title: "", completed: "false", id: 201}
completed: "false"
id: 201
title: ""
userId: "1"
Can somebody help me, why is the property “title” being posted as empty? Thanks in advance
To reuse code I want to put my SVG into a function and call it as needed. Once I select the DIV what is the appropriate construct to render the SVG inside it?
...
if (intLocations.includes(comm.location)) {
const intActivities = d3.select('div#intActivities')
intActivities.append(Pill(comm))
} else {
const extActivities = d3.select('div#extActivities')
actActivities.append(Pill(comm))
}
...
function Pill(comm) {
const svgNode = d3.create('svg')
svgNode
.attr('width', 100)
.attr('height', 100)
.append('g')
// More code to draw the figure using comm data.
return svgNode;
}
express can’t find static files in build folder. express can serve files in static folder now. but only problem that file path likes <link rel="icon" href="/favicon.ico"/> in index.html it reach res.send('ERROR')
however, when I change favicon and manifest path like <link rel="icon" href="/assets/favicon.ico"/>. it serve file I expected.
server
--build
----static
----assets
------favicon.ico
------manifest.json
----index.html
----favicon.ico
----manifest.json
--server.js
localhost => return index.html good
localhost/index.html, favicon.ico, else... => return ERROR
localhost/assets/favicon.ico, manifest.json => return files good
app.use('/static', express.static(path.join(__dirname, 'build/static')));
app.use(express.static(path.join(__dirname, 'build')));
app.use('/*', (req, res) => res.send('ERROR');
Its probably very simple, but since I am a begginer I am not able to configure a Hello world pop up on a long press (2 seconds) of the Enter button.
Please guide. Thank you. Vicky.
I would like to hide an element based on a role. (The roles are “Teacher” and “Student”)
This is the element I want to hide if a role is Student.
tab.html
<a href="/profile" class="nav-item nav-link">Update</a>
<script src="{{ url_for('jquery', filename='jquery/profile/tab.js') }}"></script> //to access the .js file
I like to create a function in tab.js that will hide the element above if the role is “Student” but I do not have that much idea since I have no experience with JQuery
seek for help for grouping them. I got an input with this.
[
{
“apiName”: “APISend”,
“channel”: “Mozilla”,
“noa”: 3
},
{
“apiName”: “API”,
“channel”: “PostMan”,
“noa”: 1
},
{
“apiName”: “APICall”,
“channel”: “PostMan”,
“noa”: 4
},
{
“apiName”: “API”,
“channel”: “Mozilla”,
“noa”: 2
}
]
How can I group them as channel and then by apiName? My final output should be like this:
labels = [“Mozilla”,”PostMan”]
datasets = [{label:”APISend”, data:[3,0]} , {label:”API”,data:[2,1], {label:”APICall”,data:[0,4]]}
I’m using Node.js (v16) dynamic imports in a project to load plugins using a function loadJsPlugin shown here:
import { pathToFileURL } from 'url';
async function loadJsPlugin(pluginPath) {
const pluginURL = pathToFileURL(pluginPath).toString();
const result = await import(pluginURL);
return result.default;
}
My main program provides absolute paths to the loadJsPlugin function, such as /home/sparky/example/plugins/plugin1.js (Linux) or C:Userssparkyexamplepluginsplugin1.js (Windows). The pathToFileURL function then converts these absolute paths to URLs like file:///home/sparky/example/plugins/plugin1.js (Linux) or file:///C:/Users/sparky/example/plugins/plugin1.js (Windows).
Loading the plugins this way works fine when the loadJsPlugin function is in the same package as the main program, like this:
import { loadJsPlugin } from './plugin-loader.js';
async function doSomething() {
const plugin = await loadJsPlugin('...'); // works
// use plugin
}
However, if I try to move loadJsPlugin to a separate library and use it from there, it fails with Error: Cannot find module '<url here>'
import { loadJsPlugin } from '@example/plugin-loader';
async function doSomething() {
const plugin = await loadJsPlugin('...'); // error
// use plugin
}
NOTE: the dependency name here is not on NPM, it’s on a private repository and there’s no problem loading the dependency itself. Also, static ES6 imports in general are working fine in this system.
I looked through Node.js documentation, MDN documentation, and other StackOverflow questions for information about what is allowed or not, or whether dynamic import works differently when in the same package or a dependency, and didn’t find anything about this. As far as I can tell, if a relative path or file URL is provided, and the file is found, it should work.
Ruling out file not found:
I can switch back and forth between the two import lines to load the loadJsPlugin function from either ./plugin-loader.js or @example/plugin-loader, give it the same input, and the one in the same package works while the one from the dependency doesn’t.
When I test in VS Code, I can hover the mouse over the URL in the Error: Cannot find module 'file:///...' message and the file opens just fine
I can also copy the ‘file:///…’ URL to a curl command (Linux) or paste it into the address bar of Windows Explorer and it works.
If I try a path that actually doesn’t exist, I get a slightly different message Error [ERR_MODULE_NOT_FOUND]: Cannot find module '<path here>', and it shows the absolute path to the file that wasn’t found instead of the file URL I provided.
Checking different file locations:
I tried loading plugins that are located in a directory outside the program (the paths shown above like /home/sparky/example/plugins/...); got the results described above
I tried loading plugins that are located in the same directory (or subdirectory) as the main program; same result
I tried loading plugins that are packaged with the dependency in node_modules/@example/plugin-loader; same result (obviously this is not a useful set up but I just wanted to check it)
I’d like to put the plugin loader in a separate library instead of having the same code in every project, but it seems that dynamic import only works from the main package and not from its dependencies.
I’m hoping someone here can explain what is going on, or give me a pointer to what might make this work.