diff --git a/answers.md b/answers.md index a90c39911c..fa81211e54 100644 --- a/answers.md +++ b/answers.md @@ -1,19 +1,27 @@ ### All Answers to Partner Study should be filled out in this file. 1. Single Page Application + - An application that loads a single html page and all the necessary assests required for the application to run. 2. Compilers + - A compiler takes the code, transforms it and returns code in a different format. Babel is the compiler most commonly used with React. 3. Bundlers + - Bundlers take JS and CSS code writtren as seperate modules, and combine them together into a few files better optimized for the browsers. 4. Elements + - React elements are the building blocks of React applications. An element describes what you want to see on the screen. Elements are immutable. 5. Components + - Components are small, reusable pieces of code that return a React element to be rendered to the page. 6. JSX + - A syntax extension to JS. Similar to a template language, but still has the full power of JS. 7. Package Mangers + - Tools that allow you to manage dependencies in your project. 8. CDN + - Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe. 9. Props and State diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000000..90ffc21acc --- /dev/null +++ b/src/App.css @@ -0,0 +1,72 @@ +body { + margin: 0 auto; + height: 100%; + width: 100%; + background-image: url("./img/background.jpg"); + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; + +} + +.container { + border: 3px solid black; + border-radius: 10px; + display: flex; + max-width: 1100px; + width: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0 auto; + margin-top: 100px; +} + +.textBox { + width: 700px; + height: 40px; + text-align: center; + font-size: 24px; + margin-bottom: 25px; + border: 3px black solid; + border-radius: 10px; + background:rgba(255,255,255,0.5); + color: black; +} + +.textBox::placeholder { + color: black; + font-weight: bold; +} + +.todo { + display: flex; +} + +.todoTask { + display: flex; + font-size: 30px; + align-items: center; + margin: 15px 0; + padding-left: 5px; + width: 500px; + height: 35px; + max-height: 100%; + border: 3px solid black; + border-radius: 10px; + font-weight: bold; + background:rgba(255,255,255,0.5); +} + +.button { + display: flex; + align-self: center; + margin-left: 25px; + color: red; + font-size: 25px; + font-weight: bold; +} + +.button:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 9c129b5c9b..9fd742348b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,11 @@ import React from 'react'; +import TodoList from './components/TodoList'; +import './App.css'; const App = () => ( -