Added Complete README.md

README.md

@@ -1,34 +1,73 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Frontend Mentor - Calculator app solution
 
-## Getting Started
+This is a solution to the [Calculator app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/calculator-app-9lteq5N29). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
 
-First, run the development server:
+## Table of contents
 
-```bash
-npm run dev
-# or
-yarn dev
-```
+- [Overview](#overview)
+  - [The challenge](#the-challenge)
+  - [Screenshot](#screenshot)
+  - [Links](#links)
+- [My process](#my-process)
+  - [Built with](#built-with)
+  - [What I learned](#what-i-learned)
+  - [Continued development](#continued-development)
+- [Author](#author)
+
+## Overview
+
+### The challenge
+
+Users should be able to:
+
+- See the size of the elements adjust based on their device's screen size
+- Perform mathematical operations like addition, subtraction, multiplication, and division
+- Adjust the color theme based on their preference
+
+### Screenshot
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+![calculator](./idea/calc.jpg)
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+### Links
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+- Solution URL: [Add solution URL here](https://your-solution-url.com)
+- Live Site URL: [Add live site URL here](https://your-live-site-url.com)
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+## My Process
 
-## Learn More
+### Built with
 
-To learn more about Next.js, take a look at the following resources:
+- Flexbox
+- CSS variables
+- CSS Grid
+- [React](https://reactjs.org/) - JS library
+- [Next.js](https://nextjs.org/) - React framework
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### What I learned
+
+- Splitting number with comma `122,212,654`
+
+```js
+"124539493".replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+```
+
+- Resize the display panel when expression get long
+
+```js
+useLayoutEffect(() => {
+  displayRef.current.style.height = "auto";
+  displayRef.current.style.height = displayRef.current.scrollHeight + "px";
+}, [expression]);
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+### Continued development
 
-## Deploy on Vercel
+1. Add keyboard listeners
+2. Keyboard shortcuts to toggle theme
+3. More Arithmetic Operations
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Author
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- Website - [dulranga.ml](https://www.dulranga.ml)
+- Frontend Mentor - [@dulranga](https://www.frontendmentor.io/profile/dulranga)
+- Twitter - [@dulrangaD](https://www.twitter.com/dulrangaD)

pages/index.js

@@ -22,7 +22,6 @@ export default function Home() {
   }, [expression]);
   useEffect(() => {
     document.addEventListener("keydown", (e) => {
-      console.log(e.key);
       switch (e.key) {
         case "Enter":
           submitInput();
@@ -144,7 +143,6 @@ export default function Home() {
         <div className={styles.display}>
           <textarea
             ref={displayRef}
-            type="text"
             value={expression.display}
             rows={1}
             onChange={forceChange}