Build a Simple Calculator in React + JavaScript Foundations

Explore how JavaScript enables client-side interactivity in the browser with HTML and CSS, and contrast with server-side PHP through form validation, character counting, and a tic tac toe game.

Explore JavaScript placement by placing functions in the head to load before the body, and trigger calculations with an on click event to convert age to dog years.

Create and use an external JavaScript file named dog age.js, and call it from the HTML head with a script src attribute. External scripts boost maintainability and loading speed.

Explore JavaScript data output methods by comparing document.write and window.alert. See a simple HTML example adding five and six, displaying 13 in the browser.

Use innerHTML to output data in an HTML element and display calculation results. Access the target element with getElementById and update its content, as in six plus three equals nine.

Master JavaScript commenting techniques to document code, explain function purpose, and control execution with single-line and multi-line comments, demonstrated by innerHTML examples in a browser.

Recognize that JavaScript constants are fixed values. See how five and six sum to 11 and display in a paragraph with the id math, illustrating numbers and strings.

Explore how JavaScript variables act as named containers that store numbers or text, using unique identifiers like x, y, and z to compute sums and output results via getElementById.

Understand how the equal sign acts as the assignment operator in JavaScript, assigning the right value to left, and how numbers and strings combine, like appending 30 to a string.

Explore JavaScript arithmetic operations in the React + JavaScript foundations course, using constants and variables to add, subtract, and multiply numbers, and display results in the browser.

Explore division and basic arithmetic in JavaScript by declaring DX as 100 divided by 50, using X++ to increment and H-- to decrement, and displaying results in the browser.

Explore how JavaScript operator precedence determines calculation order, from brackets to exponents, division, multiplication, addition, and subtraction, illustrated with a browser-tested example yielding 750.

Explore how JavaScript variables hold data types, including numbers, strings, arrays, and objects, through examples like age, last name, cars, and a person with a first name.

Explore JavaScript objects by modeling a car with properties like type, model, color, and output values on a web page using dot notation (car.type) and car.model.

Output multiple object property values in a single line to form a sentence from a person object with first name, last name, age, and eye colour.

Learn how JavaScript strings store text, use single or double quotes, and embed quotes inside strings, then display string variables across lines in a browser with line breaks.

Determine the length of a string using the built-in length property for a text variable containing 26 letters. Output the length by setting inner HTML and preview to see 26.

Master using the backslash escape to display quotes inside strings, preventing output errors and correctly rendering special characters like players in JavaScript.

Generate a random number using JavaScript Math.random, which outputs between 0 and 1. Output the result with getElementById and preview in the browser to see different numbers on refresh easily.

Apply the math min and math max functions to identify the lowest and highest values in a list, then test the results in the browser.

Learn to round numbers in JavaScript with math round function, turning 15.4 to 15 and 15.6 to 16. Use math floor to round down and math ceil to round up.

Store multiple values in a single variable with JavaScript arrays, using a six-item fruits array; access elements by zero-based index and use the length property to show the total.

Explore how JavaScript outputs array values using the toString method and the join method to customize separators, such as an asterisk, and preview results in the browser.

Learn how to manipulate arrays in JavaScript using pop, shift, and push, removing the last element such as mango, removing the first element, and adding cherry to the end.

Modify and delete array elements by index in JavaScript, such as changing the first element from Apple to Kiwi and removing another entry, then preview in the browser.

Learn how the splice method adds multiple items to an array, specifies where to insert, and controls removals, demonstrated by adding lemon and banana after orange at index two.

Sort the cars array alphabetically using the sort method from A to Z, then reverse the order with the reverse method.

Join two arrays with the concat method to create a combined array from girls and boys, then output the values and preview them in the browser.

Explore JavaScript conditional statements using if, else if, and else to map a score out of 100 to letter grades, including handling scores above 100 as errors.

Explore JavaScript comparison operators through a practical script that uses a variable value of six and outputs true or false with equal to and not equal comparisons in the browser.

