├── style.css ├── index.html └── script.js /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: sans-serif; 9 | } 10 | 11 | .h1 { 12 | font-size: 40px; 13 | text-decoration: underline; 14 | } 15 | 16 | button { 17 | width: 65px; 18 | height: 65px; 19 | border-radius: 50%; 20 | font-size: 30px; 21 | cursor: pointer; 22 | background-color: black; 23 | color: white; 24 | border: none; 25 | } 26 | 27 | .main { 28 | width: 100vw; 29 | height: 100vh; 30 | display: flex; 31 | flex-direction: column; 32 | gap: 20px; 33 | align-items: center; 34 | justify-content: space-evenly; 35 | } 36 | 37 | .main2 { 38 | display: flex; 39 | flex-direction: column; 40 | gap: 20px; 41 | } 42 | 43 | .row { 44 | display: flex; 45 | gap: 20px; 46 | } 47 | 48 | @media (max-width: 768px) { 49 | .main { 50 | gap: 10px; 51 | } 52 | 53 | button { 54 | width: 50px; 55 | height: 50px; 56 | font-size: 24px; 57 | } 58 | 59 | .row { 60 | flex-wrap: wrap; 61 | } 62 | } 63 | 64 | @media (max-width: 480px) { 65 | .main { 66 | gap: 5px; 67 | } 68 | 69 | button { 70 | width: 40px; 71 | height: 40px; 72 | font-size: 20px; 73 | } 74 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Letter Buttons 8 | 9 | 10 | 11 | 12 |
13 |

Word Generator

14 |

Click On The Button Or Press The Button

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 |
47 |
48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let heading = document.getElementById('heading'); 2 | let buttons = document.querySelectorAll('button'); 3 | const alphabets = [ 4 | "Xenophobe", 5 | "Mushy", 6 | "Rigor", 7 | "Ivy", 8 | "Glove", 9 | "Quaint", 10 | "Yawn", 11 | "Piquant", 12 | "Knead", 13 | "Oasis", 14 | "Junky", 15 | "Ulcer", 16 | "Wisp", 17 | "Crest", 18 | "Nourish", 19 | "Vogue", 20 | "Dwarf", 21 | "Xylophone", 22 | "Lively", 23 | "Gleam", 24 | "Rye", 25 | "Zephyr", 26 | "Briar", 27 | "Unkind", 28 | "Frond", 29 | "Sow", 30 | "Yogic", 31 | "Kudos", 32 | "Torrid", 33 | "Amber", 34 | "Nasty", 35 | "Vibrant", 36 | "Xenon", 37 | "Mural", 38 | "Raven", 39 | "Igloo", 40 | "Gauge", 41 | "Quota", 42 | "Yokel", 43 | "Pinch", 44 | "Kitty", 45 | "Ogre", 46 | "Jovial", 47 | "Unify", 48 | "Witty", 49 | "Crypt", 50 | "Clove", 51 | "Nose", 52 | "Vex", 53 | "Dress", 54 | "Xerox", 55 | "Lore", 56 | "Glint", 57 | "Rustic", 58 | "Zinc", 59 | "Bland", 60 | "Unison", 61 | "Forgo", 62 | "Savor", 63 | "Yore", 64 | "Kiosk", 65 | "Torso", 66 | "Andes", 67 | "Nudge", 68 | "Vista", 69 | "Xylograph", 70 | "Minty", 71 | "Rouse", 72 | "Ironic", 73 | "Glean", 74 | "Quench", 75 | "Yukon", 76 | "Pixel", 77 | "Knoll", 78 | "Opaque", 79 | "Joust", 80 | "Unguent", 81 | "Wield", 82 | "Clump", 83 | "Croak", 84 | "Soggy", 85 | "Blend", 86 | "Zing", 87 | "Apple", 88 | "Banana", 89 | "Cherry", 90 | "Date", 91 | "Elderberry", 92 | "Fig", 93 | "Grape", 94 | "Honeydew", 95 | "Icecream", 96 | "Jam", 97 | "Kiwi", 98 | "Lemon", 99 | "Mango", 100 | "Nectarine", 101 | "Orange", 102 | "Peach", 103 | "Quesadilla", 104 | "Raspberry", 105 | "Strawberry", 106 | "Tangerine", 107 | "Uva", 108 | "Vanilla", 109 | "Watermelon", 110 | "Xigua", 111 | "Yogurt", 112 | "Zucchini", 113 | 'Elephant', 114 | 'Elder', 115 | 'Hunter', 116 | 'Have', 117 | ]; 118 | let words = []; 119 | 120 | buttons.forEach(button => { 121 | button.addEventListener('click', function () { 122 | let btn = button.value.toUpperCase(); 123 | for (let alphabet of alphabets) { 124 | if (alphabet[0] === btn) { 125 | words.push(alphabet); 126 | } 127 | } 128 | if (words.length > 0) { 129 | let index = Math.floor(Math.random() * words.length); 130 | heading.innerHTML = words[index]; 131 | words = []; 132 | } 133 | }) 134 | }); 135 | 136 | document.addEventListener('keydown', function (event) { 137 | let key = event.key; 138 | if ((key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z')) { 139 | for (let alphabet of alphabets) { 140 | if (alphabet[0].toLowerCase() === key.toLowerCase()) { 141 | words.push(alphabet); 142 | } 143 | } 144 | if (words.length > 0) { 145 | let index = Math.floor(Math.random() * words.length); 146 | heading.innerHTML = words[index]; 147 | words = []; 148 | } 149 | } 150 | }) 151 | --------------------------------------------------------------------------------