├── .gitignore ├── atropos-part-1 ├── hero-img.png ├── index-2.html ├── index.html ├── main.js └── styles.css └── toastify ├── index.html ├── main.js └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /atropos-part-1/hero-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/es6-libraries/5eb300b30add7a77af4fc9ca67704f373e3a3f29/atropos-part-1/hero-img.png -------------------------------------------------------------------------------- /atropos-part-1/index-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Atropos 7 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 | 23 | 28 | 33 | 38 | 44 |
45 |
46 |
47 |
48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /atropos-part-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Atropos 7 | 11 | 12 | 13 | 14 | 55 | 56 |
57 |
58 |

Lorem ipsum dolor sit.

59 |

60 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat 61 | pariatur impedit reprehenderit numquam, accusamus non dignissimos 62 | dicta ut aut vero commodi ab, eligendi sunt autem adipisci aspernatur? 63 | Neque, unde nisi! 64 |

65 |
66 | 67 |
68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /atropos-part-1/main.js: -------------------------------------------------------------------------------- 1 | const myAtropos = Atropos({ 2 | el: "body", 3 | activeOffset: 40, 4 | shadow: false, 5 | highlight: false, 6 | }); 7 | -------------------------------------------------------------------------------- /atropos-part-1/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: #15042c; 4 | display: grid; 5 | place-items: center; 6 | height: 100vh; 7 | } 8 | 9 | .atropos { 10 | height: 380px; 11 | width: 560px; 12 | } 13 | 14 | .atropos-inner { 15 | border-radius: 20px; 16 | background: linear-gradient(#53199d, #19000c); 17 | } 18 | 19 | .layer { 20 | position: absolute; 21 | left: -50%; 22 | top: -50%; 23 | width: 200%; 24 | height: 200%; 25 | object-fit: contain; 26 | display: block; 27 | z-index: -1; 28 | transform-style: preserve-3d; 29 | pointer-events: none; 30 | } 31 | 32 | .logo { 33 | width: 100%; 34 | } 35 | -------------------------------------------------------------------------------- /toastify/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Toastify 8 | 12 | 13 | 14 | 18 | 23 | 24 | 25 | 26 | 29 |
30 |

Products

31 |
32 |
33 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /toastify/main.js: -------------------------------------------------------------------------------- 1 | const rows = ["Adidas Superstar", "Nike Air Force", "Reebok Classic"]; 2 | 3 | const table = document.querySelector("#table"); 4 | 5 | let rowCount = rows.length; 6 | 7 | const rerun = () => { 8 | table.classList.remove("empty"); 9 | buildRows(); 10 | }; 11 | 12 | const removeRow = (index) => { 13 | const row = document.querySelector(`#row-${index}`); 14 | row.classList.add("removed"); 15 | rowCount -= 1; 16 | 17 | if (rowCount === 0) { 18 | table.classList.add("empty"); 19 | } 20 | 21 | Toastify({ 22 | text: "Product Deleted", 23 | duration: 1500, 24 | gravity: "bottom", 25 | position: "center", 26 | stopOnFocus: true, 27 | }).showToast(); 28 | }; 29 | 30 | const buildRows = () => { 31 | let content = ``; 32 | 33 | rows.forEach((row, index) => { 34 | content += ` 35 |
36 |

${row}

37 | 40 |
`; 41 | }); 42 | 43 | console.log("content", content); 44 | 45 | table.innerHTML = content; 46 | }; 47 | 48 | window.addEventListener("load", () => buildRows()); 49 | -------------------------------------------------------------------------------- /toastify/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: grid; 4 | place-items: center; 5 | background: #f2f2ff; 6 | color: #4c4654; 7 | font-family: "Euclid Circular A", "Poppins"; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | } 13 | 14 | html, 15 | body { 16 | height: 100%; 17 | } 18 | 19 | .card { 20 | width: 500px; 21 | padding: 20px; 22 | border-radius: 10px; 23 | background: #ffffff; 24 | box-shadow: 0 20px 40px rgb(0 0 0 / 4%); 25 | transition: 0.3s; 26 | } 27 | 28 | header { 29 | display: flex; 30 | align-items: center; 31 | justify-content: space-between; 32 | } 33 | 34 | button { 35 | display: flex; 36 | align-items: center; 37 | justify-content: center; 38 | gap: 10px; 39 | border: 0; 40 | background: #8f44fd; 41 | color: #f7f7f7; 42 | height: 36px; 43 | border-radius: 4px; 44 | padding: 0 12px; 45 | font-family: inherit; 46 | font-size: 16px; 47 | cursor: pointer; 48 | } 49 | 50 | .table { 51 | overflow: hidden; 52 | display: grid; 53 | transition: 0.3s; 54 | } 55 | 56 | .table.empty { 57 | max-height: 0; 58 | padding: 0; 59 | } 60 | 61 | .row { 62 | overflow: hidden; 63 | display: grid; 64 | grid-template-columns: 1fr 40px; 65 | align-content: center; 66 | max-height: 54px; 67 | padding: 8px 0; 68 | transition: 0.3s; 69 | } 70 | 71 | .row.removed { 72 | max-height: 0; 73 | opacity: 0; 74 | padding: 0; 75 | visibility: hidden; 76 | } 77 | 78 | .row p { 79 | margin: auto 0; 80 | color: rgb(76 70 84 / 75%); 81 | } 82 | 83 | .rerun-button { 84 | position: fixed; 85 | top: 20px; 86 | left: 50%; 87 | translate: -50% 0; 88 | width: 100px; 89 | text-align: center; 90 | } 91 | 92 | .row button { 93 | display: grid; 94 | place-items: center; 95 | border: 0; 96 | width: 40px; 97 | height: 40px; 98 | padding: 0; 99 | border-radius: 6px; 100 | background: transparent; 101 | color: #222222; 102 | cursor: pointer; 103 | transition: 0.3s; 104 | } 105 | 106 | .row button:hover { 107 | background: #f8f8f8; 108 | } 109 | 110 | body .toastify { 111 | padding: 20px 50px; 112 | margin-bottom: 30px; 113 | font-size: 18px; 114 | background: #ff5362; 115 | box-shadow: 0 20px 40px rgb(0 0 0 / 4%); 116 | border-radius: 10px; 117 | } 118 | --------------------------------------------------------------------------------