init: project

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ""
+labels: ""
+assignees: ""
+---
+
+**Please describe the feature you want this project to offer**
+A clear and concise description of what the problem is.
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered (Optional)**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context (Optional)**
+Add any other context or screenshots about the feature request here.

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

src/App.jsx

@@ -1,8 +1,15 @@
 import React from "react";
 import "./App.css";
 
-function App() {
-  return <div className="App">Hangman</div>;
-}
+const App = () => {
+  /* Import Words from helpers, use a Math.random to get a word */
+  return (
+    <div className="App">
+      Hangman{" "}
+      {/* Maintain a state for correct letters, wrong letters, remaining letters. For this, the letters component and the hangman component along with guessing should be imported. Import Guessing as well, to know what letters are correct. 
+      Wrong letters is passed as a prop to HangmanFigure Component. */}{" "}
+    </div>
+  );
+};
 
 export default App;

src/components/guessing/Guessing.component.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Guessing = () => {
+
+  return (
+    <div>
+      {/*Display only the correct letters that are clicked. The Correct Letters will be passed from App.jsx.*/}
+    </div>
+  );
+};
+
+export default Guessing;

src/components/guessing/guessing.styles.css

@@ -0,0 +1 @@
+/*Add required CSS guessing component*/

src/components/hangmanFigure/HangmanFigure.component.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const HangmanFigure = () => {
+  <div>
+    {/*Implement a basic Hangman Image that moves on every error. Pass Wrong Letters as a prop and check the length to render an appropriate image.*/}
+  </div>;
+};
+
+export default HangmanFigure;

src/components/hangmanFigure/hangmanFigure.styles.css

@@ -0,0 +1 @@
+/*Add required CSS hangmanFigure component*/

src/components/letter/Letter.component.jsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+
+const Letter = () => {
+  const [clicked, setClicked] = useState(false);
+  /*Get the value of the alphabet as props from Letters component and add Letter component*/
+  /*create a handleonClick function that changes the state to true.*/
+  return (
+    <div>
+      {/*Value of the alphabet, change the state when the letter is clicked*/}
+    </div>
+  );
+};
+
+export default Letter;

src/components/letter/letter.styles.css

@@ -0,0 +1 @@
+/*Add required CSS in letter component*/

src/components/letters/Letters.component.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Letters = () => {
+  return (
+    <div>
+      {/*Get the letters of the english alphabet from the helpers. Pass each alphabet to the letter component with the help of a map function.*/}
+    </div>
+  );
+};
+
+export default Letters;

src/components/letters/letters.styles.css

@@ -0,0 +1 @@
+/*Add required CSS in letters component*/

src/utils/helpers.js

@@ -0,0 +1,22 @@
+export const checkWinner = (correct, wrong, word) => {
+  /*Define condition for win and loop it.*/
+  /*Define condition for lose*/
+};
+
+export const alphabets = () => {
+  /*Get alphabets of the English language*/
+};
+
+export const words = () => {
+  return [
+    "IEEEVIT",
+    "Hacktoberfest",
+    "GitHub",
+    "Git",
+    "FOSS",
+    "OpenSource",
+    "VIT",
+  ];
+
+  /*Import this in Guessing component and use it.*/
+};