<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="container" style="font-family: 'Strait', sans-serif;">
<div class="jumbotron">
<h3>Kelime Harf Karıştırıcı</h3>
<p>Aşağıdaki kelimeyi karıştırmak için butona tıklayın.</p>
</div>
<div class="form-group">
<label for="inputWord">Kelime:</label>
<input type="text" class="form-control" id="inputWord" value="çanakkale">
</div>
<button id="shuffleButton" class="btn btn-primary btn-lg btn-block">Rearrange</button>
<div class="result-box" id="outputWord">
çanakkale
</div>
</div>
body {
background-color: #f0f2f5;
padding-top: 50px;
}
.container {
max-width: 500px;
background-color: #ffffff;
border-radius: 8px;
padding: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.jumbotron {
background-color: #007bff;
color: #ffffff;
text-align: center;
border-radius: 8px;
padding: 20px;
}
.result-box {
text-align: center;
font-size: 2.5em;
font-weight: bold;
color: #333;
margin-top: 20px;
padding: 10px;
background-color: #e9ecef;
border-radius: 4px;
}
$(document).ready(function() {
// Harfleri rastgele sıralayan fonksiyon
function shuffleString(str) {
// Kelimeyi harflere ayırın
const arr = str.split('');
// Fisher-Yates shuffle algoritması
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]]; // Harflerin yerini değiştirin
}
// Karıştırılmış harfleri birleştirip geri döndürün
return arr.join('');
}
// Butona tıklandığında çalışacak olay dinleyicisi
$('#shuffleButton').on('click', function() {
// Hata burada düzeltildi: Değeri butona tıklandığı anda alıyoruz
const originalWord = $('#inputWord').val();
const outputElement = $('#outputWord');
const shuffledWorda = shuffleString(originalWord);
const shuffledWord = toSeoUrl(shuffledWorda,"");
// Karıştırılan kelimeyi çıktı alanına yazın
outputElement.text(shuffledWord);
});
// Metni URL formatına çevirme (SEO-Friendly)
function toSeoUrl(text, ch) {
var trMap = {
'ç': 'c', 'ğ': 'g', 'ı': 'i', 'ö': 'o', 'ş': 's', 'ü': 'u',
'Ç': 'c', 'Ğ': 'g', 'İ': 'i', 'Ö': 'o', 'Ş': 's', 'Ü': 'u'
};
return text.replace(/[çğıöşüÇĞİÖŞÜ]/g, function (match) {
return trMap[match];
}).toLowerCase().trim().replace(/['"`]/g, ch).replace(/[^a-z0-9\- ]/g, '').replace(/\s+/g, ch).replace(/-+/g, ch);
}
});
