From 02764aa038876b5ff44c4544311ae0213dae13ee Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Wed, 14 Jan 2026 14:27:28 +0100 Subject: [PATCH 01/19] add GlobalStyle with basic resets + adding TodoInput to App.jsx --- package.json | 3 +- src/App.jsx | 8 +++-- src/components/TodoInput.jsx | 58 ++++++++++++++++++++++++++++++++++++ src/index.css | 3 -- src/main.jsx | 10 +++---- src/styles/GlobalStyle.js | 15 ++++++++++ 6 files changed, 85 insertions(+), 12 deletions(-) create mode 100644 src/components/TodoInput.jsx create mode 100644 src/styles/GlobalStyle.js diff --git a/package.json b/package.json index caf62893..dc928c50 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "styled-components": "^6.3.6" }, "devDependencies": { "@eslint/js": "^9.21.0", diff --git a/src/App.jsx b/src/App.jsx index 54275400..64818cd6 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,7 @@ export const App = () => { return ( -

React Boilerplate

- ) -} + <> + + + ); +}; diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx new file mode 100644 index 00000000..68f0241e --- /dev/null +++ b/src/components/TodoInput.jsx @@ -0,0 +1,58 @@ +import React from "react"; +import styled from "styled-components"; + +export const TodoInput = () => { + return ( + + +
What ToDo ToDay
+ + + + + + + ); +}; + +const Container = styled.section` + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; +`; + +const HeaderContainer = styled.header` + display: flex; + justify-content: space-between; + align-items: center; + background: #333; + color: #fff; + padding: 20px; +`; + +const Header = styled.h1` + font-size: 30px; +`; + +const Button = styled.button` + width: 50px; + height: 50px; + font-size: 40px; + background: none; + border: none; + color: #fff; +`; + +const InputWrapper = styled.section` + padding: 20px; + background: #f7efe6; +`; + +const Input = styled.input` + width: 100%; + padding: 10px 15px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 8px; +`; \ No newline at end of file diff --git a/src/index.css b/src/index.css index f7c0aef5..e69de29b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; -} diff --git a/src/main.jsx b/src/main.jsx index 1b8ffe9b..e16dbf04 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,12 +1,12 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' +import React from "react"; +import ReactDOM from "react-dom/client"; +import { GlobalStyle } from "./styles/GlobalStyle.js"; +import { App } from "./App.jsx"; -import { App } from './App.jsx' - -import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( + ) diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js new file mode 100644 index 00000000..5985a23b --- /dev/null +++ b/src/styles/GlobalStyle.js @@ -0,0 +1,15 @@ +import { createGlobalStyle } from "styled-components"; + +export const GlobalStyle = createGlobalStyle` + body { + background: green; + } + + button { + cursor: pointer; + } + + * { + box-sizing: border-box; + } +`; \ No newline at end of file From a94240e118d3c660c3fcf3bf29763a4cc63f3be3 Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Wed, 14 Jan 2026 15:04:10 +0100 Subject: [PATCH 02/19] fixing bug in GlobalStyle --- package.json | 3 ++- src/App.jsx | 2 ++ src/components/TodoInput.jsx | 17 ++++++++++------- src/stores/todoStore.js | 18 ++++++++++++++++++ src/styles/GlobalStyle.js | 29 +++++++++++++++++++++-------- src/styles/colors.js | 9 +++++++++ 6 files changed, 62 insertions(+), 16 deletions(-) create mode 100644 src/stores/todoStore.js create mode 100644 src/styles/colors.js diff --git a/package.json b/package.json index dc928c50..62a5a956 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "dependencies": { "react": "^19.0.0", "react-dom": "^19.0.0", - "styled-components": "^6.3.6" + "styled-components": "^6.3.6", + "zustand": "^5.0.10" }, "devDependencies": { "@eslint/js": "^9.21.0", diff --git a/src/App.jsx b/src/App.jsx index 64818cd6..de1e695e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,5 @@ +import { TodoInput } from "./components/TodoInput"; + export const App = () => { return ( <> diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx index 68f0241e..b444de5d 100644 --- a/src/components/TodoInput.jsx +++ b/src/components/TodoInput.jsx @@ -1,15 +1,17 @@ import React from "react"; import styled from "styled-components"; +import { colors } from "../styles/colors"; export const TodoInput = () => { return ( -
What ToDo ToDay
- +
ToDo
+ + ); @@ -24,15 +26,15 @@ const Container = styled.section` const HeaderContainer = styled.header` display: flex; - justify-content: space-between; + justify-content: center; align-items: center; - background: #333; - color: #fff; + background: ${colors.header}; padding: 20px; `; const Header = styled.h1` font-size: 30px; + color: ${colors.textLight} `; const Button = styled.button` @@ -40,17 +42,18 @@ const Button = styled.button` height: 50px; font-size: 40px; background: none; - border: none; color: #fff; `; const InputWrapper = styled.section` + display: flex; + justify-content: center; padding: 20px; background: #f7efe6; `; const Input = styled.input` - width: 100%; + width: 85%; padding: 10px 15px; font-size: 16px; border: 1px solid #ccc; diff --git a/src/stores/todoStore.js b/src/stores/todoStore.js new file mode 100644 index 00000000..f95b3daf --- /dev/null +++ b/src/stores/todoStore.js @@ -0,0 +1,18 @@ +import { create } from "zustand"; + +export const useTodoStore = create(() => ({ + +})); + +//DATA// +// Lista med tasks +// om en task är klar eller oklar + +//Funktioner// + +//addTask text +//toggleTask id +//removeTask id +//taskCount räknar tasks. + +//ZUSTAND = sanningen, härifrån läser komponenterna info \ No newline at end of file diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js index 5985a23b..854da5f6 100644 --- a/src/styles/GlobalStyle.js +++ b/src/styles/GlobalStyle.js @@ -1,15 +1,28 @@ import { createGlobalStyle } from "styled-components"; +import { colors } from "./colors"; export const GlobalStyle = createGlobalStyle` - body { - background: green; - } - button { - cursor: pointer; - } +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html, body, #root { + width: 100%; + height: 100%; +} + +body { + background-color: ${colors.background}; + color: ${colors.textMuted}; + font-family: Verdana, Geneva, Tahoma, sans-serif; + min-height: 100vh; +} - * { - box-sizing: border-box; +button { + font-family: inherit; + cursor: pointer; } `; \ No newline at end of file diff --git a/src/styles/colors.js b/src/styles/colors.js new file mode 100644 index 00000000..5f93a636 --- /dev/null +++ b/src/styles/colors.js @@ -0,0 +1,9 @@ +export const colors = { + background: "#F6EDE3", + header: "#FFA97A", + cardPrimary: "#F58C8C", + cardSecondary: "#F4A3C2", + cardTertiary: "#B58DBF", + textLight: "#FFFFFF", + textMuted: "#BDBDBD", +} \ No newline at end of file From b5d8bffa2c4207ef1cde224233fea8210e1a7fe7 Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Wed, 14 Jan 2026 15:15:35 +0100 Subject: [PATCH 03/19] small fixes with margin/paddning --- src/components/TodoInput.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx index b444de5d..1cc2f04d 100644 --- a/src/components/TodoInput.jsx +++ b/src/components/TodoInput.jsx @@ -29,7 +29,7 @@ const HeaderContainer = styled.header` justify-content: center; align-items: center; background: ${colors.header}; - padding: 20px; + `; const Header = styled.h1` From de7c8e0abef126a571114b03b5c35982ea973119 Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Wed, 14 Jan 2026 15:34:24 +0100 Subject: [PATCH 04/19] changing so the font-family is the same in header and input --- src/components/TodoInput.jsx | 1 + src/styles/GlobalStyle.js | 11 ++++++++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx index 1cc2f04d..36a735d0 100644 --- a/src/components/TodoInput.jsx +++ b/src/components/TodoInput.jsx @@ -58,4 +58,5 @@ const Input = styled.input` font-size: 16px; border: 1px solid #ccc; border-radius: 8px; + font-family: inherit; `; \ No newline at end of file diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js index 854da5f6..73b54544 100644 --- a/src/styles/GlobalStyle.js +++ b/src/styles/GlobalStyle.js @@ -9,15 +9,20 @@ export const GlobalStyle = createGlobalStyle` padding: 0; } -html, body, #root { +html, body { + width: 100%; + margin: 0; + padding: 0; +} + +#root { width: 100%; - height: 100%; } body { background-color: ${colors.background}; color: ${colors.textMuted}; - font-family: Verdana, Geneva, Tahoma, sans-serif; + font-family: 'Courier New', Courier, monospace; min-height: 100vh; } From f5865f73d5ac051babe0082ecdffc7843503b67d Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Wed, 14 Jan 2026 16:52:59 +0100 Subject: [PATCH 05/19] adding logic to TodoStore, that adds, removes and toggles todos --- src/components/TodoInput.jsx | 8 +++++++- src/stores/todoStore.js | 22 +++++++--------------- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx index 36a735d0..f6c4f72b 100644 --- a/src/components/TodoInput.jsx +++ b/src/components/TodoInput.jsx @@ -1,13 +1,19 @@ import React from "react"; import styled from "styled-components"; import { colors } from "../styles/colors"; +import { todoStore } from "../stores/todoStore"; export const TodoInput = () => { + const { todos, addTodo } = useTodoStore() + + const handleAddTodo = () => { + addTodo("My new todo"); + }; + return (
ToDo
- diff --git a/src/stores/todoStore.js b/src/stores/todoStore.js index f95b3daf..3871a520 100644 --- a/src/stores/todoStore.js +++ b/src/stores/todoStore.js @@ -1,18 +1,10 @@ import { create } from "zustand"; -export const useTodoStore = create(() => ({ - +export const useTodoStore = create((set) => ({ + todos: [], + addTodo: (text) => set((state) => ({ todos: [...state.todos, { text, completed: false, id: Date.now() }] })), + removeTodo: (id) => set((state) => ({ todos: state.todos.filter(todo => todo.id !== id) })), + toggleTodo: (id) => set((state) => ({ + todos: state.todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo) + })) })); - -//DATA// -// Lista med tasks -// om en task är klar eller oklar - -//Funktioner// - -//addTask text -//toggleTask id -//removeTask id -//taskCount räknar tasks. - -//ZUSTAND = sanningen, härifrån läser komponenterna info \ No newline at end of file From 5f9c5c0176064da644529b1c18346a9ca6d3bf46 Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Thu, 15 Jan 2026 15:59:18 +0100 Subject: [PATCH 06/19] adding UseEffect to remove a margin om body, eventhough I got margin 0 in GlobalStyle --- src/App.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/App.jsx b/src/App.jsx index de1e695e..bc262f9a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,9 @@ import { TodoInput } from "./components/TodoInput"; +import { useEffect } from "react"; export const App = () => { + useEffect(() => { document.body.style.margin = '0'; }, []); //This is for removing the margin top in the body, eventhough I have margin 0 in GlobalStyle. + return ( <> From 9f3c08f8ba821e642b185ae47fe8f2317c817249 Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Thu, 15 Jan 2026 15:59:51 +0100 Subject: [PATCH 07/19] adding function to TodoInput --- src/components/TodoInput.jsx | 112 ++++++++++++++++++++++++++++------- 1 file changed, 91 insertions(+), 21 deletions(-) diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx index f6c4f72b..ed4abe5d 100644 --- a/src/components/TodoInput.jsx +++ b/src/components/TodoInput.jsx @@ -1,65 +1,135 @@ -import React from "react"; +import React, { useState } from "react"; import styled from "styled-components"; import { colors } from "../styles/colors"; -import { todoStore } from "../stores/todoStore"; +import { useTodoStore } from "../stores/todoStore"; +import { TodoList } from "./TodoList"; export const TodoInput = () => { - const { todos, addTodo } = useTodoStore() + const addTodo = useTodoStore((s) => s.addTodo); + const totalCount = useTodoStore((s) => s.todos.length); + const completedCount = useTodoStore((s) => s.todos.filter((t) => t.completed).length); + const remainingCount = useTodoStore((s) => s.todos.filter((t) => !t.completed).length); + const [todoText, setTodoText] = useState("") const handleAddTodo = () => { - addTodo("My new todo"); + const trimmed = todoText.trim(); + if (!trimmed) return; //Förhindrar tomma todos + addTodo(trimmed); + setTodoText(""); }; return ( - + <>
ToDo
 - - - - - + + +
+ + {remainingCount} Not ready + {completedCount} Completed + {totalCount} Total + + + + + e.key === "Enter" && handleAddTodo()} + onChange={(e) => setTodoText(e.target.value)} + placeholder="Add your todo" + /> + + + + + +
+ + ); }; const Container = styled.section` - width: 100%; - min-height: 100vh; display: flex; flex-direction: column; + align-items: center; + gap: 32px; + padding: 24px; `; const HeaderContainer = styled.header` display: flex; justify-content: center; - align-items: center; background: ${colors.header}; - + width: 100%; + align-items: center; + margin-left: -24px; + width: calc(100% + 48px); `; const Header = styled.h1` - font-size: 30px; - color: ${colors.textLight} + font-size: 48px; + color: ${colors.textHeader}; +`; + +const Main = styled.main` + width: 100%; + max-width: 800px; + display: flex; + flex-direction: column; + gap: 32px; + align-items: center; +`; + +const CountRow = styled.div` + display: flex; + justify-content: center; + gap: 16px; + margin-top: 8px; +`; + +const Count = styled.div` + background: #f0f0f0; + padding: 8px 16px; + border-radius: 12px; + font-size: 14px; + color: ${colors.textPrimary}; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); `; const Button = styled.button` - width: 50px; - height: 50px; - font-size: 40px; + width: 70px; + height: 40px; + font-size: 20px; background: none; - color: #fff; + border: 1px solid #ccc; + border-radius: 8px; + color: ${colors.textPrimary}; + font-family: inherit; `; const InputWrapper = styled.section` display: flex; + width: 100%; + max-width: 800px; + align-items: center; justify-content: center; padding: 20px; background: #f7efe6; + gap: 20px; + `; const Input = styled.input` - width: 85%; + flex: 1; + min-width: 0; padding: 10px 15px; font-size: 16px; border: 1px solid #ccc; From ded83db673f3a3eb59fae1d2ba94ba3b90b15a64 Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Thu, 15 Jan 2026 16:00:35 +0100 Subject: [PATCH 08/19] adding function to todoStore --- src/stores/todoStore.js | 41 +++++++++++++++++++++++++++++++++++------ 1 file changed, 35 insertions(+), 6 deletions(-) diff --git a/src/stores/todoStore.js b/src/stores/todoStore.js index 3871a520..7b11ff51 100644 --- a/src/stores/todoStore.js +++ b/src/stores/todoStore.js @@ -1,10 +1,39 @@ import { create } from "zustand"; +import { palette } from "../styles/colors"; -export const useTodoStore = create((set) => ({ +export const useTodoStore = create((set, get) => ({ todos: [], - addTodo: (text) => set((state) => ({ todos: [...state.todos, { text, completed: false, id: Date.now() }] })), - removeTodo: (id) => set((state) => ({ todos: state.todos.filter(todo => todo.id !== id) })), - toggleTodo: (id) => set((state) => ({ - todos: state.todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo) - })) + colorIndex: 0, + + addTodo: (text) => { + + const state = get(); //hämta nuvarande state + const color = palette[state.colorIndex]; //välj färg enligt palette (index) + + const newTodo = { + id: Date.now(), + text, + completed: false, + color, //bakgrundsfärg + }; + + //uppdaterar Todos och färgIndex + set({ + todos: [...state.todos, newTodo], + colorIndex: (state.colorIndex + 1) % palette.length, + }); + }, + + removeTodo: (id) => + set((state) => ({ + todos: state.todos.filter(todo => todo.id !== id) + })), + + //Markera todo som klar/toggle + toggleTodo: (id) => + set((state) => ({ + todos: state.todos.map(todo => + todo.id === id ? { ...todo, completed: !todo.completed } : todo + ), + })), })); From 15909f5316ce8633bc19f83628062e9253f89f86 Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Thu, 15 Jan 2026 16:00:56 +0100 Subject: [PATCH 09/19] fixing colors and globalstyling --- src/styles/GlobalStyle.js | 7 +++---- src/styles/colors.js | 16 ++++++++++------ 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js index 73b54544..c2cae1a6 100644 --- a/src/styles/GlobalStyle.js +++ b/src/styles/GlobalStyle.js @@ -1,5 +1,5 @@ import { createGlobalStyle } from "styled-components"; -import { colors } from "./colors"; +import { colors, palette } from "./colors"; export const GlobalStyle = createGlobalStyle` @@ -11,8 +11,6 @@ export const GlobalStyle = createGlobalStyle` html, body { width: 100%; - margin: 0; - padding: 0; } #root { @@ -21,9 +19,10 @@ html, body { body { background-color: ${colors.background}; - color: ${colors.textMuted}; + color: ${colors.textPrimary}; font-family: 'Courier New', Courier, monospace; min-height: 100vh; + line-height: 1.5; } button { diff --git a/src/styles/colors.js b/src/styles/colors.js index 5f93a636..e6df8ffd 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -1,9 +1,13 @@ export const colors = { background: "#F6EDE3", header: "#FFA97A", - cardPrimary: "#F58C8C", - cardSecondary: "#F4A3C2", - cardTertiary: "#B58DBF", - textLight: "#FFFFFF", - textMuted: "#BDBDBD", -} \ No newline at end of file + textHeader: "#F2E6DC", + textPrimary: "#5E4658", +} + +export const palette = [ + "#F58C8C", + "#F4A3C2", + "#B58DBF", + "#8F6FA3" +]; \ No newline at end of file From baf7ebfbbb90fcc9ff7adb033e0269fffc52cdd0 Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Thu, 15 Jan 2026 16:01:25 +0100 Subject: [PATCH 10/19] fixing bugs and margin/paddning --- src/components/TodoItem.jsx | 76 +++++++++++++++++++++++++++++++++++++ src/components/TodoList.jsx | 38 +++++++++++++++++++ 2 files changed, 114 insertions(+) create mode 100644 src/components/TodoItem.jsx create mode 100644 src/components/TodoList.jsx diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx new file mode 100644 index 00000000..d6c1c43b --- /dev/null +++ b/src/components/TodoItem.jsx @@ -0,0 +1,76 @@ +import React from "react"; +import { useTodoStore } from "../stores/todoStore"; +import styled from "styled-components"; +import { colors } from "../styles/colors"; + + +export const TodoItem = ({ todo }) => { + const removeTodo = useTodoStore((state) => state.removeTodo); + const toggleTodo = useTodoStore((state) => state.toggleTodo); + + const textId = `todo-text-${todo.id}`; + + return ( + + toggleTodo(todo.id)} + /> + {todo.text} + + removeTodo(todo.id)}> + 🗑 + + + ); +}; + +const Item = styled.div` + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + background: ${(p) => p.color || "transparent"}; + font-family: inherit; + margin: 10px 0; +`; + +const Checkbox = styled.input` + width: 18px; + height: 18px; + cursor: pointer; + flex: 0 0 auto; +`; + +const Text = styled.span` + flex: 1; + font-size: 16px; + font-weight: 400; + color: ${colors.textPrimary}; + text-decoration: ${(p) => (p.completed ? "line-through" : "none")}; + word-break: break-word; + font-family: inherit; +`; + +const DeleteBtn = styled.button` + background: none; + border: none; + cursor: pointer; + font-size: 18px; + color: ${colors.textPrimary}; + padding: 4px; + + &:focus-visible { + outline: 2px solid ${colors.header}; + outline-offset: 2px; + } +`; \ No newline at end of file diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx new file mode 100644 index 00000000..b44c92c2 --- /dev/null +++ b/src/components/TodoList.jsx @@ -0,0 +1,38 @@ +import React from "react"; +import { useTodoStore } from "../stores/todoStore"; +import { TodoItem } from "./TodoItem"; +import styled from "styled-components"; +import { colors } from "../styles/colors"; + +export const TodoList = () => { + const todos = useTodoStore((state) => state.todos); + + if (todos.length === 0) return “All quiet here… add your first task!📝” + + return ( + + {todos.map((todo) => ( + + ))} + + ) +}; + +const ListContainer = styled.section` + width: 100%; + max-width: 800px; + margin: 20px auto; + background: #ffffff; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); + overflow: hidden; + margin-top: 20px; +`; + +const Empty = styled.p` + text-align: center; + color: ${colors.textPrimary}; + padding: 24px; + font-size: 20px; +`; + From feeb19691ceb2e7f5ce606b7b212515f453263cf Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Thu, 15 Jan 2026 16:46:22 +0100 Subject: [PATCH 11/19] add Roboto font with style tag for making it load --- index.html | 44 ++++++++++++++++++++++++++------------- src/styles/GlobalStyle.js | 4 ++-- 2 files changed, 32 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index f7ac4e42..98d034f5 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,32 @@ - - - - - Todo - - -
- - - + + + + + + + + + + + + + + + Todo + + + +
+ + + + \ No newline at end of file diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js index c2cae1a6..d8c9410f 100644 --- a/src/styles/GlobalStyle.js +++ b/src/styles/GlobalStyle.js @@ -20,12 +20,12 @@ html, body { body { background-color: ${colors.background}; color: ${colors.textPrimary}; - font-family: 'Courier New', Courier, monospace; + font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; min-height: 100vh; line-height: 1.5; } -button { +button, input, textarea, select { font-family: inherit; cursor: pointer; } From 0104eab7d92ded7d82952ed543294ca797aec195 Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Thu, 15 Jan 2026 16:47:22 +0100 Subject: [PATCH 12/19] fixing border-radius and colors (accessibility) --- src/components/TodoInput.jsx | 8 ++++---- src/styles/colors.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx index ed4abe5d..436ffdd0 100644 --- a/src/components/TodoInput.jsx +++ b/src/components/TodoInput.jsx @@ -76,7 +76,7 @@ const HeaderContainer = styled.header` const Header = styled.h1` font-size: 48px; - color: ${colors.textHeader}; + color: ${colors.textPrimary}; `; const Main = styled.main` @@ -98,7 +98,7 @@ const CountRow = styled.div` const Count = styled.div` background: #f0f0f0; padding: 8px 16px; - border-radius: 12px; + border-radius: 8px; font-size: 14px; color: ${colors.textPrimary}; box-shadow: 0 2px 4px rgba(0,0,0,0.1); @@ -107,7 +107,7 @@ const Count = styled.div` const Button = styled.button` width: 70px; height: 40px; - font-size: 20px; + font-size: 16px; background: none; border: 1px solid #ccc; border-radius: 8px; @@ -123,7 +123,7 @@ const InputWrapper = styled.section` justify-content: center; padding: 20px; background: #f7efe6; - gap: 20px; + gap: 16px; `; diff --git a/src/styles/colors.js b/src/styles/colors.js index e6df8ffd..5a8752b6 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -1,7 +1,7 @@ export const colors = { background: "#F6EDE3", header: "#FFA97A", - textHeader: "#F2E6DC", + textHeader: "#FFFFFF", textPrimary: "#5E4658", } From 8ec1951a37fafff6e2be0d83ddb28e647445d296 Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Fri, 16 Jan 2026 10:24:25 +0100 Subject: [PATCH 13/19] changing colors --- src/components/TodoInput.jsx | 14 +++++++------- src/components/TodoList.jsx | 8 +++----- src/stores/todoStore.js | 8 +++++--- src/styles/GlobalStyle.js | 7 ++++--- src/styles/colors.js | 13 ++----------- 5 files changed, 21 insertions(+), 29 deletions(-) diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx index 436ffdd0..728bf7b5 100644 --- a/src/components/TodoInput.jsx +++ b/src/components/TodoInput.jsx @@ -67,7 +67,7 @@ const Container = styled.section` const HeaderContainer = styled.header` display: flex; justify-content: center; - background: ${colors.header}; + background: ${colors.primary}; width: 100%; align-items: center; margin-left: -24px; @@ -76,7 +76,7 @@ const HeaderContainer = styled.header` const Header = styled.h1` font-size: 48px; - color: ${colors.textPrimary}; + color: ${colors.secondary}; `; const Main = styled.main` @@ -96,11 +96,11 @@ const CountRow = styled.div` `; const Count = styled.div` - background: #f0f0f0; + background: ${colors.primary}; padding: 8px 16px; border-radius: 8px; font-size: 14px; - color: ${colors.textPrimary}; + color: ${colors.secondary}; box-shadow: 0 2px 4px rgba(0,0,0,0.1); `; @@ -111,7 +111,7 @@ const Button = styled.button` background: none; border: 1px solid #ccc; border-radius: 8px; - color: ${colors.textPrimary}; + color: ${colors.secondary}; font-family: inherit; `; @@ -122,7 +122,7 @@ const InputWrapper = styled.section` align-items: center; justify-content: center; padding: 20px; - background: #f7efe6; + background: ${colors.primary}; gap: 16px; `; @@ -131,7 +131,7 @@ const Input = styled.input` flex: 1; min-width: 0; padding: 10px 15px; - font-size: 16px; + font-size: 18px; border: 1px solid #ccc; border-radius: 8px; font-family: inherit; diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index b44c92c2..35a0fa96 100644 --- a/src/components/TodoList.jsx +++ b/src/components/TodoList.jsx @@ -22,17 +22,15 @@ const ListContainer = styled.section` width: 100%; max-width: 800px; margin: 20px auto; - background: #ffffff; + background: ${colors.secondary}; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); overflow: hidden; - margin-top: 20px; `; const Empty = styled.p` text-align: center; - color: ${colors.textPrimary}; - padding: 24px; - font-size: 20px; + color: ${colors.primary}; + font-size: 18px; `; diff --git a/src/stores/todoStore.js b/src/stores/todoStore.js index 7b11ff51..8b41e6da 100644 --- a/src/stores/todoStore.js +++ b/src/stores/todoStore.js @@ -1,5 +1,7 @@ import { create } from "zustand"; -import { palette } from "../styles/colors"; +import { colors } from "../styles/colors"; + +const twoColors = [colors.primary, colors.secondary]; export const useTodoStore = create((set, get) => ({ todos: [], @@ -8,7 +10,7 @@ export const useTodoStore = create((set, get) => ({ addTodo: (text) => { const state = get(); //hämta nuvarande state - const color = palette[state.colorIndex]; //välj färg enligt palette (index) + const color = twoColors[state.colorIndex]; //välj färg enligt twocolors (index) const newTodo = { id: Date.now(), @@ -20,7 +22,7 @@ export const useTodoStore = create((set, get) => ({ //uppdaterar Todos och färgIndex set({ todos: [...state.todos, newTodo], - colorIndex: (state.colorIndex + 1) % palette.length, + colorIndex: (state.colorIndex + 1) % twoColors.length, }); }, diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js index d8c9410f..e2f55197 100644 --- a/src/styles/GlobalStyle.js +++ b/src/styles/GlobalStyle.js @@ -1,5 +1,5 @@ import { createGlobalStyle } from "styled-components"; -import { colors, palette } from "./colors"; +import { colors } from "./colors"; export const GlobalStyle = createGlobalStyle` @@ -11,6 +11,7 @@ export const GlobalStyle = createGlobalStyle` html, body { width: 100%; + height: 100%; } #root { @@ -18,8 +19,8 @@ html, body { } body { - background-color: ${colors.background}; - color: ${colors.textPrimary}; + background-color: ${colors.secondary}; + color: ${colors.primary}; font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; min-height: 100vh; line-height: 1.5; diff --git a/src/styles/colors.js b/src/styles/colors.js index 5a8752b6..68a9b4c7 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -1,13 +1,4 @@ export const colors = { - background: "#F6EDE3", - header: "#FFA97A", - textHeader: "#FFFFFF", - textPrimary: "#5E4658", + primary: "#212842", + secondary: "#F0E7d5", } - -export const palette = [ - "#F58C8C", - "#F4A3C2", - "#B58DBF", - "#8F6FA3" -]; \ No newline at end of file From 6ba3de5b36d72e44006f4db5a1e5263c40803fea Mon Sep 17 00:00:00 2001 From: Marina Lendt Date: Fri, 16 Jan 2026 10:25:11 +0100 Subject: [PATCH 14/19] added style to html, because the body wouldnt read the background color otherwise --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index 98d034f5..a9429c7b 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,8 @@