Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
How can I make the pop up window wrapper semitransparent background to full windows height. Now the wrapper’s div background fits only a top part of the window.
https://codesandbox.io/s/tours-test-slick-v1uw96?file=/styles.css
<body>
<section>
First section
</section>
<section>
Second section
</section>
<section>
<div class="Pop_up_window_wrapper"> //this background div isn't strached to whole body height
Pop up window
</div>
</section>
</body>I just passed my senior secondary education and now I am thinking to learn some new skills so, I choose to learn some fundamentals for development as my ultimate goal is to become a data scientist. I know the most basic language to learn coding is c language, and I don’t know where to learn it properly so that my basics become strong.. So can anyone suggest me the best course out here on the internet or even a book if needed.?
Some suggestion on the correct way to learn a language and a proper road map on how to learn this professionally.
The simple HTML template below is populated by cards through a JavaScript search bar. Right now all the cards show the same fixed url: "https://www.url.com/aaa. I need to replace the aaa in each url with the url element from the JSON file being searched.
This is my working code: https://jsfiddle.net/25tmakbu/1/
const userCardTemplate = document.querySelector("[data-user-template]")
const userCardContainer = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")
let users = []
searchInput.addEventListener("input", e => {
const value = e.target.value.toLowerCase()
const xy = value.split(' ')
users.forEach(user => {
if (parseFloat(value.length) < 3) {
user.element.classList.toggle("hide", true)
} else {
var distance = Math.sqrt(
Math.pow(parseFloat(xy[0]) - parseFloat(user.x), 2) +
Math.pow(parseFloat(xy[1]) - parseFloat(user.y), 2))
const isVisible =
user.name.toLowerCase().includes(value) || distance <= 10
user.element.classList.toggle("hide", !isVisible)
}
})
})
fetch("https://ucc.ar/_clusters/test.json")
.then(res => res.json())
.then(data => {
users = data.map(user => {
const card = userCardTemplate.content.cloneNode(true).children[0]
const header = card.querySelector("[data-header]")
const body = card.querySelector("[data-body]")
header.textContent = user.name
body.textContent = user.company
card.classList.add('hide');
userCardContainer.append(card)
return {
name: user.name,
x: user.x,
y: user.y,
element: card
}
})
}).search-wrapper {
display: flex;
flex-direction: column;
gap: .25rem;
}
input {
width: 80%;
margin: 0 auto;
display: block;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background-color: #ffffff;
}
.user-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: .25rem;
margin-top: 1rem;
}
.card {
border: 1px solid black;
background-color: white;
padding: .5rem;
text-align: center;
}
.card>.header {
margin-bottom: .25rem;
}
.card>.body {
font-size: .8rem;
color: #777;
font-weight: bold;
}
.hide {
display: none;
}<div class="search-wrapper">
<input type="search" id="search" placeholder="Search the catalogue" data-search>
</div>
<div class="user-cards" data-user-cards-container></div>
<template data-user-template>
<div class="card">
<a href="https://www.url.com/aaa">
<div class="header" data-header></div>
</a>
<div class="body" data-body></div>
</div>
</template>I have 5 tabs that reveal different content. When you click a tab, it should open that tab only and add the hash/id of that “tab” to the URL so a user could copy the URL and use it to go directly to that tab later. External and internal links with hashes should behave the same way –open/reveal that particular tab with the hash. The default (without a hash) is to open the first tab.
I don’t want the links to jump to the “tab” id like an anchor tag. Just open/reveal the “tab”.
I’ve created the following code and am able to do everything except internal links with hashes don’t work and if you just type in the hash in the URL and hit return, it doesn’t work. External links with hashes work fine. The prevention of the anchors “jumping” is kinda glitchy since I’m setting the window scrollTo after the page is loaded so it jumps for a second. Guess I should use something other than id tags so this doesn’t happen?
const tabs = document.querySelector(".wrapper");
const tabButton = document.querySelectorAll(".tab-button");
const contents = document.querySelectorAll(".content");
var hash = window.location.hash.substr(1);
tabs.onclick = e => {
// disable scroll to
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
const id = e.target.dataset.id;
const el1 = document.querySelector('button[data-id="' + id + '"]');
if (id) {
tabButton.forEach(btn => {
btn.classList.remove("active");
});
el1.classList.add("active");
contents.forEach(content => {
content.classList.remove("active");
});
const element = document.getElementById(id);
element.classList.add("active");
window.location.hash = '#' + id; // update has in URL
}
} // end onclick
if (hash) {
// disable scroll to
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
var hashId = document.querySelector('button[data-id="' + hash + '"]');
console.log(hashId);
tabButton.forEach(btn => {
btn.classList.remove("active");
});
hashId.classList.add("active");
contents.forEach(content => {
content.classList.remove("active");
});
var element = document.getElementById(hashId);
element.classList.add("active");
}.wrapper {
width: 100%;
margin: auto;
background-color: white;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);
font-family: arial, helvetica, sans-serif;
}
/* 5 columns */
.buttonWrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
button {
border: none;
padding: 10px;
background-color: #e6e6e6;
color: #000;
font-size: 18px;
cursor: pointer;
transition: 0.5s;
}
button:hover {
background-color: #d4e7f4;
}
button.active {
background-color: white;
}
.active {
background-color: white;
}
.content {
display: none;
padding: 50px;
}
.content.active {
display: block;
}
h2 .content {
font-weight: 700;
}<div class="wrapper">
<div class="buttonWrapper">
<button class="tab-button active" data-id="one">One</button>
<button class="tab-button" data-id="two">Two</button>
<button class="tab-button" data-id="three">Three</button>
<button class="tab-button" data-id="four">Four</button>
<button class="tab-button" data-id="five">Five</button>
</div>
<div class="contentWrapper">
<div class="content active" id="one">
<h2>Title 1</h2>
<p>Content 1</p>
<p><a href="#two">Link to two</a></p>
</div>
<div class="content" id="two">
<h2>Title 2</h2>
<p>Content 2</p>
<p><a href="#one">Link to one</a></p>
</div>
<div class="content" id="three">
<h2>Title 3</h2>
<p>Content 3</p>
<p><a href="#four">Link to four</a></p>
</div>
<div class="content" id="four">
<h2>Title 4</h2>
<p>Content 4</p>
<p><a href="#five">Link to five</a></p>
</div>
<div class="content" id="five">
<h2>Title 5</h2>
<p>Content 5</p>
<p><a href="#one">Link to one</a></p>
</div>
</div>
</div>I am working from a legacy code base where there are forms with controls distributed in ascx files for an asp.net application.
The forms will load data from the database, and for some specific cases the form is greyed out (not editable) including controls such as multiple checkboxes.
Example code is:
<div>
<p style="border-width:3px; border-style:solid; border-color:#0000FF; padding: 1em;"> Select all groups(s) that apply or select not applicable.</p>
<%=OurInputHelpers.MultipleCheckBoxes(true, "Group", Model.GetIdsNamesList_SelectedGroups(), "Group", null)%>
</div>
However, I cannot find the exact mechanism for the controls being greyed out, so the posted code would only be partially helpful.
GOAL: I would like to conditionally hide instructions to the user when the controls (such as multiple-check-boxes) are greyed out.
I can’t seem to make my group-button appear when a row is selected. Why is that and what’s the problem?
Heres my html code:
<div class="container">
<table id="table">
<thead>
<tr>
<th>Batch ID</th>
<th>Product Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button id="add-button" onclick="showaddForm()">Add</button>
<div id="group-button">
<button id="edit-button" onclick="showeditForm()">edit</button>
<button id="delete-button" onclick="deleteRow()">Delete</button>
</div>
</div>
<div id="add-form-popup" class="add-form-popup">
<div class="add-form-container">
<form id="addForm">
<label for="batch-id-field">Batch ID:</label>
<input type="text" id="add-batch-id-field" name="batch-id"><br>
<label for="product-name-field">Product Name:</label>
<input type="text" id="add-product-name-field" name="product-name"><br>
<button onclick="addRow(event);" class="addbtn">add</button><br><br>
</form>
</div>
</div>
I set the buttons invisible and will only be visible once a row was selected in the table
Here’s my css code:
#group-button {
display: none;
margin-top: 20px;
}
#group-button.selected {
display: block;
margin-top: 20px;
}
In my for loop, when a row is selected it should change the display of group-button from none to block
Here’s my javascript code:
var table = document.getElementById("table"),
rIndex;
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].onclick = function() {
rIndex = this.rowIndex;
console.log(rIndex);
document.getElementById("edit-batch-id-field").value = this.cells[0].innerHTML;
document.getElementById("edit-product-name-field").value = this.cells[1].innerHTML;
// show the group-button button when a row is selected
document.getElementById("group-button").style.display = "block";
// remove 'selected' class from all rows
for (var j = 1; j < table.rows.length; j++) {
table.rows[j].classList.remove("selected");
}
// add 'selected' class to the current row
this.classList.add("selected");
};
}
function addRow(event) {
event.preventDefault();
const batchId = document.getElementById("add-batch-id-field").value;
const productName = document.getElementById("add-product-name-field").value;
const tableRow = document.createElement("tr");
const tableData1 = document.createElement("td");
const tableData2 = document.createElement("td");
tableData1.textContent = batchId;
tableData2.textContent = productName;
tableRow.appendChild(tableData1);
tableRow.appendChild(tableData2);
table.appendChild(tableRow);
const form = document.getElementById("add-form-popup");
form.style.display = "none";
}
function showaddForm() {
const form = document.getElementById("add-form-popup");
form.style.display = "block";
}
How can you simplify this CSS code the a#point have to write until 200. Is there a simple way to do this instead of writing a#point1:hover span – a#point200:hover span
#imap a#point46:hover span {
left: 40px;
top: 0px;
}
#imap a#point47:hover span {
left: 40px;
top: 0px;
}
#imap a#point48:hover span {
left: 40px;
top: 0px;
}
#imap a#point49:hover span {
left: 40px;
top: 0px;
}
#imap a#point50:hover span {
left: 40px;
top: 0px;
}
#imap a#point52:hover span {
left: 40px;
top: 0px;
}
Thank you
I have the following table:
<table class="reviewerTable" id="reviewersToBeAdded" style="overflow-y: hidden;">
<thead>
<tr>
<th>Group Name</th>
<th># of Accounts</th>
<th>Last Reviewed</th>
<th>Remove from Campaign</th>
</tr>
</thead>
<tbody class="division">
<tr>
<td>Cable Operations<input type="checkbox" style="display: none" data-toggle="toggle" onchange="toggleDivision(this)"></td>
<td>9</td>
<td>March 31, 2023</td>
<td><button class="deleteBtn" onclick="removeFromTable(this)"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button></td>
</tr>
<tr class="department" style="" data-parent="Cable Operations">
<td padding-left:="" 50px;="" style="padding-left: 50px;">Core Data Platforms</td>
<td padding-left:="" 50px;="" style="padding-left: 50px;">2</td>
<td class="reviewedDate" style="padding-left: 50px;">March 31, 2023</td>
<td style="padding-left: 50px;"><button class="deleteBtn" onclick="removeFromTable(this)"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button></td>
</tr>
</tbody>
</table>
When I click the button which calls onclick="removeFromTable(this)" then it is supposed to do the following:
<script>
function removeFromTable(r) {
// Grab the table row where the button was clicked and the corresponding tbody
tr = $(r).parent('tr')
parent = $(tr).parent('tbody')
console.log(tr)
console.log(parent)
// Check if table row is a department or a parent
if ($(tr).hasClass('department') == true) {
value = $(parent).children()[0].textContent
console.log(value)
}
}
</script>
But, I am receiving a “Maximum Call Stack Exceeded” error when I click the button. As far as I can tell, I am not calling any recursive functions so I am lost as to why it logs the same elements over and over again until the call stack is exceeded. Could nayone give me some insight into what could possibly be happening here?
I need to hide the name at the top of the screen, the headerShown is already false, but still showing it, group the stacks, but follow the error, what else could I do?enter image description here
this is my code:enter image description here
I would appreciate your help
Trying to wrap my head around this. Google Apps Script does not yet support private properties in a class, as alternative many posts suggest the use of Weak Map and a closure to approximate this behavior. Like this:
const myPrivate1 = (() => {
const _private = new WeakMap();
class myPrivate1{
constructor({key, value}={}) {
let obj = {};
obj[key] = value;
_private.set(this, obj);
}
getPrivate(key) {
return _private.get(this)[key]
}
setPrivate({key, value}) {
let priv_attrs = _private.get(this)
priv_attrs[key] = value;
_private.set(this, priv_attrs);
}
}
return myPrivate1
})()
I’ve found that using an Object instead of the Weak Map behaves similarly. Like this:
const myPrivate2 = (() => {
const _private = new Object();
class myPrivate2{
constructor({key, value}={}) {
_private[key] = value;
}
getPrivate(key) {
return _private[key]
}
setPrivate({key, value}) {
_private[key] = value;
}
}
return myPrivate2
})()
to test this:
const testPrivate = () => {
const testObj1 = new myPrivate1({key: 'id', value: 'xyz123'});
const testObj2 = new myPrivate2({key: 'id', value: 'xyz123'});
testObj1.setPrivate({key: 'name', value: 'Larry'});
testObj2.setPrivate({key: 'name', value: 'Larry'})
console.log(testObj1.getPrivate('name'));
console.log(testObj2.getPrivate('name'));
testObj1.setPrivate({key: 'id', value: 'abc987'});
console.log(testObj1.getPrivate('id'));
console.log(testObj2.getPrivate('id'));
console.log(testObj1._private);
console.log(testObj2._private);
}
Output:
2:40:50 PM Info Larry
2:40:50 PM Info Larry
2:40:50 PM Info abc987
2:40:50 PM Info xyz123
2:40:50 PM Info undefined
2:40:50 PM Info undefined
Can some explain the advantages of using a Weak Map vs Object?
Hi,
This is driving me crazy. I have this code in node.js on the server side:
var player1 = {"id":2,"aids":[{"id":"revive","value":1}]};
var player2 = {"id":32,"aids":[{"id":"revive","value":1}]};
var inturn = {"id":2,"aids":[{"id":"revive","value":1}]};
var outturn = {"id":32,"aids":[{"id":"revive","value":1}]};
outturn.aids.map(a=> { if(a.id == 'revive') a.value = 0 });
console.log(JSON.stringify(inturn.aids)+' '+JSON.stringify(outturn.aids));it is supposed to produce this:
var player1 = {"id":2,"aids":[{"id":"revive","value":1}]};
var player2 = {"id":32,"aids":[{"id":"revive","value":1}]};
var inturn = {"id":2,"aids":[{"id":"revive","value":1}]};
var outturn = {"id":32,"aids":[{"id":"revive","value":0}]};
I cant reproduce it anywhere else but the problem here is that I want only to modify what is inside outturn.aids and nothing else but this will also modify all other variables with a similar structure. So this is what I get
var player1 = {"id":2,"aids":[{"id":"revive","value":0}]};
var player2 = {"id":32,"aids":[{"id":"revive","value":0}]};
var inturn = {"id":2,"aids":[{"id":"revive","value":0}]};
var outturn = {"id":32,"aids":[{"id":"revive","value":0}]};
however this wont happen if there is a different object preceding the one that is being changed, like this:
var player1 = {"id":2,"aids":[{"id":"otherthing","value":1},{"id":"revive","value":1}]};
var player2 = {"id":32,"aids":[{"id":"otherthing","value":1},{"id":"revive","value":1}]};
var inturn = {"id":2,"aids":[{"id":"otherthing","value":1},{"id":"revive","value":1}]};
var outturn = {"id":32,"aids":[{"id":"revive","value":0}]};
Why is this happening? Since I cant reproduce it somewhere else you might thing is a context thing but it doesnt seem to be the case because console.log shows the change right after outturn.aids.map(a=> { if(a.id == 'revive') a.value = 0 }); which means this is the culprit but why is this line of code modifying all the other variables as well? Makes no sense to me…
Thank you.
I’m trying to decode data of this format in pdf:
...OSAwMDAwMCBuDQowMDAwMDc4NTc1IDAwMDAwIG4NCjAwMDAwODIyNzggMDAwMDAgrnbg0KdHJhaWxlcgo8PAovU2l6ZSAzOQovUm9vdCAzNCAwIFIKL0lEIFsgPDYwZjJlrnOWI4ZjU5MTRmZjU5M2E3NDk5NTcyNWZhYTY2PiA8NjBmMmU5YjhmNTkxNGZmNTkzrnYTc0OTk1NzI1ZmFhNjY+IF0KPj4Kc3RhcnR4cmVmCjgyMjk5CiUlRU9GCg==
But my file does not open “failed to open the file”, when I try to open a PDF file in text format, I get the following:
%PDF-1.7
%
1 0 obj
<<
/Filter /FlateDecode
/®tЖVжwF‚" ўфЖVжwFѓC3C#@ўфЖVжwFѓ" ўфЖVжwFѓ2
з0
>>
stream
xњнЅ XTЧщ8|О№ЛМЬЩо3МАМ…ЃqQ"»®t!ЕA@MI‰ZBa¦*$™іDЅ№ѓG№¦`EMKK”ЩєCf™:kъdЫJЦ”ЪзЫZ›Efѕчњ{п0dйУяп{ 3зЮчњ{оYЮу®gFIЁqHiЬ®}_°€•ЅgvНѓПЩC cф.n€kiЮ¶ыѕжы1/бКWµ№Ў№Єзю¶ёжBkбќi-ђа,4™ ѕв9-›»ЇМтЬс„0jkol@Ж?AЩ›hњЯ®}ЗXsЊЯ@Д&Ш9эќ+—ќ*—Ігр„ЯҐdvw<x7ЮиsЎ.@јuЄз„tб1”Ж‡ђЎш_ њЈчXkь}NпЮ@ѓZ@иqф4nEOЈзРуш<јх:Љ®}щ |Ф]фmzъ-Ф„JІQe@Qр+шќ> 2ЃуР‡‡‘ Ш+ВЅ^Ѓ„¬]пЉз{иztч:јuІўlT†*Q;є...
My code:
await fs.writeFileSync('output.pdf', Buffer.from(my_string, "base64"));
Im using strapi api for my backend and i went and created a new collection called placed-orders which i will use for posting orders.In my controller file, I modified it but i keep getting the error mentioned above.This is the placed-order.js file in my controller folder. I can’t seem to find a working solution online. Any insights will be appreciated.
"use strict";
/**
* placed-order controller
*/
const { createCoreController } = require('@strapi/strapi').factories;
module.exports = createCoreController('api::placed-order.placed-order', ({strapi})=>({
async create(ctx) {
try {
const data = ctx.request.body;
const submission = await strapi.services.order.create(data);
return { success: true, submission };
} catch (err) {
ctx.throw(500, err);
}
},
}));
Using lunr to index posts in Angular. Prior to Angular 15 importing it like this worked.
import * as lunr from 'lunr';
After upgrading to Angular 15 it errors.
ERROR
Error: lunr is not a function
I recreated the error an an MVCE here.
This is the code:
import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import * as lunr from 'lunr';
interface Post {
id: string;
title: string;
description: string;
}
const posts = [
{
id: '1',
title: 'What is JavaScript?',
description:
'JavaScript is a high-level, object-oriented programming language based on the ECMAScript specification.',
},
{
id: '2',
title: 'What is Java?',
description:
'Java is a cross-platform object-oriented programming language which at first developed by the Sun Microsystems.',
},
{
id: '3',
title: 'What is React?',
description:
'React is a popular JavaScript library which heavily used to build single-page applications.',
},
];
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule],
template: `
<h1>Hello from {{name}}!</h1>
<a target="_blank" href="https://angular.io/start">
Learn more about Angular
</a>
`,
})
export class App {
name = 'Angular';
public idx!: lunr.Index;
constructor() {
this.initializeSearchIndex(posts);
}
initializeSearchIndex(posts: Post[]) {
this.idx = lunr(function () {
this.field('title');
this.field('description');
posts.forEach((post) => {
this.add(post);
});
});
}
}
bootstrapApplication(App);
And this is the error:
Console was cleared
ERROR
Error: lunr is not a function
ERROR
Error: Uncaught (in promise): TypeError: lunr is not a function
TypeError: lunr is not a function
at App.initializeSearchIndex (https://angular-muhcmg.stackblitz.io/~/src/main.ts:34:20)
at new App (https://angular-muhcmg.stackblitz.io/~/src/main.ts:31:14)
at NodeInjectorFactory.App_Factory [as factory] (https://angular-muhcmg.stackblitz.io/~/src/main.ts:44:45)
at getNodeInjectable (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/[email protected]/fesm2015/core.mjs:3445:44)
at createRootComponent (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/[email protected]/fesm2015/core.mjs:12322:35)
at ComponentFactory.create (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/[email protected]/fesm2015/core.mjs:12200:25)
at ApplicationRef.bootstrap (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/[email protected]/fesm2015/core.mjs:25405:42)
at eval (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/[email protected]/fesm2015/core.mjs:24880:28)
at _ZoneDelegate.invoke (https://angular-muhcmg.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:412:30)
at Object.onInvoke (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/[email protected]/fesm2015/core.mjs:24312:33)
I have this string:
'<span contenteditable="false" field=“something1”>Text I want 1</span>
<span contenteditable="false" field=“something2”>Text I want 2</span>
<span style="color:#000000;">Text that I dont want. </span>'How would I get an array of [‘Text I want 1’, ‘Text I want 2’]?
Right now I get all of the text, including ‘Text that I dont want’ by doing
/</?span[^>]*>(.*?)</span>/gHowever, that gets all span tags. How would I get the text between specifically span contenteditable=”false”?