├── _config.yml ├── images ├── A.png ├── B.png ├── C.png ├── D.png ├── E.png ├── F.png ├── G.png ├── H.png ├── I.png ├── J.png ├── K.png ├── L.png ├── M.png ├── N.png ├── O.png ├── P.png ├── Q.png ├── R.png ├── S.png ├── T.png ├── U.png ├── V.png ├── W.png ├── X.png ├── Y.png ├── Z.png └── .DS_Store ├── sounds ├── A.wav ├── B.wav ├── C.wav ├── D.wav ├── E.wav ├── F.wav ├── G.wav ├── H.wav ├── I.wav ├── J.wav ├── K.wav ├── L.wav ├── M.wav ├── N.wav ├── O.wav ├── P.wav ├── Q.wav ├── R.wav ├── S.wav ├── T.wav ├── U.wav ├── V.wav ├── W.wav ├── X.wav ├── Y.wav └── Z.wav ├── ScreenshotMain.png ├── ScreenshotSearch.png ├── index.html ├── README.md ├── style.css └── script.js /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-midnight -------------------------------------------------------------------------------- /images/A.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/A.png -------------------------------------------------------------------------------- /images/B.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/B.png -------------------------------------------------------------------------------- /images/C.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/C.png -------------------------------------------------------------------------------- /images/D.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/D.png -------------------------------------------------------------------------------- /images/E.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/E.png -------------------------------------------------------------------------------- /images/F.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/F.png -------------------------------------------------------------------------------- /images/G.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/G.png -------------------------------------------------------------------------------- /images/H.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/H.png -------------------------------------------------------------------------------- /images/I.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/I.png -------------------------------------------------------------------------------- /images/J.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/J.png -------------------------------------------------------------------------------- /images/K.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/K.png -------------------------------------------------------------------------------- /images/L.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/L.png -------------------------------------------------------------------------------- /images/M.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/M.png -------------------------------------------------------------------------------- /images/N.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/N.png -------------------------------------------------------------------------------- /images/O.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/O.png -------------------------------------------------------------------------------- /images/P.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/P.png -------------------------------------------------------------------------------- /images/Q.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/Q.png -------------------------------------------------------------------------------- /images/R.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/R.png -------------------------------------------------------------------------------- /images/S.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/S.png -------------------------------------------------------------------------------- /images/T.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/T.png -------------------------------------------------------------------------------- /images/U.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/U.png -------------------------------------------------------------------------------- /images/V.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/V.png -------------------------------------------------------------------------------- /images/W.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/W.png -------------------------------------------------------------------------------- /images/X.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/X.png -------------------------------------------------------------------------------- /images/Y.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/Y.png -------------------------------------------------------------------------------- /images/Z.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/Z.png -------------------------------------------------------------------------------- /sounds/A.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/A.wav -------------------------------------------------------------------------------- /sounds/B.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/B.wav -------------------------------------------------------------------------------- /sounds/C.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/C.wav -------------------------------------------------------------------------------- /sounds/D.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/D.wav -------------------------------------------------------------------------------- /sounds/E.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/E.wav -------------------------------------------------------------------------------- /sounds/F.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/F.wav -------------------------------------------------------------------------------- /sounds/G.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/G.wav -------------------------------------------------------------------------------- /sounds/H.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/H.wav -------------------------------------------------------------------------------- /sounds/I.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/I.wav -------------------------------------------------------------------------------- /sounds/J.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/J.wav -------------------------------------------------------------------------------- /sounds/K.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/K.wav -------------------------------------------------------------------------------- /sounds/L.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/L.wav -------------------------------------------------------------------------------- /sounds/M.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/M.wav -------------------------------------------------------------------------------- /sounds/N.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/N.wav -------------------------------------------------------------------------------- /sounds/O.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/O.wav -------------------------------------------------------------------------------- /sounds/P.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/P.wav -------------------------------------------------------------------------------- /sounds/Q.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/Q.wav -------------------------------------------------------------------------------- /sounds/R.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/R.wav -------------------------------------------------------------------------------- /sounds/S.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/S.wav -------------------------------------------------------------------------------- /sounds/T.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/T.wav -------------------------------------------------------------------------------- /sounds/U.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/U.wav -------------------------------------------------------------------------------- /sounds/V.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/V.wav -------------------------------------------------------------------------------- /sounds/W.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/W.wav -------------------------------------------------------------------------------- /sounds/X.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/X.wav -------------------------------------------------------------------------------- /sounds/Y.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/Y.wav -------------------------------------------------------------------------------- /sounds/Z.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/sounds/Z.wav -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/images/.DS_Store -------------------------------------------------------------------------------- /ScreenshotMain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/ScreenshotMain.png -------------------------------------------------------------------------------- /ScreenshotSearch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaundai/Letter-Learning/HEAD/ScreenshotSearch.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Letter Names 5 | 6 | 7 | 8 | 9 | 10 |
11 |

