Merge pull request #14 from tinkersain/tanisha

imgdesc file new updation as books
tinkersain · Jul 7, 2024 · 06ec80a · 06ec80a
2 parents 2978a01 + 7444f77
commit 06ec80a
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 71 deletions.
diff --git a/assets/images/book-logo.png b/assets/images/book-logo.png
diff --git a/imgdesc.css b/imgdesc.css
@@ -1,63 +1,78 @@
 body {
-  font-family: "Arial", sans-serif;
+  font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  background-color: #fff;
 }
 
-nav {
-  background-color: #ff6347;
-  color: white;
-  padding: 1rem;
-  display: flex;
-  flex-direction: row;
-  flex: space-between;
+.container {
+  width: 100%;
+  margin: 0 auto;
+  background-color: #f8d7da;
 }
 
-nav ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
+.nav {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
+  background-color: #f4cac4;
+  padding: 10px;
 }
 
-nav ul li {
-  margin: 0;
+.nav-links a {
+  background-color: #8c78cc;
+  padding: 10px;
+  margin: 20px 20px 20px;
+  text-align: center;
+  color: black;
+  width: 20%;
+  border-radius: 20%;
+  border: 1px solid black;
 }
-
-nav ul li a {
-  color: white;
-  text-decoration: none;
-  padding: 0.5rem 1rem;
+.nav-logo img {
+  width: 20%;
+  height: auto;
+  padding: 0%;
+  margin: 0%;
 }
 
-nav ul li a:hover {
-  background-color: #ff7f50;
-  border-radius: 5px;
+.input-section {
+  display: flex;
+  justify-content: space-around;
+  background-color: #c3a2d6;
+  padding: 10px;
+  margin-top: 10px;
 }
 
-.container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin: 10% 0% 10% 0%;
+.input-section input,
+.input-section button {
+  background-color: #ffffff;
+  padding: 10px;
+  margin: 5px;
+  text-align: center;
+}
+.input-section button {
+  background-color: #8be88b;
+  border-radius: 20%;
+  width: 7%;
 }
 
-.container img {
-  max-width: 20%;
-  height: auto;
-  background-color: #ffeb3b; /* Background color for the image */
-  padding: 3% 3% 4% 9%;
-  border-radius: 30px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  display: block;
+.content {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 20px;
+  background-color: white;
+  margin-top: 10px;
 }
 
-.container p {
-  max-width: 600px;
+.data,
+.image {
+  background-color: #dbc06d;
+  padding: 5%;
   text-align: center;
-  margin-top: 1rem;
-  color: #333;
+}
+
+.image img {
+  width: 30%;
+  height: fit-content;
 }
diff --git a/imgdesc.html b/imgdesc.html
@@ -3,39 +3,41 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chocolate Chip Cookies Recipe</title>
-    <link rel="stylesheet" href="imgdesc.css" />
+    <title>Dynamic Data Input</title>
+    <link rel="stylesheet" href="./imgdesc.css" />
+    <script src="imgdesc.js"></script>
   </head>
   <body>
-    <nav>
-      <ul>
-        <li><a href="#home">Home</a></li>
-        <li><a href="#recipes">Recipes</a></li>
-        <li><a href="#blog">Blog</a></li>
-        <li><a href="#contact">Contact</a></li>
-      </ul>
-    </nav>
     <div class="container">
-      <img
-        src="https://handletheheat.com/wp-content/uploads/2018/02/BAKERY-STYLE-CHOCOLATE-CHIP-COOKIES-9.jpg"
-        alt="Chocolate Chip Cookies"
-      />
-      <p>
-        These chocolate chip cookies are a classic treat, perfect for any
-        occasion. Crispy on the outside, chewy on the inside, and loaded with
-        gooey chocolate chips, they are sure to satisfy your sweet tooth.
-      </p>
-    </div>
-    <div class="container">
-      <img
-        src="https://handletheheat.com/wp-content/uploads/2018/02/BAKERY-STYLE-CHOCOLATE-CHIP-COOKIES-9.jpg"
-        alt="Chocolate Chip Cookies"
-      />
-      <p>
-        These chocolate chip cookies are a classic treat, perfect for any
-        occasion. Crispy on the outside, chewy on the inside, and loaded with
-        gooey chocolate chips, they are sure to satisfy your sweet tooth.
-      </p>
+      <div class="nav">
+        <div class="nav-logo"><img src="/assets/images/book-logo.png" /></div>
+        <div class="nav-links">
+          <a href="#">Home</a>
+          <a href="#">Login</a>
+          <a href="#">Signup</a>
+        </div>
+      </div>
+      <div class="input-section">
+        <input type="text" id="input1" placeholder="Book-1 Summary " />
+        <input type="text" id="input2" placeholder="Book-2 Summary" />
+        <button onclick="handleClick()">Add</button>
+      </div>
+      <div class="content">
+        <div class="data" id="data1">No Data</div>
+        <div class="image1">
+          <img
+            src="https://www.inspiredlifehq.com/wp-content/uploads/2021/07/power-of-now-min-768x1181.jpeg"
+            alt="Book Cover 1"
+          />
+        </div>
+        <div class="image2">
+          <img
+            src="https://static.wixstatic.com/media/e6e476_247b339ff81c4eb7bfa3cae6d483791b~mv2_d_1703_2560_s_2.jpg/v1/fill/w_1000,h_1503,al_c,q_90,usm_0.66_1.00_0.01/e6e476_247b339ff81c4eb7bfa3cae6d483791b~mv2_d_1703_2560_s_2.jpg"
+            alt="Book Cover 2"
+          />
+        </div>
+        <div class="data" id="data2">No Data</div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/imgdesc.js b/imgdesc.js
@@ -0,0 +1,12 @@
+function handleClick() {
+  const input1 = document.getElementById("input1").value;
+  const input2 = document.getElementById("input2").value;
+
+  if (input1) {
+    document.getElementById("data1").textContent = input1;
+  }
+
+  if (input2) {
+    document.getElementById("data2").textContent = input2;
+  }
+}