Next up we will make the navigation working and the buttons selectable.
Let’s select all our buttons in index.js:
Then add an event listener to track clicks for each of the buttons by looping over them and adding a function btnClick() to each button click. Note that the function does not contain the () because it is not directly invoked, only when the click is called.
To toggle the active class on each button, we add the following code:
4.2 Painting slider
We currently have five example paintings which need to slide whenever we click the arrows. First we wrap our slides in a new div called art__wrapper which we will give the following nested slides, instead of the art section:
Now we can control the painting the user is viewing by moving the wrapper left or right with margins.
Let’s select our arrows and add event listeners to them:
Now we need to know in our function if the right or the left slide has been pressed. The user can also click the arrow icon which does not contain a left or right indication. We can solve this by grabbed the parentNode of the icon:
Add a querySelector on the art wrapper. Then we need to get the current margin left and then add some to it to move the painting. We can do this by the currentstyle property or the getComputedStyle (if not microsoft). Then we parse this string to a number.
We do not want our users the be able to scroll forever so we need to limit the amount they can scroll. We can do this by checking the amount of paintings and their total width including margins. First add a query selector for all the paintings. Our total slide functionality now looks like this:
And that’s it for the event listeners! In the next section we will change our code to the MVC model and set the state.
5. Adding MVC and state
5.1 Setting up a MVC model
Although setting up the model, view and controller system is a lot of work for just this small app, it is good to practise and get familiar with MVC. The model manages the data of the application, the view manages what actually get displayed on screen and the controller connect the two. The model never touches the view. The view never touches the model. The controller connects them. Create two news folders within your /js folder called models and views. We do not have a model yet (which stores and manages data) so we will start with the view. Create two new files inside the views folder called elements.js and painting.js. Elements will contain all our query selectors.
Add the following query selectors in elements.js:
Now we can import these files in index.js by adding the following in the top of the page:
Place the code of the painting slider inside views/paintingView.js file.
So it looks like this:
5.2 Creating state
Let’s start working on the settings section. The preferences of the user should be stored and saved somewhere while the user is using the application. We can do this in a new object which we call the state. Let’s add an empty object in index.js called state.
Add a query selector in elements for our generate button. Then in index.js add:
Now create a new file called settingsView.js where we will render the setting items and also retrieve the new settings when the generate button is called:
Then we will create the file that stores our settings in /models/Settings.js:
And store our default data in /models/Data.js:
In index.js we will now initialize our app by calling the settings items and creating a new settings instance object.
The toggle functionality on the buttons is now not working anymore because they are rendered after this code has been executed. So we need to call an event listener on it’s parent and then listen if any of the children is called, we call this event bubbling: