├── Day2 └── lookup-engine.js ├── Day3 └── index.html ├── day-1-type-narrowing-using-type-guards.ts └── day-1-type-narrowing.ts /Day2/lookup-engine.js: -------------------------------------------------------------------------------- 1 | // 100DaysOfCode - Day 2: Display Word Meanings on DoubleClick in any HTML file on the browser 2 | // Add this script in your HTML file as 3 | // Open developer console 4 | // Doubleclick on any word :) 5 | 6 | class TinyLookup { 7 | engage() { 8 | const that = this 9 | document.addEventListener("dblclick", function () { 10 | const selection = (document.selection && document.selection.createRange().text) || 11 | (window.getSelection && window.getSelection().toString()) 12 | that.lookup(selection) 13 | }) 14 | } 15 | 16 | lookup(word) { 17 | const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}` 18 | fetch(url) 19 | .then((response) => (response.ok ? response.json() : Promise.reject())) 20 | .then((data) => { 21 | console.log(`%c${word}`, 'background: #FFDC00; color: #000000; font-size: 14px; padding: 5px;') 22 | data[0].meanings.forEach((meaning) => { 23 | meaning.definitions.forEach((def) => { 24 | console.log(def.definition) 25 | }) 26 | }) 27 | console.log("\n") 28 | }) 29 | .catch((error) => { 30 | console.log(`%c unknown word ${word}`, 'background: #FF0000; color: #FFFFFF; font-size: 14px; padding: 5px;') 31 | }) 32 | } 33 | } 34 | 35 | new TinyLookup().engage() 36 | -------------------------------------------------------------------------------- /Day3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Alarm Clock 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |
17 | 23 |
24 | 25 |
26 | 27 | 55 | 56 | -------------------------------------------------------------------------------- /day-1-type-narrowing-using-type-guards.ts: -------------------------------------------------------------------------------- 1 | //100DaysOfCode - Day 1 2 | 3 | type Rectangle = { 4 | width: number 5 | height: number 6 | } 7 | 8 | type Circle = { 9 | radius: number 10 | } 11 | 12 | const pi: number = 3.1415_9265_3589_7932_38 // yes you can use underscores to make a long number readable 13 | 14 | function getArea(shape: Rectangle | Circle): number { 15 | //we are accepting Rectangle or Circle types 16 | //type narrowing using type guard 17 | if (isCircle(shape)) { 18 | //so this is shape is of Circle type 19 | return pi * Math.pow(shape.radius, 2) 20 | } 21 | return shape.width * shape.height 22 | } 23 | 24 | //type guard using type predicate 25 | function isCircle(shape: Rectangle | Circle): shape is Circle { 26 | return (shape as Circle).radius !== undefined 27 | } 28 | 29 | //type guard using type predicate 30 | function isRectangle(shape: Rectangle | Circle): shape is Rectangle { 31 | return (shape as Rectangle).width !== undefined && (shape as Rectangle).height !== undefined 32 | } 33 | 34 | const c: Circle = { radius: 20 } 35 | const r: Rectangle = { width: 10, height: 8 } 36 | 37 | console.log(getArea(c)) 38 | console.log(getArea(r)) 39 | -------------------------------------------------------------------------------- /day-1-type-narrowing.ts: -------------------------------------------------------------------------------- 1 | //100DaysOfCode - Day 1 2 | 3 | type Rectangle = { 4 | width: number 5 | height: number 6 | } 7 | 8 | type Circle = { 9 | radius: number 10 | } 11 | 12 | const pi: number = 3.1415_9265_3589_7932_38 // yes you can use underscores to make a long number readable 13 | 14 | //type narrowing using property check 15 | const getArea: Function = (shape: Rectangle | Circle): number => { 16 | //we are accepting Rectangle or Circle types 17 | if ("radius" in shape) { 18 | //so this is shape is of Circle type 19 | return pi * Math.pow(shape.radius, 2) 20 | } 21 | return shape.width * shape.height 22 | } 23 | 24 | const c: Circle = { 25 | radius: 20, 26 | } 27 | 28 | const r: Rectangle = { 29 | width: 10, 30 | height: 8, 31 | } 32 | 33 | console.log(getArea(c)) 34 | console.log(getArea(r)) 35 | --------------------------------------------------------------------------------