todo-generator/index.html at main · choipureum/todo-generator · 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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="application-name" content="랜덤 할일 생성기">
    <meta name="theme-color" content="#000">
    <meta name="description" content="할일이 없다면 생성해보세요.">
    <title>랜덤 할일 생성기</title>
    <!--<base href="https://choipureum.github.io/todo-generator/">-->
    <link rel="stylesheet" href="assets/style.css">
    <meta property="og:url" content="https://github.com/choipureum/todo-generator">
    <meta property="og:type" content="website">
    <meta property="og:title" content="랜덤 할일 생성기">
    <meta property="og:description" content="당신만의 랜덤 할일을 생성하세요.">
    <meta property="og:site_name" content="랜덤 할일 생성기">
    <meta property="og:locale" content="ko_KR">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title -랜덤 할일 생성기</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="assets/vue.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>

    <div class="container">
        <div class="hero">
            <h1><span class="title-identifier">랜덤 할 일</span> 생성기 v1.0.0</h1>
            <p><span class="title-identifier">랜덤으로 할 일을</span> 생성합니다.</p>
        </div>
        <div class="form">
            <!--
                <form action="" autocomplete="off">

                    <div class="wrapper"><div class="form-8bit"><div class="form-8bit-wrapper"><input class="form-component input light-dark" type="text" name="location" id="location" placeholder="거주지(선택)"></div></div></div>
                    <div class="wrapper"><div class="form-8bit"><div class="form-8bit-wrapper"><input class="form-component input light-dark" type="text" name="name" id="name" placeholder="이름" onchange="joonsikfinder(this.value)"></div></div></div>
                    <div style="display: inline-block;">
                        <label for="is-limited"><div class="wrapper checkboxlabeler"><div id="is-limited-wrapper" class="form-8bit"><div class="form-8bit-wrapper"><input id="is-limited" class="checkboxlabeler-input" type="checkbox"></div></div></div><p class="checkboxlabeler" id="is-limited-alerter">글자수 제한</p></label>
                        <div class="wrapper" id="is-limited-num"><div class="form-8bit"><div class="form-8bit-wrapper"><input class="form-component input light-dark" type="number" name="is-limited-num" id="is-limited-num-input" placeholder="N자리" onchange=""></div></div></div>
                    </div>
                    <div class="wrapper"><div class="form-8bit"><div class="form-8bit-wrapper"><div class="form-component button" onclick="generate(document.getElementById('name').value, document.getElementById('location').value, 'result')">생성!</div></div></div></div>
                </form>
             -->
        </div>
    </div>
    <div class="container">
        <div class="wrapper">
            <p class="result" id="result">생성 버튼을 누르면 여기에 결과가 표시됩니다.</p>
        </div>
        <hr>

        <div id="app">
            <div class="wrapper">
                <div class="form-8bit">
                    <div class="form-8bit-wrapper">
                        <div type="button" class="form-component button" v-on:click="makeBoring()"><span>{{question}}</span></div>
                    </div>
                </div>
            </div>


            <div v-if="view == true">
                <hr />
                <p>당장 할 것 : {{activity}}</p>
                <p>가격 : {{price * 100000}} won</p>
                <p>타입 : {{type}}</p>
                <p>너의 실현가능성 : {{accessibility * 100}} % </p>
                <hr />
            </div>
        </div>
    </div>
    <div class="example">
        <p>어떤 미션이 나올까?</p>
        <div class="input-example light-dark" id="example-location">푸름에게</div>
        <div class="input-example light-dark" id="example-name">술사기</div>
        →
        <div class="input-example light-dark" id="example-result">실현율 100% / 비용: 1000만원</div>
    </div>
    <div class="github-wrapper"><div class="form-8bit"><div class="form-8bit-wrapper"><div class="github"><a href="https://github.com/choipureum/todo-generator" target="_blank">대체 여긴 뭐하는 사이트인가요?</a></div></div></div></div>
        <div>
        <img style="width:10%;height:10%;"
             src="https://ww.namu.la/s/c80fdba0c6ddeb12406e44c16cb11af88a33a04e67b9a7a171a5112db448c41d505c52a9c7e01ddad827d0dabde3d1d1fd8608ff85e5a7bd771725283678b05f9a37a803e7925f2e4c857ae12d2585f2ee53ce251b7947644eb4292b1d4b96cc"/>

    </div>
    <script type="text/javascript">

        var app = new Vue({
            el: '#app',
            data() {
                return {
                    question: '생성!',
                    view: false,
                    accessibility: '',
                    activity: '',
                    key: '',
                    link: '',
                    participants: '',
                    price: '',
                    type: ''
                }
            },
            methods: {
                makeBoring: function (event) {
                    var url = "https://www.boredapi.com/api/activity/";
                    var trans_url = "https://dapi.kakao.com/v2/translation/translate";
                    var self = this;
                    self.question = "생성중...";

                    axios.get(url)
                        .then(function (response) {
                            if (response) {
                                d = response.data;

                                $.ajax({
                                    type: "GET",
                                    url: trans_url,
                                    headers: {
                                        "Authorization": 'KakaoAK 07d0deacafdcb665df1797759d9bbf84'
                                    },
                                    data: {
                                        query: d.activity,
                                        src_lang: 'en',
                                        target_lang: 'kr',
                                    },
                                    success: function (res) {
                                        var result = res.translated_text[0];
                                        self.activity = res.translated_text[0];
                                        self.accessibility = d.accessibility;
                                        self.key = d.key;
                                        self.link = d.link;
                                        self.participants = d.participants;
                                        self.price = d.price;
                                        self.type = d.type;
                                        self.view = true;
                                        self.question ="생성완료";
                                    }
                                });
                            }
                            else {
                                alert("받아오기 실패");
                            }
                        }).catch(function (error) {
                            alert("ERROR: " + (error.message | error));
                        });


                }
            }
        });
    </script>

</body>
</html>