Learn how JavaScript booleans test truthiness, where numbers and strings are true, zero is false, and results are shown in the browser using getElementById.

Demonstrate a for loop that outputs values from 0 to 10 on separate lines, incrementing by one, with the initial count and max values adjustable in the browser.

Explore how the for-in loop iterates through the properties of a person object with f name, l name, and age to output data such as John Smith and 30.

Learn how the while loop runs a code block while a condition is met, outputting values from zero as long as the value does not exceed 20.

Understand how the do while loop executes once before evaluating the condition. It uses a button-triggered example with a counter starting at zero and incrementing to ten.

Explore how break and continue statements control loops in JavaScript, stopping at three or skipping that iteration to reveal how for loops progress from zero to nine.

Learn how JavaScript functions act as reusable blocks of code that run tasks when called, using parameters, arguments, and return values to produce results like eight times two is 16.

Explore JavaScript events in an HTML document, including click, mouse over, and mouse out, and learn how to display the date and time using the date function and inner HTML.

Create a simple JavaScript project that changes the page background color on refresh. Use an eight-item hex color array and a random selector in HTML.

Build a JavaScript and CSS photo gallery with top thumbnails and a main preview that changes on hover, featuring hover borders and basic styling for borders, background, and text.

Create a centered container with a header and a preview image area, then add a thumbnails section that changes the main preview on mouse over for five images.

Gain the foundational skills needed for this course: basic JavaScript (arrow functions and destructuring), HTML and CSS knowledge, and a strong desire to learn React.

React is a JavaScript library for building user interfaces, focused on the view layer with a virtual DOM for fast rendering, and it uses libraries for state, routing, and authentication.

Build a very basic calculator as a single-file React app, demonstrating two plus three equals five and two times three plus five equals 11, with minimal CSS.

Learn to build a minimal React page: create an index.html, include React and ReactDOM, and render a hello world element into a root div.

Discover the essential tools to start reactor development: install Node.js and a free, cross-platform code editor such as Visual Studio Code.

Explore using CodePen to build a calculator with live render, transitioning from a text editor to HTML, CSS, and JS panels, and enabling Babel for JavaScript preprocessing.

JSX lets you write HTML inside JavaScript, with Babel translating it for browser compatibility and enabling clean, safer embedding of HTML within React components using curly braces for expressions.

Turn the simple React example into a functional component to build your first calculator, returning JSX and exploring function versus arrow styles while applying capitalized component names.

Explore why functional components matter in React by framing a calculator as a master component with reusable button components and display areas, illustrated with a familiar web page analogy.

Explore how to pass props from a parent to child components in React, using arrow or traditional functions, and render dynamic values like name and age with curly braces.

Explore component-based design in React by building a root app and reusable child components, and learn how props enable one-way data flow and callbacks enable child-to-parent communication.

Build a basic calculator in React by creating a calculator component and calc button, passing values via props, styling with CSS grid, operator class names, and a display.

Wire calculator buttons in React by using onClick events, capitalizing the second word (onClick), and passing callback props to handle number and operator clicks and parse parameters.

Learn how to pass button click values from child to parent in React using callback functions and props, so the calculator handles the value in the parent.

Learn to implement React state with the useState hook to track the calculator display, initialize it with zero, read and update it, and trigger efficient re-renders as numbers are pressed.

Use the react useState hook to store a json object with current and total, concatenating digits into calc.current and applying isInitial to clear the leading zero on first press.

Implement calculation logic for operator buttons with a doCalculation function, wire handleOperator to perform plus, minus, multiply, and divide using parseInt on the total, updating the display and clear behavior.

Debug a React calculator by inspecting state with console and debugger, and fix the pre-op property and operator handling. Remove code duplication by using the existing operator handler for equals.

Learn to build a basic calculator in React by creating components and applying component design, using props, callback functions, and the use state hook; consider decimals, memory, and percentages.