Skip to content

Commit fe7fa18

Browse files
tolgaugurlutolgaugurlu
committed
ASCII Kod Bulucu, tuşlara basma olaylarının keyCode değerlerini görüntüleyen interaktif bir web uygulaması.
ASCII Kod Bulucu, kullanıcının herhangi bir tuşa bastığında o tuşun keyCode değerini görüntüleyen bir web uygulamasıdır. Bu uygulama, HTML, CSS ve JavaScript kullanılarak geliştirilmiştir ve kullanıcılara basit bir arayüz üzerinden tuş kodlarını anlık olarak gösterir. Ayrıca dil seçeneği, gece modu ve eğitim modu gibi ek özellikler sunar. ASCII Kod Bulucu, tuşlara basma olaylarının kodlara dönüşümünü anlamak ve görselleştirmek isteyen geliştiriciler ve öğrenenler için yararlı bir araçtır.
1 parent 3474c11 commit fe7fa18

File tree

6 files changed

+354
-0
lines changed

6 files changed

+354
-0
lines changed

‎CONTRIBUTING.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Katkıda Bulunma Rehberi
2+
3+
Bu proje, katkıda bulunmak isteyen herkesin katkıda bulunmasını memnuniyetle karşılar. İşte katkıda bulunmanıza yardımcı olacak bazı adımlar:
4+
5+
1. Proje deposunu kendi GitHub hesabınıza fork edin.
6+
2. Yeni bir branch oluşturun: `git checkout -b my-branch`
7+
3. Yapmak istediğiniz değişiklikleri yapın ve bunları commit edin: `git commit -m "My changes"`
8+
4. Yaptığınız değişiklikleri kendi fork'ünüze push edin: `git push origin my-branch`
9+
5. GitHub'da kendi fork'unuza gidin ve "Pull Request" düğmesine tıklayın.
10+
6. Değişikliklerinizi açıklayan bir Pull Request oluşturun.
11+
12+
Lütfen aşağıdaki kurallara uyun:
13+
14+
- Mevcut kodu bozmayacak veya mevcut özellikleri etkilemeyecek şekilde değişiklik yapın.
15+
- Değişikliklerinizi açıklayıcı bir şekilde belgeleyin ve açıklamaları ekleyin.
16+
- Projeyle ilgili hataları düzeltmek veya öneriler yapmak için issue açabilirsiniz.
17+
18+
Bize katkıda bulunduğunuz için teşekkür ederiz!

‎LICENSE

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
MIT Lisansı
2+
3+
Telif Hakkı (c) 2023 Tolga Uğurlu
4+
5+
Bu yazılım ve ilgili belgelendirme dosyaları ("Yazılım"), aşağıdaki şartları sağladığı sürece, herkese sınırlama olmadan kullanma, kopyalama, değiştirme, birleştirme, yayımlama, dağıtma, alt lisanslama ve/veya yazılımın kopyalarını satma izni verilmiştir:
6+
7+
Yukarıdaki telif hakkı bildirimi ve bu izin bildirimi yazılımın tüm kopyalarına veya önemli parçalarına eklenmelidir.
8+
9+
YAZILIM "OLDUĞU GİBİ" ESASINA BAĞLI OLARAK, HİÇBİR GARANTİ VERİLMEDEN, AÇIK VEYA ZIMNİ, TİCARETE ELVERİŞLİLİK, BELİRLİ BİR AMACA UYGUNLUK VEYA İHLAL OLMADAN İŞLETME HAKLARINA SAHİP OLMA HAKKI DA DAHİL OLMAK ÜZERE HİÇBİR TEMİNAT SAĞLAMADAN SUNULUR. HERHANGİ BİR KOŞULDA YAZARLAR VEYA TELİF HAKKI SAHİPLERİ HERHANGİ BİR İDDİA, HASAR VEYA DİĞER SORUMLULUKTAN SORUMLU DEĞİLDİR VEYA YAZILIM VE KULLANIMI VEYA YAZILIMLA BAĞLANTILI DİĞER İŞLEMLERDEN KAYNAKLANAN HERHANGİ BİR İDDİA, HASAR VEYA DİĞER SORUMLULUKTAN SORUMLU DEĞİLDİR.

