I wrote you an example of how it could be done. This isn't exactly what you are looking for, because it's not a terminal-based program and therefore has a visual component to it. That said, you can use it as an example of how you can build the one that's specific to your use case. https://jsitor.com/ClCLokAFJ
You can use code blocks in reddit to make your code readable (as seen below). With that out of the way, your issue lies in the below section. Let's assume the user types in 'Atlanta' and presses submit. The comments I've added show what happens.
function getCity (e) { const inputName = document.getElementById('name'); //inputName contains the element that contains 'Atlanta' e.preventDefault(); //default behavior of submit button is prevented let cityUrl = ""; //cityUrl = "" cityUrl.toUpperCase().slice(0,1); //nothing: the result of this is not saved to any variable so it gets lost to the ether. inputName.value = cityUrl; //you overwrite inputName.value with "", the value stored inside cityUrl console.log(inputName.value); //nothing is output since inputName.value = ""
fetch('https://api.openweathermap.org/data/2.5/weather?q=' + cityUrl + '&units=metric&APPID=eebdc0fba9291fe215ae59f682cd5fe9', {mode: 'cors'}) //cityUrl still contains "" since you never assigned 'Atlanta' to it.
You could simplify this to:
function getCity(e) { e.preventDefault(); const cityUrl = document.getElementById('name').value;
fetch(...) }
You can test the updated code here: https://jsitor.com/7rLr-TdzG
As I suspected, >!there is not one definite answer!<. >!The answer seems to be 5–10 seconds, according to my super-quick brute force tests, with 7 seconds being the most common and 10 seconds being exceedingly rare!<. >!Of course my quick 15 minute script could be wrong, but it seems not, and it's intuitive to me that the fact that the drop can be placed anywhere (strategically or unstrategically placed) should vary the results a lot!<.
Since you might not see DM. I highly suggest to user %, vw, vh which in some cases in your code you do use. U can damp them by setting some max-height, max-width so if your burger box is displayed on ultra wide screen it do not break whole site. Ideally it should just take so much space as his parent element give him. https://jsitor.com/eX3vpUiYI
I made a fork of their version which doesn't allow a repeat of the previously selected image / text when you click the button, in case thats also what you wanted. https://jsitor.com/MdpvdH5oS
cc u/OldManWithAQuill
Fair enough! =)
I think you might find it a bit easier if we clean it up a bit. Let's get rid of jQuery for API calls and use a more modern approach. It should be a little more readable and less confusing to follow. I also put in a bunch of comments, so hopefully it helps.
You are gonna hate me, but this probably isn't enough either.
Could you set up a working version of your app in something like jsitor.com or codesandbox.io instead?
What if I wanted to use player.pauseVideo();
in the code.
How would I be able to do that?
How would I be able to un pause the video when clicking on the same video again?
Pause is working in this code: https://jsitor.com/w6PRqnjvUH
function createStopHandler(player) { const stopButtons = document.querySelectorAll('.exit'); stopButtons.forEach(function stopButtonHandler(buttons) { buttons.addEventListener('click', function buttonClickHandler() { player.pauseVideo(); }); }); }
What if I do this? https://jsitor.com/eGmEda0p0y
Is that good?
function createStopHandler(player) { const stopButtons = document.querySelectorAll('.exit'); stopButtons.forEach(function stopButtonHandler(buttons) { buttons.addEventListener('click', function buttonClickHandler() { // console.log(player) player.destroy(); // player.stopVideo(); }); });
}
Now, the same video is only able to autoplay 1 time. https://jsitor.com/ag99P12Ffw
How is that fixed in the code?
To reproduce: Click 1 svg play button, then click the X.
Then click the same svg play button a 2nd time.
What is wrong with that is that, after I click on 1 play button, then hit the X, then click on a different button, the previous video is playing, along with the one I clicked on.
That was in the attempt I made.
player.playVideo();
is being called https://jsitor.com/8Ydpr-wr39
In Code 1, the video should play right after click, not, stop/pause then play. https://jsitor.com/qfFBXU2dm
In Code 2 there is no stop/pause then play. After click, it goes straight to the video and plays. https://jsitor.com/jM9MKE3Qo
You won't much like this but ... this is not enough context.
Nobody can tell you why something doesn't work without seeing the code. Try jsitor.com or pastebin.com or just share your GitHub repo. Otherwise you are on your own I'm afraid.
I think you're right that there were only 2 places. The other instances of querySelector
seem to be appropriate on a closer look.
I've started my own fork so I can update it and look for more issues: https://jsitor.com/RHFWPZeuVC. Sorry about all the console.logs.
I've updated the onYouTubeIframeAPIReady()
function with what we talked about before: . This now allows both YouTube iframes to be added when the page is loaded instead of only the first iframe being added.
If you search the .js file by 'KSledge', you'll be able to locate all the comments/changes I've added.
I'll look into what the next issue is and hopefully we'll get it working.
The problem is that your program makes a call and moves on while the call is being completed. The variable at the end of the program is undefined because the async function isn't done yet. When it is done it does you no good because by the time the variable is populated your code is all done executing and doesn't follow up on it.
What you can do is something like this: https://jsitor.com/wVivedy5tD
The issue is, whenever you press "NEW CARD" you run the newCard()
function, which generates a random number but then also calls startGame()
, which resets the first two cards.
To avoid this I broke the startGame()
function into two. initialize()
and process().
Both are being called on "START GAME" but then only process()
is being called on "NEW CARD".
This solves the existing problem, but you still have a major design flaw, where if drawing the third card doesn't resolve the game you have no way of continuing. In other words you don't have a fourthCard
variable.
The correct way of doing this is not to create firstCard
, secondCard
, thirdCard
, etc. variables, but to store all these values in an array. That way you can keep drawing cards until you win or lose.
Could you please share your code for this bit? Hopefully some place where we could also run it, such as codesandbox.io or jsitor.com or jsbin.com?
Well, you could use a
as the condition for your loop. It will be truthy wherever it's positive or negative, but it will be falsy when it's zero. If you type something other than an integer it'll also be falsy.
Here's an example of how it could work: https://jsitor.com/JhMtKOHGi
Ah I see. So the android on-screen keyboard appears, you can type, etc., but when you close it the input disappears. If you reopen it, whatever you typed is still there.
Here's a URL where I recreated your issue. (In case anyone else wants to play with it on their phone.) https://jsitor.com/Yh8OZX0wUd
You can remove TS and still get runtime validation. I don't get the point of wanting strongly typed helpers but not wanting TS.
Anyway, here is the same example without typescript:
https://jsitor.com/luCxSSVJ3
Here is a variant of u/grady_vuckovic suggestion, except that I'm using a setter for validation
This demo handles instances of classes as well. I wrote it in typescript just for type-help but you can skip typescript and just use the runtime validation for JS
Well, either way, I wrote you a live example of how you can play audio with JavaScript:
Edit: The example the other guy posted is valid as well, just different approaches. Mine doesn't use an HTML <audio>
element and also checks for when the audio file is ready to be played.
<button>roll</button> <h3></h3>
const text = document.querySelector('h3'); const button = document.querySelector('button');
let results = []; let counter = 0;
button.addEventListener('click', () => {
counter += 1;
results.push(Math.floor((Math.random() * 5) + 1));
if (counter < 5) {
text.textContent = ${counter} rolls made
;
} else {
text.textContent = Rolls: ${results.join(', ')}
;
counter = 0;
results = [];
};
});
no. For me, chrome didn't find jsitor.com
I do have a complex hardware setup here with a load balancing router, multiple ISP's with one of them a bit wonky (won't get into that but it can affect DNS and routes) so with load balancing, it would be a PITA to isolate the cause.
I was able to easily lookup your IP addr (on multiple DNS hosts) and I just used that and that worked and still works... with the caveat that your SSL certificate isn't correct. You can fix that easily.
Not sure why its giving this error, The certificate is valid till 17th Dec though :|
"Expires: Sunday, 17 January 2021"
Can you check https://jsitor.com and let me know if this also shows the same error for you ?