کد تمرین داده شده

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body{
            font-size: 25px;
            font-family: sans-serif;
            text-align: center;
        }
    style>
head>
<body>
    <div id="root">div>
    
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js">script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js">script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js">script>
    <script type="text/babel">
        function NewTodo(){
            return <input type="text" placeholder="Type your Task"/>
        }
        function CheckBox(){
            return <input type="checkbox" id="task1"/>
        }
        function Label() {
            return <label htmlFor="task1">Task1label>
        }
        function Task(){
            return <div className="task">
                    <CheckBox/>
                    <Label/>
                div>
        }
        function TodoList(){
            return(
                <form>
                    <h4>What do you want to do today?h4>
                    {/* Above, I did not convert the h4 to a component, because the title must be used each time in a specific way and there is no need to make it dynamic.*/}
                    <NewTodo/>
                    <Task/>
                form>
            )
        }
        const root = ReactDOM.createRoot(document.getElementById('root'))
        root.render(<TodoList/>)
 
    script>
body>
html>