├── README.md ├── dummy_notes.js ├── index.css └── thumbnail.jpg /README.md: -------------------------------------------------------------------------------- 1 | ## [React Notes App Tutorial 2023](https://youtu.be/_3ooazcK4TI) 2 | 3 | ![](thumbnail.jpg) 4 | 5 | This is the starter files css and dummy notes array of the react notes app tutorial on youtube. Clone it, add it to your project, and have fun hacking! 6 | 7 | [Click here](https://youtu.be/_3ooazcK4TI) to watch the tutorial 8 | -------------------------------------------------------------------------------- /dummy_notes.js: -------------------------------------------------------------------------------- 1 | const notes = [ 2 | {id: 1, title: 'How to make your personal brand stand out online', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 3 | {id: 2, title: 'Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 4 | {id: 3, title: 'How to make your personal brand stand out online', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 5 | {id: 4, title: 'How to make your personal brand stand out online', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 6 | {id: 5, title: 'How to make your personal brand stand out online', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 7 | {id: 6, title: 'How to make your personal brand stand out online', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 8 | {id: 7, title: 'How to make your personal brand stand out online', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 9 | {id: 8, title: 'How to make your personal brand stand out online', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 10 | {id: 9, title: 'How to make your personal brand stand out online', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 11 | {id: 10, title: 'How to make your personal brand stand out online', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 12 | {id: 11, title: 'How to make your personal brand stand out online', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 13 | {id: 12, title: 'How to make your personal brand stand out online', details: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam totam quia laboriosam, fuga veritatis atque. Consequuntur praesentium harum dicta incidunt? Asperiores, aperiam praesentium dolore fuga aut repellendus totam tempora? Esse laborum sequi mollitia itaque quasi, molestias, facere consequuntur exercitationem tempore ut veritatis ullam laudantium rerum dolores quo totam corrupti minus omnis. Beatae ex provident reiciendis enim aperiam odit quo modi amet fugit aspernatur sed culpa dolorum dignissimos quod nobis error ducimus, necessitatibus a ipsam veritatis recusandae. Omnis ipsam unde, voluptates esse harum quis nam itaque earum quas autem tempora assumenda aliquid iste id neque, repudiandae, excepturi minima recusandae facilis beatae.', date: 'Jan 6, 2023'}, 14 | ] 15 | 16 | export default notes; -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | border: 0; 7 | outline: 0; 8 | list-style: none; 9 | text-decoration: none; 10 | box-sizing: border-box; 11 | } 12 | 13 | :root { 14 | --color-bg-dark: #3a3a3a; 15 | --color-bg-black: #111111; 16 | --color-white: #fefefe; 17 | --color-primary: #7634d8; 18 | --color-danger: rgb(249, 84, 84); 19 | } 20 | 21 | body { 22 | font-family: 'Montserrat', sans-serif; 23 | display: grid; 24 | place-items: center; 25 | color: var(--color-white); 26 | background: #ccc; 27 | line-height: 1.5; 28 | } 29 | 30 | .btn { 31 | background: var(--color-bg-dark); 32 | border-radius: 0.8rem; 33 | padding: 0.8rem; 34 | font-size: 1.6rem; 35 | color: var(--color-white); 36 | box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.2); 37 | transition: all 300ms ease; 38 | } 39 | 40 | .btn.lg { 41 | padding: 0.8rem 1.5rem; 42 | font-size: 1.2rem; 43 | box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.4); 44 | } 45 | 46 | .btn.danger { 47 | background: var(--color-danger); 48 | } 49 | 50 | .btn.primary { 51 | background: var(--color-primary); 52 | } 53 | 54 | .btn:hover { 55 | cursor: pointer; 56 | box-shadow: none; 57 | } 58 | 59 | #app { 60 | background: var(--color-bg-black); 61 | height: 48rem; 62 | width: 24rem; 63 | padding: 2rem 1.6rem; 64 | overflow-y: scroll; 65 | position: relative; 66 | } 67 | 68 | ::-webkit-scrollbar { 69 | display: none; 70 | } 71 | 72 | h2, h4 { 73 | font-weight: 500; 74 | } 75 | 76 | h2 { 77 | font-size: 2rem; 78 | } 79 | 80 | 81 | 82 | 83 | 84 | 85 | /* NOTES PAGE */ 86 | .notes__header { 87 | display: flex; 88 | align-items: center; 89 | justify-content: space-between; 90 | padding: 0 1.6rem 1.5rem; 91 | background: var(--color-bg-black); 92 | z-index: 9; 93 | } 94 | 95 | 96 | .notes__header input { 97 | padding: 0.7rem 1rem; 98 | background: transparent; 99 | border: 1px solid var(--color-bg-dark); 100 | border-radius: 0.6rem; 101 | color: var(--color-white); 102 | font-size: 1.1rem; 103 | width: 100%; 104 | margin-right: 1.5rem; 105 | } 106 | 107 | .notes__container { 108 | display: grid; 109 | grid-template-columns: 1fr 1fr; 110 | gap: 1.2rem; 111 | } 112 | 113 | .empty__notes { 114 | position: absolute; 115 | left: 50%; 116 | top: 50%; 117 | transform: translate(-50%, -50%); 118 | } 119 | 120 | .note { 121 | background: var(--color-primary); 122 | padding: 1rem; 123 | display: flex; 124 | flex-direction: column; 125 | gap: 1rem; 126 | cursor: pointer; 127 | transition: all 300ms ease; 128 | color: var(--color-white); 129 | } 130 | 131 | .note:hover { 132 | opacity: 0.9; 133 | } 134 | 135 | .note:nth-child(3) { 136 | grid-column: 1/3; 137 | } 138 | 139 | .note:nth-child(4) { 140 | grid-row: 3/5; 141 | } 142 | 143 | .note:nth-child(7) { 144 | grid-column: 1/3; 145 | } 146 | 147 | .note p { 148 | font-size: 0.8rem; 149 | opacity: 0.85; 150 | } 151 | 152 | .btn.add__btn { 153 | position: fixed; 154 | bottom: 4rem; 155 | right: 7rem; 156 | padding: 1rem; 157 | } 158 | 159 | 160 | 161 | 162 | 163 | /* CREATE NOTE & EDIT NOTE PAGE */ 164 | .create-note__header { 165 | display: flex; 166 | justify-content: space-between; 167 | align-items: center; 168 | } 169 | 170 | .create-note__form { 171 | display: flex; 172 | flex-direction: column; 173 | gap: 1rem; 174 | margin-top: 2rem; 175 | } 176 | 177 | .create-note__form input, .create-note__form textarea { 178 | width: 100%; 179 | padding: 0.5rem 1rem; 180 | background: transparent; 181 | border-radius: 0.2rem; 182 | font-size: 1.1rem; 183 | color: var(--color-white); 184 | } 185 | 186 | .create-note__form input { 187 | font-size: 2rem; 188 | } 189 | 190 | 191 | /* MEDIA QUERIES FOR PHONES */ 192 | @media screen and (max-width: 600px) { 193 | #app { 194 | width: 100vw; 195 | height: 100vh; 196 | padding: 2rem 1rem; 197 | } 198 | 199 | .notes__header { 200 | width: 100%; 201 | padding: 2rem 1rem; 202 | position: fixed; 203 | top: 0; 204 | left: 0; 205 | } 206 | 207 | .notes__container { 208 | margin-top: 5rem; 209 | gap: 1rem; 210 | } 211 | 212 | .btn.add__btn { 213 | padding: 1.5rem; 214 | font-size: 1.5rem; 215 | bottom: 6%; 216 | right: 2rem; 217 | } 218 | } -------------------------------------------------------------------------------- /thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egattor/react-notes-starter/471ca66d8509664e6de16db558aefd3a501141ce/thumbnail.jpg --------------------------------------------------------------------------------