ayaysir/vue-fortune.htm

## vue-fortune.htm
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>이름으로 보는 2019년 운세 (Ver 0.1)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>

<body>
    <h2>이름으로 보는 2019년 운세</h2>
    <div id="app">
        <input v-model="message" type=text placeholder="이름을 입력하세요" v-on:keyup.enter="hashing">
        <button v-on:click="hashing" id=searchBtn>검색</button>
        <pre>{{text}}</pre>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '',
                md5: '',
                text: '',
                sentences: null
            },
            methods: {
                hashing: function(e) {
                    // 이름을 입력하면 md5 해시값을 생성
                    var hashed = md5(this.message).replace(/a/g, 0)
                        .replace(/b/g, 1).replace(/c/g, 2).replace(/d/g, 3).replace(/e/g, 4).replace(/f/g, 5)
                    this.md5 = hashed

                    // 이름에 따라 생성한 해시값을 3등분해 금전, 사업, 생명 수치로 환산
                    var wealth = hashed.substring(0, 2)
                    var biz = hashed.substring(2, 4)
                    var life = hashed.substring(4, 6)

                    console.log(wealth, biz, life)

                    // makeSentence 에서의 참조를 위해 self 변수를 생성
                    var self = this

                    function makeSentence(category, num) {

                        num = parseInt(num)
                        var outputSentence = "";

                        // 20점 간격으로 문장 배열의 0, 1, 2, 3, 4 번 원소를 불러온다.
                        if (num >= 0 && num <= 80) {
                            outputSentence = self.sentences[category][Math.ceil(num / 20) - 1]
                        } else {
                            outputSentence = self.sentences[category][4]
                        }
                        return outputSentence;

                    }

                    // 최종 텍스트를 생성해 이 인스턴스의 this.text로 값을 전송
                    this.text = "금전운: " + wealth + " | " + makeSentence("wealth", wealth) +
                        "\n사업운: " + biz + " | " + makeSentence("biz", biz) +
                        "\n생명운: " + life + " | " + makeSentence("life", life)
                }
            },
            created: function() {

                var sentences = {
                    wealth: ["매우 안좋습니다. 거지가 될거에요", "약간 안좋네요", "그냥 그렇습니다", "올해엔 좀 돈맛좀 볼지도?", "당신은 부자가 됩니다."],
                    biz: ["매우 안좋습니다. 가만히 있으세요", "약간 안좋네요", "그냥 그렇습니다", "부루마블 좀 하셨나봐요?", "당신은 이재용이 됩니다."],
                    life: ["매우 안좋습니다. 내일 죽을수도..", "약간 안좋네요", "그냥 그렇습니다", "욕 좀 드셨나봐요?", "당신은 200살까지 삽니다."]
                }

                // 이 인스턴스 data 내에 있는 senetence 변수에 데이터를 할당
                this.sentences = sentences
            }
        })

    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="ko">

	<head>
	<meta charset="UTF-8">
	<title>이름으로 보는 2019년 운세 (Ver 0.1)</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.10.0/js/md5.min.js"></script>
	</head>

	<body>
	<h2>이름으로 보는 2019년 운세</h2>
	<div id="app">
	<input v-model="message" type=text placeholder="이름을 입력하세요" v-on:keyup.enter="hashing">
	<button v-on:click="hashing" id=searchBtn>검색</button>
	<pre>{{text}}</pre>
	</div>

	<script>
	var app = new Vue({
	el: '#app',
	data: {
	message: '',
	md5: '',
	text: '',
	sentences: null
	},
	methods: {
	hashing: function(e) {
	// 이름을 입력하면 md5 해시값을 생성
	var hashed = md5(this.message).replace(/a/g, 0)
	.replace(/b/g, 1).replace(/c/g, 2).replace(/d/g, 3).replace(/e/g, 4).replace(/f/g, 5)
	this.md5 = hashed

	// 이름에 따라 생성한 해시값을 3등분해 금전, 사업, 생명 수치로 환산
	var wealth = hashed.substring(0, 2)
	var biz = hashed.substring(2, 4)
	var life = hashed.substring(4, 6)

	console.log(wealth, biz, life)

	// makeSentence 에서의 참조를 위해 self 변수를 생성
	var self = this

	function makeSentence(category, num) {

	num = parseInt(num)
	var outputSentence = "";

	// 20점 간격으로 문장 배열의 0, 1, 2, 3, 4 번 원소를 불러온다.
	if (num >= 0 && num <= 80) {
	outputSentence = self.sentences[category][Math.ceil(num / 20) - 1]
	} else {
	outputSentence = self.sentences[category][4]
	}
	return outputSentence;

	}

	// 최종 텍스트를 생성해 이 인스턴스의 this.text로 값을 전송
	this.text = "금전운: " + wealth + " \| " + makeSentence("wealth", wealth) +
	"\n사업운: " + biz + " \| " + makeSentence("biz", biz) +
	"\n생명운: " + life + " \| " + makeSentence("life", life)
	}
	},
	created: function() {

	var sentences = {
	wealth: ["매우 안좋습니다. 거지가 될거에요", "약간 안좋네요", "그냥 그렇습니다", "올해엔 좀 돈맛좀 볼지도?", "당신은 부자가 됩니다."],
	biz: ["매우 안좋습니다. 가만히 있으세요", "약간 안좋네요", "그냥 그렇습니다", "부루마블 좀 하셨나봐요?", "당신은 이재용이 됩니다."],
	life: ["매우 안좋습니다. 내일 죽을수도..", "약간 안좋네요", "그냥 그렇습니다", "욕 좀 드셨나봐요?", "당신은 200살까지 삽니다."]
	}

	// 이 인스턴스 data 내에 있는 senetence 변수에 데이터를 할당
	this.sentences = sentences
	}
	})

	</script>
	</body>

	</html>