أريد تصميم الآلة الحاسبة الخاصة بي بشكل أكبر باستخدام CSS

مرحبًا يا شباب، لقد قمت بإنشاء آلة حاسبة باستخدام JavaScript وقمت بتصميمها باستخدام CSS.
أريد تصميمها بشكل أشبه بالآلة الحاسبة في هذا الرابط.
http://www.online-calculator.com[^]

لكن لا يمكنني معرفة كيفية دمج هذه الميزات في الآلة الحاسبة الخاصة بي …
الرجاء مساعدتي في الترميز.

هنا هو رمز HTML الخاص بي:

XML

<html>
<head>
<TITLE>Javascript Calculator</TITLE>
<link type="text/css" rel="stylesheet" href="styles/calculator.css" />
<script type="text/javascript">
var Overall="", First="", Second="", Opp="";

function init()
{
    Clear();
}

function MyClick($key)
    { var Display="";
if(Opp == ""){
    First = First + $key;
    document.getElementById('screen').innerHTML = First;
    }else{
    Second = Second + $key;
    Display = document.getElementById('screen').innerHTML;
    document.getElementById('screen').innerHTML = First + ' ' + Opp + ' ' + Second;

         }
        }
function Operator($sign)
{       var Display="";
    Opp = $sign;
// See if the first and second factors have values ie: there has already been an equation
if(First != "" && Second != "") DoSum();
    Display = document.getElementById('screen').innerHTML;
    document.getElementById('screen').innerHTML = Display + ' ' + Opp + ' ';

}

function Clear()
{
    First = "";
    Second = "";
    Opp = "";
    Overall = "";
    document.getElementById('screen').innerHTML = '0';
}

function DoSum()
{
    var string;
    result=0;
if(First != "" && Second != "" && Opp != "")
  {
        string = First + ' ' + Opp + ' ' + Second;
    Overall = eval(string);
    document.getElementById('screen').innerHTML = Overall;
    // Now clear the First, Second and Opp variables for further use
    First = Overall;
    Second = "";
    Opp = "";
  }
}
</script>
</head>

<body>

<div id="frame">
        <div id="window"> <!-- this is the window that holds the digits -->
            <div id="screen"><!-- this displays the information that the javascript functions provide -->
              </div><!-- end of screen div -->
       </div><!-- end of window div -->
<div id="key1" onclick="MyClick(1)"><div id="digit">1</div></div>
<div id="key2" onclick="MyClick(2)"><div id="digit">2</div></div>
<div id="key3" onclick="MyClick(3)"><div id="digit">3</div></div>
<div id="plus" onclick="Operator('+')"><div id="digit">+</div></div>
<div id="key4" onclick="MyClick(4)"><div id="digit">4</div></div>
<div id="key5" onclick="MyClick(5)"><div id="digit">5</div></div>
<div id="key6" onclick="MyClick(6)"><div id="digit">6</div></div>
<div id="key7" onclick="MyClick(7)"><div id="digit">7</div></div>
<div id="key8" onclick="MyClick(8)"><div id="digit">8</div></div>
<div id="key9" onclick="MyClick(9)"><div id="digit">9</div></div>
<div id="min" onclick="Operator('-')"><div id="digit">-</div></div>
<div id="key0" onclick="MyClick(0)"><div id="digit">0</div></div>
<div id="period" onclick="MyClick('.')"><div id="digit">.</div></div>
<div id="equals" onclick="DoSum()"><div id="digit">=</div></div>
<div id="mult" onclick="Operator('*')"><div id="digit">*</div></div>
<div id="divided" onclick="Operator('/')"><div id="digit">/</div></div>
<div id="clear" onclick="Clear()"><div id="digit">C</div></div>
        </div><!-- End frame div -->
</body>
</html>

وهنا رمز CSS الخاص بي:

CSS

body{
margin:50px;
}
#frame
{
    position:absolute;
    left    :50px;
    top     :50px;
    height  :398px;
    width   :244px;
    border  :1px solid #069ff7;
}
#window
{
    padding :5px;
    height  :50px;
    width   :182px;
    font    :30px verdana;
    position:absolute;
    left    :22px;
    top     :22px;
    border  :1px solid #069ff7;

}
#digit
{
    text-align: center;
    vertical-align:center;
    font    :30px Comic Sans Ms;
}

#key1
{
    position         :absolute;
    left             :22px;
    top              :94px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
}
#key1:hover
{
    color:red;
}
#key2
{
    position         :absolute;
    left             :88px;
    top              :94px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;

}
#key2:hover
{
    color:red;
}
#key3
{
    position         :absolute;
    left             :154px;
    top              :94px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;

}
#key3:hover
{
    color:red;
}

#key4
{
    position         :absolute;
    left             :22px;
    top              :143px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;

}
#key4:hover
{
    color:red;
}
#key5
{
    position         :absolute;
    left             :88px;
    top              :143px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
}
#key5:hover
{
    color:red;
}
#key6
{
    position         :absolute;
    left             :154px;
    top              :143px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;

}
#key6:hover
{
    color:red;
}

#key7
{
    position         :absolute;
    left             :22px;
    top              :192px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;

}
#key7:hover
{
    color:red;
}
#key8
{
    position         :absolute;
    left             :88px;
    top              :192px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;

}
#key8:hover
{
    color:red;
}
#key9
{
    position         :absolute;
    left             :154px;
    top              :192px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;

}
#key9:hover
{
    color:red;
}
#key0
{
    position         :absolute;
    left             :22px;
    top              :241px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;

}
#key0:hover
{
    color:red;
}
#period
{
    position         :absolute;
    left             :88px;
    top              :241px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;

}
#period:hover
{
    color:red;
}
#clear
{
    position         :absolute;
    left             :154px;
    top              :339px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;

}
#clear:hover
{
    color:red;
}


#plus
{
    position         :absolute;
    left             :154px;
    top              :241px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;


}#plus:hover
{
    color:red;
}
#min
{
    position         :absolute;
    left             :22px;
    top              :290px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border           :1px solid #069ff7;

}
#min:hover
{
    color:red;
}

#mult
{
    position         :absolute;
    left             :88px;
    top              :290px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border           :1px solid #069ff7;

}
#mult:hover
{
    color            :red;
}
#divided
{
    position         :absolute;
    left             :154px;
    top              :290px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border           :1px solid #069ff7;

}
#divided:hover
{
    color:red;
}



#equals
{
    position         :absolute;
    left             :22px;
    top              :339px;
    cursor           :pointer;
    width            :125px;
    height           :38px;
    border           :1px solid #069ff7;

}
#equals:hover
{
    color            :red;
}

هل يمكنك مساعدتي في إضافة بعض الميزات الجيدة إلى هذا مع الاحتفاظ بميزات CSS المذكورة أعلاه أيضًا؟؟؟

نقدر بشدة إذا كنت تستطيع مساعدتي….
شكرًا

الحل 1

أهلاً،

1. يمكنك استخدام الصورة الخلفية خاصية لرقم div لجعله يبدو جيدًا.
2. يمكنك أيضًا استخدام لون الخلفية الملكية لذلك.
3. استخدم يحوم الملكية جيئة وذهابا لتصميم الزر و تغيير اللون باستخدام المغلق.
4. قدم طلبك نصف قطر الحدود خاصية لتصميم زوايا div مدورة.

هذه الأشياء أعلاه يمكن أن تجعل الآلة الحاسبة الخاصة بك تبدو كما ذكرت في الرابط.
تحتاج إلى إضافتها بالطريقة الصحيحة. أتمنى لك كل خير. إذا كان هناك أي استفسار فاسألني هنا.

شكرًا