determine the gender of a first name (Genderize.io / Vue.js)

In this example below you will see how to do a determine the gender of a first name (Genderize.io / Vue.js) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by knyttneve, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright knyttneve ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>determine the gender of a first name (Genderize.io / Vue.js)</title>
  <link href="https://fonts.googleapis.com/css?family=Comfortaa:400,700" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app" :class="[result.gender == 'male' ? 'app--male' : '' , result.gender == 'female' ? 'app--female' : '' , result.gender == 'null' ? 'app--null' : '' ]">
        <span class="result__progress-bar" :style=`width:${result.probability*100}%`></span>
  <div class="result">
    
    <h2 class="result__name">{{result.name}}</h2>
    <h3 class="result__gender">Gender : {{result.gender}}</h3>
    <div class="result__probability">
      <h2 class="result__probability-title">Probability : %{{result.probability*100}} </h2>
    </div>
  </div>
  <div :class="['search' , isNull ? 'search--error' : '']">
  <input class="search__input" type="text" v-model="name" @keyup.enter="search()" placeholder="Name" />
    <span class="info">Press enter key</span>
    </div>
 
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.2/vue-resource.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/knyttneve/determine-the-gender-of-a-first-name-genderizeio-vuejs-ybGwgr */
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #fff;
  height: 100vh;
  margin: auto;
  width: 100%;
  font-family: 'Comfortaa', cursive;
  transition: all .3s ease 0s;
}
#app > .result, #app .search {
  max-width: 400px;
}

.app--male {
  background: #444;
}
.app--male .result__progress-bar {
  background: rgba(0, 0, 0, 0.08);
}
.app--female {
  background: #fffad4;
}
.app--female .result__name, .app--female .result__probability, .app--female .result__gender {
  color: #000;
}
.app--female .info {
  color: rgba(0, 0, 0, 0.3);
}

.result {
  position: relative;
  z-index: 9;
  width: 100%;
  text-align: center;
  text-transform: capitalize;
  margin-bottom: 20px;
}
.result__name {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}
.result__gender {
  margin-bottom: 10px;
}
.result__progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transition: .3s ease 0s;
  background: rgba(0, 0, 0, 0.04);
}

.search {
  width: 100%;
}
.search__input {
  width: 100%;
  color: #000;
  font-family: 'Comfortaa', cursive;
  height: 60px;
  border: none;
  font-size: 22px;
  position: relative;
  z-index: 9;
  padding: 0 20px;
  box-sizing: border-box;
  font-weight: bold;
  border-radius: 30px;
  outline: none;
}
.search--error {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.info {
  width: 100%;
  text-align: center;
  display: block;
  font-size: 13px;
  margin-top: 15px;
  color: rgba(255, 255, 255, 0.2);
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(20px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-40px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(40px, 0, 0);
  }
}


/*Downloaded from https://www.codeseek.co/knyttneve/determine-the-gender-of-a-first-name-genderizeio-vuejs-ybGwgr */
var app = new Vue({
  el: "#app",
  data: function data() {
    return {
      name: 'Mert',
      isNull: false,
      result: {
        name: 'Mert',
        gender: 'male',
        probability: .99
      }
    };
  },

  methods: {
    search: function search() {
      var _this = this;

      this.isNull = false;
      if (this.name != null && this.name.trim() != "") {
        this.$http.get('https://api.genderize.io/?name=' + this.name).then(function (response) {
          response.body.gender != null ? _this.showResults(response.body) : _this.isNull = true;
        }, function (response) {
          alert("API connection failed");
        });
      }
    },
    showResults: function showResults(result) {
      this.result.name = result.name;
      this.result.gender = result.gender;
      this.result.probability = result.probability;
    }
  },
  created: function created() {}
});

Comments