Day 36 & 37: HTTP and API and BOM and Backend

edyoda · Nov 23, 2022 · faf116f · faf116f
1 parent 7deeaea
commit faf116f
Show file tree

Hide file tree

Showing 9 changed files with 516 additions and 0 deletions.
diff --git a/javascript/Day36/index.js b/javascript/Day36/index.js
@@ -0,0 +1,34 @@
+console.log("Hey");
+
+setTimeout(() => {
+  console.log("Utkarsh");
+}, 3000);
+
+console.log("Bye");
+
+let timer1 = setInterval(() => {
+  console.log(new Date().getSeconds());
+}, 1000);
+
+setTimeout(() => {
+  clearInterval(timer1);
+}, 5000);
+
+window.screen;
+
+const search = new URLSearchParams(location.search);
+/*
+
+{
+    room:2,
+    min_bathroom:3,
+    min_bedroom:4,
+    date:['20-may-2022','22-may-2022']
+
+}
+
+*/
+
+search.get("room");
+search.get("min_bathroom");
+search.getAll("date");
diff --git a/javascript/Day37/index.html b/javascript/Day37/index.html
@@ -0,0 +1,14 @@
+<!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>Day 37</title>
+  </head>
+  <body>
+    <h1>WELcome to Day 37</h1>
+    <div id="details"></div>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/javascript/Day37/script.js b/javascript/Day37/script.js
@@ -0,0 +1,47 @@
+localStorage.setItem("name", "Utkarsh");
+localStorage.setItem("age", 32);
+localStorage.setItem("isEligible", true);
+
+//JSON
+
+let user = {
+  name: "Ajay",
+  city: "Kanpur",
+};
+
+localStorage.setItem("user", JSON.stringify(user));
+
+const name = localStorage.getItem("name");
+
+console.log(name);
+
+const userDetails = JSON.parse(localStorage.getItem("user"));
+
+console.log(userDetails);
+
+document.getElementById("details").innerHTML = JSON.stringify(userDetails);
+
+// sessionStorage.getItem()
+// sessionStorage.setItem()
+
+localStorage.removeItem("name");
+localStorage.removeItem("city");
+// sessionStorage.removeItem('')
+
+localStorage.clear();
+
+let obj = {
+  name: "utkarsh",
+  age: 23,
+};
+
+for (let key in obj) {
+  console.log(obj[key]);
+}
+
+let arr = [1, 2, 3, 4];
+
+for (let i of arr) {
+  console.log(i);
+}
+for (let i = 0; i < arr.length; i++) {}
diff --git a/javascript/Day37/template/index.html b/javascript/Day37/template/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;1,300&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./style.css" type="text/css" />
+    <title>Day37</title>
+  </head>
+  <body>
+    <header>
+      <div class="header-left">
+        <span>edyoda</span>
+      </div>
+      <div class="header-right">
+        <span>
+          EdYoda is free learning and knowledge sharing platform for techies
+        </span>
+        <button class="header-btn">Go to Main Website</button>
+      </div>
+    </header>
+    <main>
+      <section class="container"></section>
+    </main>
+    <div id="footer-sticker">
+      <div class="left-triangle"></div>
+    </div>
+    <script src="./script.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/javascript/Day37/template/script.js b/javascript/Day37/template/script.js
@@ -0,0 +1,61 @@
+let product_cards = [
+  {
+    img: "https://edyoda.s3.amazonaws.com/media/blog-images/7_reasons_to_learn_Python_u3lFION.jpg",
+    tittle: "Heading is very Long to adjust in one line",
+    author: "Arman Ahmed",
+    date: "05 Jul 2022",
+    description: ` If you are a fresh graduate - or new to IT - looking for the next
+        job, you need to read this. The last couple of years zekeLabs gave
+        me a unique opportunity to`,
+  },
+  {
+    img: "https://edyoda.s3.amazonaws.com/media/blog-images/7_reasons_to_learn_Python_u3lFION.jpg",
+    tittle: "Heading is very Long to adjust in one line",
+    author: "Arman Ahmed",
+    date: "05 Jul 2022",
+    description: ` If you are a fresh graduate - or new to IT - looking for the next
+        job, you need to read this. The last couple of years zekeLabs gave
+        me a unique opportunity to`,
+  },
+  {
+    img: "https://edyoda.s3.amazonaws.com/media/blog-images/7_reasons_to_learn_Python_u3lFION.jpg",
+    tittle: "Heading is very Long to adjust in one line",
+    author: "Arman Ahmed",
+    date: "05 Jul 2022",
+    description: ` If you are a fresh graduate - or new to IT - looking for the next
+        job, you need to read this. The last couple of years zekeLabs gave
+        me a unique opportunity to`,
+  },
+  {
+    img: "https://edyoda.s3.amazonaws.com/media/blog-images/7_reasons_to_learn_Python_u3lFION.jpg",
+    tittle: "Heading is very Long to adjust in one line",
+    author: "Arman Ahmed",
+    date: "05 Jul 2022",
+    description: ` If you are a fresh graduate - or new to IT - looking for the next
+        job, you need to read this. The last couple of years zekeLabs gave
+        me a unique opportunity to`,
+  },
+];
+
+const container = document.querySelector(".container");
+
+for (const each_card of product_cards) {
+  const cardDiv = document.createElement("div");
+
+  cardDiv.classList = "card";
+
+  const img = document.createElement("img");
+
+  img.setAttribute("src", each_card.img);
+
+  const h2 = document.createElement("h2");
+
+  h2.innerHTML = each_card.tittle;
+
+  const cardInfoDiv = document.createElement("div");
+  cardInfoDiv.classList = "card-info";
+
+  cardDiv.append(img);
+  cardDiv.append(h2);
+  container.append(cardDiv);
+}
diff --git a/javascript/Day37/template/style.css b/javascript/Day37/template/style.css
@@ -0,0 +1,128 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Raleway", sans-serif;
+}
+body {
+  background-color: #f2f6ff;
+}
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 40px;
+  background-color: white;
+  box-shadow: 2px 2px 2px #ccc;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+main {
+  margin-top: 80px;
+}
+.header-left {
+  margin-right: 20px;
+}
+
+.header-left > span {
+  font-size: 24px;
+  text-transform: uppercase;
+  font-weight: 700;
+
+  background-image: linear-gradient(to left, #0048ff, #0096ff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.header-right {
+  margin-left: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-right > span {
+  font-size: 10px;
+  color: gray;
+  margin-right: 50px;
+  width: 200px;
+}
+
+.header-btn {
+  border: none;
+  border-radius: 20px;
+  padding: 10px 15px;
+  font-size: 10px;
+  color: white;
+  background-image: linear-gradient(to left, #0048ff, #0096ff);
+  cursor: pointer;
+}
+
+#footer-sticker {
+  height: 30px;
+  width: 30px;
+  background-color: #0048ff;
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  box-shadow: 0px 8px 8px #ccc;
+  border-radius: 4px;
+}
+
+#footer-sticker .left-triangle {
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+
+  border-right: 5px solid #0048ff;
+  position: absolute;
+  left: -4px;
+}
+
+.container {
+  display: flex;
+  max-width: 80%;
+  flex-wrap: wrap;
+  margin: 0 auto;
+}
+
+.card {
+  width: 30%;
+  border: 1px solid skyblue;
+  border-radius: 4px;
+  box-shadow: 4px 4px 8px #ccc;
+  margin: 10px 10px;
+  overflow: hidden;
+  background-color: white;
+}
+
+.card > img {
+  height: 175px;
+  width: 100%;
+}
+
+.card > h2 {
+  margin: 10px 20px 0px 20px;
+  font-size: 15px;
+  font-weight: 700;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.card-info {
+  margin: 0px 20px;
+  font-size: 12px;
+  margin-top: 8px;
+}
+.card-info :first-child {
+  color: #0096ff;
+}
+
+.card-info + p {
+  margin: 10px 20px;
+  font-size: 12px;
+  color: gray;
+}
diff --git a/javascript/Day37/validation/index.html b/javascript/Day37/validation/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Day 32</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <link href="./style.css" rel="stylesheet" type="text/css" />
+  </head>
+
+  <body>
+    <div class="m-4">
+      <form id="usr-form" class="row g-2">
+        <div class="col-md-6">
+          <label for="name" class="form-label">Name</label>
+          <input type="text" class="form-control" id="name" name="name" />
+        </div>
+        <div class="col-md-6">
+          <label for="phone" class="form-label">Number</label>
+          <input type="number" class="form-control" id="phone" name="phone" />
+        </div>
+        <div class="col-md-6">
+          <label for="inputEmail4" class="form-label">Email</label>
+          <input
+            type="email"
+            class="form-control"
+            id="inputEmail4"
+            name="email"
+          />
+        </div>
+        <div class="col-md-6">
+          <label for="inputPassword4" class="form-label">Password</label>
+          <input
+            type="password"
+            class="form-control"
+            id="inputPassword4"
+            name="password"
+          />
+        </div>
+        <div class="col-12">
+          <label for="about" class="form-label">About </label>
+          <textarea
+            class="form-control"
+            id="about"
+            placeholder="Tell us about yourself..."
+            name="about"
+          >
+          </textarea>
+        </div>
+
+        <p id="error-message" class="error d-none"></p>
+
+        <div class="col-12">
+          <button type="submit" id="add-usr-btn" class="btn btn-primary">
+            Add User
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      type="text/javascript"
+    ></script>
+    <script src="./script.js" type="text/javascript"></script>
+  </body>
+</html>