javascript-react-course-Berimbao/phoneApp/src/js/view.js at 6d19213c27e0433309a770fa2c61c23994758665 · EasyCode-JavaScriptReact-v1/javascript-react-course-Berimbao · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
class View{
    constructor(state){
        this.baseContainer = document.body
    }
    createHeader(){
        return `
            <header class="header">
                <div class="container top-radius">
                    <h2>Contacts</h2>
                </div>
            </header>
        `
    }

    createContentBlock(){
        return `<main>
                    <div class="container">
                    </div>
                </main>
        `
     }

    createFooter(){
        return `
            <footer class="footer">
                <div class="container bottom-radius">
                    <nav class="main-nav">
                        <a href="index.html" class="tab active">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            <span class = "tab-text">Contacts</span>
                        </a>
                        <a href="keypad.html" class="tab">
                            <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                            <span class = "tab-text">Keypad</span>
                        </a>
                        <a href="edit-contact.html" class="tab">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                            <span class = "tab-text">Edit contact</span>
                        </a>
                        <a href="user.html" class="tab">
                            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                            <span class = "tab-text">User</span>
                        </a>
                        <a href="add-user.html" class="tab">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            <span class = "tab-text">Add user</span>
                        </a>
                    </nav>
                </div>
            </footer>
       `
    }

    createStructure(){
        this.baseContainer.innerHTML += this.createHeader()
        this.baseContainer.innerHTML += this.createContentBlock()
        this.baseContainer.innerHTML += this.createFooter()
    }
}