generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update npm dependencies and add @firecms/neat library for gradient co…
…mponent
- Loading branch information
1 parent
34f5e62
commit 3da8e85
Showing
8 changed files
with
442 additions
and
326 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,57 @@ | ||
| import { useEffect, useState } from "react" | ||
| import { NewTodoForm } from "./NewTodoForm" | ||
| import "./styles.css" | ||
| import { TodoList } from "./TodoList" | ||
|
|
||
| export default function App() { | ||
| // Store the todos in local storage | ||
| const [todos, setTodos] = useState(() => { | ||
| const localValue = localStorage.getItem("ITEMS") | ||
| if (localValue == null) return [] | ||
|
|
||
| return JSON.parse(localValue) | ||
| }) | ||
| // every time the todos change, update the local storage | ||
| useEffect(() => { | ||
| localStorage.setItem("ITEMS", JSON.stringify(todos)) | ||
| }, [todos]) | ||
|
|
||
| function addTodo(title) { | ||
| setTodos(currentTodos => { | ||
| return [ | ||
| ...currentTodos, | ||
| { id: crypto.randomUUID(), title, completed: false }, | ||
| ] | ||
| }) | ||
| } | ||
|
|
||
| function toggleTodo(id, completed) { | ||
| setTodos(currentTodos => { | ||
| return currentTodos.map(todo => { | ||
| if (todo.id === id) { | ||
| return { ...todo, completed } | ||
| } | ||
|
|
||
| return todo | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| function deleteTodo(id) { | ||
| setTodos(currentTodos => { | ||
| return currentTodos.filter(todo => todo.id !== id) | ||
| }) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <NewTodoForm onSubmit={addTodo} /> | ||
| <h1 className="header">Todo List:</h1> | ||
| <TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} /> | ||
| </> | ||
| ) | ||
| } | ||
| import React, { useEffect, useState } from "react"; | ||
| import { NewTodoForm } from "./NewTodoForm"; | ||
| import "./styles.css"; | ||
| import { TodoList } from "./TodoList"; | ||
| import GradientComponent from "./GradientComponent"; | ||
|
|
||
| function App() { | ||
| const [todos, setTodos] = useState(() => { | ||
| const localValue = localStorage.getItem("ITEMS"); | ||
| return localValue ? JSON.parse(localValue) : []; | ||
| }); | ||
|
|
||
| const [backgroundColor, setBackgroundColor] = useState("#0b3954"); | ||
|
|
||
| useEffect(() => { | ||
| localStorage.setItem("ITEMS", JSON.stringify(todos)); | ||
| }, [todos]); | ||
|
|
||
| function addTodo(title) { | ||
| setTodos((currentTodos) => [ | ||
| ...currentTodos, | ||
| { id: crypto.randomUUID(), title, completed: false }, | ||
| ]); | ||
| } | ||
|
|
||
| function toggleTodo(id, completed) { | ||
| setTodos((currentTodos) => | ||
| currentTodos.map((todo) => | ||
| todo.id === id ? { ...todo, completed } : todo | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| function deleteTodo(id) { | ||
| setTodos((currentTodos) => | ||
| currentTodos.filter((todo) => todo.id !== id) | ||
| ); | ||
| } | ||
|
|
||
| // Set the background color directly on the body tag | ||
| useEffect(() => { | ||
| document.body.style.backgroundColor = backgroundColor; | ||
| }, [backgroundColor]); | ||
|
|
||
| return ( | ||
| <> | ||
| <GradientComponent onBackgroundColorChange={setBackgroundColor} /> | ||
| <div className="app-container"> | ||
| <NewTodoForm onSubmit={addTodo} /> | ||
| <h1 className="header">Todo List:</h1> | ||
| <TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} /> | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| // GradientComponent.jsx | ||
|
|
||
| import React, { useEffect, useRef } from "react"; | ||
| import { NeatGradient } from "@firecms/neat"; | ||
|
|
||
| const GradientComponent = () => { | ||
| const canvasRef = useRef(null); | ||
| const gradientRef = useRef(null); | ||
|
|
||
| useEffect(() => { | ||
| if (!canvasRef.current) return; | ||
|
|
||
| const config = { | ||
| "colors": [ | ||
| { | ||
| "color": "#D5DFF4", | ||
| "enabled": true | ||
| }, | ||
| { | ||
| "color": "#ECF2FF", | ||
| "enabled": true | ||
| }, | ||
| { | ||
| "color": "#F3D4F2", | ||
| "enabled": true | ||
| }, | ||
| { | ||
| "color": "#E0E7FF", | ||
| "enabled": true | ||
| }, | ||
| { | ||
| "color": "#F6FFFF", | ||
| "enabled": true | ||
| } | ||
| ], | ||
| "speed": 8, | ||
| "horizontalPressure": 2, | ||
| "verticalPressure": 5, | ||
| "waveFrequencyX": 2, | ||
| "waveFrequencyY": 4, | ||
| "waveAmplitude": 8, | ||
| "shadows": 7, | ||
| "highlights": 6, | ||
| "colorBrightness": 1.05, | ||
| "colorSaturation": 1, | ||
| "wireframe": false, | ||
| "colorBlending": 7, | ||
| "backgroundColor": "#0b3954", | ||
| "backgroundAlpha": 1, | ||
| "resolution": 2 | ||
| }; | ||
|
|
||
| gradientRef.current = new NeatGradient({ | ||
| ref: canvasRef.current, | ||
| ...config, | ||
| }); | ||
|
|
||
| return () => { | ||
| if (gradientRef.current) { | ||
| gradientRef.current.destroy(); | ||
| } | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <canvas | ||
| id="gradientCanvas" | ||
| style={{ position: "fixed", top: 0, left: 0, width: "100%", height: "100%", zIndex: -1 }} | ||
| ref={canvasRef} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default GradientComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,10 @@ | ||
| import React from 'react' | ||
| import ReactDOM from 'react-dom/client' | ||
| import App from './App.jsx' | ||
| import React from "react"; | ||
| import ReactDOM from "react-dom/client"; | ||
| import App from "./App.jsx"; | ||
|
|
||
| ReactDOM.createRoot(document.getElementById('root')).render( | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode>, | ||
| ) | ||
|
|
||
| ReactDOM.createRoot(document.getElementById("root")).render( | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode> | ||
| ); |
Oops, something went wrong.