10 completed

zpratikpathak · Feb 14, 2024 · 8e180e7 · 8e180e7
commit 8e180e7
Show file tree

Hide file tree

Showing 90 changed files with 37,572 additions and 0 deletions.
diff --git a/01-iOS-Calculator/README.md b/01-iOS-Calculator/README.md
@@ -0,0 +1,6 @@
+# iOS-Calculator
+A Calculator to implement my HTML5, CSS and JS skills.
+
+Check it out here: https://zpratikpathak.github.io/iOS-Calculator/
+
+![image](https://user-images.githubusercontent.com/49340667/115710970-9841cf80-a390-11eb-9e7f-8067bcf74a3e.png)
diff --git a/01-iOS-Calculator/index.html b/01-iOS-Calculator/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>iOS Calculator</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+
+  <body>
+    <div class="calc">
+      <section class="screen">0</section>
+      <section class="class-buttons">
+        <div class="calc-row">
+          <button class="double calc-button">C</button>
+          <button class="calc-button">←</button>
+          <button class="calc-button">÷</button>
+        </div>
+        <div class="calc-row">
+          <button class="calc-button">7</button>
+          <button class="calc-button">8</button>
+          <button class="calc-button">9</button>
+          <button class="calc-button">×</button>
+        </div>
+        <div class="calc-row">
+          <button class="calc-button">4</button>
+          <button class="calc-button">5</button>
+          <button class="calc-button">6</button>
+          <button class="calc-button">-</button>
+        </div>
+        <div class="calc-row">
+          <button class="calc-button">1</button>
+          <button class="calc-button">2</button>
+          <button class="calc-button">3</button>
+          <button class="calc-button">+</button>
+        </div>
+        <div class="calc-row">
+          <button class="tripple calc-button">0</button>
+          <button class="calc-button">=</button>
+        </div>
+      </section>
+    </div>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/01-iOS-Calculator/script.js b/01-iOS-Calculator/script.js
@@ -0,0 +1,95 @@
+let runningTotal = 0;
+let buffer = "0";
+let previousOperator;
+const screen = document.querySelector(".screen");
+
+function buttonClick(value) {
+  if (isNaN(parseInt(value))) {
+    handleSymbol(value);
+  } else {
+    handleNumber(value);
+  }
+  rerender();
+}
+
+function handleNumber(value) {
+  if (buffer === "0") {
+    buffer = value;
+  } else {
+    buffer += value;
+  }
+}
+
+function handleMath(value) {
+  if (buffer === "0") {
+    // do nothing
+    return;
+  }
+
+  const intBuffer = parseInt(buffer);
+  if (runningTotal === 0) {
+    runningTotal = intBuffer;
+  } else {
+    flushOperation(intBuffer);
+  }
+
+  previousOperator = value;
+
+  buffer = "0";
+}
+
+function flushOperation(intBuffer) {
+  if (previousOperator === "+") {
+    runningTotal += intBuffer;
+  } else if (previousOperator === "-") {
+    runningTotal -= intBuffer;
+  } else if (previousOperator === "×") {
+    runningTotal *= intBuffer;
+  } else {
+    runningTotal /= intBuffer;
+  }
+}
+
+function handleSymbol(value) {
+  switch (value) {
+    case "C":
+      buffer = "0";
+      runningTotal = 0;
+      break;
+    case "=":
+      if (previousOperator === null) {
+        // need two numbers to do math
+        return;
+      }
+      flushOperation(parseInt(buffer));
+      previousOperator = null;
+      buffer = +runningTotal;
+      runningTotal = 0;
+      break;
+    case "←":
+      if (buffer.length === 1) {
+        buffer = "0";
+      } else {
+        buffer = buffer.substring(0, buffer.length - 1);
+      }
+      break;
+    case "+":
+    case "-":
+    case "×":
+    case "÷":
+      handleMath(value);
+      break;
+  }
+}
+
+function rerender() {
+  screen.innerText = buffer;
+}
+
+function init() {
+  document.querySelector(".class-buttons").addEventListener("click", function(event) {
+    buttonClick(event.target.innerText);
+  });
+}
+
+init(); //init update
diff --git a/01-iOS-Calculator/style.css b/01-iOS-Calculator/style.css
@@ -0,0 +1,68 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+}
+
+.calc {
+  width: 480px;
+  background-color: black;
+  color: white;
+}
+
+.screen {
+  font-size: 40px;
+  font-family: "Courier New", Courier, monospace;
+  text-align: right;
+  padding: 20px 5px;
+}
+
+.calc-button {
+  background-color: #d8d9db;
+  color: black;
+  height: 100px;
+  width: 24.5%;
+  border: none;
+  border-radius: 0;
+  font-size: 40px;
+  cursor: pointer;
+}
+
+.calc-button:hover {
+  background-color: #efeff0;
+}
+
+.calc-button:active {
+  background-color: #aeafb1;
+}
+
+.calc-button:last-child {
+  background-color: rgba(253, 169, 11, 0.795);
+}
+
+.calc-button:last-child:hover {
+  background-color: rgba(243, 180, 63, 0.87);
+  color: white;
+}
+
+.calc-button:last-child:active {
+  background-color: rgba(170, 111, 2, 0.918);
+}
+
+.double {
+  width: 49.7%;
+}
+
+.tripple {
+  width: 74.8%;
+}
+
+.calc-row {
+  display: flex;
+  align-content: stretch;
+  justify-content: space-between;
+  margin-bottom: 0.5%;
+}
diff --git a/02-Travel-India/icons/close.png b/02-Travel-India/icons/close.png
diff --git a/02-Travel-India/icons/facebook.png b/02-Travel-India/icons/facebook.png
diff --git a/02-Travel-India/icons/instagram.png b/02-Travel-India/icons/instagram.png
diff --git a/02-Travel-India/icons/left.png b/02-Travel-India/icons/left.png
diff --git a/02-Travel-India/icons/menu.png b/02-Travel-India/icons/menu.png
diff --git a/02-Travel-India/icons/right.png b/02-Travel-India/icons/right.png
diff --git a/02-Travel-India/icons/twitter.png b/02-Travel-India/icons/twitter.png
diff --git a/02-Travel-India/index.html b/02-Travel-India/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Travel India</title>
+  </head>
+  <body>
+    <section>
+      <div class="bannerVideo" id="slideshow">
+        <video
+          src="./videos/mumbai.mp4"
+          autoplay
+          muted
+          loop
+          class="active"
+        ></video>
+        <video src="./videos/kerala.mp4" autoplay muted loop></video>
+        <video src="./videos/banglore.mp4" autoplay muted loop></video>
+        <video src="./videos/varanasi.mp4" autoplay muted loop></video>
+      </div>
+
+      <div class="container">
+        <!-- Navigation menu -->
+        <header class="" id="navbar">
+          <a href="#" class="logo">Travel India</a>
+          <ul>
+            <li><a href="/" class="active">Home</a></li>
+            <li><a href="#">Destination</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </header>
+
+        <span class="menuIcon" id="menuIcon"></span>
+
+        <!-- Places to visit/ Featured Places -->
+
+        <div class="content">
+          <div class="bannerText" id="slideShowText">
+            <div class="active">
+              <h2>Mumbai</h2>
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
+                ad sed vero, ullam accusantium modi odio vel unde repellat fuga
+                at earum voluptatum quaerat quidem nemo totam dicta. Quae,
+                quisquam!
+              </p>
+            </div>
+
+            <div class="">
+              <h2>Kerala</h2>
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
+                ad sed vero, ullam accusantium modi odio vel unde repellat fuga
+                at earum voluptatum quaerat quidem nemo totam dicta. Quae,
+                quisquam!
+              </p>
+            </div>
+
+            <div class="">
+              <h2>Banglore</h2>
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
+                ad sed vero, ullam accusantium modi odio vel unde repellat fuga
+                at earum voluptatum quaerat quidem nemo totam dicta. Quae,
+                quisquam!
+              </p>
+            </div>
+
+            <div class="">
+              <h2>Varanasi</h2>
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
+                ad sed vero, ullam accusantium modi odio vel unde repellat fuga
+                at earum voluptatum quaerat quidem nemo totam dicta. Quae,
+                quisquam!
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Social Media Icons -->
+        <ul class="sci">
+          <li>
+            <a href="https://www.facebook.com/pratikpathak24" target="blank"
+              ><img src="./icons/facebook.png" alt=""
+            /></a>
+          </li>
+          <li>
+            <a href="https://www.instagram.com/pratikpathak.exe/" target="blank"
+              ><img src="./icons/instagram.png" alt=""
+            /></a>
+          </li>
+          <li>
+            <a href="https://twitter.com/zpathakpratik" target="blank"
+              ><img src="./icons/twitter.png" alt=""
+            /></a>
+          </li>
+        </ul>
+
+        <!-- Navigation Buttons -->
+        <ul class="controls">
+          <li id="prevSlide"><img src="./icons/left.png" alt="" /></li>
+          <li id="nextSlide"><img src="./icons/right.png" alt="" /></li>
+        </ul>
+      </div>
+    </section>
+
+    <script src="./javascript.js"></script>
+  </body>
+</html>
diff --git a/02-Travel-India/javascript.js b/02-Travel-India/javascript.js
@@ -0,0 +1,39 @@
+const slideShow = document.getElementById("slideshow");
+const slides = slideShow.getElementsByTagName("video");
+var index = 0;
+
+const slideShowText = document.getElementById("slideShowText");
+const slidesText = slideShowText.getElementsByTagName("div");
+var i = 0;
+
+document.getElementById("prevSlide").addEventListener("click", () => {
+  slides[index].classList.remove("active");
+  index = (index - 1 + slides.length) % slides.length;
+  slides[index].classList.add("active");
+
+  slidesText[i].classList.remove("active");
+  i = (i - 1 + slidesText.length) % slidesText.length;
+  slidesText[i].classList.add("active");
+});
+
+document.getElementById("nextSlide").addEventListener("click", () => {
+  slides[index].classList.remove("active");
+  index = (index + 1) % slides.length;
+  slides[index].classList.add("active");
+
+  slidesText[i].classList.remove("active");
+  i = (i + 1) % slidesText.length;
+  slidesText[i].classList.add("active");
+});
+
+// function toggleMenu() {
+//   const menuIcon = document.querySelector(".menuIcon");
+//   menuIcon.classList.toggle("active");
+// }
+
+document.getElementById("menuIcon").addEventListener("click", () => {
+  const menuIcon = document.querySelector(".menuIcon");
+  const navbar = document.getElementById("navbar");
+  menuIcon.classList.toggle("active");
+  navbar.classList.toggle("active");
+});