├── .vscode └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── README.md ├── css ├── dotBubbles.css ├── dropdown.css ├── soapBubbles.css ├── style.css └── togglebtn.css ├── digital_font.ttf ├── images ├── calculator.png └── mockup.jpg ├── index.html └── js ├── dropdown.js ├── evalutor.js ├── main.js └── togglebtn.js /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5503 3 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, caste, color, religion, or sexual 10 | identity and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the overall 26 | community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or advances of 31 | any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email address, 35 | without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement. 63 | 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series of 86 | actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or permanent 93 | ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within the 113 | community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.1, available at 119 | [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. 120 | 121 | Community Impact Guidelines were inspired by 122 | [Mozilla's code of conduct enforcement ladder][mozilla coc]. 123 | 124 | For answers to common questions about this code of conduct, see the FAQ at 125 | [https://www.contributor-covenant.org/faq][faq]. Translations are available at 126 | [https://www.contributor-covenant.org/translations][translations]. 127 | 128 | [homepage]: https://www.contributor-covenant.org 129 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html 130 | [mozilla coc]: https://github.com/mozilla/diversity 131 | [faq]: https://www.contributor-covenant.org/faq 132 | [translations]: https://www.contributor-covenant.org/translations 133 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guideline 2 | 3 |
4 | 5 |
6 | 7 | Are you new to web development? Just learning HTML/CSS/JS and you want to contribute to open source? Follow the steps below! 8 | 9 |
10 | 11 | ## **Here's a quick rundown on how to make a contribution to my project:** 12 | 13 | --- 14 | 15 |
16 | 17 | ### 1. If you have suggestions for how this project could be improved, or want to report a bug, open an issue! We'd love all and any contributions. 18 |
19 | ### 2. Fork this repository . 20 |

21 | Click on fork to create a copy of project to your account. This creates a separate copy for you to workon 22 |
23 | ### 3. Clone the repository to your local machine using: 24 | ``` 25 | $ git clone https://github.com//.git 26 | ``` 27 | Now you have the project on your local machine 28 | 29 | ### 4. Add the upstream remote: 30 | 31 | ``` 32 | cd 33 | $ git remote add upstream https://github.com/Emilance/Javascript-Calculator-App.git 34 | ``` 35 | 36 | ### 5. Pull the latest changes from the main repository if you think your fork is behind: 37 | ``` 38 | git pull upstream master 39 | ``` 40 | 41 | ### 6. Create a new branch and switch to it for your issue fix or feature using: 42 | 43 | ``` 44 | git switch -c branch-name-here 45 | ``` 46 | 47 | ### 7. Make the appropriate changes for the issue you are trying to address or the feature that you want to add 48 | 49 |
50 | 51 | ### 8. Add the changes to the staging and commit them to the branch you are working on 52 | 53 |
54 | 55 | ### 9. Push the changes to the remote repository using: 56 | 57 | ``` 58 | git push origin branch-name-here 59 | ``` 60 | 61 | ### 10. Submit a **pull request** to the upstream repository 62 | 63 |
64 | 65 | ### 11. Title the **pull request** with a short description of the changes made 66 | 67 |
68 | 69 | ### 12. Wait for the pull request to be reviewed by a maintainer 70 | 71 |
72 | 73 | 74 | 75 | ### 13. Celebrate your success after your pull request is merged! 76 | 77 | ##
78 | 79 | 80 | 81 | --- 82 | 83 | ## Resources 84 | 85 | - [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/) 86 | - [Using Pull Requests](https://help.github.com/articles/about-pull-requests/) 87 | - [GitHub Help](https://help.github.com) 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

A calculator app built with JavaScript, HTML and CSS

2 | 3 |
4 | Desktop 5 |
6 | 7 |
8 | Total lines 9 | Number of Visitors 10 | Stars Badge 11 | Forks Badge 12 | Pull Requests Badge 13 | Issues Badge 14 | GitHub contributors 15 |
16 | 17 | # A calculator app built with JavaScript, HTML and CSS. 18 | 19 | 20 |
21 | css3 22 | html5 23 | javascript 24 |
25 | 26 | ### 🕹 Live Project: 27 | - https://emmycalculatorapp.netlify.app 28 | 29 | ## Who can contribute 30 | Anyone interested in contributing to open source project can contribute to this, It is a beginner friendly web application built with HTML, CSS, and JavaScript 31 |
32 | This project is made open source to give an opportunity to newbies in web development to contribute to open source project 33 |
34 | Checkout CONTRIBUTING.md for more info on how to contribute to this project 35 | 36 | 37 | ## How to get started with Open Source 38 | Here's a quick rundown on how to get started with open source, first of all, let's know some basic terminologies: 39 | - Git: is a versioning system that lets you store your code and code history on your local computer preventing losses and allowing sharing of that code 40 | - Github: is a server that lets you store the history in a database 41 | - Open Source: A project is said to be open-sourced if you can see the code on GitHub 42 | - Fork: This is a copy that you make of a project on GitHub, it gets added to your repositories 43 | - Repository: A project on GitHub is called a repository 44 | - Pull Request: This is a fix for an issue proposed to be done in a project, this consists of you editing a file in the project. 45 | - Issue: An issue is a change that should be done in a project, can be a bug, a new feature, or a suggestion for a project 46 | - Branch: A branch is a new workspace derived from the default workspace(main or master), it allows you to work on something without affecting the original code 47 | 48 | Now you know some basic terms, let's get into how to get started with some resources to let you understand open source better: 49 | - [Crash Course to Git and Github](https://www.youtube.com/watch?v=apGV9Kg7ics) - Video 50 | - [A complete Guide to Open Source](https://www.youtube.com/watch?v=yzeVMecydCE) - Video 51 | - [Guide to Open Source](https://www.freecodecamp.org/news/how-to-contribute-to-open-source-projects-beginners-guide/) - Article 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | [![Netlify Status](https://api.netlify.com/api/v1/badges/b889d513-750d-4aa0-a292-52abb019374b/deploy-status)](https://emmycalculatorapp.netlify.app) 60 | 61 | 62 | ## How to contribute: 63 | 64 | - Drop a :star: on the GitHub repository (optional)
65 | 66 | - Before Contribute Please read [CONTRIBUTING.md](https://github.com/Emilance/Javascript-Calculator-App/blob/master/CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](https://github.com/Emilance/Javascript-Calculator-App/blob/master/CODE_OF_CONDUCT.md) 67 | 68 | - Create an issue of the project or a feature you would like to add to the project and get the task assigned for yourself. (Issue can be any bug fixes or any feature you want to add to this project). 69 | 70 | - Fork the repo to your GitHub.
71 | 72 | - Clone the Repo by going to your local Git Client in a particular local folder in your local machine by using this command with your forked repository link in place of the below-given link:
73 | `git clone https://github.com/your-github-username/Javascript-Calculator-App.git` 74 | - Create a branch using the below command. 75 | `git branch ` 76 | - Checkout to your branch. 77 | `git checkout ` 78 | - Add your code to your local machine folder. 79 | `git add . ` 80 | - Commit your changes. 81 | `git commit -m""` 82 | - Push your changes. 83 | `git push --set-upstream origin ` 84 | 85 | - Make a pull request! (compare your branch with the owner's main branch) 86 | 87 | ## Contributors : 88 |
89 |

90 | Our Amazing Contributors🌟 91 |

92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /css/dotBubbles.css: -------------------------------------------------------------------------------- 1 | .dot-bubbles 2 | { 3 | position: absolute; 4 | display: flex; 5 | flex-wrap: wrap; 6 | margin-top: 70px; 7 | width: 100%; 8 | justify-content: space-around; 9 | z-index: -1; 10 | } 11 | .dot-bubbles span 12 | { 13 | position: relative; 14 | width: 30px; 15 | height: 30px; 16 | background: #4fc3dc; 17 | margin: 0 4px; 18 | border-radius: 50%; 19 | box-shadow: 0 0 0 10px #4fc3dc44, 20 | 0 0 50px #4fc3dc, 21 | 0 0 100px #4fc3dc; 22 | animation: animate 15s linear infinite; 23 | animation-duration: calc(245s / var(--i)); 24 | 25 | } 26 | .dot-bubbles span:nth-child(even) 27 | { 28 | background: #ff2d75; 29 | box-shadow: 0 0 0 10px #ff2d7544, 30 | 0 0 50px #ff2d75, 31 | 0 0 100px #ff2d75; 32 | } 33 | @keyframes animate 34 | { 35 | 0% 36 | { 37 | transform: translateY(100vh) scale(0); 38 | } 39 | 100% 40 | { 41 | transform: translateY(-10vh) scale(1); 42 | } 43 | } -------------------------------------------------------------------------------- /css/dropdown.css: -------------------------------------------------------------------------------- 1 | .dropdown { 2 | margin-left: 10px; 3 | } 4 | a, 5 | .dropbtn { 6 | display: inline-block; 7 | color: #fff; 8 | text-align: center; 9 | padding: 14px 16px; 10 | text-decoration: none; 11 | } 12 | 13 | .dropbtn > i { 14 | font-size: 35px; 15 | } 16 | 17 | .dropbtn > p { 18 | font-size: 16px; 19 | } 20 | 21 | a:hover, 22 | .dropdown:hover .dropbtn { 23 | color: #ffdf00; 24 | } 25 | 26 | .dropdown { 27 | display: inline-block; 28 | } 29 | 30 | .dropdown-content { 31 | display: none; 32 | position: absolute; 33 | background-color: grey; 34 | min-width: 160px; 35 | box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 36 | z-index: 1; 37 | } 38 | 39 | .dropdown-content div { 40 | color: #fff; 41 | padding: 12px 16px; 42 | text-decoration: none; 43 | display: block; 44 | text-align: center; 45 | cursor: pointer; 46 | } 47 | 48 | .dropdown-content div:hover { 49 | background-color: #5d5d5d; 50 | } 51 | 52 | .dropdown:hover .dropdown-content { 53 | display: block; 54 | } 55 | -------------------------------------------------------------------------------- /css/soapBubbles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Mali:wght@700&display=swap"); 2 | .soap-bubbles { 3 | position: absolute; 4 | bottom: -200px; 5 | display: flex; 6 | flex-wrap: wrap; 7 | margin-top: 70px; 8 | width: 100%; 9 | justify-content: space-around; 10 | z-index: -1; 11 | 12 | } 13 | .soap-bubble { 14 | position: relative; 15 | width: 100px; 16 | height: 100px; 17 | border-radius: 50%; 18 | box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.25); 19 | animation: move 10s linear infinite; 20 | } 21 | .soap-bubble::before { 22 | content: ""; 23 | position: absolute; 24 | top: 25px; 25 | left: 22.5px; 26 | width: 15px; 27 | height: 15px; 28 | border-radius: 50%; 29 | background: #fff; 30 | z-index: 10; 31 | filter: blur(2px); 32 | } 33 | .soap-bubble::after { 34 | content: ""; 35 | position: absolute; 36 | top: 40px; 37 | left: 40px; 38 | width: 10px; 39 | height: 10px; 40 | border-radius: 50%; 41 | background: #fff; 42 | z-index: 10; 43 | filter: blur(2px); 44 | } 45 | .soap-bubble span { 46 | position: absolute; 47 | border-radius: 50%; 48 | } 49 | .soap-bubble span:nth-child(1) { 50 | inset: 5px; 51 | border-left: 7px solid #0fb4ff; 52 | filter: blur(8px); 53 | } 54 | .soap-bubble span:nth-child(2) { 55 | inset: 5px; 56 | border-right: 7px solid #ff4484; 57 | filter: blur(8px); 58 | } 59 | .soap-bubble span:nth-child(3) { 60 | inset: 10px; 61 | border-top: 7px solid #ffeb3b; 62 | filter: blur(8px); 63 | } 64 | .soap-bubble span:nth-child(4) { 65 | inset: 15px; 66 | border-left: 7px solid #ff4484; 67 | filter: blur(12px); 68 | } 69 | .soap-bubble span:nth-child(5) { 70 | inset: 5px; 71 | border-bottom: 7px solid #fff; 72 | filter: blur(10px); 73 | transform: rotate(330deg); 74 | } 75 | .soap-bubble span:nth-child(6) { 76 | font-family: "Mali", cursive; 77 | font-weight: 700; 78 | color: #fff; 79 | text-align: center; 80 | line-height: 100px; 81 | font-size: 70px; 82 | width: 100px; 83 | filter: blur(1px); 84 | z-index: -1; 85 | } 86 | 87 | @keyframes move { 88 | 100% { 89 | transform: translateY(-100vh); 90 | } 91 | } 92 | 93 | .soap-bubbles div:nth-child(1) { 94 | animation-delay: 2.2s; 95 | transform: scale(2.15); 96 | } 97 | .soap-bubbles div:nth-child(2) { 98 | animation-delay: 3.5s; 99 | transform: scale(1.55); 100 | } 101 | .soap-bubbles div:nth-child(3) { 102 | animation-delay: 0.2s; 103 | transform: scale(0.35); 104 | } 105 | .soap-bubbles div:nth-child(4) { 106 | animation-delay: 6s; 107 | transform: scale(2.15); 108 | } 109 | .soap-bubbles div:nth-child(5) { 110 | animation-delay: 7s; 111 | transform: scale(0.5); 112 | } 113 | .soap-bubbles div:nth-child(6) { 114 | animation-delay: 4s; 115 | transform: scale(2.5); 116 | } 117 | .soap-bubbles div:nth-child(7) { 118 | animation-delay: 3s; 119 | transform: scale(1.5); 120 | } 121 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @font-face{ 2 | font-family: Digital7Font; 3 | src: url(../digital_font.ttf); 4 | } 5 | * { 6 | padding: 0; 7 | margin: 0; 8 | box-sizing: border-box; 9 | } 10 | html { 11 | font-family: "Montserrat", sans-serif; 12 | overflow-y: hidden; 13 | } 14 | 15 | section{ 16 | height: 100vh; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | 23 | .container{ 24 | width: 36vw; 25 | height: fit-content; 26 | margin: auto; 27 | background-color:var(--container-bg); 28 | border-radius: 28px; 29 | position: absolute; 30 | top:50%; 31 | transform: translate(0, -50%); 32 | 33 | } 34 | 35 | .all_button{ 36 | border-radius: 28px; 37 | padding: 16px; 38 | display: grid; 39 | grid-template-columns: repeat(4,1fr); 40 | align-content: center; 41 | background-color:var(--container-bg); 42 | } 43 | 44 | 45 | .display{ 46 | font-family: 'Digital7Font',sans-serif; 47 | grid-column: span 4; 48 | height: 8vw; 49 | width: 30vw; 50 | display: flex; 51 | flex-direction: column; 52 | justify-content: center; 53 | margin: auto; 54 | margin-top: 30px; 55 | margin-bottom: 30px; 56 | background: var(--display-bg); 57 | box-shadow: var(--display-shadow); 58 | border: none; 59 | border-radius: 32px; 60 | color: rgb(26,25,25); 61 | text-align: end; 62 | margin: 2vw auto 1vw; 63 | padding: 0 30px 0; 64 | font-size: 2.2vw; 65 | } 66 | 67 | 68 | .button{ 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | background: var(--btns-color); 73 | box-shadow: var(--btn-shadow); 74 | border: none; 75 | border-radius: 50%; 76 | width: 3.7vw; 77 | height: 3.7vw; 78 | color: #1d2934; 79 | line-height: 53px; 80 | margin: 10px; 81 | font-weight: bold; 82 | font-size: 2vw; 83 | text-align: center; 84 | cursor: pointer; 85 | margin: 1vw auto 1vw; 86 | } 87 | 88 | .button:hover{ 89 | box-shadow: var(--btn-hover-shadow); 90 | 91 | } 92 | 93 | 94 | .button:active { 95 | opacity: 1; 96 | background-color: #d1ced1; 97 | box-shadow: 0px 0px 18px #888888 inset; 98 | } 99 | 100 | .prevent-select { 101 | -webkit-user-select: none; /* Safari */ 102 | -ms-user-select: none; /* IE 10 and IE 11 */ 103 | user-select: none; /* Standard syntax */ 104 | } 105 | .prevent-select { 106 | -webkit-user-select: none; /*Safari */ 107 | -ms-user-select: none; /*IE 10 and IE 11 */ 108 | user-select: none; /* Standard syntax*/ 109 | } 110 | 111 | 112 | 113 | @media screen and (max-width:900px) { 114 | .container{ 115 | width: 40vw; 116 | } 117 | .button{ 118 | width: 6vw; 119 | height: 6vw; 120 | font-size: 2.5vw; 121 | } 122 | .display{ 123 | width: 34vw; 124 | font-size: 2.5vw; 125 | } 126 | } 127 | @media screen and (max-width:700px) { 128 | .container{ 129 | width: 50vw; 130 | } 131 | .button{ 132 | font-size: 3vw; 133 | } 134 | .display{ 135 | width: 41vw; 136 | height: 10vw; 137 | font-size: 3vw; 138 | } 139 | } 140 | @media screen and (max-width:550px) { 141 | .container{ 142 | width: 300px; 143 | } 144 | .button{ 145 | width: 40px; 146 | height: 40px; 147 | font-size: 15px; 148 | margin: 6px auto 6px; 149 | } 150 | .display{ 151 | width: 240px; 152 | height: 60px; 153 | font-size: 15px; 154 | margin: 10px auto 10px; 155 | } 156 | } 157 | 158 | 159 | 160 | .waviy { 161 | position: relative; 162 | -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2)); 163 | /* font-size: 60px; */ 164 | font-size: 150%; 165 | font-size: 4rem; 166 | text-align: center; 167 | } 168 | .waviy span { 169 | font-family: 'Alfa Slab One', cursive; 170 | display: inline-block; 171 | color: black; 172 | color:var(--text-bg); 173 | animation: waviy 1s infinite; 174 | animation-delay: calc(.1s * var(--i)); 175 | } 176 | 177 | @keyframes waviy { 178 | 0%,40%,100% { 179 | transform: translateY(0%); 180 | } 181 | 20% { 182 | transform: translateY(-40%); 183 | } 184 | } 185 | 186 | 187 | 188 | 189 | .bubbles{ 190 | position: absolute; 191 | bottom: -120px; 192 | display: flex; 193 | flex-wrap: wrap; 194 | margin-top: 70px; 195 | width: 100%; 196 | justify-content: space-around; 197 | z-index: -1; 198 | } 199 | .bubbles span{ 200 | height: 60px; 201 | width: 60px; 202 | background: rgba(255, 255, 255, 0.1); 203 | animation: move 10s linear infinite; 204 | position: relative; 205 | overflow: hidden; 206 | border-radius: 50%; 207 | 208 | } 209 | @keyframes move { 210 | 100%{ 211 | transform: translateY(-100vh); 212 | } 213 | } 214 | .bubbles span.one{ 215 | animation-delay: 2.2s; 216 | transform: scale(2.15) 217 | } 218 | .bubbles span.two{ 219 | animation-delay: 3.5s; 220 | transform: scale(1.55) 221 | } 222 | .bubbles span.three{ 223 | animation-delay: 0.2s; 224 | transform: scale(0.35) 225 | } 226 | .bubbles span.four{ 227 | animation-delay: 6s; 228 | transform: scale(2.15) 229 | } 230 | .bubbles span.five{ 231 | animation-delay: 7s; 232 | transform: scale(0.5) 233 | } 234 | .bubbles span.six{ 235 | animation-delay: 4s; 236 | transform: scale(2.5) 237 | } 238 | .bubbles span.seven{ 239 | animation-delay: 3s; 240 | transform: scale(1.5) 241 | } 242 | .bubbles span:before{ 243 | content: ''; 244 | position: absolute; 245 | left: 0; 246 | top: 0; 247 | height: 60px; 248 | width: 40%; 249 | transform: skew(45deg) translateX(150px); 250 | background: rgba(255, 255, 255, 0.15); 251 | animation: mirror 3s linear infinite; 252 | } 253 | @keyframes mirror { 254 | 100%{ 255 | transform: translateX(-450px); 256 | } 257 | } 258 | .bubbles span.one:before{ 259 | animation-delay: 1.5s; 260 | } 261 | .bubbles span.two:before{ 262 | animation-delay: 3.5s; 263 | } 264 | .bubbles span.three:before{ 265 | animation-delay: 2.5s; 266 | } 267 | .bubbles span.four:before{ 268 | animation-delay: 7.5s; 269 | } 270 | .bubbles span.five:before{ 271 | animation-delay: 4.5s; 272 | } 273 | .bubbles span.six:before{ 274 | animation-delay: 0.5s; 275 | } 276 | .bubbles span.seven:before{ 277 | animation-delay: 6s; 278 | } 279 | 280 | -------------------------------------------------------------------------------- /css/togglebtn.css: -------------------------------------------------------------------------------- 1 | html[data-theme='light'] { 2 | --bg: #ebebeb; 3 | --display-bg: linear-gradient(145deg, #b8e0ee, #47b8d4); 4 | --display-shadow: 7px 7px 20px #4b6d75, 5 | -7px -7px 20px #8dcfdf; 6 | ; 7 | --toggle-btn: #231f20; 8 | --body-color: rgb(95, 123, 140); 9 | --btns-color: linear-gradient(145deg, #7ca5af, #5299be); 10 | --btns-hover-color: rgb(90, 135, 145); 11 | --container-bg: rgb(108, 158, 170); 12 | --btn-shadow: 7px 7px 20px #4b6d75, 13 | -7px -7px 20px #8dcfdf; 14 | --btn-hover-shadow: inset 7px 7px 20px #4b6d75, 15 | inset -7px -7px 20px #8dcfdf; 16 | } 17 | 18 | /* background: linear-gradient(145deg, #f9b000, #24231f); 19 | box-shadow: 7px 7px 20px #080a0a, -7px -7px 20px #855923b3; */ 20 | 21 | html[data-theme='dark'] { 22 | --bg: #434343; 23 | --display-bg: linear-gradient(145deg, #f9b000, #f3b692); 24 | --display-shadow: 7px 7px 20px #080a0a, -7px -7px 20px #855923b3; 25 | --toggle-btn: #b5b5b5; 26 | --body-color: rgb(18, 26, 31); 27 | --btns-color: linear-gradient(145deg, #f9b000, #24231f); 28 | --btns-hover-color: rgb(20, 28, 30); 29 | --container-bg: rgb(39, 55, 59); 30 | --btn-shadow: 7px 7px 20px #080a0a, -7px -7px 20px #855923b3; 31 | --btn-hover-shadow: inset 7px 7px 10px #55400b, 32 | inset -7px -7px 20px #dc9f09; 33 | --text-bg : grey; 34 | } 35 | 36 | body { 37 | background-color: var(--body-color); 38 | } 39 | 40 | .toggle-container { 41 | display: flex; 42 | justify-content: end; 43 | align-items: center; 44 | } 45 | 46 | .toggle-container label { 47 | margin-left: 10px; 48 | margin-right: 10px; 49 | } 50 | 51 | input[type='checkbox'] { 52 | height: 0; 53 | width: 0; 54 | visibility: hidden; 55 | } 56 | 57 | .toggleLabel { 58 | cursor: pointer; 59 | width: 90px; 60 | height: 40px; 61 | background: grey; 62 | float: right; 63 | border-radius: 100px; 64 | position: relative; 65 | } 66 | 67 | .toggleLabel:after { 68 | content: ''; 69 | position: absolute; 70 | top: 3px; 71 | left: 3px; 72 | width: 35px; 73 | height: 35px; 74 | background: #fff; 75 | border-radius: 90px; 76 | } 77 | 78 | input:checked+.toggleLabel { 79 | background: var(--toggle-btn); 80 | } 81 | 82 | input:checked+.toggleLabel:after { 83 | left: calc(100% - 5px); 84 | transform: translateX(-100%); 85 | transition: 300ms ease-in-out; 86 | } 87 | 88 | .toggleLabel:active:after { 89 | width: 50px; 90 | } 91 | 92 | html.transition, 93 | html.transition *, 94 | html.transition *:after { 95 | transition: all 300ms ease-in-out !important; 96 | transition-delay: 0 !important; 97 | } 98 | 99 | /* sun and moon */ 100 | label i { 101 | position: absolute; 102 | width: 20px; 103 | z-index: 5; 104 | font-size: 1.5em; 105 | top: 7px; 106 | } 107 | 108 | label .sun { 109 | width: 20px; 110 | left: 8px; 111 | color: #ffdf00; 112 | } 113 | 114 | label .moon { 115 | right: 14px; 116 | color: #5d5d5d; 117 | } 118 | 119 | input:checked+label .sun { 120 | color: #5d5d5d; 121 | } 122 | 123 | input:checked+label .moon { 124 | color: #ffdf00; 125 | } -------------------------------------------------------------------------------- /digital_font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Emilance/Javascript-Calculator-App/6cf928227d7d242ac691244136444e8d605d3298/digital_font.ttf -------------------------------------------------------------------------------- /images/calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Emilance/Javascript-Calculator-App/6cf928227d7d242ac691244136444e8d605d3298/images/calculator.png -------------------------------------------------------------------------------- /images/mockup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Emilance/Javascript-Calculator-App/6cf928227d7d242ac691244136444e8d605d3298/images/mockup.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CALCULATOR WITH VANILLA JS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 18 | 19 | 20 |
21 | 22 |
23 |

Theme

 24 |
25 |
Bubbles
26 |
Number Bubbles
27 |
Dot Bubbles
28 |
29 |
30 | 31 |
32 | 33 | 37 |
38 |
39 |
40 | 41 |
42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
62 |
63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
72 |
73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 |
83 | 84 |
85 |
86 |
87 | 88 | 89 | 90 | 91 | 92 | + 93 |
94 |
95 | 96 | 97 | 98 | 99 | 100 | 1 101 |
102 |
103 | 104 | 105 | 106 | 107 | 108 | 5 109 |
110 |
111 | 112 | 113 | 114 | 115 | 116 | ( 117 |
118 |
119 | 120 | 121 | 122 | 123 | 124 | / 125 |
126 |
127 | 128 | 129 | 130 | 131 | 132 | 2 133 |
134 |
135 | 136 | 137 | 138 | 139 | 140 | 9 141 |
142 |
143 |
144 |
145 |
146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 |
177 |
178 | 179 |
180 |
181 |
182 |
0
183 |
0
184 |
185 |
186 |
C
187 |
AC
188 |
%
189 |
^
190 |
7
191 |
8
192 |
9
193 |
!
194 |
4
195 |
5
196 |
6
197 |
/
198 |
1
199 |
2
200 |
3
201 |
x
202 |
0
203 |
Del
204 |
.
205 |
-
206 |
+
207 |
=
208 | 209 | 210 | 213 | 214 |
215 |
216 |
217 |
218 | 219 | 220 | 221 | 222 | 223 | 224 | -------------------------------------------------------------------------------- /js/dropdown.js: -------------------------------------------------------------------------------- 1 | const themeClasses = document.getElementsByClassName("background"); 2 | for (let index = 1; index < themeClasses.length; index++) { 3 | if (index === 0) { 4 | themeClasses[index].style.display = "block"; 5 | } else { 6 | themeClasses[index].style.display = "none"; 7 | } 8 | } 9 | function selectTheme(theme) { 10 | const themeClasses = document.getElementsByClassName("background"); 11 | if (theme === "Bubbles") { 12 | for (let index = 0; index < themeClasses.length; index++) { 13 | if (index === 0) { 14 | themeClasses[index].style.display = "block"; 15 | } else { 16 | themeClasses[index].style.display = "none"; 17 | } 18 | } 19 | } else if (theme === "Number Bubbles") { 20 | for (let index = 0; index < themeClasses.length; index++) { 21 | if (index === 1) { 22 | themeClasses[index].style.display = "block"; 23 | } else { 24 | themeClasses[index].style.display = "none"; 25 | } 26 | } 27 | } 28 | else if (theme === "Dot Bubbles") { 29 | for (let index = 0; index < themeClasses.length; index++) { 30 | if (index === 2) { 31 | themeClasses[index].style.display = "block"; 32 | } else { 33 | themeClasses[index].style.display = "none"; 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /js/evalutor.js: -------------------------------------------------------------------------------- 1 | class Postfix { 2 | /** 3 | * Postifix evalutor, accept an infix expression and convert into 4 | * postfix expression for a better evalution. 5 | * 6 | * Read more about infix and postfix expression 7 | * - https://www.geeksforgeeks.org/stack-set-2-infix-to-postfix/ 8 | */ 9 | 10 | ops = {"**": 2, "*": 2, "*0.01": 2, "/": 2 , "-": 1, "+": 1} 11 | 12 | /** 13 | * Check a given character is one of allowed operators 14 | * @param {String} char character to be checked. 15 | * @return {Boolean} true if a character is operator false otherwise. 16 | */ 17 | isOperator(char) { 18 | 19 | return char in this.ops 20 | } 21 | 22 | /** 23 | * Compare a gived operators precedence 24 | * @param {String} op1 first operator 25 | * @param {String} op2 second operator 26 | * @return {Boolean} true if a first operator precedence is greater that or 27 | * equal with second operator is operator false otherwise. 28 | */ 29 | isHiger(op1, op2) {return this.ops[op1] >= this.ops[op2]} 30 | 31 | /** 32 | * Convert a given infix expression into a postfix expression 33 | * @param {String} infix_expression infix expression that needed to be converted 34 | * @return {String} postfix expression 35 | */ 36 | toExpression(infix_expression) { 37 | Array.prototype.empty = function() { return this.length == 0 } 38 | Array.prototype.top = function() { return this[this.length - 1] } 39 | 40 | var postfix_exp = [] 41 | var operators = [] 42 | 43 | for(var char of infix_expression.split(" ")) { 44 | if (this.isOperator(char)){ 45 | if (operators.empty()){ 46 | operators.push(char) 47 | } 48 | else { 49 | while (!operators.empty() && this.isHiger(operators.top(), char)){ 50 | postfix_exp.push(operators.pop()) 51 | } 52 | operators.push(char) 53 | } 54 | } 55 | else { 56 | postfix_exp.push(char) 57 | } 58 | } 59 | while (!operators.empty()) { 60 | postfix_exp.push(operators.pop()) 61 | } 62 | return postfix_exp.join(" "); 63 | } 64 | } 65 | 66 | /** 67 | * Evaluate a given infix expression by converting into postfix 68 | * @param {String} infix_expression infix expression to be evaluated 69 | * @return {Integer} evaluation result 70 | */ 71 | function evaluate(infix_expression) { 72 | var postfix= new Postfix() 73 | var values = [] 74 | 75 | postfix_expression = postfix.toExpression(infix_expression).split(" ") 76 | for (var char of postfix_expression) { 77 | if (postfix.isOperator(char)) { 78 | var y = values.pop() 79 | var x = values.pop() 80 | values.push(eval(`${x} ${char} ${y}`)) 81 | } else { 82 | values.push(char) 83 | } 84 | } 85 | return values[0]; 86 | } -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | const display1El = document.querySelector(".display-1"); 2 | const display2El = document.querySelector(".display-2"); 3 | const numbersEl = document.querySelectorAll(".number"); 4 | const operationEl = document.querySelectorAll(".operation"); 5 | const equalEl = document.querySelector(".equal"); 6 | const clearAllEl = document.querySelector(".all-clear"); 7 | const clearLastEl = document.querySelector(".last-entity-clear"); 8 | const del = document.querySelector(`.del`); 9 | 10 | let dis1Num = ""; 11 | let dis1NumTemp = ""; 12 | let dis1ResTemp = ""; 13 | let dis2Num = ""; 14 | let dis2NumTemp = ""; 15 | let lastOperation = ""; 16 | let result = null; 17 | let resultTemp = null; 18 | let haveDot = false; 19 | let isContinue = false; 20 | 21 | numbersEl.forEach((number) => { 22 | number.addEventListener("click", (e) => { 23 | if (e.target.innerText === "." && !haveDot) { 24 | haveDot = true; 25 | } else if (e.target.innerText === "." && haveDot) { 26 | return; 27 | } 28 | dis2Num += e.target.innerText; 29 | dis2NumTemp = dis2Num; 30 | display2El.innerText = dis2Num; 31 | }); 32 | }); 33 | 34 | operationEl.forEach((operation) => { 35 | operation.addEventListener("click", (e) => { 36 | isContinue = false; 37 | haveDot = false; 38 | const operationName = e.target.innerText; 39 | if (dis1Num && dis2Num && lastOperation) { 40 | mathOperation(); 41 | clearVar(operationName); 42 | } else { 43 | if(!dis2Num){ 44 | // Operator switched 45 | dis1Num = dis1Num.substring(0, dis1Num.length-2)+ " " + operationName + " "; 46 | display1El.innerText = dis1Num; 47 | }else{ 48 | result = parseFloat(dis2Num); 49 | dis1NumTemp = result; 50 | clearVar(operationName); 51 | } 52 | } 53 | lastOperation = operationName; 54 | }); 55 | }); 56 | 57 | function clearVar(name = "") { 58 | if (dis1Num == dis1ResTemp && isContinue) { 59 | dis1Num = `${resultTemp} ${lastOperation} ${dis2NumTemp}`; 60 | } else { 61 | dis1Num += dis2Num + " " + name + " "; 62 | } 63 | display1El.innerText = dis1Num; 64 | display2El.innerText = ""; 65 | dis2Num = ""; 66 | } 67 | 68 | function mathOperation() { 69 | if (isContinue) { 70 | result = resultTemp; 71 | dis2Num = dis2NumTemp; 72 | } 73 | 74 | result = `${result} ${lastOperation} ${dis2Num}` 75 | } 76 | function factorialize(num) { 77 | var result = num; 78 | if (num === 0 || num === 1) 79 | return 1; 80 | while (num > 1) { 81 | num--; 82 | result *= num; 83 | } 84 | return result; 85 | } 86 | 87 | function setCharAt(str,index,chr) { 88 | if(index > str.length-1) return str; 89 | return str.substring(0,index) + chr + str.substring(index+1); 90 | } 91 | 92 | equalEl.addEventListener("click", () => { 93 | if (isContinue) dis1Num = dis1ResTemp; 94 | if ((!dis2Num || !dis1Num) && (lastOperation === 'x' || lastOperation === '+' || lastOperation === '-' || lastOperation === '/')) return; 95 | haveDot = false; 96 | mathOperation(); 97 | isContinue = true; 98 | if (dis1NumTemp == 1 && lastOperation == "x") isContinue = false; 99 | if (dis1NumTemp == 1 && lastOperation == "%") isContinue = false; 100 | clearVar(); 101 | let pos,num = -1; 102 | for (let i = 0; i < result.length; i++) { 103 | if (result[i] === '!'){ 104 | pos = i; 105 | num = result[i-2]; 106 | } 107 | } 108 | 109 | 110 | result = this.setCharAt(result,pos-2,''); 111 | 112 | result = result.replaceAll("x", "*"); 113 | result = result.replaceAll("^", "**"); 114 | result = result.replaceAll("%", "*0.01"); 115 | result = result.replaceAll("!", `${factorialize(num)}`); 116 | 117 | if (num === -1) 118 | result = evaluate(result); 119 | 120 | if (isContinue) resultTemp = result; 121 | display2El.innerText = result; 122 | dis2Num = result; 123 | if (!dis1ResTemp) dis1ResTemp = dis1Num; 124 | dis1Num = ""; 125 | }); 126 | 127 | clearAllEl.addEventListener("click", () => { 128 | dis1Num = ""; 129 | dis2Num = ""; 130 | display1El.innerText = "0"; 131 | display2El.innerText = "0"; 132 | result = ""; 133 | }); 134 | 135 | clearLastEl.addEventListener("click", () => { 136 | display2El.innerText = ""; 137 | dis2Num = ""; 138 | }); 139 | 140 | del.addEventListener(`click`, ()=>{ 141 | let number = display2El.innerText; 142 | dis2Num = number.substring(0 , number.length - 4); 143 | display2El.innerText = dis2Num; 144 | }) 145 | 146 | window.addEventListener("keydown", (e) => { 147 | if (e.key === '/' || e.key === 'Backspace'){ 148 | e.preventDefault(); 149 | } 150 | if ( 151 | e.key === "0" || 152 | e.key === "1" || 153 | e.key === "2" || 154 | e.key === "3" || 155 | e.key === "4" || 156 | e.key === "5" || 157 | e.key === "6" || 158 | e.key === "7" || 159 | e.key === "8" || 160 | e.key === "9" || 161 | e.key === "." 162 | ) { 163 | clickButtonEl(e.key); 164 | } else if (e.key === "+" || e.key === "-" || e.key === "/" || e.key === "%" || e.key === "!") { 165 | clickOperation(e.key); 166 | } else if (e.key === "*") { 167 | clickOperation("x"); 168 | } else if (e.key == "Enter" || e.key === "=") { 169 | clickEqual(); 170 | } else if(e.key === `Backspace`){ 171 | del.click() 172 | }else if(e.key === `c`){ 173 | clearLastEl.click() 174 | }else if(e.key === `x`){ 175 | clearAllEl.click() 176 | } 177 | }); 178 | 179 | function clickButtonEl(key) { 180 | numbersEl.forEach((button) => { 181 | if (button.innerText === key) { 182 | button.click(); 183 | } 184 | }); 185 | } 186 | 187 | function clickOperation(key) { 188 | operationEl.forEach((operation) => { 189 | if (operation.innerText === key) { 190 | operation.click(); 191 | } 192 | }); 193 | } 194 | 195 | function clickEqual() { 196 | equalEl.click(); 197 | } -------------------------------------------------------------------------------- /js/togglebtn.js: -------------------------------------------------------------------------------- 1 | var checkbox = document.querySelector('input[name=theme]'); 2 | 3 | if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) { 4 | document.documentElement.setAttribute("data-theme", "dark"); 5 | checkbox.checked = true; 6 | } else { 7 | document.documentElement.setAttribute("data-theme", "light"); 8 | checkbox.checked = false; 9 | } 10 | 11 | checkbox.addEventListener('change', function() { 12 | if(this.checked) { 13 | document.documentElement.classList.add("transition"); 14 | document.documentElement.setAttribute('data-theme', 'dark') 15 | localStorage.theme = "dark"; 16 | } else { 17 | document.documentElement.classList.add("transition"); 18 | document.documentElement.setAttribute('data-theme', 'light') 19 | localStorage.theme = "light"; 20 | } 21 | }) --------------------------------------------------------------------------------