# Codeweek 2022 Ich bin Fabian :) - breytex - Link: https://tinyurl.com/codeweek22 ## Roadmap 1. HTML + CSS lernen 2. Zusammenhang zwischen HTML und JavaScript 3. Einführung in das JavaScript Framework React 4. Anbindung der Software an eine Datenbank 5. Ein eigenes Projekt entwickeln ### Html lernen - HTML Starter: https://codesandbox.io/s/html-starter-1wjzq1 - HTML Befehle: https://www.html-seminar.de/befehlsuebersicht.htm - CSS Befehle: https://www.w3schools.com/cssref/ - flex box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ### Webseiten Fabian: https://1wjzq1.csb.app/ Alex:https://eskbog.csb.app/ Talisa:https://tfj1fh.csb.app/ Stella:https://iywj6b.csb.app/ Johanna:https://rsp4vo.csb.app/ Catalin: https://qr20sf.csb.app/ Marlon:https://s03pxg.csb.app/ Dominik: https://qn4de6.csb.app/ Christoph:https://ur6smg.csb.app/ Nick:https://diz993.csb.app/ Codeweek 2021 Spiele:https://hackmd.io/@tjanson/codeweek2021#/ ``` @media (max-width: 600px) { body { background-color: lightblue; } } ``` ## Array Cardio - https://codesandbox.io/s/array-cardio-6jct9g?file=/index.html ```javascript= const data = [ "car", "car", "truck", "truck", "bike", "walk", "car", "van", "bike", "walk", "car", "van", "car", "truck" ]; const result = { car: 5, truck: 3, bike: 2, van: 2 } ``` - String concatination: https://masteringjs.io/tutorials/fundamentals/string-concat - Lösung Array Cardio: https://codesandbox.io/s/array-cardio-forked-96fm0t ## Todolist app - https://codesandbox.io/s/vite-mui-router-codeweek-2022-forked-6zdg6p?file=/src/Todolist.tsx - material ui: https://mui.com/material-ui/react-button/ - stack: https://mui.com/material-ui/react-stack/ - box: https://mui.com/material-ui/react-box/ - useState: https://stackoverflow.com/questions/55757761/handle-an-input-with-react-hooks - halb-fertige Todo-App: https://codesandbox.io/s/solution-todo-list-m6hy8p ## Evaluation - http://bsomint.de/index.php?s=sf&id=6918-f47 ## Vercel vercel.com dominiks sandbox: https://codesandbox.io/s/vite-mui-router-codeweek-2022-forked-mbe4hx ## Discord https://discord.gg/JmWSHaJj ## Realtime updates ```typescript useEffect(() => { supabase.from("*").on("*", reload).subscribe(); return () => { supabase.removeAllSubscriptions(); }; }, []); ``` ## fertige Seiten Alex: https://simpleshoppinglist.vercel.app/ Stella: https://todolist-stella.vercel.app/