Say Hello

by Jay Angelo Valmocina

HTML

<div id="app">
     <p class="message">{{ message }}</p>
    <button v-if="seen" class="toJapan" @click="toJapanesse">to Japanese</button>
    <button v-else="seen" class="toKorean" @click="toKorean">to Korean</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

CSS

@import url('https://fonts.googleapis.com/css?family=Poor+Story');

body{
  font-family: 'Poor Story', cursive;
  background-color: #20262E;
  margin: 2em;
}

.message {
  background-color: #fff;
  border-radius: 4pt;
  padding: 1.5em;
  font-size: 1.2em;
  transition: all 0.2s;
}

.toJapan {
   width: 12em;
   font-size:15pt;
   background-color: #2ecc71;
   border: 1pt solid #2ecc71;
   border-radius: 2pt;
   padding: 8pt;
   font-weight: bold;
   color: aliceblue;
   font-family: 'Poor Story', cursive;
}

.toKorean {
   width: 12em;
   font-size:15pt;
   background-color: #f59719;
   border: 1pt solid #f59719;
   border-radius: 2pt;
   padding: 8pt;
   font-weight: bold;
   color: aliceblue;
   font-family: 'Poor Story', cursive;
}

JavaScript

new Vue({
	el: "#app",
  data: function() {
  	return {
    		seen: "true",
        message: "Annyeonghaseyo",  
	}
	},
  methods: {
  	toJapanesse : function (){
				this.message = "こんちわ (Konnichiwa)";
        this.seen = false;
    },
    toKorean : function (){
        this.message = "아 녕 하 세 유 (Annyeonghaseyo)"
        this.seen = true;
    }
	}
})