تمرین تبدیل کد HTML به React Components

پرسیده شده
فعالیت 927 روز پیش
دیده شده 413 بار
0

سلام خسته نباشید 

متاسفانه من زمان ارسال پاسخ آزمون تبدیل کد HTML به React Components رو از دست دادم 

دیگه بعد از اتمام زمان امکان ارسال نیست

من اینجا پاسخ رو ارسال میکنم در صورت امکان یه بررسی بفرمایید ممنون میشم

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            max-width: 300px;
            display: flex;
            flex-direction: column;
            margin: 0 auto;
        }

        #todo-app {
            margin: 1em;
            text-align: center;
        }

        #todo-list,
        #todo-stats {
            margin: 1em auto;
            text-align: left;
            width: 450px;
        }

        #todo-list {
            list-style: none;
            padding: 0;
        }

        #todo-stats {
            color: #777;
        }

        #new-todo {
            border-radius: 5px;
        }

        .todo-input {
            display: block;
            font-family: Helvetica, sans-serif;
            font-size: 20px;
            line-height: normal;
            margin: 5px auto 0;
            padding: 6px;
            width: 420px;
        }

        .todo-label {
            color: #444;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script  type="text/babel">

        
        //----- todo app -----//
        function TodoLabel() {
            return <label className="todo-label" htmlFor="new-todo">What do you want to do today?</label>
        }

        function TodoInput() {
            return <input type="text" id="new-todo" className="todo-input" placeholder="type your tasks"/>

        }
        function TodoApp() {
            return <div id="todo-app">
                        <TodoLabel/>
                        <TodoInput/>
                    </div>
        }
    
        //----- todo item -----//
        function TodoItemCheckbox() {
            return <input type="checkbox"/>
        }

        function TodoItemTaskLable(params) {
            return  <span className="todo-content">task 1</span>
        }
        function TodoItem() {
            return <div className="todo-item">
                            <TodoItemCheckbox/>
                            <TodoItemTaskLable/>
                    </div>
        }

        //----- todo list -----//
        function TodoList() {
            return <div className="todo-list">
                       <TodoItem/> 
                    </div>
        }
    

        function Container() {
            return <div className="container">
                        <TodoApp/>
                        <TodoList/>
                    </div>
        }

        ReactDOM.render(<Container/> , document.getElementById('root'))
    </script>  
    </div>
</body>

</html>
فایل پیوست

mahad plus
mahad plus

17 شهریور 00

1
حذف شده

سلام

برای شروع کار مشکلی نداره

فایل پیوست

مجتبی سوری

توسط

مجتبی سوری

21 شهریور 00