Implementation of ToDoList Project

src/Components/Cardcontainer.js

@@ -73,7 +73,7 @@ const Cardcontainer = ({features}) => {
           <div className="stat">
             <div>
               <p>
-                Developer<span>X</span>
+                Developer<span>{project.dev}</span>
               </p>
             </div>
             <div>
@@ -98,7 +98,7 @@ const Cardcontainer = ({features}) => {
             <Link to={`/readmore/${project.id}`} className="button btn">
               Read More
             </Link>
-            <a href="#" className="button2 btn">
+            <a href={project.github} className="button2 btn">
               Source Code
             </a>
           </div>

src/Components/Delicious/Delicious.js

@@ -4,7 +4,7 @@ import homeIcon from '../../img/homeicon.png';
 import Card1 from "../../img/card1.jpg";
 import Card2 from "../../img/card2.jpg";
 import Card3 from "../../img/card3.jpg";
-import Card4 from "../../img/card4.jpg";
+import Card4 from "../../img/card4.png";
 import Card5 from "../../img/card5.jpg";
 import Card6 from "../../img/card6.jpg";
 import {ThemeContext} from "../../App";

src/Components/Readmore.js

@@ -42,7 +42,7 @@ const Readmore = () => {
                 <div className='dtex'>{feature.text}</div>
             </div>
             <div className="developer">
-                Developer-X
+                Developer-{feature.dev}
             </div>
         </div>
     )

src/Components/TopContainer.js

@@ -8,7 +8,7 @@ import women from "../img/women.jpg";
 import Card1 from "./projects/card1.jpg";
 import Card2 from "./projects/card2.jpg";
 import Card3 from "./projects/card3.jpg";
-import Card4 from "./projects/card4.jpg";
+import Card4 from "./projects/card4.png";
 import Card5 from "./projects/card5.jpg";
 import Card6 from "./projects/card6.jpg";
 import Card7 from "./projects/card7.png";

src/Components/Trending/Trending.js

@@ -4,7 +4,7 @@ import homeIcon from '../../img/homeicon.png';
 import Card1 from "../../img/card1.jpg";
 import Card2 from "../../img/card2.jpg";
 import Card3 from "../../img/card3.jpg";
-import Card4 from "../../img/card4.jpg";
+import Card4 from "../../img/card4.png";
 import Card5 from "../../img/card5.jpg";
 import Card6 from "../../img/card6.jpg";
 import './Trending.css';

src/Components/cart/cart.js

@@ -5,7 +5,7 @@ import carticon from './12.png';
 import Card1 from "../../img/card1.jpg";
 import Card2 from "../../img/card2.jpg";
 import Card3 from "../../img/card3.jpg";
-import Card4 from "../../img/card4.jpg";
+import Card4 from "../../img/card4.png";
 import Card5 from "../../img/card5.jpg";
 import Card6 from "../../img/card6.jpg";
 

src/Projects/ToDoList/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

src/Projects/ToDoList/App.jsx

@@ -0,0 +1,13 @@
+import ToDoList from './ToDoList';
+import './App.css'
+
+function App() {
+
+  return (
+    <>
+      <ToDoList/>
+    </>
+  )
+}
+
+export default App

src/Projects/ToDoList/ToDoList.jsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+
+function ToDoList(){
+
+    const [tasks, setTasks] = useState([]);
+    const [newTask, setNewTask] = useState("");
+
+    function handleInputChange(event){
+        setNewTask(event.target.value);
+
+    };
+
+    function addTask(){
+        if(newTask.trim() != ""){
+            setTasks(t => [...t, newTask]);
+            setNewTask("");
+        }
+    }
+
+    function deleteTask(index){
+        const updateTasks = tasks.filter((_, i) => i != index);
+        setTasks(updateTasks);
+    }
+
+    function moveTaskUp(index){
+        if(index > 0){
+            const updatedTasks = [...tasks];
+            [updatedTasks[index], updatedTasks[index - 1]] = 
+            [updatedTasks[index - 1], updatedTasks[index]];
+            setTasks(updatedTasks);
+        }
+    }
+
+    function moveTaskDown(index){
+        if(index < tasks.length - 1){
+            const updatedTasks = [...tasks];
+            [updatedTasks[index], updatedTasks[index + 1]] = 
+            [updatedTasks[index + 1], updatedTasks[index]];
+            setTasks(updatedTasks);
+        }
+    }
+
+    return(<>
+    <div className="to-do-list">
+        <h2> TO - DO - LIST</h2>
+
+        <div>
+            <input type="text"
+             placeholder="Enter a task..."
+             value={newTask}
+             onChange={handleInputChange}
+             />
+             <button className="add-button" onClick={addTask}>ADD</button>
+        </div>
+
+        <ol>
+            {tasks.map((task, index) => {
+                <li key={index}>
+                    <span className="text">{task}</span>
+                    <button className="delete-button" onClick={() => deleteTask(index)}>Delete</button>
+                    <button className="move-button" onClick={() => moveTaskUp(index)}>Up👆</button>
+                    <button className="move-button" onClick={() => moveTaskDown(index)}>Down👇</button>
+                </li>
+            })}
+        </ol>
+    </div>
+    </>);
+};
+
+export default ToDoList

src/Projects/ToDoList/index.css

@@ -0,0 +1,69 @@
+body{
+    background-color: rgb(43, 37, 37);
+}
+.to-do-list{
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    margin-top: 10%;
+}
+h2{
+    font-size: 4rem;
+}
+button{
+    font-size: 1.7rem;
+    color: aliceblue;
+    padding: 10px 20px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.5s ease;
+
+}
+.add-button{
+    background-color: rgb(11, 201, 37);
+}
+.add-button:hover{
+    background-color: rgb(10, 151, 38)
+}
+.delete-button{
+    background-color: rgb(230, 14, 14);
+}
+.delete-button:hover{
+    background-color: rgb(137, 8, 8)
+}
+.move-button{
+    background-color: rgb(2, 124, 254);
+}
+.move-button:hover{
+    background-color: rgb(6, 6, 165);
+}
+
+input[type="text"]{
+    font-size: 1.6rem;
+    padding: 10px;
+}
+ol{
+    padding: 0;
+}
+li{
+    font-size: 2rem;
+    padding: 15px;
+    background-color: antiquewhite;
+    font-weight: bold;
+    border-radius:5px;
+    display: flex;
+    align-items: center;
+
+}
+.text{
+    flex: 1;
+    /* flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0%; */
+}
+
+.delete-button, .move-button{
+   padding: 8px 12px;
+   margin-left: 10px;
+   font-size: 1.3rem;
+}

src/Projects/ToDoList/main.jsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)