‎rbtindex.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="rbtstyle.css" />
7+
<title>ASCII Kod Bulucu</title>
8+
</head>
9+
<body>
10+
<div class="language-selector">
11+
<button onclick="setLanguage('en')">English</button>
12+
<button onclick="setLanguage('tr')">Türkçe</button>
13+
</div>
14+
<div id="name" class="name">Tolga Uğurlu</div>
15+
<div class="theme-switch-wrapper">
16+
<label class="theme-switch" for="checkbox">
17+
<input type="checkbox" id="checkbox" />
18+
<div class="slider round"></div>
19+
</label>
20+
<div id="toggleTheme">Gece Modu</div>
21+
</div>
22+
<div id="tutorialButton" class="tutorial-button" onclick="toggleTutorial()">
23+
Eğitim Modu
24+
</div>
25+
<div id="insert" class="key-info">
26+
<div class="key">İstediğiniz herhangi bir tuşa basın</div>
27+
</div>
28+
<div id="tutorial" class="tutorial-content" style="display: none">
29+
<!-- Tutorial content will go here -->
30+
</div>
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎rbtscript.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
const insert = document.getElementById("insert");
2+
const toggleThemeText = document.getElementById("toggleTheme");
3+
const toggleThemeCheckbox = document.getElementById("checkbox");
4+
5+
let isNightMode = true;
6+
7+
toggleThemeCheckbox.addEventListener("change", () => {
8+
isNightMode = !isNightMode;
9+
updateTheme();
10+
});
11+
12+
function updateTheme() {
13+
if (isNightMode) {
14+
document.body.classList.remove("day-mode");
15+
document.body.classList.add("night-mode");
16+
toggleThemeText.textContent = "Gece Modu";
17+
} else {
18+
document.body.classList.remove("night-mode");
19+
document.body.classList.add("day-mode");
20+
toggleThemeText.textContent = "Gündüz Modu";
21+
}
22+
}
23+
24+
updateTheme();
25+
26+
window.addEventListener("keydown", (event) => {
27+
insert.innerHTML = `
28+
<div class="key">
29+
${event.key === " " ? "Space" : event.key}
30+
<small>Girilen Değer</small>
31+
</div>
32+
<div class="key">
33+
${event.keyCode}
34+
<small>ASCII Kodu</small>
35+
</div>
36+
<div class="key">
37+
${event.code}
38+
<small>event.code</small>
39+
</div>
40+
`;
41+
});
42+
function toggleTutorial() {
43+
const tutorial = document.getElementById("tutorial");
44+
const insert = document.getElementById("insert");
45+
const tutorialButton = document.getElementById("tutorialButton");
46+
if (tutorial.style.display === "none") {
47+
tutorial.style.display = "block";
48+
insert.style.display = "none";
49+
tutorialButton.innerHTML =
50+
language === "en" ? "Exit Tutorial" : "Eğitimden Çık";
51+
startTutorial();
52+
} else {
53+
tutorial.style.display = "none";
54+
insert.style.display = "block";
55+
tutorialButton.innerHTML =
56+
language === "en" ? "Start Tutorial" : "Eğitim Modu";
57+
}
58+
}
59+
60+
function startTutorial() {
61+
const tutorial = document.getElementById("tutorial");
62+
let content = "";
63+
if (language === "en") {
64+
content +=
65+
"<h2>Basic Information</h2><p>ASCII is a character encoding standard...</p>";
66+
// Add more content in English...
67+
} else {
68+
content +=
69+
"<h2>Temel Bilgiler</h2><p>ASCII, karakter kodlama standardıdır...</p>";
70+
// Daha fazla Türkçe içerik ekle...
71+
}
72+
tutorial.innerHTML = content;
73+
}
74+
75+
let language = "en"; // default language
76+
77+
function setLanguage(lang) {
78+
language = lang;
79+
updateContent();
80+
}
81+
82+
function updateContent() {
83+
const toggleTheme = document.getElementById("toggleTheme");
84+
const tutorialButton = document.getElementById("tutorialButton");
85+
if (language === "en") {
86+
toggleTheme.innerHTML = "Night Mode";
87+
tutorialButton.innerHTML = "Start Tutorial";
88+
} else {
89+
toggleTheme.innerHTML = "Gece Modu";
90+
tutorialButton.innerHTML = "Eğitim Modu";
91+
}
92+
}

