├── groceries.png ├── mumblers_demo-webfont.woff ├── mumblers_demo-webfont.woff2 ├── stylesheet.css ├── generator_config.txt ├── script.js ├── index.html └── style.css /groceries.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/miguelznunez/Grocery-List/HEAD/groceries.png -------------------------------------------------------------------------------- /mumblers_demo-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/miguelznunez/Grocery-List/HEAD/mumblers_demo-webfont.woff -------------------------------------------------------------------------------- /mumblers_demo-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/miguelznunez/Grocery-List/HEAD/mumblers_demo-webfont.woff2 -------------------------------------------------------------------------------- /stylesheet.css: -------------------------------------------------------------------------------- 1 | /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 26, 2021 */ 2 | 3 | 4 | 5 | @font-face { 6 | font-family: 'mumblers_demoregular'; 7 | src: url('mumblers_demo-webfont.woff2') format('woff2'), 8 | url('mumblers_demo-webfont.woff') format('woff'); 9 | font-weight: normal; 10 | font-style: normal; 11 | 12 | } -------------------------------------------------------------------------------- /generator_config.txt: -------------------------------------------------------------------------------- 1 | # Font Squirrel Font-face Generator Configuration File 2 | # Upload this file to the generator to recreate the settings 3 | # you used to create these fonts. 4 | 5 | {"mode":"optimal","formats":["woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.querySelector("#eraser").addEventListener("click", () => { 2 | document.querySelector("#groceryItems").textContent = ""; 3 | }) 4 | 5 | document.querySelector("#userInput").addEventListener("keydown", (event) => { 6 | if(event.key == "Enter") 7 | addItem(); 8 | }); 9 | 10 | addItem = () => { 11 | const item = document.createElement("h2") 12 | item.textContent = "- " + document.querySelector("#userInput").value; 13 | 14 | item.addEventListener("click", () => { 15 | if(item.style.textDecoration != "line-through") 16 | item.style.textDecoration = "line-through"; 17 | else 18 | item.style.textDecoration = "none"; 19 | }) 20 | 21 | document.querySelector("#groceryItems").appendChild(item); 22 | document.querySelector("#userInput").value = ""; 23 | } 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Grocery List 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |

Grocery List

19 |
20 |
21 | 22 | 23 |
24 |
25 |
26 |
27 |
28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | font-family: "mumblers_demoregular"; 9 | color: #262626; 10 | background-color: orange; 11 | } 12 | 13 | .container{ 14 | width: 95%; 15 | margin: auto; 16 | display: flex; 17 | } 18 | 19 | .notebook{ 20 | width: 600px; 21 | min-height: 100vh; 22 | padding-top: 20px; 23 | margin:auto; 24 | display: flex; 25 | gap: 10px; 26 | align-items: center; 27 | flex-direction: column; 28 | background-color: white; 29 | box-shadow: 10px 10px 24px 0px rgba(0,0,0,0.50); 30 | } 31 | 32 | .title{ 33 | font-size: 1.25rem; 34 | text-align: center; 35 | } 36 | 37 | .input-container{ 38 | width: 100%; 39 | display: flex; 40 | gap: 10px; 41 | justify-content: center; 42 | } 43 | 44 | .input-container i{ 45 | cursor: pointer; 46 | font-size: 2.5rem; 47 | color: lightpink; 48 | } 49 | 50 | .input-container input{ 51 | font-family: inherit; 52 | outline: 0; 53 | border: 0; 54 | width: 65%; 55 | font-size: 1.5rem; 56 | border-bottom: 3px solid lightgray; 57 | } 58 | 59 | #groceryItems{ 60 | display: flex; 61 | flex-direction: column; 62 | gap: 15px; 63 | width: 75%; 64 | font-size: 1.5rem; 65 | } 66 | 67 | #groceryItems h2{ 68 | cursor: pointer; 69 | } 70 | 71 | @media(max-width:768px) { 72 | #groceryItems { 73 | font-size: 1.2rem; 74 | } 75 | } 76 | 77 | @media(max-width:480px){ 78 | .title{ 79 | font-size: 1rem; 80 | } 81 | 82 | .input-container i{ 83 | font-size: 2rem; 84 | } 85 | 86 | .input-container input{ 87 | font-size: 1rem; 88 | } 89 | 90 | #groceryItems{ 91 | font-size: 0.9rem; 92 | } 93 | } 94 | --------------------------------------------------------------------------------