├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── demo.gif ├── package-lock.json ├── package.json └── src ├── assets └── ogimage.png ├── button.scss ├── celebrate.js ├── index.html ├── normalize.css ├── screen.scss ├── script.js ├── style.scss └── variables.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | .parcel-cache 78 | 79 | # Next.js build output 80 | .next 81 | out 82 | 83 | # Nuxt.js build / generate output 84 | .nuxt 85 | dist 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and not Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | 108 | # Stores VSCode versions used for testing VSCode extensions 109 | .vscode-test 110 | 111 | # yarn v2 112 | .yarn/cache 113 | .yarn/unplugged 114 | .yarn/build-state.yml 115 | .yarn/install-state.gz 116 | .pnp.* 117 | 118 | .vercel 119 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true, 4 | "trailingComma": "none" 5 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 ninest 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Common Celebrate](http://celebrate.now.sh/) 2 | > **🎉 Celebrate even after sending in your college applications.** 3 | 4 | 5 |

6 | Demo 7 |

8 | 9 | ## ⚙️ Build setup 10 | 11 | Clone or fork the repository then run 12 | 13 | ```bash 14 | npm i 15 | npm run dev 16 | ``` 17 | 18 | ### Hosting 19 | ``` 20 | vc --prod 21 | ``` 22 | 23 | or 24 | 25 | ``` 26 | vc 27 | ``` 28 | for a debug web app. 29 | 30 | ## 📜 License 31 | 32 | MIT -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ninest/commonapp-celebrate/3002298960763bc14fb1f9021b91a6b0139e9e5c/demo.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "commonapp-celebrate", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "clean": "rimraf ./public && rimraf ./dist && rimraf ./.cache", 7 | "watch": "parcel watch src/index.html", 8 | "bs": "browser-sync start -s 'dist' -f 'dist' --port 9000", 9 | "dev": "npm run clean && concurrently \"npm run watch\" \"npm run bs\"", 10 | "build": "parcel build src/index.html" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "browser-sync": "^2.26.13", 17 | "concurrently": "^5.3.0", 18 | "parcel-bundler": "^1.12.4", 19 | "prettier": "^2.1.2", 20 | "rimraf": "^3.0.2", 21 | "sass": "^1.28.0" 22 | }, 23 | "dependencies": { 24 | "canvas-confetti": "^1.3.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/assets/ogimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ninest/commonapp-celebrate/3002298960763bc14fb1f9021b91a6b0139e9e5c/src/assets/ogimage.png -------------------------------------------------------------------------------- /src/button.scss: -------------------------------------------------------------------------------- 1 | a.button, button { 2 | padding: 0.8rem 1.6rem; 3 | transition: 0.1s all; 4 | border-radius: 999px; 5 | display: inline-flex; 6 | justify-content: center; 7 | align-items: center; 8 | 9 | border: none; 10 | background: none; 11 | vertical-align: bottom; 12 | 13 | font-weight: bold; 14 | text-decoration: none; 15 | color: unset; 16 | 17 | &:hover { 18 | // copied from commonapp.org 19 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 20 | 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 21 | 0 8px 16px rgba(0, 0, 0, 0.11); 22 | } 23 | 24 | &:focus { 25 | outline: none; 26 | text-decoration: underline; 27 | } 28 | 29 | &.celebrate { 30 | border: 2px solid var(--text); 31 | } 32 | 33 | &.green { 34 | background: #008542; 35 | color: white; 36 | } 37 | 38 | // only if icon 39 | .icon { 40 | margin-right: 0.5rem; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/celebrate.js: -------------------------------------------------------------------------------- 1 | const confetti = require('canvas-confetti').default; 2 | export const initialCelebrate = () => { 3 | const duration = 4 * 1000; 4 | const animationEnd = Date.now() + duration; 5 | 6 | const interval = setInterval(() => { 7 | console.log('start interval'); 8 | const timeLeft = animationEnd - Date.now(); 9 | 10 | if (timeLeft <= 0) { 11 | return clearInterval(interval); 12 | } 13 | 14 | confetti({ 15 | startVelocity: 30, 16 | spread: 360, 17 | ticks: 60, 18 | zIndex: 1, 19 | particleCount: 165, 20 | origin: { 21 | x: randomBetween(0.3, 0.7), 22 | y: randomBetween(0.35, 0.83) 23 | } 24 | }); 25 | console.log('cycle'); 26 | }, 310); 27 | }; 28 | 29 | const randomBetween = (min, max) => { 30 | return Math.random() * (max - min) + min; 31 | }; 32 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | Common App 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 31 | 36 | 37 | 38 |
Submitted!
39 |
40 | 41 |
42 |
Congratulations!
43 |
44 |

