MUO-E3020 - Designing Interactions, 28.10.2019-02.12.2019

These instructions provide you with starting points for making your own additions. Before this, you need to have exported your project to HTML, CSS and JavaScript. For Adobe XD projects, the instructions are here: https://mycourses.aalto.fi/mod/page/view.php?id=512108

Adding your own CSS settings file so that you can change the graphics:

1. In the same folder where your .html file is, create an empty file and save it as mycode.css.
2. In the .html file, immediately before the line with </head>, add this line: <link rel="stylesheet" href="./mycode.css">
3. Now, by writing style settings to mycode.css, you can start making changes to how the exported project looks like.

Adding your own JavaScript code, so that you can add interactiveness and animations:

1. In the same folder where your .html file is, create an empty file and save it as mycode.js.
2. In the .html file, between the <link> line that you added above and </head>, add these lines:
   <script type="text/javascript" src="./jquery-3.4.1.js"></script>
   <script type="text/javascript" src="./jquery-ui-1.12.1/jquery-ui.js"></script>
   <script type="text/javascript" src="./mycode.js"></script>
3. From your Friday 22 Nov project that you created at classroom, copy the file jquery-3.4.1.js and the folder jquery-ui-1.12.1 to the same folder where your .html file is. Alternatively, download these from jquery.com and jqueryui.com and save the downloaded contents in that folder.
4. In mycode.js, write these lines and save the file:
   $(document).ready( function() {
       // You can write your code under this line.
   });
5. Now, by writing commands under the line starting with //, you can define actions that will start when the page is opened, and define what needs to happen when a user does something, e.g., clicks an element with a mouse.
   

Click here to see a video recording of this process and some programming too.