## Github Pages
<a href="https://pages.github.com" target="_blank">Github-pages</a> is a free hosting platform which you can use to showcase your projects, host your portfolio, a blog or even share your resume with your employers. You can as well add a custom domain to your github page, isn't that amazing. This post will guide you on how to host a <a href="https://vitejs.dev" target="_blank">vite.js</a> app on Github-pages.

If you are looking for some other hosting platforms which you can use to deploy your single page apps, kindly refer to this post **<a href="https://www.techcoach.pro/blog/top-6-free-hosting-platforms-for-deploying-your-react-app-8" target="_blank">Top 6 Free Hosting Platforms for Deploying Your React App</a>** where I share a complete guide on how to deploy your to each of them.

Deploying a vite.js app to GitHub Pages is a straightforward process that can be completed in just a few steps.

### Step 1: Vite Configuration
To configure your vite.js app, kindly create a file **`vite.config.js`** in the root directory of your app folder. The newly created confige file should contain the below code snippet:

```javascript
import { defineConfig } from "vite";

export default defineConfig({
  base: '/<REPO>/'
})
```

Now to set the correct `base` in `vite.config.js`, you need to change `/<REPO>/` to the name of the repository where you are pushing your code. Eg: `https://github.com/<USERNAME>/techcoach-clone` then `base` should be set as `/techcoach-clone/`.

### Step 2: Push code to repository
You need to push your current code to github. If this is a new project and git hasn't been initialized then you need to run this code in your project terminal:

```bash
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<USERNAME>/<repo>
git push -u origin main
```
Kindly replace <USERNAME> and <repo> with your username and the repository of your project. if git has been initialized in it and you haven't pushed your code before, then run the following:

```bash
git remote add origin https://github.com/<USERNAME>/<repo>
git branch -M main
git push -u origin main
```

### Step 3: Github Actions workflow
To setup the workflow for your vite app deployment, you need to head over to the settings on the github repo where your code is living, then go to Pages, under **Build and deployment** and choose the source as **GitHub Actions**, this will lead you to create a workflow that builds and deploy your project automatically. Kindly choose **"Static HTML"** and configure the workflow. Replace the code in there with this code snippet:

```yml
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['main']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1
```
After replacing the entire code, then use the **Start commit** button to commit your workflow and **Commit new file** to the repository. You now have your website live like visit `https://<USERNAME>.github.io/<REPO>/` to view your app.

## Conclusion
Deploying a vite app to github page is a very simple task which can be done in few minutes without going to the hassel of doing a lot of configurations to get your app up and running. With this you can deploy your clients app for demo purposes or your portforlio projects which uses vite under the hood.

Happy coding!

Github-pages is a free hosting platform which you can use to showcase your projects, host your portfolio, a blog or even share your resume with your employers

Deploy Vite App to Github Pages

