matrixMultiplication.vue

<template>
    <div>
        <div class="calculator">
            <table class="matrixAWrapper">
                <tr>
                    <td>
                        <div class="rowsResizer">
                            <div @click="subRowM1" class="resizeBtn">-</div>
                            <div @click="addRowM1" class="resizeBtn">+</div>
                        </div>
                    </td>
                    <td>
                        <div class="matrix">
                            <div class="leftBracket"></div>

                            <template v-for="(row, row_i) in m1">
                                <ul class="row">
                                    <template v-for="(item, col_i) in row">
                                        <li class="col">
                                            <input @focus="$event.target.select()"
                                                   v-model.number="m1[row_i][col_i]"
                                                   class="cell" type="text" >
                                        </li>
                                    </template>
                                </ul>
                            </template>

                            <div class="rightBracket"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td class="colsResizerContainer">
                        <div class="colsResizer">
                            <div @click="subColM1" class="resizeBtn">-</div>
                            <div @click="addColM1" class="resizeBtn">+</div>
                        </div>
                    </td>
                </tr>
            </table>



            <span class="sign crossSign">×</span>

            <table class="matrixAWrapper">
                <tr>
                    <td>
                        <div class="matrix">
                            <div class="leftBracket"></div>

                            <template v-for="(row, row_i) in m2">
                                <ul class="row">
                                    <template v-for="(item, col_i) in row">
                                        <li class="col">
                                            <input @focus="$event.target.select()"
                                                   v-model.number="m2[row_i][col_i]"
                                                   class="cell" type="text" >
                                        </li>
                                    </template>
                                </ul>
                            </template>

                            <div class="rightBracket"></div>
                        </div>
                    </td>
                    <td>
                        <div class="rowsResizer">
                            <div @click="subRowM2" class="resizeBtn">-</div>
                            <div @click="addRowM2" class="resizeBtn">+</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="colsResizerContainer">
                        <div class="colsResizer">
                            <div @click="subColM2" class="resizeBtn">-</div>
                            <div @click="addColM2" class="resizeBtn">+</div>
                        </div>
                    </td>
                    <td></td>
                </tr>
            </table>


            <span class="sign equalSign">=</span>

            <div class="matrix">
                <div class="leftBracket"></div>

                <template v-for="(row, row_i) in m1xm2">
                    <ul class="row">
                        <template v-for="(item, col_i) in row">
                            <li class="col">
                                <span v-text="m1xm2[row_i][col_i]" class="cell"></span>
                            </li>
                        </template>
                    </ul>
                </template>

                <div class="rightBracket"></div>
            </div>
        </div>
    </div>
</template>

