diff --git a/index.html b/index.html index 79c4701..2d205fd 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,8 @@ - Vite + React + Josh's Task Planner +
diff --git a/package.json b/package.json index e43418d..f1d4bc7 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@types/react": "^18.0.24", "@types/react-dom": "^18.0.8", "@vitejs/plugin-react": "^2.2.0", + "tailwindcss": "^3.3.5", "vite": "^3.2.3" } -} \ No newline at end of file +} diff --git a/src/App.css b/src/App.css index 2c5e2ef..764a4c6 100644 --- a/src/App.css +++ b/src/App.css @@ -1,41 +1,33 @@ #root { - max-width: 1280px; + max-width: 3000px; margin: 0 auto; - padding: 2rem; text-align: center; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); +.listbox { + float: left; + padding-inline: 20px; + margin-top: 20pt; + color:rgb(255, 255, 255); } -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +li { + color: black; } -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } +.currentTasks { + background: rgba(253, 255, 255, 0.6); + padding-inline: 150px; + height: 900px; } -.card { - padding: 2em; +.newTask { + background: rgba(253, 255, 255, 0.6); + + padding-inline: 100px; + height: 100px; } -.read-the-docs { - color: #888; -} + + + diff --git a/src/App.jsx b/src/App.jsx index ef0adc0..152325b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,32 +1,71 @@ import { useState } from 'react' import reactLogo from './assets/react.svg' import './App.css' +import { render } from 'react-dom'; + + function App() { - const [count, setCount] = useState(0) + const [task, setTask] = useState(""); + const [taskList, setTaskList] = useState(["Task 1", "Task 2"]); + + function Tasks() { + const tasks = taskList.map((e) =>
  • {e} + + + +
    • ); + return ( + + + ); + } return ( +
    -
    - - Vite logo - - - React logo - +

    Josh's Task Planner

    +
    + +
    +

    Current Tasks

    +
    + +
    -

    Vite + React

    -
    - -

    - Edit src/App.jsx and save to test HMR -

    + +
    +

    New Task

    +
    +
    + { + setTask(event.target.value) + event.preventDefault(); + + }} + /> + +
    + +
    -

    - Click on the Vite and React logos to learn more -

    +
    ) } diff --git a/src/index.css b/src/index.css index 917888c..bfc85c6 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,14 @@ :root { font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; + font-size: 25px; + line-height: 30px; + font-weight: 500; - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; + color: azure; + background-image: url(/src/night-sky.jpg); + background-size: contain; + font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; @@ -24,47 +25,88 @@ a:hover { color: #535bf2; } +ul { + list-style: none; + text-align: left; + padding: 5pt; +} + body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; + background-image: url("night-sky.jpg"); +} + +hr { + color: azure; + width: 1280px; } -h1 { - font-size: 3.2em; - line-height: 1.1; +.title { + font-size: 2em; + line-height: 1; + margin-top: 20px; } -button { +h4 { + font-size: 1.5em; + line-height: 0.01; +} + +.enterButton { border-radius: 8px; border: 1px solid transparent; - padding: 0.6em 1.2em; + padding: 0.1em 1em; font-size: 1em; font-weight: 500; font-family: inherit; - background-color: #1a1a1a; + color:white; + background-color:rgb(19, 22, 114); cursor: pointer; transition: border-color 0.25s; } -button:hover { - border-color: #646cff; +.enterButton:hover { + background-color:rgb(19, 22, 114); } -button:focus, -button:focus-visible { +.enterButton:focus, +.enterButton:focus-visible { outline: 4px auto -webkit-focus-ring-color; } -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } +input[type = text] { + margin-top: 27px; + height: 35px; + font-size: 21px; +} + +input[type = checkbox] { + margin-top: 5px; + margin-left: 50px; + width: 30px; + height: 30px; + accent-color: rgb(29, 165, 29); +} + +.deleteButton { + margin-left: 50px; + border-radius: 5px; + border: 1px solid transparent; + padding: 0.1em 1em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + color:white; + background-color:rgba(255, 0, 0, 0.46); + cursor: pointer; + transition: border-color 0.25s; +} +.deleteButton:hover { + background-color:rgba(255, 0, 0, 0.868); +} +.deleteButton:focus, +.deleteButton:focus-visible { + outline: 4px auto -webkit-focus-ring-color; } diff --git a/src/night-sky.jpg b/src/night-sky.jpg new file mode 100644 index 0000000..1af1296 Binary files /dev/null and b/src/night-sky.jpg differ