hack2skill · Vedanshi-Arya · Oct 8, 2023 · Oct 8, 2023 · Oct 8, 2023
diff --git a/README.md b/README.md
@@ -15,18 +15,18 @@ To get started with the NASA Space Apps Noida Hackathon 2023 repository, follow
 
 ### README.md must consist of the following information:
 
-#### Team Name -
-#### Problem Statement - 
-#### Team Leader Email -
+#### Team Name - H2O FLOW
+#### Problem Statement - EVERYTHING STARTS WITH WATER , displaying path of water and how climate changes effect it by using animations and interactive chatbot , quizs and games.
+#### Team Leader Email - [email protected]
 
 ### A Brief of the Prototype:
-  This section must include UML Diagrams and prototype description
+The solution for the water cycle and climate change education challenge involves creating diverse and engaging tools. An interactive quiz assesses students' knowledge, while a chatbot  provide personalized  learning experiences. Additionally, an educational game gamifies the understanding of the water cycle and climate change impacts. we have provides NASA data reference for interactive learning, and a storytelling chat Bot combines narrative elements with data visualization. A community engagement platform fosters collaboration, and a teacher resource portal supports educators. our web application facilitates the student to ask their doubt related to problem statement. Each approach targets elementary, middle, or high school students, ensuring a comprehensive and interactive educational experience
 
 ### Tech Stack: 
-   List Down all technologies used to Build the prototype
+   HTML CSS JAVASCRIPT
 
 ### Step-by-Step Code Execution Instructions:
-  This Section must contain a set of instructions required to clone and run the prototype so that it can be tested and deeply analyzed
+  All codes are interlinked only index.html file have to be executed.
 
 ### Future Scope:
