Majic of science, nankana, Nankana Sahib (2026)

21/03/2026

Timer

08/03/2026

Majic of Science Calculator

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Comic Sans MS",cursive;
}

body{
height:100vh;
display:flex;
background:radial-gradient(circle at top, ,rgb(17, 6, 111),aqua);
justify-content:center;
align-items:center;

overflow:auto;
}

/* CALCULATOR */

calculator{

width:360px;
background: ;
padding:15px;
border-radius:12px;
box-shadow:0 0 20px cyan;
z-index:2;

}

/* DISPLAY */

{

width:100%;
height:60px;
font-size:30px;
text-align:right;
padding:10px;
border:none;
border-radius:8px;
background: ;
color:white;
margin-bottom:10px;

}

/* BUTTON GRID */

buttons{

display:grid;
grid-template-columns:repeat(5,1fr);
gap:7px;

}

/* BUTTON STYLE */

button{

height:45px;
border-radius:8px;
border:2px solid transparent;
font-size:18px;
cursor:pointer;
background: ;
transition:.25s;

}

/* BORDER ANIMATION */

button:hover{

transform:scale(1.08);
border-color: ;
box-shadow:0 0 12px cyan;

}
logo{
height: 80px;
width: 80px;
position: absolute;
top: 20px;
left: 20px;
}
/* NUMBER STYLE */

number{
background: ;
}

/* ACTIVE FUNCTION */

active{
background: !important;
}

/* EQUAL */

equal{
background: ;
font-weight:bold;
}

mode{
font-size:14px;
grid-column:span 2;
}

sin
cos
tan

Deg
Rad

AC

sin⁻¹
cos⁻¹
tan⁻¹

π
e

x²
x³
xʸ

10ˣ
log

(
)
√
n!
%

7
8
9
+
⌫

4
5
6
−
÷

1
2
3
×
=

0

let display=document.getElementById("display")
let trigFunction=null

function insert(val){

if(display.value=="0") display.value=val
else display.value+=val

}

function clearDisplay(){
display.value="0"
trigFunction=null
removeActive()
}

function back(){
display.value=display.value.slice(0,-1)
}

function removeActive(){
document.querySelectorAll("button").forEach(b=>b.classList.remove("active"))
}

/* TRIG BUTTON SELECT */

function selectTrig(fn,btn){

removeActive()

btn.classList.add("active")

trigFunction=fn

display.value=""

}

/* CALCULATE */

function calculate(){

try{

let value=parseFloat(display.value)

let rad=value*Math.PI/180

let result

if(trigFunction){

if(trigFunction=="sin") result=Math.sin(rad)
if(trigFunction=="cos") result=Math.cos(rad)
if(trigFunction=="tan") result=Math.tan(rad)

if(trigFunction=="asin") result=Math.asin(value)*180/Math.PI
if(trigFunction=="acos") result=Math.acos(value)*180/Math.PI
if(trigFunction=="atan") result=Math.atan(value)*180/Math.PI

display.value=result

trigFunction=null
removeActive()

return

}

let exp=display.value
replace(/×/g,"*")
replace(/÷/g,"/")

display.value=eval(exp)

}catch{

display.value="Error"

}

}

/* FUNCTIONS */

function square(){
display.value=Math.pow(display.value,2)
}

function cube(){
display.value=Math.pow(display.value,3)
}

function power(){
let p=prompt("Enter power")
display.value=Math.pow(display.value,p)
}

function sqrt(){
display.value=Math.sqrt(display.value)
}

function log(){
display.value=Math.log10(display.value)
}

function antilog(){
display.value=Math.pow(10,display.value)
}

function factorial(){

let n=parseInt(display.value)
let f=1

for(let i=1;i

01/03/2026

Cartoon Neon Calculator - Galaxy

body{
margin:0;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
overflow:hidden;
font-family:Arial, sans-serif;
background:black;
}

/* Galaxy Background Canvas */
canvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

/* Calculator Box */
calculator{
backdrop-filter: blur(15px);
background: rgba(255,255,255,0.05);
padding:25px;
border-radius:30px;
box-shadow:0 0 40px rgba(0,255,255,0.4);
display:grid;
grid-template-columns: repeat(4,75px);
gap:18px;
margin-bottom:40px; /* space for photo squares */
}

/* Display */
display{
grid-column: span 4;
height:65px;
border:none;
border-radius:20px;
font-size:26px;
text-align:right;
padding:10px;
background:linear-gradient(145deg, , );
color:white;
box-shadow:
inset 0 4px 10px rgba(255,255,255,0.5),
0 0 15px ;
}

/* Cartoon Button Base */
button{
height:70px;
border:none;
border-radius:22px;
font-size:22px;
font-weight:bold;
cursor:pointer;
transition:0.3s;
color:white;
box-shadow:
inset 0 4px 8px rgba(255,255,255,0.6),
inset 0 -6px 10px rgba(0,0,0,0.4),
0 8px 15px rgba(0,0,0,0.4);
}

/* Button Colors */
button:nth-child(n+2){
background: linear-gradient(145deg, , );
}

/* Fun colors */
button:nth-child(5n){
background: linear-gradient(145deg, , );
}
button:nth-child(3n){
background: linear-gradient(145deg, , );
}
button:nth-child(4n){
background: linear-gradient(145deg, , );
}

/* Hover Glow */
button:hover{
transform: translateY(-5px) scale(1.05);
box-shadow:
0 0 15px white,
0 0 30px ,
0 10px 20px rgba(0,0,0,0.5);
}

/* Click Effect */
button:active{
transform: scale(0.95);
}

/* BIG Super Glowing Equal Button */
equal{
grid-column: span 2;
font-size:28px;
background: linear-gradient(145deg, , );
color:black;
box-shadow:
0 0 20px ,
0 0 40px ,
0 0 80px ;
animation: superGlow 1.5s infinite alternate;
}

superGlow{
from{
box-shadow:
0 0 20px ,
0 0 40px ,
0 0 80px ;
}
to{
box-shadow:
0 0 30px ,
0 0 60px ,
0 0 120px ;
}
}

/* Photo Squares Container */
photo-container{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

/* Each photo square */
photo-square{
width:120px;
height:120px;
border-radius:20px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(10px);
box-shadow:
0 0 20px rgba(0,255,255,0.5),
0 0 40px rgba(255,0,255,0.3);
transition:0.3s;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-weight:bold;
font-size:14px;
}

photo-square:hover{
transform: scale(1.1);
box-shadow:
0 0 30px ,
0 0 60px ,
0 0 90px ;
}

C
DEL
×
-

7
8
9
+

4
5
6
.

1
2
3

0
=

Photo 1
Photo 2
Photo 3
Photo 4
Photo 5

function append(value){
document.getElementById("display").value += value;
}

function clearDisplay(){
document.getElementById("display").value = "";
}

function deleteLast(){
let current = document.getElementById("display").value;
document.getElementById("display").value = current.slice(0,-1);
}

function calculate(){
try{
document.getElementById("display").value =
eval(document.getElementById("display").value);
}
catch{
document.getElementById("display").value = "Error";
}
}

/* Galaxy Background Animation */
const canvas = document.getElementById('galaxy');
const ctx = canvas.getContext('2d');
let stars = [];
let w, h;

function resize(){
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();

for(let i=0;i

01/03/2026

Basic Calculator

body{
margin:0;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg, , );
font-family:Arial, sans-serif;
}

calculator{
background:rgba(255,255,255,0.1);
backdrop-filter:blur(15px);
padding:20px;
border-radius:20px;
box-shadow:0 0 25px rgba(0,0,0,0.4);
width:300px;
}

{
width:100%;
height:50px;
font-size:22px;
margin-bottom:15px;
text-align:right;
padding:10px;
border:none;
border-radius:10px;
outline:none;
color:white;
background:rgba(0,0,0,0.2);
}

buttons{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}

button{
padding:15px;
font-size:18px;
border:none;
border-radius:10px;
cursor:pointer;
background:rgba(255,255,255,0.2);
color:white;
transition:0.3s;
}

button:hover{
background: ;
}

equal{
background: ;
color:black;
}
equal:hover{
background: ;
}

C
DEL
÷
×

7
8
9
−

4
5
6
+

1
2
3
=

0
.

function append(value){
document.getElementById("display").value += value;
}

function clearDisplay(){
document.getElementById("display").value = "";
}

function deleteLast(){
let display = document.getElementById("display");
display.value = display.value.slice(0,-1);
}

function calculate(){
let exp = document.getElementById("display").value;
try{
let result = eval(exp);
document.getElementById("display").value = result;
}catch{
document.getElementById("display").value = "Error";
}
}