Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I am using this but it is not working on MacBook if anyone helps I am very thankful.
const blobUrl = URL.createObjectURL(blob);
var link = document.createElement("a");
link.download = fileName;
link.target = "_blank";
// Construct the URI
link.href = blobUrl;
document.body.appendChild(link);
setTimeout(function () {
link.click();
// Cleanup the DOM
document.body.removeChild(link);
DOWNLOAD_COMPLETED = true;
}, 500);
const ref_1 = useRef();
const ref_2 = useRef();
const ref_3 = useRef();
<div ref={ref_1}>
<div ref={ref_2}>
<div ref={ref_3}>
</div>
</div>
</div>
When the ref_1 is unmounted, will all 3 ref.current become unavailable at once, or is there any order?
Will ref_3 umount first, then ref_2 and then ref_1?
This is the original demo and it animates the stroke-dashoffset using CSS, however only after the initial state is set or in other words on subsequent changes performed via the input field.
This is the CSS that animates the stroke-dashoffset
el-circle-progress circle {
transition: stroke-dashoffset 1s linear;
fill: none;
}
However with that approach when the percentage property is set initially the stroke does not animate.
So i’ve tried to use Angular Animation to be able to trigger the animation whenever the dashOffset state is updated.
And this is the animation.
animations: [
trigger('animateStroke', [
state(
'*',
style({
transition: 'stroke-dashoffset',
})
),
transition('*<=>*', animate('1s linear')),
]),
],
And it’s added in the template like this:
<circle
[@animateStroke]="dashOffset"
id="percent"
[ngStyle]="this.rotationTransform"
[attr.cx]="center"
[attr.cy]="center"
[attr.r]="options.radius"
[attr.stroke]="options.percentageStroke"
[attr.stroke-width]="options.strokeWidth"
[attr.stroke-dasharray]="circumference"
[attr.stroke-dashoffset]="dashOffset"
[attr.stroke-linecap]="options.strokeLineCap"
></circle>
Now I did not do this right because no animation is triggered.
Anyone know how to fix it?
I use the pattern: /..+$/g to check whether string end with more than one dot. However it did not work. I don’t know where my code went wrong, pls help!
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let text = "...Is this .. all there is..?";
//check if string end with more than one dot
let pat = /..+$/g
let result = pat.test(text)
//should return true
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>I want to develop a QR Reader extension that reads QR codes from the screen (Not the camera), like taken a screenshot of the QR an get the URL, I’m searching an reading the source code of authenticator.cc which have this feature but I can’t figure it out, I just want some insight, don’t want to get the problem solved, just a way to start, I’m building the extension with JS only.
Any suggestion is welcome, thank you!
Currently I read the authenticator source code, but can’t figure out a way to start
So in my code I have a math equations that depends on an async call to Firebase. So when I get the values back I calculate the score inside a then statement, but I can’t get the function it’s inside to return the calculated value. So for instance if I have something like:
function parentFunction(){
let result = childFuntion()
}
function childFunction(){
let query = new Promise((resolve, reject) => {
let query = asyncFirebaseCall()
resolve(query)
}
Promise.all([listofQueries])
.then((res) => {
let result = _doMathStuff(listofQueries)
//I know this is not correct but im putting the return here
return result
}
}
how do i get the value of result inside the parent function?
I am trying to create a custom text entry widget inside a Canvas (this is a WebAssembly app that is using only a canvas, like Figma does), but there does not seem to be a way to get compositionupdate events, so it is not possible to enter non-ASCII characters. In fact, for Chinese text, the composition window does not even open up, despite the canvas having text focus, so I assume that the browser does not even try to do text handling. Figma obviously supports text entry, so how do they do it?
(In case it matters, I’m using Emscripten. Also, it would be helpful to get regular text events, too. I can get the key up/down events with no problem, but does not reliably translate into the conceptual character the user thinks they typed.)
I want to make the sidebar menu display on my smartphone horizontal or sideways with icons at the top and text at the bottom, but I’ve tried using flex and others but it still fails and can’t go sideways. Is there something I’m missing?
const sidebar = document.getElementById('sidebar');
const navbarToggle = document.querySelector('.navbar-toggler');
navbarToggle.addEventListener('click', () => {
if (window.innerWidth <= 767) {
sidebar.classList.toggle('show');
}
});body {
padding-top: 70px; /* Adjusted padding top */
}
@media (max-width: 767px) {
body {
padding-top: 56px;
}
#sidebar {
display: flex;
flex-direction: column;
background-color: #343a40;
color: #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
padding: 0.5rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#sidebar .nav-link {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.8rem;
text-align: center;
padding: 0.5rem 0;
width: 100%;
}
#sidebar .nav-link i {
font-size: 1.2rem; /* Adjust icon size */
margin-bottom: 0.2rem;
}
#sidebar .nav-link.active {
font-weight: bold;
}
}
@media (max-width: 767px) and (min-width: 576px) {
#sidebar .nav-link i {
font-size: 1rem;
}
}
@media (min-width: 768px) {
#sidebar {
display: block;
position: sticky;
top: 0;
}
}
#sidebar .nav-link span {
display: block;
}
#sidebar .nav-link i {
margin-bottom: 0.25rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="styles.css">
<title>Complex Navbar and Sidebar</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<i class="fas fa-home"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-shopping-cart"></i> Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-box"></i> Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-users"></i> Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-chart-bar"></i> Reports
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<h2>Main Content</h2>
<p>This is the main content area.</p>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>I would be very grateful if anyone could explain why it can’t change.
I want to try changing the sidebar on a PC or tablet display vertically and when in the smartphone display position it becomes horizontal at the bottom of the screen with icons above the text on the smartphone screen display
I am unable to save the data of follow or following for individual user. How does social medias does it
Ive tried to run a php file every time the button is pressed. The php script then store the username in the database. But I want more optimum solution
I’m making a Laravel website, and I wanted to show the names of the fields based on their ID.
@foreach($allData as $key => $amount)
<tr>
<td>{{$key+1}}</td>
<td>{{$amount['fee_category']['name']}}</td> <!-- ERROR LINE -->
<td>
<a href="" class="btn btn-info"> Editar </a>
<a href="" class="btn btn-danger" id="delete"> Eliminar </a>
</td>
</tr>
@endforeach
However, I am getting an error in the title. I am using the model to create a function that joins the two tables to relate the ID to the name.
public function fee_category()
{
return $this->belongsTo(FeeCategory::class,'fee_category_id'.'id');
}
I use this function in the controller to return the view with the data extracted from the table.
public function ViewFeeAmount()
{
$data['allData'] = FeeCategoryAmount::select('fee_category_id')
->groupBy('fee_category_id')
->get();
return view('backend.setup.fee_amount.view_fee_amount',$data);
}
I already tried using composer update to update the project’s composer, but I still have the same results.
I’m making a Laravel website, I wanted to show the name of the fields based on their ID
@foreach($allData as $key => $amount)
<tr>
<td>{{$key+1}}</td>
<td>{{$amount['fee_category']['name']}}</td> <!-- ERROR LINE -->
<td>
<a href="" class="btn btn-info"> Editar </a>
<a href="" class="btn btn-danger" id="delete"> Eliminar </a>
</td>
</tr>
@endforeach
However, I am getting the error in the title, I am using the model to create a function that joins the two tables to relate the ID to the name
public function fee_category()
{
return $this->belongsTo(FeeCategory::class,'fee_category_id'.'id');
}
In the controller I use this function to return the view with the data extracted from the table
public function ViewFeeAmount()
{
$data['allData'] = FeeCategoryAmount::select('fee_category_id')
->groupBy('fee_category_id')
->get();
return view('backend.setup.fee_amount.view_fee_amount',$data);
}
I already tried using composer update to update the project’s composer but I still have the same results
I’m using laravel 10-livewire 3 with vite,
but it seems the Chart js can’t be loaded properly
app.blade.php (layout) :
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-bs-theme="dark">
<head>
...
@vite(['resources/js/app.js', 'resources/css/app.css', 'resources/css/style.css'])
...
</head>
<body>
...
{{ $slot }}
...
@stack('custom-scripts')
</body>
</html>
app.js
import "./bootstrap";
import "bootstrap";
import Chart from "chart.js/auto";
window.Chart = Chart;
home.blade.php (the view inside livewire components)
<div>
...
@push('custom-scripts')
<script>
...
// Pie Chart
var ctx = document.getElementById("myPieChart");
...
</script>
@endpush
</div>
I keep geeting this error message :
Uncaught ReferenceError: Chart is not defined
How to solve this ?
first time asking a question here.
So, i’m working on a tech test for a vacancy that i’m running on.
The test is about a personal expense management, and some of the features they requesting are to add, edit and delete expenses.
Right now i’m struggling with a problem on the edit function. The problem is that i have a <dialog> which is used to edit the expenses, and that <dialog> is opened when the edit button is clicked on each expense box.
But the <dialog> only opens on the very first .boxExpense, which i’ve left in the HTML to be like a example of how it works. When i click on the editBtn of the .boxExpense that are added by the user on the app, nothing happens.
The entire code is on this pen:https://codepen.io/lucasbeiio/pen/Yzdrwer
I’ve tried several different approaches, and tried to get some help from chatgpt and even google bard, but not even them could help me out on this.
Tried with some forEachs and so, but no success at all.
I create the regex /(10?|10{2,})/g to find 1,10 or 100,1000… but the code below doesn’t return the expected result. I don’t know where I went wrong, please help me!
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for a "1", followed by zero or one "0" characters:</p>
<p id="demo"></p>
<script>
let text = "1, 10, 100 or 1000?";
let result = text.match(/(10?|10{2,})/g);
//should return 1,10,100,1000 but instead return 1,10,10,10
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>I’m working with MapKit JS for the first time and have managed to get a dynamically generated simple map working. I would now like to add a CoordinateSpan so I can control the visible area but I’m having trouble working out the syntax. Here’s how I’m generating the map currently:
// Create the "Marker" annotation, setting properties in the constructor.
const event = new mapkit.Coordinate(40.7484788, -73.9854113);
const eventAnnotation = new mapkit.MarkerAnnotation(event, {
color: "red",
title: "Empire State Building",
glyphText: ""
});
// Add and show both annotations on the map
map.showItems([eventAnnotation]);
From another example I’ve found you can create a CoordinateRegion that includes a CoordinateSpan like the following:
const mapMarker = new mapkit.CoordinateRegion(
new mapkit.Coordinate(40.7484788, -73.9854113),
new mapkit.CoordinateSpan(0.05, 0.05)
);
// Create a map in the element whose ID is "map-container"
const map = new mapkit.Map("map-container");
map.region = mapMarker;
I’ve been trying to incorporate the CoordinateRegion into my map code but I keep getting errors. For example I tried changing it to the following:
// Create the "Marker" annotation, setting properties in the constructor.
const event = new mapkit.CoordinateRegion(
new mapkit.Coordinate(40.7484788, -73.9854113),
new mapkit.CoordinateSpan(0.05, 0.05)
);
const eventAnnotation = new mapkit.MarkerAnnotation(event, {
color: "red",
title: "Empire State Building",
glyphText: ""
});
// Add and show both annotations on the map
map.showItems([eventAnnotation]);
but that just generates an error in the console: Error: [MapKit] Annotation.coordinate expected a Coordinate value.