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

workspace settings

main
pvincent 9 months ago
parent
3690336063
commit
2298fa9560
3 changed files with 27 additions and 22 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. 8
      .vscode/extensions.json
  2. 3
      .vscode/settings.json
  3. 38
      index.html

8
.vscode/extensions.json
View File

@ -0,0 +1,8 @@
{
"recommendations": [
"bradlc.vscode-tailwindcss",
"formulahendry.auto-rename-tag",
"ritwickdey.liveserver",
"formulahendry.auto-close-tag"
]
}

3
.vscode/settings.json
View File

@ -0,0 +1,3 @@
{
"editor.formatOnSave": true
}

38
index.html
View File

@ -7,44 +7,38 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="//unpkg.com/alpinejs" defer></script> <script src="//unpkg.com/alpinejs" defer></script>
<title>Calculator</title> <title>Calculator</title>
<style>
#calculator button {
align-self: center;
text-align: center;
font-size: 10vh;
border-radius: 20%;
margin-right: 2vw;
margin-left: 2vw;
}
</style>
</head> </head>
<body class="bg-zinc-400 flex h-screen justify-center items-start " x-data="{}" @keypress="console.log($event)"> <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-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">
<div id="screen"
class="hover:ring-4 ring-blue-400 my-4 mx-2 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 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="x in 3"> <template x-for="x in 3">
<template x-for="y 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 h-full" x-text="x*3+y-3"></button>
<button
class="text-[10vh] rounded-2xl mx-2 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>
</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 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>
<button
class="text-[10vh] rounded-2xl mx-2 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="text-[10vh] rounded-2xl mx-2 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>
<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 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 class="grid grid-rows-4 gap-3 mb-4">
<button
class="text-[10vh] rounded-2xl mx-2 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="text-[10vh] rounded-2xl mx-2 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="text-[10vh] rounded-2xl mx-2 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>
</div> </div>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save