React Project

JuanDaGue · Aug 23, 2024 · bd8a95b · bd8a95b
1 parent c739483
commit bd8a95b
Show file tree

Hide file tree

Showing 15 changed files with 169 additions and 24 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,38 @@
 import logo from './platzi.webp';
+import {CreateTodoButton} from './CreateTodoButton';
+import {TodoItem }from './TodoItem';
+import {TodoList }from './TodoList';
+import {TodoCont }from './TodoCont';
+import{TodoSearch}from './TodoSearch';
 import './App.css';
+import React from 'react';
 
+const defaultTodos =[
+  { text: 'Start the React course' , conplete: false },
+  { text:'Finish the app ToDo', conplete: false },
+  { text: 'Deploy the project in github pages', conplete: false}
+]
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edita el archivo <code>src/App.js</code> y guarda para recargar.
-        </p>
-        <a
-          className="App-link"
-          href="https://platzi.com/reactjs"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <React.Fragment>
+      <TodoCont cont={1}/>
+      <TodoSearch/>
+      <TodoList>
+          {defaultTodos.map(todo =>(
+            <TodoItem 
+            key={todo.text} 
+            text = {todo.text}
+            completd= {todo.conplete}
+            />
+          ))}
+      </TodoList>
+      < CreateTodoButton/>
+    </React.Fragment>
+
   );
 }
 
+
+
+
 export default App;
diff --git a/src/CreateTodoButton.css b/src/CreateTodoButton.css
@@ -0,0 +1,17 @@
+button {
+    display: center;
+    padding: 10px 20px;
+    font-size: 1em;
+    color: #fff;
+    background-color: #cc9873;
+    border: none;
+    border-radius: 50%;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+button:hover {
+    background-color: #a89766;
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
+    transform: rotate(180deg);
+}
diff --git a/src/CreateTodoButton.js b/src/CreateTodoButton.js
@@ -0,0 +1,7 @@
+import "./CreateTodoButton.css"
+function CreateTodoButton(){
+    return(
+        <button> + </button>
+    )
+}
+export { CreateTodoButton };
diff --git a/src/Img/Backgroun1.png b/src/Img/Backgroun1.png
diff --git a/src/Img/Backgroun2.png b/src/Img/Backgroun2.png
diff --git a/src/TodoCont.css b/src/TodoCont.css
@@ -0,0 +1,11 @@
+h1 {
+    font-size: 2em;
+        text-align: center;
+        color: #906e5c;
+        transition: color 0.3s ease;
+    }
+
+    h1:hover {
+        color: #c59056;
+    }
+
diff --git a/src/TodoCont.js b/src/TodoCont.js
@@ -0,0 +1,10 @@
+import "./TodoCont.css"
+function TodoCont(props){
+    return (
+      <h1>
+        I complete the {props.cont} task, I gather all the components for the render
+      </h1>
+    )
+  }
+
+  export { TodoCont };
diff --git a/src/TodoItem.css b/src/TodoItem.css
@@ -0,0 +1,25 @@
+li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease;
+    width: 100%;
+}
+
+li:hover {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+span {
+    font-weight: bold;
+    color: #caa275;
+}
+
+p {
+    margin: 0;
+    color: #555;
+}
diff --git a/src/TodoItem.js b/src/TodoItem.js
@@ -0,0 +1,11 @@
+import "./TodoItem.css"
+function TodoItem(props){
+    return(
+    <li>
+      <span> V {props.completed}</span>
+      <p>{props.text}</p>
+      <span>X </span>
+    </li>
+    );
+}
+export { TodoItem};
diff --git a/src/TodoList.css b/src/TodoList.css
@@ -0,0 +1,7 @@
+        ul {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            padding: 0;
+            margin: 20px 0;
+        }
diff --git a/src/TodoList.js b/src/TodoList.js
@@ -0,0 +1,10 @@
+import "./TodoList.css"
+function TodoList (props){
+    return (
+      <ul>
+        {props.children} 
+      </ul>
+    )
+  }
+
+  export { TodoList };
diff --git a/src/TodoSearch.css b/src/TodoSearch.css
@@ -0,0 +1,15 @@
+input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease;
+    text-align: center;
+}
+
+input[type="text"]:focus {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    outline: none;
+}
diff --git a/src/TodoSearch.js b/src/TodoSearch.js
@@ -0,0 +1,8 @@
+import "./TodoSearch.css"
+function TodoSearch(){
+    return(
+      <input type="text" placeholder="Cut the onios"></input>
+    )
+  }
+
+  export { TodoSearch};
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,23 @@
 body {
+  font-family: Arial, sans-serif;
+  background-image: url('./Img/Backgroun1.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+.container {
+  max-width: 400px;
+  width: 100%;
+  background-color: #fff;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
 }
diff --git a/src/index.js b/src/index.js
@@ -5,3 +5,4 @@ import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(<App />);
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,3 +5,4 @@ import App from './App';

		const root = ReactDOM.createRoot(document.getElementById('root'));
		root.render(<App />);