Merge pull request #1643 from ak-sh-at/dictionary

TusharKesarwani · web-flow · commit 5f01b390d9e6 · 2023-07-09T01:57:04.000+05:30
dictionary modified
diff --git a/Projects/dictionary/index.html b/Projects/dictionary/index.html
@@ -4,6 +4,9 @@
     <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="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap" rel="stylesheet">
     <link
             rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
@@ -18,7 +21,7 @@
         <title>Dictionary</title>
     </head>
     <body>
-    <h1>Word Dictionary</h1>
+    <h1 id="h">Word Dictionary</h1>
         <audio id="sound"></audio>
         <div class="container">
             <div class="search-box">
diff --git a/Projects/dictionary/script.js b/Projects/dictionary/script.js
@@ -4,6 +4,8 @@ const sound = document.getElementById("sound");
 const btn = document.getElementById("search-btn");
 
 btn.addEventListener("click", () => {
+    
+    document.getElementById("h").style.display = "none";
     let inpWord = document.getElementById("inp-word").value;
     fetch(`${url}${inpWord}`)
         .then((response) => response.json())
diff --git a/Projects/dictionary/style.css b/Projects/dictionary/style.css
@@ -7,6 +7,9 @@
     font-family: "Poppins", sans-serif;
 }
 body {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
     background-color: #ae9cff;
 }
 .container {
@@ -20,22 +23,41 @@ body {
     border-radius: 10px;
     box-shadow: 0 20px 40px rgba(38, 33, 61, 0.2);
 }
+@media(max-width:391px)
+{
+    .search-box{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 ;
+        height: 100px;
+        width: 400px;
+    }
+}
+@media(max-width:208px)
+{
+    .container{
+        min-width: fit-content;
+    }
+}
 .search-box {
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-evenly;
 }
 .search-box input {
     padding: 5px;
-    width: 70%;
+    width: 50%;
+    min-width: 170px;
     border: none;
     outline: none;
     border-bottom: 3px solid #ae9cff;
     font-size: 16px;
 }
 .search-box button {
     padding: 15px 0;
-    width: 25%;
+    width: 100px;
     background-color: #ae9cff;
     border: none;
     outline: none;
@@ -82,8 +104,17 @@ body {
     margin-top: 80px;
     text-align: center;
 }
-h1{ padding: 100px;
+h1{ 
+    padding-top: 80px;
+    font-size: 55px;
     text-align: center;
     text-decoration: underline;
     text-underline-position: under;
-}
+    font-family: 'Cormorant Garamond', serif;
+}
+@media(max-width:371px)
+{
+    h1{
+        font-size: 35px;
+    }
+}
