I'd like to incorporate my current code into a new interface

[bpitt]

Hi I’m very brand new to JS, and I would love some help with this! Found you very helpful on Youtube, but still need lots of guidance.

Basically, I build this page that loads different images/videos by NASA depending on the date selected (https://thredd-astronomy.netlify.app)

I don’t like my interface and would like to use this template instead. I would like for the image or video to load as the background image with slight movement.
(https://html5up.net/eventually)

Can you help me with this?

Thank you so much!!!

[kirupa]

Hi bpitt - welcome to the forums

What you are trying to create in many ways resembles the Ken Burns Effect: The Ken Burns Effect Using CSS Animations | kirupa.com You can apply this animation to your loaded image from the NASA API, and this will result in your image panning around slowly.

My initial reaction is that modifying existing templates is often a fair bit of work. Understanding how someone else structure the HTML and CSS may take as much time as creating something on your own. What are your thoughts on trying to extend your existing example to look more like the template?

Cheers,
Kirupa

[bpitt]

Without the ken burns effect, would it be easier?

I’ve been trying to do this for almost one week now and I just keep breaking my code. I’m trying to learn JS as much as possible, but this has me stumped.

If I can just get the image/video to display as the background, that would be HUGE!

Thank you.

[bpitt]

How can I implement the JS to display the images as bg using my existing code? My JS is fairly short. Thank you

[kirupa]

You can set the backgroundImage property using JavaScript and set it to the URL of the image. Here is an example of how you can do this: Setting CSS Styles using JavaScript | KIRUPA

We are mimicking the CSS way of specifying the values and taking it directly to JavaScript. Let me know if this helps. I can create an example in a few hours after I send my daughter to school

[bpitt]

Thank you!
I tried this but doesn’t work:

[kirupa]

You are close! It should be:

document.body.style.backgroundImage = "url(" + url + ")";

Or my preferred approach is to use the string literal syntax:

// String Literal Approach
document.body.style.backgroundImage = `url("${url} ")`;

[bpitt]

I changed this part but it’s still not pulling anything =(

Here is my glitch project if you want to see my code:

Glitch Code Editor ･ﾟ✧

Thank you again for helping guide me through this!

[kirupa]

No worries - what you are doing involves a lot of JS techniques! The first thing to notice is that when you view your output in the console, the request isn’t going through. The reason has to do with the value of choice:

Instead of passing in a date, what is being passed in is the actual HTML element instead. The way you pass in the date is by using the value property of the HTML element. What you have here:

const choice = document.querySelector("input");

Will become:

const choice = document.querySelector("input").value;

Also, you already have listened to the click event in order to call getFetch. The event handler code here should be removed:

Lastly, the path to the image isn’t url. Notice that you would access the url through the data object. Your code should instead look like:

document.body.style.backgroundImage = `url("${data.url}")`;

From there, you should be closer to loading the image

Let me know if you are able to get it working!

Thanks,
Kirupa

[bpitt]

Thank you so much! This worked!! You’re amazing! I’ll continue to play with the code but you helped me solve the hardest part. How long did it take for you to get this good with JS? I’ve only been learning JS on my own for 1 month. I can’t wait until I can decipher code like you!

[kirupa]

JavaScript is not easy! For one month of learning, you are doing really well

One thing you can do is take a structured path towards learning JS starting with the basics and gradually going into more advanced topics. My content here may help (many articles have a video version as well): JavaScript 101 | KIRUPA

This content is almost a full / free version of my bestselling JavaScript Beginner’s Guide book, so there has been a lot of vetting and revisions that have gone into this content

As for how long it took me to get good enough with JavaScript? MANY many years! I started around 1998 with Flash, and its programming language was ActionScript. ActionScript and JavaScript share a lot of similarities, so that helped my transition into JS go a little smoother.