Data

Tools

Indexes

Applications

Experiments

Awesome

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

https://github.com/yashi-singh-1/spreadsheet

This project creates a simple spreadsheet application that evaluates formulas and performs calculations using JavaScript. Users can input formulas to compute values and use built-in functions like sum, average, and median in a grid-based interface.
https://github.com/yashi-singh-1/spreadsheet

css css3 freecodecamp freecodecamp-challenge freecodecamp-frontend freecodecamp-project html html-css-javascript html-css-javascript-project html5 javascript javascript-project vanilla-javascript web-development

Last synced: 2 months ago
JSON representation

This project creates a simple spreadsheet application that evaluates formulas and performs calculations using JavaScript. Users can input formulas to compute values and use built-in functions like sum, average, and median in a grid-based interface.

Awesome Lists containing this project

README 

        
# Spreadsheet - FreeCodeCamp Solution



This is a solution to the [Learn Functional Programming by Building a Spreadsheet challenge on FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-functional-programming-by-building-a-spreadsheet/step-1). This challenge involves using functional programming techniques in JavaScript to create a simple spreadsheet application that can evaluate formulas and perform various computations.



## Table of contents



- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)



## Overview



### The challenge



Users should be able to:



- Input mathematical and functional formulas into a grid-based spreadsheet interface.

- Formulas can include basic arithmetic operations (`+`, `-`, `*`, `/`) and custom spreadsheet functions.

- The spreadsheet supports a variety of functions such as `sum`, `average`, `median`, `even`, `someeven`, `everyeven`, and more.

- Users can reference other cells and ranges in their formulas.

- Formulas are evaluated dynamically as inputs change.



### Links



- Live Demo: [Live](https://codepen.io/Yashi-Singh/pen/BagdWvq)



## My process



### Built with



- HTML5 and CSS Grid for layout

- JavaScript (ES6) for functional programming and dynamic evaluations

- Custom functions and formula parsing



### What I learned



Working on this project enhanced my understanding of:



- **Functional Programming**: Applying higher-order functions and recursion to evaluate and manipulate spreadsheet formulas.

- **Spreadsheet Logic**: Implementing a system to handle cell references, ranges, and custom functions.

- **DOM Manipulation**: Creating and updating a grid-based UI dynamically based on user input and formula evaluations.



Code snippets I’m proud of:



```javascript

const infixToFunction = {

  "+": (x, y) => x + y,

  "-": (x, y) => x - y,

  "*": (x, y) => x * y,

  "/": (x, y) => x / y

};



const infixEval = (str, regex) =>

  str.replace(regex, (_match, arg1, operator, arg2) =>

    infixToFunction[operator](parseFloat(arg1), parseFloat(arg2))

  );

```



```javascript

const spreadsheetFunctions = {

  "": (arg) => arg,

  sum: (nums) => nums.reduce((acc, el) => acc + el, 0),

  average: (nums) => nums.reduce((acc, el) => acc + el, 0) / nums.length,

  median: (nums) => {

    const sorted = nums.slice().sort((a, b) => a - b);

    const length = sorted.length;

    const middle = length / 2 - 1;

    return length % 2 === 0

      ? (sorted[middle] + sorted[middle + 1]) / 2

      : sorted[Math.ceil(middle)];

  }

};

```



```javascript

const evalFormula = (x, cells) => {

  const idToText = (id) => cells.find((cell) => cell.id === id).value;

  const rangeRegex = /([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi;

  const rangeFromString = (num1, num2) => range(parseInt(num1), parseInt(num2));

  const elemValue = (num) => (character) => idToText(character + num);

  const addCharacters = (character1) => (character2) => (num) =>

    charRange(character1, character2).map(elemValue(num));

  const rangeExpanded = x.replace(

    rangeRegex,

    (_match, char1, num1, char2, num2) =>

      rangeFromString(num1, num2).map(addCharacters(char1)(char2))

  );

  const cellRegex = /[A-J][1-9][0-9]?/gi;

  const cellExpanded = rangeExpanded.replace(cellRegex, (match) =>

    idToText(match.toUpperCase())

  );

  const functionExpanded = applyFunction(cellExpanded);

  return functionExpanded === x

    ? functionExpanded

    : evalFormula(functionExpanded, cells);

};

```



### Continued development



In future projects, I aim to:



- **Enhance User Interface**: Improve the grid layout and add more interactive features.

- **Add More Functions**: Implement additional spreadsheet functions and operations.

- **Improve Error Handling**: Handle invalid formulas and cell references more gracefully.

- **Performance Optimization**: Refactor the formula evaluation logic for efficiency with large datasets.



### Useful resources



- [MDN Web Docs - Functional Programming](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#functional_programming) - Insights into functional programming concepts.

- [JavaScript.info - Functional Programming](https://javascript.info/functional-programming) - Detailed explanations of functional programming techniques in JavaScript.

- [CSS-Tricks - CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - Comprehensive guide to using CSS Grid for layout.



## Author



- LinkedIn - [Yashi Singh](https://www.linkedin.com/in/yashi-singh-b4143a246)



## Acknowledgments



A special thank you to FreeCodeCamp for providing this engaging challenge. It was an excellent opportunity to delve into functional programming and dynamic formula evaluation. Thanks to the community for their support and feedback, and to [MDN Web Docs](https://developer.mozilla.org) for their extensive documentation and tutorials.