Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/187jjay187/hublecalculator

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/187jjay187/hublecalculator
Owner: 187jjay187
Created: 2023-10-26T07:39:16.000Z (about 1 year ago)
Default Branch: dev
Last Pushed: 2023-10-26T10:06:45.000Z (about 1 year ago)
Last Synced: 2024-10-20T12:59:54.768Z (3 months ago)
Language: JavaScript
Homepage: https://hublecalculator.vercel.app
Size: 13.7 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

Huble Assessment - Calculator App

# 📗 Table of Contents

- 📖 About the Project(#about-project)
- 🛠 Built With(#built-with)
- Tech Stack(#tech-stack)
- Key Features(#key-features)
- 🚀 Live Demo([EinsteinsCalculatorApp](https://einsteins-calculator.vercel.app/))
- 💻 Getting Started(#getting-started)
- Setup(#setup)
- Prerequisites(#prerequisites)
- Install(#install)
- Usage(#usage)
- Run tests(#run-tests)
- Deployment(#triangular_flag_on_post-deployment)
- 👥 Authors(#authors)
- 🔭 Future Features(#future-features)
- 🤝 Contributing(#contributing)
- ⭐️ Show your support(#support)
- 🙏 Acknowledgements(#acknowledgements)
- ❓ FAQ(#faq)
- 📝 License(#license)

# 📖 Calculator App

**Calculator App** create a calculator single page application using basic UI design/wireframes

## 🛠 Built With
- HTML
- CSS
- Javascript (ES6)

### Tech Stack

- HTML
- CSS
- JavaScript

### Key Features

- An input field that takes calculates the current input number
- functional buttons to add, subtract, multiply and divide
- An output field that displays the calculation history log
- An output field that displays the current answer and current number next to be added to the calculation before the operation and last calculated number
- Functionality that uses the current output number(answer) that will be used next before the next operation "+; -; x; /" pressed and the last number to be calculated is selected and inputed

(back to top)

## 🚀 Live Demo

- Live Demo Link([Einstiens Calculator](https://einsteins-calculator.vercel.app/))

## 🚀 Project Update Details

### in this update i've added:
- An input field that takes calculates the current input number
- functional buttons to add, subtract, multiply and divide
- An output field that displays the calculation history log
- An output field that displays the current answer and current number next to be added to the calculation before the operation and last calculated number
- Functionality that uses the current output number(answer) that will be used next before the next operation "+; -; x; /" pressed and the last number to be calculated is selected and inputed

# Einstein's calculator Example:

if 1 + 3 = 4 then the next number to be inputed before the operation "+; -; x; /" will be the answer that was outputed "4" meaning "4" is already in the calculation that awaits the users next selected operation "+; -; x; /" to be inputed/clicked, so when a user selects the next number before selecting an operator "+; -; x; /" that number for example "10" will be inputed after the user selects an operator "+; -; x; /" so if the "x" multiply operation is selected it will add it to the calculation before the current number selected in the input field like "4 x 10" which means the next number to be added last to the equation is the number currently in the input field "10" that will give us "4"(the last answer) "x" multiplied by "10"(currentInputNumber) "4 x 10 = 40" which will display "40" as the next result, and "40" will be the first number in the equation followed by the current number in the input field before the next operation "+; -; x; /" is selected

(back to top)

## 💻 Getting Started

> To get a local copy up and running, follow these steps.

### Prerequisites

In order to run this project you need:

- Have a local version control like Git. Which is a open source distributed version control system designed for source code management
- A text editor (e.g Visual Studio Code, Vim, Atom & Sublime.)
- A web browser (e.g Chrome, Safari, Mozilla Firefox.)
- Live Server which is a web extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASPNET)
- Download waves to check project accessibility

### Setup

Clone this repository to your desired folder:

To get a local copy up and running follow these simple example steps.

- npm
```sh
npm install npm@latest -g
```

### Install

Install this project with:

1. Clone the repo by running the command
```sh
git clone https://github.com/187jjay187/hublecalculator.git
```
2. Open the directory of the project
```sh
cd hublecalculator
cd calculatorapp-app
```
3. Open the html file
```sh
Click and open the html file
```
4. Please install the node module by running this command on the terminal
```sh
npm install
```
5. Please create a build file
```sh
npm run-build
```
6. Please run the following to render on the browser
```sh
npm run dev
```

### Usage

To run the project, execute the following command:

1. Please run the following to render on the browser
```sh
npm start
```

(back to top)

👤 **Jerome Jay**

- GitHub: @githubhandle(https://github.com/187jjay187)
- Twitter: @twitterhandle(https://twitter.com/187jjay187)
- LinkedIn: LinkedIn(https://linkedin.com/in/jerome-osman-137605a4)

(back to top)

## 🔭 Future Features

- **Responsive Design breakpoints for different devices**
- **Number Buttons to complete the calculator**

(back to top)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page(https://github.com/187jjay187/hublecalculator/issues).