# Sample Yugal App

**`index.html`**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./yugal/yugal.css">
    <title>Yugal App</title>
    <meta name="title" content="Yugal App" />
    <!-- ADD ANY YOUR CUSTOM <HEAD> CODE ABOVE, DON'T ADD ANY CUSTOM HEAD CODE BELOW.  -->
    <!-- DO NOT DELETE THIS COMMENT! THIS COMMENT IS VERY IMPORTANT FOR YUGAL TO WORK! -->
</head>
<body>
    <div id="yugal-root"></div>
    <script src="./yugal/yugal.js"></script>
    <script src="./app.js"></script>
</body>
</html>
```

**`app.js`**

```javascript
const {navigate, router, header, title, production} = yugal;
production();
const navBar = `
    <ul>
        <li onclick="navigate(HomePage())">HOME</li>
        <li onclick="navigate(AboutPage())">ABOUT</li>
    </ul>
`;
function HomePage(){
    return{
        render: `
            ${navBar}
            <h1>HOME PAGE</h1>
        `,
        uri: 'index.html',
        onMount: ()=>{
            let value = localStorage.getItem("something");
            alert(value);
            header("<meta name='abc' content='def' />");
            title("HOME PAGE");
        },
        willMount:()=>{
            localStorage.setItem("something", "HELLO");
            header("");
        }
    };
}
function AboutPage(){
    return{
        render: `
            ${navBar}
            <h1>ABOUT PAGE</h1>
        `,
        uri: 'about.html',
        onMount: function(){
            console.log("PAGE MOUNTED!");
            title("ABOUT PAGE");
        },
        willMount: function(){
            console.log("PAGE IS GOING TO MOUNT");
            header("");
        }
    }
}
function error404(){
    return{
        render: 'ERROR!'
    };
}
window.addEventListener("load", ()=>{
    router({
        initial: HomePage,
        error404: error404,
        screens: [
            HomePage,
            AboutPage
        ]
    });
});
```

In above code `const {navigate, router, header, title, production} = yugal;`, this line is extracting `yugal.navigate`, `yugal.router`, `yugal.header`, `yugal.title`, `yugal.production` as `navigate`, `router`, `header`, `title`, `production` respectively.

**`.htaccess`**

```
ErrorDocument 404 /index.html
```
