Skip to content

UI Improvements, Dark Theme Support & README Fix #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

UI Improvements, Dark Theme Support & README Fix #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2b8e89c
Improved UI, added dark theme support, and fixed Django URL configura…
ArielShadrac May 22, 2025
efd763a
Update README image formatting and layout
ArielShadrac May 23, 2025
99c39db
Update README.md
ArielShadrac May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Django Calculator App/Calculator/__pycache__/__init__.cpython-310.pyc
View file
Open in desktop
Binary file not shown.
Binary file added Django Calculator App/Calculator/__pycache__/settings.cpython-310.pyc
View file
Open in desktop
Binary file not shown.
Binary file added Django Calculator App/Calculator/__pycache__/urls.cpython-310.pyc
View file
Open in desktop
Binary file not shown.
Binary file added Django Calculator App/Calculator/__pycache__/wsgi.cpython-310.pyc
View file
Open in desktop
Binary file not shown.
6 changes: 3 additions & 3 deletions Django Calculator App/Calculator/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.conf.urls import url, include
from django.urls import path, include


urlpatterns = [
url(r'^$', include('calc.urls')),
path('', include('calc.urls')),
path('admin/', admin.site.urls),
]
Binary file added Django Calculator App/calc/__pycache__/__init__.cpython-310.pyc
View file
Open in desktop
Binary file not shown.
Binary file added Django Calculator App/calc/__pycache__/admin.cpython-310.pyc
View file
Open in desktop
Binary file not shown.
Binary file added Django Calculator App/calc/__pycache__/apps.cpython-310.pyc
View file
Open in desktop
Binary file not shown.
Binary file added Django Calculator App/calc/__pycache__/models.cpython-310.pyc
View file
Open in desktop
Binary file not shown.
Binary file added Django Calculator App/calc/__pycache__/urls.cpython-310.pyc
View file
Open in desktop
Binary file not shown.
Binary file added Django Calculator App/calc/__pycache__/views.cpython-310.pyc
View file
Open in desktop
Binary file not shown.
6 changes: 3 additions & 3 deletions Django Calculator App/calc/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from django.conf.urls import url
from calc import views
from . import views
from django.urls import path

urlpatterns = [
url(r'^$', views.index, name='index'),
path('', views.index, name='index'),
]
Empty file added Django Calculator App/db.sqlite3
View file
Open in desktop
Empty file.
36 changes: 20 additions & 16 deletions Django Calculator App/static/css/calc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
table{
margin-left:auto;
margin-right:auto;
textarea {
resize: none;
border: none;
background: transparent;
}

textarea{
display: block;
margin-bottom: 8px;
margin-left:auto;
margin-right:auto;
border-radius: 5px;
}

button{
height: 40px;
width: 40px;
}
.btn {
border-radius: 0.5rem;
font-size: 1.25rem;
padding: 0.75rem 0;
transition: transform 0.15s ease;
}
.btn:hover {
transform: translateY(-2px);
}
.row.g-2 .btn {
box-shadow: none;
}
.card {
border: none;
border-radius: 1rem;
}
134 changes: 81 additions & 53 deletions Django Calculator App/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,91 @@
<!DOCTYPE html>
{% load staticfiles %}
<html>
{% load static %}
<html lang="en" data-bs-theme="light">
<head>
<title>Calculator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/calc.css" %}">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1 class="display-3">Calculator App</h1>
<p class="lead">This is a simple calculator application developed by Cavin Dsouza.</p>
<hr class="my-4">
</div>

<meta charset="UTF-8">
<title>Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<textarea id="resultArea" readonly rows="3" cols="21"></textarea>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<table>
<tr>
<td></td>
<td></td>
<td><button id="clrTxt" class="btn btn-danger">C</button></td>
<td><button id="del" class="btn btn-default">&#9746;</button></td>
</tr>
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<tr>
<td><button id="num7" class="btn btn-default">7</button></td>
<td><button id="num8" class="btn btn-default">8</button></td>
<td><button id="num9" class="btn btn-default">9</button></td>
<td><button id="op3" class="btn btn-default">&div;</button></td>
</tr>

<tr>
<td><button id="num4" class="btn btn-default">4</button></td>
<td><button id="num5" class="btn btn-default">5</button></td>
<td><button id="num6" class="btn btn-default">6</button></td>
<td><button id="op2" class="btn btn-default">&times;</button></td>
</tr>
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'css/calc.css' %}">
</head>
<body class="bg-body text-body">

<tr>
<td><button id="num1" class="btn btn-default">1</button></td>
<td><button id="num2" class="btn btn-default">2</button></td>
<td><button id="num3" class="btn btn-default">3</button></td>
<td><button id="op1" class="btn btn-default">&minus;</button></td>
</tr>
<div class="container min-vh-100 d-flex flex-column justify-content-center align-items-center">

