diff --git a/Date and Time Calculator/icon.png b/Date and Time Calculator/icon.png
new file mode 100644
index 00000000..6c2d962e
Binary files /dev/null and b/Date and Time Calculator/icon.png differ
diff --git a/Date and Time Calculator/manifest.json b/Date and Time Calculator/manifest.json
new file mode 100644
index 00000000..db0ebc16
--- /dev/null
+++ b/Date and Time Calculator/manifest.json	
@@ -0,0 +1,16 @@
+{
+  "manifest_version": 3,
+  "name": "Date and Time Calculator",
+  "version": "1.0",
+  "description": "A simple Date and time Calculator.",
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "128": "icon.png"
+    }
+  },
+  "icons": {
+    "128": "icon.png"
+  },
+  "permissions": ["activeTab"]
+}
\ No newline at end of file
diff --git a/Date and Time Calculator/popup.css b/Date and Time Calculator/popup.css
new file mode 100644
index 00000000..1befbc3b
--- /dev/null
+++ b/Date and Time Calculator/popup.css	
@@ -0,0 +1,249 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
+
+button,
+input,
+select {
+    vertical-align: middle
+}
+
+a,
+button {
+    text-decoration: none
+}
+
+body,
+html {
+    height: 500px;
+    width: 500px;
+    margin: 0;
+    padding: 0;
+    left: 0;
+    top: 0;
+    font-size: 100%;
+    background-image: radial-gradient(#ff5d71, #EB3349);
+}
+
+* {
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+    color: #333447;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased
+}
+
+p {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.8
+}
+
+h1 {
+    font-size: 18px;
+    font-weight: 500;
+    color: #757575;
+    margin: 10px;
+    text-align: center;
+}
+
+ul {
+    padding: 0;
+    list-style: none;
+    font-size: 14px
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0
+}
+
+.container {
+    position: absolute;
+    width: 80%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    border-radius: 10px;
+    padding: 1rem 1.5rem;
+    box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.3);
+}
+
+.convert-box {
+    background-color: #e2e2e2;
+    margin: 15px 0 0;
+    padding: 18px 13px 13px;
+    border-radius: 5px;
+}
+
+.col-amount,
+.col-button,
+.col-period {
+    margin: 0;
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+    overflow: hidden;
+    display: inline-block
+}
+
+.col-amount {
+    width: 25%;
+    margin-right: 2%;
+    float: left
+}
+
+.col-period {
+    width: 73%;
+    float: left
+}
+
+.col-button {
+    width: 100%;
+    margin-top: 15px
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0
+}
+
+button,
+input {
+    display: inline-block
+}
+
+input {
+    border: 0 solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+    width: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    height: 35px;
+    outline: none;
+    text-align: center
+}
+
+select {
+    box-shadow: none;
+    border: 0 solid #ccc;
+    border-radius: 4px;
+    margin: 0;
+    background-color: #fff;
+    padding: 0 5px;
+    box-sizing: border-box;
+    display: block;
+    font-size: 16px;
+    height: 35px;
+    width: 100%;
+    outline: none;
+}
+
+button {
+    background-color: #ffcc00;
+    color: #353842;
+    font-weight: 700;
+    font-family: inherit;
+    font-size: 16px;
+    padding: 5px 10px;
+    border: transparent;
+    border-radius: 4px;
+    text-align: center;
+    zoom: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    height: 35px;
+    width: 100%;
+    transition: scale .2s ease-in-out;
+}
+
+button:active {
+    scale: 0.98;
+}
+
+
+.content {
+    float: none;
+    width: 100%;
+    margin: 0 10px
+}
+
+#time {
+    font-size: 22px;
+    margin: 0
+}
+
+#date {
+    font-size: 18px;
+    margin: 0
+}
+
+.hide {
+    display: none
+}
+
+.show {
+    display: block
+}
+
+@media (min-width:768px) {
+    .container {
+        width: 600px;
+        margin: 0 auto;
+        padding: 1rem 2rem;
+    }
+
+    h1 {
+        font-size: 24px;
+        margin: 10px 0
+    }
+
+    h2 {
+        font-size: 18px
+    }
+
+    .col-amount {
+        width: 20%;
+        float: left;
+        margin: 0
+    }
+
+    .col-period {
+        width: 45%;
+        float: left;
+        margin: 0 5%
+    }
+
+    .col-button {
+        width: 25%;
+        float: left;
+        margin: 0
+    }
+
+    #time {
+        font-size: 36px;
+        margin: 0
+    }
+
+    #date {
+        font-size: 24px;
+        margin: 0
+    }
+
+    .convert-box {
+        margin: 25px 0;
+        padding: 30px 25px 26px
+    }
+
+    input,
+    select,
+    button {
+        height: 45px
+    }
+}
\ No newline at end of file
diff --git a/Date and Time Calculator/popup.html b/Date and Time Calculator/popup.html
new file mode 100644
index 00000000..50eb9f83
--- /dev/null
+++ b/Date and Time Calculator/popup.html	
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="stylesheet" href="popup.css">
+    <title>Date and Time Calculator</title>
+</head>
+
+<body>
+    <div class="container">
+        <h1 class="calculated-heading">Date And Time Calculator</h1>
+        <div id="calculated-time"></div>
+        <div class="convert-box">
+            <fieldset>
+                <form id="convert-form" action="" target="_top">
+                    <div class="col-amount">
+                        <input name="amount" required id="amount" step="1" type="number" min="1" max="1000"
+                            placeholder="number">
+                    </div>
+                    <div class="col-period">
+                        <select name="period" id="period">
+                            <option value="minutes-ago-from-now">minutes ago from now</option>
+                            <option value="hours-ago-from-now">hours ago from now</option>
+                            <option value="days-ago-from-today">days ago from today</option>
+                            <option value="weeks-ago-from-today">weeks ago from today</option>
+                            <option value="months-ago-from-today">months ago from today</option>
+                            <option value="years-ago-from-today">years ago from today</option>
+                            <option value="minutes-from-now">minutes from now</option>
+                            <option value="hours-from-now">hours from now</option>
+                            <option value="days-from-today">days from today</option>
+                            <option value="weeks-from-today">weeks from today</option>
+                            <option value="months-from-today">months from today</option>
+                            <option value="years-from-today">years from today</option>
+                        </select>
+                    </div>
+                    <div class="col-button">
+                        <button type="submit">Calculate</button>
+                    </div>
+            </fieldset>
+            </form>
+        </div>
+    </div>
+    <script src="popup.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Date and Time Calculator/popup.js b/Date and Time Calculator/popup.js
new file mode 100644
index 00000000..7132689f
--- /dev/null
+++ b/Date and Time Calculator/popup.js	
@@ -0,0 +1,87 @@
+document.getElementById("convert-form").onsubmit = function (event) {
+    event.preventDefault();
+    let amount = Number(document.getElementById("amount").value);
+    var per = document.getElementById("period").value;
+
+    if (amount) {
+        var currentDate = new Date();
+
+        switch (per) {
+            case "minutes-ago-from-now":
+                currentDate.setMinutes(currentDate.getMinutes() - amount);
+                var headingText = `What Time Was It ${amount} Minutes Ago From Now?`;
+                break;
+            case "hours-ago-from-now":
+                currentDate.setHours(currentDate.getHours() - amount);
+                var headingText = `What Time Was It ${amount} Hour Ago From Now?`;
+                break;
+            case "days-ago-from-today":
+                currentDate.setDate(currentDate.getDate() - amount);
+                var headingText = `What Was The Date ${amount} Days Ago From Today?`;
+                break;
+            case "weeks-ago-from-today":
+                currentDate.setDate(currentDate.getDate() - amount * 7);
+                var headingText = `What Was The Date ${amount} Weeks Ago From Today?`;
+                break;
+            case "months-ago-from-today":
+                currentDate.setMonth(currentDate.getMonth() - amount);
+                var headingText = `What Was The Date ${amount} Months Ago From Today?`;
+                break;
+            case "years-ago-from-today":
+                currentDate.setFullYear(currentDate.getFullYear() - amount);
+                var headingText = `What Was The Date ${amount} Years Ago From Today?`;
+                break;
+            case "minutes-from-now":
+                currentDate.setMinutes(currentDate.getMinutes() + amount);
+                var headingText = `What Time Will It Be ${amount} Minutes From Now?`;
+                break;
+            case "hours-from-now":
+                currentDate.setHours(currentDate.getHours() + amount);
+                var headingText = `What Time Will It Be ${amount} Hour From Now?`;
+                break;
+            case "days-from-today":
+                currentDate.setDate(currentDate.getDate() + amount);
+                var headingText = `What Will Be The Date ${amount} Days From Today?`;
+                break;
+            case "weeks-from-today":
+                currentDate.setDate(currentDate.getDate() + amount * 7);
+                var headingText = `What Will Be The Date ${amount} Weeks From Today?`;
+                break;
+            case "months-from-today":
+                currentDate.setMonth(currentDate.getMonth() + amount);
+                var headingText = `What Will Be The Date ${amount} Months From Today?`;
+                break;
+            case "years-from-today":
+                currentDate.setFullYear(currentDate.getFullYear() + amount);
+
+                var headingText = `What Will Be The Date ${amount} Years From Today?`;
+                break;
+            default:
+                break;
+        }
+
+        var calculatedTimeDiv = document.getElementById("calculated-time");
+        var options = {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+            second: "numeric",
+            hour12: true,
+        };
+        calculatedTimeDiv.innerHTML = `
+            <div id="time">
+                ${currentDate.toLocaleString("en-US", options).split(" at ")[1]
+            }    
+            </div>
+            <div id="date">
+                ${currentDate.toLocaleString("en-US", options).split(" at ")[0]
+            }    
+            </div>
+        `;
+
+        document.querySelector(".calculated-heading").innerHTML = headingText;
+    }
+};
\ No newline at end of file