# I'd like to incorporate my current code into a new interface
**URL:** https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986
**Category:** programming
**Created:** [May 26, 2022, 12:25am UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986 "2022-05-26T00:25:58Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@bpitt](https://forum.kirupa.com/u/bpitt)
#### Post date: [May 26, 2022, 12:25am UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986/1 "2022-05-26T00:25:58Z")
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](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](https://html5up.net/eventually))
Can you help me with this?
Thank you so much!!!
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 26, 2022, 12:34am UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986/2 "2022-05-26T00:34:56Z")
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](https://www.kirupa.com/html5/ken_burns_effect_css.htm) 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
---
### Author:  [@bpitt](https://forum.kirupa.com/u/bpitt)
#### Post date: [May 26, 2022, 12:37am UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986/3 "2022-05-26T00:37:55Z")
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.
---
### Author:  [@bpitt](https://forum.kirupa.com/u/bpitt)
#### Post date: [May 26, 2022, 1:59pm UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986/4 "2022-05-26T13:59:30Z")
How can I implement the JS to display the images as bg using my existing code? My JS is fairly short. Thank you
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 26, 2022, 2:14pm UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986/5 "2022-05-26T14:14:04Z")
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](https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm)
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 🙂
---
### Author:  [@bpitt](https://forum.kirupa.com/u/bpitt)
#### Post date: [May 26, 2022, 6:02pm UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986/6 "2022-05-26T18:02:08Z")
Thank you!
I tried this but doesn’t work:
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 27, 2022, 1:51am UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986/7 "2022-05-27T01:51:25Z")
You are close! It should be:
`document.body.style.backgroundImage = "url(" + url + ")";`
Or my preferred approach is to use the [string literal syntax](https://www.kirupa.com/javascript/combining_strings_variables.htm):
```auto
// String Literal Approach
document.body.style.backgroundImage = `url("${url} ")`;
```
---
### Author:  [@bpitt](https://forum.kirupa.com/u/bpitt)
#### Post date: [May 27, 2022, 7:42pm UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986/8 "2022-05-27T19:42:36Z")
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 ･ﾟ✧](https://glitch.com/edit/#!/purple-super-titanoceratops)**
>
> Simple, powerful, free tools to create and use millions of apps.
Thank you again for helping guide me through this!
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 28, 2022, 2:18am UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986/9 "2022-05-28T02:18:03Z")
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:
```auto
const choice = document.querySelector("input");
```
Will become:
```auto
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:
```auto
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
---
### Author:  [@bpitt](https://forum.kirupa.com/u/bpitt)
#### Post date: [May 28, 2022, 10:44pm UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986/10 "2022-05-28T22:44:07Z")
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!
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 29, 2022, 2:20am UTC](https://forum.kirupa.com/t/id-like-to-incorporate-my-current-code-into-a-new-interface/651986/11 "2022-05-29T02:20:42Z")
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](https://www.kirupa.com/javascript/learn_javascript.htm)
This content is almost a full / free version of my bestselling [JavaScript Beginner’s Guide book](https://www.amazon.com/exec/obidos/ASIN/013650289X/kirupacom), 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.