Kritika30032002 · Kritika30032002 · Feb 1, 2024 · Jan 29, 2024 · Jan 31, 2024 · Jan 31, 2024
diff --git a/React-Password-Generator-master/App.js b/React-Password-Generator-master/App.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { Client as Styletron } from 'styletron-engine-atomic';
+import { Provider as StyletronProvider } from 'styletron-react';
+import Nav from "./nav/Nav";
+import Main from "./main/Main";
+const engine = new Styletron();
+
+const App = () => {
+    return (
+        <StyletronProvider value={engine} style={{ width: '100%' }}>
+            <Nav />
+            <Main />
+        </StyletronProvider>
+    );
+};
+
+export default App;
diff --git a/React-Password-Generator-master/README.md b/React-Password-Generator-master/README.md
@@ -0,0 +1,46 @@
+# React-Password-Generator
+
+## Video Demo
+
+[![Video Demo](https://www.youtube.com/watch?v=WEU9jhG0hSE/0.jpg)](https://www.youtube.com/watch?v=WEU9jhG0hSE)
+
+## Tech Stack
+
+- React
+- HTML
+- CSS
+- JavaScript
+- Parcel-bundler
+- Base UI 
+
+## Cloning the Repository
+
+Clone the repository using the command below:
+
+```bash
+git clone https://github.com/Kritika30032002/ReactCreations.git
+```
+
+Move into the directory where we have the project files:
+
+```bash
+cd ReactCreations\React-Password-Generator>
+```
+
+## How to use?
+
+* Install dependencies
+```bash
+npm install
+```
+
+* Start development server
+```bash
+npm run dev
+```
+
+* Build for production (output in dist folder)
+```bash
+npm run build
+```
+⚠ Then, the development server will be started at http://127.0.0.1:5173/
diff --git a/React-Password-Generator-master/index.html b/React-Password-Generator-master/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      body {
+        margin: 0px;
+        background-color: #fff;
+        overflow-x: hidden;
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://cdn.rawgit.com/mfd/09b70eb47474836f25a21660282ce0fd/raw/e06a670afcb2b861ed2ac4a1ef752d062ef6b46b/Gilroy.css"
+    />
+    <meta
+      name="viewport"
+      content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+    />
+
+    <title>React Password Generator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/React-Password-Generator-master/index.js b/React-Password-Generator-master/index.js
@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App.js";
+import "@babel/polyfill";
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/React-Password-Generator-master/main/Main.css b/React-Password-Generator-master/main/Main.css
@@ -0,0 +1,39 @@
+.left {
+  margin: 20px;
+  width: 40%;
+  border: 1px solid lightgrey;
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  min-height: 200px;
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+
+.right {
+  margin: 20px;
+  width: 40%;
+}
+
+.container {
+  width: 60%;
+  margin: 0px auto;
+  border: 1px solid #ccc;
+  overflow-x: hidden;
+}
+
+.result {
+  width: 60%;
+  margin: 20px auto;
+  color: "blue";
+}
+
+@media (min-width: 320px) and (max-width: 480px) {
+  .container {
+    width: 90%;
+  }
+}
diff --git a/React-Password-Generator-master/main/Main.jsx b/React-Password-Generator-master/main/Main.jsx
@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from "react";
+import { Slider } from "baseui/slider";
+import { Button, SHAPE } from "baseui/button";
+import generator from "generate-password";
+import { Checkbox, LABEL_PLACEMENT } from "baseui/checkbox";
+import "./main.css";
+
+const Main = () => {
+  const [value, setValue] = useState([10]);
+  const [numbers, setNumbers] = useState(true);
+  const [symbols, setSymbols] = useState(false);
+  const [lower, setLower] = useState(false);
+  const [upper, setUpper] = useState(false);
+  const [similar, setSimilar] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+  const [results, setResults] = useState("");
+
+  const generate = () => {
+    if (symbols || lower || upper || numbers) {
+      var password = generator.generate({
+        length: value,
+        numbers: numbers,
+        uppercase: upper,
+        lowercase: lower,
+        symbols: symbols,
+        excludeSimilarCharacters: similar,
+      });
+      setResults(password);
+      setShowResults(true);
+    } else {
+      alert("Tick atleast one from numbers, symbols, uppercase & lowercase");
+    }
+  };
+
+  return (
+    <div className="container">
+      <h1
+        style={{
+          fontSize: 24,
+          textAlign: "center",
+        }}>
+        Select the length of Password
+      </h1>
+      <Slider
+        value={value}
+        max={20}
+        onChange={({ value }) => value && setValue(value)}
+        onFinalChange={({ value }) => console.log(value)}
+      />
+      <div className="box">
+        <Checkbox
+          checked={numbers}
+          onChange={(e) => setNumbers((prev) => !prev)}
+          labelPlacement={LABEL_PLACEMENT.right}>
+          include numbers
+        </Checkbox>
+        <Checkbox
+          checked={symbols}
+          onChange={(e) => setSymbols((prev) => !prev)}
+          labelPlacement={LABEL_PLACEMENT.right}>
+          include symbols
+        </Checkbox>
+        <Checkbox
+          checked={lower}
+          onChange={(e) => setLower((prev) => !prev)}
+          labelPlacement={LABEL_PLACEMENT.right}>
+          include lowercase
+        </Checkbox>
+        <Checkbox
+          checked={upper}
+          onChange={(e) => setUpper((prev) => !prev)}
+          labelPlacement={LABEL_PLACEMENT.right}>
+          include uppercase
+        </Checkbox>
+        <Checkbox
+          checked={similar}
+          onChange={(e) => setSimilar((prev) => !prev)}
+          labelPlacement={LABEL_PLACEMENT.right}>
+          exclude similar characters
+        </Checkbox>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          width: "100%",
+        }}>
+        <Button
+          style={{ margin: 20, width: "50%", backgroundColor: "#011A31" }}
+          onClick={() => generate()}
+          shape={SHAPE.pill}>
+          Generate
+        </Button>
+      </div>
+      <div className="result">
+        {showResults ? (
+          <p style={{ textAlign: "center", fontSize: 20, width: "100%" }}>
+            {results}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default Main;
diff --git a/React-Password-Generator-master/nav/Nav.css b/React-Password-Generator-master/nav/Nav.css
@@ -0,0 +1,14 @@
+.header {
+  padding: 0px;
+  min-height: 300px;
+  color: white;
+  text-align: center;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+@media (min-width: 320px) and (max-width: 480px) {
+  .header {
+    min-height: 250px;
+  }
+}
diff --git a/React-Password-Generator-master/nav/Nav.jsx b/React-Password-Generator-master/nav/Nav.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import svg from "../wave.svg";
+import "./Nav.css";
+const Nav = () => {
+  return (
+    <div
+      className="header"
+      style={{
+        backgroundImage: `url(${svg})`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}>
+      <h1 style={{ fontSize: 24, textAlign: "center" }}>
+        React Password Generator
+      </h1>
+      <p>Simple tool to generate strong passwords</p>
+    </div>
+  );
+};
+
+export default Nav;
diff --git a/React-Password-Generator-master/wave.svg b/React-Password-Generator-master/wave.svg