A general chat about JavaScript. Ask anything you like or share your best cat picture. Please check Google/StackOverflow for answers before asking for help. And remember, be nice! Don't ask to ask, just ask
const btnUpdate = document.querySelector('.btn-main');
const btnToggle = document.querySelector('.btn-toggle');
btnUpdate.addEventListener('click', () => {
const headline = document.getElementById('headline');
const input = document.querySelector('.input-main');
headline.className = 'grow';
headline.textContent = input.value;
input.value = '';
});
btnToggle.addEventListener('click', () => {
const listContainer = document.querySelector('.list-container');
if (listContainer.style.display === 'none') {
btnToggle.textContent = 'Hide List';
listContainer.style.display = 'block';
} else {
btnToggle.textContent = 'Show List';
listContainer.style.display = 'none';
}
});
@mgourab:matrix.org If I understand correctly, someone told you they thought your code isn't production-ready. I can only guess why they said that. As I see it, your JS code is a bit "ad hoc"; it is responsible for behavior, presentation and state management at the same time. There is no separation of concerns. Closely related to this observation is that the code is a bit brittle; nothing in the JS code ensures that the HTML elements it's trying to access actually exist. Problems like these disappear when you apply good practices such as MVC, most likely with help from an application framework.
A more minor thing that stands out to me, is that the first event handler has two-space indentation, while the second has four-space indentation. This lack of consistency looks a little bit unprofessional, and also doesn't help maintainability.
Having written all that, I agree that your code otherwise looks perfectly reasonable. You evidently know how to make things work, so no need to worry on that front. I personally wouldn't expect a beginner to know all the good practices, anyway.
Does JS uses dynamic scope when arrow function are used?
If normally JS is using a static scoping how come I can in s definition of a function refer to a variable not yet defined but will be defined before I call the function?
3 replies
function test() {
// Declaration of testVar is hoisted to here (but not initialization)
// testFn has access to test's scope which includes testVar as it has been hoisted
let testFn = () => console.log(testVar);
// testFn(); // not valid testVar hasn't been initialized
let testVar;
// Here testVar is initialized, but the value is "undefined"
testFn();
testVar = 10;
// Here testVar is now 10
testFn();
}
test();
--> undefined
--> 10
m out of a string
@rohyadav Let's take your regex apart and see what each part does. Forgive me for stating the obvious on most parts; I think it can help to be explicit.
SYNTUN will match the literal characters "SYNTUN".
^SYNTUN will also match "SYNTUN", but only at the start of the string.
TRF will match the literal characters "TRF".
[0-9 _]* will match any number of digits, spaces and underscores, for example "__0 123 ".
\. will match the literal period.
xlsx will match the literal characters "xlsx".
TRF[0-9 _]*\.xlsx matches the concatenation of the previous four parts, for example "TRF.xlsx"
TRF[0-9 _]*\.xlsx$ likewise, but only at the end of the string.
The expression as a whole matches either "SYNTUN" at the start of the string, or anything that matches TRF[0-9 _]*\.xlsx at the end of the string. This means that the pattern as a whole might, for example, also match "SYNTUNbla" or "blaTRF__0 123 .xlsx".
Regarding the either-or part, I suspect you actually intended
/^(SYNTUN|TRF[0-9 _]*\.xlsx)$/which will match either "SYNTUN" or anything that matches TRF[0-9 _]*\.xlsx, but in both cases only if it is the whole string.
Now for the reason why the TRF[0-9 _]*\.xlsx part doesn't match the example string you gave, "TRF_(traffic).xlsx". The main realization is that * in regexes does not work like a glob in shells. Rather, it is an operator that works on the previous atom. It means "zero or more of whatever I just described", in this case [0-9 _]. This is probably wrong in two ways.
Firstly, I suspect you want at least one occurrence of [0-9 _]; zero is not enough. So for this purpose, the quantifier should be +.
[0-9 _]+.
Secondly, this does not yet account for the fact that anything (I presume) can come after the digit, space or underscore. The way to match anything, including newlines in regexes is [^] (the set that excludes no character). Since this is a file name, you probably don't need to include newlines, for which there is an even shorter notation: .. You can presumably have zero or more of anything, so you need the quantifier *. However, that would also consume the final .xlsx, which you need to ensure is present. To prevent a wildcard from consuming too much of the pattern, you can make the quantifier "lazy" by appending a ?.
.*?
Putting it all back together:
TRF[0-9 _]+.*?\.xlsx
1 reply
div? Say i have a window that's 1920 x 700 and i scaled it down like transform: scale(0.5).I would like to copy the position of the real cursor to a virtual cursor (really an image). All while maintaining the scale.
I want the cursor position on the main window to show up on a smaller div. Kind of like having an accurate mini-map of the main window.
I think
getMockSenderEnhancer had some problem.import React, {useState} from 'react';
import Uploady, {useItemProgressListener, useItemFinishListener} from "@rpldy/uploady";
import UploadDropZone from "@rpldy/upload-drop-zone";
import UploadButton from "@rpldy/upload-button";
import { getMockSenderEnhancer } from "@rpldy/mock-sender";
const LogProgress = () => {
const [progress, setProgess] = useState(0);
const progressData = useItemProgressListener();
if (progressData && progressData.completed > progress) {
console.log(progressData);
setProgess(() => progressData.completed);
}
return null;
}
const mockSenderEnhancer = getMockSenderEnhancer({
delay: 1500
});
function CollectionUpload(props:any){
const nativeProps:any = { webkitdirectory: 'true' };
const customIsSuccess = (xhr:any) => [308, 418].includes(xhr.status);
return(
<div className="row">
<div className="row">
<Uploady isSuccessfulCall={customIsSuccess} destination={{url: "http://localhost:5000/upload"}} {...nativeProps} enhancer={mockSenderEnhancer}>
<UploadDropZone
className="collection-upload-field"
onDragOverClassName="drag-over"
htmlDirContentParams={{ recursive: true, withFullPath: true }}
>
<div className="upload-drop-zone">
<div className="upload-info">
<h5>Drag and drop or browse to choose your collection folder</h5>
<UploadButton text="Choose files..." className="voomio-btn btn-filled"/>
</div>
</div>
</UploadDropZone>
<LogProgress />
</Uploady>
</div>
</div>
)
}
export default CollectionUpload;
Hi everyone 👋 I hope you all are having a good holiday 🎄
Check this out - https://github.com/suren-atoyan/x-python
I tried to provide a clean and complete interface for interacting with Python in browser-based applications - code execution, autocomplete, code formatting, etc.
Would love to get your feedback. Thanks 🙂
How to define hours for this javascript player? Need help......
I want to specify an audio with 08:56:35 => 8 hrs, 56 mins and 34 seconds
The following lyrics has example for minutes, but not sure about hours or how to define.
Can someone help me on how to define for hours?
Javascript: https://github.com/lusaisai/Lyricer/blob/master/lyricer.js
Source: https://github.com/lusaisai/Lyricer
Example for minute: https://github.com/lusaisai/Lyricer/blob/master/index.html (03:54.84)Javascript: https://guoyunhe.github.io/rabbit-lyrics/
Source: https://github.com/guoyunhe/rabbit-lyrics
Example for minute: [03:27.19]