FSWD16/index.html at master · mlanders/FSWD16 · 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>

<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <!-- JQUERY -->
    <script src='https://code.jquery.com/jquery-3.3.1.js' integrity='sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60='
        crossorigin='anonymous'></script>
    <!-- Semantic-UI -->
    <link rel='stylesheet' text='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css'>
    <!-- Custom CSS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <!--font Awesome-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
        crossorigin="anonymous">
    <!--css-->
    <link rel="stylesheet" href="/css/semantic.min.css">
    <link rel="stylesheet" href="css/style.css">


    <title>Lambda | Class 16</title>
</head>

<body onload="getStudents()">

    <!-- NAVBAR -->
    <nav id='push-down'>
        <div id="check" class="ui inverted attached stackable menu ">
            <div class="ui container ">
                <!-- fix this small issue, do a search but the home link was not responding. fixed-->
                <a class="item" href="index.html">
                    <i class="home icon"></i> Home
                </a>
                <a class="item">
                    <i class="grid layout icon"></i> Browse Projects
                </a>
            </div>
            <!-- SEARCH -->
            <div class="right menu">
                <div class='item'>
                    <form onkeydown='searchStudents()'>
                        <div class="ui transparent icon input">
                            <input class="prompt" type="text" placeholder="Search students..." id="search" onkeyup="setFilter(); filterStudents()">
                        </div>
                    </form>
                    <div class="results"></div>
                </div>
            </div>
        </div>
    </nav>

    <div id="main-container">
        <main>
            <div class="container">
                <!-- <div class='console-container'>
                    <span id='text'></span>
                    <div class='console-underscore' id='console'>&#95;</div>
                </div> -->
            </div>
            <div class="ui six doubling cards centered raised link student">
            </div>
        </main>

        <footer>

        </footer>
    </div> <!-- MAIN CONTAINER-->


    <script>
        // Creating a function called getStudents() that is called as soon as the <body> loads
        getStudents = () => {
            // Making an AJAX request to the students.json file
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: 'students.json',
                success: data => {
                    // Upon success, we map over the JSON data (Array of objects)
                    data.map(student => {
                        // For each object, we create an HTML Card and append it to the div with class student
                        $(".student").append(`
                            <div class="card">
                                <div class="image">
                                    <img src="${student.avatar}">
                                </div>
                                <div class="content">
                                    <a class="ui medium header">${student.name}</a>
                                    <a class='ui tiny header'>${student.location}</a>
                                </div>
                                <div class="item">
                                    <a class="" href="https://github.com/${student.githubHandle}"><i class="github icon"></i></a>
                                    <a class="" href="https://${student.website}"><i class="globe icon"></i></a>
                                </div>
                            </div>
                        `
                        )
                    })
                },
            })
        }


        var filter = '';
        function setFilter() {
            filter = document.getElementById('search').value.toUpperCase();
        }

        var studentList = [];
        getStudents = () => {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: 'students.json',
                success: data => {
                    data.map(student => {
                        $(".student").append(`
                            <div class="card">
                                <div class="image">
                                    <img src="${student.avatar}">
                                </div>
                                <div class="content">
                                    <a class="ui medium header">${student.name}</a>
                                    <a class='ui tiny header' href="https://www.google.com/maps/place/${student.location}" target=" _blank">${student.location}</a>
                                </div>
                                <div class="item">
                                    <a class="" href="https://github.com/${student.githubHandle}"><i class="github icon"></i></a>
                                    <a class="" href="https://${student.website}"><i class="globe icon"></i></a>
                                </div>
                            </div>
                        `
                        )
                    })
                    createDataArray(data);
                },
            })
        }

        function createDataArray(data) {
            studentList = data;
        }

        // filtering function used with the json object retrieved from the AJAX call
        function filterStudents() {
            var cards = $('.card');
            for (var i = 0; i < studentList.length; i++) {
                if (studentList[i].name.toUpperCase().indexOf(filter) > -1) {
                    cards[i].style.display = "";
                } else {
                    cards[i].style.display = "none";
                }
            }
        }
    </script>
    <script src="/js/script.js"></script>

</html>