‎rbtstyle.css

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body.night-mode {
8+
background-color: #383838;
9+
font-family: "Muli", sans-serif;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
text-align: center;
14+
height: 100vh;
15+
overflow: hidden;
16+
margin: 0;
17+
}
18+
19+
body.day-mode {
20+
background-color: #f0f0f0;
21+
font-family: "Muli", sans-serif;
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
text-align: center;
26+
height: 100vh;
27+
overflow: hidden;
28+
margin: 0;
29+
}
30+
31+
.key {
32+
border: 1px solid #999999;
33+
background-color: #2b2b2b;
34+
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
35+
display: inline-flex;
36+
align-items: center;
37+
font-size: 20px;
38+
font-weight: bold;
39+
padding: 20px;
40+
flex-direction: column;
41+
margin: 10px;
42+
min-width: 150px;
43+
color: white;
44+
position: relative;
45+
}
46+
47+
.key small {
48+
position: absolute;
49+
top: -24px;
50+
left: 0;
51+
text-align: center;
52+
width: 100%;
53+
color: #c4c4c4;
54+
font-size: 14px;
55+
}
56+
57+
.name {
58+
position: absolute;
59+
top: 50px;
60+
font-size: 32px;
61+
font-weight: bold;
62+
color: #ffffff;
63+
}
64+
65+
/* Toggle Switch Stilleri */
66+
.theme-switch-wrapper {
67+
display: flex;
68+
align-items: center;
69+
position: absolute;
70+
top: 10px;
71+
right: 10px;
72+
}
73+
74+
.theme-switch {
75+
display: inline-block;
76+
height: 24px;
77+
position: relative;
78+
width: 40px;
79+
}
80+
81+
.theme-switch input {
82+
display: none;
83+
}
84+
85+
.slider {
86+
background-color: #ccc;
87+
bottom: 0;
88+
cursor: pointer;
89+
left: 0;
90+
position: absolute;
91+
right: 0;
92+
top: 0;
93+
transition: 0.4s;
94+
}
95+
96+
.slider:before {
97+
background-color: #fff;
98+
bottom: 4px;
99+
content: "";
100+
height: 16px;
101+
left: 4px;
102+
position: absolute;
103+
transition: 0.4s;
104+
width: 16px;
105+
}
106+
107+
input:checked + .slider {
108+
background-color: #66bb6a;
109+
}
110+
111+
input:checked + .slider:before {
112+
transform: translateX(16px);
113+
}
114+
115+
.slider.round {
116+
border-radius: 34px;
117+
}
118+
119+
.slider.round:before {
120+
border-radius: 50%;
121+
}
122+
123+
#toggleTheme {
124+
margin-left: 8px;
125+
}
126+
.tutorial-button {
127+
cursor: pointer;
128+
margin: 20px;
129+
padding: 10px 20px;
130+
background-color: #4caf50;
131+
color: white;
132+
border: none;
133+
text-align: center;
134+
font-size: 16px;
135+
transition-duration: 0.4s;
136+
}
137+
138+
.tutorial-button:hover {
139+
background-color: #45a049;
140+
}
141+
142+
.tutorial-content {
143+
text-align: left;
144+
margin: 20px;
145+
}
146+
147+
.key-info {
148+
display: none;
149+
}

‎readme.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# ASCII Code Finder Projesi
2+
3+
Bu proje, kullanıcının bir tuşa bastığında o tuşun keyCode değerini görüntüleyen bir web uygulamasıdır. HTML, CSS ve JavaScript kullanılarak geliştirilmiştir.
4+
5+
## Nasıl Çalışır?
6+
7+
1. Proje dosyalarını bilgisayarınıza indirin veya kopyalayın.
8+
2. `index.html` dosyasını bir web tarayıcısıyla açın.
9+
3. Herhangi bir tuşa bastığınızda, tuşun keyCode değeri ve diğer bilgiler ekranın üst kısmında görüntülenecektir.
10+
11+
## Özellikler
12+
13+
Bu proje şunları yapabilir:
14+
15+
- Kullanıcının herhangi bir tuşa bastığında tuşun keyCode değerini görüntüler.
16+
- Kullanıcılar arasında geçiş yapabilen İngilizce ve Türkçe dil seçeneği sunar.
17+
- Kullanıcılar arasında geçiş yapabilen gece modu ve gündüz modu sunar.
18+
- Eğitim moduyla kullanıcılara ek bilgiler sunar.
19+
20+
## Kullanılan Teknolojiler
21+
22+
Bu proje aşağıdaki teknolojileri kullanır:
23+
24+
- HTML
25+
- CSS
26+
- JavaScript
27+
- Google Fonts API
28+
29+
## Nasıl Çalıştırılır?
30+
31+
1. Projeyi bilgisayarınıza indirin veya kopyalayın.
32+
2. İndirdiğiniz dosyaları bir metin düzenleyicide açın.
33+
3. `index.html` dosyasını bir web tarayıcısıyla açın.
34+
35+
## Eğitim Modu
36+
37+
Bu projede eğitim modu bulunmaktadır. Eğitim moduna geçmek için "Eğitim Modu" düğmesine tıklayın. Eğitim modunda ek bilgiler görüntülenecek ve normal moddaki tuş basma işlevi devre dışı bırakılacaktır. Eğitim modundan çıkmak için tekrar "Eğitim Modu" düğmesine tıklayın.
38+
39+
## Dil Seçimi
40+
41+
Bu projede İngilizce ve Türkçe dil seçenekleri bulunmaktadır. Dil seçimini değiştirmek için sayfanın üst kısmındaki dil düğmelerinden birine tıklayın.
42+
43+
## Gece Modu
44+
45+
Bu projede gece modu ve gündüz modu seçenekleri bulunmaktadır. Tema modunu değiştirmek için sayfanın sağ üst köşesindeki anahtar düğmesine tıklayın.
46+
47+
## Geliştirme
48+
49+
Herhangi bir katkı yapmak isterseniz, lütfen `CONTRIBUTING.md` dosyasını okuyun ve katkı kurallarına uyun.
50+
51+
## Lisans
52+
53+
Bu proje MIT Lisansı altında lisanslanmıştır. Daha fazla bilgi için `LICENSE` dosyasını okuyun.

0 commit comments

Comments
 (0)