Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
My site is infintyhost.pk, i want to replace the my url carrying file extension with url slug.
eg
https://www.infinityhost.pk/aboutus.php
to
https://www.infintyhost.pk/about-us
I have no programming experience. I’m using Linux with php support server.
we want to change my all website pages into their respective slugs for better SEO experience
Set the pivotal position while rotating and this rotation should be done by user interaction i.e., if the key q is pressed it should start rotating and stop when the key is released
When i did as separate file rotations worked using EventListeners but i couldn’t set origin while rotating but
when i combine this code with my simulation(virtual lab) the rotation is also not working even i used EventListeners
today I wanted to attempt creating a mod, but I ran into my first issue: “jdk 21.0.1 isn’t compatible with gradle 8.4. Please fix the java_home environment variable.” Additionally, Minecraft isn’t starting when I run the script. Can anyone help me out?
I haven’t tried anything yet since I’m not sure what to do.
I’ve trying to customise a script that normally triggers a GTM tag to populate a form’s hidden field with a variable (session_url_campaign).
Here is the script:
<script>
(function () {
var value = “{{session_url_campaign}}”
var selector = "input[name='859253_16342pi_859253_16342']"
var field = document.querySelector(selector)
if(field){ field.value = value||"(none)"; }
})();
</script>
I’d like to use this tag to populate all my forms, but unformatunately, my CRM – Pardot – uses form specific names when a same field is use across different form.
The name of my hidden field in the above script is 859253_16342pi_859253_16342, but it could be 859253_16342pi_859253_16343 in another form.
Is there a way to use a “OR” logic for my name?
After some research I’ve found some mention of ||.
Would solving my problem as easy as adding between the different values, as below?
<script>
(function () {
var value = “{{session_url_campaign}}”
var selector = "input[name='859253_16342pi_859253_16342||859253_16342pi_859253_16343']"
var field = document.querySelector(selector)
if(field){ field.value = value||"(none)"; }
})();
</script>
I’m trying to run the following script from a code.org GameLab studio offline using .js and html files.
var blueGear = createSprite(100, 200);
blueGear.setAnimation("blue_gear");
blueGear.Scale = 1;
var greenGear = createSprite(250, 278);
greenGear.setAnimation("green_gear");
greenGear.scale = 2;
var redGear = createSprite(85, 110);
redGear.setAnimation("red_gear");
redGear.scale = 0.75;
var sameRotationRate = 3;
function draw() {
background("white");
//1) Make the gears rotate so they look like they are working as one system
blueGear.rotation = blueGear.rotation - sameRotationRate;
greenGear.rotation = greenGear.rotation + sameRotationRate;
redGear.rotation = redGear.rotation + sameRotationRate;
drawSprites();
}
The files for the individual gears and a sample of the resulting animation(ignoring scaling and position in the code) are shown below.
Now, inorder to run this animations offline, I followed some ChatGPT suggestions did the following:
Downloaded the p5.js and p5.play and library files following ChatGPT suggestions.
Created index.html and gears.js as follows:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Include p5.js from the local directory
<script src="p5.js"></script>
<script src="planck.min.js"></script>
<script src="p5.play.js"></script>
<title>Gear Animation</title>
</head>
<body>
<script src="gears.js"></script>
</body>
</html>
gears.js
// Create Gears
let blueGear, greenGear, redGear;
const sameRotationRate = 3;
function setup() {
console.log("Setup function is called.");
createCanvas(400, 400);
// Initialize Blue Gear
blueGear = createSprite(100, 200);
blueGear.addAnimation("default", "blue_gear.png"); // Replace "blue_gear.png" with the actual file name
blueGear.scale = 1;
// Initialize Green Gear
greenGear = createSprite(250, 278);
greenGear.addAnimation("default", "green_gear.png"); // Replace "green_gear.png" with the actual file name
greenGear.scale = 2;
// Initialize Red Gear
redGear = createSprite(85, 110);
redGear.addAnimation("default", "red_gear.png"); // Replace "red_gear.png" with the actual file name
redGear.scale = 0.75;
}
function draw() {
console.log("Draw function is called.");
background("white");
// Rotate Gears
blueGear.rotation -= sameRotationRate;
greenGear.rotation += sameRotationRate;
redGear.rotation += sameRotationRate;
drawSprites();
}
This leads to a bunch of errors and there was no end to it. Even if I manage to use basic javascript with inbuilt animations object, I only get an empty screen when I open the HTML file in the browser.
Am I missing something in the way i’m linking the p5 libraries? Has anyone tried this and have a cheatsheet of steps for running code.org animations offline?
I’m encountering a problem with the installation of react-dom, react and next in my project. I just have two files in the project: index.js and package.json (that I just created it’s empty). But when I run
npm install react@latest react-dom@latest next@latest
In the terminal it returns me an error:
npm ERR! code EJSONPARSE
npm ERR! path C:WEBSITESProjets de la premiere clienteplatformes vente places d'installation/package.json
npm ERR! JSON.parse Unexpected end of JSON input while parsing empty string
npm ERR! JSON.parse Failed to parse JSON data.
npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript.
npm ERR! A complete log of this run can be found in: C:UsersHPAppDataLocalnpm-cache_logs2024-01-26T03_19_04_697Z-debug-0.log
The completes logs are here:
0 verbose cli C:Program Filesnodejsnode.exe C:UsersHPAppDataRoamingnpmnode_modulesnpmbinnpm-cli.js
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 4ms
4 timing config:load:defaults Completed in 8ms
5 timing config:load:file:C:UsersHPAppDataRoamingnpmnode_modulesnpmnpmrc Completed in 22ms
6 timing config:load:builtin Completed in 22ms
7 timing config:load:cli Completed in 4ms
8 timing config:load:env Completed in 2ms
9 timing config:load:file:C:WEBSITESProjets de la premiere clienteplatformes vente places d'installation.npmrc Completed in 1ms
10 timing config:load:project Completed in 3ms
11 timing config:load:file:C:UsersHP.npmrc Completed in 0ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:UsersHPAppDataRoamingnpmetcnpmrc Completed in 1ms
14 timing config:load:global Completed in 1ms
15 timing config:load:setEnvs Completed in 2ms
16 timing config:load Completed in 43ms
17 timing npm:load:configload Completed in 44ms
18 timing config:load:flatten Completed in 6ms
19 timing npm:load:mkdirpcache Completed in 0ms
20 timing npm:load:mkdirplogs Completed in 1ms
21 verbose title npm install react@latest react-dom@latest next@latest
22 verbose argv "install" "react@latest" "react-dom@latest" "next@latest"
23 timing npm:load:setTitle Completed in 5ms
24 timing npm:load:display Completed in 1ms
25 verbose logfile logs-max:10 dir:C:UsersHPAppDataLocalnpm-cache_logs2024-01-26T03_19_04_697Z-
26 verbose logfile C:UsersHPAppDataLocalnpm-cache_logs2024-01-26T03_19_04_697Z-debug-0.log
27 timing npm:load:logFile Completed in 1293ms
28 timing npm:load:timers Completed in 0ms
29 timing npm:load:configScope Completed in 0ms
30 timing npm:load Completed in 1417ms
31 timing arborist:ctor Completed in 2ms
32 silly logfile start cleaning logs, removing 2 files
33 timing idealTree Completed in 723ms
34 timing command:install Completed in 759ms
35 verbose stack JSONParseError: Unexpected end of JSON input while parsing empty string
35 verbose stack at C:UsersHPAppDataRoamingnpmnode_modulesnpmnode_modulesread-package-json-fastlibindex.js:7:61
35 verbose stack at async #initTree (C:UsersHPAppDataRoamingnpmnode_modulesnpmnode_modules@npmcliarboristlibarboristbuild-ideal-tree.js:280:21)
35 verbose stack at async Arborist.buildIdealTree (C:UsersHPAppDataRoamingnpmnode_modulesnpmnode_modules@npmcliarboristlibarboristbuild-ideal-tree.js:193:7)
35 verbose stack at async Promise.all (index 1)
35 verbose stack at async Arborist.reify (C:UsersHPAppDataRoamingnpmnode_modulesnpmnode_modules@npmcliarboristlibarboristreify.js:159:5)
35 verbose stack at async Install.exec (C:UsersHPAppDataRoamingnpmnode_modulesnpmlibcommandsinstall.js:152:5)
35 verbose stack at async module.exports (C:UsersHPAppDataRoamingnpmnode_modulesnpmlibcli-entry.js:61:5)
36 verbose cwd C:WEBSITESProjets de la premiere clienteplatformes vente places d'installation
37 verbose Windows_NT 10.0.19045
38 verbose node v18.18.0
39 verbose npm v10.2.1
40 error code EJSONPARSE
41 error path C:WEBSITESProjets de la premiere clienteplatformes vente places d'installation/package.json
42 error JSON.parse Unexpected end of JSON input while parsing empty string
43 error JSON.parse Failed to parse JSON data.
43 error JSON.parse Note: package.json must be actual JSON, not just JavaScript.
44 verbose exit 1
45 timing npm Completed in 4137ms
46 verbose unfinished npm timer reify 1706239147476
47 verbose unfinished npm timer reify:loadTrees 1706239147499
48 verbose unfinished npm timer idealTree:init 1706239147501
49 verbose code 1
50 error A complete log of this run can be found in: C:UsersHPAppDataLocalnpm-cache_logs2024-01-26T03_19_04_697Z-debug-0.log
I tried to run ‘npm clean cache’ but it doesn’t work. It returns me an ERROR:
npm ERR! As of npm@5, the npm cache self-heals from corruption issues
npm ERR! data extracted from the cache is guaranteed to be valid. If you
npm ERR! want to make sure everything is consistent, use `npm cache verify`
npm ERR! not likely to correct any problems you may be encountering!
npm ERR!
npm ERR! On the other hand, if you're debugging an issue with the installer,
npm ERR! or race conditions that depend on the timing of writing to an empty
npm ERR! cache, you can use `npm install --cache /tmp/empty-cache` to use a
npm ERR! temporary cache instead of nuking the actual one.
npm ERR!
npm ERR! If you're sure you want to delete the entire cache, rerun this command
npm ERR! with --force.
I have this function, works perfectly in unix based OS (Linux, MacOS), but somehow, does not works in Windows, it just simply does not add anything to the clipboard.
This is running in a NextJS App.
export const copyRichContent = async rich => {
if (typeof ClipboardItem !== 'undefined') {
const html = new Blob([rich], { type: 'text/html' })
const data = new ClipboardItem({ 'text/html': html })
await navigator.clipboard.write([data])
} else {
// Fallback using the deprecated `document.execCommand`.
// https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#browser_compatibility
const cb = e => {
e.clipboardData.setData('text/html', rich)
e.preventDefault()
}
document.addEventListener('copy', cb)
document.execCommand('copy')
document.removeEventListener('copy', cb)
}
}
1- I already tried with clipboard-pollyfill
2- I tried both approaches, the ClipboardItem API and the legacy copy action.
3- I tried in Windows with Firefox and Chrome
I expect to be working in Windows machines, no matter the browser.
In my WhatsApp group ,when I share a link URL & once it is clicked ,it hast to open the content of the URL page . After then , automatically or by clicking a pop up alert the browser URL should be replaced with a new URL , but the content of the page should be the original URL clicked .How to achieve this in Google App script or any other /Please help
found “window.history.replaceState” but don’t know how to write it as a function or how to incorporate in
I have a problem for reCaptcha v2 on Orbeon form, when I fill all fields and checked the captcha, it’s give me an error: “There are validation errors. Please retry once all fields have been properly filled-out”. I have checked the captcha it’s okay and complete, please help.
enter image description here
I’d like to validate inside modal.
Now, I can validate if the input is empty.
But how can I validate if the input isn’t unique, then show up the error message.
For example, “The Input email address is already used.”
Can somebody help me ?
I’m using Laravel10, [email protected].
This is my code: modal.blade.php
<div class="modal fade" id="edit-profile-{{ $user->id }}">
<div class="modal-dialog">
<div class="modal-content border-primary">
<div class="modal-header border-primary">
<h3 class="modal-title text-primary">
<i class="fa-solid fa-pen"></i> Edit Profile
</h3>
</div>
<form action="{{ route('update') }}" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
@csrf
@method('PATCH')
<div class="modal-body">
<div class="form-floating mb-3">
<input type="text" class="form-control" name="name" id="name" placeholder="John Doe" value="{{ $user->name }}" autofocus required>
<label for="name">Name</label>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" name="email" id="email" value="{{ $user->email }}" placeholder="[email protected]" required>
<label for="email">Email address</label>
<div class="invalid-feedback">
Please choose a unique email address.
</div>
</div>
<div class="mb-3">
<label for="avatar" class="form-label d-block">Avatar</label>
@if ($user->avatar)
<img src="{{ $user->avatar }}" alt="{{ $user->name }}" class="rounded mb-3" style="object-fit: cover; width: 200px; height: 200px;">
@endif
<input type="file" name="avatar" id="avatar" class="form-control" aria-describedby="avatar-info">
<div class="form-text" id="avatar-info">
Available file format: jpeg, jpg, png, gif only. <br>
Maximum file size is 1048 KB.
</div>
<div class="invalid-feedback">
Error!!
</div>
</div>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<script>
(() => {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
// Add an input event listener to check validity on input change
form.addEventListener('input', event => {
if (event.target.tagName.toLowerCase() === 'input') {
event.target.classList.remove('is-invalid');
}
});
});
})();
</script>
This is HomeContorller.php
public function update(Request $request) {
$request->validate([
'name' => 'required|min:1|max:255',
'email' => 'required|min:1|max:255|email|unique:users,email,'. Auth::user()->id,
'avatar' => 'max:1048|mimes:png,jpg,jpeg,gif',
]);
$user = $this->user->findOrFail(Auth::user()->id);
$user->name = $request->name;
$user->email = $request->email;
if($request->avatar) {
$user->avatar = 'data:image'. $request->avatar->extension(). ';base64,'. base64_encode(file_get_contents($request->avatar));
}
$user->save();
return redirect()->back();
}
I tried to add Javascript code, but it doesn’t work.
<script>
(() => {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
// Add an input event listener to check validity on input change
form.addEventListener('input', event => {
if (event.target.tagName.toLowerCase() === 'input') {
event.target.classList.remove('is-invalid');
}
});
});
})();
</script>
In the associated HTML file I have PQ output fields in which I can output the associated PQ nodes from start node A together with the shortest distance to A in the form: B12, C16,D18 … output. Somehow, however, I never get the correct number including the corresponding shortest connection.
edit1: The final goal is an input field in which the randomly generated PQ contents are queried by the user and validated or output as incorrect. So the PQ of A should be entered, then the next node should be output under “Node”, then the user enters the costs, then the new PQ of the node, etc. . So far I have only generated the whole thing using the simple “alert” command in JS. Do you know a more elegant method? Here is a picture of the whole thing:
Dijkstra algorithm game
let canvas = document.getElementById("graphCanvas");
let ctx = canvas.getContext("2d");
let outputDiv = document.getElementById("output");
let nodes = {
A: { x: 128, y: 255, connections: ["B", "C", "F"] },
B: { x: 212, y: 85, connections: ["A", "C", "E"] },
C: { x: 42, y: 127, connections: ["A", "B", "F"] },
D: { x: 212, y: 382, connections: ["A", "E", "F"] },
E: { x: 340, y: 255, connections: ["B", "D"] },
F: { x: 42, y: 382, connections: ["A", "C", "D"] },
};
let edges = [
{ from: "A", to: "B" },
{ from: "A", to: "C" },
{ from: "A", to: "D" },
{ from: "A", to: "F" },
{ from: "B", to: "C" },
{ from: "B", to: "D" },
{ from: "B", to: "E" },
{ from: "C", to: "F" },
{ from: "D", to: "E" },
{ from: "D", to: "F" },
];
edges.forEach((edge) => {
edge.weight = Math.floor(Math.random() * 14 + 1);
});
edges.forEach((edge) => {
ctx.beginPath();
ctx.moveTo(nodes[edge.from].x, nodes[edge.from].y);
ctx.lineTo(nodes[edge.to].x, nodes[edge.to].y);
ctx.stroke();
let midX = (nodes[edge.from].x + nodes[edge.to].x) / 2;
let midY = (nodes[edge.from].y + nodes[edge.to].y) / 2;
ctx.font = "20px Arial";
ctx.fillText(edge.weight, midX, midY);
});
// Drawing the nodes as circles
for (let node in nodes) {
ctx.beginPath();
ctx.arc(nodes[node].x, nodes[node].y, 20, 0, 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();
ctx.fillStyle = "black";
ctx.font = "20px Arial";
ctx.fillText(node, nodes[node].x - 10, nodes[node].y + 7);
}
class PriorityQueue {
constructor() {
this.queue = [];
}
enqueue(element, priority) {
this.queue.push({ element, priority });
this.sort();
}
dequeue() {
if (this.isEmpty()) {
return;
}
return this.queue.shift().element;
}
isEmpty() {
return this.queue.length === 0;
}
sort() {
this.queue.sort((a, b) => a.priority - b.priority);
}
printQueue() {
this.queue.forEach((item) => {
console.log(item.element);
});
}
getDistancesFromNode(node) {
let nodeObject = this.queue.find((item) => item.node === node);
return nodeObject ? nodeObject.distance : null;
}
}
function dijkstra(start) {
const distances = {};
const prev = {};
const priorityQueue = new PriorityQueue();
Object.keys(nodes).forEach((node) => {
// iterates over nodes and sets starting parameter
distances[node] = Infinity;
prev[node] = null;
});
distances[start] = 0;
priorityQueue.enqueue(start, 0);
// Dijkstra's Algorithm
while (!priorityQueue.isEmpty()) {
let current = priorityQueue.dequeue(); // dequeues highest pq node
edges
.filter((edge) => edge.from === current || edge.to === current)
.forEach((edge) => {
let otherNode = edge.from === current ? edge.to : edge.from;
let weight = edge.weight; // retrieves weight curr edge
if (distances[current] + weight < distances[otherNode]) {
// if true shorter path is found
distances[otherNode] = distances[current] + weight; // updates with shorter path
prev[otherNode] = current;
priorityQueue.enqueue(otherNode, distances[otherNode]); // enqueues with updated distance
}
});
}
return { distances}; // ?return prev? // prev -> const prev = new map() ...
}
HTML part
<!DOCTYPE html>
<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>Shortest path Dijkstra algorithm by Ramo</title>
<script defer src="dijkstra.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="mainContainer">
<canvas id="graphCanvas" width="680" height="490"></canvas>
<table id="distanceTable">
<tr>
<th>Knoten</th>
<th>Kosten</th>
<th>Priority Queue</th>
</tr>
<tr>
<td>A</td>
<td>0</td>
<td>
<input type="text" id="priorityQueueA" placeholder="Priority Queue">
</td>
</td>
</tr>
<tr>
<td><input type="text" id="Element1" placeholder="node"></td>
<td>
<input type="text" id="distanceToB" placeholder="Distance">
</td>
<td>
<input type="text" id="priorityQueueB" placeholder="Priority Queue">
</td>
</tr>
<tr>
<td><input type="text" id="Element2" placeholder="node"></td>
<td>
<input type="text" id="distanceToC" placeholder="Distance">
</td>
<td>
<input type="text" id="priorityQueueC" placeholder="Priority Queue">
</td>
</tr>
<tr>
<tr>
<td><input type="text" id="Element3" placeholder="node"></td>
<td>
<input type="text" id="distanceToD" placeholder="Distance">
</td>
<td>
<input type="text" id="priorityQueueD" placeholder="Priority Queue">
</td>
</tr>
<tr>
<td><input type="text" id="Element4" placeholder="node"></td>
<td>
<input type="text" id="distanceToE" placeholder="Distance">
</td>
<td>
<input type="text" id="priorityQueueE" placeholder="Priority Queue">
</td>
</tr>
<tr>
<td><input type="text" id="Element5" placeholder="node"></td>
<td>
<input type="text" id="distanceToF" placeholder="Distance">
</td>
<td>
<input type="text" id="priorityQueueF" placeholder="Priority Queue">
</td>
</tr>
<td><button id="reset">Reset</button></td>
<td> <button id="verify" onclick=validateInput()>Verify</button></td>
</table>
</div>
</body>
</html>
Different printDistances functions and map methods but it did not work right
const fs = require("fs");
const dns = require("dns");
function timeStamp() {
return performance.now().toFixed(2);
}
console.log("Start");
//Close events
fs.writeFile("./test.txt", "Hello man", () =>
console.log("Written done", timeStamp())
);
//Promises
Promise.resolve().then(() => console.log("Promise 1", timeStamp()));
//Tick
process.nextTick(() => console.log("Tick 1", timeStamp()));
//setImediate (Check)
setImmediate(() => console.log("Immediate 1", timeStamp()));
//Timeouts
setTimeout(() => console.log("Timeout 1", timeStamp()), 0);
setTimeout(() => {
process.nextTick(() => console.log("Tick 2", timeStamp()));
console.log("Timeout 2", timeStamp());
}, 10);
// I/O events
dns.lookup("localhost", (err, address, family) => {
console.log("DNS 1 localhost", address, timeStamp());
Promise.resolve().then(() => console.log("Promise 2", timeStamp()));
process.nextTick(() => console.log("Tick 3", timeStamp()));
});
console.log("End");
const fs = require("fs");
async function main() {
console.log("Start");
setTimeout(() => console.log("SetTimeout"), 0);
setImmediate(() => console.log("SetImmediate"));
Promise.resolve().then(() => {
console.log("Promise");
process.nextTick(() => console.log("Promise next tick"));
});
fs.readFile("idex.js", () => {
console.log("Read file");
setTimeout(() => console.log("Read file SetTimeout"));
setImmediate(() => console.log("Read file SetImmediate"));
process.nextTick(() => console.log("Read file next tick"));
});
const response = await Promise.resolve("Async/Await");
console.log(response);
process.nextTick(() => console.log("Next tick"));
setTimeout(() => console.log("SetTimeout"), 0);
console.log("End");
}
main();
I have a few questions.
Why do files have different order of promise output if they are written the same way?
The second question is, why does my VSC display this order in the second file, if according to the rules and documentation the order should be completely different?
Start,
Promise,
Async/Await,
End,
Promise next tick,
Next tick,
SetTimeout,
Read file,
Read file next tick,
SetImmediate,
Read file SetImmediate,
SetTimeout,
Read file SetTimeout
The third question is why the order of output in the first file is constantly changing and is the operation of writing to the file a closing operation?
Start,
End,
Tick 1 47.94,
Promise 1 48.03,
Timeout 1 48.46,
Immediate 1 49.02,
Written done 49.39,
DNS 1 localhost ::1 50.54,
Tick 3 50.66,
Promise 2 50.79,
Timeout 2 63.08,
Tick 2 63.23
Start,
End,
Tick 1 40.30,
Promise 1 40.40,
Timeout 1 40.71,
Immediate 1 41.19,
DNS 1 localhost ::1 42.63,
Tick 3 42.80,
Promise 2 42.94,
Written done 43.12,
Timeout 2 47.94,
Tick 2 48.08,
Sometmes Immediate 1 is below DNS.
And lastly, please write which order in both options would be correct and why.
I watched dozens of videos, there are different explanations everywhere, I don’t offer documentation, I’m still too inexperienced for it.
I was working on a login/sign in function for a website I’m trying to build using VSCode. It worked just fine until I tried to import bcrypt to add hashing to my passwords. The code would no longer run with the imported library, so I changed the document from a .js to a .mjs. The import statement works now, but now I’m getting this error when debugging:
Uncaught ReferenceError ReferenceError: document is not defined
at <anonymous> (c:UsersTyler ThompsonDownloadsWorktrialloginjavas.mjs:12:5)
at run (internal/modules/esm/module_job:218:25)
--- await ---
at runMainESM (internal/modules/run_main:98:21)
at executeUserEntryPoint (internal/modules/run_main:131:5)
at <anonymous> (internal/main/run_main_module:28:49)
Now, I am very new to programming, however I’m pretty sure ‘document’ should be a built in object in javascript.
Here’s my js code:
import bcrypt from 'bcrypt';
function hashPassword(password) {
const saltRounds = 10;
return bcrypt.hashSync(password, saltRounds);
}
// Assuming users is declared globally
let users = {};
// Event listener for DOMContentLoaded
document.addEventListener("DOMContentLoaded", function () {
try {
function setup() {
let setpass, setuname;
try {
window.alert("Function is being called");
let setpass1 = document.getElementById("setpass").value;
let setuname1 = document.getElementById("setuname").value;
if (setpass1.length < 8) {
document.getElementById("result").innerHTML = "Password must be at least 8 characters long";
return;
}
setpass = hashPassword(setpass1);
setuname = hashPassword(setuname1);
for (var key in users) {
if (users[key] === setpass && key === setuname) {
document.getElementById("result").innerHTML = "This account already exists";
return;
}
}
window.alert("Password: " + setpass + "nUsername: " + setuname);
users[setuname] = setpass;
document.getElementById("setuname").value = "";
document.getElementById("setpass").value = "";
window.alert("After assigning values to users");
} catch (error) {
window.alert("Error: " + error.message);
}
document.getElementById("result").innerHTML = "The function is triggered!";
}
// Attach the setup function to the button click event
document.getElementById("createAccountBtn").addEventListener("click", setup);
} catch (error) {
console.error("Error during DOMContentLoaded:", error);
}
});
And Here’s my html code that connects with it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<script src="javas.mjs"></script>
</head>
<body>
<!-- Your HTML content, including input fields and the button -->
<h2>Create Account</h2>
<form>
<label for="setuname">Username: </label><br>
<input type="text" id="setuname"><br>
<label for="setpass">Password: </label><br>
<input type="password" id="setpass"><br>
<button type="button" id="createAccountBtn">Create Account</button>
<div id="result"></div><br><br>
</form>
<h2>Sign In</h2>
<form>
<label for="signInUsername">Username:</label><br>
<input type="text" id="signInUsername" required><br>
<label for="signInPassword">Password:</label><br>
<input type="password" id="signInPassword" required><br>
<button type="button" id="signinBtn" onclick="signin()">Sign In</button>
</form>
</body>
</html>
When I change it to a .js file, it recognizes ‘document’, but then it gives me this error:
Uncaught Error Error: Cannot find module 'C:UsersTyler ThompsonDownloadsWorktrialloginjavas.mjs'
at Module._resolveFilename (internal/modules/cjs/loader:1144:15)
at Module._load (internal/modules/cjs/loader:985:27)
at executeUserEntryPoint (internal/modules/run_main:135:12)
at <anonymous> (internal/main/run_main_module:28:49)
I have checked package-lock.json to make sure I have bcrypt properly installed, and it is. Here is what it said on my json file:
"node_modules/bcrypt": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-5.1.1.tgz", "integrity": "sha512-AGBHOG5hPYZ5Xl9KXzU5iKq9516yEmvCKDg3ecP5kX2aB6UqTeXZxk2ELnDgDm6BQSMlLt9rDB4LoSMx0rYwww==", "hasInstallScript": true, "dependencies": { "@mapbox/node-pre-gyp": "^1.0.11", "node-addon-api": "^5.0.0" }, "engines": { "node": ">= 10.0.0" } },
I’ve found that the only way for my code to work is to remove the import statement altogether and rename the file to a .js file.
I’m new to stack overflow, so I hope I provided enough info and in a manner that is readable enough for you to help me. Thank you for your time in reading this
Am currently Learning How to code with coursera and stack on Lecture 61 and don’t know how to go about? Here is the Link
https://coursera.org/share/0329b4784192d027c6ca776543a9b9fd
I tried the Links provided below in the video but no result as expected as to how the Lecturer managed to get those json datas
I have a project I built in React-Native (and using firebase) that has been turned down twice by Apple’s App Store Connect, because they say that the ‘Submit’ button doesn’t do anything.
When they sent me a screenshot of the page where the error happens, I noticed their keyboard has an ‘enter’ key rather than ‘send,’ like you can see in the pictures. I asked what OS they were using and they said IOS 17.2, which I am too.
I have no idea what to try because it works perfectly for me, and the code is pretty simple. So, I figure I might just show you some of my code, and maybe someone will have run into a similar issue.
Here is the modal, where when the user clicks on the touchable opacity the function “modalGlobe” (improper naming, I know) is supposed to be triggered.
Here is the function it’s supposed to trigger:
When it gets to the “chatRoom” navigation, it should be loading up a mock conversation in the “Test” room I made for the App Store Connect team using this code. (I doubt this has anything to do with, as the app doesn’t seem to make it this far)
Again, it works for me. It works on Android. I’ve already got the app on the google play store, but App Store Connect is such a headache. I honestly felt like they just made some dumb simple error, so I resubmitted it without even changing anything, but it still won’t work for them.