QuoteMe/index.html at master · unitedideas/QuoteMe · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Random Quote</title>
    <style>
        body {
            background-color: black;
        }

        #quote_container {
            margin-top: 10px;
            padding: 20px;
            font-size: 2.5em;
            text-align: center;
            height: 200px;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: black;
            -webkit-text-fill-color: goldenrod;
            background-color: lightgrey;
        }

        #voting_container {
            display: flex;
            flex-direction: row;
            text-align: center;
        }

        #upvote {
            background-color: rgb(85, 94, 99);
            width: 50%;
        }

        #downvote {
            background-color: rgb(199, 92, 92);
            width: 50%;
        }

        #downvote:hover {
            filter: none;
            box-shadow: inset 0px 0px 20px 20px green;
        }

        #upvote:hover {
            filter: none;
            box-shadow: inset 0px 0px 20px 20px green;

        }
    </style>
</head>
<body>
<div id="quote_container">
</div>

<div id="voting_container">
    <div id="upvote">
        <img class="blur" src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/heart-512.png">
    </div>
    <div id="downvote">
        <img src="https://cdn3.iconfinder.com/data/icons/emoticons-50/24/dislike_emoticon_emoticons_emoji_emote-512.png">
    </div>

</div>


<script>
    function http_request(url, method, data, success) {
        let xhttp = new XMLHttpRequest()
        xhttp.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                success(xhttp.responseText)
            }
        }
        xhttp.open(method, url)
        xhttp.setRequestHeader('Authorization', 'Token token="a3a9a6ba592cc0de1c8a489002539325"')
        xhttp.setRequestHeader('Content-Type', 'application/json')
        if (user_token) {
            xhttp.setRequestHeader('User-Token', user_token)
        }
        xhttp.send(JSON.stringify(data))
    }
</script>


<script>
    let quote_container = document.getElementById('quote_container')
    let base_url = 'https://favqs.com/api/'
    let user_token = null
    let user_data = {user: {login: 'shane@endurobox.com', password: 'password'}}
    http_request(base_url + 'session', 'POST', user_data, function (response) {
        let data = JSON.parse(response)
        user_token = data['User-Token']
        console.log(data)
    })
    let quote_id = null
    http_request(base_url + "qotd", 'GET', {}, function (response) {
        let data = JSON.parse(response)
        quote_id = data.quote.id
        quote_container.innerText = data.quote.body + ' -' + data.quote.author
        console.log(data)
    })
    let upvote = document.getElementById('upvote')
    upvote.addEventListener('click', function () {
        http_request(base_url + 'quotes/' + quote_id + '/upvote', 'PUT', {}, function (response) {
            console.log(JSON.parse(response))
            let data = JSON.parse(response)
            if (data.user_details.upvote) {
                http_request(base_url + "qotd", 'GET', {}, function (response) {
                    let data = JSON.parse(response)
                    quote_id = data.quote.id
                    quote_container.innerText = data.quote.body + ' -' + data.quote.author
                })
            }
        })
    })
    let downvote = document.getElementById('downvote')
    downvote.addEventListener('click', function () {
        http_request(base_url + 'quotes/' + quote_id + '/downvote', 'PUT', {}, function (response) {
            console.log(JSON.parse(response))
            let data = JSON.parse(response)
            if (data.user_details.downvote) {
                http_request(base_url + "qotd", 'GET', {}, function (response) {
                    let data = JSON.parse(response)
                    quote_id = data.quote.id
                    quote_container.innerText = data.quote.body + ' -' + data.quote.author
                })
            }
        })
    })
</script>
</body>
</html>