📚 Калькулятор 📚

Источник: видео "Speed Coding | HTML, CSS, JS - Calculator" https://vk.com/im/convo/19460369?entrypoint=list_all&z=video-101965347_456276133%2F98c1eac7213a7f330f

Recording.121.mp4

создаем создаем файлы index.html, style.css (в папке css), script.js (в папке js) в папке проекта.
в файле index.html готовим шаблон

<!-- Сообщаем браузеру, как стоит обрабатывать эту страницу -->
<!DOCTYPE html>
<!-- Оболочка документа, указываем язык содержимого -->
<html lang="ru">
<!-- Заголовок страницы, контейнер для других важных данных (не отображается) -->
<head>
    <!-- Заголовок страницы в браузере -->
    <title></title>
    <!-- Подключаем CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Кодировка страницы -->
    <meta charset="utf-8">
    <!-- Адаптив -->
    <meta name="viewport" content="width=device-width">
</head>
<!-- Отображаемое тело страницы -->
<body>
<!-- Оболочка для демонстрации -->
<div class="wrapper">
    <!-- Контент -->
   
    <!-- Подключаем файл JS скриптов -->
    <script src="js/script.js"></script>
</div>
</body>
</html>

в файле style.css вставляем шаблон

/* Обнуление */
*,*:before,*:after{
   padding: 0;
   margin: 0;
   border: 0;
   box-sizing: border-box;
}
/* Стили для демонстрации */
html,body{
   height: 100%;
   background-color: #333;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   color: #fff;
   font-size: 25px;
}
.wrapper{
   height: 100%;
   padding: 50px;
}
/* Основные стили */

в файле index.html называем проект в разделе head

<title>Калькулятор</title>

в файле index.html создаем таблицу в разделе body

<div class="main">
    <form name="form">
        <input class="textview">
    </form>
    <table>
        <tr>
            <td><input type="button" value="C"></td>
            <td><input type="button" value="<"></td>
            <td><input type="button" value="/"></td>
            <td><input type="button" value="x"></td>
        </tr>
        <tr>
            <td><input type="button" value="7"></td>
            <td><input type="button" value="8"></td>
            <td><input type="button" value="9"></td>
            <td><input type="button" value="-"></td>
        </tr>
        <tr>
            <td><input type="button" value="4"></td>
            <td><input type="button" value="5"></td>
            <td><input type="button" value="6"></td>
            <td><input type="button" value="+"></td>
        </tr>
        <tr>
            <td><input type="button" value="1"></td>
            <td><input type="button" value="2"></td>
            <td><input type="button" value="3"></td>
            <td><input type="button" value="="></td>
        </tr>
        <tr>
            <td><input type="button" value="0"></td>
            <td><input type="button" value="."></td>
        </tr>
    </table>
</div>

в файле style.css стилизуем кнопки

.button{
    width: 50px;
    height: 50px;
    font-size: 25px;
    margin: 2px;
    cursor: pointer;
    background: #607d8b;
    border: none;
    color: white;
}

в файле style.css стилизуем строку для просмотра результата

.textview{
    width: 217px;
    margin: 5px;
    font-size: 25px;
    padding: 5px;
    border: none;
    color: #607d8b;
}

в файле script.js чтобы числовое поле выводило результат после нажатий кнопок

function insert(num){
    document.form.textview.value = document.form.textview.value+num
}

в файле index.html - чтобы кнопки реагировали на клик и выдавали нужный результат

добавляем name

<input class="textview" name="textview">

добавляем onclick="" и class

<td><input class="button" type="button" value="/" onclick="insert('/')"></td>
<td><input class="button" type="button" value="x" onclick="insert('*')"></td>
<td><input class="button" type="button" value="7" onclick="insert(7)"></td>
<td><input class="button" type="button" value="8" onclick="insert(8)"></td>
<td><input class="button" type="button" value="9" onclick="insert(9)"></td>
<td><input class="button" type="button" value="-" onclick="insert('-')"></td>
<td><input class="button" type="button" value="4" onclick="insert(4)"></td>
<td><input class="button" type="button" value="5" onclick="insert(5)"></td>
<td><input class="button" type="button" value="6" onclick="insert(6)"></td>
<td><input class="button" type="button" value="+" onclick="insert('+')"></td>
<td><input class="button" type="button" value="1" onclick="insert(1)"></td>
<td><input class="button" type="button" value="2" onclick="insert(2)"></td>
<td><input class="button" type="button" value="3" onclick="insert(3)"></td>
<td><input class="button" type="button" value="." onclick="insert('.')"></td>

