diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..9915afd6
Binary files /dev/null and b/.DS_Store differ
diff --git a/Public/tell-me-a-joke.html b/Public/tell-me-a-joke.html
new file mode 100644
index 00000000..85dda53d
--- /dev/null
+++ b/Public/tell-me-a-joke.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+ 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);
+}
+