-   Write about the scalability and futuristic aspects of the prototype developed
+   This will enable the user to use water carefully and will save our planet in future.
diff --git a/chatbot.html b/chatbot.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Chatbot in JavaScript</title>
+    <link rel="stylesheet" href="style1.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Google Fonts Link For Icons -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
+    <script src="script1.js" defer></script>
+  </head>
+  <body>
+    <button class="chatbot-toggler">
+      <span class="material-symbols-rounded">mode_comment</span>
+      <span class="material-symbols-outlined">close</span>
+    </button>
+    <div class="chatbot">
+      <header>
+        <h2>Chatbot</h2>
+        <span class="close-btn material-symbols-outlined">close</span>
+      </header>
+      <ul class="chatbox">
+        <li class="chat incoming">
+          <span class="material-symbols-outlined">smart_toy</span>
+          <p>Hi there 👋<br>How can I help you today?</p>
+        </li>
+      </ul>
+      <div class="chat-input">
+        <textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
+        <span id="send-btn" class="material-symbols-rounded">send</span>
+      </div>
+    </div>
+
+  </body>
+</html>
diff --git a/guess.css b/guess.css
@@ -0,0 +1,109 @@
+/* Import Google font - Poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+body{
+  display: flex;
+  padding: 0 10px;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  background:url("https://c4.wallpaperflare.com/wallpaper/948/432/1006/nature-scenery-wallpaper-preview.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.wrapper{
+  width: 430px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+}
+.wrapper h1{
+  font-size: 25px;
+  font-weight: 500;
+  padding: 20px 25px;
+  border-bottom: 1px solid #ccc;
+}
+.wrapper .content{
+  margin: 25px 25px 35px;
+}
+.content .inputs{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.inputs input{
+  height: 57px;
+  width: 56px;
+  margin: 4px;
+  font-size: 24px;
+  font-weight: 500;
+  color: #1ba98c;
+  text-align: center;
+  border-radius: 5px;
+  background: none;
+  pointer-events: none;
+  text-transform: uppercase;
+  border: 1px solid #B5B5B5;
+}
+.typing-input {
+  opacity: 0;
+  z-index: -999;
+  position: absolute;
+  pointer-events: none;
+}
+.inputs input:first-child{
+  margin-left: 0px;
+}
+.content .details{
+  margin: 20px 0 25px;
+}
+.details p{
+  font-size: 19px;
+  margin-bottom: 10px;
+}
+.content .reset-btn{
+  width: 100%;
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  outline: none;
+  padding: 15px 0;
+  font-size: 17px;
+  border-radius: 5px;
+  background: #1BB295;
+  transition: all 0.3s ease;
+}
+.content .reset-btn:hover{
+  background: #18a589;
+}
+
+@media screen and (max-width: 460px) {
+  .wrapper {
+    width: 100%;
+  }
+  .wrapper h1{
+    font-size: 22px;
+    padding: 16px 20px;
+  }
+  .wrapper .content{
+    margin: 25px 20px 35px;
+  }
+  .inputs input{
+    height: 51px;
+    width: 50px;
+    margin: 3px;
+    font-size: 22px;
+  }
+  .details p{
+    font-size: 17px;
+  }
+  .content .reset-btn{
+    padding: 14px 0;
+    font-size: 16px;
+  }
+}
diff --git a/guess.html b/guess.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Coding By CodingNepal - youtube.com/codingnepal -->
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Word Guessing Game JavaScript | CodingNepal</title>
+    <link rel="stylesheet" href="guess.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <div class="wrapper">
+      <h1>Guess the Word</h1>
+      <div class="content">
+        <input type="text" class="typing-input" maxlength="1">
+        <div class="inputs"></div>
+        <div class="details">
+          <p class="hint">Hint: <span></span></p>
+          <p class="guess-left">Remaining guesses: <span></span></p>
+          <p class="wrong-letter">Wrong letters: <span></span></p>
+        </div>
+        <button class="reset-btn">Reset Game</button>
+      </div>
+    </div>
+
+    <script src="guess.js"></script>
+    <script src="guess1.js"></script>
+
+  </body>
+</html>
diff --git a/guess.js b/guess.js
@@ -0,0 +1,101 @@
+const wordList = [
+    {
+        word: "water",
+        hint: "precious element"
+    },
+    {
+        word: "ice",
+        hint: "solid state of water"
+    },
+    {
+        word: "earth",
+        hint: "a planet"
+    },
+    {
+        word: "rain",
+        hint: "falling of water"
+    },
+    {
+        word: "blue",
+        hint: "colour of water"
+    },
+    {
+        word: "evaporation",
+        hint: "process in water cycle"
+    },
+    {
+        word: "",
+        hint: "programming language"
+    },
+    {
+        word: "vapours",
+        hint: "gaseous form of water"
+    },
+    {
+        word: "lake",
+        hint: "water resouce"
+    },
+    {
+        word: "snow",
+        hint: "form of precipitation"
+    },
+    {
+        word: "farming",
+        hint: "usage of water"
+    },
+    {
+        word: "global warming",
+        hint: "effect of heat"
+    },
+    {
+        word: "transpiration",
+        hint: "loss of water from leaf"
+    },
+
+    {
+        word: "island",
+        hint: "land surrounded by water"
+    },
+
+    {
+        word: "air",
+        hint: "related to a gas"
+
+    },
+    {
+        word: "glacier",
+        hint: "a image file format"
+    },
+    {
+        word: "drops",
+        hint: "form of rain"
+    },
+    {
+        word: "fog",
+        hint: "comes in winter"
+    },
+    {
+        word: "atmosphere",
+        hint: "sphere of air"
+    },
+    {
+        word: "cloud",
+        hint: "forms due to evaporation"
+    },
+    {
+        word: "boil",
+        hint: "heating water"
+    },
+    {
+        word: "hydrosphere",
+        hint: "sphere of water"
+    },
+    {
+        word: "humidity",
+        hint: "presence of water in atmosphere "
+    },
+    {
+        word: "rain",
+        hint: "related to a water"
+    },
+]
diff --git a/guess1.js b/guess1.js
@@ -0,0 +1,62 @@
+const inputs = document.querySelector(".inputs"),
+hintTag = document.querySelector(".hint span"),
+guessLeft = document.querySelector(".guess-left span"),
+wrongLetter = document.querySelector(".wrong-letter span"),
+resetBtn = document.querySelector(".reset-btn"),
+typingInput = document.querySelector(".typing-input");
+
+let word, maxGuesses, incorrectLetters = [], correctLetters = [];
+
+function randomWord() {
+    let ranItem = wordList[Math.floor(Math.random() * wordList.length)];
+    word = ranItem.word;
+    maxGuesses = word.length >= 5 ? 8 : 6;
+    correctLetters = []; incorrectLetters = [];
+    hintTag.innerText = ranItem.hint;
+    guessLeft.innerText = maxGuesses;
+    wrongLetter.innerText = incorrectLetters;
+
+    let html = "";
+    for (let i = 0; i < word.length; i++) {
+        html += `<input type="text" disabled>`;
+        inputs.innerHTML = html;
+    }
+}
+randomWord();
+
+function initGame(e) {
+    let key = e.target.value.toLowerCase();
+    if(key.match(/^[A-Za-z]+$/) && !incorrectLetters.includes(` ${key}`) && !correctLetters.includes(key)) {
+        if(word.includes(key)) {
+            for (let i = 0; i < word.length; i++) {
+                if(word[i] == key) {
+                    correctLetters += key;
+                    inputs.querySelectorAll("input")[i].value = key;
+                }
+            }
+        } else {
+            maxGuesses--;
+            incorrectLetters.push(` ${key}`);
+        }
+        guessLeft.innerText = maxGuesses;
+        wrongLetter.innerText = incorrectLetters;
+    }
+    typingInput.value = "";
+
+    setTimeout(() => {
+        if(correctLetters.length === word.length) {
+            alert(`Congrats! You found the word ${word.toUpperCase()}`);
+            return randomWord();
+        } else if(maxGuesses < 1) {
+            alert("Game over! You don't have remaining guesses");
+            for(let i = 0; i < word.length; i++) {
+                inputs.querySelectorAll("input")[i].value = word[i];
+            }
+        }
+    }, 100);
+}
+
+resetBtn.addEventListener("click", randomWord);
+typingInput.addEventListener("input", initGame);
+inputs.addEventListener("click", () => typingInput.focus());
+document.addEventListener("keydown", () => typingInput.focus());