Vue.js Twitter Project

index.html

<meta name="viewport" content="width=device-width">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>

<div id="app">
  <center>
    <!-- Navbar -->
    <div class="ui secondary pointing menu" id="nav">
  <a class="active blue item">
    <i class="home icon"></i>
  </a>
  <a class="blue item">
    <i class="envelope blue outline icon"></i>
  </a>
  <a class="blue item">
    <i class="user outline blue icon"></i>
  </a>
  <div class="right menu">
    <a class="ui item">
      <i class="power off blue icon"></i>
    </a>
  </div>
</div>

    <!-- Navbar -->
    <button class="ui primary circular basic button"  id="tweetle" @click="tweetButton" vif="!show">Tweet</button>
    <div class="ui icon input" id="cerceve" v-if="show">
      <input class="giris" type="text" placeholder="Tweet write and press enter" v-on:keydown.enter="addtweet" >
      <i class="circular close blue link icon" @click="close" v-if="show"></i>
  </div>
    <br>
    <div class="ui card" v-for="content in contents" id="kartlar">
      
  <div class="content">
    
    <div class="center aligned header"></div>
    <div class="center aligned description">
      <p> {{content}} </p>
    </div>
  </div>
  <div class="extra content">
    <div class="center aligned author">
      <img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/jenny.jpg"> Özgür Kurucan
    </div>
  </div>
</div>
  
 </center>
</div>

script.babel

var app = new Vue ({
  el: '#app',
  data: {
    contents: ["For new project insta: @yessGlory"],
    show: false
  },
  
  methods: {
   addtweet: function(event){
     
     if(event.target.value !== ''){
        this.contents.push(event.target.value)
        event.target.value = ""
      } else {
      alert("This input box is empty")
    }
   },
    
   tweetButton: function(){
      this.show = !this.show
      
    },
    close: function(){
      this.show = !this.show
    }
    
  }
})

scripts

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

style.css

.giris {
  width: 300px;
  background-color: #ffff;
  margin-top: 10px;
  box-shadow: 1px 1px 5px 1px;
}
 #app{
    margin-top: 0px;   
    width: 100%;
    height: 100%;
    background-color: #dff9fb;
}
#cerceve{
  width: 80%;
  margin-left: -53%;
  border: 1px solid #ffff;
  position: fixed;
  z-index: 1;
  margin-top: 10px;
  
  
}
#kartlar {
  margin-top: 30px;
  box-shadow: 1px 1px 5px 1px;
}
#tweetle{
  margin-left: 5%;
  box-shadow: 1px 1px 5px 1px;
  margin-top: 10px;
  z-index: 1;
}
#nav {
  background-color: #ffff;
  box-shadow: 1px 1px 20px 1px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />

vue-js-twitter-project.markdown

Vue.js Twitter Project

This project is basic a twitter clone. Project with made in Vue.js!

A Pen by Özgür on CodePen.

License.