feat: 🎸 added css and problem solving questions

Pratham82 · Pratham82 · commit 1a9b11edb29d · 2024-04-27T11:17:56.000+05:30
added css and problem solving questions
diff --git a/2024 Prep/css-questions/centering-a-div/index.html b/2024 Prep/css-questions/centering-a-div/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Centering a div</title>
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+  </head>
+  <body>
+    <div class="parent">
+      <div class="child"></div>
+    </div>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/2024 Prep/css-questions/centering-a-div/script.js b/2024 Prep/css-questions/centering-a-div/script.js
diff --git a/2024 Prep/css-questions/centering-a-div/style.css b/2024 Prep/css-questions/centering-a-div/style.css
@@ -0,0 +1,57 @@
+/*
+* Ways of centering a div
+*/
+
+/*
+* 1.
+.parent {
+  height: 350px;
+  width: 350px;
+  background-color: blue;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.child {
+  height: 50%;
+  width: 50%;
+  background-color: red;
+}
+*/
+
+/*
+* 2.
+.parent {
+  height: 350px;
+  width: 350px;
+  background-color: blue;
+  display: grid;
+  place-items: center;
+}
+
+.child {
+  height: 50%;
+  width: 50%;
+  background-color: red;
+}
+*/
+
+.parent {
+  height: 350px;
+  width: 350px;
+  background-color: blue;
+
+  position: relative;
+}
+
+.child {
+  height: 50%;
+  width: 50%;
+  background-color: red;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/2024 Prep/index.html b/2024 Prep/index.html
@@ -9,6 +9,7 @@
 
   <body>
     Hello world
-    <script src="index.js"></script>
+    <button id="my-btn">Click me</button>
+    <script src="./namaste_js/15_event_loop.js"></script>
   </body>
 </html>
diff --git a/2024 Prep/problem_solving/index.js b/2024 Prep/problem_solving/index.js
@@ -0,0 +1,77 @@
+const input = {
+  name: 'Jay',
+  age: 25,
+  department: {
+    name: 'Customer Experience',
+    section: 'Technical',
+    branch: {
+      name: 'Bangalore',
+      timezone: 'IST',
+    },
+  },
+  company: {
+    name: 'SAP',
+    customers: ['Ford', 'Nestle'],
+  },
+  skills: ['javascript', 'node.js', 'html'],
+}
+
+console.log(input)
+
+// Write a Function getValue that will take a dot string and an object and it will return its value in object
+
+// If value doesn’t exist return undefined
+
+let nestedObject = {
+  a: {
+    b: {
+      c: {
+        d: 'Hello D',
+      },
+    },
+  },
+}
+let nestedObject2 = {
+  a: {
+    b: {
+      c: {
+        d: 'Hello D',
+      },
+    },
+  },
+}
+
+// getValue(nestedObject, "a.b.c.d"); // OP: "Hello D"
+// getValue(nestedObject2, "a.b.c.d.E"); // OP: undefined
+//  console.log(nestedObject.a.b.c.d)
+
+const getValueMy = (obj, dotString) => {
+  const keys = dotString.split('.')
+
+  let finalObj = obj
+
+  for (const key of keys) {
+    if (typeof finalObj === 'object' && key in finalObj && finalObj != null) {
+      finalObj = finalObj[key]
+    } else {
+      return undefined
+    }
+  }
+  return finalObj
+}
+
+const res = getValueMy(nestedObject, 'a.b.c.d') // OP: "Hello D"
+
+/*
+*S Framework related (React JS & Vue JS) Qs:*
+
+1. useState, useEffect
+  -  Is useState sync or async
+  -  when does the useEffect runs
+2. Vue JS vs React JS
+3. Vue directives
+4. v-if vs v-show
+5. Watchers in Vue
+6. Lifecycle Hooks in Vue
+
+*/
