Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I am trying to deploy this web app on GitHub but it gives 404 error file not found for songs folder however it works fine on localhost all others assists file are loading except this.
this is the repo- https://github.com/Hrxgt/breeze.github.io
Please check this file paths are all correct why it doent load songs?
I Want to render single header and footer to every html page
I want header and footer to all of my pages in the website.
Kindly give me the solution to add or render a single header and single footer to every page, so that i don’t need to rewrite paste the code of header and footer again and again on each html file. I need solution with proper code and proper guide Please.
Here is my website name : vortifytech and solution
I used the code below but it’s not working
Kindly provide the solution with code and proper guide.
your text
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<script>
$(function () {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
I’ve just noticed strange behaviour with rendering before script is being performed. I always thought, that there is no chance for browsers to dequeue a task from render queue and execute it before script tag, since this is a single thread. And as you will see, it’s not true. There is a simple example of code below:
console.log('SCRIPT EXECUTED')<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>HTML</title>
<script>
requestAnimationFrame(function animate(time) {
console.log('RAF', performance.now());
});
</script>
</head>
<body>
<h1>Hello world</h1>
<script src="./script.js"></script>
</body>
</html>One may see inconsistent output in console. Sometimes render comes up before script and vice versa. It may cause to flickering in UI for example.
Could anyone give a meaningful explanations of this?
I am trying to build a small Discord bot, but it can’t read/acces messages.
The bot has all permissions, but I had to initialise the client like this
const Client = new Discord.Client({intents: ["AutoModerationConfiguration"]});
because else the Bot would crash.
const Discord = require("discord.js");
const client = new Discord.Client();
client.on('ready', () => {
console.log(`Logged in as ${client.user.tag}!`);
});
client.on('message', msg => {
console.log('Message received')
if (msg.content === 'ping') {
msg.reply('Pong!');
}
});
Client.login('Token');
I added code that would log any sent messages, even if they aren’t a command, but the Bot doesn’t log anything.
Do I need to initialise the client in a different way?
I am creating an online store project using pure HTML CSS AND JS and I want to create the functionality of adding products to the cart, but when I click the add to cart button, the product is not added and does not appear in another cart.html file
Important: cart.html is a separate file to which I want to add the added products from the index.html file
Below is my code:
// Add to cart function
function addCartBtn() {
let cartBtn = document.querySelectorAll(".add-cart-btn");
cartBtn.forEach(btn => {
btn.addEventListener("click", () => {
const img = btn.parentElement.parentElement.children[0].children[1];
const title = btn.parentElement.parentElement.children[1];
const author = btn.parentElement.parentElement.children[2];
const price = btn.parentElement.parentElement.children[3];
fetch('cart.html').then(function (response) {
// The API call was successful!
return response.text();
}).then(function (html) {
// Convert the HTML string into a document object
let parser = new DOMParser();
let doc = parser.parseFromString(html, 'text/html');
let cart = doc.querySelector('.cart .items');
let item = document.createElement("div");
item.classList.add("item");
item.innerHTML =
`
<div class="image"><img src="${img.src}" alt=""></div>
<div class="item-info">
<div class="title">${title.textContent}</div>
<div class="author">${author.textContent}</div>
</div>
<div class="price-info">
<div class="price">${price.textContent}</div>
<div class="delivery">Dostawa od 9,99 zł</div>
</div>
<div class="quantity">
<div class="minus">-</div>
<div class="number">1</div>
<div class="plus">+</div>
</div>
<div class="buttons">
<button><i class="fa-regular fa-heart"></i></button>
<button><i class="fa-regular fa-trash-can"></i></button>
</div>
`
console.log(cart)
cart.appendChild(item);
}).catch(function (err) {
// There was an error
console.warn('Something went wrong.', err);
});
})
})
}
// Displaying recommended books from a JSON file
fetch("json/recommended.json").then(function(response){
return response.json();
})
.then(function(products){
let book = document.querySelector("#recommended .swiper-wrapper");
let out = "";
for(let product of products){
out += `
<div class="box swiper-slide">
<div class="image">
<div class="sale">${product.sale}</div>
<img src="${product.img}" alt="${product.author}/${product.title}">
<div class="fav-btn"><i class="fa-solid fa-heart-circle-plus"></i></div>
</div>
<div class="title">${product.title}</div>
<div class="author">${product.author}</div>
<div class="price">${product.price} <span class="discount">${product.discount}</span></div>
<div class="rating">${product.rating}</div>
<div class="btn"><button class="add-cart-btn"><i class="fa-solid fa-cart-plus"></i> Dodaj do koszyka</button></div>
</div>
`;
book.innerHTML = out;
addCartBtn()
// Rating system
let rate = document.querySelectorAll("#recommended .rating");
rate.forEach(rt => {
let nr = rt.innerText;
let icon = '<i class="fa-solid fa-star"></i>';
let result = icon.repeat(nr);
rt.innerHTML = result;
})
// Checking whether the product is on sale
let sale = document.querySelectorAll(".sale");
sale.forEach(pr => {
if (pr.innerText === "") {
pr.style.display = "none";
}
})
}
});
I’ve already tried to transfer the code to the cart.html file, I’ve tried literally everything and I have no idea what might be wrong. The added item is displayed in console.log, but it does not appear on the cart.html page in the cart list
Buildfire: I’m looking to add some advertisement delivery services to my BuildFire app. AdMob or AdSense.
AdMob requires access to configuration files, such as iOS’ Info.plist file. I don’t see a way to configure that from the interface.
AdSense can be included with some javascript embeds, is that the go to way? Are there any best practices or recommendations for getting this done?
I guess there’s a third option of adding iFrames but I wonder if this might be blocked within the editor after deploying the changes. Will this be an issue?
So I currently have a component that looks like this:
<Parent>
<Child/>
</Parent>
However, sometimes I want to only return:
<Child/>
This could be done like this:
if (condition) {
return <Child/>
}
return (
<Parent>
<Child/>
</Parent>
)
The problem is when condition is met (true) <Child/> will re-render. It’s a shame because none of the props/state inside <Child/> change and this component can be quite expensive to render.
I would prefer not to rewrite <Parent/> so that what is needed in it becomes a sibling to <Child/> as it’s a big change.
How would I go about stopping this unnecessary render of <Child/> each time condition is met.
I have tried to use React.memo but it wasn’t working how I expected.
I’m encountering an issue when attempting to create a dynamic image path based on the props passed using Vue.js. I’ve tried creating variables with the images, using CSS variables, and changing the path to the public folder (which worked, but I need the images to be in the src folder for an optimization plugin). I’ve consulted the documentation, but I’m still facing difficulties.
Here’s a snippet of my code:
<script>
export default {
name: 'card',
props: {
product: String,
text: String,
},
methods:{
redirect(){
this.$router.push(this.product)
}
}
}
</script>
<template>
<div @click="redirect()" class="card" :style="`background-image: url(/src/assets/images/${product}/cardImg.svg)`">
<div class="card-text d-flex flex-column gap-3">
<div class="d-flex align-items-center justify-content-between">
<img :src="`/src/assets/images/${product}/${product}Logo.svg`" alt="Logo">
<i class="bi bi-arrow-right"></i>
</div>
<p>{{text}}</p>
</div>
</div>
</template>
<style scoped>
.card{
max-width: 90%;
width: 402px;
height: 568px;
background-size: cover;
border-radius: 24px;
padding: 2rem 1rem;
background-repeat: no-repeat;
}
.card:hover{
scale: 105%;
}
img{
filter: brightness(100);
height: 40px;
}
.bi-arrow-right {
color: #ffffff;
scale: 200%;
}
p{
color: #FFFFFF;
}
.card-text{
position: absolute;
bottom: 0;
width: 350px;
}
</style>
What did you try and what were you expecting?
I’ve attempted the following approaches:
I was expecting that one of these approaches would successfully generate dynamic image paths based on the props passed to the Vue component. However, I’m still facing difficulties, and the paths are not resolving as expected. I consulted the documentation, but I couldn’t find a solution.
<input type="number" oninput="this.value=this.value.slice(0,5)"/>
I’m trying to limit the number of char allowed in the field, but when typing period, the cursor moves to the beginning and the period symbol is not typed?
How can I fix this behavior?
Thanks
Specified oninput field to slice the value of input field, it worked fine but when typing period symbol the cursors moves to the front, it doesn’t do that the second time.
I have an array called Users[] which holds class instances of User. I create this array by mapping over query results like so:
function GetUserByUserData(data : UserData[] | ReadonlyArray<UserData>) : User[]
{
return data.map((userData) => {
return new User(UserData);
});
}
Note: UserData is an object of type {id: number; [key: string]: any;}.
Then, I use a method to create rows based on some class properties like so:
//User class
export default class User
{
private _data: UserData;
get data()
{
return this._data;
}
}
let rows = Users.map((user) => makeRowFromUser(user));
function makeRowFromUser(user: User)
{
console.log(user); //logs {_data}
console.log(user.data); //undefined
console.log(user._data); //logs data normally
}
I realize since _data is private I shouldn’t be able to access it using user._data.
Why does this happen? Does array.map destructure the Users[] array? Does the user argument get destructured before being passed to the function? And since this is unintended behavior on my part, is there a way to prevent this from happening so I can pass the User class instance as a class instance?
I am integrating the Facebook Messenger plugin into my website, but I encounter an error related to Content Security Policy (CSP). When I add the code snippet for the plugin, the following error message appears:
I have verified that the page ID is correct and the Facebook page is live. Here are the steps I’ve taken so far:
Checked the Facebook page ID to ensure it’s correct.
Verified that the Facebook page is publicly accessible and live.
Added the plugin code snippet as instructed in the Facebook documentation.
Despite these steps, the issue persists. Here is the snippet of code where I’m adding the plugin (excluding any sensitive information):
I created a web app with react Js. My goal is to create a form that when completed add the data to an existing excel file that is shared online. I need to edit rows too if I’m changing data of an existing row.
How can I achieve this?
Thanks in advance
E.g.: I have a form with 3 inputs: name, surname and address. When I complete the form and press send, I want that these info are added in a new row of a shared online excel file.
I want a add education form modal to be displayed when the add education button from the education tab is clicked. But the modal addEducationModal is not displayed as expected. this is the error i get from the inspect panel:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at <anonymous>:15:38
at b (jquery-3.6.0.min.js:2:866)
at Function.globalEval (jquery-3.6.0.min.js:2:2905)
at Object.dataFilter (jquery-3.6.0.min.js:2:80720)
at jquery-3.6.0.min.js:2:79185
at l (jquery-3.6.0.min.js:2:79587)
at XMLHttpRequest.<anonymous> (jquery-3.6.0.min.js:2:82355)
at Object.send (jquery-3.6.0.min.js:2:82714)
at Function.ajax (jquery-3.6.0.min.js:2:78291)
at S._evalUrl (jquery-3.6.0.min.js:2:80586)
this the php file , jobSeekerProfile.php:
<?php
session_start(); // Start the session
include("connect.php");
// Include header and tabs for non-AJAX requests
if (empty($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
include("homeHeader.php");
include("jobSeekerTab.html");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Senior UX Designer Job Listing</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-4">
<script>
$(document).ready(function () {
var educationContent = <?php echo json_encode($educationContent); ?>;
// Inject the table into the "profile" tab pane
$('#v-pills-profile').html(`
<h2>Profile</h2>
<!-- Nav tabs for Basic Details, Education, and Experience -->
<ul class="nav nav-tabs" id="profileTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="basicDetails-tab" data-toggle="tab" href="#basicDetails" role="tab" aria-controls="basicDetails" aria-selected="true">Basic Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="education-tab" data-toggle="tab" href="#education" role="tab" aria-controls="education" aria-selected="false">Education</a>
</li>
</ul>
<div class="tab-content">
<!-- Basic Details Tab -->
<div class="tab-pane fade show active" id="basicDetails" role="tabpanel" aria-labelledby="basicDetails-tab">
<!-- <h4 class="mt-3">Basic Details</h4> -->
<form action="updateJobSeekerProfile.php" method="post" enctype="multipart/form-data">
// form code
</form>
</div>
<!-- Education Tab -->
<div class="tab-pane fade" id="education" role="tabpanel" aria-labelledby="education-tab">
${educationContent}
<!-- Add Education Button -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addEducationModal" id="addEducationBtn">Add education</button>
</div>
</div>
</div>
`);
});
</script>
</div>
<!-- Add Education Modal -->
<div class="modal fade" id="addEducationModal" tabindex="-1" aria-labelledby="addEducationModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addEducationModalLabel">Add Education</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="addEducationForm">
<!-- Input fields for University, Major, StartDate, EndDate, Degree -->
<div class="mb-3">
<label for="university" class="form-label">University</label>
<input type="text" class="form-control" id="university" name="university" required>
</div>
<!-- Add other fields (Major, StartDate, EndDate, Degree) similarly -->
<!-- ... -->
<button type="submit" class="btn btn-primary">Add</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
<script src ="scripts.js"></script>
</body>
</html>
The script to display the add education modal when the button is clicked in scripts.js:
$(document).ready(function () {
$(document).on('click', '#addEducationBtn', function() {
var addEducationModal = new bootstrap.Modal(document.getElementById('addEducationModal'));
addEducationModal.show();
});
});
Although I have used event delegation for the “Add Education” button in script.js, the modal is still not being triggered.
How can I use lottie in nextjs project (App Structure) for loading project to load an animated logo
— I tried to add "use client"; but no thing happens and tried import Lottie from react-lottie as a dynamic import but the same problem happens no animation on screen but if I change any value of the component after it’s mounted it shows the animation
I created code that checks variants before adding them for duplicates. The PHP code itself works, but I have a problem with the JS which does not want to work with the PHP code and which checks for duplicates, which is why the error message does not want to be displayed. Can anyone help me what I’m doing wrong?
public function __construct() {
add_action('save_post', array($this, 'saveCustomVariantsMetabox'), 10, 2);
}
public function saveCustomVariantsMetabox($post_id, $post) {
// Verify the nonce before proceeding.
if (!isset($_POST['custom_variants_nonce']) || !wp_verify_nonce($_POST['custom_variants_nonce'], plugin_basename(__FILE__))) {
return $post_id;
}
// Check if the user has permission to edit the post.
if (!current_user_can('edit_post', $post_id)) {
return $post_id;
}
// Do not save during autosave or bulk edit.
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE || isset($_REQUEST['bulk_edit'])) {
return $post_id;
}
// Now, save the custom variants data
$custom_variants = (isset($_POST['variants']) && !empty($_POST['variants'])) ? $_POST['variants'] : [];
// Flag for duplicates
$has_duplicates = false;
// Sanitize and prepare for duplicate check
$sanitized_variants = [];
$existing_variants_hashes = []; // Store hashes of existing variants
$has_duplicates = false; // Flag to track if duplicates are detected
foreach ($custom_variants as $index => $variant) {
// Sanitize user input.
$variant['id'] = sanitize_text_field($variant['id']);
$variant['dimensions'] = sanitize_text_field($variant['dimensions']);
$variant['width'] = sanitize_text_field($variant['width']);
$variant['height'] = sanitize_text_field($variant['height']);
$variant['regular_price'] = floatval($variant['regular_price']);
$variant['sale_price'] = floatval($variant['sale_price']);
$variant['weight'] = sanitize_text_field($variant['weight']);
$variant['sku'] = sanitize_text_field($variant['sku']);
$variant['shipping_class'] = sanitize_text_field($variant['shipping_class']);
$hash = md5($variant['width'] . $variant['height'] . $variant['regular_price']);
if (in_array($hash, $existing_variants_hashes)) {
// Set flag to true if duplicate is found
$has_duplicates = true;
break;
}
// Save hash for further comparison
$existing_variants_hashes[] = $hash;
$sanitized_variants[] = $variant;
}
// Check if duplicates were found
if ($has_duplicates) {
update_post_meta($post_id, 'custom_variants_duplicate', '1');
} else {
delete_post_meta($post_id, 'custom_variants_duplicate');
update_post_meta($post_id, 'custom_variants', $sanitized_variants);
}
return $post_id;
}}
function check_duplicate_variants_before_publish() {
global $post;
// Pobierz wartość metadanych
$hasDuplicateVariant = get_post_meta($post->ID, 'custom_variants_duplicate', true);
// Konwertuj wartość na wartość logiczną
$hasDuplicateVariant = $hasDuplicateVariant === '1' ? true : false;
// Uruchom skrypt tylko jeśli istnieje duplikat
if ($hasDuplicateVariant) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#publish').click(function(e){
var hasDuplicateVariant = <?php echo $hasDuplicateVariant === '1' ? 'true' : 'false'; ?>;
if (hasDuplicateVariant) {
e.preventDefault();
alert('Wykryto duplikat wariantu. Proszę usunąć duplikat przed opublikowaniem posta.');
return false;
}
return true;
});
});
</script>
<?php
}
}
add_action('admin_footer', 'check_duplicate_variants_before_publish');
I know it has something to do with the error on these lines, I know it’s something to do with an error with these lines, but I have no idea how to fix it
var hasDuplicateVariant = <?php echo $hasDuplicateVariant === '1' ? 'true' : 'false'; ?>;