45 | You have successfully submitted your Common Application for First Year 46 | students to Northeastern University. 47 |

48 | 49 |

50 | You can review the status of your Common Application requirements in 51 | the Dashboard tab. Please ensure that any incomplete requirements are 52 | submitted prior to the college's application deadline. 53 |

54 | 55 |

56 | Northeastern University has recommended certain next 57 | steps for your application. You can access that information by 58 | clicking on What's next below. 59 |

60 |
61 |
62 | 63 |
64 | 68 | 69 | 75 |
What's next
76 | 77 |
78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /src/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } -------------------------------------------------------------------------------- /src/screen.scss: -------------------------------------------------------------------------------- 1 | @mixin mobile-screen { 2 | @media screen and (max-width: 990px) { 3 | @content; 4 | } 5 | } -------------------------------------------------------------------------------- /src/script.js: -------------------------------------------------------------------------------- 1 | import { initialCelebrate } from './celebrate' 2 | 3 | const $celebrateButton = document.getElementById('celebrate_button') 4 | const $nextButton = document.getElementById('next_button') 5 | 6 | window.onload = () => initialCelebrate() 7 | 8 | $celebrateButton.onclick = () => { 9 | initialCelebrate() 10 | } 11 | 12 | $nextButton.onclick = () => { 13 | alert('Go finish your applications.') 14 | } 15 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | @import 'screen.scss'; 2 | 3 | * { 4 | font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 5 | 'Helvetica Neue', Arial, sans-serif; 6 | font-size: var(--font-size); 7 | } 8 | 9 | // common app green tick 10 | header { 11 | padding: 3rem; 12 | background-color: var(--ca-green); 13 | 14 | color: white; 15 | text-align: center; 16 | 17 | .tick-mark { 18 | width: 10rem; 19 | } 20 | 21 | .submitted { 22 | margin-top: 0.5rem; 23 | font-size: 2.5rem; 24 | font-weight: 500; 25 | } 26 | } 27 | 28 | main { 29 | padding: 2rem var(--side-space); 30 | color: var(--text); 31 | 32 | .congrats { 33 | color: var(--ca-blue); 34 | font-weight: 500; 35 | font-size: 1.7rem; 36 | } 37 | 38 | article { 39 | line-height: 1.7; 40 | } 41 | 42 | // allow overscroll because button-bar takes up space 43 | margin-bottom: 5rem; 44 | } 45 | 46 | .button-bar { 47 | position: fixed; 48 | bottom: 0; 49 | left: 0; 50 | right: 0; 51 | 52 | padding: 1rem var(--side-space); 53 | border-top: 2px solid rgb(226, 226, 226); 54 | background-color: white; 55 | 56 | display: flex; 57 | justify-content: flex-end; 58 | gap: 0.9rem; 59 | } 60 | -------------------------------------------------------------------------------- /src/variables.scss: -------------------------------------------------------------------------------- 1 | @import "screen.scss"; 2 | :root { 3 | --ca-green: #00c060; 4 | --ca-blue: #0065bc; 5 | 6 | --text: #222; 7 | --ca-submit-blue-button: #0067c0; 8 | 9 | --side-space: 15%; 10 | --font-size: 16px; 11 | 12 | @include mobile-screen { 13 | --side-space: 5%; 14 | --font-size: 16px; 15 | } 16 | } 17 | --------------------------------------------------------------------------------