First up a usual disclaimer pointing out that I dont use Svelte and dont have much knowledge of it. I just looked up a few things to get an answer for you.
If this was normal js then yeah, just putting the js below would have fixed things because the html would have been rendered before the js executed, but this is Svelte. This code will be compiled into something else and so the order things are executed in is not determined by the placement in the file. You can see this if you look at the JsOutput tab. With all these things there is usually a Life Cycle that determines when things happen and you tap into that. With Svelte what you want is the onMount event, whatever is in that event will happen after your html has been rendered to the DOM. Check this doc…
So with that in mind if we put all your current code in an onMount event then things work…
Whilst looking at this noticed that you can avoid querySelector if you want, so did that aswell…
Now you should look at converting that into its own component
Thanks PAEz for taking the time to check out Svelte and explain it to me, much appreciated.
I’m an old newbie to this - started back in the 80’s, created alot of magic with COBOL connecting DOS based systems to the web - was attracted to Svelte 'cause it’s also compiled and COBOL programs are divided into sections - File io, storage, procedure - but all these new packets just seem to add another level of complexity, and it’s hard for my old brain to grasp.
The point of Random Unsplash Image tutorial was that each click produced a new image, any idea how i’d do that with your solution?
I moved the splash loading code into its own function, then made that function run on onMount and when you click the background of the page (main). There could certainly be better ways of doing it, I wouldnt know, dont have any experience with it.
Hehe, another oldie. I was doing machine code on the c64 in the 80’s then AMOS on Amiga. Couldnt handle languages like COBOL, C and the like. Tried for years to do pascal, made lots of stuff but REALLY didnt understand a LOT of it . Then I found JS and LOVED it!!! Decided it would prolly be the best for the future because of all the awesome apis in the browser and its truly all platform. And then Chrome got V8, I saw it beat Delphi (a compiled language) at rendering a mandlebrot and that was the end of that
Oh, and welcome to the forums! Hope we can all help you enjoy JS as much as we do.
Fumbling around with your last version, this REPL seems to be going in the right direction, problem now is that when clicked a second window opens with the current image, if you close this, app.svelte displays the next random image correctly. Any ideas how to stop the second screen from displaying?
Sorry for the late reply, sometimes I cant do anything for a while.
I wasnt sure what behavior you wanted so made the change on background click not picture because it already had some. Heres the change plus I redid the code to be more svelte like. In the first one I did it from a vanilla js perspective where the js gets the data and puts it in the html/dom, whereas in this one the js gets the data and the html knows where to get it from, its just a template. Hehe, I dont know how to explain this stuff, hopefully the code does that.
A11y: If I remember right thats a accessibility thing, making pages work better for the blind and what not. I added in a fix but not sure whats the point as the elements not select able but maybe its to do with screen readers or wot not. It was looking for keyboard input to compliment the click input I put on the image. Always good to cover this stuff, its not much hassle and Ive lived with blind kids, nuts the level they go through to make things work for themselves.
Environment: Not sure what you mean by that? If its what I use to code its VsCode because its awesome. I tried this in there with three extensions ( svelte for VS Code, svelte format and svelte preview) and it was great. If your talking what code stuff I just do vanilla js for fun.
Hi PAEz, good to hear from you. I’ve been working on this Sveltejs repl
I’m now trying to move onto Sveltekit (without TypeScript) 'cause that seems to be the way to develop a proper svelte site - but maybe I’m just making life difficult for myself. Anyway the point of this site is to help develop the users Remote Viewing skills (and my Svelte programming skills) this lady explains what it is, Stephan Shwartz is also an interesting guy to listen to on the subject.
So my idea was to present 4 hidden images and let the user try and describe what the hidden image is before opening it, it’s still just an idea and I don’t have the page templates worked out yet. Like to hear what you think.