Stworzenie przycisku z plusem i minusem.

pytanie zadane 2 maja 2021 w HTML i CSS przez ShockWave Bywalec (2,350 p.)
edycja 2 maja 2021 przez ShockWave

Cześć, potrzebuje pomocy ze stworzeniem przycisku, który będzie wyglądać jak ten w załączniku.

Znalazłem w sieci przykład z wykorzystaniem angulara, lecz niestety nie mogę go wykorzystać.

Mam też pytanie jak napisać w js funkcjonalność, która ograniczała by wartość w przycisku do danych pobieranych z zewnętrznego json.

Oto przycisk, z góry dziękuję za pomoc.

komentarz 2 maja 2021 przez ScriptyChris Mędrzec (190,170 p.)

Pytasz konkretnie o zrobienie znaków "-" i "+" w CSS? Na upartego można tam wstawić encje HTML: + oraz −

komentarz 2 maja 2021 przez ShockWave Bywalec (2,350 p.)

Faktycznie to nie było takie trudne, gorzej sprawa wygląda z js i pobieraniem odpowiedniej ilości z json.

1 odpowiedź

odpowiedź 2 maja 2021 przez Landu Stary wyjadacz (11,880 p.)
edycja 2 maja 2021 przez Landu

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Licznik</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js' defer></script>
</head>
<body>
    <div id="counter">
        <button id="subtract">-</button>
        <span id="count">0</span>
        <button id="add">+</button>
    </div>
</body>
</html>

CSS:

#counter {
    display: inline-block;
    background: #ececec;
    border: 1px solid black;
    border-radius: 0.5rem;
}

#counter button {
    margin: 0 1rem;
    padding: 0.6rem 1rem;
    border: none;
    color: blue;
    font-size: 2rem;
    background: none;
}

#counter span {
    font-size: 2rem;
    margin: 0rem 1rem;
}

JS:

const btn_add = document.getElementById("add");
const btn_subt = document.getElementById("subtract");
const count = document.getElementById("count");

function updateCounter(action) {
    // 0 (false) - odjąć, 1 (true) - dodać
    let temp = parseInt(count.innerHTML);
    action ? temp++ : temp--;
    count.innerHTML = temp;
}

btn_add.addEventListener('click', () => {
    updateCounter(true);
});

btn_subt.addEventListener('click', () => {
    updateCounter(false);
});

Co do tego JSONa to:

const response = {
    min: -5,
    max: 5
}

function updateCounter(action) {
    // 0 (false) - odjąć, 1 (true) - dodać
    let temp = parseInt(count.innerHTML);
    
    if(action) {
        temp++;
        if(temp > response.max) return;
    } else {
        temp--;
        if(temp < response.min) return;
    }
    count.innerHTML = temp;
}

komentarz 2 maja 2021 przez ShockWave Bywalec (2,350 p.)

Przycisk nie jest wystylowany dokladnie tak jak na zdjęciu, ale już sobie poradziłem. Dziękuję.

komentarz 3 maja 2021 przez ScriptyChris Mędrzec (190,170 p.)

@Landu, na przyszłość proszę żebyś nie dawał gotowców, gdy to nie jest konieczne, ponieważ one nie są mile widziane na forum.

komentarz 3 maja 2021 przez VBService Ekspert (256,660 p.)

@Landu,

const response = {
    min: -5,
    max: 5
}

function updateCounter(action) {
    // 0 (false) - odjąć, 1 (true) - dodać
    let temp = parseInt(count.textContent);
    action ? temp++ : temp--;
    if (temp >= response.min && temp <= response.max)
      count.textContent = temp;
}