Çözüldü: HTML sadece rakam değiştiren input nasıl yapılır?

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

ErrorCorrection

Hectopat

10 Şubat 2023

Taslağını eke bıraktım. Buna benzer bir şey yapacağım. Nasıl yapabilirim?
(Taslağa göre olmak zorunda değil. Mantık aynı olsun. Sadece bir rakam girilsin. Ve sayı girilmesin.)

Çözüm

Tamamdır, hallettim. Anlamadığınız kısımlarda yardımcı olabilirim.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://css.gg/css?=chevron-up.css" rel="stylesheet" />
    <link href="https://css.gg/css?=chevron-down.css" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <title>Technopat</title>
  </head>
  <body>
    <div class="number-input">
      <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
        <i class="gg-chevron-up"></i>
      </button>
      <input type="number" name="" id="" />
      <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
        <i class="gg-chevron-down"></i>
      </button>
    </div>
  </body>
</html>

CSS:

/* Body'ye verdiğim bu stiller sadece ortalamak için */
body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Varsayılan olarak gelen oklardan kurtuluyoruz */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Değerlerde oynama yaparak istediğiniz büyüklüklere getirebilirsiniz */
.number-input > input {
    border: 3px solid #000;
    border-radius: 5px;
    margin: 3px 0;
    text-align: center;
    font-size: 2rem;
    width: 50px;
    height: 50px;
}

/* Okların büyüklük katsayısını ayarlıyoruz ve minik animasyon */
.gg-chevron-up, .gg-chevron-down {
    --ggs: 1.7;
    transition: all 0.1s ease;
}

/* Fare ile üzerine gelindiğindeki büyüklüğü */
.gg-chevron-up:hover, .gg-chevron-down:hover {
    --ggs: 2;
}

.number-input > button {
    cursor: pointer;
    background: none;
    border: none;
}

Çıktı:

Tarihe göre sırala Puana göre sırala

ErrorCorrection

Hectopat

10 Şubat 2023

kaan.w dedi:
Programalama temelim var iken JavaScript'e geçtiğim için çok zorlanmamıştım bu yüzden hangi kurs, video serisi daha iyidir pek bilgim yok fakat freecodecamp YouTube kanalının JavaScript için güzel içerikleri vardı. İngilizcen yeterli ise oradaki videolara bir göz atabilirsin.

Forumda gordugum kadarı ile JS ve Python çok iyi derecede biliyorsunuz.