• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Калькулятор для сайта на JavaScript + CSS (Стильный минималистичный кастомайзер + калькулятор на jquery)
Калькулятор для сайта на JavaScript + CSS
Kosten
Дата: Воскресенье, 2021-01-24, 23:15 | Сообщение 1
Онлайн
Администраторы
Сообщений:37915
Награды: 65


Сейчас не редко можно встреть калькулятор, ведь очень много тематических сайтов, где он просто необходим в онлайн режиме. И здесь вашему вниманию стильный калькулятор с функцией нажатия клавиши, который идет в темном дизайне. Отличным решением его поставить на услуги или интернет магазине, где для пользователя или гостей сайта будет предоставлен калькулятор с понятной панелью.

Где не спеша можно подсчитать все что вы выставили в табло под значение, как прибавить или отнять, все необходимые функции на нем закреплены, но и по своему стилю выглядит великолепно.

Так выглядит после установочного процесса:



HTML

Код
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Calculator</title>
</head>
<body>
    <div id="calculator" class="calculator">
  <div id="display" class="display"></div>
    </div>
</body>
</html>

CSS

Код
html, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: #212126;
    color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2em;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
}

p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: normal;
}

.calculator {
    padding: 0.5em;
    background: #161621;
    border-radius: 6px;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
}

.calculator > * {
    width: 2em;
    height: 2em;
    margin: 0 0.25em;
    background: #212121;
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    vertical-align: center;
    line-height: 2em;
}

.calculator .button {
    margin-bottom: 0.5em;
    cursor: pointer;
    transition: box-shadow 0.3s;
}

.calculator .button[text="on"] {
    background: #00c853;
}

.calculator .button[text="off"] {
    background: #f44336;
}

.calculator .button::before {
    content: attr(text);
}

.calculator .button:hover {
    box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4);
}

.calculator .button:active {
    box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.5) inset;
}

.calculator .display {
    width: initial;
    margin: 0.5em 0.25em 1em;
    padding: 0 0.5em;
    background: #262631;
    display: block;
    text-align: right;
    font-family: monospace;
    font-size: 1.2em;
    box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.4) inset;
    transition: background 0.2s, color 0.2s;
}

.calculator .display.off {
    background: #212121;
    color: transparent;
}

JS

Код
const body = document.getElementById("calculator");
const display = document.getElementById("display");

class Button {
    constructor(text, callback) {
  if (!callback) {
   callback = () => {
    if (display.innerText == "ERROR")
     display.innerText = "";
    
    display.innerText += text;
   }
  }
  
  this.element = document.createElement("div");
  this.element.classList.add("button");
  this.element.setAttribute("text", text);
  this.element.addEventListener("click", callback);
    }
    
    create() {
  body.appendChild(this.element);
    }
}

function calculate() {
    let result = "";
    
    try {
  if (display.innerText.length > 0)
   result = eval(display.innerText);
    } catch {
  result = "ERROR";
    }
    
    display.innerText = result;
}

function backspace() {
    if (display.innerText.length > 0) {
  display.innerText =
   display.innerText.substring(0, display.innerText.length - 1);
    }
}

function power(action) {
    if (action) {
  display.innerText = ""

  display.classList.remove("off");
    } else {
  setTimeout(() => display.innerText = "", 200);
  
  display.classList.add("off");
    }
}

[
    new Button("=", calculate),
    new Button("←", backspace),
    new Button("on", () => power(true)),
    new Button("off", () => power(false)),
    new Button(7), new Button(8), new Button(9), new Button("*"),
    new Button(4), new Button(5), new Button(6), new Button("/"),
    new Button(1), new Button(2), new Button(3), new Button("-"),
    new Button(0), new Button("("), new Button(")"), new Button("+"),
].forEach((button, i) => {
    button.create();
    
    if ((i + 1) % 4 == 0)
  body.appendChild(document.createElement("br"));
});

Как можно заметить, что код изначально выстроен под страницу для сайта.

Демонстрация
Прикрепления: 7274106.png(29.9 Kb) · calculator.zip(4.9 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Калькулятор для сайта на JavaScript + CSS (Стильный минималистичный кастомайзер + калькулятор на jquery)
  • Страница 1 из 1
  • 1
Поиск: