ألة حاسبة للمبتدئين ب javascript


فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو آلة حاسبة للمبتدئين لي غادي تمكن من القيام بمختلف العمليات الحسابية فالدرس بسيط للمبتدئين.

نظرة سريعة بالفيديو

1- الملف index.php

فاول حاجة كنزيد dossier جديد سميه js_calc زيدو ف localhost منبعد فيه زيد 2 دالملفات واحد index.php والثاني style.css  منبعد ف index.php غادي نزيد structure ديالي فعندي روابط لملفات css و js من بعد عندي input سميتو field فيه غادي يكونوا العمليات الحسابية والنتيجة منبعد عندي les boutons لي كيخدوا des valeurs لي هما الأرقام من 1 ل 0 بالإضافة لرموز الضرب والزائد والناقص والقسمة ول = وفكل bouton عندي ل onclick event لي كيمكني باش نعرض القيمة ديال ل bouton فل input ملي كنكليكي عليها فقط الرمز =  لي عندو ل fonction eval لي كتمكن باش تحسب الناتج ديال العملية لي عندنا فل input و الرمز C لي كيخوي ل input الكود ديال الملف هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Js Calc</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="calc">
                <div class="form-group">
                    <input type="text" name="field" id="field" placeholder="Valeur">
                </div>
                <hr>
                <ul class="numbers">
                    <li>
                        <button value="1" OnClick="field.value+='1'">1</button>
                        <button value="2" OnClick="field.value+='2'">2</button>
                        <button value="3" OnClick="field.value+='3'">3</button>
                        <button class="plus"  value="+" OnClick="field.value+='+'">+</button>
                    </li>
                    <li>
                        <button  value="4" OnClick="field.value+='4'">4</button>
                        <button  value="5" OnClick="field.value+='5'">5</button>
                        <button  value="6" OnClick="field.value+='6'">6</button>
                        <button  class="multi"  value="x" OnClick="field.value+='*'">x</button>
                    </li>
                    <li>
                        <button  value="7" OnClick="field.value+='7'">7</button>
                        <button  value="8" OnClick="field.value+='8'">8</button>
                        <button  value="9" OnClick="field.value+='9'">9</button>
                        <button class="miner"  value="-" OnClick="field.value+='-'">-</button>
                    </li>
                    <li>
                        <button  value="0" OnClick="field.value+='0'">0</button>
                        <button class="reset"  value="c" OnClick="field.value=''">C</button>
                        <button  value="=" OnClick="field.value=eval(field.value)">=</button>
                        <button class="divi"  value="÷" OnClick="field.value+='/'">÷</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>
                            

2- الملف style.css

فالملف style.css كنزيد les styles css لي غادي نحتاج الكود ديال الملف هو :

                                body{
    background-color: #F4F4F4;
}
.container{
    width: 1110px;
    margin: 0 auto;
}
.row{
    background-color: #ffffff;
    margin: 0 auto;
    width: 30%;
    border-radius: 5px;
    text-align: center;
}
.row input{
    padding: 10px;
    width: 90%;
    border: 1px solid #e08104;
    margin-top: 10px;
    font-size: 30px;
    text-align: center;
}
.calc{
    margin: 20px auto;
    padding: 20px;
    font-size: 30px;
    padding: 10px;
    text-align: center;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.753);
}
ul{
    list-style: none;
    margin: -10px 40px 0 0;
}
ul li{
    display: block;
}
button{
    background-color: black;
    color: #ffffff;
    padding: 15px;
    text-align: center;
    width: 50px;
    height: 50px;
    border: none;
    margin: 3px 0;
    border-radius: 5px;
    font-size: 20px;
}
button:hover{
    background-color: rgba(0, 0, 0, 0.685);
    cursor: pointer;
}
.plus{
    background-color: #e08104;
}
.multi{
    background-color: #09850f;
}
.miner{
    background-color: #d11b39;
}
.divi{
    background-color: #93c40e;
}
.reset{
    background-color: #1a0ec4;
}
                            


                                
                            


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد