{"id":18208976,"url":"https://github.com/willie-conway/calculator-app","last_synced_at":"2025-10-25T19:44:40.571Z","repository":{"id":259655602,"uuid":"879136164","full_name":"Willie-Conway/Calculator-App","owner":"Willie-Conway","description":" A simple yet powerful 📱calculator app built with ❄️React! Perform basic operations like ➕addition, ➖subtraction, ✖️multiplication, and ➗division with ease. Perfect for honing your front-end development skills! 💻✨I have also added a ☀️Light /🌙Dark Mode toggle button to the original.","archived":false,"fork":false,"pushed_at":"2025-03-16T19:08:14.000Z","size":692,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T08:48:24.400Z","etag":null,"topics":["browser-compatibility","code-documentation","component-reusability","css-styling","debugging","deployment","event-handling","form-handling","functional-components","github","hooks","input-validation","javascript","mathematical-operations","react","reset-functionality","responsive-design","state-management","user-experience","version-control"],"latest_commit_sha":null,"homepage":"https://willie-conway.github.io/Calculator-App/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Willie-Conway.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-27T04:44:40.000Z","updated_at":"2025-03-16T19:09:34.000Z","dependencies_parsed_at":"2024-11-09T10:18:19.490Z","dependency_job_id":"154d4fee-5ee2-4b14-8b98-c7079bba4c75","html_url":"https://github.com/Willie-Conway/Calculator-App","commit_stats":{"total_commits":35,"total_committers":2,"mean_commits":17.5,"dds":0.08571428571428574,"last_synced_commit":"e110c93aa2a220997d43801c325a676e3aabde2b"},"previous_names":["willie-conway/calculator-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Willie-Conway%2FCalculator-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Willie-Conway%2FCalculator-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Willie-Conway%2FCalculator-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Willie-Conway%2FCalculator-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Willie-Conway","download_url":"https://codeload.github.com/Willie-Conway/Calculator-App/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248198842,"owners_count":21063626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser-compatibility","code-documentation","component-reusability","css-styling","debugging","deployment","event-handling","form-handling","functional-components","github","hooks","input-validation","javascript","mathematical-operations","react","reset-functionality","responsive-design","state-management","user-experience","version-control"],"created_at":"2024-11-03T14:03:35.251Z","updated_at":"2025-10-05T10:17:26.351Z","avatar_url":"https://github.com/Willie-Conway.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Calculator App \n\n\u003cp float=\"left\"\u003e\n    \u003cimg src=\"https://images.credly.com/size/340x340/images/e91ed0b0-842b-417f-8d2f-b07535febdda/image.png\" width=\"300\" /\u003e\n    \u003cimg src=\"https://github.com/Willie-Conway/Calculator-App/blob/main/Images/Calculater.png\" width=\"300\" /\u003e\n\u003c/p\u003e\n\nWelcome to the **Calculator App**! This project was developed as part of the **Meta Front-End Developer Professional Certificate** program. The purpose of this graded assessment was to solidify my understanding of key `React` concepts and to create a functional application that performs basic mathematical operations. \n\n## 📖Table of Contents\n\n- [Introduction](#introduction)\n- [Features](#features)\n- [Tech Stack](#tech-stack)\n- [Getting Started](#getting-started)\n- [Code Overview](#code-overview)\n- [Styling](#styling)\n- [Screenshots](#screenshots)\n- [License](#license)\n\n## Introduction\n\nThe **Calculator App** is a simple web application built using `React`. It allows users to perform ➕addition, ➖subtraction, ✖️multiplication, and ➗division on numbers entered via a single input field. This project helped me apply my knowledge of ❄️`React components`, 🪝`hooks`, and 🚦`event handling`. I've added a **☀️Light /🌙Dark Mode**  feature to the original `calculater-app`. \n\n\u003cp float=\"left\"\u003e\n    \u003cimg src=\"https://github.com/Willie-Conway/Calculator-App/blob/main/Images/localhost_3000_%20(4).png\" width=\"300\" /\u003e\n    \u003cimg src=\"https://github.com/Willie-Conway/Calculator-App/blob/main/Images/localhost_3000_%20(3).png\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n\n## Features ✨\n\n- **`Basic Operations`:** Perform addition, subtraction, multiplication, and division.\n- **`User Input`:** Accept numeric input from the user.\n- **`Dynamic Result` Display:** Update and display the total based on user input and selected operation.\n- **`Reset Functionality`:** Reset the input field to zero.\n\n## ⚙️Tech Stack \n\n- **❄️`React`:** The main library used for building the user interface. React components were created to manage state and handle user interactions.\n- **📜`JavaScript`:** The programming language used for writing the app's logic, including mathematical operations and state management.\n- **📃`HTML`:** The markup language used to structure the application’s UI components.\n- **🎨`CSS`:** Used for styling the application, providing a clean and user-friendly interface.\n\n### How Technologies Were Used\n\n- **`React`:** The app is structured as a functional component using hooks like `useState` for managing the current result and `useRef` for accessing the input field. This approach allows for a dynamic and `responsive UI`.\n- **`JavaScript`:** Core mathematical logic is implemented using simple functions that modify the state based on user input and selected operations.\n- **`HTML` \u0026 `CSS`:** The layout is constructed using standard HTML elements, while `CSS` is applied to ensure a visually appealing and accessible user interface.\n\n\n## Getting Started 🚀\n\nTo run the `Calculator App` locally, follow these steps:\n\n1. **Clone the repository:**\n   ```bash\n   git clone https://github.com/Willie-Conway/calculator-app.git\n   cd calc-app\n   ```\n2. **Install dependencies:**\n   ```bash\n   npm install\n   ```\n3. **Start the application:**\n   ```bash\n   npm start\n   ```\n4. **Open your browser and navigate to `http://localhost:3000`.**\n\n\n## Code Overview 📝\n**Here is the main component of the application, `App.js`:**\n\n```javascript\nimport React, { useState, useRef } from \"react\"; // Importing React and necessary hooks\nimport \"./App.css\"; // Importing CSS for styling\n\nfunction App() {\n  const inputRef = useRef(null); // Creating a reference for the input field\n  const [result, setResult] = useState(0); // Initializing state to keep track of the result\n\n  // Function to handle addition\n  function plus(e) {\n    e.preventDefault(); // Preventing default form submission behavior\n    setResult((result) =\u003e result + Number(inputRef.current.value)); // Updating the result by adding the input value\n  }\n\n  // Function to handle subtraction\n  function minus(e) {\n    e.preventDefault(); // Preventing default form submission behavior\n    setResult((result) =\u003e result - Number(inputRef.current.value)); // Updating the result by subtracting the input value\n  }\n\n  // Function to handle multiplication\n  function times(e) {\n    e.preventDefault(); // Preventing default form submission behavior\n    setResult((result) =\u003e result * Number(inputRef.current.value)); // Updating the result by multiplying with the input value\n  }\n\n  // Function to handle division\n  function divide(e) {\n    e.preventDefault(); // Preventing default form submission behavior\n    setResult((result) =\u003e result / Number(inputRef.current.value)); // Updating the result by dividing by the input value\n  }\n\n  // Function to reset the input field\n  function resetInput(e) {\n    e.preventDefault(); // Preventing default form submission behavior\n    inputRef.current.value = 0; // Setting the input field value to 0\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eCalculator\u003c/h1\u003e\n      \u003cinput ref={inputRef} type=\"number\" defaultValue=\"0\" /\u003e {/* Input field for user input */}\n      \u003cdiv\u003e\n        \u003cbutton onClick={plus}\u003e+\u003c/button\u003e {/* Button for addition */}\n        \u003cbutton onClick={minus}\u003e-\u003c/button\u003e {/* Button for subtraction */}\n        \u003cbutton onClick={times}\u003e×\u003c/button\u003e {/* Button for multiplication */}\n        \u003cbutton onClick={divide}\u003e÷\u003c/button\u003e {/* Button for division */}\n      \u003c/div\u003e\n      \u003ch2\u003eTotal: {result}\u003c/h2\u003e {/* Displaying the current total */}\n      \u003cbutton onClick={resetInput}\u003eReset\u003c/button\u003e {/* Button to reset the input field */}\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n\n```\n## Styling 🎨\n**The application uses simple `CSS` for styling. Here’s a snippet from `App.css`:**\n```css\n* {\n  font-family: sans-serif; /* Setting a sans-serif font for the entire application */\n}\ninput, button {\n  font-size: 20px; /* Setting font size for input and buttons */\n  padding: 10px; /* Adding padding for better spacing */\n  border-radius: 5px; /* Rounding the corners of input and buttons */\n}\ninput {\n  display: block; /* Making the input field a block element */\n  margin-bottom: 20px; /* Adding space below the input field */\n}\nbutton {\n  border: 1px solid gray; /* Adding a gray border to buttons */\n  background: whitesmoke; /* Setting a light background color */\n  margin-right: 5px; /* Adding space between buttons */\n}\nbutton:nth-last-child(2), button:nth-last-child(1) {\n  background: tomato; /* Changing the background color of the last two buttons */\n  color: white; /* Setting text color to white */\n}\n\n```\n\n## 🌙Dark Mode Feature\n```javascript\nimport { useState, useRef, useEffect } from \"react\"; \nimport \"./App.css\";\n\nfunction App() { \n  // Reference for input and result display\n  const inputRef = useRef(null); \n  const resultRef = useRef(null); \n  \n  // State to hold the current result of calculations\n  const [result, setResult] = useState(0); \n  \n  // State to manage dark mode toggle\n  const [isDarkMode, setIsDarkMode] = useState(false); \n\n  // Effect to update the body class based on dark mode state\n  useEffect(() =\u003e {\n    document.body.className = isDarkMode ? 'dark-mode' : 'light-mode';\n  }, [isDarkMode]);\n\n  // Function to handle addition\n  function plus(e) { \n    e.preventDefault(); \n    setResult((result) =\u003e result + Number(inputRef.current.value)); \n  }; \n\n  // Function to handle subtraction\n  function minus(e) { \n    e.preventDefault(); \n    setResult((result) =\u003e result - Number(inputRef.current.value)); \n  };\n\n  // Function to handle multiplication\n  function times(e) { \n    e.preventDefault(); \n    setResult((result) =\u003e result * Number(inputRef.current.value)); \n  }; \n\n  // Function to handle division\n  function divide(e) { \n    e.preventDefault(); \n    setResult((result) =\u003e result / Number(inputRef.current.value)); \n  };\n\n  // Function to reset the input field\n  function resetInput(e) { \n    e.preventDefault(); \n    inputRef.current.value = 0; \n  }; \n\n  // Function to reset the result and input field\n  function resetResult(e) { \n    e.preventDefault(); \n    setResult(0); \n    inputRef.current.value = 0; \n  }; \n\n  return ( \n    \u003cdiv className=\"App\"\u003e \n      \u003cdiv\u003e \n        \u003ch1\u003eSimplest Working Calculator\u003c/h1\u003e \n      \u003c/div\u003e \n      \u003cform\u003e \n        \u003cp ref={resultRef}\u003e{result}\u003c/p\u003e\n        \u003cinput\n          pattern=\"[0-9]\" \n          ref={inputRef} \n          type=\"number\" \n          placeholder=\"Type a number\" \n        /\u003e \n        \u003cbutton onClick={plus}\u003eadd\u003c/button\u003e\n        \u003cbutton onClick={minus}\u003esubtract\u003c/button\u003e\n        \u003cbutton onClick={times}\u003emultiply\u003c/button\u003e\n        \u003cbutton onClick={divide}\u003edivide\u003c/button\u003e\n        \u003cbutton onClick={resetInput}\u003ereset input\u003c/button\u003e\n        \u003cbutton onClick={resetResult} className=\"reset\"\u003ereset result\u003c/button\u003e\n        \u003cbutton type=\"button\" onClick={() =\u003e setIsDarkMode(!isDarkMode)} className=\"light-mode\"\u003e\n          {isDarkMode ? 'Light Mode' : 'Dark Mode'}\n        \u003c/button\u003e\n      \u003c/form\u003e \n    \u003c/div\u003e \n  ); \n} \n\nexport default App;\n\n```\n```css\n/* App.css */\n\nhtml, body {\n    height: 100%; /* Ensure the body takes up full height */\n    margin: 0; /* Remove default margin */\n    transition: background-color 0.3s ease; /* Smooth transition for background color */\n  }\n  \n  .App {\n    padding: 20px;\n    min-height: 100vh; /* Ensure the App container takes at least full viewport height */\n  }\n  \n  /* Light Mode Styles */\n  body.light-mode {\n    background-color: white; /* Light background */\n    color: black; /* Dark text */\n  }\n  \n  /* Dark Mode Styles */\n  body.dark-mode {\n    background-color: black; /* Dark background */\n    color: white; /* Light text */\n  }\n  \n  input,\n  button {\n    font-size: 20px;\n    padding: 10px;\n    border-radius: 5px;\n  }\n  \n  input {\n    display: block;\n    margin-bottom: 20px;\n    background-color: white; /* Light input background for light mode */\n    color: black; /* Dark text for input */\n    border: 1px solid gray; /* Border for input */\n  }\n  \n  /* Dark mode styles for input */\n  body.dark-mode input {\n    background-color: #333; /* Dark background for input in dark mode */\n    color: white; /* Light text for input in dark mode */\n    border: 1px solid #555; /* Darker border for contrast */\n  }\n  \n  button {\n    border: 1px solid gray;\n    margin-right: 5px;\n  }\n  \n  /* Styles for reset result button */\n  button.reset {\n    background: tomato; /* Tomato color for reset button */\n    color: white; /* White text */\n  }\n  \n  /* Styles for light mode toggle button */\n  button.light-mode {\n    background: tomato; /* Tomato color for light mode button */\n    color: white; /* White text */\n  }\n  \n  /* Dark mode styles for reset and toggle buttons */\n  body.dark-mode button.reset,\n  body.dark-mode button.light-mode {\n    background: tomato; /* Keep tomato color in dark mode */\n    color: white; /* Keep white text in dark mode */\n  }\n  \n  /* Dark mode styles for other buttons */\n  body.dark-mode button {\n    background: #444; /* Dark button background for dark mode */\n    color: white; /* Light text for buttons in dark mode */\n  }\n  \n  /* Optional: Hover effects for buttons */\n  button:hover {\n    opacity: 0.8; /* Slightly transparent on hover */\n  }\n  \n```\n\n## Screenshots 📸\n\n![Calculater App](https://github.com/Willie-Conway/Calculator-App/blob/main/Images/localhost_3000_%20(3).png)\n\n# ☀️Light Mode Feature\n\n## Screenshots 📸\n![Calculater App](https://github.com/Willie-Conway/Calculator-App/blob/main/Images/localhost_3000_%20(4).png)\n\n## License 📄\nThis project is licensed under the [MIT License](LICENSE). Feel free to modify and use the code for your own projects!\n\n🙏Thank you for checking out my 📱Calculator App! If you have any questions or 📥feedback, feel free to reach out. 😊\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillie-conway%2Fcalculator-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillie-conway%2Fcalculator-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillie-conway%2Fcalculator-app/lists"}