чтобы работала кнопка '='

index.html

<td><input class="button" type="button" value="=" onclick="equal()"></td>

script.js

function equal(){
    var exp = document.form.textview.value;
    if(exp){
        document.form.textview.value = eval(exp)
    }
}

чтобы работала кнопка "C" - "clear" (очистка поля)

index.html - добавляем class и onclick

<td><input class="button" type="button" value="C" onclick="clean()"></td>

script.js

function clean(){
    document.form.textview.value = "";
}

чтобы работала кнопка назад, отмены последнего действия

index.html - добавляем class и onclick

<td><input class="button" type="button" value="<" onclick="back()"></td>

script.js

function back(){
    var exp = document.form.textview.value;
    document.form.textview.value = exp.substring(0,exp.length-1);
}

в index.html - изменяем кнопку "0" - добавляем class и onclick, colspan, style

<td colspan="2"><input class="button" style="width:106px" type="button" value="0" onclick="insert(0)"></td>

в index.html - изменяем кнопку "=" - добавляем colspan, style

<td rowspan="5"><input class="button" style="height: 106px" type="button" value="=" onclick="equal()"></td>

style.css - стилизуем меню

.main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

стилизуем бэкграунд

index.html добавляем новый класс

<div class="bg"></div>

style.css

.bg{
    background: linear-gradient(to right, #e91e63, #3f51b5);
    height: 100%;
}

Итог

index.html

<!-- Сообщаем браузеру, как стоит обрабатывать эту страницу -->
<!DOCTYPE html>
<!-- Оболочка документа, указываем язык содержимого -->
<html lang="ru">
<!-- Заголовок страницы, контейнер для других важных данных (не отображается) -->
<head>
    <!-- Заголовок страницы в браузере -->
    <title>Калькулятор</title>
    <!-- Подключаем CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Кодировка страницы -->
    <meta charset="utf-8">
    <!-- Адаптив -->
    <meta name="viewport" content="width=device-width">
</head>
<!-- Отображаемое тело страницы -->
<body>
<!-- Оболочка для демонстрации -->
<div class="wrapper">
    <!-- Контент -->
    <div class="bg"></div>
    <div class="main">
        <form name="form">
            <input class="textview" name="textview">
        </form>
        <table>
            <tr>
                <td><input class="button" type="button" value="C" onclick="clean()"></td>
                <td><input class="button" type="button" value="<" onclick="back()"></td>
                <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
                <td><input class="button" type="button" value="x" onclick="insert('*')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
                <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
                <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
                <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
                <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
                <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
                <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
                <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
                <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
                <td rowspan="5"><input class="button" style="height: 106px" type="button" value="=" onclick="equal()"></td>
            </tr>
            <tr>
                <td colspan="2"><input class="button" style="width:106px" type="button" value="0" onclick="insert(0)"></td>
                <td><input class="button" type="button" value="." onclick="insert('.')"></td>
            </tr>
        </table>
    </div>
    <!-- Подключаем файл JS скриптов -->
    <script src="js/script.js"></script>
</div>
</body>
</html>

style.css

/* Обнуление */
*,*:before,*:after{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
/* Стили для демонстрации */
html,body{
    height: 100%;
    background-color: #333;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #fff;
    font-size: 25px;
}
.wrapper{
    height: 100%;
    padding: 50px;
}
/* Основные стили */

.button{
    width: 50px;
    height: 50px;
    font-size: 25px;
    margin: 2px;
    cursor: pointer;
    background: #607d8b;
    border: none;
    color: white;
}
.textview{
    width: 217px;
    margin: 5px;
    font-size: 25px;
    padding: 5px;
    border: none;
    color: #607d8b;
}
.main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.bg{
    background: linear-gradient(to right, #e91e63, #3f51b5);
    height: 100%;
}

script.js

function insert(num){
    document.form.textview.value = document.form.textview.value+num
}
function equal(){
    var exp = document.form.textview.value;
    if(exp){
        document.form.textview.value = eval(exp)
    }
}
function clean(){
    document.form.textview.value = "";
}
function back(){
    var exp = document.form.textview.value;
    document.form.textview.value = exp.substring(0,exp.length-1);
}

Name		Name	Last commit message	Last commit date
.idea		.idea
css		css
js		js
LICENSE.md		LICENSE.md
README.md		README.md
index.html		index.html

Navigation Menu

Repository files navigation

📚 Калькулятор 📚

Итог

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

📚 Калькулятор 📚

Итог

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages