crealise
/
calculator
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

buton pressed down

main
pvincent 8 months ago
parent
6f8e3151db
commit
61f86a7d9a
1 changed files with 10 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      index.html

18
index.html
View File

@ -21,25 +21,27 @@
</style> </style>
</head> </head>
<body class="bg-zinc-400 flex h-screen justify-center items-start " x-data="{}" >
<body class="bg-zinc-400 flex h-screen justify-center items-start " x-data="{}" @keypress="console.log($event)">
<div id='calculator' class="bg-slate-800 w-screen grid grid-cols-[3fr,1fr] h-screen "> <div id='calculator' class="bg-slate-800 w-screen grid grid-cols-[3fr,1fr] h-screen ">
<div id="screen" class="hover:ring-4 ring-blue-400 m-2 p-8 text-right text-[8vh] text-white bg-black col-span-4 row-span-4 h-[20vh] rounded-xl"> <div id="screen" class="hover:ring-4 ring-blue-400 m-2 p-8 text-right text-[8vh] text-white bg-black col-span-4 row-span-4 h-[20vh] rounded-xl">
RESULT RESULT
</div> </div>
<div class="grid grid-cols-3 gap-3 mb-4"> <div class="grid grid-cols-3 gap-3 mb-4">
<template x-for="post in 9">
<button class="active:bg-slate-700 hover:ring-4 ring-blue-400 border-double border-4 border-slate-800 bg-slate-600" x-text="post"></button>
<template x-for="x in 3">
<template x-for="y in 3">
<button class="active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-800 bg-slate-600" x-text="x*3+y-3"></button>
</template> </template>
<button class="active:bg-slate-700 hover:ring-4 ring-blue-400 col-span-2 bg-slate-600 border-double border-4 border-slate-800">0</button>
<button class="active:bg-slate-700 hover:ring-4 ring-blue-400 bg-slate-600 border-double border-4 border-slate-800">.</button>
</template>
<button class="active:bg-blue-400 hover:ring-4 ring-blue-400 col-span-2 bg-slate-600 border-double border-4 border-slate-800">0</button>
<button class="active:bg-blue-400 hover:ring-4 ring-blue-400 bg-slate-600 border-double border-4 border-slate-800">.</button>
</div> </div>
<div class="grid grid-rows-4 gap-3 mb-4"> <div class="grid grid-rows-4 gap-3 mb-4">
<button class="active:bg-slate-800 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white ">+</button>
<button class="active:bg-slate-800 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white ">-</button>
<button class="active:bg-slate-800 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white row-span-2 h-full bg-slate-300">=</button>
<button class="active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white ">+</button>
<button class="active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white ">-</button>
<button class="active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white row-span-2 h-full bg-slate-300">=</button>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save