Calculator application written in pure HTML+CSS+JavaScript

A written test question

I accidentally saw a written test question from a company before. The question is as follows:

Use HTML5, CSS3, and JavaScript to make a web page to implement a calculator in the form of the picture below

Specific requirements:

1. There is only one file: index.html. No other files are allowed, no more separate CSS, JS, PNG, JPG files are allowed.

2. The running environment is Google Chrome.

3. Must support standard four arithmetic operations. For example: 1+2*3=7.

4. Please complete this test independently within 48 hours of receiving the email and reply to this email.

A practice project triggered by a written test question

It took me a while to write the first version, which met the requirements of the written test question. Later, I looked around and felt that it could be improved and made better, so I continued to improve it, add new functions, etc. This went on endlessly. I used my spare time to write bit by bit, from the web version at the beginning to Later, I made a responsive mobile version, and then to the current mobile app. It took about 3 months to write.

Project address

The final version of the calculator, project address and preview image are on GitHub: https://github.com/dunizb/sCalc.

Function description

The functions of the final version are as follows:

• The interface layout adopts CSS3 Flex box layout

• Two sets of built-in themes can be switched

• Calculation history display

• Swipe left and right You can switch to one-handed mode (App)

• After entering the mobile number, long press the equal sign to dial the mobile number (App)

• Version update check (App)

Interface layout

Because of this The project is just for practice, so it uses HTML5 and CSS3 technologies. It is not intended to be compatible with lower version browsers such as IE, so it directly uses the Flexbox layout method provided by CSS3. And use rem units to automatically calculate dimensions.

The calculation history display function uses the Local Storage function provided by HTML5. In order to facilitate the use of Local Storage, it is simply encapsulated (see the js/common.js file) so that the key value can be produced according to a certain rule. , convenient for management.

key consists of appName+id. The id is automatically increased and does not repeat. You can delete a record by id and appName. Enter * to delete all.

Packaging APP

After writing the mobile web version of the calculator, I wanted to make it into an APP to run on mobile phones. Since I have never used hybrid APP frameworks such as ionic, I took a look and chose Hbuild. It is very convenient to develop and package APP. (HBuild).

One-handed mode

Swipe left and right to switch to one-handed mode. This requires a touch event on the mobile terminal. Use the following code to determine whether to slide left or slide again:

/** 单手模式 */
function singleModel(){
    var calc = document.getElementById("calc");
    var startX = 0,moveX = 0,distanceX = 0;
    var distance = 100;  
    var width = calc.offsetWidth;
    //滑动事件
    calc.addEventListener("touchstart",function(e){
        startX = e.touches[0].clientX;
    });
    calc.addEventListener("touchmove",function(e){
        moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        isMove = true;
    });
    window.addEventListener("touchend",function(e){
        if(Math.abs(distanceX) > width/3 && isMove){
            if( distanceX > 0 ){
                positionFun("right");        //右滑
            }else{
                positionFun("left");          //作滑
            }
        }
        startY = moveY = 0;
        isMove = false;
    });   
}

If it is a sitting slide , just position:absolut;left:0,bottom:0, and then reduce the outermost DIV to 80%, thus realizing the left-sliding calculator to shrink and move to the lower left corner. The same principle applies to right swiping.

Phone dialing function

After entering the mobile phone number, press and hold the equal sign to dial the mobile phone number. There is nothing magical about this function. On the mobile Web, numbers that look like phone numbers are processed into phone links, such as:

• 7 digits, like: 1234567

• numbers with brackets and plus signs , in the form of: (+86)123456789

• A double-connected number, in the form of: 00-00-00111

• 11-digit number, in the form of: 13800138000

There may be other types of numbers will also be recognized. We can turn on the automatic recognition of phone numbers through the following meta

<meta name="format-detection" content="telephone=yes" />

Turn on the phone function

<a href="tel:123456">123456</a>

Turn on the SMS function:

<a href="sms:123456">123456</a>

However, on the Android system, you can only call the system dialing interface, while on iOS you can call it After this step, make the call directly.

Version update check

On the About page, there is a version update check button to check whether there is a new version. The principle of this function is to send a JSOPN request to check the JSON file on the server and compare the version number. If the version on the server is higher than the version of the APP, it will prompt that a new version is available for download.

Client JavaScript code:

function updateApp(){
    //检查新版本
    var updateApp = document.getElementById("updateApp");
    updateApp.onclick = function(){
        var _this = this;
        $.ajax({
            type:'get',
            url:'http://duni.sinaapp.com/demo/app.php?jsoncallback=?',
            dataType:'jsonp',
            beforeSend : function(){
                _this.innerHTML = " 正在检查新版本...";
            },
            success:function(data){
                var newVer = data[0].version;
                if(newVer > appConfig.version){
                    var log = data[0].log;
                    var downloadUrl = data[0].downloadUrl;
                    if(confirm("检查到新版本【"+newVer+"】，是否立即下载？\n 更新日志：\n " + log)){
                        var a = document.getElementById("telPhone");
                        a.href = downloadUrl;
                        a.target = "_blank";
                        a.click();
                    }
                }else{
                    alert("你很潮哦，当前已经是最新版本！");
                }
                _this.innerHTML = " 检查新版本";
            },
            error:function(msg){
                _this.innerHTML = " 检查新版本";
                alert("检查失败："+msg.message);
            }
        });
    }
}

Server JSON:

[
    {
        "version":"3.1.0",
        "downloadUrl":"http://dunizb.b0.upaiyun.com/demo/app/myCalc-3.1.0.apk",
        "hashCode":"20160812224616",
        "log":"1.新增切换主题功能 \n 2.新增单手切换模式功能 \n 3.调整UI "
    }
]