ADD Practice page

src/app/app.routes.ts

@@ -8,6 +8,9 @@ import { MainIndexComponent } from './components/main-index/main-index.component
 import { BfsPageComponent } from './components/bfs-page/bfs-page.component';
 import { DfsPageComponent } from './components/dfs-page/dfs-page.component';
 import { FaqComponent } from './components/faq/faq.component';
+import { QuizComponent } from './components/quiz/quiz.component';
+import { RealworldComponent } from './components/realworld/realworld.component';
+import { QuestionBankComponent } from './components/practice/practice.component';
 
 export const routes: Routes = [
   {
@@ -42,6 +45,18 @@ export const routes: Routes = [
     path: 'faq',
     component: FaqComponent,
   },
+  {
+    path: 'quiz',
+    component: QuizComponent,
+  },
+  {
+    path: 'real-world',
+    component: RealworldComponent,
+  },
+  {
+    path: 'questions',
+    component: QuestionBankComponent,
+  },
   {
     path: '**',
     redirectTo: '',

src/app/components/header/header.component.html

@@ -30,6 +30,8 @@
         <a class="nav-item" href="#algorithms" data-i18n="algorithms">Algorithms</a>
         <a class="nav-item" href="#visualizer" data-i18n="visualizer">Visualizer</a>
         <a class="nav-item" href="/faq" data-i18n="faq">FAQ</a>
+        <a class="nav-item" href="/quiz" data-i18n="faq">quiz</a>
+        <a class="nav-item" href="/questions" data-i18n="faq">Questions</a>
         <div class="nav-item" class="language-selector">
           <select id="languageSelect">
             <option value="en">English</option>
@@ -39,7 +41,8 @@
             <option value="es">Español (Spanish)</option>
           </select>
         </div>
-        <a class="nav-item" href="https://github.com/sakeel-103/DFS-BFS-Graph-Travers" target="_blank" class="github-link">
+        <a class="nav-item" href="https://github.com/sakeel-103/DFS-BFS-Graph-Travers" target="_blank"
+          class="github-link">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff">
             <path
               d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
@@ -53,9 +56,11 @@
     <div class="container">
       <div class="hero-content">
         <h1 data-i18n="hero-title">Unlock the Power of Graph Algorithms</h1>
-        <p data-i18n="hero-description">Dive into the fascinating world of graph theory and master advanced traversal techniques with GraphExplorer
+        <p data-i18n="hero-description">Dive into the fascinating world of graph theory and master advanced traversal
+          techniques with GraphExplorer
           Pro.</p>
-        <a href="#features" [routerLink]="['/signup']" class="cta-button" data-i18n="start-exploring">Start Exploring</a>
+        <a href="#features" [routerLink]="['/signup']" class="cta-button" data-i18n="start-exploring">Start
+          Exploring</a>
       </div>
     </div>
     <div class="graph-visual">
@@ -76,22 +81,26 @@ <h2 data-i18n="why-choose">Why Choose GraphExplorer Pro?</h2>
         <div class="feature-card">
           <div class="feature-icon">📊</div>
           <h3 data-i18n="interactive-visualizations">Interactive Visualizations</h3>
-          <p data-i18n="interactive-visualizations-desc">Experience graph algorithms in action with our cutting-edge visualization tools.</p>
+          <p data-i18n="interactive-visualizations-desc">Experience graph algorithms in action with our cutting-edge
+            visualization tools.</p>
         </div>
         <div class="feature-card">
           <div class="feature-icon">🧠</div>
           <h3 data-i18n="in-depth-learning">In-Depth Learning</h3>
-          <p data-i18n="in-depth-learning-desc">Gain a deep understanding of graph theory and its practical applications.</p>
+          <p data-i18n="in-depth-learning-desc">Gain a deep understanding of graph theory and its practical
+            applications.</p>
         </div>
         <div class="feature-card">
           <div class="feature-icon">🚀</div>
           <h3 data-i18n="performance-optimization">Performance Optimization</h3>
-          <p data-i18n="performance-optimization-desc">Learn how to implement and optimize graph algorithms for real-world scenarios.</p>
+          <p data-i18n="performance-optimization-desc">Learn how to implement and optimize graph algorithms for
+            real-world scenarios.</p>
         </div>
         <div class="feature-card">
           <div class="feature-icon">🌐</div>
           <h3 data-i18n="real-world-applications">Real-World Applications</h3>
-          <p data-i18n="real-world-applications-desc">Discover how graph algorithms power social networks, GPS systems, and more.</p>
+          <p data-i18n="real-world-applications-desc">Discover how graph algorithms power social networks, GPS systems,
+            and more.</p>
         </div>
       </div>
     </div>
@@ -136,7 +145,8 @@ <h2 data-i18n="master-key-algorithms">Master Key Graph Algorithms</h2>
       <div class="tab-content">
         <div id="dfs-content">
           <h3 data-i18n="dfs-full">Depth-First Search (DFS)</h3>
-          <p data-i18n="dfs-description">DFS is a graph traversal algorithm that explores as far as possible along each branch before backtracking. It's excellent for:</p>
+          <p data-i18n="dfs-description">DFS is a graph traversal algorithm that explores as far as possible along each
+            branch before backtracking. It's excellent for:</p>
           <ul>
             <li data-i18n="dfs-use-1">Detecting cycles in graphs</li>
             <li data-i18n="dfs-use-2">Pathfinding in mazes</li>
@@ -150,7 +160,8 @@ <h3 data-i18n="dfs-full">Depth-First Search (DFS)</h3>
   <section id="visualizer" class="visualizer">
     <div class="container">
       <h2 data-i18n="interactive-graph-visualizer">Interactive Graph Visualizer</h2>
-      <p data-i18n="visualizer-description">See graph algorithms in action! Experiment with different graph structures and watch as the algorithms traverse them step by step.</p>
+      <p data-i18n="visualizer-description">See graph algorithms in action! Experiment with different graph structures
+        and watch as the algorithms traverse them step by step.</p>
       <div class="graph-container">
         <div class="graph-node" style="top: 20%; left: 20%;">1</div>
         <div class="graph-node" style="top: 60%; left: 30%;">2</div>
@@ -187,13 +198,13 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
       <form id="contactForm">
         <label for="name" data-i18n="name">Name:</label>
         <input type="text" id="name" name="name" required>
-        
+
         <label for="email" data-i18n="email">Email:</label>
         <input type="email" id="email" name="email" required>
-        
+
         <label for="message" data-i18n="message">Message:</label>
         <textarea id="message" name="message" required></textarea>
-        
+
         <button type="submit" data-i18n="send">Send</button>
       </form>
     </div>
@@ -262,15 +273,15 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
       const btn = document.getElementById("contactUsBtn");
       const span = document.getElementsByClassName("close")[0];
 
-      btn.onclick = function() {
+      btn.onclick = function () {
         modal.style.display = "block";
       }
 
-      span.onclick = function() {
+      span.onclick = function () {
         modal.style.display = "none";
       }
 
-      window.onclick = function(event) {
+      window.onclick = function (event) {
         if (event.target == modal) {
           modal.style.display = "none";
         }
@@ -539,19 +550,21 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
       top: 0;
       width: 100%;
       height: 100%;
-      background-color: rgba(0,0,0,0.8);
+      background-color: rgba(0, 0, 0, 0.8);
       overflow: auto;
     }
 
     .modal-content {
-      background-color: #1e2124; /* Dark background color */
+      background-color: #1e2124;
+      /* Dark background color */
       margin: 10% auto;
       padding: 30px;
       border-radius: 8px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       width: 90%;
       max-width: 500px;
-      color: #ffffff; /* White text color */
+      color: #ffffff;
+      /* White text color */
     }
 
     .close {
@@ -585,10 +598,12 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
     #contactForm textarea {
       margin-bottom: 15px;
       padding: 10px;
-      border: 1px solid #36393f; /* Slightly lighter border */
+      border: 1px solid #36393f;
+      /* Slightly lighter border */
       border-radius: 4px;
       font-size: 16px;
-      background-color: #2f3136; /* Dark input background */
+      background-color: #2f3136;
+      /* Dark input background */
       color: #ffffff;
     }
 
@@ -601,7 +616,8 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
     #closeConfirmation {
       margin-top: 10px;
       padding: 12px;
-      background-color: #36393f; /* Slightly lighter button background */
+      background-color: #36393f;
+      /* Slightly lighter button background */
       color: white;
       border: none;
       border-radius: 4px;
@@ -612,7 +628,8 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
 
     #contactForm button:hover,
     #closeConfirmation:hover {
-      background-color: #40444b; /* Lighter background on hover */
+      background-color: #40444b;
+      /* Lighter background on hover */
     }
 
     /* Improved modal title */
@@ -638,7 +655,8 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
     }
 
     .footer {
-      background-color: #1e2124; /* Dark background color */
+      background-color: #1e2124;
+      /* Dark background color */
       color: #fff;
       padding: 20px 0;
     }
@@ -650,16 +668,18 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
     }
 
     .footer-links a {
-      color: #ffffff; /* White color for all links */
+      color: #ffffff;
+      /* White color for all links */
       text-decoration: none;
       margin: 0 10px;
       transition: opacity 0.3s ease;
     }
 
     .footer-links a:hover {
-      opacity: 0.8; /* Slight opacity change on hover for visual feedback */
+      opacity: 0.8;
+      /* Slight opacity change on hover for visual feedback */
     }
   </style>
 </body>
 
-</html>
+</html>

src/app/components/navbar/navbar.component.html

@@ -15,6 +15,9 @@
                 <a href="/mainIndex" class="dropdown-item">Home</a>
                 <a href="/aboutUs" class="dropdown-item btn btn-dark me-3">About Us</a>
                 <a href="/faq" class="dropdown-item btn btn-dark me-3">FAQ</a>
+                <a href="/quiz" class="dropdown-item btn btn-dark me-3">Quiz</a>
+                <a href="/real-world" class="dropdown-item btn btn-dark me-3">Real World Graph Scenario</a>
+                <a href="/questions" class="dropdown-item btn btn-dark me-3">Questions</a>
                 <a href="/" (click)="onLogout()" class="dropdown-item">Logout</a>
             </div>
         </div>

src/app/components/practice/practice.component.css

@@ -0,0 +1,96 @@
+:host {
+  display: block;
+  background-color: #f0f4f8;
+  min-height: 100vh;
+  padding: 2rem 0;
+}
+
+.question-bank-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  margin-top: 4rem;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+h1 {
+  color: #2c3e50;
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.intro {
+  color: #34495e;
+  font-size: 1.2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.search-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 2rem;
+}
+
+.search-input {
+  width: 100%;
+  max-width: 500px;
+  padding: 0.8rem;
+  font-size: 1rem;
+  border: 2px solid #bdc3c7;
+  border-radius: 25px;
+  transition: border-color 0.3s ease;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #3498db;
+}
+
+.question-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 2rem;
+}
+
+.question-card {
+  background-color: white;
+  border-radius: 10px;
+  padding: 1.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.question-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+h2 {
+  margin: 0 0 1rem 0;
+  color: #2c3e50;
+  font-size: 1.5rem;
+}
+
+p {
+  color: #34495e;
+  margin-bottom: 1.5rem;
+}
+
+.start-solving-button {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background-color: #3498db;
+  color: white;
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.start-solving-button:hover {
+  background-color: #2980b9;
+}

src/app/components/practice/practice.component.html

@@ -0,0 +1,22 @@
+<app-navbar></app-navbar>
+<div class="question-bank-container">
+    <header>
+        <h1>Practice Your Skills</h1>
+        <p class="intro">
+            Sharpen your coding skills with hundreds of algorithm problems to practice.
+        </p>
+    </header>
+
+    <div class="search-container">
+        <input type="text" [(ngModel)]="searchTerm" (input)="filterQuestions()" placeholder="Search problems..."
+            class="search-input">
+    </div>
+
+    <div class="question-grid">
+        <div *ngFor="let question of filteredQuestions" class="question-card">
+            <h2>{{ question.title }}</h2>
+            <p>{{ question.description }}</p>
+            <a [href]="question.link" class="start-solving-button" target="_blank">Start Solving</a>
+        </div>
+    </div>
+</div>

src/app/components/practice/practice.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PracticeComponent } from './practice.component';
+
+describe('PracticeComponent', () => {
+  let component: PracticeComponent;
+  let fixture: ComponentFixture<PracticeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PracticeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PracticeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});