Expression Editor

Expression Editor FacePoke

Setup Local Environment

Terminal

$ git clone git@hf.co:spaces/fffiloni/expression-editor

Cloning into 'expression-editor'...

remote: Enumerating objects: 127, done.

remote: Counting objects: 100% (127/127), done.

remote: Compressing objects: 100% (85/85), done.

Receiving objects: 100% (127/127), 1.45 MiB | 2.34 MiB/s, done.

Resolving deltas: 100% (45/45), done.

$ cd expression-editor

$ npm install

added 452 packages in 12.456s

$ npm run dev

> expression-editor@1.0.0 dev

> vite

vite v2.9.12 dev server running at:

> Local: http://localhost:3000/

> Network: use `--host` to expose

$ _

Next Steps

Open your browser to http://localhost:3000
Start editing the expression editor files
Changes will automatically reload in the browser

Editor Preview

ExpressionEditor.jsx

utils.js

styles.css

// Expression Editor Component

import

React

from

'react'

;

import

{ evaluate }

from

'./utils'

;

import

'./styles.css'

;

const

ExpressionEditor =

()

{

const

[expression, setExpression] =

React

useState

(

);

const

[result, setResult] =

React

useState

(

null

);

const

handleEvaluate =

()

{

try

{

const

evalResult =

evaluate

(expression);

setResult(evalResult);

}

catch

(error)

{

setResult(

'Error: '

+ error.message);

}

};

return

(

<div className=

"expression-editor"

<textarea

value={expression}

onChange={(e) => setExpression(e.target.value)}

placeholder=

"Enter your expression here..."

<button onClick={handleEvaluate}>Evaluate</button>

{result && <div className="result">{result}</div>}

</div>

);

};

export

default

ExpressionEditor;

Project Structure

expression-editor/

node_modules/

public/

src/

App.jsx

ExpressionEditor.jsx

utils.js

styles.css

package.json

README.md

Running the Expression Editor Locally

Step 1: Clone Repository

Run the following command in your terminal to clone the repository:

git clone git@hf.co:spaces/fffiloni/expression-editor

Step 2: Install Dependencies

Navigate to the project directory and install dependencies:

cd expression-editor
npm install

Step 3: Run Development Server

Start the development server:

npm run dev