├── README.md ├── src ├── index.js ├── styles.css └── App.js ├── package.json └── public └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # react-todo-list-app 2 | Created with CodeSandbox 3 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | ReactDOM.render(, rootElement); 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "yaplacaklar-listesi-uygulamas", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.12.0", 9 | "react-dom": "16.12.0", 10 | "react-scripts": "3.0.1" 11 | }, 12 | "devDependencies": { 13 | "typescript": "3.3.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | width: 400px; 3 | margin: 0 auto; 4 | font-family: sans-serif; 5 | text-align: center; 6 | } 7 | 8 | .ekleme_formu input, 9 | .ekleme_formu button, 10 | .temizle { 11 | padding: 5px; 12 | border: 0; 13 | outline: 0; 14 | font-size: 16px; 15 | } 16 | 17 | .ekleme_formu input { 18 | background: #e1e1e2; 19 | } 20 | 21 | .ekleme_formu button, 22 | .temizle { 23 | background: #333; 24 | color: white; 25 | } 26 | 27 | .liste { 28 | padding: 20px 0; 29 | } 30 | 31 | .liste > div { 32 | padding: 8px 0; 33 | border-bottom: 1px solid #ccc; 34 | } 35 | 36 | .liste > div:last-child { 37 | border-bottom: 0; 38 | } 39 | 40 | .yapildi { 41 | text-decoration: line-through; 42 | } 43 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./styles.css"; 3 | 4 | const INITIAL_STATE = [ 5 | { id: 1, baslik: "Alisveris Yap", tamamlandi: false }, 6 | { id: 2, baslik: "Fatura ode", tamamlandi: true } 7 | ]; 8 | 9 | export default function App() { 10 | const [liste, setListe] = useState(INITIAL_STATE); 11 | const [yeniBaslik, setYeniBaslik] = useState(""); 12 | 13 | const addNew = (title) => { 14 | setListe([...liste, { id: Date.now(), baslik: title, tamamlandi: false }]); 15 | setYeniBaslik(""); 16 | }; 17 | const markCompleted = (id) => { 18 | setListe( 19 | liste.map((el) => 20 | el.id === id ? { ...el, tamamlandi: !el.tamamlandi } : el 21 | ) 22 | ); 23 | }; 24 | 25 | const clearCompleted = () => { 26 | setListe(liste.filter((item) => !item.tamamlandi)); 27 | 28 | }; 29 | return ( 30 |
31 |

Yapılacaklar Listesi

32 |
33 | setYeniBaslik(e.target.value)} 36 | placeholer="listeye ekle" 37 | /> 38 | 45 |
46 |
47 | {liste.map((item, index) => ( 48 |
{ 51 | markCompleted(item.id); 52 | }} 53 | className={item.tamamlandi ? "yapildi" : ""} 54 | > 55 | {item.baslik} 56 |
57 | ))} 58 |
59 | 62 |
63 | ); 64 | } 65 | --------------------------------------------------------------------------------