Added the Show/Hide Function in the login form (#120)

* Added the Show/Hide Function in the login form

I have added some JavaScript to add a function of show and hide to the password field to enhance the User Experience.

* Update first-cpp-program.md

---------

Co-authored-by: Shubhadip Bhowmik <[email protected]>

docs/day-02/first-cpp-program.md

@@ -10,55 +10,19 @@ slug: first-cpp-program
 
 Welcome to the exciting world of C++ programming! Today, we'll embark on a journey together, crafting our very first C++ program - the classic "Hello, World!". This simple program lays the foundation for understanding core C++ concepts.
 
-**Setting Up**
+### Setting Up
 
 Before diving into code, you'll need a text editor or an Integrated Development Environment (IDE) to write and compile your C++ program. Popular choices include Notepad++, Visual Studio Code, or Code::Blocks.
 
 ![first-programme-in-cpp](../../static/img/day-02/first-program.png) 
 
-**Hello, World! Breakdown**
+### Write a Simple "Hello, World!" Program in C++
 
-Let's dissect the code line by line and understand its purpose:
-
-```c++
+```cpp
 #include <iostream>
-
 using namespace std;
 
 int main() {
   cout << "Hello, World!" << endl;
   return 0;
 }
-```
-
-1. **`#include <iostream>`:** This line tells the compiler to include the `iostream` header file, which provides functionalities for input and output operations in C++.
-
-2. **`using namespace std;`:** This statement instructs the code to use elements from the `std` namespace, which contains standard C++ objects like `cout` (used for output) and `endl` (used for adding a newline character).
-
-3. **`int main() { ... }`:** The `main` function is the entry point of your program. Any code execution begins here. The `int` keyword specifies that the `main` function will return an integer value (in this case, 0 to indicate successful execution).
-
-4. **`cout << "Hello, World!" << endl;`:** This line performs the magic!  
-   - `cout` is an object of the `ostream` class used for standard output.
-   - `<<` is the insertion operator, which sends data to the output stream.
-   - `"Hello, World!"` is the string literal (text enclosed in double quotes) that we want to print.
-   - `endl` adds a newline character after the printed message.
-
-5. **`return 0;`:** This statement indicates successful program termination by returning the value 0 from the `main` function.
-
-## **Compiling and Running**
-
-Once you've written the code, save the file with a `.cpp` extension (e.g., `helloworld.cpp`). Use your chosen compiler to compile the code and generate an executable file. Running the executable will display the glorious "Hello, World!" message on your screen.
-
-## **Congratulations!**
-
-You've successfully created your first C++ program! This is a significant milestone in your programming journey. Now that you've grasped the fundamentals, you can explore more complex C++ concepts and build upon this foundation to create amazing programs.
-
-## **Further Exploration**
-
-There's a vast world of C++ waiting to be discovered. Here are some suggestions for your next steps:
-
-- Experiment with different messages and explore various output formatting options.
-- Try taking user input using the `cin` object from the `iostream` header.
-- Learn about variables, data types, and operators to perform calculations and manipulations within your program.
-
-Remember, practice is key! The more you code, the more comfortable you'll become with C++. Happy coding!

src/css/custom.css

@@ -87,6 +87,20 @@ h1.center{
   background: #f0f0f0;
 }
 
+.form-container btn{
+  background: linear-gradient(45deg, #4CAF50, #2E8B57);
+  color: #f9f9f9;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  width: 500px;
+  border-radius: 3px;
+  padding: 5px;
+}
+
+.form-container btn:hover {
+  background: linear-gradient(45deg, #2E8B57, #4CAF50);
+}
+
 .form-container button {
   background: linear-gradient(45deg, #4CAF50, #2E8B57);
   color: #f9f9f9;

src/pages/login.js

@@ -0,0 +1,47 @@
+import Link from '@docusaurus/Link';
+import React, { useState } from 'react';
+
+<link rel="stylesheet" type="text/css" href="/css/custom.css"></link>
+
+
+
+function App() {
+  const [passwordShown, setPasswordShown] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setPasswordShown(!passwordShown);
+  };
+
+  return (
+
+    <div className="form-container">
+        <h2>Login</h2>
+      <form>
+        <div className="input-container">
+          <label htmlFor="email">Email:</label>
+          <input type="text" id="username" name="username" required />
+        </div>
+        <div className="input-container">
+          <label htmlFor="password">Password:</label>
+          <input
+            type={passwordShown ? 'text' : 'password'}
+            id="password"
+            name="password"
+            required
+          ></input>
+          <span><btn className="toggle-password" onClick={togglePasswordVisibility}>
+            {passwordShown ? 'Hide' : 'Show'}
+          </btn>
+          </span>
+        </div>
+        &nbsp;
+        <div className="input-container">
+          <button type="submit">Login</button>
+          <p>Don't have an account yet? <Link to ="signup"> Sign Up</Link></p>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default App;

src/pages/login.md

@@ -7,6 +7,7 @@ title: Login
 
 <link rel="stylesheet" type="text/css" href="/css/custom.css"></link>
 
+
 <div class="form-container">
     <form>
         <input type="email" name="email" placeholder="Email" required></input>
@@ -15,3 +16,4 @@ title: Login
     </form>
     <p class="text-color">Don't have an account yet? [Sign Up](signup)</p>
 </div>
+