Merge pull request #528 from Shariq2003/EnhancePracticeQuestion

Enhance the Practice Questions Page | Issue #499

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

@@ -6,89 +6,134 @@
 }
 
 .question-bank-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 2rem;
-  margin-top: 4rem;
+  max-width: 1500px;
+  margin-top: 100px;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  display: flex;
+}
+
+.sidebar {
+  flex: 0 0 250px;
+  position: sticky;
+  top: 20px;
+  background-color: #333;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-right: 20px;
+}
+
+.sidebar h3 {
+  margin-bottom: 1rem;
+  color: white;
+}
+
+.sidebar ul {
+  list-style: none;
+  padding: 0;
 }
 
-header {
+.sidebar li {
+  cursor: pointer;
+  padding: 0.5rem 0;
+  color: #3498db;
+  transition: color 0.3s;
+}
+
+.sidebar li:hover {
+  color: #2980b9;
+}
+
+.content {
+  flex: 1;
+}
+
+.header {
   text-align: center;
-  margin-bottom: 3rem;
+  margin-bottom: 20px;
 }
 
-h1 {
-  color: #2c3e50;
+.title {
   font-size: 2.5rem;
-  margin-bottom: 1rem;
+  color: #333;
+  margin-bottom: 10px;
 }
 
 .intro {
-  color: #34495e;
   font-size: 1.2rem;
-  max-width: 800px;
-  margin: 0 auto;
+  color: #666;
 }
 
 .search-container {
   display: flex;
   justify-content: center;
-  margin-bottom: 2rem;
+  margin-bottom: 20px;
 }
 
 .search-input {
-  width: 100%;
-  max-width: 500px;
-  padding: 0.8rem;
+  width: 80%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
   font-size: 1rem;
-  border: 2px solid #bdc3c7;
-  border-radius: 25px;
-  transition: border-color 0.3s ease;
+  transition: border-color 0.3s;
 }
 
 .search-input:focus {
-  outline: none;
   border-color: #3498db;
+  outline: none;
+}
+
+.loading-indicator {
+  text-align: center;
+  font-size: 1.2rem;
+  color: #3498db;
+  margin: 2rem 0;
 }
 
 .question-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 2rem;
+  gap: 20px;
 }
 
 .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;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .question-card:hover {
   transform: translateY(-5px);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 }
 
-h2 {
-  margin: 0 0 1rem 0;
-  color: #2c3e50;
+.question-title {
   font-size: 1.5rem;
+  color: #333;
+  margin: 0 0 10px;
 }
 
-p {
-  color: #34495e;
-  margin-bottom: 1.5rem;
+.question-description {
+  font-size: 1rem;
+  color: #555;
+  margin-bottom: 15px;
 }
 
 .start-solving-button {
   display: inline-block;
-  padding: 0.5rem 1rem;
+  padding: 10px 15px;
   background-color: #3498db;
   color: white;
   text-decoration: none;
-  border-radius: 5px;
-  transition: background-color 0.3s ease;
+  border-radius: 4px;
+  transition: background-color 0.3s;
 }
 
 .start-solving-button:hover {

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

@@ -1,22 +1,36 @@
 <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 class="sidebar">
+        <h3>Filter by Difficulty</h3>
+        <ul>
+            <li *ngFor="let level of ['Easy', 'Medium', 'Hard', 'All']"
+                (click)="setCategory(level === 'All' ? '' : level)">
+                {{ level }}
+            </li>
+        </ul>
     </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 class="content">
+        <header class="header">
+            <h1 class="title">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 *ngIf="isLoading" class="loading-indicator">Loading questions, please wait...</div>
+
+        <div class="question-grid" *ngIf="!isLoading">
+            <div *ngFor="let question of filteredQuestions" class="question-card">
+                <h2 class="question-title">{{ question.title }}</h2>
+                <p class="question-description">{{ question.description }}</p>
+                <a [href]="question.link" class="start-solving-button" target="_blank">Start Solving</a>
+            </div>
         </div>
     </div>
 </div>