**In the <a href="https://www.techcoach.pro/blog/how-to-build-a-calculator-app-with-html-css-and-javascript-part-1-7">first part of this build</a>**, we learnt how to make a beautify UI for our **<a href="https://infrequent-elderly-paneer.glitch.me" target="_blank">Calculator App</a>** using HTML and CSS. If you came directly to this second part of the build, I highy recommend you read the **[part 1](https://www.techcoach.pro/blog/how-to-build-a-calculator-app-with-html-css-and-javascript-part-1-7)** in order to follow the project progressively.

In this tutorial, we will be focusing on building the calculator engine which will power the UI we have built in [part one](https://www.techcoach.pro/blog/how-to-build-a-calculator-app-with-html-css-and-javascript-part-1-7). We will use vanilla javascript for the purpose of this tutorial without any framework or library.

### Objectives
At the end of this tutorial, you will:

- Know how to work with `Classes` in javascript
- Learn about functions
- Learn how to query dom using `data-attributes`
- Learn about `constructor` function
- Manipulate a dom

## Introduction
In this tutorial build, we will be focusing on the functional aspect of our calculator project using javascript. You can take a look at the live version of what we will be developing here **<a href="https://infrequent-elderly-paneer.glitch.me/" target="_blank">An Online Calculator</a>**

## Project Setup
To begin we already had an empty `app.js` file we created in the **[part 1](https://www.techcoach.pro/blog/how-to-build-a-calculator-app-with-html-css-and-javascript-part-1-7)** of this build and that is what we will be working with in todays build.

## Define the Calculator Class
A JavaScript class is a **blueprint for creating objects**. A class encapsulates data and functions that manipulate data. To define a class, we use the **_`class`_** keyword to define a class. Let define our calculator class and some functions we will be working with:

```javascript
class Calculator {
  constructor(previousOperandTextElement, currentOperandTextElement) {}

  clear() {}

  delete() {}

  appendNumber(number) {}

  chooseOperation(operation) {}

  compute() {}

  updateDisplay() {}
}
```

We have defined our calculator class, and 7 functions inside the calculator class. By the names of the functions, you can be able to tell what each funtion will do in the calculator engine. We will leave our class and the functions for now and head over to querying the dom elements using the `data-attributes`.

## Query DOM Elements
Now we need to query the dom elements using the `data-attributes` we earlier defined in the html file of our project in the **[part 1](https://www.techcoach.pro/blog/how-to-build-a-calculator-app-with-html-css-and-javascript-part-1-7)** of this build. Kindly reference the **_html_** file of this app to ensure you properly added the attributes in html elements. To query the dom, we will define some variables and assign the dom elements are there values. Add the following code snippet immediately after the closing curly bracket of the calcalator class:

```javascript
class Calculator {
  ...
}

const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');
const previousOperandTextElement = document.querySelector('[data-previous-operand]');
const currentOperandTextElement = document.querySelector('[data-current-operand]');
```

You will notice we have two variables using **_`document.querySelectorAll`_** and others using **_`document.querySelector`_**. The two variable **numberButtons** and **operationButtons** will return a NodeList because in our **html** file we have more than one button with the data attribute **_data-number_** and **_data-operation_**. So we are selecting all the buttons using the **_`document.querySelectorAll`_** method.

## Instantiate Calculator Class
Next, we will instantiate the calculator class using the **_new_** keyword as follows. To do that add the following code snippet after the last variable we defined earlier; ie **_`currentOperandTextElement`_**.

```javascript
const calculator = new Calculator(
  previousOperandTextElement,
  currentOperandTextElement
);
```

Notice we stored the `new Calculator` instance to a variable called `calculator` and we are passing two arguments to the Calculator instance. We will use this variable `calculator` to access the Calculator instance and it's properties and variables. We will see this in use soon.

The two arguments been passed are coming from the **_`constructor`_** function we earlier defined in the class. This function is the first function that will be called anytime the Calculator class is instantiated. It takes two arguments `previousOperandTextElement` and `currentOperandTextElement`.

Next, we will update the `constructor` function in our class as follows:

```javascript
  constructor(previousOperandTextElement, currentOperandTextElement) {
    this.previousOperandTextElement = previousOperandTextElement;
    this.currentOperandTextElement = currentOperandTextElement;
    this.clear();
  }
```

You current code should look as follows:

```javascript
class Calculator {
  constructor(previousOperandTextElement, currentOperandTextElement) {
    this.previousOperandTextElement = previousOperandTextElement;
    this.currentOperandTextElement = currentOperandTextElement;
    this.clear();
  }

  clear() {}

  delete() {}

  appendNumber(number) {}

  chooseOperation(operation) {}

  compute() {}

  updateDisplay() {}
}

const numberButtons = document.querySelectorAll("[data-number]");
const operationButtons = document.querySelectorAll("[data-operation]");
const equalsButton = document.querySelector("[data-equals]");
const deleteButton = document.querySelector("[data-delete]");
const allClearButton = document.querySelector("[data-all-clear]");
const previousOperandTextElement = document.querySelector(
  "[data-previous-operand]"
);
const currentOperandTextElement = document.querySelector(
  "[data-current-operand]"
);

const calculator = new Calculator(
  previousOperandTextElement,
  currentOperandTextElement
);
```

Next, we will work on the `appendNumber` function and `numberButtons` variable.

### Append Number Function
We will update the `appendNumber` function in the calculator class to reflect the following:

```javascript
  appendNumber(number) {
    if (number === "." && this.currentOperand.includes(".")) return;
    this.currentOperand = this.currentOperand.toString() + number.toString();
  }
```

Next, we will loop through the `numberButtons` using the `forEach` method. To do that will add this code snippet immediately after instantiating the Calculator class.

```javascript
// Loop through number buttons
numberButtons.forEach((button) => {
  button.addEventListener("click", () => {
    calculator.appendNumber(button.innerText);
    calculator.updateDisplay();
  });
});
```

Here we are listening for a click event on any of the buttons with the data attributes `data-number`. Once there's a click event, we append the innerText to the `currentOperand` as a string to the already existing `currentOperand`, then update the display of the calculator using `updateDisplay`. To access the `appendNumber`, `updateDisplay` and other variables in the Calculator class, we are using the `calculator` variable we defined earlier which stores the Calculator instance.

### Choose Operation Function
Next we will update our `chooseOperation` function to reflect the following:

```javascript
  chooseOperation(operation) {
    if (this.currentOperand === "") return;
    if (this.previousOperand !== "") {
      this.compute();
    }
    this.operation = operation;
    this.previousOperand = this.currentOperand;
    this.currentOperand = "";
  }
```
After updating our `chooseOperation` function, we will loop through the `operationButtons` variable just like with did with `numberButtons`. To do that, we will add the following code snippet after the `Loop through numbers buttons` code snippet:

```javascript
// Loop through the operation buttons
operationButtons.forEach((button) => {
  button.addEventListener("click", () => {
    calculator.chooseOperation(button.innerText);
    calculator.updateDisplay();
  });
});
```
Now we are looping through the operation buttons `/`, `*`, `+` and `-` using the `forEach` method and the listening for a click event on any of the buttons. Once there's a click event, we pass the `innerText` of the button as an argument to the `chooseOperation` function.

Then, in the `chooseOperation` function we are checking if the `currentOperand` is empty then the function will `return` because there's no value to compute. "*You can add an error handler that returns an error, telling the user to enter a value*." If the `currentOperand` is not empty then it checks that the `previousOperand` is not empty as well, then it calls the `compute` function before assigning values else it will skip computing and then assign values.

Now we need to work on the `compute` function of our calculator. This will handle the computations.

### Compute Function
This funtion will handle all the operations and it's computations. We will update the `compute` function of the Calculator class as follows:

```javascript
  compute() {
    let computation; // This will be the result of our computation
    const prev = parseFloat(this.previousOperand);
    const current = parseFloat(this.currentOperand);
    if (isNaN(prev) || isNaN(current)) return;

    switch (this.operation) {
      case "+":
        computation = prev + current;
        break;
      case "/":
        computation = prev / current;
        break;
      case "*":
        computation = prev * current;
        break;
      case "-":
        computation = prev - current;
        break;
      default:
        return;
    }

    this.currentOperand = computation;
    this.operation = undefined;
    this.previousOperand = "";
  }
```
After updating the `compute` function, we need to we attach a click event listener to `equalsButton` as follows:

```javascript
equalsButton.addEventListener("click", () => {
  calculator.compute();
  calculator.updateDisplay();
});
```
Here's a quick description of what we are doing here. We add a click event listener to the `equalsButton`, once there's a click event on the button, we call the the `compute` function and the `updateDisplay` function as well.

The `compute` function does not take any argument like the previous functions we called, rather we define some variables using the `let` and `const` keyword. Here we are assigning the value of `previousOperand` to `prev` and the value of `currentOperand` to `current`. If the value of `prev` or `current` is not set, then the function will return. "*You can also add an error message here*."

If all the checks are passed, then the functions carry out the mathematical operation depending on the `operation` selected and the set the values.

### Clear Function
This is a simple function, just as the name sounds, it will clear the screen and set all values to `null`. So let's update the clear function as follows:

```javascript
  clear() {
    this.currentOperand = "";
    this.previousOperand = "";
    this.operation = undefined;
  }
```
Next, we will add a click event listener to the `AC` button using the `allClearButton` variable we defined earlier as follows:

```javascript
allClearButton.addEventListener("click", () => {
  calculator.clear();
  calculator.updateDisplay();
});
```
Once this button is clicked, it will call the `clear` function and the function will set every variable to `""` and then update the display.

### Delete Function
We are gradually getting close to the end of all functions. We will work on the delete function. As the name sounds, it will delete values from the screen one after the other when called. Let's update the delete function as follows:

```javascript
  delete() {
    this.currentOperand = this.currentOperand.toString().slice(0, -1);
  }
```
Next, we need to add a click event listener to the `DEL` button in other to call the `delete()` once clicked on:

```javascript
deleteButton.addEventListener("click", () => {
  calculator.delete();
  calculator.updateDisplay();
});
```
This is a very simple function, once `DEL` button is clicked on, it calls the `delete` function which uses the `slice()` method to remove the last value from `currentOperand` string and set the value back to itself.

We need one more function to finish this build and that is the `updateDisplay` function as you must already have noticed.

### Update Display Function
This function updates the display of our calculator and that enables us to see the operations we are carrying out on the screen. Let's get that done by updating the function as follows:

```javascript
  updateDisplay() {
    this.currentOperandTextElement.innerText = this.currentOperand;
    if (this.operation != null) {
      this.previousOperandTextElement.innerText = `${this.previousOperand} ${this.operation}`;
      return;
    }
    this.previousOperandTextElement.innerText = this.previousOperand;
  }
```
This function assigns the value of `currentOperand` to `currentOperandTextElement` variable first and then checks if there's an `operation` to carry out. If it finds any, it assigns' `previousOperandTextElement.innerText` to be the concatination of `previousOperand` and `operation`, eg: `4 *` and then return the value. But if there's no `operation` then it just assigns' `previousOperand` to `previousOperandTextElement.innerText` and wait until there's an operation to do otherwise.

This has been a long build and I hope you followed to the end. This should be how the final calculator engine code should look like:

```javascript
class Calculator {
  constructor(previousOperandTextElement, currentOperandTextElement) {
    this.previousOperandTextElement = previousOperandTextElement;
    this.currentOperandTextElement = currentOperandTextElement;
    this.clear();
  }

  clear() {
    this.currentOperand = "";
    this.previousOperand = "";
    this.operation = undefined;
  }

  delete() {
    this.currentOperand = this.currentOperand.toString().slice(0, -1);
  }

  appendNumber(number) {
    if (number === "." && this.currentOperand.includes(".")) return;
    this.currentOperand = this.currentOperand.toString() + number.toString();
  }

  chooseOperation(operation) {
    if (this.currentOperand === "") return;
    if (this.previousOperand !== "") {
      this.compute();
    }
    this.operation = operation;
    this.previousOperand = this.currentOperand;
    this.currentOperand = "";
  }

  compute() {
    let computation; // This will be the result of our computation
    const prev = parseFloat(this.previousOperand);
    const current = parseFloat(this.currentOperand);
    if (isNaN(prev) || isNaN(current)) return;

    switch (this.operation) {
      case "+":
        computation = prev + current;
        break;
      case "/":
        computation = prev / current;
        break;
      case "*":
        computation = prev * current;
        break;
      case "-":
        computation = prev - current;
        break;
      default:
        return;
    }

    this.currentOperand = computation;
    this.operation = undefined;
    this.previousOperand = "";
  }

  updateDisplay() {
    this.currentOperandTextElement.innerText = this.currentOperand;
    if (this.operation != null) {
      this.previousOperandTextElement.innerText = `${this.previousOperand} ${this.operation}`;
      return;
    }
    this.previousOperandTextElement.innerText = this.previousOperand;
  }
}

const numberButtons = document.querySelectorAll("[data-number]");
const operationButtons = document.querySelectorAll("[data-operation]");
const equalsButton = document.querySelector("[data-equals]");
const deleteButton = document.querySelector("[data-delete]");
const allClearButton = document.querySelector("[data-all-clear]");
const previousOperandTextElement = document.querySelector(
  "[data-previous-operand]"
);
const currentOperandTextElement = document.querySelector(
  "[data-current-operand]"
);

const calculator = new Calculator(
  previousOperandTextElement,
  currentOperandTextElement
);

numberButtons.forEach((button) => {
  button.addEventListener("click", () => {
    calculator.appendNumber(button.innerText);
    calculator.updateDisplay();
  });
});

operationButtons.forEach((button) => {
  button.addEventListener("click", () => {
    calculator.chooseOperation(button.innerText);
    calculator.updateDisplay();
  });
});

equalsButton.addEventListener("click", () => {
  calculator.compute();
  calculator.updateDisplay();
});

allClearButton.addEventListener("click", () => {
  calculator.clear();
  calculator.updateDisplay();
});

deleteButton.addEventListener("click", () => {
  calculator.delete();
  calculator.updateDisplay();
});
```
If you followed the tutorial progressively, you should have a working calculator with a beautify UI just like we have in this image.

![image](https://res.cloudinary.com/dztbnrl7z/image/upload/v1679597954/Screenshot_11_gzs9zf.png)    

## Conclusion
Congratulation! you made it to this stage in this tutorial and I'm sure you learnt a lot in this second part of the *<a href="https://infrequent-elderly-paneer.glitch.me/" target="_blank">Calculator App</a>* build today. You can refer to the part one [here](https://www.techcoach.pro/blog/how-to-build-a-calculator-app-with-html-css-and-javascript-part-1-7)

In conclusion, we have been able to finish the entire Calculator App build working with `HTML`, `CSS` and `Javascript`. We were able to cover topics like `classes`, `functions`, `dom manipulation`, `constructor` and many more. I hope you found this helpful and I look forward to seeing the completed version of your app hosted live so I can test it out.

If you wish to take the build further by adding extra functionalities that I didn't cover in this tutorial, feel free to do that and share the new features with the community and so they all can learn along.

We will be going over the the next build in our series and that is the **Linktree Clone** in the next couple of days.

In this tutorial, we will be focusing on building the calculator engine which will power the UI we have built in part one. We will use vanilla Javascript for the purpose of this tutorial without any framework or library.

How to Build a Calculator App with HTML, CSS, and JavaScript (Part 2)

This is the first part of our **7 Projects Blogging Series** for your portfolio and it's tailored to help beginner and intermidate level developers who are looking to upskill their development career and build out a portfolio while learning.

In this tutorial series, we will be developing different web applications from scratch using technologies like **HTML**, **CSS**, **Javascript**, **<a href="https://tailwindcss.com/" target="_blank">Tailwind</a>**, **<a href="https://vitejs.dev/" target="_blank">Vite</a>**, **<a href="https://react.dev/" target="_blank">React</a>**, **<a href="https://nextjs.org" target="_blank">Next.js</a>**, **<a href="https://firebase.google.com" target="_blank">Firebase</a>** etc. You’re going to learn a lot about these libraries and tools while developing series of real-world web applications.

Let's take a look at the apps we will be developing:
* <a href="https://infrequent-elderly-paneer.glitch.me/" target="_blank">An Online Calculator</a>
* A Cryptocurrency Price Tracker
* Linktree Clone
* Personal Portfolio Website
* Reponsive Landing Page
* Mini Ecommerce Store
* Real-time Chat App

If you wish to take the projects built in this series further by adding new features that I didn't covered in these tutorials, feel free to do that and share it with the community.

### Objectives
At the end of this tutorial, you will:
* Know how to work with css selectors
* Learn about html data attributes
* Be aquinted with classes
* Learn how to work with css grid layout
* Have a beautify UI for your calculator App

### Requirements
To ensure you have a suitable development environment for this project, here a few requirements:
* Basic Knowledge of HTML, CSS and Javascript

## Introduction
In this tutorial build, we will be focusing on the UI of our calculator app and in ***[part 2](https://www.techcoach.pro/blog/how-to-build-a-calculator-app-with-html-css-and-javascript-part-2-8)*** we will get into the functional aspect of our calculator project using javascript. Take a look at the live version of what we will be developing here **<a href="https://infrequent-elderly-paneer.glitch.me/" target="_blank">An Online Calculator</a>**

## Project Setup
To begin, create a new folder called ***`Calculator App`*** in any directory of your choice, then create 3 files inside the newly created 'Calculator App' folder. These file should be ***`index.html`***, ***`style.css`*** and ***`app.js`*** respectively. After you must have finished the file creation, next, open up the ***`Calculator App`*** folder inside your **<a href="https://visualstudio.microsoft.com/" target="_blank">VSCODE</a>** or any other preferred code editor.

After you must have been done with your project setup, you should have a project structure that look like this on Visual Studio:
![image](https://res.cloudinary.com/dztbnrl7z/image/upload/v1679434054/Screenshot_6_hom0a5.png)

## Define HTML Page Structure
Next, after you are done with the folder structure above, we need to define the structure of our html page by defining the default html structure of our page like this:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Calculator App</title>
</head>
<body>

</body>
</html>
```
Next, we need to link our html to the css file and likewise the javascript file that we created earlier. To link our stylesheet, add the below code snippet as the last child of the ***`head`*** tag before the closing tag ***`</head>`***:

```html
<link rel="stylesheet" type="text/css" href="./style.css">
```
Then add this after the closing ***`</body>`*** tag to link our html page to the javascript file.

```html
<script type="text/javascript" src="./app.js"></script>
```

Next, we want to define the operands and number that we will be interracting with on the frontend. In other to do that we will be writing some html code inside the ***`<body>`*** tag as follows:

```html
<div class="calculator-grid">
  <div class="output">
    <div data-previous-operand class="previous-operand"></div>
    <div data-current-operand class="current-operand"></div>
  </div>
  <button data-all-clear class="span-two">AC</button>
  <button data-delete>DEL</button>
  <button data-operation>/</button>
  <button data-number>1</button>
  <button data-number>2</button>
  <button data-number>3</button>
  <button data-operation>*</button>
  <button data-number>4</button>
  <button data-number>5</button>
  <button data-number>6</button>
  <button data-operation>+</button>
  <button data-number>7</button>
  <button data-number>8</button>
  <button data-number>9</button>
  <button data-operation>-</button>
  <button data-number>.</button>
  <button data-number>0</button>
  <button data-equals class="span-two">=</button>
</div>
```

Noticed we are using ***`data-attributes`*** instead of id's on our buttons and divs. This is another way to select elements in the dom other than using id's or classes.

Here's the complete code snippet:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Calculator App</title>
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
  <div class="calculator-grid">
    <div class="output">
      <div data-previous-operand class="previous-operand"></div>
      <div data-current-operand class="current-operand"></div>
    </div>
    <button data-all-clear class="span-two">AC</button>
    <button data-delete>DEL</button>
    <button data-operation>/</button>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operation>*</button>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operation>+</button>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operation>-</button>
    <button data-number>.</button>
    <button data-number>0</button>
    <button data-equals class="span-two">=</button>
  </div>
</body>
<script type="text/javascript" src="./app.js"></script>
</html>
```
This is all we need in our HTML file ***`index.html`*** for this calculator. Next we need to style our calculator to look nice. Here's the current look of our calculator App:
![image](https://res.cloudinary.com/dztbnrl7z/image/upload/v1679434054/Screenshot_7_rsvqpb.png)

## Styling Our App
Now we are done with our html file, we need to add styling to our calculator App to make it look presentable so that our users can make use of it.

We will start by setting ***`font-family`***, ***`box-sizing`*** and ***`font-weight`*** to our web based calculator app, by adding the following CSS code snippet to our ***`style.css`*** file:

```css
*, *::before, *::after {
  box-sizing: border-box;
  font-family: Gothan Rounded, sans-serif;
  font-weight: normal;
}
```
Next, we want to add a background color and remove all the margins and padding around the app container. We will be making use of ***`linear-gradient`*** to set our background color:

```css
body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #00aaff, #00ff6c);
}
```
After adding the background color, we need to style the ***`calculator-grid`*** class container to reflect the look of a calculator. Add this css snippet to ***`style.css`***:

```css
.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}
```
Here is the current look of our calculator app:
![image](https://res.cloudinary.com/dztbnrl7z/image/upload/v1679436140/Screenshot_8_ujpkvn.png)

Next, we need to style the buttons on the calculator to look like the final build. To do that we will make use of ***`.calculator-grid > button`*** selector to select all the buttons in our app and give them a default style.

```css
.calculator-grid > button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid white;
  outline: none;
  background: rgba(255, 255, 255, 0.75);
}
```
We also want to add a hover effect on the buttons to change the background on hover. To do that we will make use of ***`.calculator-grid > button:hover`*** selector:

```css
.calculator-grid > button:hover {
  background: rgba(255, 255, 255, 0.9);
}
```
After completing the styling for the buttons, here is what our App looks like:
![image](https://res.cloudinary.com/dztbnrl7z/image/upload/v1679469214/Screenshot_9_xyga3y.png)

Next, we need to style two buttons separately from the others. I guess you must have figured out those buttons; ***`<button data-all-clear class="span-two">AC</button>`*** and ***`<button data-equals class="span-two">=</button>`***. Notice they have a class ***`span-two`*** on them. Add the following to your css:

```css
.span-two {
  grid-column: span 2;
}
```
Now that we are done with the buttons, we also need to style the output container where the operations will be carried out. Add the follow css snippet to your ***`style.css`*** to style the ***`output`*** class:

```css
.output {
  grid-column: 1 / -1;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
}
```
Next, we need to style the ***`current-operand`*** and ***`previous-operand`*** as well to reflect different font sizes:

```css
.output .previous-operand {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.5rem;
}

.output .current-operand {
  color: white;
  font-size: 2.5rem;
}
```
Here is what the content of your ***`style.css`*** should be. Kindly cross check to ensure you are on track with what I have:

```css
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: Gothan Rounded, sans-serif;
  font-weight: normal;
}

body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #00aaff, #00ff6c);
}

.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.calculator-grid > button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid white;
  outline: none;
  background: rgba(255, 255, 255, 0.75);
}

.calculator-grid > button:hover {
  background: rgba(255, 255, 255, 0.9);
}

.span-two {
  grid-column: span 2;
}

.output {
  grid-column: 1 / -1;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
}

.output .previous-operand {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.5rem;
}

.output .current-operand {
  color: white;
  font-size: 2.5rem;
}
```
After completing all the above processes successfully, here is what the final look of our calculator app should look like and then we are ready to go into the **[part 2](https://www.techcoach.pro/blog/how-to-build-a-calculator-app-with-html-css-and-javascript-part-2-8)** of the development which is the most interesting part and that is the **javascript** section of the build.

![image](https://res.cloudinary.com/dztbnrl7z/image/upload/v1679471010/Screenshot_10_ozezzp.png)

## Conclusion

In conclusion, we have been able to finish the UI of our calculator app, and we covered several topic like **classes**, **data attributes**, **selectors**, **grid** and many others. I'm sure you enjoyed the build for today by working on such a beautify UI for your calculator App ready to be shown to your friends.

Currently there's no interactivity on the calculator app at the moment, because the engine house hasn't been built yet and if you are eager to get that done, then let's get over to **[part 2](https://www.techcoach.pro/blog/how-to-build-a-calculator-app-with-html-css-and-javascript-part-2-8)** of this build, where we will be developing the engine of our application that will aid us to carry out mathematical operations and display the result.

If you wish to make a change to look of your app, feel free to share the final look with us and let's see what you were able to come up with.

In this tutorial build, we will be focusing on the UI of our calculator app and in part 2 we will get into the functional aspect of our calculator project using Javascript.

How to Build a Calculator App with HTML, CSS, and JavaScript (Part 1)

React is a popular JavaScript library used for building dynamic user interfaces. Once you have built your React app, the next step is to deploy it so that others can access it online. There are several ways to deploy a React app, and in this blog post, we'll explore 6 ways to deploy a React app for free.

All the services described in the tutorial are completely free with no hidden cost or credit card requirment until you pass a certain treshold, which is usually a generous free tier based on bandwidth.

## 1. Github Page

GitHub Pages is a free web hosting service that allows you to host static websites directly from a GitHub repository. You can use it to host your React app by creating a new repository, pushing your React code to it, and enabling GitHub Pages in the settings.

Head over to [github](https://github.com) and create a free account if you do not have one yet.

Deploying a React app to GitHub Pages is a straightforward process that can be completed in just a few steps.

### Step 1: Create a new GitHub repository
The first step is to create a new repository on GitHub. Navigate to the GitHub website, log in to your account, and click the "New" button to create a new repository. Give your repository a name and a brief description, choose whether to make it public or private, and click the "Create repository" button.

### Step 2: Push your React app to GitHub
In your terminal, initialize the local directory as a Git repository, commit all the changes, and push it to remote by running the following command in the project root:

```c
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin main
```
Replace your-username with your GitHub username, and your-repo-name with the name of your repository. After running the code above in your terminal, your project will be pushed to github.

### Step 3: Configure your app for GitHub Pages
Next, order to deploy your React app to GitHub Pages, you need to configure your app by installing a new package called ```gh-pages``` in your project using the below command:

```csharp
npm install --save gh-pages
```

In your project's ```package.json```, add the following scripts:
```json
{
  "homepage": "https://your-username.github.io/your-repo-name/",
  "scripts": {
    "deploy": "gh-pages -d build"
  }
}
```
Again, replace ```your-username``` with your GitHub username, and ```your-repo-name``` with the name of your repository.

### Step 4: Deploy your app to GitHub Pages
The final step is to build and deploy your React app to GitHub Pages. To do this, run the following command in your terminal or command prompt to build your app:
```csharp
npm run build
```
And then to publish everything from your build folder to your ```gh-pages``` branch, you'd run this:
```csharp
npm run deploy
```
This command will build your app and deploy it to GitHub Pages. Once the deployment is complete, your app will be accessible at ```https://your-username.github.io/your-repo-name/```.


## 2. Firebase Hosting

[Firebase Hosting](https://firebase.google.com) is a free hosting service offered by Google that allows you to deploy static web content, including React apps. You can use it to deploy your app by creating a new Firebase project, installing the Firebase CLI, and deploying your app with a simple command.

Deploying a React app to Firebase Hosting is a straightforward process that can be completed in just a few steps.

### Step 1: Create a Firebase project
First, you need to create a new Firebase project by going to the [Firebase console](https://console.firebase.google.com) and clicking on the "Add project" button. Follow the on-screen instructions to create your project.

### Step 2: Install Firebase CLI
Next, you need to install the Firebase CLI (Command Line Interface) globally by running the following command in your terminal or command prompt:

```csharp
npm install -g firebase-tools
```

### Step 3: Login to firebase
Next, you need to login to your firebase account from your terminal using this command:

```csharp
firebase login
```
You’ll be prompted with a URL in the terminal that will open in the browser to verify. After giving the necessary permissions, you’ll see a successful login message.

### Step 4: Initialize your Firebase project
Navigate to your project folder in your terminal or command prompt and run the following command:

```csharp
firebase init
```
This command will initialize your Firebase project and prompt you to select the Firebase services you want to use. Choose "Hosting" from the list of available services by clicking on **Space** to navigate and **Enter** to Select.

### Step 5: Configure your app for Firebase Hosting
Follow the on-screen prompts to configure your app for Firebase Hosting. When prompted, enter the build folder for your React app (usually ***`build/`***). This folder contains the production-ready version of your app that Firebase will host.

```csharp
=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
```

### Step 6: Deploy your app to Firebase Hosting
To deploy your React app to Firebase Hosting, run the following command in your terminal or command prompt:

```chsarp
firebase deploy
```
This command will build your app and deploy it to Firebase Hosting. Once the deployment is complete, your app will be accessible at ***`https://your-project-name.firebaseapp.com`***.

That's it! Your React app is now live on Firebase Hosting. You can share the URL with others to showcase your development skills and add it to your portfolio.


## 3. Deploying a React app to Netlify With CLI

Using Netlify’s command line interface (CLI), you can deploy your React application directly from a terminal and can configure CI/CD on your github repository.

You need to create a Netlify account by going to the Netlify website and signing up for a new account. Click [here](https://app.netlify.com/signup) to create your account if you do not have one.

I assume you already a project you want to deploy on netlify

### Step 1: Install netlify
First, you need to install netlify globally using this command:

```csharp
npm install netlify-cli -g
```

### Step 2: Deploy a draft version of app
Now, run the command below to deploy your application. Make sure you are in the project’s working directory before deploying.

```csharp
netlify deploy
```

You might be prompted to grant access to ***netlify cli***, kindly authorize the action. After you grant the permission, you’ll see a successful login message in the terminal.

Follow the prompts and provide the name of the team account which you gave when signing up, then choose whether to link the app’s directory to an existing website or to create and configure a new one. Finish by providing a custom website name and your ```build``` folder as Publish directory.

With this your site will be published and you will be provided with a draft URL.

```csharp
Deploying to draft URL...
✔ Finished hashing 19 files
✔ CDN requesting 10 files
✔ Finished uploading 10 assets
✔ Draft deploy is live!

Logs: https://app.netlify.com/sites/tech-coach-5c60a3/deploys/6b2144c3ab93cabb238eab43a 
Website Draft URL: https://6b2144c3ab93cabb238eab43a--tech-coach-5c60a3.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
netlify deploy --prod
```

### Step 3: Deploy live version of your app
Finally, run the command below to deploy your application to production:

```csharp
netlify deploy --prod
```

It will ask for the ```Publish directory``` one final time. Type **build** and hit Enter. You’ll be provided with two URLs.

```c
Unique Deploy URL: https://6b2144c3ab93cabb238eab43a--tech-coach-5c60a3.netlify.app
Website URL:       https://tech-coach-5c60a3.netlify.app
```

The Unique ```Deploy URL``` points to a specific version of your application while ```Website URL``` is the main URL, which corresponds to the latest version of your application.

That's it! Your React app is now live on Netlify. You can share the URL with others to showcase your development skills and add it to your portfolio.


## 4. Deploy to Surge

Unlike other CLI's, [Surge](https://surge.sh/) is easy to deploy with less configuration and allows you to create your surge account right from your terminal, isn't that interesting?

### Step 1: Install Surge
First, you need to install Surge globally on your system by running the following command in your terminal or command prompt:

```c
npm install -g surge
```
This will install Surge globally on your system.

### Step 2: Build your React app
Next, you need to build your React app by running the following command in your terminal or command prompt:

```c
npm run build
```
This command will create a production-ready version of your app in the **build/** folder.

### Step 3: Deploy your app to Surge
To deploy your React app to Surge, navigate to the **build/** folder in your terminal or command prompt and run the following command:

```c
surge
```
This command will prompt you to enter your email and password to authenticate your account with Surge. Once you have logged in, Surge will ask you to provide a name for your app and deploy it.

Once the deployment is complete, you can view your deployed app by visiting the URL provided by Surge. Your app should be live and accessible at this URL.


## 5. Deploy to AWS Amplify using CLI

In this tutorial you'll learn how to deploy a [ReactJS](https://react.dev/) app to AWS using [Amplify](https://docs.amplify.aws/) Hosting.

### Step 1: Install the Amplify CLI
If you haven't already, install and configure the latest version of the Amplify CLI, then you need to install the Amplify CLI globally on your system. You can do this by running the following command in your terminal or command prompt:

```c
npm install -g @aws-amplify/cli
```
After installing cli, you need to configure the newly installed Amplify CLI by running this command:

```c
amplify configure
```
This command will prompt you to configure various settings such as your AWS Region, username, accessKeyId etc. Kindly follow the prompt accordingly to configure your CLI.

### Step 2: Initialize your Amplify project
Next, initialize a new Amplify project inside your project directory using this command:

```c
amplify init
```
This command will initialize your Amplify project and prompt you to configure various settings such as your project name, default editor, and AWS region etc.

```c
? Enter a name for the project reactamplified
The following configuration will be applied:

?Project information
| Name:  reactamplified
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

...

? Please choose the profile you want to use default
```

### Step 3: Add hosting to your Amplify project
After initializing your project, you need to add hosting to your Amplify project by running the following command:

```c
amplify add hosting
```
This command will prompt you to select the hosting service you want to use. Choose the "Hosting with Amplify Console" option and follow the on-screen prompts to configure your hosting settings.

### Step 4: Deploy your app to Amplify
To deploy your React app to Amplify, run the following command in your terminal or command prompt:

```c
amplify publish
```
This command will build your app and deploy it to Amplify. The deployment process may take a few minutes to complete. Congratulations, your app has now been successfully deployed! The URL for the app should be displayed in your terminal.


## 6. Deploy to Vercel

Deploying a React app to [Vercel](https://vercel.com/) is a straightforward process that can be completed in just a few steps

### Step 1: Create a Vercel account
First, you need to create a [Vercel account](https://vercel.com/signup) if you don't already have one. Go to the Vercel website and follow the on-screen instructions to create your account.

### Step 2: Connect your Git repository
Once you have created your Vercel account, navigate to the Vercel dashboard and click the "Import Project" button. Follow the on-screen prompts to connect your Git repository where your React app is stored.

### Step 3: Configure build settings
Next, you need to configure the build settings for your app. Vercel should automatically detect your build settings, but you can also configure them manually. The build command should be set to ```npm run build```, and the output directory should be set to ```build/```.

### Step 4: Deploy your app to Vercel
To deploy your React app to Vercel, click the "Deploy" button on the Vercel dashboard. This will start the deployment process, which may take a few minutes to complete.

### Step 5: View your deployed app
Once the deployment is complete, you can view your deployed app by clicking the URL provided by Vercel. Your app should be live and accessible at this URL.

That's it! Your React app is now live on Vercel, and you can share the URL with others to showcase your development skills and add it to your portfolio.


## Other platform worth checking out

There are other platforms you might also want to checkout that are suitable for hosting a react app and support a free tier as well.

* [GitLab Pages](https://docs.gitlab.com)
* [Render](https://render.com)

You can add your list to the comment section if there is any you think we can add to this list.


## Conclusion

In conclusion, deploying a React app can be a daunting task for beginners, but it is an essential step in making your app available to the public. There are various free hosting platforms available, each with their own strengths and weaknesses.

While Netlify offers advanced features such as continuous deployment and serverless functions, AWS Amplify offers a wide range of services for hosting and managing your app and Vercel offers lightning-fast deployment and performance optimization, likewise do other platforms mentioned in this post.

Ultimately, the choice of hosting platform will depend on your individual needs and preferences. Whichever platform you choose, the deployment process can be made simpler by using the platform's CLI or GUI tools.

By deploying your React app to a hosting platform, you can showcase your development skills, share your app with others, and add it to your portfolio. So go ahead and deploy your app today, and take the first step towards becoming a successful React developer!



React is a popular JavaScript library used for building dynamic user interfaces. Once you have built your React app, the next step is to deploy it so that others can access it online. There are several ways to deploy a React app, and in this blog post, we'll explore 6 ways to deploy a React app for free.

Top 6 Free Hosting Platforms for Deploying Your React App

In recent years, many aspiring developers have taken the self-taught route to learn programming skills. While this approach has its advantages, it also comes with a set of unique challenges. In this article, we will explore four common mistakes that self-taught developers tend to make, and how you can avoid them. Whether you are just starting out or have been self-teaching for a while, this article will help you identify potential pitfalls and develop a more effective learning strategy.

### MISTAKE ONE
#### -Wanting To Learn Every Concept in A Language.

When I got started, there was no one to guide me, so I figured out what to learn by reading books and going through resources online, but the challenge was I didn't know how much knowledge I needed to start practicing. So I was stuck learning and learning, trying to be proficient in all. This kept me in an unending and frustrating learning journey.

You do not need to learn all there is in a programing language to get started practicing. In my case it was JavaScript, which even up until today I'm still learning.

So I built up confidence and started practicing with what's I've learnt so far and here I am today. Once you are comfortable with the language you are learning, you can start practicing and continue your learning as you practice because there's no end to learning, especially in tech.

### MISTAKE TWO
#### -Learning too Many Languages.

This got me really bad because at my earliest stage of learning programming, I was stuck learning **C++, Java, JavaScript, C#** trying to have many tools inside my box in other to appear relevant to employees and among other developers, which in turn was a frustrating experience. I was mastering none, in conjunction with the fact that I was trying to learn all there's there in.

Seeing I did not just waste time, but I wasn't making any progress I had to cut away every other and got ahead with JavaScript and start my development journey with it.

Pick one technology and get an in-depth knowledge of it, avoid learning 3 or 4 languages at the same time, this will kill your time and keep you stagnant. You can at the long run learn something new technologies. As for now stick to one and be good at it to an extent.

### MISTAKE THREE
#### -Not Believing in Yourself

This was a challenge for me, because I had one who coached me, so I had this inferiority complex and fear in me that I wasn't good enough to call myself a developer in front of others and also apply for jobs. Nevertheless I overcame this challenge by starting out to building web apps seeing I've acquired enough knowledge to help me do that. So this built my confidence seeing the projects I worked on myself.

Never believe you're not good enough to get started or be hired, if you've done your background work well learning all that is need to be learnt, then you are good. Kill fear and don't let it kill you.

### MISTAKE FOUR
#### -Not Having A Portfolio / Bad UI Design For Your Projects.

Majority of beginners' self thought developers like myself do not have a portfolio of work they've done because they are stuck learning and lack the confidence to build and showcase their work, because they are self taught and feels like they are doing something wrong somewhere. You are doing nothing wrong, if you are learning with the right resources.

When you've learnt a technology and you feel comfortable with it, build out some cool projects using what you've learnt and be proud of what you've done. Not only that, ensure your project UI is amazing because the first thing majority will look at is the interface of your project before considering the backbone.

If the backbone of your project is 100% sophisticated and your the UI looks shabby, then people majority will not want to have anything to do with you. Always ensure your projects UI look pretty fine.

I love good UI, likewise do everyone.

### Conclusion

Learning to code is an exciting journey, but it's important to avoid common mistakes that many self-taught developers make. By understanding the fundamentals, mastering your art, believing in yourself, and owning a professional portfolio, you can develop a more effective learning strategy and become a successful developer. Remember, learning to code is a continuous process, and it takes time and effort to achieve mastery.

Subscribe to [techcoach.pro](https://www.techcoach.pro/pricing) for mentorship today!

In recent years, many aspiring developers have taken the self-taught route to learn programming skills. While this approach has its advantages, it also comes with a set of unique challenges.

Tech Blog

Deploy Vite App to Github Pages

How to Build a Calculator App with HTML, CSS, and JavaScript (Part 2)

How to Build a Calculator App with HTML, CSS, and JavaScript (Part 1)

Top 6 Free Hosting Platforms for Deploying Your React App

4 Mistakes Self-taught Devs Make And How I Avoided Them