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

ring

main
pvincent 2 years ago
parent
61f86a7d9a
commit
3690336063
1 changed files with 7 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      index.html

15
index.html
View File

@ -23,25 +23,24 @@
<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="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-4 p-8 text-right text-[8vh] text-white bg-black col-span-4 row-span-4 h-[20vh] rounded-xl border-double border-4 border-slate-800">
RESULT
</div>
<div class="grid grid-cols-3 gap-3 mb-4">
<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>
<button class="active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-800 bg-slate-600 h-full" x-text="x*3+y-3"></button>
</template>
</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>
<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 h-full">0</button>
<button class="active:bg-blue-400 hover:ring-4 ring-blue-400 bg-slate-600 border-double border-4 border-slate-800 h-full">.</button>
</div>
<div class="grid grid-rows-4 gap-3 mb-4">
<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>
<button class="active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white h-full">-</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 h-full">+</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">=</button>
</div>
</div>

Write Preview
Loading…
Cancel
Save