# How to use functions, events and html DOM in ember?

**URL:** <https://discuss.emberjs.com/t/how-to-use-functions-events-and-html-dom-in-ember/16672>\
**Category:** Uncategorized\
**Created:** [June 14, 2019, 3:05pm UTC](https://discuss.emberjs.com/t/how-to-use-functions-events-and-html-dom-in-ember/16672 "2019-06-14T15:05:18Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [June 17, 2019, 1:35pm UTC](https://discuss.emberjs.com/t/how-to-use-functions-events-and-html-dom-in-ember/16672/2 "2019-06-17T13:35:33Z")

</div>

Hi @Nar_Zantaria. There’s a lot going on here that makes it hard to focus on one piece at a time. I’ll start with a high level summary:

1. Make a new ember app with `ember new my-app`. All the other files I mention here will be inside that project. `cd my-app` and run `ember s` to start the development server. You will see the welcome message at `http://localhost:4200`.

2. Your json file isn’t really a json file, it’s a javascript file. The confusion between the two may give you trouble. You’re currently loading it as a `<script>` but that won’t work for a real json file. I’m going to assume we’re using a valid json file and I’ll put it into `public/fixed-data.json`:

3. I will assume we want to put this demo onto the “homepage” of our application, so I’m going to work in the `application` route, which is the very topmost / main route that always renders in an Ember application. (Later in a real application you will probably want to move this onto some other route, so you can have different routes display different things.)

4. To load the data, make a Route file named `app/routes/application.js` like this:

5. Then edit `app/templates/application.hbs`. You can remove the initial content that’s in there about `<WelcomePage />`. First, let’s just make sure our data is loaded correctly by printing it out:

6. Next, instead of just printing the data we’re going to pass it into a component (we didn’t make the component yet, that will be the next step). Add this to to `app/templates/application.hbs`:

7. Now we need to make the component. You can run `ember generate component color-demo` in the terminal to get the files created automatically, or you can make them by hand. Here is the template file (`app/templates/components/color-demo.hbs`), which I based on your original HTML:

8. Make a helper `app/helpers/style-for-value.js`:

9. Then we will use the helper function. Change the template from this:

---

_[View the full topic](https://discuss.emberjs.com/t/how-to-use-functions-events-and-html-dom-in-ember/16672)._