Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
const handleVisibleArray = () => {
const counter = visibleArray <= totalArrayLength ? visibleArray + 3 : 0;
setvisibleArray(counter);
};
My values go more than the total array length.
If the array length is 11, then on every click it should increase by.
♣️Help.micro⍪⍪soft.com #1877♣️947♣️7788♣️ Talk to a Person | ♣️♣️
Help.microsoft.com +1-877-947-7788 rebuilds the data utility but doesn’t fix the help.microsoft.com talk to a person. This is often a complicated issue and has required fixing as soon as possible. When this Help.microsoft.com occurs users generally get the message, ‘Recover data file’ or ‘Your help.microsoft.com isn’t working. For this help.microsoft.com talk to a person, the help.microsoft.com file must fix and recovered. To stop this Help.
https://helpmicrosoftcomtalktoapersoni.pageride.com/
The following code correctly expands the max-width of a div:
<div style="display: flex; flex-direction: column;">
<div style="max-width: 500px;">
<div style="background-color: red; height: 20px;"></div>
</div>
</div>
Result:
However, when I set any alignment, align-items on the parent-most div, align-self on the max-width div, etc, the maxWidth will no longer be used, and the actual width will be set to 0.
For example:
<div style="display: flex; flex-direction: column;">
<div style="max-width: 500px; align-self: center">
<div style="background-color: red; height: 20px;"></div>
</div>
</div>
Produces a blank screen:
How do I both align the div (to the center for example), and keep its width intact? The goal is not to resort to using width, because that won’t adjust to the parent width (which may be anything). Any solution that would keep the width, but won’t insist on taking it even if there is no space, like with width, would work.
When my Angular component HTML renders. I will get lots of errors that look like this
ERROR TypeError: Cannot read properties of undefined (reading ‘someProperty’)
In my HTML page, I have lots of bindings that look like this
<h1>{{event.title.toUpperCase()}}</h1>
In most components I call a service to fetch data from my controller in the ‘ngOnInit()’ and I know that one solution to prevent this error before the data comes back from my controller is to make the property nullable like this
event?.title
but this doesn’t seem like a practical solution, especially if I have dozens on the page.
What I have tried –
QUESTION – What’s the best solution to handle this so I don’t keep getting these errors until my page data loads?
Should I have some conditional like *ngIf=”event” and hide the page until the data is received and show some loading indicator while waiting? Or is some way to jsut prevent these error from showing in the console?
I am making a login site via JSON, and I want to check if a username matches with a password (by using array indexes to match username, password and email) but I can’t figure out how to see if the username matches with any index number and if there is an index in an array that corresponds with it in the passwords section. I can use indexOf with recursion (function that calls itself) but I have to increment the index checked by 1 which I do not know how to do. (searched for any stuff but I can’t find anything)
like this:
{
"usernames": [
"Supa", "Marwan", "Jason", "Jacob",
]
"passwords": [
"placeholder", "placeholder1", "placeholder2", "placeholder3",
]
}
function checkDetails(username, password) {
let message = document.getElementById("placeholder");
let password = document.getElementById("placeholder1");
let username = document.getElementById("placeholder2");
//part I am struggling with
let usernames = json.parse("usernames");
let passwords = json.parse("passwords");
message.innerHTML = (username === usernames[/*i want this to increment to check*/]) ?
message.innerHTML = (password === indexOf(/*I want this to be the index of the one
index that IS true to the conditional above*/)) ? m
essage.innerHTML = "Success with logging in" :
message.innerHTML = "Invalid username or password";
I am currently creating a online vr world with multiplayer, so i used networked a-frame to create the multiplayer world and i am using aframe-physics-system to create physics. But when i add a synchronized object with dynamic-body this doesnt get synchronized by the server so only the creator of the object can move it around.
<a-assets>
<template id="sphere">
<a-entity class="sphere">
<a-sphere color="blue"></a-sphere>
</a-entity>
</template>
</a-assets>
<a-entity dynamic-body position="0 3 -10" id="sphere" Networked="template:#sphere;attachTemplateToLocal:True"></a-entity>
<!--Collide event-->
<script>
AFRAME.registerComponent('foo', {
init: function() {
this.el.addEventListener('collide', function(e) {
console.log('Player has collided with ', e.detail.body.el);
e.detail.target.el; // Original entity (playerEl).
e.detail.body.el; // Other entity, which playerEl touched.
e.detail.contact; // Stats about the collision (CANNON.ContactEquation).
e.detail.contact.ni; // Normal (direction) of the collision (CANNON.Vec3).
});
}
})
</script>
im looking for:
Proxy Bookmarklets
Unblocker bookmarklets
Bookmarklets that I can get on Roblox, discord, and kbhgames.com and make them not blocked
I do not understand what the problem is with this code.
Here is my code:
export type SportsTypes = keyof typeof SportsIcons
export const sports: SportsTypes[] = Object.keys(SportsIcons);
I am typing my variable to the keys of an object.
But, when I then try to assign an array of said keys to this variable, I get the ts error:
Type 'string[]' is not assignable to type '("Football" | "GameController" | "Tennis" | "Basketball" | "PingPong" | "Volleyball" | "HockeyPuck" | "Chess" | "AmericanFootball" | "Baseball" | "SandVolleyball")[]
I have a menu which is plain HTML In there I have some images. When you click on those an action should be preformed (for example opening or closing the menu). This plain HTML menu is included by PHP.
To preform an action, I thought adding the JS onclick=”” tag to my HTML would be a good idea. Now I have created some .js files that are in a subdirectory called js.
Now is my question how to pass the .js files located in the subdir to the onclick=”” tag.
(TLDR)
/index.php <- there is the navigation bar inside
/js/file.js <- want to access this file via onclick=”” in index.php
How can I do that
I have an array, i need to sort the array based on one property if that exists.
const arr = [
{
"item_name": "Cake",
"quantity": 1,
},
{
"item_name": "Choclate",
"out_of_stock_detail": {
"out_of_stock_quantity": 1
},
"quantity": 3,
}
]
let output = arr.sort((a,b) => {
if(a.out_of_stock_detail){
return 1
}else{
return -1
}
})
console.log(output)What am I missing in this one, Any help is appreciated
I build an eCommerce App with an admin dashboard, and I have faced an issue when adding or updating an image for every product, and can’t handle this error. the images are being stored in the database as a URL link and being stored in the uploads folder, but not being displayed in the table, and that’s what appears in the console on the browser.
this error shows in the console “Failed to load resource: the server responded with a status of 404 (Not Found)“. and can’t handle with this issue
Beurer-BEU-FC40-1638202407224.png:1 GET http://localhost:3000/public/uploads/Beurer-BEU-FC40-1638202407224.png 404 (Not Found)
this is the server code for the location of images (uploads) in app.js
app.use('../public/uploads', express.static(__dirname + '../public/uploads'))
And this is the multer code for image files.
// file types
const FILE_TYPE_MAP = {
'image/png': 'png',
'image/jpg': 'jpg',
'image/jpeg': 'jpeg'
};
const storage = multer.diskStorage({
destination: function (req, file, cb) {
const isValid = FILE_TYPE_MAP[file.mimetype];
let uploadError = new Error('invalid image type');
if (isValid) {
uploadError = null;
}
cb(uploadError, 'public/uploads');
},
filename: function (req, file, cb) {
const fileName = file.originalname.split(' ').join('-');
const extension = FILE_TYPE_MAP[file.mimetype];
cb(null, `${fileName}-${Date.now()}.${extension}`);
}
});
const uploadOptions = multer({ storage: storage });
And this is the API code for posting a product with an image.
router.post(`/`, uploadOptions.single('image'), async (req, res) => {
// validate the category of product
const category = await Category.findById(req.body.category);
if (!category) return res.status(400).send('Invalid Category');
// validate the image file of the product
const file = req.file;
if (!file) return res.status(400).send('No image in the request');
const fileName = file.filename;
const basePath = `${req.protocol}://${req.get('host')}/public/uploads/`;
let product = new Product({
name: req.body.name,
description: req.body.description,
richDescription: req.body.richDescription,
image: `${basePath}${fileName}`,
brand: req.body.brand,
price: req.body.price,
category: req.body.category,
countInStock: req.body.countInStock,
rating: req.body.rating,
numReviews: req.body.numReviews,
isFeatured: req.body.isFeatured
});
product = await product.save()
if(!product) return res.status(404).send({success:false, data: message, message: "the product not found"})
res.status(200).send({ success: true, data: product })
})
Could anyone help me?
this is how it looks with online CDN.how I want it to look
and when I give it the offline CDN path
this is how it looks
The HTML table is dynamically created with the function createTableRow(empDetail), which is working but when the rows/cells values are updated/changed it reflects in the HTML table but I want the same respective changed values to get changed in LocalStorage against the respective id. Help is need for function tableUpdate()
Note: There is only one key i.e. empDetails and the same key has multiple id’s of respective rows (Employee) created
— HTML CODE —
<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>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="main-container">
<h2>Employee Details</h2>
<button id="addNewEmployee">+ Add New Employee</button>
<div class="table-container-header">
<table>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Designation</th>
<th>Salary</th>
<th>Action</th>
<th class="empDetailIdHeader">Local Storage ID</th>
</tr>
</table>
</div>
<div class="table-container-content">
<table id="employeeTable">
</table>
</div>
</div>
<!-- Model Code -->
<div id="#modal-container">
<dialog id="favDialog">
<h2>Enter Employee Details</h2>
<form id="modal-form" method="dialog">
<section>
<p>
<label for="employeeId">Employee ID: </label
><input type="text" id="employeeId" />
</p>
<p>
<label for="employeeName">Name: </label
><input type="text" id="employeeName" />
</p>
<p>
<label for="designation">Designation: </label
><input type="text" id="designation" />
</p>
<p>
<label for="salary">Salary: </label
><input type="text" id="salary" />
</p>
</section>
<menu>
<button id="cancelModal" type="reset">Cancel</button>
<button type="submit" id="submitModal">SUBMIT</button>
</menu>
</form>
</dialog>
</div>
<script src="./script.js"></script>
</body>
</html>
— CSS Code —
/* th,
td,
tr */ {
border: black solid 1px;
width: 1000px;
text-align: center;
}
table td,
table th {
border: solid 1px black;
width: 200px;
}
table {
border-collapse: collapse;
}
.fas {
margin: 0 10px;
}
.empDetailIdHeader,
.empDetailId {
display: none;
}
— JS Code —
let addNewEmployee = document.getElementById("addNewEmployee");
let modal = document.getElementById("favDialog");
let closeModal = document.getElementById("cancelModal");
let modalForm = document.getElementById("modal-form");
let submitModal = document.getElementById("submitModal");
let tableContainerHeader = document.querySelector(".table-container-header");
let tableContainerContent = document.querySelector(".table-container-content");
let empTable = document.getElementById("employeeTable");
const showModal = addNewEmployee.addEventListener("click", function () {
modal.showModal();
});
closeModal.addEventListener("click", function () {
modal.close();
});
let employeeId = document.getElementById("employeeId");
let employeeName = document.getElementById("employeeName");
let designation = document.getElementById("designation");
let salary = document.getElementById("salary");
let uniqueEmpId = document.getElementById("empDetailId");
let tr = null;
let empDetails = [];
if (localStorage.getItem("empDetails")) {
empDetails.map((empDetail) => {
createTableRow(empDetail);
});
}
let onModalSubmit = modal.addEventListener("submit", function (e) {
e.preventDefault();
if (tr == null) {
if (employeeId && employeeName && designation && salary != "") {
let empDetail = {
id: new Date().getTime(),
name: {
employeeIdLocal: employeeId.value,
employeeNameLocal: employeeName.value,
designationLocal: designation.value,
salaryLocal: salary.value,
uniqueEmpId: new Date().getTime(),
},
};
modal.close();
empDetails.push(empDetail);
localStorage.setItem("empDetails", JSON.stringify(empDetails));
modalForm.reset();
createTableRow(empDetail);
}
} else {
tableUpdate(e);
}
});
/////// Create Table Row
function createTableRow(empDetail) {
const tEmployeeMarkup = `
<tr class="fullEmpDetail">
<td id="teId">${empDetail.name.employeeIdLocal}</td>
<td id="teName">${empDetail.name.employeeNameLocal}</td>
<td id="teDesignation">${empDetail.name.designationLocal}</td>
<td id="teSalary">$${empDetail.name.salaryLocal}</td>
<td>
<i class="fas fa-eye"></i>
<i value="Edit" type="button" id="update-row" class="edit-row fas fa-pencil-alt"></i>
<i value="Delete" type="button" class="remove-row fas fa-trash-alt"></i>
</td>
<td id="empDetailId" class="empDetailId">${empDetail.id}</td>
</tr>
`;
empTable.innerHTML += tEmployeeMarkup;
document.getElementById("modal-form").reset();
}
/////// Remove Row
function onDeleteRow(e) {
if (!e.target.classList.contains("remove-row")) {
return;
}
const btn = e.target;
btn.closest("tr").remove();
}
tableContainerContent.addEventListener("click", onDeleteRow);
//////////// Edit Row
tableContainerContent.addEventListener("click", onEditRow);
function onEditRow(e) {
if (e.target.classList.contains("edit-row")) {
modal.showModal();
tr = e.target.parentNode.parentNode;
// console.log(tr);
let tableEmpId = tr.cells[0].textContent;
let tableEmpName = tr.cells[1].textContent;
let tableEmpDesignation = tr.cells[2].textContent;
let tableEmpSalary = tr.cells[3].textContent;
employeeId.value = tableEmpId;
employeeName.value = tableEmpName;
designation.value = tableEmpDesignation;
salary.value = tableEmpSalary;
}
}
///////////////// Update Row
function tableUpdate(e) {
let tableEmpId = document.getElementById("teId");
let tableEmpName = document.getElementById("teName");
let tableEmpDesignation = document.getElementById("teDesignation");
let tableEmpSalary = document.getElementById("teSalary");
tr.cells[0].textContent = employeeId.value;
tr.cells[1].textContent = employeeName.value;
tr.cells[2].textContent = designation.value;
tr.cells[3].textContent = salary.value;
modalForm.reset();
modal.close();
let tableEmpIDs = document.querySelectorAll(".empDetailId");
let empDetails = JSON.parse(localStorage.getItem("empDetails"));
for (let row = 0; row < tableEmpIDs.length; row++) {
for (let i = 0; i < empDetails.length; i++) {
empDetails[i].name.employeeIdLocal = tableEmpId.textContent;
empDetails[i].name.employeeNameLocal = tableEmpName.textContent;
empDetails[i].name.designationLocal = tableEmpDesignation.textContent;
empDetails[i].name.salaryLocal = tableEmpSalary.textContent;
break;
}
}
localStorage.setItem("empDetails", JSON.stringify(empDetails));
}
I am using a Flickity carousel in a vue (frontend) ruby on rails (backend) application. When my app loads the items in my carousel display vertically, as if the carousel didn’t even exist. If I resize my window, then the carousel kicks in (behaves like a carousel).
<template>
<Flickity ref="flickity" :key="keyIncrementer" :options="computedOptions">
<item1 />
<item2 />
<item3 />
</Flickity>
</template>
<script>
import Flickity from "vue-flickity";
import { debounce } from "lodash";
const DEFAULT_OPTIONS = {
cellAlign: "left",
pageDots: false,
prevNextButtons: true,
};
export default {
components: {
Flickity,
},
props: {
options: {
type: Object,
required: false,
default: () => ({}),
},
},
data() {
return {
keyIncrementer: 0,
};
},
computed: {
computedOptions() {
return { ...DEFAULT_OPTIONS, ...this.options };
},
},
created() {
this.$root.$on("refresh-carousel", this.refresh);
},
mounted() {
this.refresh();
window.addEventListener("resize", this.debounceRefresh);
},
beforeDestroy() {
window.removeEventListener("resize", this.debounceRefresh);
},
methods: {
debounceRefresh: debounce(function () {
this.refresh();
}, 100),
refresh() {
this.$nextTick(() => {
this.keyIncrementer++;
});
},
},
};
</script>
If anyone knows why this is happening, that would help. I would like to have a carousel as soon as the component mounts, without resizing.
I have a fillable PDF with a submit button on it, it submits the PDF using the javascript for the Fillable PDF submit button as:
var myURL=encodeURI("https://xxxxxxx.com/SubmitForm.php");
this.submitForm({cURL: myURL, cSubmitAs: "PDF"});
If all goes well, the server sends back an bare FDF just to say success:
/FDF
<<
/JavaScript << /After (app.alert("Submitted. Thank you.");) >>
>>
>>
endobj
trailer
<<
/Root 1 0 R
>>
%%EOF
EOD;
It submits the whole PDF to my server and that part is great and works fine. The problem is that after its done submitting I get this error:
“Some features have been disabled to avoid potential security risks….”
What am I doing wrong? Like I said, its actually working fine, but still gives me this ambiguous error which leads my users to believe something is wrong & didn’t submit.
Does anybody have any idea what I could do to fix this? Is there a better FDF string I can send back?
Thanks for any help.