Learn Letter Names

12 |

Type a letter to hear its name or type your name in the box below!

13 | 14 |
15 | 16 | 17 |
18 |
19 |
20 |
21 | 22 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Letter-Learning 2 | Using vanilla JavaScript with a ton of event listeners and search functionality to build interactive toddler game for learning keys and the names of letters. 3 | 4 | 5 | #### Letter-Learning Toddler Game 6 | 7 | Using vanilla JavaScript with a ton of event listeners and search functionality to build interactive toddler game for learning keys and the names of letters. 8 | 9 | #### Live project 10 | 11 | See live project on Surge here: https://shaundai.github.io/Letter-Learning/ 12 | 13 | ## Project Screen Shots 14 | ![Project main page](./ScreenshotMain.png?raw=true "Main page - press any letter key to hear the name of letter") 15 | 16 | Main page - press any letter key to hear the name of letter 17 | 18 | ![Search](./ScreenshotSearch.png?raw=true "Search - adding letters into the input window will make the letters appear on the screen") 19 | 20 | Search - adding letters into the input window will make the letters appear on the screen -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 10px; 3 | background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%,#4DB3DD), color-stop(100%,#52B7E1) ); 4 | background-size: cover; 5 | } 6 | 7 | body,html { 8 | margin: 0; 9 | padding: 0; 10 | font-family: sans-serif; 11 | } 12 | 13 | h1,h2 { 14 | text-align: center; 15 | color: rgb(4, 47, 122); 16 | } 17 | 18 | input { 19 | margin: 12px auto; 20 | display: block; 21 | height: 2.5rem; 22 | width: 250px; 23 | border-radius: .5rem; 24 | } 25 | 26 | #keyID, #keyIDPressed { 27 | display: flex; 28 | flex-wrap: wrap; 29 | flex: 1; 30 | align-items: center; 31 | justify-content: center; 32 | margin-bottom: 5px; 33 | } 34 | 35 | .wrapper { 36 | flex: 1; 37 | align-items: center; 38 | justify-content: center; 39 | min-height: calc(100vh - 80px); 40 | } 41 | 42 | .showing { 43 | opacity: 0; 44 | } 45 | 46 | .key { 47 | border-radius: .5rem; 48 | margin: 1rem; 49 | font-size: 1.5rem; 50 | padding: 2.5rem .5rem; 51 | position: relative; 52 | transition: all .07s ease; 53 | min-width: calc(10%); 54 | max-width: 12rem; 55 | text-align: center; 56 | color: white; 57 | background: rgba(16,90,201); 58 | text-shadow: 0 0 .5rem black; 59 | } 60 | 61 | .key:active { 62 | transform: scale(0.97); 63 | transition: transform .2s; 64 | } 65 | 66 | .back { 67 | width: 100%; 68 | height: 100%; 69 | position: relative; 70 | padding: 0px; 71 | } 72 | 73 | .playing { 74 | transform: scale(1.1); 75 | border-color: #ffc600; 76 | box-shadow: 0 0 1rem #ffc600; 77 | } 78 | 79 | kbd { 80 | display: block; 81 | font-size: 4rem; 82 | } 83 | 84 | .sound { 85 | font-size: 1.2rem; 86 | text-transform: uppercase; 87 | letter-spacing: .1rem; 88 | color: #ffc600; 89 | } 90 | 91 | footer { 92 | font-size: 1.5rem; 93 | width: 100%; 94 | text-align: center; 95 | height: 40px; 96 | color: rgb(4, 47, 122); 97 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const inputWindow = document.querySelector('input'); 2 | 3 | const allCards = [ 4 | {name: "A", example: "alligator", keycode: "65", src: "sounds/A.wav"}, 5 | {name: "B", example: "bear", keycode: "66", src: "sounds/B.wav"}, 6 | {name: "C", example: "cat", keycode: "67", src: "sounds/C.wav"}, 7 | {name: "D", example: "dog", keycode: "68", src: "sounds/D.wav"}, 8 | {name: "E", example: "elephant", keycode: "69", src: "sounds/E.wav"}, 9 | {name: "F", example: "frog", keycode: "70", src: "sounds/F.wav"}, 10 | {name: "G", example: "gorilla", keycode: "71", src: "sounds/G.wav"}, 11 | {name: "H", example: "horse", keycode: "72", src: "sounds/H.wav"}, 12 | {name: "I", example: "iguana", keycode: "73", src: "sounds/I.wav"}, 13 | {name: "J", example: "jackal", keycode: "74", src: "sounds/J.wav"}, 14 | {name: "K", example: "koala", keycode: "75", src: "sounds/K.wav"}, 15 | {name: "L", example: "llama", keycode: "76", src: "sounds/L.wav"}, 16 | {name: "M", example: "moose", keycode: "77", src: "sounds/M.wav"}, 17 | {name: "N", example: "newt", keycode: "78", src: "sounds/N.wav"}, 18 | {name: "O", example: "owl", keycode: "79", src: "sounds/O.wav"}, 19 | {name: "P", example: "penguin", keycode: "80", src: "sounds/P.wav"}, 20 | {name: "Q", example: "quail", keycode: "81", src: "sounds/Q.wav"}, 21 | {name: "R", example: "raccoon", keycode: "82", src: "sounds/R.wav"}, 22 | {name: "S", example: "skunk", keycode: "83", src: "sounds/S.wav"}, 23 | {name: "T", example: "turtle", keycode: "84", src: "sounds/T.wav"}, 24 | {name: "U", example: "unicorn", keycode: "85", src: "sounds/U.wav"}, 25 | {name: "V", example: "vulture", keycode: "86", src: "sounds/V.wav"}, 26 | {name: "W", example: "walrus", keycode: "87", src: "sounds/W.wav"}, 27 | {name: "X", example: "x-ray fish", keycode: "88", src: "sounds/X.wav"}, 28 | {name: "Y", example: "yellow jacket", keycode: "89", src: "sounds/Y.wav"}, 29 | {name: "Z", example: "zebra", keycode: "90", src: "sounds/Z.wav"}, 30 | ]; 31 | 32 | const createLetterCards = (letter) => { 33 | return `
34 | ${letter.name} 35 | ${letter.example} 36 | 37 | ${letter.example} 38 |
` 39 | } 40 | 41 | const allCardsBuilt = allCards.map(createLetterCards); 42 | 43 | inputWindow.addEventListener("keyup", function (e){ 44 | if (document.activeElement == !inputWindow) return; 45 | const getInputText = inputWindow.value.toUpperCase().replace(/[^A-Za-z]/g,"").split(""); 46 | const findObjectsForInput = getInputText.map(letter=> { 47 | return allCards.find(letterName => { 48 | return `${letter}` === letterName.name}) 49 | }); 50 | const renderPressedKeys = findObjectsForInput.map(createLetterCards); 51 | document.getElementById("keyIDPressed").innerHTML = renderPressedKeys; 52 | }) 53 | 54 | document.getElementById("keyID").innerHTML = allCardsBuilt; 55 | 56 | inputWindow.addEventListener("keyup", function(e){ 57 | const inputDiv = document.getElementById("keyIDPressed"); 58 | const alphaDiv = document.getElementById("keyID"); 59 | if (inputWindow.value.length > 0){ 60 | return alphaDiv.classList.add('showing') 61 | } else { 62 | return alphaDiv.classList.remove('showing') 63 | }}) 64 | 65 | window.addEventListener("keydown", function(e){ 66 | if (document.activeElement == inputWindow) return; 67 | const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`) 68 | const key = document.getElementById(`${e.keyCode}`) 69 | if(!audio) return; 70 | audio.currentTime = 0; 71 | key.classList.add('playing'); 72 | audio.play(); 73 | }); 74 | 75 | function removeTransition(e){ 76 | if(e.propertyName !== 'transform') return; 77 | this.classList.remove('playing'); 78 | } 79 | 80 | const keys = document.querySelectorAll('.key'); 81 | keys.forEach(key => key.addEventListener('transitionend', removeTransition)); --------------------------------------------------------------------------------