Skip to content

Instantly share code, notes, and snippets.

@oliverbth05

oliverbth05/app.css

Created April 21, 2018 23:12
Show Gist options
  • Save oliverbth05/129923dd8f4c155caf235bb9573e2c38 to your computer and use it in GitHub Desktop.
Save oliverbth05/129923dd8f4c155caf235bb9573e2c38 to your computer and use it in GitHub Desktop.
Download ZIP
Input --> Array --> Html
Raw
app.css
body {
font-family: 'Roboto', sans-serif;
font-weight: lighter;
}
#navbar {
margin-top: 0;
}
#formComponent{
width: 25%;
margin-top: 50px;
}
ul {
list-style-type: none;
}
ul li {
word-break: break-all;
}
#inputBar{
width: 100%;
}
Raw
app.js
var app = new Vue({
el: "#formComponent",
data: {
data1: "",
dataArray: [],
},
methods: {
arrayToHTML: function(value){
if(this.data1 ==""){
alert("Invalid Entry");}
else{
this.dataArray.push(value);
var lastItem = this.dataArray.length - 1;
$('#arrayList').append("<li class = 'ui raised segment'>" + this.dataArray[lastItem] + "</li>");
this.data1 = ""; }}
}
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.css">
<link rel = "stylesheet" type = "text/css" href = "app.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<!-- Vue CDN ------------------------------ -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<!-- JQuery CDN ------------------------------------------------------------------------------------------------------------------------------------->
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div class = "ui container" id = "formComponent">
<div>
<div class = "ui input" id = "inputBar">
<input type = text v-model="data1" v-on:keydown.enter = "arrayToHTML(data1)">
</div>
<button class = "ui button fluid" v-on:click = "arrayToHTML(data1)">Submit</button>
</div>
<div>
<ul id = "arrayList"></ul>
</div>
</div>
<script src = "app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment