mithril

<html> <head> <meta charset="UTF-8" /> <title> Simple application - Mithril.js</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' /> <link href="lib/prism/prism.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <header> <section> <a class="hamburger" href="javascript:;">≡</a> <h1><img src="logo.svg"> Mithril 1.0.0</h1> <nav> <a href="index.html">Guide</a> <a href="api.html">API</a> <a href="https://gitter.im/lhorie/mithril.js">Chat</a> <a href="https://github.com/lhorie/mithril.js">Github</a> </nav> </section> </header> <main> <section> <h1 id="simple-application">Simple application</h1> <ul> <li>Tutorials<ul> <li><a href="installation.html">Installation</a></li> <li><a href="index.html">Introduction</a></li> <li><a href="simple-application.html">Tutorial</a></li> </ul> </li> <li>Resources<ul> <li><a href="jsx.html">JSX</a></li> <li><a href="es6.html">ES6</a></li> <li><a href="css.html">CSS</a></li> <li><a href="animation.html">Animation</a></li> <li><a href="testing.html">Testing</a></li> <li><a href="examples.html">Examples</a></li> </ul> </li> <li>Key concepts<ul> <li><a href="vnodes.html">Vnodes</a></li> <li><a href="components.html">Components</a></li> <li><a href="lifecycle-methods.html">Lifecycle methods</a></li> <li><a href="keys.html">Keys</a></li> <li><a href="autoredraw.html">Autoredraw system</a></li> </ul> </li> <li>Social<ul> <li><a href="https://github.com/lhorie/mithril.js/wiki/JOBS">Mithril Jobs</a></li> <li><a href="contributing.html">How to contribute</a></li> <li><a href="credits.html">Credits</a></li> </ul> </li> <li>Misc<ul> <li><a href="framework-comparison.html">Framework comparison</a></li> <li><a href="change-log.html">Change log/Migration</a></li> </ul> </li> </ul> Let's develop a simple application that covers some of the major aspects of Single Page Applications First let's create an entry point for the application. Create a file <code>index.html</code>: <pre><code class="lang-markup"><!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>My Application</title> </head> <body> <script src="bin/app.js"></script> </body> </html> </code></pre> The <code><!doctype html></code> line indicates this is an HTML 5 document. The first <code>charset</code> meta tag indicates the encoding of the document and the <code>viewport</code> meta tag dictates how mobile browsers should scale the page. The <code>title</code> tag contains the text to be displayed on the browser tab for this application, and the <code>script</code> tag indicates what is the path to the Javascript file that controls the application. We could create the entire application in a single Javascript file, but doing so would make it difficult to navigate the codebase later on. Instead, let's split the code into modules, and assemble these modules into a bundle <code>bin/app.js</code>. There are many ways to setup a bundler tool, but most are distributed via NPM. In fact, most modern Javascript libraries and tools are distributed that way, including Mithril. NPM stands for Node.js Package Manager. To download NPM, <a href="https://nodejs.org/en/">install Node.js</a>; NPM is installed automatically with it. Once you have Node.js and NPM installed, open the command line and run this command: <pre><code class="lang-bash">npm init -y </code></pre> If NPM is installed correctly, a file <code>package.json</code> will be created. This file will contain a skeleton project meta-description file. Feel free to edit the project and author information in this file. <hr> To install Mithril, follow the instructions in the <a href="installation.html">installation</a> page. Once you have a project skeleton with Mithril installed, we are ready to create the application. Let's start by creating a module to store our state. Let's create a file called <code>src/models/User.js</code> <pre><code class="lang-javascript">// src/models/User.js var User = { list: [] } module.exports = User </code></pre> Now let's add code to load some data from a server. To communicate with a server, we can use Mithril's XHR utility, <code>m.request</code>. First, we include Mithril in the module: <pre><code class="lang-javascript">// src/models/User.js var m = require("mithril") var User = { list: [] } module.exports = User </code></pre> Next we create a function that will trigger an XHR call. Let's call it <code>loadList</code> <pre><code class="lang-javascript">// src/models/User.js var m = require("mithril") var User = { list: [], loadList: function() { // TODO: make XHR call } } module.exports = User </code></pre> Then we can add an <code>m.request</code> call to make an XHR request. For this tutorial, we'll make XHR calls to the <a href="http://rem-rest-api.herokuapp.com/">REM</a> API, a mock REST API designed for rapid prototyping. This API returns a list of users from the <code>GET http://rem-rest-api.herokuapp.com/api/users</code> endpoint. Let's use <code>m.request</code> to make an XHR request and populate our data with the response of that endpoint. <pre><code class="lang-javascript">// src/models/User.js var m = require("mithril") var User = { list: [], loadList: function() { return m.request({ method: "GET", url: "http://rem-rest-api.herokuapp.com/api/users", withCredentials: true, }) .then(function(result) { User.list = result.data }) }, } module.exports = User </code></pre> The <code>method</code> option is an <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods">HTTP method</a>. To retrieve data from the server without causing side-effects on the server, we need to use the <code>GET</code> method. The <code>url</code> is the address for the API endpoint. The <code>withCredentials: true</code> line indicates that we're using cookies (which is a requirement for the REM API). The <code>m.request</code> call returns a Promise that resolves to the data from the endpoint. By default, Mithril assumes a HTTP response body are in JSON format and automatically parses it into a Javascript object or array. The <code>.then</code> callback runs when the XHR request completes. In this case, the callback assigns the <code>result.data</code> array to <code>User.list</code>. Notice we also have a <code>return</code> statement in <code>loadList</code>. This is a general good practice when working with Promises, which allows us to register more callbacks to run after the completion of the XHR request. This simple model exposes two members: <code>User.list</code> (an array of user objects), and <code>User.loadList</code> (a method that populates <code>User.list</code> with server data). <hr> Now, let's create a view module so that we can display data from our User model module. Create a file called <code>src/views/UserList.js</code>. First, let's include Mithril and our model, since we'll need to use both: <pre><code class="lang-javascript">// src/views/UserList.js var m = require("mithril") var User = require("../models/User") </code></pre> Next, let's create a Mithril component. A component is simply an object that has a <code>view</code> method: <pre><code class="lang-javascript">// src/views/UserList.js var m = require("mithril") var User = require("../models/User") module.exports = { view: function() { // TODO add code here } } </code></pre> By default, Mithril views are described using <a href="hyperscript.html">hyperscript</a>. Hyperscript offers a terse syntax that can be indented more naturally than HTML for complex tags, and in addition, since its syntax is simply Javascript, it's possible to leverage a lot of Javascript tooling ecosystem: for example <a href="es6.html">Babel</a>, <a href="jsx.html">JSX</a> (inline-HTML syntax extension), <a href="http://eslint.org/">eslint</a> (linting), <a href="https://github.com/mishoo/UglifyJS2">uglifyjs</a> (minification), <a href="https://github.com/gotwarlost/istanbul">istanbul</a> (code coverage), <a href="https://flowtype.org/">flow</a> (static type analysis), etc. Let's use Mithril hyperscript to create a list of items. Hyperscript is the most idiomatic way of writing Mithril views, but <a href="jsx.html">JSX is another popular alternative that you could explore</a> once you're more comfortable with the basics: <pre><code class="lang-javascript">var m = require("mithril") var User = require("../models/User") module.exports = { view: function() { return m(".user-list") } } </code></pre> The <code>".user-list"</code> string is a CSS selector, and as you would expect, <code>.user-list</code> represents a class. When a tag is not specified, <code>div</code> is the default. So this view is equivalent to <code><div class="user-list"></div></code>. Now, let's reference the list of users from the model we created earlier (<code>User.list</code>) to dynamically loop through data: <pre><code class="lang-javascript">// src/views/UserList.js var m = require("mithril") var User = require("../models/User") module.exports = { view: function() { return m(".user-list", User.list.map(function(user) { return m(".user-list-item", user.firstName + " " + user.lastName) })) } } </code></pre> Since <code>User.list</code> is a Javascript array, and since hyperscript views are just Javascript, we can loop through the array using the <code>.map</code> method. This creates an array of vnodes that represents a list of <code>div</code>s, each containing the name of a user. The problem, of course, is that we never called the <code>User.loadList</code> function. Therefore, <code>User.list</code> is still an empty array, and thus this view would render a blank page. Since we want <code>User.loadList</code> to be called when we render this component, we can take advantage of component <a href="lifecycle-methods.html">lifecycle methods</a>: <pre><code class="lang-javascript">// src/views/UserList.js var m = require("mithril") var User = require("../models/User") module.exports = { oninit: User.loadList, view: function() { return m(".user-list", User.list.map(function(user) { return m(".user-list-item", user.firstName + " " + user.lastName) })) } } </code></pre> Notice that we added an <code>oninit</code> method to the component, which references <code>User.loadList</code>. This means that when the component initializes, User.loadList will be called, triggering an XHR request. When the server returns a response, <code>User.list</code> gets populated. Also notice we didn't do <code>oninit: User.loadList()</code> (with parentheses at the end). The difference is that <code>oninit: User.loadList()</code> calls the function once and immediately, but <code>oninit: User.loadList</code> only calls that function when the component renders. This is an important difference and a common pitfall for developers new to javascript: calling the function immediately means that the XHR request will fire as soon as the source code is evaluated, even if the component never renders. Also, if the component is ever recreated (through navigating back and forth through the application), the function won't be called again as expected. <hr> Let's render the view from the entry point file <code>src/index.js</code> we created earlier: <pre><code class="lang-javascript">// src/index.js var m = require("mithril") var UserList = require("./views/UserList") m.mount(document.body, UserList) </code></pre> The <code>m.mount</code> call renders the specified component (<code>UserList</code>) into a DOM element (<code>document.body</code>), erasing any DOM that was there previously. Opening the HTML file in a browser should now display a list of person names. <hr> Right now, the list looks rather plain because we have not defined any styles. There are many similar conventions and libraries that help organize application styles nowadays. Some, like <a href="http://getbootstrap.com/">Bootstrap</a> dictate a specific set of HTML structures and semantically meaningful class names, which has the upside of providing low cognitive dissonance, but the downside of making customization more difficult. Others, like <a href="http://tachyons.io/">Tachyons</a> provide a large number of self-describing, atomic class names at the cost of making the class names themselves non-semantic. "CSS-in-JS" is another type of CSS system that is growing in popularity, which basically consists of scoping CSS via transpilation tooling. CSS-in-JS libraries achieve maintainability by reducing the size of the problem space, but come at the cost of having high complexity. Regardless of what CSS convention/library you choose, a good rule of thumb is to avoid the cascading aspect of CSS. To keep this tutorial simple, we'll just use plain CSS with overly explicit class names, so that the styles themselves provide the atomicity of Tachyons, and class name collisions are made unlikely through the verbosity of the class names. Plain CSS can be sufficient for low-complexity projects (e.g. 3 to 6 man-months of initial implementation time and few project phases). To add styles, let's first create a file called <code>styles.css</code> and include it in the <code>index.html</code> file: <pre><code class="lang-markup"><!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>My Application</title> <link href="styles.css" rel="stylesheet" /> </head> <body> <script src="bin/app.js"></script> </body> </html> </code></pre> Now we can style the <code>UserList</code> component: <pre><code class="lang-css">.user-list {list-style:none;margin:0 0 10px;padding:0;} .user-list-item {background:#fafafa;border:1px solid #ddd;color:#333;display:block;margin:0 0 1px;padding:8px 15px;text-decoration:none;} .user-list-item:hover {text-decoration:underline;} </code></pre> The CSS above is written using a convention of keeping all styles for a rule in a single line, in alphabetical order. This convention is designed to take maximum advantage of screen real estate, and makes it easier to scan the CSS selectors (since they are always on the left side) and their logical grouping, and it enforces predictable and uniform placement of CSS rules for each selector. Obviously you can use whatever spacing/indentation convention you prefer. The example above is just an illustration of a not-so-widespread convention that has strong rationales behind it, but deviate from the more widespread cosmetic-oriented spacing conventions. Reloading the browser window now should display some styled elements. <hr> Let's add routing to our application. Routing means binding a screen to a unique URL, to create the ability to go from one "page" to another. Mithril is designed for Single Page Applications, so these "pages" aren't necessarily different HTML files in the traditional sense of the word. Instead, routing in Single Page Applications retains the same HTML file throughout its lifetime, but changes the state of the application via Javascript. Client side routing has the benefit of avoiding flashes of blank screen between page transitions, and can reduce the amount of data being sent down from the server when used in conjunction with an web service oriented architecture (i.e. an application that downloads data as JSON instead of downloading pre-rendered chunks of verbose HTML). We can add routing by changing the <code>m.mount</code> call to a <code>m.route</code> call: <pre><code class="lang-javascript">// src/index.js var m = require("mithril") var UserList = require("./views/UserList") m.route(document.body, "/list", { "/list": UserList }) </code></pre> The <code>m.route</code> call specifies that the application will be rendered into <code>document.body</code>. The <code>"/list"</code> argument is the default route. That means the user will be redirected to that route if they land in a route that does not exist. The <code>{"/list": UserList}</code> object declares a map of existing routes, and what components each route resolves to. Refreshing the page in the browser should now append <code>#!/list</code> to the URL to indicate that routing is working. Since that route render UserList, we should still see the list of people on screen as before. The <code>#!</code> snippet is known as a hashbang, and it's a commonly used string for implementing client-side routing. It's possible to configure this string it via <a href="route.html#mrouteprefix"><code>m.route.prefix</code></a>. Some configurations require supporting server-side changes, so we'll just continue using the hashbang for the rest of this tutorial. <hr> Let's add another route to our application for editing users. First let's create a module called <code>views/UserForm.js</code> <pre><code class="lang-javascript">// src/views/UserForm.js module.exports = { view: function() { // TODO implement view } } </code></pre> Then we can <code>require</code> this new module from <code>src/index.js</code> <pre><code class="lang-javascript">// src/index.js var m = require("mithril") var UserList = require("./views/UserList") var UserForm = require("./views/UserForm") m.route(document.body, "/list", { "/list": UserList }) </code></pre> And finally, we can create a route that references it: <pre><code class="lang-javascript">// src/index.js var m = require("mithril") var UserList = require("./views/UserList") var UserForm = require("./views/UserForm") m.route(document.body, "/list", { "/list": UserList, "/edit/:id": UserForm, }) </code></pre> Notice that the new route has a <code>:id</code> in it. This is a route parameter; you can think of it as a wild card; the route <code>/edit/1</code> would resolve to <code>UserForm</code> with an <code>id</code> of <code>"1"</code>. <code>/edit/2</code> would also resolve to <code>UserForm</code>, but with an <code>id</code> of <code>"2"</code>. And so on. Let's implement the <code>UserForm</code> component so that it can respond to those route parameters: <pre><code class="lang-javascript">// src/views/UserForm.js var m = require("mithril") module.exports = { view: function() { return m("form", [ m("label.label", "First name"), m("input.input[type=text][placeholder=First name]"), m("label.label", "Last name"), m("input.input[placeholder=Last name]"), m("button.button[type=submit]", "Save"), ]) } } </code></pre> And let's add some styles to <code>styles.css</code>: <pre><code class="lang-css">/* styles.css */ body,.input,.button {font:normal 16px Verdana;margin:0;} .user-list {list-style:none;margin:0 0 10px;padding:0;} .user-list-item {background:#fafafa;border:1px solid #ddd;color:#333;display:block;margin:0 0 1px;padding:8px 15px;text-decoration:none;} .user-list-item:hover {text-decoration:underline;} .label {display:block;margin:0 0 5px;} .input {border:1px solid #ddd;border-radius:3px;box-sizing:border-box;display:block;margin:0 0 10px;padding:10px 15px;width:100%;} .button {background:#eee;border:1px solid #ddd;border-radius:3px;color:#333;display:inline-block;margin:0 0 10px;padding:10px 15px;text-decoration:none;} .button:hover {background:#e8e8e8;} </code></pre> Right now, this component does nothing to respond to user events. Let's add some code to our <code>User</code> model in <code>src/models/User.js</code>. This is how the code is right now: <pre><code class="lang-javascript">// src/models/User.js var m = require("mithril") var User = { list: [], loadList: function() { return m.request({ method: "GET", url: "http://rem-rest-api.herokuapp.com/api/users", withCredentials: true, }) .then(function(result) { User.list = result.data }) }, } module.exports = User </code></pre> Let's add code to allow us to load a single user <pre><code class="lang-javascript">// src/models/User.js var m = require("mithril") var User = { list: [], loadList: function() { return m.request({ method: "GET", url: "http://rem-rest-api.herokuapp.com/api/users", withCredentials: true, }) .then(function(result) { User.list = result.data }) }, current: {}, load: function(id) { return m.request({ method: "GET", url: "http://rem-rest-api.herokuapp.com/api/users/:id", data: {id: id}, withCredentials: true, }) .then(function(result) { User.current = result }) } } module.exports = User </code></pre> Notice we added a <code>User.current</code> property, and a <code>User.load(id)</code> method which populates that property. We can now populate the <code>UserForm</code> view using this new method: <pre><code class="lang-javascript">// src/views/UserForm.js var m = require("mithril") var User = require("../models/User") module.exports = { oninit: function(vnode) {User.load(vnode.attrs.id)}, view: function() { return m("form", [ m("label.label", "First name"), m("input.input[type=text][placeholder=First name]", {value: User.current.firstName}), m("label.label", "Last name"), m("input.input[placeholder=Last name]", {value: User.current.lastName}), m("button.button[type=submit]", "Save"), ]) } } </code></pre> Similar to the <code>UserList</code> component, <code>oninit</code> calls <code>User.load()</code>. Remember we had a route parameter called <code>:id</code> on the <code>"/edit/:id": UserForm</code> route? The route parameter becomes an attribute of the <code>UserForm</code> component's vnode, so routing to <code>/edit/1</code> would make <code>vnode.attrs.id</code> have a value of <code>"1"</code>. Now, let's modify the <code>UserList</code> view so that we can navigate from there to a <code>UserForm</code>: <pre><code class="lang-javascript">// src/views/UserList.js var m = require("mithril") var User = require("../models/User") module.exports = { oninit: User.loadList, view: function() { return m(".user-list", User.list.map(function(user) { return m("a.user-list-item", {href: "/edit/" + user.id, oncreate: m.route.link}, user.firstName + " " + user.lastName) })) } } </code></pre> Here we changed <code>.user-list-item</code> to <code>a.user-list-item</code>. We added an <code>href</code> that references the route we want, and finally we added <code>oncreate: m.route.link</code>. This makes the link behave like a routed link (as opposed to merely behaving like a regular link). What this means is that clicking the link would change the part of URL that comes after the hashbang <code>#!</code> (thus changing the route without unloading the current HTML page) If you refresh the page in the browser, you should now be able to click on a person and be taken to a form. You should also be able to press the back button in the browser to go back from the form to the list of people. <hr> The form itself still doesn't save when you press "Save". Let's make this form work: <pre><code class="lang-javascript">// src/views/UserForm.js var m = require("mithril") var User = require("../models/User") module.exports = { oninit: function(vnode) {User.load(vnode.attrs.id)}, view: function() { return m("form", [ m("label.label", "First name"), m("input.input[type=text][placeholder=First name]", { oninput: m.withAttr("value", function(value) {User.current.firstName = value}), value: User.current.firstName }), m("label.label", "Last name"), m("input.input[placeholder=Last name]", { oninput: m.withAttr("value", function(value) {User.current.lastName = value}), value: User.current.lastName }), m("button.button[type=submit]", {onclick: User.save}, "Save"), ]) } } </code></pre> We added <code>oninput</code> events to both inputs, that set the <code>User.current.firstName</code> and <code>User.current.lastName</code> properties when a user types. In addition, we declared that a <code>User.save</code> method should be called when the "Save" button is pressed. Let's implement that method: <pre><code class="lang-javascript">// src/models/User.js var m = require("mithril") var User = { list: [], loadList: function() { return m.request({ method: "GET", url: "http://rem-rest-api.herokuapp.com/api/users", withCredentials: true, }) .then(function(result) { User.list = result.data }) }, current: {}, load: function(id) { return m.request({ method: "GET", url: "http://rem-rest-api.herokuapp.com/api/users/:id", data: {id: id}, withCredentials: true, }) .then(function(result) { User.current = result }) }, save: function() { return m.request({ method: "PUT", url: "http://rem-rest-api.herokuapp.com/api/users/:id", data: User.current, withCredentials: true, }) } } module.exports = User </code></pre> In the <code>save</code> method at the bottom, we used the <code>PUT</code> HTTP method to indicate that we are upserting data to the server. Now try editing the name of a user in the application. Once you save a change, you should be able to see the change reflected in the list of users. <hr> Currently, we're only able to navigate back to the user list via the browser back button. Ideally, we would like to have a menu - or more generically, a layout where we can put global UI elements Let's create a file <code>src/views/Layout.js</code>: <pre><code class="lang-javascript">var m = require("mithril") module.exports = { view: function(vnode) { return m("main.layout", [ m("nav.menu", [ m("a[href='/list']", {oncreate: m.route.link}, "Users") ]), m("section", vnode.children) ]) } } </code></pre> This component is fairly straightforward, it has a <code><nav></code> with a link to the list of users. Similar to what we did to the <code>/edit</code> links, this link uses <code>m.route.link</code> to activate routing behavior in the link. Notice there's also a <code><section></code> element with <code>vnode.children</code> as children. <code>vnode</code> is a reference to the vnode that represents an instance of the Layout component (i.e. the vnode returned by a <code>m(Layout)</code> call). Therefore, <code>vnode.children</code> refer to any children of that vnode. Let's add some styles: <pre><code class="lang-css">/* styles.css */ body,.input,.button {font:normal 16px Verdana;margin:0;} .layout {margin:10px auto;max-width:1000px;} .menu {margin:0 0 30px;} .user-list {list-style:none;margin:0 0 10px;padding:0;} .user-list-item {background:#fafafa;border:1px solid #ddd;color:#333;display:block;margin:0 0 1px;padding:8px 15px;text-decoration:none;} .user-list-item:hover {text-decoration:underline;} .label {display:block;margin:0 0 5px;} .input {border:1px solid #ddd;border-radius:3px;box-sizing:border-box;display:block;margin:0 0 10px;padding:10px 15px;width:100%;} .button {background:#eee;border:1px solid #ddd;border-radius:3px;color:#333;display:inline-block;margin:0 0 10px;padding:10px 15px;text-decoration:none;} .button:hover {background:#e8e8e8;} </code></pre> Let's change the router in <code>src/index.js</code> to add our layout into the mix: <pre><code class="lang-javascript">// src/index.js var m = require("mithril") var UserList = require("./views/UserList") var UserForm = require("./views/UserForm") var Layout = require("./views/Layout") m.route(document.body, "/list", { "/list": { render: function() { return m(Layout, m(UserList)) } }, "/edit/:id": { render: function(vnode) { return m(Layout, m(UserForm, vnode.attrs)) } }, }) </code></pre> We replaced each component with a <a href="route.html#routeresolver">RouteResolver</a> (basically, an object with a <code>render</code> method). The <code>render</code> methods can be written in the same way as regular component views would be, by nesting <code>m()</code> calls. The interesting thing to pay attention to is how components can be used instead of a selector string in a <code>m()</code> call. Here, in the <code>/list</code> route, we have <code>m(Layout, m(UserList))</code>. This means there's a root vnode that represents an instance of <code>Layout</code>, which has a <code>UserList</code> vnode as its only child. In the <code>/edit/:id</code> route, there's also a <code>vnode</code> argument that carries the route parameters into the <code>UserForm</code> component. So if the URL is <code>/edit/1</code>, then <code>vnode.attrs</code> in this case is <code>{id: 1}</code>, and this <code>m(UserForm, vnode.attrs)</code> is equivalent to <code>m(UserForm, {id: 1})</code>. The equivalent JSX code would be <code><UserForm id={vnode.attrs.id} /></code>. Refresh the page in the browser and now you'll see the global navigation on every page in the app. <hr> This concludes the tutorial. In this tutorial, we went through the process of creating a very simple application where we can list users from a server and edit them individually. As an extra exercise, try to implement user creation and deletion on your own. If you want to see more examples of Mithril code, check the <a href="examples.html">examples</a> page. If you have questions, feel free to drop by the <a href="https://gitter.im/lhorie/mithril.js">Mithril chat room</a>. <hr /> License: MIT. © Leo Horie. </section> </main> <script src="lib/prism/prism.js"></script> <script> document.querySelector(".hamburger").onclick = function() { document.body.className = document.body.className === "navigating" ? "" : "navigating" document.querySelector("h1 + ul").onclick = function() { document.body.className = '' } } </script> </body> </html>