From 736fd30e4911235f79002463cc21d1bd93070c08 Mon Sep 17 00:00:00 2001 From: dinesh sunny Date: Mon, 14 Jul 2025 18:19:40 -0500 Subject: [PATCH] tell-me-a-joke --- .DS_Store | Bin 0 -> 6148 bytes Public/tell-me-a-joke.html | 18 ++++++++++++ assets/Js/tell-me-a-joke.js | 36 +++++++++++++++++++++++ assets/css/tell-me-a-joke.css | 53 ++++++++++++++++++++++++++++++++++ 4 files changed, 107 insertions(+) create mode 100644 .DS_Store create mode 100644 Public/tell-me-a-joke.html create mode 100644 assets/Js/tell-me-a-joke.js create mode 100644 assets/css/tell-me-a-joke.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..9915afd650c4e2da191e545d18f6da173a70cdff GIT binary patch literal 6148 zcmeHKU60a06urYD6jmc^G}*@{z9J&5Zp^+QADT^EGz)5s8l<$kT}w-75e*^XS^toK z!Y317{V96pgM=3L$;22km&`rWnR}))XQnd@5wZHjzC%qvRQKU9>YKJKhF+nP}sx;&kbhj;Ri27ucpp z8`-}S>^*viUVkJPy+?oP7FDT2pM)>b2qo|1?@u|27V_Zw7_|ddiO!(Zki0lYX!U(X zt1LZ69~&5Vn>y4=M01r^qcilBCS;Mvdl`=vYFrp=O~aAealct3&kdt;`6o;5q%UQ% zM%LIh-gM4_X(#GOld#?&zv55bAn>eZzHdEuooTOdy%G3P-}RlbAh@=Jkk>C<-wvkr zVB*`M;C5t%ku!3=!v1Vly?ab?0qXWY1X`{=ay!5jL)7mO9g za7qZfqHqack;!3ZTl4^{;sm&9P4HP=RUwDfH^5qSF@q5pSdDSr#4IKm5q*Zn4&n#k zCm4JVS#M0M6q?ii7NmwjbdTQ^S=O` zV=AmETu4L>j7cg`QklA9FiA(bsp4u17ZN3%n7Vv0^=77SC``N^?VBQ;SWTk#S^=#< zT!9_=Sm5V>>*D)=oTQ($0$PEsQh=qKon{?FQfKSh;P_c + + + + + Joke Teller + + + + + +

Need a Laugh?

+ +
+ + + + \ No newline at end of file diff --git a/assets/Js/tell-me-a-joke.js b/assets/Js/tell-me-a-joke.js new file mode 100644 index 00000000..de2151ea --- /dev/null +++ b/assets/Js/tell-me-a-joke.js @@ -0,0 +1,36 @@ + + async function getJoke() { + const res = await fetch('https://official-joke-api.appspot.com/random_joke'); + const data = await res.json(); + + const setup = data.setup; + const punchline = data.punchline; + + document.getElementById('joke').innerHTML = `${setup}
${punchline}`; + + speakWithPause(setup, punchline); + } + + function speakWithPause(setup, punchline) { + // Cancel ongoing speech + window.speechSynthesis.cancel(); + + const first = new SpeechSynthesisUtterance(setup); + first.lang = 'en-US'; + first.pitch = 0.95; + first.rate = 0.9; + + const second = new SpeechSynthesisUtterance(punchline); + second.lang = 'en-US'; + second.pitch = 0.95; + second.rate = 0.85; + + first.onend = () => { + setTimeout(() => { + speechSynthesis.speak(second); + }, 600); // 600ms pause before punchline + }; + + speechSynthesis.speak(first); + } + \ No newline at end of file diff --git a/assets/css/tell-me-a-joke.css b/assets/css/tell-me-a-joke.css new file mode 100644 index 00000000..f234f999 --- /dev/null +++ b/assets/css/tell-me-a-joke.css @@ -0,0 +1,53 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background: #f4f1ee; + font-family: 'Georgia', serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + padding: 20px; +} + +h1 { + font-size: 36px; + color: #2c3e50; + margin-bottom: 40px; +} + +button { + background: #2c3e50; + color: #fff; + border: none; + padding: 14px 28px; + font-size: 18px; + border-radius: 6px; + cursor: pointer; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); + transition: background 0.3s ease, transform 0.2s ease; +} + +button:hover { + background: #34495e; + transform: scale(1.03); +} + +#joke { + margin-top: 40px; + font-size: 22px; + line-height: 1.6; + max-width: 600px; + text-align: center; + color: #333; + background: #fff; + padding: 25px 30px; + border-radius: 10px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); +} +