realnileshhh · ronitblenz · Jan 31, 2022 · Jan 31, 2022 · Jan 31, 2022 · Jan 31, 2022
diff --git a/README.md b/README.md
@@ -0,0 +1,49 @@
+
+# Wordicon | Dictionary WebApp
+
+Wordicon is your free online English dictionary and thesaurus with synonyms, related words, and search.
+Audio pronunciations are available without the use of any separate app.
+You can find definitions, antonyms, synonyms, and more in a simple and efficient manner.
+
+It contains more than 150,000 words and meanings, over 550,000 word families, and spelling suggestions if you're not sure how to spell a word. There are separate word lists for easy reference, including animals, body parts, adjectives, occupations, and more.
+
+
+
+## Demo
+
+https://wordicon.netlify.app/
+
+## Screenshots
+
+![App Screenshot](https://i.ibb.co/2SwM2Bq/image.png)
+
+![App Screenshot](https://i.ibb.co/BPsPDVJ/image.png)
+
+## 🚀 About Me
+
+Hi, I am Nilesh, pursuing engineering 🎓. I'm interested in the technological side of things and how technology is causing revolutions ⚔️. My hobbies lie in the categories of video editing and graphic design. I also love exploring pixel-based graphic software. I feel freedom of expression and creativity let humans go beyond their limits. 🚀
+
+## 🔗 Links
+
+[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/realnileshhh/)
+
+[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/RealNileshhh)
+
+## Run Locally
+
+Clone the project
+
+```bash
+  git clone https://github.com/realnileshhh/wordicon
+```
+
+Go to the project directory
+
+```bash
+  cd wordicon
+```
+
+## Tech Stack
+
+**Stack:** HTML, CSS, Javascript
+
diff --git a/Resources/images/moon.png b/Resources/images/moon.png
diff --git a/Resources/images/sun.png b/Resources/images/sun.png
diff --git a/css/style.css b/css/style.css
@@ -6,11 +6,25 @@
 *:not(i) {
   font-family: "Poppins", sans-serif;
 }
-body {
-  background-color: #ae9cff;
+:root{
+  --primary-color:  #ad98e7;
+  --secondary-color: #ffffff;
 }
+.dark-mode {
+  --primary-color:  #361557;
+  --secondary-color: #81818f;
+}
+body { 
+  background-color: var(--primary-color);
+}
+#icon {
+  width: 30px;
+  margin: 30px;
+  cursor: pointer;
+}
+
 .container {
-  background-color: #ffffff;
+  background-color: var(--secondary-color);
   width: 90vmin;
   position: absolute;
   transform: translate(-50%, -50%);
@@ -20,26 +34,32 @@ body {
   border-radius: 10px;
   box-shadow: 0 20px 40px rgba(38, 33, 61, 0.2);
 }
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #aaa;
+  opacity: 1; /* Firefox */
+}
 .search-box {
   width: 100%;
   display: flex;
   justify-content: space-between;
+  color: var(--secondary-color);
 }
 .search-box input {
   padding: 5px;
   width: 70%;
   border: none;
   outline: none;
-  border-bottom: 3px solid #ae9cff;
+  border-bottom: 3px solid var(--primary-color);
   font-size: 16px;
+  background-color: var(--secondary-color);
 }
 .search-box button {
   padding: 15px 0;
   width: 25%;
-  background-color: #ae9cff;
+  background-color: var(--primary-color);
   border: none;
   outline: none;
-  color: #ffffff;
+  color: var(--secondary-color);
   border-radius: 5px;
 }
 .result {
@@ -56,10 +76,10 @@ body {
 }
 .result button {
   background-color: transparent;
-  color: #ae9cff;
+  color: var(--primary-color);
   border: none;
   outline: none;
-  font-size: 18px;
+  font-size: 18px;  
 }
 .result .details {
   display: flex;
@@ -74,7 +94,7 @@ body {
 .word-example {
   color: #575a7b;
   font-style: italic;
-  border-left: 5px solid #ae9cff;
+  border-left: 5px solid var(--primary-color);
   padding-left: 20px;
   margin-top: 30px;
 }
@@ -84,7 +104,7 @@ body {
 }
 .footer-basic {
   padding: 40px 0;
-  background-color: #ffffff;
+  background-color: var(--secondary-color);
   color: #4b4c4d;
 }
 .footer-basic .copyright {
@@ -104,7 +124,7 @@ body {
 }
 ul {
   list-style-type: none;
-  color: white;
+  color: var(--secondary-color);
   height: 65px;
   font-size: 30px;
   display: flex;

diff --git a/index.html b/index.html
@@ -17,13 +17,21 @@
     <title>Wordicon - Dictionary</title>
   </head>
   <body>
+    <nav>
+      <img
+        src="/Resources/images/moon.png"
+        id="icon"
+        alt="align box"
+        align="right"
+      />
+    </nav>
     <ul>
       <li>Wordicon</li>
     </ul>
     <audio id="sound"></audio>
     <div class="container">
       <div class="search-box">
-        <input type="text" placeholder="Type the word here.." id="inp-word" />
+        <input type="text" placeholder="Type the word here.." id="inp-word"/>
         <button id="search-btn">Search</button>
       </div>
       <div class="result" id="result"></div>
@@ -34,6 +42,19 @@
       </div>
     </div>
     <!-- Script -->
+    <!-- Light and Darkmode Script -->
+    <script>
+      var icon = document.getElementById("icon");
+
+      icon.onclick=function(){
+        document.body.classList.toggle("dark-mode");
+        if(document.body.classList.contains("dark-mode")){
+          icon.src="/Resources/images/sun.png";
+      }else{
+        icon.src="/Resources/images/moon.png";
+      }
+    }
+    </script>
     <script src="/javascript/script.js"></script>
   </body>
-</html>
+</html>