DEV Community

Cover image for Week 6 - Sum Two Numbers App
Mohamed Khaled Yousef
Mohamed Khaled Yousef

Posted on

3 1

Week 6 - Sum Two Numbers App

Welcome to Week 6 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .


Sum Two Numbers App

Sum Two Numbers app
This week we created a Sum Two Numbers app. The user enter two numbers in a form and result of the summation is shown in react.

To create a SumTwoNum component; We have to :

  • Create two states that hold the value of each number.
  • Create a state that holds the summation value with an initial value equal to zero.
  • Create a calculate function that calculates and updates the summation.
  • Create two inputs and handle events for each number.
  • onClick submit button, calculate method is fired and do summation.

Code

import React, {useState} from 'react';

const SumTwoNum = () => {
    const [number1, setNumber1] = useState();
    const [number2, setNumber2] = useState();
    const [summation, setSummation] = useState(0);

    function calculate() {
        setSummation(number1 + number2);
    }

    return (

       <div>
            <h2>Sum Two Numbers</h2>
            <input
                placeholder="First Number"
                type="number"
                value={number1}
                onChange={(ev) => setNumber1(+ev.target.value)}
            />
            <input
                placeholder="Second Number"
                type="number"
                value={number2}
                onChange={(ev) => setNumber2(+ev.target.value)}
            />
            <br />
            <button onClick={calculate}>Sum Two Numbers</button>
            <p>Summation  : {summation || "0"}</p> 
        </div>
    );
}

export default SumTwoNum;

Enter fullscreen mode Exit fullscreen mode

Conclusion

Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview
Source Code

Billboard image

Imagine monitoring that's actually built for developers

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay