├── .babelrc ├── .github └── workflows │ └── main.yaml ├── .gitignore ├── README.md ├── build ├── index.js └── postbuild.js ├── common └── reset.css ├── package.json ├── postcss.config.js ├── src ├── days │ ├── Day-001 │ │ ├── index.html │ │ ├── index.js │ │ ├── reset.css │ │ └── styles.css │ ├── Day-002 │ │ ├── index.html │ │ └── styles.css │ ├── Day-003 │ │ ├── index.css │ │ └── index.html │ ├── Day-004 │ │ ├── index.css │ │ └── index.html │ ├── Day-005 │ │ ├── index.html │ │ ├── index.js │ │ └── styles.css │ ├── Day-006 │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── Day-007 │ │ ├── index.css │ │ └── index.html │ ├── Day-008 │ │ ├── index.css │ │ └── index.html │ ├── Day-009 │ │ ├── index.css │ │ └── index.html │ ├── Day-010 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-011 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-012 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-013 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-014 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-015 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-016 │ │ ├── images │ │ │ ├── photo1.jpg │ │ │ ├── photo2.jpg │ │ │ ├── photo3.jpg │ │ │ ├── photo4.jpg │ │ │ ├── photo5.jpg │ │ │ ├── photo6.jpg │ │ │ ├── photo7.jpg │ │ │ └── photo8.jpg │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-017 │ │ ├── images │ │ │ ├── appstore.jpg │ │ │ ├── background.jpg │ │ │ ├── camera.jpg │ │ │ ├── facetime.png │ │ │ ├── health.png │ │ │ ├── mailicon.png │ │ │ ├── maps.png │ │ │ ├── messages.png │ │ │ ├── music.png │ │ │ ├── newsicon.png │ │ │ ├── notes.png │ │ │ ├── phone.jpg │ │ │ ├── phone.png │ │ │ ├── podcasts.png │ │ │ ├── safari.png │ │ │ ├── settings.png │ │ │ ├── stocks.png │ │ │ ├── wallet.png │ │ │ └── weather.png │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ ├── iphone.jpg │ │ └── reset.css │ ├── Day-018 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-019 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-020 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-021 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-022 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-023 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-024 │ │ ├── images │ │ │ ├── black.png │ │ │ ├── blue.png │ │ │ ├── lightblue.png │ │ │ ├── red.png │ │ │ └── white.png │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-025 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-026 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-027 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-028 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-029 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-030 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-031 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ ├── random.js │ │ └── reset.css │ ├── Day-032 │ │ ├── ghost.jpg │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-033 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-034 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-035 │ │ ├── cold.png │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-036 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-037 │ │ ├── duck.jpg │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-038 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-039 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-040 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-041 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-042 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-043 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-044 │ │ ├── dog.jpg │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-045 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-046 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-047 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-048 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ ├── reset.css │ │ └── util.js │ ├── Day-049 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-050 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-051 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-052 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-053 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-054 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-055 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-056 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-057 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-058 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-059 │ │ ├── index.css │ │ ├── index.html │ │ ├── logos │ │ │ ├── angular.svg │ │ │ ├── js.svg │ │ │ ├── react.svg │ │ │ └── vue.svg │ │ └── reset.css │ ├── Day-060 │ │ ├── index.css │ │ ├── index.html │ │ ├── pieces │ │ │ ├── black │ │ │ │ ├── bishop.svg │ │ │ │ ├── horse.svg │ │ │ │ ├── king.svg │ │ │ │ ├── pawn.svg │ │ │ │ ├── queen.svg │ │ │ │ └── tower.svg │ │ │ └── white │ │ │ │ ├── bishop.svg │ │ │ │ ├── horse.svg │ │ │ │ ├── king.svg │ │ │ │ ├── pawn.svg │ │ │ │ ├── queen.svg │ │ │ │ └── tower.svg │ │ └── reset.css │ ├── Day-061 │ │ ├── icon │ │ │ ├── android-icon-192x192-dunplab-manifest-6907.png │ │ │ ├── apple-icon-114x114-dunplab-manifest-6907.png │ │ │ ├── apple-icon-120x120-dunplab-manifest-6907.png │ │ │ ├── apple-icon-144x144-dunplab-manifest-6907.png │ │ │ ├── apple-icon-152x152-dunplab-manifest-6907.png │ │ │ ├── apple-icon-180x180-dunplab-manifest-6907.png │ │ │ ├── apple-icon-57x57-dunplab-manifest-6907.png │ │ │ ├── apple-icon-60x60-dunplab-manifest-6907.png │ │ │ ├── apple-icon-72x72-dunplab-manifest-6907.png │ │ │ ├── apple-icon-76x76-dunplab-manifest-6907.png │ │ │ ├── favicon-16x16-dunplab-manifest-6907.png │ │ │ ├── favicon-32x32-dunplab-manifest-6907.png │ │ │ └── favicon-96x96-dunplab-manifest-6907.png │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ ├── manifest.json │ │ └── reset.css │ ├── Day-062 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-063 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-064 │ │ ├── images │ │ │ ├── photo1.jpg │ │ │ ├── photo2.jpg │ │ │ └── photo3.jpg │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-065 │ │ ├── index.css │ │ ├── index.html │ │ ├── newsletter.html │ │ └── reset.css │ ├── Day-066 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-067 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-068 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-069 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-070 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-071 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-072 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-073 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-074 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-075 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-076 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-077 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-078 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-079 │ │ ├── images │ │ │ ├── photo1.jpg │ │ │ ├── photo2.jpg │ │ │ ├── photo3.jpg │ │ │ ├── photo4.jpg │ │ │ ├── photo5.jpg │ │ │ ├── photo6.jpg │ │ │ ├── photo7.jpg │ │ │ └── photo8.jpg │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-080 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-081 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-082 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-083 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-084 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-085 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-086 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-087 │ │ ├── cubeControls.js │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-088 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-089 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-090 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-091 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-092 │ │ ├── images │ │ │ └── pets_24px_outlined.svg │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-093 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-094 │ │ ├── img │ │ │ ├── flower-1.png │ │ │ ├── flower-2.png │ │ │ ├── flower-3.png │ │ │ └── sprite.png │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-095 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-096 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-097 │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── reset.css │ ├── Day-098 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ ├── Day-099 │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css │ └── Day-100 │ │ ├── images │ │ ├── photo1.jpg │ │ └── photo2.jpg │ │ ├── index.css │ │ ├── index.html │ │ └── reset.css ├── index.css ├── index.html └── reset.css └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["@babel/plugin-transform-runtime"], 3 | "presets": ["@babel/preset-env"] 4 | } 5 | -------------------------------------------------------------------------------- /.github/workflows/main.yaml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: [push] 3 | jobs: 4 | build-and-deploy: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Checkout 8 | uses: actions/checkout@v2 9 | with: 10 | persis-credentials: false 11 | 12 | - name: Install and build 13 | run: yarn install && yarn build 14 | 15 | - name: Deploy 16 | uses: JamesIves/github-pages-deploy-action@releases/v3 17 | with: 18 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 19 | BRANCH: gh-pages 20 | FOLDER: dist 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/projects.js 2 | **/node_modules/** 3 | **/dist/** 4 | index.build.html 5 | 6 | .cache 7 | .vscode 8 | **/.vscode/** 9 | **/.vscode_cobol/** -------------------------------------------------------------------------------- /build/postbuild.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Script used to fix some of the inconsistencies that happened while building 3 | * with Parcel. 4 | */ 5 | const fs = require('fs'); 6 | const path = require('path'); 7 | 8 | let builtHtml = fs.readFileSync(path.resolve(__dirname, '../dist/index.build.html'), 'utf8'); 9 | builtHtml = builtHtml.replace(/\.\.\/\.\./g, '.'); 10 | fs.writeFileSync(path.resolve(__dirname, '../dist/index.html'), builtHtml, 'utf8'); 11 | fs.unlinkSync(path.resolve(__dirname, '../dist/index.build.html')); 12 | -------------------------------------------------------------------------------- /common/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "100-days", 3 | "version": "1.0.0", 4 | "main": "./build/index.js", 5 | "repository": "https://github.com/ivanvb/100-days-front-end.git", 6 | "author": "ivanvb ", 7 | "license": "MIT", 8 | "scripts": { 9 | "generateIndex": "node ./build/index.js", 10 | "parcel": "parcel build ./src/index.build.html --public-url ../.. --no-source-maps", 11 | "build": "yarn generateIndex && yarn parcel", 12 | "postbuild": "node ./build/postbuild.js" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.10.3", 16 | "@babel/plugin-transform-runtime": "^7.10.3", 17 | "@babel/preset-env": "^7.10.3", 18 | "autoprefixer": "^9.8.4", 19 | "parcel-bundler": "^1.12.4" 20 | }, 21 | "dependencies": { 22 | "@babel/runtime": "^7.10.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /src/days/Day-002/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spinning Circles 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /src/days/Day-002/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --speed: 1.5s; 3 | --red: #831106; 4 | --blue: #85cae9; 5 | } 6 | 7 | body { 8 | background-color: #3faf81; 9 | } 10 | 11 | .circle { 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); 16 | height: 30px; 17 | width: 30px; 18 | border-radius: 30px; 19 | transform-origin: -100% -100%; 20 | background-color: white; 21 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); 22 | animation: spinning var(--speed) infinite linear, color var(--speed) infinite linear; 23 | } 24 | 25 | .inverse { 26 | animation: spinning_inverse var(--speed) infinite linear, 27 | color_inverse var(--speed) infinite linear; 28 | } 29 | 30 | @keyframes spinning { 31 | from { 32 | transform: rotate(0deg); 33 | } 34 | 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | @keyframes spinning_inverse { 41 | from { 42 | transform: rotate(0deg); 43 | } 44 | 45 | to { 46 | transform: rotate(-360deg); 47 | } 48 | } 49 | 50 | @keyframes color { 51 | 0% { 52 | background-color: var(--red); 53 | } 54 | 55 | 50% { 56 | background-color: var(--blue); 57 | } 58 | 59 | 100% { 60 | background-color: var(--red); 61 | } 62 | } 63 | 64 | @keyframes color_inverse { 65 | 0% { 66 | background-color: var(--blue); 67 | } 68 | 69 | 50% { 70 | background-color: var(--red); 71 | } 72 | 73 | 100% { 74 | background-color: var(--blue); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/days/Day-003/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day Cycle 🌞 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /src/days/Day-004/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pulse Loading Animation 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/days/Day-005/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Click and Squeeze 7 | 8 | 9 | 10 |
11 |
12 | Click Me! 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/days/Day-005/index.js: -------------------------------------------------------------------------------- 1 | const [shape] = document.getElementsByClassName('shape'); 2 | const [parent] = document.getElementsByClassName('parent'); 3 | parent.addEventListener('click', () => { 4 | shape.classList.remove('animation'); 5 | setTimeout(() => { 6 | shape.classList.add('animation'); 7 | }, 0); 8 | }); 9 | -------------------------------------------------------------------------------- /src/days/Day-005/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: aquamarine; 3 | } 4 | 5 | span { 6 | font-family: Arial, Helvetica, sans-serif; 7 | font-size: 1.5em; 8 | color: #333; 9 | } 10 | 11 | .absolute-center { 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); 16 | } 17 | 18 | .parent { 19 | filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3)); 20 | } 21 | 22 | .shape { 23 | height: 200px; 24 | width: 200px; 25 | background-color: white; 26 | clip-path: polygon(50% 0%, 100% 19%, 100% 84%, 50% 100%, 0 85%, 0 19%); 27 | } 28 | 29 | .animation { 30 | animation: mutate 2s ease-in-out forwards; 31 | } 32 | 33 | span, 34 | .shape { 35 | cursor: pointer; 36 | } 37 | 38 | @keyframes mutate { 39 | 0% { 40 | clip-path: polygon(50% 0%, 100% 19%, 100% 84%, 50% 100%, 0 85%, 0 19%); 41 | } 42 | 43 | 30% { 44 | clip-path: polygon(47% 25%, 100% 25%, 100% 75%, 50% 75%, 0% 75%, 0% 25%); 45 | } 46 | 47 | 40% { 48 | clip-path: polygon(48% 30%, 100% 25%, 100% 75%, 50% 68%, 0% 75%, 0% 25%); 49 | } 50 | 51 | 50% { 52 | clip-path: polygon(47% 25%, 100% 25%, 100% 75%, 50% 75%, 0% 75%, 0% 25%); 53 | } 54 | 55 | 60% { 56 | clip-path: polygon(48% 30%, 100% 25%, 100% 75%, 50% 68%, 0% 75%, 0% 25%); 57 | } 58 | 59 | 70% { 60 | clip-path: polygon(47% 25%, 100% 25%, 100% 75%, 50% 75%, 0% 75%, 0% 25%); 61 | } 62 | 63 | 100% { 64 | clip-path: polygon(50% 0%, 100% 19%, 100% 84%, 50% 100%, 0 85%, 0 19%); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/days/Day-006/index.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | background-color: #333; 8 | } 9 | 10 | .absolute-center { 11 | position: absolute; 12 | left: 50%; 13 | top: 50%; 14 | } 15 | 16 | .roulette { 17 | transform: translate(-50%, -50%); 18 | background-color: #333; 19 | height: 500px; 20 | width: 500px; 21 | border-radius: 500px; 22 | overflow: hidden; 23 | } 24 | 25 | .spin { 26 | animation: rotate 7500ms linear forwards; 27 | } 28 | 29 | .fig { 30 | transform-origin: 50% 0%; 31 | height: 250px; 32 | background-color: #333; 33 | clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 34 | } 35 | 36 | .reload-button { 37 | background-color: #f4f4f4; 38 | position: absolute; 39 | margin: 10px 0px 0px 5px; 40 | padding: 5px 10px; 41 | border-radius: 10px; 42 | font-family: Arial, Helvetica, sans-serif; 43 | font-size: 1em; 44 | } 45 | -------------------------------------------------------------------------------- /src/days/Day-006/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Random Roulette 🎲 7 | 8 | 9 | 10 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/days/Day-007/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Traffic Light 🚦 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /src/days/Day-008/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --dimensions: 275px; 3 | --wheels: 50px; 4 | } 5 | 6 | body { 7 | font-family: Arial, Helvetica, sans-serif; 8 | color: #333; 9 | } 10 | 11 | .absolute-center { 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); 16 | } 17 | 18 | .card { 19 | width: var(--dimensions); 20 | height: calc(var(--dimensions) * 1.4); 21 | box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.3); 22 | border-radius: 10px; 23 | padding: 10px; 24 | } 25 | 26 | .text, 27 | .heading { 28 | position: absolute; 29 | } 30 | 31 | .card { 32 | transition: 0.3s; 33 | transform: rotate3d(0, 1, 0, 0deg); 34 | } 35 | 36 | .card:hover { 37 | transition: 0.3s; 38 | transform: rotate3d(0, 1, 0, 180deg); 39 | } 40 | .card .heading { 41 | visibility: visible; 42 | } 43 | 44 | .card:hover .heading { 45 | visibility: hidden; 46 | } 47 | 48 | .card .text { 49 | visibility: hidden; 50 | } 51 | 52 | .card:hover .text { 53 | visibility: visible; 54 | } 55 | -------------------------------------------------------------------------------- /src/days/Day-008/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Card Rotation [First Try] 7 | 8 | 9 | 10 |
11 |

Hover me!

12 |

13 | Commodo mollit qui qui ad. Laborum sint est deserunt et nostrud. Ea magna Lorem 14 | incididunt nostrud qui. Id ad sit labore cupidatat proident amet magna veniam 15 | consectetur duis nisi. Ullamco sint do nisi duis ad sunt non consequat eu tempor id 16 | deserunt. Incididunt proident aliquip elit dolore aliqua in duis laboris amet non 17 | sint. 18 |

19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /src/days/Day-009/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pacman 🎮 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /src/days/Day-010/index.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | const button = document.getElementById('sidenav-button'); 3 | const [sidenav] = document.getElementsByClassName('sidenav'); 4 | const [cover] = document.getElementsByClassName('cover'); 5 | const [body] = document.getElementsByTagName('body'); 6 | 7 | button.addEventListener('click', () => { 8 | sidenav.style.transform = 'translate(0%)'; 9 | cover.style.display = 'block'; 10 | body.style.overflow = 'hidden'; 11 | }); 12 | 13 | cover.addEventListener('click', () => { 14 | sidenav.style.transform = 'translate(-150%)'; 15 | cover.style.display = 'none'; 16 | body.style.overflow = 'auto'; 17 | }); 18 | }; 19 | -------------------------------------------------------------------------------- /src/days/Day-010/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-011/index.js: -------------------------------------------------------------------------------- 1 | const mobile_button = document.getElementById('mobile-button'); 2 | const links = document.getElementById('links'); 3 | const [mainContent] = document.getElementsByTagName('main'); 4 | 5 | let isMenuOpen = false; 6 | 7 | mobile_button.addEventListener('click', () => { 8 | links.style.maxHeight = isMenuOpen ? '0px' : `${links.scrollHeight}px`; 9 | isMenuOpen = !isMenuOpen; 10 | }); 11 | -------------------------------------------------------------------------------- /src/days/Day-011/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-012/index.js: -------------------------------------------------------------------------------- 1 | const SMALL_SCREEN_WIDTH_IN_PX = 486; 2 | const DEGREE_MULTIPLICATOR = 10; 3 | const TRANSLATE_MULTIPLICATOR = 110; 4 | 5 | window.onload = () => { 6 | const [cards] = document.getElementsByClassName('cards'); 7 | 8 | let isOpen = false; 9 | 10 | const isSmallScreen = window.innerWidth < SMALL_SCREEN_WIDTH_IN_PX; 11 | 12 | cards.addEventListener('click', () => { 13 | addTransitionStylesToCard(cards, isOpen); 14 | 15 | isOpen = !isOpen; 16 | }); 17 | 18 | function addTransitionStylesToCard(cards, isMenuOpen) { 19 | for (let i = 0; i < cards.children.length; i++) { 20 | const children = cards.children[i]; 21 | 22 | const translationPercentage = `${isMenuOpen ? '' : '-'}${i * TRANSLATE_MULTIPLICATOR}%`; 23 | const rotationDegree = `${isMenuOpen ? '-' : ''}${i * DEGREE_MULTIPLICATOR}deg`; 24 | 25 | const animation = isSmallScreen 26 | ? `translateY(${translationPercentage})` 27 | : `rotate(${rotationDegree})`; 28 | 29 | children.style.transform = `${ 30 | window.getComputedStyle(children).transform 31 | } ${animation}`; 32 | } 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /src/days/Day-012/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-013/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Eyes 👀 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /src/days/Day-013/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-014/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: lightgrey; 3 | font-family: Arial, Helvetica, sans-serif; 4 | color: #333; 5 | } 6 | 7 | .absolute-center { 8 | top: 50%; 9 | left: 50%; 10 | transform: translate(-50%, -50%); 11 | position: absolute; 12 | } 13 | 14 | .collapsible { 15 | cursor: pointer; 16 | padding: 0 20px; 17 | background-color: white; 18 | border-radius: 10px; 19 | box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1); 20 | width: 450px; 21 | overflow: hidden; 22 | } 23 | 24 | .heading { 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | } 29 | 30 | #arrow { 31 | font-size: 1.4em; 32 | transition: transform 300ms; 33 | } 34 | 35 | .title { 36 | font-size: 1.4em; 37 | font-weight: bold; 38 | padding-top: 15px; 39 | padding-bottom: 15px; 40 | display: block; 41 | } 42 | 43 | .paragraph { 44 | transition: max-height 300ms ease-out; 45 | max-height: 0; 46 | line-height: 20px; 47 | } 48 | 49 | @media (max-width: 486px) { 50 | .collapsible { 51 | width: 300px; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/days/Day-014/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Collapsible 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Press Me

15 | ⬇ 16 |
17 |

18 | Ad laborum reprehenderit quis in voluptate veniam duis sit duis labore culpa. 19 | Ullamco tempor adipisicing est elit ea occaecat veniam proident do dolor in enim 20 | aliquip. Quis occaecat nulla voluptate sint dolore cupidatat cupidatat minim. 21 | Consequat pariatur dolore consequat voluptate enim non officia. Aliquip amet 22 | deserunt elit incididunt culpa duis et labore aliqua irure in pariatur. Laborum 23 | id nulla in tempor dolor veniam proident ad. Sint irure laboris adipisicing est 24 | nisi ad duis occaecat culpa ea sint. 25 |

26 |
27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/days/Day-014/index.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | const [collapsible] = document.getElementsByClassName('collapsible'); 3 | const [paragraph] = document.getElementsByClassName('paragraph'); 4 | const arrow = document.getElementById('arrow'); 5 | 6 | let isOpen = false; 7 | collapsible.addEventListener('click', () => { 8 | if (!isOpen) { 9 | paragraph.style.maxHeight = paragraph.scrollHeight + 'px'; 10 | paragraph.style.paddingBottom = '15px'; 11 | arrow.style.transform = 'rotate(180deg)'; 12 | } else { 13 | paragraph.style.maxHeight = '0px'; 14 | paragraph.style.paddingBottom = '0px'; 15 | arrow.style.transform = 'rotate(0deg)'; 16 | } 17 | isOpen = !isOpen; 18 | }); 19 | }; 20 | -------------------------------------------------------------------------------- /src/days/Day-014/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-015/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-016/images/photo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-016/images/photo1.jpg -------------------------------------------------------------------------------- /src/days/Day-016/images/photo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-016/images/photo2.jpg -------------------------------------------------------------------------------- /src/days/Day-016/images/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-016/images/photo3.jpg -------------------------------------------------------------------------------- /src/days/Day-016/images/photo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-016/images/photo4.jpg -------------------------------------------------------------------------------- /src/days/Day-016/images/photo5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-016/images/photo5.jpg -------------------------------------------------------------------------------- /src/days/Day-016/images/photo6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-016/images/photo6.jpg -------------------------------------------------------------------------------- /src/days/Day-016/images/photo7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-016/images/photo7.jpg -------------------------------------------------------------------------------- /src/days/Day-016/images/photo8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-016/images/photo8.jpg -------------------------------------------------------------------------------- /src/days/Day-016/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | flex-direction: column; 7 | } 8 | 9 | .container { 10 | margin: auto; 11 | margin-top: 30px; 12 | overflow-x: hidden; 13 | max-width: 768px; 14 | } 15 | 16 | .carousel { 17 | display: flex; 18 | transition: transform 500ms; 19 | } 20 | 21 | .carousel > div { 22 | flex-shrink: 0; 23 | width: 100%; 24 | height: 400px; 25 | box-sizing: border-box; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | } 30 | 31 | div > img { 32 | width: 100%; 33 | height: 100%; 34 | object-position: center; 35 | object-fit: cover; 36 | } 37 | 38 | div > button { 39 | margin: 20px 30px; 40 | background-color: white; 41 | font-size: 1.8rem; 42 | padding: 2px 10px; 43 | border: none; 44 | color: #333; 45 | border-radius: 5px; 46 | box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3); 47 | box-sizing: border-box; 48 | line-height: 40px; 49 | } 50 | 51 | div > button { 52 | font-family: 'Courier New', Courier, monospace; 53 | font-weight: bold; 54 | } 55 | 56 | @media (max-width: 486px) { 57 | .container { 58 | margin-top: 0; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/days/Day-016/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Carousel First Iteration 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 |
39 |
40 | 41 | 42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/days/Day-016/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-017/images/appstore.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/appstore.jpg -------------------------------------------------------------------------------- /src/days/Day-017/images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/background.jpg -------------------------------------------------------------------------------- /src/days/Day-017/images/camera.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/camera.jpg -------------------------------------------------------------------------------- /src/days/Day-017/images/facetime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/facetime.png -------------------------------------------------------------------------------- /src/days/Day-017/images/health.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/health.png -------------------------------------------------------------------------------- /src/days/Day-017/images/mailicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/mailicon.png -------------------------------------------------------------------------------- /src/days/Day-017/images/maps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/maps.png -------------------------------------------------------------------------------- /src/days/Day-017/images/messages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/messages.png -------------------------------------------------------------------------------- /src/days/Day-017/images/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/music.png -------------------------------------------------------------------------------- /src/days/Day-017/images/newsicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/newsicon.png -------------------------------------------------------------------------------- /src/days/Day-017/images/notes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/notes.png -------------------------------------------------------------------------------- /src/days/Day-017/images/phone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/phone.jpg -------------------------------------------------------------------------------- /src/days/Day-017/images/phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/phone.png -------------------------------------------------------------------------------- /src/days/Day-017/images/podcasts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/podcasts.png -------------------------------------------------------------------------------- /src/days/Day-017/images/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/safari.png -------------------------------------------------------------------------------- /src/days/Day-017/images/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/settings.png -------------------------------------------------------------------------------- /src/days/Day-017/images/stocks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/stocks.png -------------------------------------------------------------------------------- /src/days/Day-017/images/wallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/wallet.png -------------------------------------------------------------------------------- /src/days/Day-017/images/weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/images/weather.png -------------------------------------------------------------------------------- /src/days/Day-017/index.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | const [loading] = document.querySelectorAll('.loading > .fill'); 3 | const [loadingBox] = document.getElementsByClassName('loading-box'); 4 | const [homescreen] = document.getElementsByClassName('homescreen'); 5 | const [iconGrid] = document.getElementsByClassName('icons-grid'); 6 | const [app] = document.getElementsByClassName('app-screen'); 7 | const [homeButton] = document.getElementsByClassName('home-button'); 8 | 9 | let gridX = 0, 10 | gridY = 0; 11 | 12 | loading.addEventListener( 13 | 'animationend', 14 | () => { 15 | loadingBox.style.display = 'none'; 16 | homescreen.style.display = 'flex'; 17 | const { x, y } = iconGrid.getBoundingClientRect(); 18 | gridX = x; 19 | gridY = y; 20 | }, 21 | { once: true } 22 | ); 23 | 24 | homescreen.addEventListener('click', (e) => { 25 | const x = e.clientX - gridX; 26 | const y = e.clientY - gridY; 27 | 28 | if (e.target.nodeName === 'IMG') { 29 | app.style.transformOrigin = `${x}px ${y}px`; 30 | app.style.transform = 'scale(1)'; 31 | } 32 | }); 33 | 34 | homeButton.addEventListener('click', () => { 35 | app.style.transform = 'scale(0)'; 36 | }); 37 | }; 38 | -------------------------------------------------------------------------------- /src/days/Day-017/iphone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-017/iphone.jpg -------------------------------------------------------------------------------- /src/days/Day-017/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-018/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --body-padding-top: 30px; 3 | } 4 | 5 | body { 6 | font-family: Arial, Helvetica, sans-serif; 7 | color: white; 8 | background-color: #333; 9 | } 10 | 11 | main { 12 | max-width: 768px; 13 | margin: auto; 14 | padding-top: var(--body-padding-top); 15 | } 16 | 17 | p { 18 | text-align: justify; 19 | } 20 | 21 | .highlight { 22 | background-color: orange; 23 | color: #333; 24 | } 25 | 26 | .highlight.active { 27 | background-color: yellow; 28 | } 29 | 30 | .search-box { 31 | display: flex; 32 | margin-bottom: 35px; 33 | } 34 | 35 | #search { 36 | flex-grow: 1; 37 | border-radius: 10px 0 0 10px; 38 | padding: 10px 10px; 39 | border: none; 40 | box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.4); 41 | } 42 | 43 | .found { 44 | background-color: white; 45 | border: none; 46 | width: 40px; 47 | color: black; 48 | text-align: center; 49 | display: flex; 50 | align-items: center; 51 | justify-content: center; 52 | } 53 | 54 | .search-box > button { 55 | background-color: white; 56 | border: none; 57 | padding: 0 15px; 58 | } 59 | 60 | #down-button { 61 | border-radius: 0 10px 10px 0; 62 | } 63 | 64 | @media (max-width: 769px) { 65 | body { 66 | padding: 0 40px; 67 | padding-top: var(--body-padding-top); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/days/Day-018/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-019/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rotating Loader 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /src/days/Day-019/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-020/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Neumorphic Calendar 📅 7 | 8 | 9 | 10 | 11 |
12 |
13 |
<
14 |
June 2019
15 |
>
16 |
17 |
18 |
19 |
20 |
Mon
21 |
Tue
22 |
Wed
23 |
Thu
24 |
Fri
25 |
Sat
26 |
Sun
27 |
28 |
29 |
30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/days/Day-020/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-021/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-022/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Alternating Circles 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /src/days/Day-023/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-024/images/black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-024/images/black.png -------------------------------------------------------------------------------- /src/days/Day-024/images/blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-024/images/blue.png -------------------------------------------------------------------------------- /src/days/Day-024/images/lightblue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-024/images/lightblue.png -------------------------------------------------------------------------------- /src/days/Day-024/images/red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-024/images/red.png -------------------------------------------------------------------------------- /src/days/Day-024/images/white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-024/images/white.png -------------------------------------------------------------------------------- /src/days/Day-024/index.js: -------------------------------------------------------------------------------- 1 | if (document.location.hash == '' || document.location.hash == '#') 2 | document.location.hash = '#product-red'; 3 | -------------------------------------------------------------------------------- /src/days/Day-024/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Horizontally Animated Menu 7 | 8 | 9 | 10 | 11 |
12 |
13 | 19 |
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/days/Day-025/index.js: -------------------------------------------------------------------------------- 1 | const [container] = document.getElementsByClassName('container'); 2 | const [lineTop, , lineBottom] = container.children; 3 | let isOpen = false; 4 | 5 | container.addEventListener('click', (e) => { 6 | container.classList.remove(isOpen ? 'active' : 'inactive'); 7 | container.classList.add(isOpen ? 'inactive' : 'active'); 8 | isOpen = !isOpen; 9 | }); 10 | -------------------------------------------------------------------------------- /src/days/Day-025/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-026/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Open-Close Animated Menu 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/days/Day-026/index.js: -------------------------------------------------------------------------------- 1 | const [container] = document.getElementsByClassName('container'); 2 | let isOpen = true; 3 | container.addEventListener('click', () => { 4 | container.classList.remove('pristine'); 5 | isOpen ? container.classList.add('active') : container.classList.remove('active'); 6 | isOpen = !isOpen; 7 | }); 8 | -------------------------------------------------------------------------------- /src/days/Day-026/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-027/index.js: -------------------------------------------------------------------------------- 1 | const [hour] = document.getElementsByClassName('hour'); 2 | const [minutes] = document.getElementsByClassName('minutes'); 3 | 4 | const [date] = document.getElementsByClassName('date'); 5 | 6 | updateTime(); 7 | setInterval(updateTime, 1000); 8 | 9 | function updateTime() { 10 | const now = new Date(); 11 | hour.innerText = now.getHours(); 12 | minutes.innerText = now.getMinutes().toString().padStart(2, '0'); 13 | 14 | date.innerHTML = humanReadableDate(now); 15 | } 16 | 17 | function humanReadableDate(date) { 18 | const options = { year: 'numeric', month: 'long', day: '2-digit', weekday: 'short' }; 19 | return date.toLocaleDateString(undefined, options); 20 | } 21 | -------------------------------------------------------------------------------- /src/days/Day-027/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-028/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lamp 💡 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /src/days/Day-028/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-029/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-030/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spinning Squares 🔲🔳 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /src/days/Day-030/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-031/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --dimensions: 350px; 3 | } 4 | 5 | body, 6 | html { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: #222; 12 | color: white; 13 | font-family: Arial, Helvetica, sans-serif; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | 19 | h1 { 20 | text-align: center; 21 | font-size: 2rem; 22 | font-weight: bold; 23 | margin-bottom: 10px; 24 | letter-spacing: 0.2rem; 25 | } 26 | 27 | h2 { 28 | text-align: center; 29 | margin-bottom: 20px; 30 | } 31 | 32 | #picture { 33 | height: 350px; 34 | width: 350px; 35 | margin: 0 auto; 36 | display: block; 37 | } 38 | 39 | .buttons { 40 | display: flex; 41 | margin-top: 25px; 42 | width: 100%; 43 | justify-content: center; 44 | } 45 | 46 | button { 47 | background-color: white; 48 | color: #222; 49 | font-size: 1.2rem; 50 | border: none; 51 | margin: 0 20px; 52 | padding: 5px 20px; 53 | border-radius: 3px; 54 | cursor: pointer; 55 | } 56 | -------------------------------------------------------------------------------- /src/days/Day-031/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Art Generator 🖼 7 | 8 | 9 | 10 | 11 |
12 |

Modern Art Generator

13 |

Just for 250,000 USD$

14 | 15 |
16 | 17 | 18 | 19 |
20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/days/Day-031/random.js: -------------------------------------------------------------------------------- 1 | export function randomChoice(arr) { 2 | return arr[Math.floor(Math.random() * arr.length)]; 3 | } 4 | 5 | export function getRandomNumber(min, max) { 6 | return Math.floor(Math.random() * (max - min) + min); 7 | } 8 | -------------------------------------------------------------------------------- /src/days/Day-031/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-032/ghost.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-032/ghost.jpg -------------------------------------------------------------------------------- /src/days/Day-032/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-033/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Newton Cradle 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /src/days/Day-033/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-034/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --height: 60px; 3 | --width: 180px; 4 | } 5 | 6 | body, 7 | html { 8 | height: 100%; 9 | } 10 | 11 | body { 12 | background-color: #2d3e50; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | button { 19 | text-decoration: none; 20 | text-transform: uppercase; 21 | width: 300px; 22 | display: inline-block; 23 | text-align: center; 24 | line-height: 1.8rem; 25 | padding: 10px 20px; 26 | background-color: #00a7dc; 27 | color: #fff; 28 | font-size: 26px; 29 | font-weight: 700; 30 | transition: all 0.3s ease-out; 31 | border: none; 32 | position: relative; 33 | transform-origin: 50% 0; 34 | transform-style: preserve-3d; 35 | cursor: pointer; 36 | } 37 | 38 | button::before { 39 | content: attr(hover-text); 40 | position: absolute; 41 | left: 0; 42 | top: 100%; 43 | width: 100%; 44 | height: 100%; 45 | color: #fff; 46 | transition: all 0.3s ease out; 47 | display: flex; 48 | align-items: center; 49 | justify-content: center; 50 | background-color: #0965a0; 51 | transform: rotateX(-90deg); 52 | transform-origin: 50% 0; 53 | transform-style: preserve-3d; 54 | } 55 | 56 | button:focus::before { 57 | outline: 3px solid #0965a099; 58 | } 59 | 60 | button:hover, 61 | button:focus { 62 | transform: rotateX(90deg) translateY(-10px); 63 | } 64 | -------------------------------------------------------------------------------- /src/days/Day-034/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 3D Button 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/days/Day-034/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-035/cold.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-035/cold.png -------------------------------------------------------------------------------- /src/days/Day-035/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-036/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Red Diamond 💎 7 | 8 | 9 | 10 | 11 |

100% not an expensive ruby

12 |
13 |
✨
14 |
✨
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /src/days/Day-036/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-037/duck.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-037/duck.jpg -------------------------------------------------------------------------------- /src/days/Day-037/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Cube 7 | 8 | 9 | 10 | 11 |
12 |
13 | First Try At Cubes 14 |
15 |
16 | This cube was completely made with CSS 17 |
18 |
19 | There's really not much to it 20 |
21 |
22 | 23 |

This is a duck

24 |
25 |
26 | There's also text up here! 27 |
28 |
29 | And down here as well! 30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /src/days/Day-037/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-038/index.js: -------------------------------------------------------------------------------- 1 | const [menu] = document.querySelectorAll('.menu'); 2 | 3 | menu.addEventListener('click', (e) => { 4 | if (e.target.nodeName === 'LI') { 5 | const color = getCSSVariable(`--${e.target.id}`); 6 | setTheme(color); 7 | } 8 | }); 9 | 10 | function getCSSVariable(name) { 11 | return getComputedStyle(document.documentElement).getPropertyValue(name); 12 | } 13 | 14 | function setTheme(name) { 15 | document.documentElement.style.setProperty('--primary-color', name); 16 | } 17 | -------------------------------------------------------------------------------- /src/days/Day-038/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-039/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Slime Cube 🟩 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /src/days/Day-039/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | -------------------------------------------------------------------------------- /src/days/Day-040/index.js: -------------------------------------------------------------------------------- 1 | const [bait] = document.getElementsByClassName('banner_ad'); 2 | const [closeButton] = document.getElementsByClassName('close'); 3 | 4 | if (bait.clientHeight === 0) { 5 | toggleAdblockBanner(true); 6 | } 7 | 8 | closeButton.addEventListener('click', () => { 9 | toggleAdblockBanner(false); 10 | }); 11 | 12 | function toggleAdblockBanner(open) { 13 | const [body] = document.getElementsByTagName('body'); 14 | const [banner] = document.getElementsByTagName('aside'); 15 | const [filter] = document.getElementsByClassName('filter'); 16 | 17 | body.style.overflowY = open ? 'hidden' : 'auto'; 18 | open ? banner.classList.remove('hidden') : banner.classList.add('hidden'); 19 | open ? filter.classList.remove('hidden') : filter.classList.add('hidden'); 20 | } 21 | -------------------------------------------------------------------------------- /src/days/Day-042/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | font-family: Arial, Helvetica, sans-serif; 8 | background-color: #333; 9 | color: white; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | flex-direction: column; 14 | } 15 | 16 | h1 { 17 | margin-bottom: 20px; 18 | font-size: 2rem; 19 | letter-spacing: 0.075rem; 20 | } 21 | 22 | .button-row { 23 | display: flex; 24 | } 25 | 26 | button { 27 | margin: 10px 20px; 28 | background-color: white; 29 | border: 0; 30 | padding: 2px 10px; 31 | border-radius: 2px; 32 | } 33 | -------------------------------------------------------------------------------- /src/days/Day-042/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Game of Life 7 | 8 | 9 | 10 | 11 |

Conway's Game of Life

12 |
13 | 14 |
15 |
16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/days/Day-043/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Youtube Loading Animation 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /src/days/Day-044/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-044/dog.jpg -------------------------------------------------------------------------------- /src/days/Day-044/index.js: -------------------------------------------------------------------------------- 1 | const [dogImage] = document.querySelectorAll('img'); 2 | 3 | let options = { 4 | rootMargin: '0px', 5 | threshold: 0.75, 6 | }; 7 | 8 | let observer = new IntersectionObserver((entries) => { 9 | if (entries[0].isIntersecting) { 10 | dogImage.classList.add('appear'); 11 | } 12 | }, options); 13 | 14 | observer.observe(dogImage); 15 | -------------------------------------------------------------------------------- /src/days/Day-045/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Radio Button Animation 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /src/days/Day-046/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tree 🌲 7 | 8 | 9 | 10 | 11 |

Just a CSS Tree 🌲

12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /src/days/Day-047/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Random CSS Picker 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
Your selected color
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /src/days/Day-048/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --rotation-speed: 500ms; 3 | --background-color: #222; 4 | } 5 | 6 | html, 7 | body { 8 | height: 100%; 9 | overflow-x: hidden; 10 | color: white; 11 | } 12 | 13 | body { 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | background-color: var(--background-color); 19 | font-family: Arial, Helvetica, sans-serif; 20 | } 21 | 22 | h1 { 23 | font-size: 1.8rem; 24 | margin-bottom: 2rem; 25 | letter-spacing: 0.1rem; 26 | font-weight: bold; 27 | text-transform: uppercase; 28 | } 29 | .container { 30 | display: grid; 31 | grid-template-columns: repeat(2, 1fr); 32 | grid-template-rows: repeat(2, 1fr); 33 | gap: 1.5rem; 34 | height: 300px; 35 | width: 300px; 36 | } 37 | 38 | .color { 39 | height: 100%; 40 | width: 100%; 41 | cursor: pointer; 42 | } 43 | 44 | .title { 45 | margin-bottom: 2rem; 46 | font-size: 1.4rem; 47 | text-transform: uppercase; 48 | } 49 | 50 | .stats { 51 | margin-top: 1rem; 52 | display: flex; 53 | } 54 | 55 | .stats > * { 56 | margin: 0 10px; 57 | } 58 | 59 | .lives { 60 | margin-top: 1rem; 61 | } 62 | -------------------------------------------------------------------------------- /src/days/Day-048/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Guess The Color 7 | 8 | 9 | 10 | 11 |

Guess The Color!

12 |

13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |

Score: 0

21 |

22 |
23 |

Tries: 🤠🤠🤠🤠🤠🤠🤠🤠🤠🤠🤠

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/days/Day-048/util.js: -------------------------------------------------------------------------------- 1 | export const generateRandomHex = () => { 2 | return `#${Math.floor(Math.random() * 16777215) 3 | .toString(16) 4 | .padEnd(6, '0')}`; 5 | }; 6 | 7 | export const rgb2hex = (rgb) => { 8 | if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb; 9 | 10 | rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 11 | function hex(x) { 12 | return ('0' + parseInt(x).toString(16)).slice(-2); 13 | } 14 | return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 15 | }; 16 | 17 | export const getRandomArbitrary = (min, max) => { 18 | return Math.floor(Math.random() * (max - min) + min); 19 | }; 20 | -------------------------------------------------------------------------------- /src/days/Day-051/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | overflow-x: hidden; 5 | color: #333; 6 | } 7 | 8 | body { 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | background-color: var(--background-color); 14 | font-family: Arial, Helvetica, sans-serif; 15 | counter-reset: heading; 16 | } 17 | 18 | main { 19 | max-width: 768px; 20 | } 21 | 22 | h1 { 23 | font-weight: bold; 24 | margin-bottom: 20px; 25 | font-size: 1.8rem; 26 | } 27 | 28 | h2 { 29 | counter-increment: heading; 30 | position: relative; 31 | margin: 0.5rem 0 1rem 0; 32 | margin-left: 1.15rem; 33 | font-size: 1.2rem; 34 | font-weight: bold; 35 | } 36 | 37 | h2::before { 38 | position: absolute; 39 | top: 0; 40 | right: 100%; 41 | content: counter(heading) '.'; 42 | margin-right: 0.2rem; 43 | } 44 | 45 | p { 46 | margin-bottom: 0.7rem; 47 | } 48 | -------------------------------------------------------------------------------- /src/days/Day-052/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mail 📮 7 | 8 | 9 | 10 | 11 |
12 |

We'll get back to you soon!

13 |
14 |
15 |
16 | 17 |
18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/days/Day-052/index.js: -------------------------------------------------------------------------------- 1 | const send = document.querySelector('button'); 2 | const textarea = document.querySelector('textarea'); 3 | const mail = document.querySelector('.mailbox'); 4 | const message = document.querySelector('.message'); 5 | 6 | send.addEventListener('click', () => { 7 | textarea.classList.add('send'); 8 | mail.classList.add('close'); 9 | mail.classList.add('sendToMailbox'); 10 | message.classList.add('appear'); 11 | }); 12 | -------------------------------------------------------------------------------- /src/days/Day-053/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Data Placeholder 7 | 8 | 9 | 10 | 11 |
12 |

Placeholder Content

13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /src/days/Day-054/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Github Actions Loader 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /src/days/Day-055/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Recording Button 🔴 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/days/Day-056/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --circle-color-active: #dbab09; 3 | --circle-color-inactive: #7c6c21; 4 | } 5 | 6 | html, 7 | body { 8 | height: 100%; 9 | } 10 | 11 | body { 12 | font-family: Arial, Helvetica, sans-serif; 13 | background-color: #333; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | flex-wrap: wrap; 19 | } 20 | 21 | .product { 22 | width: 33.3%; 23 | margin: 20px; 24 | box-sizing: border-box; 25 | background-color: white; 26 | border-radius: 5px; 27 | padding: 10px 20px; 28 | } 29 | 30 | .title { 31 | font-size: 1.4rem; 32 | font-weight: bold; 33 | margin-bottom: 0.2rem; 34 | } 35 | 36 | .subtitle { 37 | font-size: 0.95rem; 38 | margin-bottom: 0.2rem; 39 | } 40 | 41 | .description { 42 | color: #555; 43 | font-size: 0.85rem; 44 | } 45 | 46 | .new { 47 | position: relative; 48 | display: inline-block; 49 | } 50 | 51 | .new::after { 52 | content: 'NEW'; 53 | position: absolute; 54 | left: 100%; 55 | top: 50%; 56 | transform: translateY(-50%); 57 | margin-left: 10px; 58 | font-weight: normal; 59 | font-size: 0.8rem; 60 | padding: 5px; 61 | background-color: red; 62 | border-radius: 4px; 63 | color: white; 64 | font-weight: bold; 65 | } 66 | 67 | @media (max-width: 486px) { 68 | .product { 69 | width: 100%; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/days/Day-057/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Google's Windmill 💨 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /src/days/Day-058/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flippable Card 🃏 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 🃏 15 | Yo 16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /src/days/Day-059/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Javascript Satellites 7 | 8 | 9 | 10 | 11 |
12 | js 13 | react 14 | vue 15 | angular 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /src/days/Day-059/logos/angular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/days/Day-059/logos/vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/days/Day-060/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --orbitate-duration: 2.8s; 3 | } 4 | 5 | html, 6 | body { 7 | height: 100%; 8 | overflow-y: hidden; 9 | } 10 | 11 | body { 12 | font-family: Arial, Helvetica, sans-serif; 13 | background-color: lightseagreen; 14 | perspective: 25rem; 15 | } 16 | 17 | .board { 18 | height: 300px; 19 | width: 300px; 20 | position: absolute; 21 | left: 50%; 22 | top: 50%; 23 | transform: translate(-50%, -50%); 24 | 25 | display: grid; 26 | grid-template-rows: repeat(8, 1fr); 27 | border: 1px solid aliceblue; 28 | } 29 | 30 | .row { 31 | display: grid; 32 | grid-template-columns: repeat(8, 1fr); 33 | } 34 | 35 | .row:nth-of-type(2n + 1) > .cell:nth-of-type(2n + 1), 36 | .row:nth-of-type(2n) > .cell:nth-of-type(2n) { 37 | background-color: aliceblue; 38 | } 39 | 40 | .piece { 41 | height: 100%; 42 | width: 100%; 43 | object-fit: contain; 44 | } 45 | -------------------------------------------------------------------------------- /src/days/Day-060/pieces/black/bishop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 13 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/days/Day-060/pieces/black/horse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 11 | 14 | 18 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/days/Day-060/pieces/black/king.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 12 | 15 | 18 | 21 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/days/Day-060/pieces/black/pawn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | -------------------------------------------------------------------------------- /src/days/Day-060/pieces/white/bishop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 13 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/days/Day-060/pieces/white/horse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 11 | 14 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/days/Day-060/pieces/white/king.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 11 | 14 | 17 | 20 | 23 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/days/Day-060/pieces/white/pawn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | -------------------------------------------------------------------------------- /src/days/Day-060/pieces/white/tower.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 11 | 14 | 16 | 19 | 21 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/days/Day-061/icon/android-icon-192x192-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/android-icon-192x192-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/apple-icon-114x114-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/apple-icon-114x114-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/apple-icon-120x120-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/apple-icon-120x120-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/apple-icon-144x144-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/apple-icon-144x144-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/apple-icon-152x152-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/apple-icon-152x152-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/apple-icon-180x180-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/apple-icon-180x180-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/apple-icon-57x57-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/apple-icon-57x57-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/apple-icon-60x60-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/apple-icon-60x60-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/apple-icon-72x72-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/apple-icon-72x72-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/apple-icon-76x76-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/apple-icon-76x76-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/favicon-16x16-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/favicon-16x16-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/favicon-32x32-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/favicon-32x32-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/icon/favicon-96x96-dunplab-manifest-6907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-061/icon/favicon-96x96-dunplab-manifest-6907.png -------------------------------------------------------------------------------- /src/days/Day-061/index.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector('.stop'); 2 | const dice = document.querySelector('.dice'); 3 | const result = document.querySelector('.result'); 4 | 5 | let reroll = false; 6 | let canClick = true; 7 | 8 | button.addEventListener('click', () => { 9 | const number = getRandom(1, 7); 10 | if (reroll === false) { 11 | result.innerHTML = number; 12 | dice.classList.add(`p${number}`); 13 | button.innerHTML = 'reroll'; 14 | reroll = true; 15 | } else { 16 | dice.classList.remove(...dice.classList); 17 | dice.classList.add('dice'); 18 | 19 | setTimeout(() => { 20 | result.innerHTML = number; 21 | dice.classList.add(`p${number}`); 22 | button.innerHTML = 'reroll'; 23 | }, 1000); 24 | } 25 | }); 26 | 27 | function getRandom(min, max) { 28 | return Math.floor(Math.random() * (max - min) + min); 29 | } 30 | -------------------------------------------------------------------------------- /src/days/Day-062/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --duration: 350ms; 3 | } 4 | 5 | html, 6 | body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | font-family: Arial, Helvetica, sans-serif; 12 | background-color: lightseagreen; 13 | } 14 | 15 | .loader { 16 | height: 40px; 17 | width: 300px; 18 | position: absolute; 19 | left: 50%; 20 | top: 50%; 21 | transform: translate(-50%, -50%); 22 | display: flex; 23 | justify-content: center; 24 | } 25 | 26 | .bar { 27 | height: 100%; 28 | width: 10px; 29 | border-radius: 10px; 30 | background-color: white; 31 | margin: 0 4px; 32 | } 33 | 34 | .bar:nth-of-type(2) { 35 | animation: load var(--duration) ease-in-out infinite alternate calc(var(--duration) / -2); 36 | } 37 | 38 | .bar:nth-of-type(1) { 39 | animation: load var(--duration) ease-in-out infinite alternate 0ms; 40 | } 41 | 42 | .bar:nth-of-type(3) { 43 | animation: load var(--duration) ease-in-out infinite alternate calc(var(--duration) * -1); 44 | } 45 | 46 | @keyframes load { 47 | from { 48 | transform: scaleY(1); 49 | } 50 | 51 | to { 52 | transform: scaleY(1.8); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/days/Day-062/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sound Bar Loader 🎼 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /src/days/Day-063/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Battery 🔋 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /src/days/Day-064/images/photo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-064/images/photo1.jpg -------------------------------------------------------------------------------- /src/days/Day-064/images/photo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-064/images/photo2.jpg -------------------------------------------------------------------------------- /src/days/Day-064/images/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-064/images/photo3.jpg -------------------------------------------------------------------------------- /src/days/Day-064/index.js: -------------------------------------------------------------------------------- 1 | const carouselContainer = document.querySelector('.container'); 2 | const bars = document.querySelectorAll('.item'); 3 | 4 | let position = 0; 5 | let originalTransition = window.getComputedStyle(carouselContainer).transition; 6 | 7 | setInterval(() => { 8 | carouselContainer.style.transform = `translateX(-${(++position % 3) * 100}%)`; 9 | showBar(bars, position % 3); 10 | }, 1500); 11 | 12 | showBar(bars, position); 13 | 14 | function showBar(bars, i) { 15 | bars.forEach((bar, j) => { 16 | if (i === j) { 17 | bar.classList.add('active'); 18 | } else { 19 | bar.classList.remove('active'); 20 | } 21 | }); 22 | } 23 | -------------------------------------------------------------------------------- /src/days/Day-065/newsletter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Newsletter 7 | 8 | 9 | thanks for joining 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/days/Day-066/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --animation-duration: 500ms; 3 | } 4 | 5 | body, 6 | html { 7 | height: 100%; 8 | overflow-x: hidden; 9 | } 10 | 11 | body { 12 | font-family: Arial, Helvetica, sans-serif; 13 | color: #333; 14 | } 15 | 16 | header { 17 | width: 100%; 18 | background-color: rebeccapurple; 19 | padding: 20px 30px; 20 | position: sticky; 21 | top: 0; 22 | opacity: 0.95; 23 | } 24 | 25 | li { 26 | margin: 0 20px; 27 | display: inline; 28 | } 29 | 30 | header a { 31 | color: white; 32 | text-decoration: none; 33 | } 34 | 35 | header a:hover { 36 | opacity: 0.8; 37 | } 38 | 39 | main { 40 | max-width: 768px; 41 | margin: 0 auto; 42 | } 43 | 44 | h1 { 45 | margin-top: 20px; 46 | font-weight: bold; 47 | font-size: 2.8rem; 48 | margin-bottom: 10px; 49 | } 50 | 51 | p { 52 | margin-bottom: 20px; 53 | line-height: 1.4rem; 54 | } 55 | 56 | @media (max-width: 768px) { 57 | main { 58 | padding: 0 30px; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/days/Day-067/index.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | overflow-x: hidden; 5 | } 6 | 7 | body { 8 | background: rgb(237, 113, 56); 9 | background: -moz-linear-gradient(0deg, rgba(237, 113, 56, 1) 0%, rgba(251, 244, 43, 1) 100%); 10 | background: -webkit-linear-gradient(0deg, rgba(237, 113, 56, 1) 0%, rgba(251, 244, 43, 1) 100%); 11 | background: linear-gradient(0deg, rgba(237, 113, 56, 1) 0%, rgba(251, 244, 43, 1) 100%); 12 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed7138",endColorstr="#fbf42b",GradientType=1); 13 | } 14 | 15 | .loader { 16 | height: 125px; 17 | width: 125px; 18 | position: absolute; 19 | left: 50%; 20 | top: 50%; 21 | transform: translate(-50%, -50%); 22 | display: flex; 23 | justify-content: space-between; 24 | border-radius: 100%; 25 | overflow: hidden; 26 | animation: rotate 5s linear infinite alternate; 27 | } 28 | 29 | .bar { 30 | height: 100%; 31 | width: 2px; 32 | background-color: red; 33 | border-radius: 5px; 34 | transform-origin: 50% 100%; 35 | } 36 | 37 | @keyframes rotate { 38 | from { 39 | transform: translate(-50%, -50%) rotate(0deg); 40 | } 41 | 42 | to { 43 | transform: translate(-50%, -50%) rotate(3600deg); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/days/Day-067/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spinning Sun ☀ 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /src/days/Day-068/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spinning Yarn Ball 🧶 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /src/days/Day-069/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bar-width: 250px; 3 | 4 | --stripe-first-color: #c3dafe; 5 | --stripe-second-color: #667eea; 6 | --stripe-third-color: #3c366b; 7 | 8 | --stripe-width: 10px; 9 | } 10 | 11 | body, 12 | html { 13 | height: 100%; 14 | overflow-x: hidden; 15 | } 16 | 17 | body { 18 | background-color: #333; 19 | } 20 | 21 | .bar { 22 | height: 15px; 23 | width: var(--bar-width); 24 | border-radius: 5px; 25 | background-color: transparent; 26 | left: 50%; 27 | top: 50%; 28 | position: absolute; 29 | transform: translate(-50%, -50%); 30 | overflow: hidden; 31 | } 32 | 33 | .bar::before { 34 | content: ''; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | height: 100%; 39 | width: 200%; 40 | background: repeating-linear-gradient( 41 | 45deg, 42 | var(--stripe-first-color), 43 | var(--stripe-first-color) var(--stripe-width), 44 | var(--stripe-second-color) var(--stripe-width), 45 | var(--stripe-second-color) calc(var(--stripe-width) * 2) 46 | ); 47 | border-radius: 5px; 48 | transform: translateX(-50%); 49 | animation: load 1.7s linear infinite; 50 | } 51 | 52 | @keyframes load { 53 | from { 54 | transform: translateX(-50%); 55 | } 56 | 57 | to { 58 | transform: translateX(0%); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/days/Day-069/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap Progress Bar 💈 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /src/days/Day-070/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bar-width: 250px; 3 | 4 | --stripe-first-color: #c3dafe; 5 | --stripe-second-color: #667eea; 6 | --stripe-third-color: #3c366b; 7 | 8 | --stripe-width: 10px; 9 | } 10 | 11 | body, 12 | html { 13 | height: 100%; 14 | overflow-x: hidden; 15 | } 16 | 17 | body { 18 | background-color: #333; 19 | font-family: Arial, Helvetica, sans-serif; 20 | } 21 | 22 | [type='file'] { 23 | display: none; 24 | } 25 | 26 | [type='file'] + label::after { 27 | content: 'Upload a text file here and it will be rendered below!'; 28 | text-align: center; 29 | position: absolute; 30 | color: white; 31 | height: 100px; 32 | width: 300px; 33 | background-color: #111; 34 | cursor: pointer; 35 | left: 50%; 36 | top: 10%; 37 | transform: translate(-50%, 0%); 38 | display: flex; 39 | justify-content: center; 40 | align-items: center; 41 | padding: 0 10px; 42 | } 43 | 44 | #content { 45 | max-width: 768px; 46 | line-height: 1.5rem; 47 | font-size: 1.2rem; 48 | color: white; 49 | top: calc(15% + 100px); 50 | margin: 0 auto; 51 | position: relative; 52 | } 53 | -------------------------------------------------------------------------------- /src/days/Day-070/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Client Side File Reader 📃 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/days/Day-070/index.js: -------------------------------------------------------------------------------- 1 | const file = document.getElementById('file'); 2 | const content = document.getElementById('content'); 3 | 4 | file.addEventListener('input', (e) => { 5 | console.log(e.target.files); 6 | const reader = new FileReader(); 7 | reader.addEventListener('load', (evt) => { 8 | console.log(evt); 9 | content.innerHTML = evt.target.result; 10 | }); 11 | reader.readAsText(e.target.files[0], 'UTF-8'); 12 | }); 13 | -------------------------------------------------------------------------------- /src/days/Day-071/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-color: #c3dafe; 3 | --button-bg: #667eea; 4 | --button-border: #3c366b; 5 | } 6 | 7 | body, 8 | html { 9 | height: 100%; 10 | overflow-x: hidden; 11 | } 12 | 13 | body { 14 | background-color: var(--bg-color); 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | #notifyButton { 21 | background-color: var(--button-bg); 22 | border: 0px; 23 | border-bottom: 3px solid var(--button-border); 24 | color: white; 25 | border-radius: 5px; 26 | padding: 5px 10px; 27 | font-size: 1.4rem; 28 | letter-spacing: 0.065rem; 29 | cursor: pointer; 30 | } 31 | -------------------------------------------------------------------------------- /src/days/Day-071/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Notification 🔔 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/days/Day-071/index.js: -------------------------------------------------------------------------------- 1 | const button = document.getElementById('notifyButton'); 2 | 3 | button.addEventListener('click', async () => { 4 | if (!('Notification' in window)) { 5 | alert('Your browser does not support web notifications 😞'); 6 | } else if (Notification.permission === 'granted') { 7 | sendNotification(); 8 | } else { 9 | const permission = await Notification.requestPermission(); 10 | if (permission === 'granted') { 11 | sendNotification(); 12 | } 13 | } 14 | }); 15 | 16 | function sendNotification() { 17 | new Notification('A Web notification', { 18 | body: 'Hello there! This is a web notification! 🎅', 19 | vibrate: window.navigator.vibrate([200, 100, 200, 100, 500]), 20 | }); 21 | } 22 | 23 | self.addEventListener('notificationclick', (e) => { 24 | console.log(e); 25 | }); 26 | -------------------------------------------------------------------------------- /src/days/Day-072/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Neon Shiny Thing 🕺 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /src/days/Day-073/index.js: -------------------------------------------------------------------------------- 1 | const balls = document.querySelectorAll('.ball'); 2 | const main = document.querySelector('main'); 3 | const bar = document.querySelector('.bar'); 4 | 5 | let options = { 6 | rootMargin: '0px', 7 | threshold: 0.05, 8 | }; 9 | 10 | const observer = new IntersectionObserver((entries) => { 11 | if (entries[0].isIntersecting) { 12 | for (let i = 0; i < 300; i++) { 13 | const ball = document.createElement('div'); 14 | ball.classList.add('ball'); 15 | main.insertBefore(ball, bar); 16 | } 17 | } 18 | }); 19 | 20 | observer.observe(bar); 21 | -------------------------------------------------------------------------------- /src/days/Day-074/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Top Loader 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/days/Day-075/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | File Downloader 7 | 8 | 9 | 10 | 11 |

Create and Download your own file!

12 |
13 | 14 | 21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/days/Day-075/index.js: -------------------------------------------------------------------------------- 1 | function createFileAndDownload(filename, text) { 2 | const dummyLink = document.createElement('a'); 3 | dummyLink.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); 4 | dummyLink.setAttribute('download', filename); 5 | 6 | dummyLink.style.display = 'none'; 7 | document.body.appendChild(dummyLink); 8 | 9 | dummyLink.click(); 10 | 11 | document.body.removeChild(dummyLink); 12 | } 13 | 14 | document.getElementById('downloadForm').addEventListener('submit', (e) => { 15 | e.preventDefault(); 16 | const filename = document.getElementById('filename').value; 17 | const content = document.getElementById('file-content').value; 18 | 19 | createFileAndDownload(filename, content); 20 | document.querySelector('form').reset(); 21 | }); 22 | -------------------------------------------------------------------------------- /src/days/Day-076/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Slack Emoji 😃 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /src/days/Day-079/images/photo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-079/images/photo1.jpg -------------------------------------------------------------------------------- /src/days/Day-079/images/photo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-079/images/photo2.jpg -------------------------------------------------------------------------------- /src/days/Day-079/images/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-079/images/photo3.jpg -------------------------------------------------------------------------------- /src/days/Day-079/images/photo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-079/images/photo4.jpg -------------------------------------------------------------------------------- /src/days/Day-079/images/photo5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-079/images/photo5.jpg -------------------------------------------------------------------------------- /src/days/Day-079/images/photo6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-079/images/photo6.jpg -------------------------------------------------------------------------------- /src/days/Day-079/images/photo7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-079/images/photo7.jpg -------------------------------------------------------------------------------- /src/days/Day-079/images/photo8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-079/images/photo8.jpg -------------------------------------------------------------------------------- /src/days/Day-079/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-color: #eae4da; 3 | } 4 | 5 | body, 6 | html { 7 | height: 100%; 8 | overflow-x: hidden; 9 | } 10 | 11 | body { 12 | background-color: var(--bg-color); 13 | font-family: Arial, Helvetica, sans-serif; 14 | } 15 | 16 | .container { 17 | display: grid; 18 | width: 100%; 19 | grid-template-columns: repeat(3, 1fr); 20 | grid-auto-rows: 250px; 21 | gap: 10px; 22 | } 23 | 24 | img { 25 | width: 100%; 26 | height: 100%; 27 | object-fit: cover; 28 | } 29 | 30 | img:nth-of-type(5n), 31 | img:nth-of-type(5n + 3), 32 | img:nth-of-type(5n + 5) { 33 | grid-row-end: span 4; 34 | background-color: red; 35 | } 36 | 37 | img:nth-of-type(3n), 38 | img:nth-of-type(3n + 5), 39 | img:nth-of-type(3n + 11) { 40 | grid-row-end: span 3; 41 | background-color: blue; 42 | } 43 | 44 | img:nth-of-type(3n + 1), 45 | img:nth-of-type(3n + 7), 46 | img:nth-of-type(3n + 13) { 47 | grid-row-end: span 2; 48 | background-color: green; 49 | } 50 | 51 | img:nth-of-type(3n + 3), 52 | img:nth-of-type(3n + 9), 53 | img:nth-of-type(3n + 17) { 54 | grid-row-end: span 1; 55 | background-color: yellow; 56 | } 57 | 58 | @media (max-width: 478px) { 59 | .container { 60 | grid-template-columns: repeat(2, 1fr); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/days/Day-080/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --grow-size: 2; 3 | } 4 | 5 | body, 6 | html { 7 | height: 100%; 8 | overflow: hidden; 9 | } 10 | 11 | body { 12 | background-color: black; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | font-family: "Comic Sans MS", "Comic Sans", 'Arial'; 17 | } 18 | 19 | h1{ 20 | font-size: 4rem; 21 | background: linear-gradient(to left, red, orange, yellow, green, blue, purple); 22 | width: 100%; 23 | text-align: center; 24 | animation: glow 7s ease infinite; 25 | background-size: 1200% 1200%; 26 | -webkit-background-clip: text; 27 | color: transparent; 28 | padding: 0.8rem; 29 | } 30 | 31 | 32 | @keyframes glow { 33 | 0%{ 34 | background-position:0% 50% 35 | } 36 | 50%{ 37 | background-position:100% 50% 38 | } 39 | 100%{ 40 | background-position:0% 50% 41 | } 42 | } 43 | 44 | @media (max-width: 768px){ 45 | h1{ 46 | font-size: 2.8rem; 47 | } 48 | } -------------------------------------------------------------------------------- /src/days/Day-080/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Colorful Text 7 | 8 | 9 | 10 | 11 |

12 | The text's color 13 |
is
14 | changing 15 |

16 | 17 | 18 | -------------------------------------------------------------------------------- /src/days/Day-081/index.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | overflow: hidden; 5 | } 6 | 7 | body { 8 | font-family: Arial, Helvetica, sans-serif; 9 | display: flex; 10 | } 11 | 12 | aside{ 13 | background-color: rebeccapurple; 14 | min-width: 20%; 15 | } 16 | 17 | nav{ 18 | padding: 10px; 19 | } 20 | 21 | nav > ul{ 22 | display: flex; 23 | flex-direction: column; 24 | width: 100%; 25 | justify-content: space-around; 26 | box-sizing: border-box; 27 | position: relative; 28 | } 29 | 30 | .bar{ 31 | width: 3px; 32 | height: 20%; 33 | position: absolute; 34 | left: 0; 35 | top: 0; 36 | background-color: white; 37 | transition: transform 200ms; 38 | transform-origin: 0 0; 39 | } 40 | 41 | a{ 42 | text-decoration: none; 43 | color: white; 44 | display: block; 45 | padding: 10px; 46 | border-radius: 0 5px 5px 0; 47 | 48 | } 49 | 50 | a:hover{ 51 | background-color: rgb(54, 24, 83); 52 | } 53 | 54 | main{ 55 | max-width: 768px; 56 | margin: 0 auto; 57 | } 58 | 59 | h1{ 60 | font-size: 2.8rem; 61 | font-weight: bold; 62 | text-align: center; 63 | margin-top: 30px; 64 | margin-bottom: 20px; 65 | } 66 | 67 | p{ 68 | line-height: 1.4rem; 69 | margin-bottom: 1.4rem; 70 | } -------------------------------------------------------------------------------- /src/days/Day-081/index.js: -------------------------------------------------------------------------------- 1 | const list = document.querySelector('ul'); 2 | const bar = document.querySelector('.bar'); 3 | 4 | list.addEventListener('mouseover', moveBar); 5 | list.addEventListener('click', moveBar) 6 | 7 | function moveBar(e){ 8 | const [anchor] = e.composedPath(); 9 | const number = Number.parseInt(anchor.getAttribute('number')); 10 | bar.style.transformOrigin = '0 0'; 11 | bar.style.transform = `translateY(${(number -1) * 100}%)` 12 | } -------------------------------------------------------------------------------- /src/days/Day-082/index.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | overflow: hidden; 5 | } 6 | 7 | body { 8 | background-color: black; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-family: Arial, Helvetica, sans-serif; 13 | } 14 | 15 | .square { 16 | height: 300px; 17 | width: 300px; 18 | background-color: blue; 19 | position: relative; 20 | overflow: hidden; 21 | } 22 | 23 | .square::after { 24 | content: ''; 25 | height: 100px; 26 | width: 100px; 27 | position: absolute; 28 | background-color: orange; 29 | left: 50%; 30 | top: 50%; 31 | transform: translate(45%, -50%); 32 | box-shadow: 0 0 100px 100px orange; 33 | transform-origin: -75% 50%; 34 | animation: rotate 4000ms linear infinite; 35 | } 36 | 37 | .content { 38 | height: 90%; 39 | width: 90%; 40 | position: absolute; 41 | left: 50%; 42 | top: 50%; 43 | transform: translate(-50%, -50%); 44 | background-color: white; 45 | z-index: 1; 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | } 50 | 51 | @keyframes rotate { 52 | from { 53 | transform: translate(45%, -50%) rotate(0); 54 | } 55 | 56 | to { 57 | transform: translate(45%, -50%) rotate(360deg); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/days/Day-082/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Moving Background 7 | 8 | 9 | 10 | 11 |
12 |
Hello world
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /src/days/Day-083/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f7f7f7; 3 | color: #333; 4 | font-family: Arial, Helvetica, sans-serif; 5 | overflow-x: hidden; 6 | position: relative; 7 | } 8 | 9 | html { 10 | scroll-behavior: smooth; 11 | } 12 | 13 | nav { 14 | width: 100%; 15 | background-color: white; 16 | padding: 15px; 17 | box-shadow: 0 5px 3px #00000011; 18 | position: sticky; 19 | top: 0; 20 | } 21 | 22 | ul { 23 | display: flex; 24 | width: 50%; 25 | justify-content: space-around; 26 | margin-left: auto; 27 | } 28 | 29 | a { 30 | text-decoration: none; 31 | color: #333; 32 | } 33 | 34 | a.active { 35 | color: palevioletred; 36 | } 37 | 38 | main { 39 | max-width: 768px; 40 | margin: 15px auto 0 auto; 41 | } 42 | 43 | h1 { 44 | font-size: 2.1rem; 45 | font-weight: bold; 46 | } 47 | 48 | h2 { 49 | font-size: 1.4rem; 50 | font-weight: bold; 51 | margin-bottom: 10px; 52 | } 53 | 54 | section { 55 | margin: 20px 0; 56 | } 57 | 58 | p { 59 | line-height: 1.4rem; 60 | margin-bottom: 1rem; 61 | } 62 | 63 | section { 64 | padding-top: 50px; 65 | margin-top: -50px; 66 | } 67 | 68 | @media (max-width: 768px) { 69 | main { 70 | margin: 20px; 71 | } 72 | 73 | ul { 74 | width: 100%; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/days/Day-084/index.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | overflow: hidden; 5 | } 6 | 7 | body { 8 | background-color: #c3efc3; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-family: Arial, Helvetica, sans-serif; 13 | } 14 | 15 | .date-container { 16 | height: 200px; 17 | width: 200px; 18 | background-color: white; 19 | position: relative; 20 | box-shadow: 0px 0px 0px 7px #86909a99, 0 0 15px 15px #00000033; 21 | } 22 | 23 | .month { 24 | width: 100%; 25 | height: 20%; 26 | background-color: #ce5f5f; 27 | text-transform: uppercase; 28 | color: white; 29 | font-size: 1.8rem; 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | } 34 | 35 | .paper { 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | height: 80%; 40 | font-size: 5rem; 41 | margin-top: -10px; 42 | } 43 | -------------------------------------------------------------------------------- /src/days/Day-084/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Date 📅 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |

15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/days/Day-084/index.js: -------------------------------------------------------------------------------- 1 | const months = [ 2 | 'jan', 3 | 'feb', 4 | 'mar', 5 | 'apr', 6 | 'may', 7 | 'jun', 8 | 'jul', 9 | 'aug', 10 | 'sept', 11 | 'oct', 12 | 'nov', 13 | 'dec', 14 | ]; 15 | 16 | const month = document.querySelector('.month'); 17 | const day = document.querySelector('.day'); 18 | 19 | const now = new Date(); 20 | 21 | month.innerHTML = months[now.getMonth()]; 22 | day.innerHTML = now.getDate(); 23 | -------------------------------------------------------------------------------- /src/days/Day-085/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cubic Space 🌌 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/days/Day-086/index.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | overflow: hidden; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | font-family: Arial, Helvetica, sans-serif; 12 | color: white; 13 | background-color: #333; 14 | } 15 | 16 | .social-block { 17 | display: flex; 18 | width: 350px; 19 | justify-content: space-around; 20 | } 21 | 22 | .title { 23 | font-weight: bold; 24 | font-size: 1.6rem; 25 | margin-bottom: 5px; 26 | } 27 | 28 | .social { 29 | display: flex; 30 | justify-content: center; 31 | flex-direction: column; 32 | align-items: center; 33 | height: 100px; 34 | width: 120px; 35 | cursor: pointer; 36 | } 37 | 38 | div.account { 39 | position: relative; 40 | left: 0; 41 | height: 10px; 42 | width: 120px; 43 | } 44 | 45 | div.account::after { 46 | content: attr(handle); 47 | position: absolute; 48 | left: 0; 49 | top: 0; 50 | height: 100px; 51 | width: 100%; 52 | text-align: center; 53 | } 54 | 55 | .social:hover > .account::after { 56 | content: attr(action); 57 | animation: appear 350ms ease-in-out forwards; 58 | } 59 | 60 | @keyframes appear { 61 | from { 62 | transform: translateY(30%); 63 | opacity: 0; 64 | } 65 | 66 | to { 67 | transform: translateY(0%); 68 | opacity: 1; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/days/Day-086/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Social Handles 7 | 8 | 9 | 10 | 11 |
12 | 16 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /src/days/Day-087/cubeControls.js: -------------------------------------------------------------------------------- 1 | let yPos = 65; 2 | let zPos = 0; 3 | const cube = document.querySelector('.cube'); 4 | 5 | // Directions 6 | const UP = 0; 7 | const DOWN = 1; 8 | const LEFT = 2; 9 | const RIGHT = 3; 10 | 11 | const CUBE_DIRECTIONS = { 12 | KeyA: LEFT, 13 | KeyD: RIGHT, 14 | KeyW: UP, 15 | KeyS: DOWN, 16 | }; 17 | 18 | document.addEventListener('keydown', (e) => { 19 | rotateCube(CUBE_DIRECTIONS[e.code]); 20 | }); 21 | 22 | const cubeUpButton = document.querySelector('.cube-up'); 23 | const cubeDownButton = document.querySelector('.cube-down'); 24 | const cubeLeftButton = document.querySelector('.cube-left'); 25 | const cubeRightButton = document.querySelector('.cube-right'); 26 | 27 | const cubeMovement = [ 28 | { 29 | element: cubeUpButton, 30 | direction: UP, 31 | }, 32 | { 33 | element: cubeDownButton, 34 | direction: DOWN, 35 | }, 36 | { 37 | element: cubeLeftButton, 38 | direction: LEFT, 39 | }, 40 | { 41 | element: cubeRightButton, 42 | direction: RIGHT, 43 | }, 44 | ]; 45 | 46 | cubeMovement.forEach(({ direction, element }) => { 47 | element.addEventListener('click', () => rotateCube(direction)); 48 | }); 49 | 50 | function rotateCube(direction) { 51 | if (direction === LEFT) { 52 | yPos += 90; 53 | } else if (direction === RIGHT) { 54 | yPos -= 90; 55 | } else if (direction === UP) { 56 | zPos += 90; 57 | } else if (direction === DOWN) { 58 | zPos -= 90; 59 | } 60 | 61 | cube.style.transform = `rotateY(${yPos}deg) rotateZ(${zPos}deg)`; 62 | } 63 | -------------------------------------------------------------------------------- /src/days/Day-088/index.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | overflow: hidden; 5 | } 6 | 7 | body { 8 | background-color: black; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | flex-direction: column; 13 | font-family: 'Comic Sans MS', 'Comic Sans', 'Arial'; 14 | } 15 | 16 | style { 17 | display: block; 18 | border: 1px solid red; 19 | color: white; 20 | font-family: 'Courier New', Courier, monospace; 21 | padding: 50px; 22 | margin-bottom: 30px; 23 | max-width: 350px; 24 | box-sizing: border-box; 25 | } 26 | -------------------------------------------------------------------------------- /src/days/Day-088/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Editable Styles 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/days/Day-089/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lines Impact 💥 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /src/days/Day-090/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --clock-diameter: 300px; 3 | } 4 | 5 | body { 6 | background-color: darkslateblue; 7 | } 8 | 9 | .absolute-center { 10 | top: 50%; 11 | left: 50%; 12 | position: absolute; 13 | transform: translate(-50%, -50%); 14 | } 15 | 16 | .clock { 17 | height: var(--clock-diameter); 18 | width: var(--clock-diameter); 19 | border-radius: var(--clock-diameter); 20 | border: 8px solid white; 21 | display: none; 22 | } 23 | 24 | .clock .hand { 25 | position: absolute; 26 | left: 50%; 27 | top: 50%; 28 | transform: translateY(-50%); 29 | transform-origin: 0% 0%; 30 | } 31 | #center { 32 | z-index: 100; 33 | font-size: 1.4em; 34 | } 35 | 36 | #hours-hand { 37 | height: 5px; 38 | background-color: white; 39 | width: calc(var(--clock-diameter) * 0.3); 40 | } 41 | 42 | .hours-rotation { 43 | animation: rotate 43200s linear infinite; 44 | } 45 | 46 | #minutes-hand { 47 | height: 3px; 48 | background-color: white; 49 | width: calc(var(--clock-diameter) * 0.43); 50 | } 51 | 52 | .minutes-rotation { 53 | animation: rotate 3600s linear infinite; 54 | } 55 | 56 | #seconds-hand { 57 | height: 1px; 58 | background-color: white; 59 | width: calc(var(--clock-diameter) * 0.43); 60 | } 61 | 62 | .seconds-rotation { 63 | animation: rotate 60s linear infinite; 64 | } 65 | 66 | @keyframes rotate { 67 | to { 68 | transform: translateY(-50%) rotateZ(360deg); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/days/Day-090/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Analog Clock 🕑 9 | 10 | 11 | 12 |
13 |
⏰
14 |
15 |
16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/days/Day-091/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Half Meme Generator 7 | 8 | 9 | 10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/days/Day-091/index.js: -------------------------------------------------------------------------------- 1 | const imgInput = document.getElementById('img'); 2 | 3 | imgInput.addEventListener('change', (e) => { 4 | const files = e.target.files; 5 | if (FileReader && files && files.length) { 6 | var fr = new FileReader(); 7 | fr.onload = function () { 8 | document.querySelector('img').setAttribute('src', fr.result); 9 | document.querySelector('.container').style.display = 'block'; 10 | document.getElementById('message').style.display = 'block'; 11 | }; 12 | fr.readAsDataURL(files[0]); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /src/days/Day-092/index.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | overflow-x: hidden; 5 | } 6 | 7 | body { 8 | background-color: #f4edfb; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-family: Arial, Helvetica, sans-serif; 13 | color: #4d2870; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | } 21 | 22 | h1 { 23 | font-size: 2.4rem; 24 | font-weight: bold; 25 | margin-bottom: 15px; 26 | } 27 | 28 | li { 29 | vertical-align: middle; 30 | display: flex; 31 | align-items: center; 32 | position: relative; 33 | padding: 10px; 34 | letter-spacing: 0.05rem; 35 | font-size: 1.1rem; 36 | } 37 | 38 | li > span { 39 | height: 100%; 40 | display: block; 41 | } 42 | 43 | li::before { 44 | content: url(./images/pets_24px_outlined.svg); 45 | height: 10px; 46 | width: 10px; 47 | position: absolute; 48 | left: -25px; 49 | top: 5px; 50 | } 51 | -------------------------------------------------------------------------------- /src/days/Day-092/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Custom Bullet List 7 | 8 | 9 | 10 | 11 |
12 |

List of Pets 🐕

13 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /src/days/Day-093/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Unread Messages 💬 7 | 8 | 9 | 10 | 11 |
12 |
💬
13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/days/Day-093/index.js: -------------------------------------------------------------------------------- 1 | const button = document.getElementById('notification'); 2 | const title = document.querySelector('title'); 3 | const messages = document.querySelector('.unread'); 4 | 5 | const originalTitle = title.innerText; 6 | let unread = 0; 7 | 8 | button.addEventListener('click', () => { 9 | messages.classList.remove('pulse'); 10 | messages.setAttribute('unread', ++unread > 9 ? '+9' : unread); 11 | messages.classList.add('new-messages'); 12 | title.innerText = `(${unread}) ${originalTitle}`; 13 | 14 | if (unread > 1) { 15 | setTimeout(() => { 16 | messages.classList.add('pulse'); 17 | }, 0); 18 | } 19 | }); 20 | -------------------------------------------------------------------------------- /src/days/Day-094/img/flower-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-094/img/flower-1.png -------------------------------------------------------------------------------- /src/days/Day-094/img/flower-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-094/img/flower-2.png -------------------------------------------------------------------------------- /src/days/Day-094/img/flower-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-094/img/flower-3.png -------------------------------------------------------------------------------- /src/days/Day-094/img/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-094/img/sprite.png -------------------------------------------------------------------------------- /src/days/Day-094/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --notification-size: 24px; 3 | } 4 | 5 | body, 6 | html { 7 | height: 100%; 8 | overflow-x: hidden; 9 | } 10 | 11 | body { 12 | background-color: #f4edfb; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | font-family: Arial, Helvetica, sans-serif; 17 | background-color: lavender; 18 | } 19 | 20 | .grass { 21 | height: 350px; 22 | width: 750px; 23 | background-size: auto; 24 | background-repeat: repeat; 25 | position: relative; 26 | } 27 | 28 | .flower { 29 | position: absolute; 30 | height: 2rem; 31 | width: 2rem; 32 | left: 33%; 33 | top: 40%; 34 | animation: grow 750ms ease-in-out forwards; 35 | transform-origin: 50% 100%; 36 | } 37 | 38 | .flowers { 39 | display: none; 40 | } 41 | 42 | @keyframes grow { 43 | 0% { 44 | transform: scale(0); 45 | } 46 | 47 | 80% { 48 | transform: scale(1.1); 49 | } 50 | 51 | 100% { 52 | transform: scale(1); 53 | } 54 | } 55 | 56 | @media (max-width: 478px) { 57 | .grass { 58 | width: 350px; 59 | } 60 | } 61 | 62 | @media (max-width: 768px) { 63 | .grass { 64 | width: 500px; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/days/Day-094/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Garden 🌷🌼🌻 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/days/Day-095/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | font-family: Arial, Helvetica, sans-serif; 8 | background-color: darkcyan; 9 | color: white; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | h1 { 16 | position: absolute; 17 | top: 80px; 18 | font-size: 1.8rem; 19 | text-transform: uppercase; 20 | } 21 | 22 | input { 23 | width: 2.8rem; 24 | text-align: center; 25 | font-size: 3rem; 26 | padding: 10px 2px; 27 | margin: 8px; 28 | border-radius: 5px; 29 | border: none; 30 | text-transform: uppercase; 31 | } 32 | -------------------------------------------------------------------------------- /src/days/Day-095/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Separated Text Input 7 | 8 | 9 | 10 | 11 |

Enter the code below

12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/days/Day-095/index.js: -------------------------------------------------------------------------------- 1 | const inputs = document.querySelectorAll('input'); 2 | 3 | for (let i = 0; i < inputs.length; i++) { 4 | const input = inputs[i]; 5 | input.addEventListener('input', (e) => { 6 | if (e.target.value.length > 0 && i < inputs.length - 1) { 7 | inputs[i + 1].focus(); 8 | } else if (e.target.value.length === 0 && i > 0) { 9 | inputs[i - 1].focus(); 10 | } 11 | }); 12 | 13 | input.addEventListener('keydown', (e) => { 14 | if (e.key === 'Backspace' && i > 0 && e.target.value.length === 0) { 15 | inputs[i - 1].focus(); 16 | } 17 | }); 18 | } 19 | -------------------------------------------------------------------------------- /src/days/Day-096/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | font-family: Arial, Helvetica, sans-serif; 8 | background-color: rebeccapurple; 9 | color: white; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | font-family: 'Courier New', Courier, monospace; 14 | color: deeppink; 15 | } 16 | 17 | .code { 18 | width: 250px; 19 | height: 2rem; 20 | line-height: 2rem; 21 | background-color: white; 22 | display: flex; 23 | justify-content: space-between; 24 | padding: 0 5px; 25 | } 26 | 27 | button { 28 | border: none; 29 | background-color: transparent; 30 | cursor: pointer; 31 | position: relative; 32 | width: 30px; 33 | } 34 | 35 | button::after { 36 | position: absolute; 37 | content: ''; 38 | height: 13px; 39 | width: 10px; 40 | border: 2px solid black; 41 | border-radius: 2px; 42 | background-color: white; 43 | top: calc(50% - 2px); 44 | left: 50%; 45 | transform: translate(-50%, -50%); 46 | } 47 | 48 | button::before { 49 | position: absolute; 50 | content: ''; 51 | height: 13px; 52 | width: 10px; 53 | border: 2px solid black; 54 | border-radius: 2px; 55 | background-color: white; 56 | top: calc(50% + 2px); 57 | left: calc(50% + 4px); 58 | z-index: 1; 59 | transform: translate(-50%, -50%); 60 | } 61 | -------------------------------------------------------------------------------- /src/days/Day-096/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Copy to Clipboard 📋 7 | 8 | 9 | 10 | 11 |
12 | 
1234-abcd-1234-efgh
13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/days/Day-096/index.js: -------------------------------------------------------------------------------- 1 | const code = document.querySelector('.code pre'); 2 | const copyButton = document.querySelector('button'); 3 | 4 | copyButton.addEventListener('click', (e) => { 5 | navigator.clipboard.writeText(code.innerHTML); 6 | alert('The code has been copied! Check your clipboard'); 7 | }); 8 | -------------------------------------------------------------------------------- /src/days/Day-097/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cards Memory Game 🀄 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/days/Day-098/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --duration: 5s; 3 | 4 | --bg-color: #222; 5 | } 6 | 7 | body, 8 | html { 9 | height: 100%; 10 | overflow-x: hidden; 11 | } 12 | 13 | body { 14 | background-color: var(--bg-color); 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | font-family: Arial, Helvetica, sans-serif; 19 | } 20 | 21 | input { 22 | cursor: pointer; 23 | } 24 | 25 | .container { 26 | height: 300px; 27 | width: 300px; 28 | } 29 | 30 | .slidecontainer { 31 | width: 100%; 32 | } 33 | 34 | .slider { 35 | -webkit-appearance: none; 36 | appearance: none; 37 | width: 100%; 38 | height: 15px; 39 | outline: none; 40 | -webkit-transition: 0.2s; 41 | transition: opacity 0.2s; 42 | border-radius: 10px; 43 | overflow: hidden; 44 | background: lightgray; 45 | } 46 | 47 | .slider:hover { 48 | opacity: 1; 49 | } 50 | 51 | .slider::-webkit-slider-thumb { 52 | -webkit-appearance: none; 53 | appearance: none; 54 | width: 15px; 55 | height: 15px; 56 | background: white; 57 | cursor: pointer; 58 | position: relative; 59 | border-radius: 100%; 60 | box-shadow: 0px 0px 20px 5px #00000055, -500px 0 0 495px #cb1db4; 61 | } 62 | 63 | .slider::-moz-range-thumb { 64 | width: 25px; 65 | height: 25px; 66 | background: white; 67 | cursor: pointer; 68 | position: relative; 69 | border-radius: 100%; 70 | box-shadow: 0px 0px 20px 5px #00000055, -500px 0 0 495px #cb1db4; 71 | } 72 | -------------------------------------------------------------------------------- /src/days/Day-098/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Custom Slider 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /src/days/Day-099/index.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | height: 100%; 4 | overflow-x: hidden; 5 | } 6 | 7 | body { 8 | background-color: white; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-family: Arial, Helvetica, sans-serif; 13 | color: black; 14 | } 15 | 16 | .container { 17 | width: 350px; 18 | background-color: transparent; 19 | animation: appear 750ms linear forwards; 20 | } 21 | 22 | h1 { 23 | font-size: 2rem; 24 | font-weight: bold; 25 | } 26 | 27 | p { 28 | line-height: 1.3rem; 29 | margin-top: 15px; 30 | } 31 | 32 | @keyframes appear { 33 | from { 34 | clip-path: polygon(0% 0%, 0% 0%, 0% 0%); 35 | } 36 | 37 | to { 38 | clip-path: polygon(0% 0%, 200% 0%, 0% 200%); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/days/Day-099/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Diagonal Appear 7 | 8 | 9 | 10 | 11 |
12 |

Hello World

13 |

14 | Nostrud duis dolor cillum cupidatat aute esse. Sunt duis fugiat labore consequat 15 | eiusmod Lorem aliqua eu dolore ut dolor et labore. Incididunt laboris magna dolor id 16 | cupidatat sunt sit. 17 |

18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /src/days/Day-100/images/photo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-100/images/photo1.jpg -------------------------------------------------------------------------------- /src/days/Day-100/images/photo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvb/100-days-front-end/8211385759be7e22ba7435fae565a529c7a04678/src/days/Day-100/images/photo2.jpg -------------------------------------------------------------------------------- /src/days/Day-100/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --initial-delay: 500ms; 3 | --delay-between-images: 150ms; 4 | 5 | --duration: 750ms; 6 | } 7 | 8 | body, 9 | html { 10 | height: 100%; 11 | overflow-x: hidden; 12 | } 13 | 14 | body { 15 | background-color: white; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | font-family: Arial, Helvetica, sans-serif; 20 | color: black; 21 | } 22 | 23 | .container { 24 | height: 300px; 25 | width: 300px; 26 | background-color: transparent; 27 | position: relative; 28 | background-color: white; 29 | } 30 | 31 | .image-container { 32 | position: absolute; 33 | height: 100%; 34 | width: 100%; 35 | } 36 | 37 | img { 38 | height: 100%; 39 | width: 100%; 40 | object-fit: cover; 41 | } 42 | 43 | .image-container:nth-of-type(1) { 44 | clip-path: polygon(100% 0%, 100% 200%, -100% 0%); 45 | animation: disappear var(--duration) linear forwards var(--initial-delay); 46 | } 47 | 48 | .image-container:nth-last-of-type(1) { 49 | clip-path: polygon(100% 0%, 100% 0%, 100% 0%); 50 | animation: appear var(--duration) linear forwards 51 | calc(var(--initial-delay) + var(--delay-between-images)); 52 | } 53 | 54 | @keyframes disappear { 55 | from { 56 | clip-path: polygon(100% 0%, 100% 200%, -100% 0%); 57 | } 58 | 59 | to { 60 | clip-path: polygon(100% 0%, 100% 0%, 100% 0%); 61 | } 62 | } 63 | 64 | @keyframes appear { 65 | from { 66 | clip-path: polygon(0% 100%, 0% 100%, 0% 100%); 67 | } 68 | 69 | to { 70 | clip-path: polygon(0% 100%, 0% -100%, 200% 100%); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/days/Day-100/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Images Diagonal Transition 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index Page 9 | 10 | 11 |

100 Days of Plain Front End

12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | abbr, 3 | acronym, 4 | address, 5 | applet, 6 | article, 7 | aside, 8 | audio, 9 | b, 10 | big, 11 | blockquote, 12 | body, 13 | canvas, 14 | caption, 15 | center, 16 | cite, 17 | code, 18 | dd, 19 | del, 20 | details, 21 | dfn, 22 | div, 23 | dl, 24 | dt, 25 | em, 26 | embed, 27 | fieldset, 28 | figcaption, 29 | figure, 30 | footer, 31 | form, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | header, 39 | hgroup, 40 | html, 41 | i, 42 | iframe, 43 | img, 44 | ins, 45 | kbd, 46 | label, 47 | legend, 48 | li, 49 | mark, 50 | menu, 51 | nav, 52 | object, 53 | ol, 54 | output, 55 | p, 56 | pre, 57 | q, 58 | ruby, 59 | s, 60 | samp, 61 | section, 62 | small, 63 | span, 64 | strike, 65 | strong, 66 | sub, 67 | summary, 68 | sup, 69 | table, 70 | tbody, 71 | td, 72 | tfoot, 73 | th, 74 | thead, 75 | time, 76 | tr, 77 | tt, 78 | u, 79 | ul, 80 | var, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | body { 103 | line-height: 1; 104 | } 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | blockquote:after, 114 | blockquote:before, 115 | q:after, 116 | q:before { 117 | content: ''; 118 | content: none; 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | --------------------------------------------------------------------------------