मैं अपने कैलकुलेटर को सीएसएस के साथ और अधिक स्टाइल करना चाहता हूं

नमस्कार दोस्तों, मैंने जावास्क्रिप्ट का उपयोग करके एक कैलकुलेटर बनाया और सीएसएस का उपयोग करके इसे स्टाइल किया।
मैं इसे इस लिंक में कैलकुलेटर की तरह अधिक स्टाइल करना चाहता हूं।
http://www.online-calculator.com[^]

लेकिन मैं यह समझ नहीं पा रहा हूं कि उन सुविधाओं को अपने कैलकुलेटर में कैसे संयोजित करूं…
कृपया कोडिंग में मेरी मदद करें।

यहाँ मेरा HTML कोड है:

एक्सएमएल

<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>

और यहाँ मेरा सीएसएस कोड है:

सीएसएस

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;
}

क्या आप उपरोक्त सीएसएस सुविधाओं को भी बरकरार रखते हुए इसमें कुछ अच्छी सुविधाएं जोड़ने में मेरी मदद कर सकते हैं???

यदि आप मेरी मदद कर सकें तो बहुत आभारी रहूँगा….
धन्यवाद

समाधान 1

नमस्ते,

1. आप इसका उपयोग कर सकते हैं पृष्ठभूमि छवि इसे अच्छा दिखाने के लिए संख्या divs के लिए संपत्ति।
2. आप इसका भी उपयोग कर सकते हैं पृष्ठभूमि का रंग उसके लिए संपत्ति.
3. उपयोग मंडराना बटन को डिज़ाइन करने की संपत्ति और रंग बदलो का उपयोग सीएसएस.
4. लागू करें बॉर्डर-त्रिज्या डिजाइन करने के लिए संपत्ति कोनों को गोल करें.

उपरोक्त ये आपके कैलकुलेटर को वैसा बना सकते हैं जैसा आपने लिंक में बताया है।
आपको उन्हें सही तरीके से जोड़ना होगा. शुभकामनाएं। यदि कोई प्रश्न हो तो मुझसे यहां पूछें।

धन्यवाद

समाधान 1

コメント