<script>


    export default {

        data() {
            return {
                defaultValue:0,
                m1: [
                    [1,2,3],
                    [3,2,1],
                    [2,3,1]
                ],
                m2: [
                    [1,2],
                    [4,5],
                    [-1,1]
                ],
            }
        },

        mounted() {
            this.$nextTick(function () {
                // Code that will run only after the
                // entire view has been rendered
                this.ready();
            });

        },

        methods: {
            ready(){

            },

            subRowM1(){
                if(this.m1.length <= 1)
                    return;

                // remove row from m1
                let m1 = _.clone(this.m1);
                m1.pop();
                this.m1 = m1;
            },

            addRowM1(){
                let row = _.clone(_.last(this.m1));
                row = _.fill(row, this.defaultValue);
                this.m1.push(row);
            },

            subRowM2(){
                // remove row from m2
                if(this.m2.length > 1){
                    let m2 = _.clone(this.m2);
                    m2.pop();
                    this.m2 = m2;
                }

                // remove column from m1
                let m1 = _.clone(this.m1);
                for(let i = 0; i < m1.length; i++)
                {
                    if(m1[i].length <= 1)
                        continue;

                    m1[i].pop();
                }
                this.m1 = m1;
            },

            addRowM2(){
                // add row to m2
                let m2row = _.clone(_.last(this.m2));
                m2row = _.fill(m2row, this.defaultValue);
                this.m2.push(m2row);

                // add column to m1
                let m1 = _.clone(this.m1);
                for(let i = 0; i < m1.length; i++)
                {
                    m1[i].push(this.defaultValue);
                }
                this.m1 = m1;
            },

            subColM1(){
                // remove column from m1
                let m1 = _.clone(this.m1);
                for(let i = 0; i < m1.length; i++)
                {
                    if(m1[i].length <= 1)
                        continue;

                    m1[i].pop();
                }
                this.m1 = m1;

                // remove row from m2
                if(this.m2.length > 1){
                    let m2 = _.clone(this.m2);
                    m2.pop();
                    this.m2 = m2;
                }
            },

            addColM1(){
                // add column to m1
                let m1 = _.clone(this.m1);
                for(let i = 0; i < m1.length; i++)
                {
                    m1[i].push(this.defaultValue);
                }
                this.m1 = m1;

                // add row to m2
                let m2row = _.clone(_.last(this.m2));
                m2row = _.fill(m2row, this.defaultValue);
                this.m2.push(m2row);
            },

            subColM2(){
                // remove column from m2
                let m2 = _.clone(this.m2);
                for(let i = 0; i < m2.length; i++)
                {
                    if(m2[i].length <= 1)
                        continue;

                    m2[i].pop();
                }
                this.m2 = m2;
            },

            addColM2(){
                // add column to m2
                let m2 = _.clone(this.m2);
                for(let i = 0; i < m2.length; i++)
                {
                    m2[i].push(this.defaultValue);
                }
                this.m2 = m2;
            },
        },

        computed: {
            m1xm2(){
                let m1rows = this.m1.length;
                let m2cols = this.m2[0].length;

                let m1xm2 = [];

                for(let i = 0; i < m1rows; i++){
                    m1xm2[i] = [];
                    for(let j = 0; j < m2cols; j++){
                        let rowm1 = this.m1[i];
                        let colm2 = [];

                        // find column of m2
                        for(let m2row = 0; m2row < this.m2.length; m2row++){
                            colm2.push(this.m2[m2row][j]);
                        }

                        // multiplicate and sum elements
                        let sum = 0;
                        for(let muliplicateIndex = 0; muliplicateIndex < rowm1.length; muliplicateIndex++){
                            sum += rowm1[muliplicateIndex] * colm2[muliplicateIndex];
                        }

                        if( ! _.isInteger(sum)){
                            m1xm2[i][j] = sum.toFixed(1);
                        }else{
                            m1xm2[i][j] = sum;
                        }

                    }
                }

                return m1xm2;
            }
        }
    }
</script>

<style scoped>
    .calculator {
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .sign {
        color: #686868;
        font-size: 24px;
        margin: 0.5em;
    }

    .equalSign{

    }


    .crossSign {

    }

    .colsResizerContainer {
        position: relative;
    }

    .rowsResizer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 10px;
        z-index: 3;
    }

    .colsResizer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        left: -20px;
        margin: 10px 0;
        min-width: 76px;
        position: absolute;
        right: -20px;
        z-index: 3;
    }

    .resizeBtn {
        background-color: rgba(0, 0, 0, 0);
        border: none;
        box-shadow: 0 1px 1px 0 #C5C5C5;
        color: #686868;
        cursor: pointer;
        font-size: 20px;
        height: 30px;
        line-height: 30px;
        margin: 4px;
        text-align: center;
        width: 30px;
    }

    .matrix {
        padding: 2px;
        position: relative;
    }

    .leftBracket {
        background-color: #323232;
        bottom: 0;
        left: 0;
        position: absolute;
        top: 0;
        width: 2px;
    }

    .leftBracket::before {
        background-color: #323232;
        content: '';
        height: 2px;
        left: 0;
        position: absolute;
        top: 0;
        width: 9px;
    }

    .leftBracket::after {
        background-color: #323232;
        bottom: 0;
        content: '';
        height: 2px;
        left: 0;
        position: absolute;
        width: 9px;
    }

    .rightBracket {
        background-color: #323232;
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 2px;
    }

    .rightBracket::before {
        background-color: #323232;
        content: '';
        height: 2px;
        position: absolute;
        right: 0;
        top: 0;
        width: 9px;
    }

    .rightBracket::after {
        background-color: #323232;
        bottom: 0;
        content: '';
        height: 2px;
        position: absolute;
        right: 0;
        width: 9px;
    }

    ul.row {
        display: flex;
        flex-wrap: nowrap;;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    li.col {
        padding:0;
    }

    span.cell,
    input.cell {
        background-color: rgba(255,255,255,0);
        border: none;
        color: #323232;
        display: inline-block;
        font-size: 24px;
        height: 2em;
        line-height: 49px;
        padding: 0;
        text-align: center;
        text-indent: 0;
        width: 2em;
    }

    input.cell:hover, input.cell:focus {
        box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.5);
    }
</style>