<tr>
<td><button id="decp" class="btn btn-default">.</button></td>
<td><button id="num0" class="btn btn-default">0</button></td>
<td><button id="eq" class="btn btn-default">=</button></td>
<td><button id="op0" class="btn btn-default">&plus;</button></td>
</tr>
</table>
<!-- Card wrapper for cleaner look -->
<div class="card shadow-sm" style="max-width: 420px; width: 100%;">
<div class="card-body p-4">
<!-- Header -->
<div class="jumbotron">
<div class="position-fixed top-0 end-0 m-5" style="z-index: 1050;">
<div class="form-check form-switch bg-light bg-opacity-75 p-2 rounded shadow-sm">
<i class="bi bi-sun-fill text-warning"></i>
<input class="form-check-input ms-2 me-2" type="checkbox" id="themeToggle">
<i class="bi bi-moon-fill text-secondary"></i>
</div>
</div>
<h1 class="display-5">Calculator App</h1>
<p class="lead">This is a simple calculator application developed by Cavin Dsouza.</p>
<hr class="my-4">
</div>
<div class="d-flex justify-content-between align-items-center mb-3">


</div>

<!-- Display -->
<div class="mb-4">
<textarea id="resultArea" readonly rows="2" class="form-control text-end fs-4" placeholder="0"></textarea>
</div>

<!-- Buttons grid -->
<div class="row g-2">
<div class="col-6">
<button id="clrTxt" class="btn btn-danger w-100">C</button>
</div>
<div class="col-6">
<button id="del" class="btn btn-secondary w-100"><i class="bi bi-backspace-fill"></i></button>
</div>
<div class="col-3"><button class="btn btn-outline-primary w-100" id="num7">7</button></div>
<div class="col-3"><button class="btn btn-outline-primary w-100" id="num8">8</button></div>
<div class="col-3"><button class="btn btn-outline-primary w-100" id="num9">9</button></div>
<div class="col-3"><button class="btn btn-outline-warning w-100" id="op3">÷</button></div>
<div class="col-3"><button class="btn btn-outline-primary w-100" id="num4">4</button></div>
<div class="col-3"><button class="btn btn-outline-primary w-100" id="num5">5</button></div>
<div class="col-3"><button class="btn btn-outline-primary w-100" id="num6">6</button></div>
<div class="col-3"><button class="btn btn-outline-warning w-100" id="op2">×</button></div>
<div class="col-3"><button class="btn btn-outline-primary w-100" id="num1">1</button></div>
<div class="col-3"><button class="btn btn-outline-primary w-100" id="num2">2</button></div>
<div class="col-3"><button class="btn btn-outline-primary w-100" id="num3">3</button></div>
<div class="col-3"><button class="btn btn-outline-warning w-100" id="op1">−</button></div>
<div class="col-3"><button class="btn btn-outline-secondary w-100" id="decp">.</button></div>
<div class="col-3"><button class="btn btn-outline-primary w-100" id="num0">0</button></div>
<div class="col-3"><button class="btn btn-success w-100" id="eq">=</button></div>
<div class="col-3"><button class="btn btn-outline-warning w-100" id="op0">+</button></div>
</div>
</div>
</div>

</div>
<script type="text/javascript" src="{% static "js/calc.js" %}"></script>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="{% static 'js/calc.js' %}"></script>
<script>
const toggle = document.getElementById('themeToggle');
const html = document.documentElement;
toggle.addEventListener('change', () => {
const mode = html.getAttribute('data-bs-theme') === 'light' ? 'dark' : 'light';
html.setAttribute('data-bs-theme', mode);
});
</script>

</body>
</html>
6 changes: 5 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
# A Simple Calculator Web application
A simple calculator application using HTML, CSS, Javascript. <br>
Check out the Django project folder to view the files created for the calculator app using Django. <br>
![alt text](https://github.com/CAVIND46016/Simple-Calculator-Web-app/blob/master/calculator.png)

![Calculator Screenshot](calculator.png)



42 changes: 19 additions & 23 deletions calc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
table{
margin-left:auto;
margin-right:auto;
textarea {
resize: none;
border: none;
background: transparent;
}

textarea{
display: block;
margin-bottom: 8px;
margin-left:auto;
margin-right:auto;
border-radius: 5px;
}

button{
height: 40px;
width: 40px;
}
#opac{
opacity: 0.25;
/* margin-left: 32%; */
/* margin-bottom: 3px; */
height: 19px;
width: 87px;
margin: auto;
.btn {
border-radius: 0.5rem;
font-size: 1.25rem;
padding: 0.75rem 0;
transition: transform 0.15s ease;
}
.btn:hover {
transform: translateY(-2px);
}
.row.g-2 .btn {
box-shadow: none;
}
.card {
border: none;
border-radius: 1rem;
}
Loading