index.html

<div id="wrapper"></div>
<input type="text" id="input" placeholder="Değeri Gir"><!--
--><button id="convert" onClick="convert()">Dönüştür</button>
<p id="output"></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

script.js

function convert(){
  var input     = document.getElementById("input");
  var button    = document.getElementById("convert");
  var output    = document.getElementById("output");
  var inputVal  = input.value.toLowerCase();
  var dict      = {
    "İ": "I",
    "Ğ": "G",
    "Ç": "C",
    "Ş": "S",
    "Ö": "O",
    "Ü": "U",
    "ü": "u",
    "ş": "s",
    "ı": "i",
    "ç": "c",
    "ö": "o",
    "ğ": "g"
  };
  var str = inputVal.replace(/\s/g, '-');
  var replaced = str.replace(/[^\w ]/g, function(char) {
    return dict[char] || char;
  });
  output.innerHTML = replaced;
}

style.css

* {
  margin: 0;
  box-sizing: border-box;
}

#wrapper {
  margin: 20px auto auto;;
  width: 100%;
  height: 30px;
}

input, button {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

input {
  width: 85%;
  height: 30px;
  padding: 0 10px;
  border: lightgray solid 1px;
}

button {
  width: 15%;
  height: 30px;
  background: white;
  border: none;
  background: lightgray;
  color: gray;
}

p {
  display: block;
  margin: 10px 0 0;
  padding: 10px 20px;
  border: lightgray solid 1px;
  font-size: 14px;
  color: gray;
  line-height: 1.5;
}