Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I am using Ember JS for an application, i want to show the full loader before updating my DOM, like
Ember.$("#full-loader").css("display","block");
someFuncToUpdateDOM();
Ember.$("#full-loader").css("display","none");
The full-loader is never shown, but when I use setTimeOut() on calling the someFuncToUpdateDOM(), now the full-loader shows!!!. What causes this?
Note: I have utilised the didRender hooks too!!, the above code is only for reference.
I want to know how to access a user detail from auth object in the typescript file in Angular.
I am getting this error, Property ’email’ doesn’t exist on type ‘Observable <User | null
Although in html file, I am able to access the user email like this –
I tried accessing the email directly but I am not able to do so and also I tried searching online but can’t find anything relevant.
I’d like the ordered list function to be ‘continuous’ if I add text between two points.
Example :
Step 1 : Creation of a ordered list with two elements : OK
Step 2 : I add text between this two points by making two line breaks at the end of 1. NOT OK
But I’d like “2. Title 2” to stay (like in Word for instance).
Would you have an idea? Thank you
I’m trying to create a responsive sidebar using HTML CSS and js, I’ve written the code below this is not working as I expected it to work, I want when the window width is a maximum of 1231px then the sidebar is hidden to see the sidebar have to click on the toggle button, the code is not working correctly please help me to fix my codebase.
let toggleSideBarBtn = document.getElementById("toggleSideBarBtn")
toggleSideBarBtn.addEventListener("click", (event) => {
let sidebar = document.getElementById("sidebar")
sidebar.classList.contains("d-none") ? sidebar.classList.remove("d-none") : sidebar.classList.add("d-none")
console.log(sidebar)
}); * {
margin: 0;
padding: 0;
}
.containerMain {
display: flex;
}
.sidebar {
width: 400px;
height: 100vh;
z-index: 0;
background: red;
padding: 10px;
}
.togglesidebar {}
.bodyContainer {
padding: 50px;
}
.d-none {
display: none;
}
@media screen and (max-width: 1231px) {
.sidebar {
display: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="containerMain">
<div class="sidebarContainer">
<button class="togglesidebar" id="toggleSideBarBtn">
toggle
</button>
<div class="sidebar" id="sidebar">
</div>
</div>
<div class="bodyContainer">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui dignissimos exercitationem temporibus quis
tempore dolores debitis? Facere saepe, debitis aperiam eos dicta a architecto vitae maxime tempora veritatis
quo voluptatibus amet sunt nihil perferendis ipsum reiciendis ipsam? Atque quia veniam possimus veritatis,
dolores maiores eveniet quas eum ut, voluptatum, doloribus eos! Sit fugit magnam deleniti rem similique
delectus. Reiciendis, dolorem? Qui vitae quibusdam iusto similique quos voluptatem dicta minus ea, hic esse
fuga asperiores, consequuntur nihil. Temporibus ab veniam esse, cum fugit alias maiores quos hic rerum
blanditiis accusamus magnam corporis nisi iure recusandae. Explicabo nulla nostrum dolorem dolorum adipisci
natus suscipit cupiditate sunt magni eveniet delectus magnam repellat perferendis ipsum ab minus tempore
doloremque amet neque voluptatibus provident sequi, deserunt beatae. Quae quod natus distinctio temporibus,
veritatis, obcaecati harum nemo aspernatur modi provident libero quas dignissimos earum eligendi laudantium
est quo perspiciatis sit nisi necessitatibus! Consectetur ducimus blanditiis quae nostrum omnis repellendus,
ullam provident, modi, facilis exercitationem impedit corporis perspiciatis. Maiores quidem aliquam amet
nulla sit debitis quo fugiat. Dolor, neque minima. Amet fugit nisi nulla consectetur, praesentium aspernatur
ipsa possimus optio, illum, ducimus nihil esse dolores vitae laboriosam voluptatum? Veritatis dolor pariatur
recusandae quisquam, neque corporis quidem doloremque numquam eius voluptatum! Reiciendis rem, fugit eum
facere, voluptas fuga dolor mollitia saepe commodi sint eligendi dolore repellendus sunt necessitatibus
minus? Voluptas, itaque culpa, aliquam nesciunt dicta exercitationem incidunt eveniet omnis harum est
mollitia non eaque minima obcaecati ex fugiat ab architecto officiis doloremque! Optio ipsum, culpa maxime
mollitia sapiente sequi nisi necessitatibus harum aut atque vel ullam totam quis ex vitae porro pariatur
placeat itaque tenetur voluptatum explicabo autem delectus! Voluptatum perferendis suscipit fugit ea optio
porro ratione. Officia exercitationem, voluptas nihil laudantium quidem rerum dignissimos iste amet non
minima odio nesciunt tempore quam ullam accusamus eius dolore delectus ducimus? Alias eaque vitae sit
blanditiis magnam earum, adipisci deserunt deleniti optio, quasi, est modi repellendus similique mollitia
architecto sequi? Culpa praesentium exercitationem quisquam, ipsam, commodi sunt facere autem magni, aut
architecto sequi veniam dignissimos. Possimus rerum, molestias dicta hic numquam, ratione in tenetur id
mollitia magnam optio voluptatum odio doloremque et provident minima soluta perspiciatis quis aliquam
asperiores modi exercitationem. Iusto quis minima nemo dolor eligendi praesentium a quasi perferendis
repellendus, nisi deleniti distinctio. Incidunt, eligendi perspiciatis cupiditate alias sapiente similique
ex ut in officiis quod velit odit eius dicta, autem, facere quae placeat eos? Aliquam esse animi recusandae
similique repellendus. Minima veritatis distinctio labore. Mollitia exercitationem voluptatem veritatis ut
quis expedita corrupti dignissimos, provident officia non totam repellendus dolorem optio dolorum dicta nemo
consequatur sunt nulla laudantium! Iste quisquam repudiandae voluptate quia possimus ab veritatis,
praesentium in, at deleniti, ipsa accusantium obcaecati totam inventore eaque aspernatur consequuntur.
Facilis eos mollitia facere aperiam saepe, deleniti recusandae, tempore doloribus, assumenda eveniet fugit
itaque doloremque asperiores. Obcaecati voluptatibus repellendus voluptate at dolorum nostrum, quasi quidem
cumque, ipsum assumenda voluptates architecto atque nesciunt consequuntur consectetur dicta perferendis ab.
Dolore quam error illum doloremque, omnis maiores, rem laudantium dolorem eius harum consequuntur vero?
</div>
</div>
</body>
</html>This is my element:
<div class="cursor-pointer" @click="$event.target.classList.toggle('active')">
<BoldFont/>
</div>
I wanted to make it so that when you click anywhere in the div, it toggles the class.
However, I didn’t expect that clicking the child element will block it (is that the case normally??).
It seems to make sense as I’m referring to event target. But how do I toggle class on click, even when it’s a click on a child?
how can I connect the futronic fingerprint device to apex oracle and use it to authenticate users ?
What code should I use ?
How do I do this ?
I searched but did not find anything about this.
Please, if anyone knows, tell me exactly what I should do.
thanks a lot.
I use .NET Framework 4.7 with ASP.NET MVC to generate Forms and for validating I have JQuery Validate, which works for classic input fields, but for @Html.CheckBoxFor it generated 2 inputs with the same name, the first is standard input, the second is hidden, it is default by .NET, but JQuery validate does not work with this.
Only what works for me is adding validation rule for a specific element, but this approach does not delegate message, only apply the CSS class style to add red background to invalid input
What works but is not ideal solution yet
$("input[name='Do[0].IsSelected']:not(:hidden)").rules("add", { required: true, messages: { required: 'field is required.' } });
What does not work:
C# code:
<div class="col-lg-7 do-checkbox">
@Html.CheckBoxFor(m => m.Do[i].IsSelected, isViewModeForCheckBox, new { id = "chb_do" + i, onchange = "RemoveUpload(" + i + ");", @class = "form-check-input" })
@Model.Do[i].Text
</div>
Which generates this HTML output:
<div class="col-lg-7 do-checkbox">
<input class="form-check-input" data-val="true" data-val-required="The IsSelected field is required." disabled="" id="chb_do0" name="Do[0].IsSelected" onchange="RemoveUpload(0);" readonly="" type="checkbox" value="true" aria-invalid="true"><label id="Do[0].IsSelected-error" class="border-danger shadow-danger" for="Do[0].IsSelected" style="display: none;"></label><input name="Do[0].IsSelected" type="hidden" value="false" class="valid">
Info text
</div>
JQuery validate:
$("form[name='reg']").validate({
ignore: ":hidden",
errorClass: "border-danger shadow-danger",
errorPlacement: function () { },
rules: {
"Reg.Name" : "required",
"Do[0].IsSelected": {
required: true,
email: function (element) {
return $("input[name='Do[0].IsSelected']:not(:hidden)").is(":checked");
}
},
},
messages: {
"Reg.Name": "Info error message",
"Do[0].IsSelected": {
required: "Enter a username",
email: "Enter at least {0} characters",
},
},
invalidHandler: function (event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'Info 1 field missing'
: 'Info ' + errors + ' fields missing';
if (validator.errorList.length > 0) {
for (x = 0; x < validator.errorList.length; x++) {
message += "</br>nu25CF " + validator.errorList[x].message;
}
}
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
submitHandler: function () {
document.forms["reg"].submit();
}
});
Jquery validate add CSS class to second hidden input, and not show message
I have such a line of code which create a dynamic route.
<Link href={`/bundeslander/${urlName}`} ><div className=" text-blue-400">{state.name}</div></Link>
urlName is a variable which is created by getting data from API. In one case it is ‘Thüringen’
And when I try to display params.name (name is dynamic segment) I see something like this Th%C3%BCringen.
Btw the link is generated normally.
This is link
Why it is happening this way.
Encoding is utf-8
I fixed it by replacing ü with u. But I would like to know by it is happening this way.
Thank you in advance. Sorry for wasting your time.
I have the following button
<Button onClick={handleGoogle}>Google Sign Up</Button>
And the function handleGoogle does the following
function handleGoogle() {
const options = {
client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
};
googleOneTap(options, (response) => {
// Send response to server
console.log("googleonetap-triggered");
console.log(response);
});
console.log("handle google");
}
However when I click the button I only see the console log ‘handle google’ , the ‘googleonetap-triggered’ is not logging, which means googleOneTap is not being triggerd.
Read multiple threads about this and cannot find a solution. Appreciate any help with this
I am trying to complete the calculateAPR function for a Uniswap V3 pool using the Metacrypt simulator (https://www.metacrypt.org/tools/uniswap-v3-calculator-simulator/?network=ethereum&token0=0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2&token1=0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48&feeTier=3000).
// pool example ID: 0x7bea39867e4169dbe237d55c8242a8f2fcdcc387
// A function to calculate the APR of a pool
function calculateAPR(pool) {
const { poolDayData } = pool;
const feeTier = parseFloat(pool.feeTier);
let volumeUSD = 0;
for (i = poolDayData.length - 8; i < poolDayData.length - 1; i++) {
volumeUSD += parseFloat(poolDayData[i].volumeUSD);
}
volumeUSD /= 7;
const depositAmount = 1000; // dollar
const liquidityPriceRange = [1600, 2000];
const amount0 = (depositAmount / 2); // The amount of WETH
const amount1 = depositAmount / 2; // The amount of USDC
const sqrtRatioAX96 = Math.sqrt(liquidityPriceRange[0]); // The square root ratio of the lower price range
const sqrtRatioBX96 = Math.sqrt(liquidityPriceRange[1]); // The square root ratio of the upper price range
const liquidity0 = amount0 * (sqrtRatioBX96 * sqrtRatioAX96) / (sqrtRatioBX96 - sqrtRatioAX96); // The liquidity on the WETH side
const liquidity1 = amount1 / (sqrtRatioBX96 - sqrtRatioAX96); // The liquidity on the USDC side
const currentPrice = 1800;
let userTotalLiquidity;
if (currentPrice <= liquidityPriceRange[0]) {
userTotalLiquidity = 0; // Out of price range, so liquidity is 0
} else if (currentPrice >= liquidityPriceRange[1]) {
userTotalLiquidity = 0; // Out of price range, so liquidity is 0
} else {
userTotalLiquidity = Math.min(liquidity0, liquidity1); // In price range, so liquidity is the smaller value of the two sides
console.log(userTotalLiquidity);
}
// Calculate the user's APR using userTotalLiquidity and existingLiquidity.
const existingLiquidity = parseFloat(pool.liquidity);
const userAPR = feeTier * volumeUSD * 365 * (userTotalLiquidity / (existingLiquidity + userTotalLiquidity));
return userAPR * 100;
}
The result I get is very low (around 0.03), which does not seem realistic. I followed the formulas in the simulator page, but I am not sure if I am missing something or doing something wrong.
Using Visual Studio Code Live Preview extension from Microsoft, one is able to immediately preview changes made to a JavaScript file, the web page is reloaded automatically, which is very convenient.
Now I would like to use TypeScript instead of JavaScript.
I installed TypeScript using npm install -g typescript and it is enabled as reported by tsc --version.
As I understand, an HTML page cannot directly refer to a TypeScript script using <script src="test.ts"/> as the script must be compiled to JavaScript first.
Question:
How can one get that TypeScript script to be compiled to JavaScript whenever it is modified?
(so that Live Preview can automatically refresh the web page)
selectedMail is supposed to show mail contents from firebase when a mail is opened. But it returns undefined. It doesn’t show anything
import { createSlice } from '@reduxjs/toolkit';
export const mailSlice = createSlice({
name: "mail",
initialState: {
selectedMail: null,
sendMessageIsOpen: false,
},
reducers: {
selectMail: (state, action) => {
state.selectedMail = action.payload;
},
openSendMessage: (state) => {
state.sendMessageIsOpen = true
},
closeSendMessage: (state) => {
state.sendMessageIsOpen = false;
},
},
});
export const { selectMail, openSendMessage, closeSendMessage } = mailSlice.actions;
export const selectOpenMail = (state) => state.mail.selectMail;
export const selectSendMessageIsOpen = (state) => state.mail.sendMessageIsOpen;
export default mailSlice.reducer;
When I try to call the dll file using the ffi-napi library in my electron project, the command prompt gives me an error of 1920, but when I call it from the root directory it works fine,Why is this so, is my authority not enough, through the administrator is the same error
window11
@lwahonen/ffi-napi”: “^4.0.12″,
@lwahonen/ref-napi”: “^4.0.8”,
electron:v20.0.0
nodejs:17.9.1enter image description hereenter image description hereenter image description here
I tried running powershell as an administrator and giving my dll full control to everyone,Change the read path to an absolute path,but it didn’t work
It seems like this error will occur whenever you’re not in the root directory
We are using google charts but it’s showing the followimg error:
“Uncaught TypeError: google.visualization.Columnchart is not a constructor”
I used the latest version of chrome and this error is only shown in chrome. If I use firefox it’s working fine and it shows the following warning in firefox:
“Attempting to load version ‘1’ of Google Charts, but the previously loaded ‘1.0’ will be used instead.”
I have tried to update the version of loader.js file with the help of following link:
https://developers.google.com/chart/interactive/docs/basic_load_libs
But no luck. Can anybody knows that how can I force the chrome to use the latest version of google chart?
I have tried to add the 1.0 version in the script file but it still no work.
Code worked fine but now I don’t know what is the problem here. I used emailjs for sending the filled forms to my email. However, when I press the send button it just restart the page without sending anything. The button is fine imo, because yesterday I pressed the same button and could send the forms to myself. The js code is shown below:
function sendMail(e) {
e.preventDefault();
let params = {
name: document.getElementById("contactName").value,
email: document.getElementById("contactEmail").value,
message: document.getElementById("msg").value,
number: document.getElementById("phoneNumber").value,
country: document.getElementById("contactCountry").value,
companyName: document.getElementById("companyName").value,
solutions: document.getElementById("companySolutions").value,
website: document.getElementById("companyWeb").value,
};
const serviceID = "I filled this parts correctly";
const templateID = "I filled this parts correctly";
if (
params.name === "" ||
params.email === "" ||
params.message === "" ||
params.number === "" ||
params.country === "" ||
params.companyName === "" ||
params.solutions === "" ||
params.website === ""
) {
alert("error");
return;
}
emailjs
.send(serviceID, templateID, params)
.then((res) => {
document.getElementById("contactName").value = "";
document.getElementById("contactEmail").value = "";
document.getElementById("msg").value = "";
document.getElementById("phoneNumber").value = "";
document.getElementById("contactCountry").value = "";
document.getElementById("companyName").value = "";
document.getElementById("companySolutions").value = "";
document.getElementById("companyWeb").value = "";
console.log(res);
alert("Your message was sent successfully!");
})
.catch((err) => console.log(err));
}