From 476f79444595c6a3e1c4f05053c1dcaa4a3a9fa0 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Fri, 15 Dec 2023 11:29:21 +0500
Subject: [PATCH 01/27] e2e testing for the project_starter

---
 _project_starter_/cypress.config.js           |  9 +++++++
 .../cypress/e2e/test1.spec.cy.js              | 23 +++++++++++++++++
 .../cypress/fixtures/example.json             |  5 ++++
 _project_starter_/cypress/support/commands.js | 25 +++++++++++++++++++
 _project_starter_/cypress/support/e2e.js      | 20 +++++++++++++++
 _project_starter_/index.html                  |  2 +-
 6 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 _project_starter_/cypress.config.js
 create mode 100644 _project_starter_/cypress/e2e/test1.spec.cy.js
 create mode 100644 _project_starter_/cypress/fixtures/example.json
 create mode 100644 _project_starter_/cypress/support/commands.js
 create mode 100644 _project_starter_/cypress/support/e2e.js

diff --git a/_project_starter_/cypress.config.js b/_project_starter_/cypress.config.js
new file mode 100644
index 0000000..97f47c4
--- /dev/null
+++ b/_project_starter_/cypress.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/_project_starter_/cypress/e2e/test1.spec.cy.js b/_project_starter_/cypress/e2e/test1.spec.cy.js
new file mode 100644
index 0000000..deb9a39
--- /dev/null
+++ b/_project_starter_/cypress/e2e/test1.spec.cy.js
@@ -0,0 +1,23 @@
+describe('Project 1: Project Starter', () => {
+
+  beforeEach(() => {
+    cy.visit('http://127.0.0.1:5500/_project_starter_/')
+  })
+
+  it('Opens the Home Page', () => {
+
+  })
+
+  it('White Background color', () => {
+    cy.get('body').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+  })
+
+  it('Screen is visible', () => {
+    cy.get('body').should('be.visible')
+  })
+
+  it('Text is visible', () => {
+    cy.get('h1').should('have.text', 'Project Starter')
+  })
+  
+})
\ No newline at end of file
diff --git a/_project_starter_/cypress/fixtures/example.json b/_project_starter_/cypress/fixtures/example.json
new file mode 100644
index 0000000..02e4254
--- /dev/null
+++ b/_project_starter_/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/_project_starter_/cypress/support/commands.js b/_project_starter_/cypress/support/commands.js
new file mode 100644
index 0000000..66ea16e
--- /dev/null
+++ b/_project_starter_/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/_project_starter_/cypress/support/e2e.js b/_project_starter_/cypress/support/e2e.js
new file mode 100644
index 0000000..0e7290a
--- /dev/null
+++ b/_project_starter_/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file
diff --git a/_project_starter_/index.html b/_project_starter_/index.html
index 4783501..7f7705b 100644
--- a/_project_starter_/index.html
+++ b/_project_starter_/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <h1>Project Starter</h1>
-    <script src="script.js"></script>
+    <!-- <script src="script.js"></script> -->
   </body>
 </html>

From 5827588ddebe422f0a829b4878977fa48055c3f7 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Fri, 15 Dec 2023 13:26:09 +0500
Subject: [PATCH 02/27] Update the code for 3d boxes background testing

---
 3d-boxes-background/cypress.config.js         |  9 +++++++
 .../cypress/e2e/test1.spec.cy.js              | 20 +++++++++++++++
 .../cypress/fixtures/example.json             |  5 ++++
 .../cypress/support/commands.js               | 25 +++++++++++++++++++
 3d-boxes-background/cypress/support/e2e.js    | 20 +++++++++++++++
 5 files changed, 79 insertions(+)
 create mode 100644 3d-boxes-background/cypress.config.js
 create mode 100644 3d-boxes-background/cypress/e2e/test1.spec.cy.js
 create mode 100644 3d-boxes-background/cypress/fixtures/example.json
 create mode 100644 3d-boxes-background/cypress/support/commands.js
 create mode 100644 3d-boxes-background/cypress/support/e2e.js

diff --git a/3d-boxes-background/cypress.config.js b/3d-boxes-background/cypress.config.js
new file mode 100644
index 0000000..97f47c4
--- /dev/null
+++ b/3d-boxes-background/cypress.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/3d-boxes-background/cypress/e2e/test1.spec.cy.js b/3d-boxes-background/cypress/e2e/test1.spec.cy.js
new file mode 100644
index 0000000..faefef7
--- /dev/null
+++ b/3d-boxes-background/cypress/e2e/test1.spec.cy.js
@@ -0,0 +1,20 @@
+describe('Project 2: 3d-Boxes-Background', () => {
+
+  beforeEach(() => {
+    cy.visit('http://127.0.0.1:5500/3d-boxes-background/')
+  })
+
+  it('Opens the Home Page', () => {
+
+  })
+
+  it('White Background color', () => {
+    cy.get('body').should('have.css', 'background-color', 'rgb(250, 250, 250)')
+  })
+
+  it('Screen is visible', () => {
+    cy.get('body').should('be.visible')
+  })
+
+  
+})
\ No newline at end of file
diff --git a/3d-boxes-background/cypress/fixtures/example.json b/3d-boxes-background/cypress/fixtures/example.json
new file mode 100644
index 0000000..02e4254
--- /dev/null
+++ b/3d-boxes-background/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/3d-boxes-background/cypress/support/commands.js b/3d-boxes-background/cypress/support/commands.js
new file mode 100644
index 0000000..66ea16e
--- /dev/null
+++ b/3d-boxes-background/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/3d-boxes-background/cypress/support/e2e.js b/3d-boxes-background/cypress/support/e2e.js
new file mode 100644
index 0000000..0e7290a
--- /dev/null
+++ b/3d-boxes-background/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file

From 25b5825ce18a091788fdc128aaf348ed6d42aad4 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Fri, 15 Dec 2023 14:53:13 +0500
Subject: [PATCH 03/27] Update the tests

---
 .../cypress/e2e/test1.spec.cy.js              | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/3d-boxes-background/cypress/e2e/test1.spec.cy.js b/3d-boxes-background/cypress/e2e/test1.spec.cy.js
index faefef7..8fc611b 100644
--- a/3d-boxes-background/cypress/e2e/test1.spec.cy.js
+++ b/3d-boxes-background/cypress/e2e/test1.spec.cy.js
@@ -16,5 +16,43 @@ describe('Project 2: 3d-Boxes-Background', () => {
     cy.get('body').should('be.visible')
   })
 
+  it('Magic Button is visible', () => {
+    cy.get('.magic').should('be.visible')
+  })
+
+  it('Magic Button is clickable', () => {
+    cy.get('.magic').should('be.visible').click()
+  })
+
+  it('Small Boxes are visible on the screen', () => {
+    cy.get('.boxes').should('be.visible')
+  })
+
+  it('Magic button when clicked, the boxes merge into one box', () => {
+    cy.get('.magic').should('be.visible').click()
+    cy.get('.box').should('be.visible')
+  })
   
+  context('Magic Button toggle', () => {
+    before(() => {
+      cy.visit('http://127.0.0.1:5500/3d-boxes-background/')
+      cy.get('.magic').should('be.visible').click()
+      cy.get('.box').should('be.visible')
+      
+    })
+  
+    it('If Magic button is toggled, then the box changes to small boxes', () => {
+      cy.get('.magic').should('be.visible').click()
+      cy.get('.boxes').should('be.visible')
+    })
+
+    it('The GIF in the image is working or not', () => {
+      cy.get('.magic').should('be.visible').click()
+      cy.get('.box').should('be.visible')
+      cy.get('image').should('have.data', 'background-image', 'https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif')
+    })
+  })
+
+
+
 })
\ No newline at end of file

From d16a91a2b09b9caa669bf196ff269566801cbceb Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Fri, 15 Dec 2023 14:58:10 +0500
Subject: [PATCH 04/27] Update teh code for 3d boxes background

---
 3d-boxes-background/cypress/e2e/test1.spec.cy.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/3d-boxes-background/cypress/e2e/test1.spec.cy.js b/3d-boxes-background/cypress/e2e/test1.spec.cy.js
index 8fc611b..96580b4 100644
--- a/3d-boxes-background/cypress/e2e/test1.spec.cy.js
+++ b/3d-boxes-background/cypress/e2e/test1.spec.cy.js
@@ -45,14 +45,6 @@ describe('Project 2: 3d-Boxes-Background', () => {
       cy.get('.magic').should('be.visible').click()
       cy.get('.boxes').should('be.visible')
     })
-
-    it('The GIF in the image is working or not', () => {
-      cy.get('.magic').should('be.visible').click()
-      cy.get('.box').should('be.visible')
-      cy.get('image').should('have.data', 'background-image', 'https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif')
-    })
   })
 
-
-
 })
\ No newline at end of file

From 0fe400af3ca72e48cd0a13d2c7466ef536274a59 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Fri, 15 Dec 2023 17:15:10 +0500
Subject: [PATCH 05/27] Update the code

---
 animated-countdown/cypress.config.js          |  9 +++++
 .../cypress/e2e/test1.spec.cy.js              | 34 +++++++++++++++++++
 .../cypress/fixtures/example.json             |  5 +++
 .../cypress/support/commands.js               | 25 ++++++++++++++
 animated-countdown/cypress/support/e2e.js     | 20 +++++++++++
 5 files changed, 93 insertions(+)
 create mode 100644 animated-countdown/cypress.config.js
 create mode 100644 animated-countdown/cypress/e2e/test1.spec.cy.js
 create mode 100644 animated-countdown/cypress/fixtures/example.json
 create mode 100644 animated-countdown/cypress/support/commands.js
 create mode 100644 animated-countdown/cypress/support/e2e.js

diff --git a/animated-countdown/cypress.config.js b/animated-countdown/cypress.config.js
new file mode 100644
index 0000000..97f47c4
--- /dev/null
+++ b/animated-countdown/cypress.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/animated-countdown/cypress/e2e/test1.spec.cy.js b/animated-countdown/cypress/e2e/test1.spec.cy.js
new file mode 100644
index 0000000..b9fa534
--- /dev/null
+++ b/animated-countdown/cypress/e2e/test1.spec.cy.js
@@ -0,0 +1,34 @@
+describe('Project 3: Animated Countdown', () => {
+
+  beforeEach(() => {
+    cy.visit('http://127.0.0.1:5500/animated-countdown/index.html')
+  })
+  it('Open the homepage', () => {
+    
+  })
+
+  it('White Background color', () => {
+    cy.get('body').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+  })
+
+  it('Screen is visible', () => {
+    cy.get('body').should('be.visible')
+  })
+
+  it('Get Ready text is visible', () => {
+    cy.get('.counter').get('h4').should('have.text', 'Get Ready')
+  })
+
+  it('The countdown is visible', () => {
+    
+  })
+
+  it('Go word is visible', () => {
+    cy.get('.final').get('h1').should('have.text', 'GO')
+  })
+
+  it('Replay button', () => {
+    cy.get('body').get('.counter').get('.nums').get('span').should('contain', 'Replay')
+  })
+
+})
\ No newline at end of file
diff --git a/animated-countdown/cypress/fixtures/example.json b/animated-countdown/cypress/fixtures/example.json
new file mode 100644
index 0000000..02e4254
--- /dev/null
+++ b/animated-countdown/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/animated-countdown/cypress/support/commands.js b/animated-countdown/cypress/support/commands.js
new file mode 100644
index 0000000..66ea16e
--- /dev/null
+++ b/animated-countdown/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/animated-countdown/cypress/support/e2e.js b/animated-countdown/cypress/support/e2e.js
new file mode 100644
index 0000000..0e7290a
--- /dev/null
+++ b/animated-countdown/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file

From 5a3bd9d68e78be4d69e21a5a45b908bda6dcae0d Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Fri, 15 Dec 2023 17:57:30 +0500
Subject: [PATCH 06/27] Update the code for testing

---
 animated-countdown/cypress/e2e/test1.spec.cy.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/animated-countdown/cypress/e2e/test1.spec.cy.js b/animated-countdown/cypress/e2e/test1.spec.cy.js
index b9fa534..076dcfa 100644
--- a/animated-countdown/cypress/e2e/test1.spec.cy.js
+++ b/animated-countdown/cypress/e2e/test1.spec.cy.js
@@ -19,10 +19,6 @@ describe('Project 3: Animated Countdown', () => {
     cy.get('.counter').get('h4').should('have.text', 'Get Ready')
   })
 
-  it('The countdown is visible', () => {
-    
-  })
-
   it('Go word is visible', () => {
     cy.get('.final').get('h1').should('have.text', 'GO')
   })

From 60ef8c70d432cc75b3db529a6a4956bae70d86cd Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Mon, 18 Dec 2023 12:32:45 +0500
Subject: [PATCH 07/27] Testing Animated Navigation Project

---
 animated-navigation/cypress.config.js         |  9 +++++++
 .../cypress/e2e/test1.spec.cy.js              |  5 ++++
 .../cypress/fixtures/example.json             |  5 ++++
 .../cypress/support/commands.js               | 25 +++++++++++++++++++
 animated-navigation/cypress/support/e2e.js    | 20 +++++++++++++++
 5 files changed, 64 insertions(+)
 create mode 100644 animated-navigation/cypress.config.js
 create mode 100644 animated-navigation/cypress/e2e/test1.spec.cy.js
 create mode 100644 animated-navigation/cypress/fixtures/example.json
 create mode 100644 animated-navigation/cypress/support/commands.js
 create mode 100644 animated-navigation/cypress/support/e2e.js

diff --git a/animated-navigation/cypress.config.js b/animated-navigation/cypress.config.js
new file mode 100644
index 0000000..97f47c4
--- /dev/null
+++ b/animated-navigation/cypress.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/animated-navigation/cypress/e2e/test1.spec.cy.js b/animated-navigation/cypress/e2e/test1.spec.cy.js
new file mode 100644
index 0000000..322992c
--- /dev/null
+++ b/animated-navigation/cypress/e2e/test1.spec.cy.js
@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})
\ No newline at end of file
diff --git a/animated-navigation/cypress/fixtures/example.json b/animated-navigation/cypress/fixtures/example.json
new file mode 100644
index 0000000..02e4254
--- /dev/null
+++ b/animated-navigation/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/animated-navigation/cypress/support/commands.js b/animated-navigation/cypress/support/commands.js
new file mode 100644
index 0000000..66ea16e
--- /dev/null
+++ b/animated-navigation/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/animated-navigation/cypress/support/e2e.js b/animated-navigation/cypress/support/e2e.js
new file mode 100644
index 0000000..0e7290a
--- /dev/null
+++ b/animated-navigation/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file

From c89768b87f6d9f2aa6b227908d0d125ac4bb6a81 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Mon, 18 Dec 2023 14:15:56 +0500
Subject: [PATCH 08/27] Update the code for testing animated navigation

---
 .../cypress/e2e/test1.spec.cy.js              | 58 ++++++++++++++++++-
 animated-navigation/style.css                 |  2 +-
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/animated-navigation/cypress/e2e/test1.spec.cy.js b/animated-navigation/cypress/e2e/test1.spec.cy.js
index 322992c..8a2a8c5 100644
--- a/animated-navigation/cypress/e2e/test1.spec.cy.js
+++ b/animated-navigation/cypress/e2e/test1.spec.cy.js
@@ -1,5 +1,57 @@
-describe('template spec', () => {
-  it('passes', () => {
-    cy.visit('https://example.cypress.io')
+describe('Project 4: Animated Navigation', () => {
+
+  beforeEach(() => {
+    cy.visit('http://127.0.0.1:5500/animated-navigation')
   })
+
+  it('Opens the browser', () => {
+
+  })
+
+  it('Screen is visible', () => {
+    cy.get('body').should('be.visible')
+  })
+
+  it('Checks for the background color', () => {
+    cy.get('body').should('have.css', 'background-color', 'rgb(235, 251, 255)')
+  })
+
+  it('Checks for the linear gradient color on the screen', () => {
+    cy.get('body').should('have.css', 'background-image').and('contain', 'linear-gradient')
+  })
+
+  it('Checks for the current linear gradient colors', () => {
+    cy.get('body').should(($element) => {
+      const gradient = $element.css('background-image');
+      expect(gradient).to.include('rgb(234, 251, 255)');
+      expect(gradient).to.include('rgb(82, 144, 249)');
+    });
+  })
+
+  it('Navbar is visible', () => {
+    cy.get('body').get('#nav').should('be.visible')
+  })
+
+  it('Navbar background color', () => {
+    cy.get('body').get('nav#nav.active').should(($element) => {
+      const bgcolor = $element.css('background-color');
+      expect(bgcolor).to.include('rgb(255, 255, 255)');
+    });
+  })
+
+  it('Cross icon is visible to close the navbar', () => {
+    cy.get('body').get('#toggle').should('be.visible')
+  })
+
+  it('Cross icon is clickable', () => {
+    cy.get('body').get('#toggle').should('be.visible').click()
+  })
+
+  it('The navbar should have the 4 headings visible', () => {
+    cy.get('.active ul li a').should('have.length', 4)
+    cy.get('.active ul li a').each(($link) => {
+      cy.wrap($link).should('be.visible') 
+    });
+  })
+
 })
\ No newline at end of file
diff --git a/animated-navigation/style.css b/animated-navigation/style.css
index 77959ef..96a426d 100644
--- a/animated-navigation/style.css
+++ b/animated-navigation/style.css
@@ -5,7 +5,7 @@
 }
 
 body {
-  background-color: #eafbff;
+  background-color: rgb(235, 251, 255);
   background-image: linear-gradient(
     to bottom,
     #eafbff 0%,

From 71690b4170c277ee23182bb6b496f7e958ffedad Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Wed, 20 Dec 2023 14:57:51 +0500
Subject: [PATCH 09/27] Cypress testing for background-slider

---
 background-slider/cypress.config.js           |  9 +++++++
 .../cypress/e2e/test1.spec.cy.js              |  5 ++++
 .../cypress/fixtures/example.json             |  5 ++++
 background-slider/cypress/support/commands.js | 25 +++++++++++++++++++
 background-slider/cypress/support/e2e.js      | 20 +++++++++++++++
 5 files changed, 64 insertions(+)
 create mode 100644 background-slider/cypress.config.js
 create mode 100644 background-slider/cypress/e2e/test1.spec.cy.js
 create mode 100644 background-slider/cypress/fixtures/example.json
 create mode 100644 background-slider/cypress/support/commands.js
 create mode 100644 background-slider/cypress/support/e2e.js

diff --git a/background-slider/cypress.config.js b/background-slider/cypress.config.js
new file mode 100644
index 0000000..97f47c4
--- /dev/null
+++ b/background-slider/cypress.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/background-slider/cypress/e2e/test1.spec.cy.js b/background-slider/cypress/e2e/test1.spec.cy.js
new file mode 100644
index 0000000..322992c
--- /dev/null
+++ b/background-slider/cypress/e2e/test1.spec.cy.js
@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})
\ No newline at end of file
diff --git a/background-slider/cypress/fixtures/example.json b/background-slider/cypress/fixtures/example.json
new file mode 100644
index 0000000..02e4254
--- /dev/null
+++ b/background-slider/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/background-slider/cypress/support/commands.js b/background-slider/cypress/support/commands.js
new file mode 100644
index 0000000..66ea16e
--- /dev/null
+++ b/background-slider/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/background-slider/cypress/support/e2e.js b/background-slider/cypress/support/e2e.js
new file mode 100644
index 0000000..0e7290a
--- /dev/null
+++ b/background-slider/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file

From eef17cd5c6befa28904f670d566b74d140ce2900 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Wed, 20 Dec 2023 16:57:11 +0500
Subject: [PATCH 10/27] Update the test

---
 .../cypress/e2e/test1.spec.cy.js              | 51 +++++++++++++++++--
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/background-slider/cypress/e2e/test1.spec.cy.js b/background-slider/cypress/e2e/test1.spec.cy.js
index 322992c..2aa58c2 100644
--- a/background-slider/cypress/e2e/test1.spec.cy.js
+++ b/background-slider/cypress/e2e/test1.spec.cy.js
@@ -1,5 +1,50 @@
-describe('template spec', () => {
-  it('passes', () => {
-    cy.visit('https://example.cypress.io')
+describe('Project 4: Background Slider', () => {
+  
+  beforeEach(() => {
+    cy.visit('http://127.0.0.1:5500/background-slider')
+  })
+
+  it('Opens the home page', () => {
+    
+  })
+
+  it('Screen is visible', () => {
+    cy.get('body').should('be.visible')
+  })
+
+  context('Image Slider', () => {
+    it('Slider container is visible', () => {
+      cy.get('.slider-container').should('be.visible')
+    })
+
+   context('Arrows', () => {
+    it('Arrows are visible', () => {
+      cy.get('.arrow').should('be.visible')
+    })
+
+    it('Color of arrows is white', () => {
+      cy.get('.arrow').should('have.css', 'color', 'rgb(255, 255, 255)')
+    })
+
+    context('Left Arrow', () => {
+      it('Left arrow is visible', () => {
+        cy.get('.fa-arrow-left ').should('be.visible')
+      })
+
+      it('Left arrow is clickable', () => {
+        cy.get('.fa-arrow-left ').should('be.visible').click()
+      })
+    })
+
+    context('Right Arrow', () => {
+      it('Right arrow is visible', () => {
+        cy.get('.fa-arrow-right ').should('be.visible')
+      })
+
+      it('Right arrow is clickable', () => {
+        cy.get('.fa-arrow-right ').should('be.visible').click()
+      })
+    })
+   })
   })
 })
\ No newline at end of file

From dd31fa374ddccf997c8dffd7b66b67b95f70f47a Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Wed, 20 Dec 2023 17:12:06 +0500
Subject: [PATCH 11/27] Update the tests

---
 background-slider/cypress/e2e/test1.spec.cy.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/background-slider/cypress/e2e/test1.spec.cy.js b/background-slider/cypress/e2e/test1.spec.cy.js
index 2aa58c2..71ce6ba 100644
--- a/background-slider/cypress/e2e/test1.spec.cy.js
+++ b/background-slider/cypress/e2e/test1.spec.cy.js
@@ -34,6 +34,11 @@ describe('Project 4: Background Slider', () => {
       it('Left arrow is clickable', () => {
         cy.get('.fa-arrow-left ').should('be.visible').click()
       })
+
+      it('Left arrow when clicked takes me to the previous image', () => {
+        cy.get('.fa-arrow-left ').should('be.visible').click()
+        cy.get('.slide').should('have.class', 'active').should('be.visible')
+      })
     })
 
     context('Right Arrow', () => {
@@ -44,6 +49,11 @@ describe('Project 4: Background Slider', () => {
       it('Right arrow is clickable', () => {
         cy.get('.fa-arrow-right ').should('be.visible').click()
       })
+
+      it('Right arrow when clicked takes me to the next image', () => {
+        cy.get('.fa-arrow-right ').should('be.visible').click()
+        cy.get('.slide').should('have.class', 'active').should('be.visible')
+      })
     })
    })
   })

From 29ddfa0b33b29fc09bcb0825abed0544f11624a8 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Wed, 20 Dec 2023 17:24:17 +0500
Subject: [PATCH 12/27] Update test file

---
 .../cypress/e2e/test1.spec.cy.js              | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/background-slider/cypress/e2e/test1.spec.cy.js b/background-slider/cypress/e2e/test1.spec.cy.js
index 71ce6ba..b8ef91e 100644
--- a/background-slider/cypress/e2e/test1.spec.cy.js
+++ b/background-slider/cypress/e2e/test1.spec.cy.js
@@ -39,6 +39,7 @@ describe('Project 4: Background Slider', () => {
         cy.get('.fa-arrow-left ').should('be.visible').click()
         cy.get('.slide').should('have.class', 'active').should('be.visible')
       })
+
     })
 
     context('Right Arrow', () => {
@@ -54,7 +55,35 @@ describe('Project 4: Background Slider', () => {
         cy.get('.fa-arrow-right ').should('be.visible').click()
         cy.get('.slide').should('have.class', 'active').should('be.visible')
       })
+
     })
    })
   })
+
+  context('Background Image', () => {
+    it('Verifies the background image of the first slide', () => {
+      cy.get('.slide').first().should('have.css', 'background-image')
+        .and('include', 'photo-1549880338-65ddcdfd017b')
+    })
+
+    it('Verifies the background image of the second slide', () => {
+      cy.get('.slide').eq(1).should('have.css', 'background-image')
+        .and('include', 'photo-1511593358241-7eea1f3c84e5')
+    })
+
+    it('Verifies the background image of the third slide', () => {
+      cy.get('.slide').eq(2).should('have.css', 'background-image')
+        .and('include', 'photo-1495467033336-2effd8753d51')
+    })
+
+    it('Verifies the background image of the fourth slide', () => {
+      cy.get('.slide').eq(3).should('have.css', 'background-image')
+        .and('include', 'photo-1522735338363-cc7313be0ae0')
+    })
+
+    it('Verifies the background image of the fifth slide', () => {
+      cy.get('.slide').last().should('have.css', 'background-image')
+        .and('include', 'photo-1559087867-ce4c91325525')
+    })
+  })
 })
\ No newline at end of file

From 13beec9137e4dc656b5dd9ad1bb4ea7118edf953 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Wed, 20 Dec 2023 18:36:06 +0500
Subject: [PATCH 13/27] Install cypress

---
 content-placeholder/cypress.config.js         |  9 +++++++
 .../cypress/e2e/test1.spec.cy.js              |  5 ++++
 .../cypress/fixtures/example.json             |  5 ++++
 .../cypress/support/commands.js               | 25 +++++++++++++++++++
 content-placeholder/cypress/support/e2e.js    | 20 +++++++++++++++
 5 files changed, 64 insertions(+)
 create mode 100644 content-placeholder/cypress.config.js
 create mode 100644 content-placeholder/cypress/e2e/test1.spec.cy.js
 create mode 100644 content-placeholder/cypress/fixtures/example.json
 create mode 100644 content-placeholder/cypress/support/commands.js
 create mode 100644 content-placeholder/cypress/support/e2e.js

diff --git a/content-placeholder/cypress.config.js b/content-placeholder/cypress.config.js
new file mode 100644
index 0000000..97f47c4
--- /dev/null
+++ b/content-placeholder/cypress.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/content-placeholder/cypress/e2e/test1.spec.cy.js b/content-placeholder/cypress/e2e/test1.spec.cy.js
new file mode 100644
index 0000000..322992c
--- /dev/null
+++ b/content-placeholder/cypress/e2e/test1.spec.cy.js
@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})
\ No newline at end of file
diff --git a/content-placeholder/cypress/fixtures/example.json b/content-placeholder/cypress/fixtures/example.json
new file mode 100644
index 0000000..02e4254
--- /dev/null
+++ b/content-placeholder/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/content-placeholder/cypress/support/commands.js b/content-placeholder/cypress/support/commands.js
new file mode 100644
index 0000000..66ea16e
--- /dev/null
+++ b/content-placeholder/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/content-placeholder/cypress/support/e2e.js b/content-placeholder/cypress/support/e2e.js
new file mode 100644
index 0000000..0e7290a
--- /dev/null
+++ b/content-placeholder/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file

From d0d67e3f28e858f5337a52f7c4285b0f887ad780 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Wed, 20 Dec 2023 18:38:32 +0500
Subject: [PATCH 14/27] Update the test

---
 content-placeholder/cypress/e2e/test1.spec.cy.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/content-placeholder/cypress/e2e/test1.spec.cy.js b/content-placeholder/cypress/e2e/test1.spec.cy.js
index 322992c..c2584a9 100644
--- a/content-placeholder/cypress/e2e/test1.spec.cy.js
+++ b/content-placeholder/cypress/e2e/test1.spec.cy.js
@@ -1,5 +1,13 @@
-describe('template spec', () => {
-  it('passes', () => {
-    cy.visit('https://example.cypress.io')
+describe('Project 6: Content Placeholder', () => {
+  beforeEach(() => {
+    cy.visit('http://127.0.0.1:5500/content-placeholder')
+  })
+
+  it('Opens the home page', () => {
+
+  })
+
+  it('Background color', () => {
+
   })
 })
\ No newline at end of file

From ab799f16be180a6e13509ae46850afafde869df2 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Wed, 20 Dec 2023 19:42:14 +0500
Subject: [PATCH 15/27] Update code

---
 content-placeholder/cypress/e2e/test1.spec.cy.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/content-placeholder/cypress/e2e/test1.spec.cy.js b/content-placeholder/cypress/e2e/test1.spec.cy.js
index c2584a9..e0c8858 100644
--- a/content-placeholder/cypress/e2e/test1.spec.cy.js
+++ b/content-placeholder/cypress/e2e/test1.spec.cy.js
@@ -7,7 +7,12 @@ describe('Project 6: Content Placeholder', () => {
 
   })
 
-  it('Background color', () => {
+  it('Body is visible', () => {
+    cy.get('body').should('be.visible')
+  })
 
+  it('Background color', () => {
+    cy.get('body').should('have.css', 'background-color', 'rgb(236, 240, 241)')
   })
+
 })
\ No newline at end of file

From cab49e65ffa2704f956ee16e55b570efe4d44729 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Thu, 21 Dec 2023 11:30:35 +0500
Subject: [PATCH 16/27] Install cypress and make a new test file

---
 custom-range-slider/cypress.config.js         |  9 +++++++
 .../cypress/e2e/test1.spec.cy.js              |  5 ++++
 .../cypress/fixtures/example.json             |  5 ++++
 .../cypress/support/commands.js               | 25 +++++++++++++++++++
 custom-range-slider/cypress/support/e2e.js    | 20 +++++++++++++++
 5 files changed, 64 insertions(+)
 create mode 100644 custom-range-slider/cypress.config.js
 create mode 100644 custom-range-slider/cypress/e2e/test1.spec.cy.js
 create mode 100644 custom-range-slider/cypress/fixtures/example.json
 create mode 100644 custom-range-slider/cypress/support/commands.js
 create mode 100644 custom-range-slider/cypress/support/e2e.js

diff --git a/custom-range-slider/cypress.config.js b/custom-range-slider/cypress.config.js
new file mode 100644
index 0000000..97f47c4
--- /dev/null
+++ b/custom-range-slider/cypress.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/custom-range-slider/cypress/e2e/test1.spec.cy.js b/custom-range-slider/cypress/e2e/test1.spec.cy.js
new file mode 100644
index 0000000..322992c
--- /dev/null
+++ b/custom-range-slider/cypress/e2e/test1.spec.cy.js
@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})
\ No newline at end of file
diff --git a/custom-range-slider/cypress/fixtures/example.json b/custom-range-slider/cypress/fixtures/example.json
new file mode 100644
index 0000000..02e4254
--- /dev/null
+++ b/custom-range-slider/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/custom-range-slider/cypress/support/commands.js b/custom-range-slider/cypress/support/commands.js
new file mode 100644
index 0000000..66ea16e
--- /dev/null
+++ b/custom-range-slider/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/custom-range-slider/cypress/support/e2e.js b/custom-range-slider/cypress/support/e2e.js
new file mode 100644
index 0000000..0e7290a
--- /dev/null
+++ b/custom-range-slider/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file

From 73d133de5eef673c70cb52104cf539159580d560 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Thu, 21 Dec 2023 12:26:33 +0500
Subject: [PATCH 17/27] Update teh testing code

---
 .../cypress/e2e/test1.spec.cy.js              | 77 ++++++++++++++++++-
 1 file changed, 74 insertions(+), 3 deletions(-)

diff --git a/custom-range-slider/cypress/e2e/test1.spec.cy.js b/custom-range-slider/cypress/e2e/test1.spec.cy.js
index 322992c..9cd7c19 100644
--- a/custom-range-slider/cypress/e2e/test1.spec.cy.js
+++ b/custom-range-slider/cypress/e2e/test1.spec.cy.js
@@ -1,5 +1,76 @@
-describe('template spec', () => {
-  it('passes', () => {
-    cy.visit('https://example.cypress.io')
+describe('Project: Custom Range Slider', () => {
+  beforeEach(() => {
+    cy.visit('http://127.0.0.1:5500/custom-range-slider')
   })
+
+  it('Opens the home page', () => {
+
+  })
+
+  it('Body Screen is visible', () => {
+    cy.get('body').should('be.visible')
+  })
+
+  it('Background color', () => {
+    const expectedGradient = /linear-gradient\(135deg,\s*rgb\(245,\s*247,\s*250\)\s*0%,\s*rgb\(195,\s*207,\s*226\)\s*100%\)/
+  
+    cy.get('body').should('have.css', 'background-image').and('match', expectedGradient)
+  })
+
+  context('Body', () =>{
+    context('Title text', () => {
+      it('Title text is visible', () => {
+        cy.get('body').get('h2').should('be.visible')
+      })
+  
+      it('Title Text is correct', () => {
+        cy.get('body h2').should('be.visible').should('have.text', 'Custom Range Slider')
+      })
+    })
+  
+    context('Range Slider', () => {
+      it('Range slider is visible', () => {
+        cy.get('body .range-container').should('be.visible')
+      })
+
+      it('Range slider mid value is 50', () => {
+        cy.get('label[for="range"]').should('be.visible')
+      })
+
+      it('Range slider start value is 0', () => {
+        cy.get('#range').invoke('val', '0').trigger('input');
+        cy.get('label[for="range"]').should('have.text', '0');
+      })
+
+      it('Range slider end value is 100', () => {
+        cy.get('#range').invoke('val', '100').trigger('input');
+        cy.get('label[for="range"]').should('have.text', '100');
+      })
+
+      it('Range slider has any value between 0 and 50 inclusive', () => {
+        cy.get('#range').invoke('val', '29').trigger('input');
+        cy.get('label[for="range"]').should('have.text', '29');
+      })
+
+      it('Range slider has any value between 0 and 100 inclusive', () => {
+        cy.get('#range').invoke('val', '63').trigger('input');
+        cy.get('label[for="range"]').should('have.text', '63');
+      })
+
+      it('Range slider does not have a value less than 0', () => {
+        cy.get('#range').invoke('val', '-1').trigger('input');
+        cy.get('label[for="range"]').should('not.have.text', '-1');
+      })
+
+      it('Range slider does not have a value greater than 100', () => {
+        cy.get('#range').invoke('val', '101').trigger('input');
+        cy.get('label[for="range"]').should('not.have.text', '101');
+      })
+
+      // it('Color of the slider is correctly displayed', () => {
+      //   cy.get('input[type="range"]').should('be.visible').should('have.css', 'background-color', 'rgb(128, 0, 128)')
+      // })
+    })
+  })
+
 })
\ No newline at end of file

From 649015b3eff7946036a0e38f64ed412ffeecaf00 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Thu, 21 Dec 2023 18:39:20 +0500
Subject: [PATCH 18/27] Update the code

---
 custom-range-slider/cypress/e2e/test1.spec.cy.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/custom-range-slider/cypress/e2e/test1.spec.cy.js b/custom-range-slider/cypress/e2e/test1.spec.cy.js
index 9cd7c19..b81f09c 100644
--- a/custom-range-slider/cypress/e2e/test1.spec.cy.js
+++ b/custom-range-slider/cypress/e2e/test1.spec.cy.js
@@ -66,10 +66,6 @@ describe('Project: Custom Range Slider', () => {
         cy.get('#range').invoke('val', '101').trigger('input');
         cy.get('label[for="range"]').should('not.have.text', '101');
       })
-
-      // it('Color of the slider is correctly displayed', () => {
-      //   cy.get('input[type="range"]').should('be.visible').should('have.css', 'background-color', 'rgb(128, 0, 128)')
-      // })
     })
   })
 

From 9787ad0d7e337ed06859882a895b3fd190cc3b6c Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Fri, 22 Dec 2023 10:50:21 +0500
Subject: [PATCH 19/27] Update testing code

---
 custom-range-slider/cypress/e2e/test1.spec.cy.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/custom-range-slider/cypress/e2e/test1.spec.cy.js b/custom-range-slider/cypress/e2e/test1.spec.cy.js
index b81f09c..5506aa8 100644
--- a/custom-range-slider/cypress/e2e/test1.spec.cy.js
+++ b/custom-range-slider/cypress/e2e/test1.spec.cy.js
@@ -47,25 +47,22 @@ describe('Project: Custom Range Slider', () => {
         cy.get('label[for="range"]').should('have.text', '100');
       })
 
-      it('Range slider has any value between 0 and 50 inclusive', () => {
+      it('Range slider has any value between 0 and 100 inclusive', () => {
         cy.get('#range').invoke('val', '29').trigger('input');
         cy.get('label[for="range"]').should('have.text', '29');
-      })
 
-      it('Range slider has any value between 0 and 100 inclusive', () => {
         cy.get('#range').invoke('val', '63').trigger('input');
         cy.get('label[for="range"]').should('have.text', '63');
       })
 
-      it('Range slider does not have a value less than 0', () => {
+      it('Range slider does not have a value less than 0 or greater than 100', () => {
         cy.get('#range').invoke('val', '-1').trigger('input');
         cy.get('label[for="range"]').should('not.have.text', '-1');
-      })
 
-      it('Range slider does not have a value greater than 100', () => {
         cy.get('#range').invoke('val', '101').trigger('input');
         cy.get('label[for="range"]').should('not.have.text', '101');
       })
+
     })
   })
 

From 32af4952c382e1308d9aa636abf390d23fe655c2 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Fri, 22 Dec 2023 10:53:48 +0500
Subject: [PATCH 20/27] Install cypress and make the test file

---
 dad-jokes/cypress.config.js             |  9 +++++++++
 dad-jokes/cypress/e2e/test1.spec.cy.js  |  5 +++++
 dad-jokes/cypress/fixtures/example.json |  5 +++++
 dad-jokes/cypress/support/commands.js   | 25 +++++++++++++++++++++++++
 dad-jokes/cypress/support/e2e.js        | 20 ++++++++++++++++++++
 5 files changed, 64 insertions(+)
 create mode 100644 dad-jokes/cypress.config.js
 create mode 100644 dad-jokes/cypress/e2e/test1.spec.cy.js
 create mode 100644 dad-jokes/cypress/fixtures/example.json
 create mode 100644 dad-jokes/cypress/support/commands.js
 create mode 100644 dad-jokes/cypress/support/e2e.js

diff --git a/dad-jokes/cypress.config.js b/dad-jokes/cypress.config.js
new file mode 100644
index 0000000..97f47c4
--- /dev/null
+++ b/dad-jokes/cypress.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/dad-jokes/cypress/e2e/test1.spec.cy.js b/dad-jokes/cypress/e2e/test1.spec.cy.js
new file mode 100644
index 0000000..322992c
--- /dev/null
+++ b/dad-jokes/cypress/e2e/test1.spec.cy.js
@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})
\ No newline at end of file
diff --git a/dad-jokes/cypress/fixtures/example.json b/dad-jokes/cypress/fixtures/example.json
new file mode 100644
index 0000000..02e4254
--- /dev/null
+++ b/dad-jokes/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/dad-jokes/cypress/support/commands.js b/dad-jokes/cypress/support/commands.js
new file mode 100644
index 0000000..66ea16e
--- /dev/null
+++ b/dad-jokes/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/dad-jokes/cypress/support/e2e.js b/dad-jokes/cypress/support/e2e.js
new file mode 100644
index 0000000..0e7290a
--- /dev/null
+++ b/dad-jokes/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file

From ab91c8b13c145c1785380fb28a03b181a90beec7 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Fri, 22 Dec 2023 11:06:54 +0500
Subject: [PATCH 21/27] Update testing code

---
 dad-jokes/cypress/e2e/test1.spec.cy.js | 32 +++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/dad-jokes/cypress/e2e/test1.spec.cy.js b/dad-jokes/cypress/e2e/test1.spec.cy.js
index 322992c..40fbe64 100644
--- a/dad-jokes/cypress/e2e/test1.spec.cy.js
+++ b/dad-jokes/cypress/e2e/test1.spec.cy.js
@@ -1,5 +1,31 @@
-describe('template spec', () => {
-  it('passes', () => {
-    cy.visit('https://example.cypress.io')
+describe('Project: Dad Jokes', () => {
+  beforeEach(() => {
+    cy.visit('http://127.0.0.1:5500/dad-jokes/index.html')
+  })
+
+  context('General Tests', () => {
+    it('Opens the home page', () => {
+
+    })
+
+    it('Screen is visible', () => {
+      cy.get('body').should('be.visible')
+    })
+
+    it('Background color', () => {
+      cy.get('body').should('have.css', 'background-color', 'rgb(104, 109, 224)')
+    })
+  })
+
+  context('Body', () => {
+    context('Title Text', () => {
+      it('Title text is visible', () => {
+        cy.get('body').get('.container h3').should('be.visible')
+      })
+
+      it('Title text is correct', () => {
+        cy.get('body').get('.container h3').should('have.text', "Don't Laugh Challenge")
+      })
+    })
   })
 })
\ No newline at end of file

From 63ac493bb00536b2db093a5859aec2179678f5a7 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Fri, 22 Dec 2023 11:25:36 +0500
Subject: [PATCH 22/27] Update the test code

---
 dad-jokes/cypress/e2e/test1.spec.cy.js | 29 ++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/dad-jokes/cypress/e2e/test1.spec.cy.js b/dad-jokes/cypress/e2e/test1.spec.cy.js
index 40fbe64..b794ff8 100644
--- a/dad-jokes/cypress/e2e/test1.spec.cy.js
+++ b/dad-jokes/cypress/e2e/test1.spec.cy.js
@@ -27,5 +27,34 @@ describe('Project: Dad Jokes', () => {
         cy.get('body').get('.container h3').should('have.text', "Don't Laugh Challenge")
       })
     })
+
+    context('Get Another Joke button', () => {
+      it('Get Another Joke button is visible', () => {
+        cy.get('.btn').should('be.visible')
+      })
+      
+      it('Color of the button is correct', () => {
+        cy.get('.btn').should('have.css', 'background-color', 'rgb(159, 104, 224)')
+      })
+
+      it('The button has the correct text displayed', () => {
+        cy.get('.btn').should('have.text', 'Get Another Joke')
+      })
+
+      it('The button is clickable', () => {
+        cy.get('.btn').should('be.visible').click()
+      })
+    })
+
+    context('Joke', () => {
+      it('Joke is visible', () => {
+        cy.get('.container .joke#joke').should('be.visible')
+      })
+
+      it('Gets a new joke when the button is clicked', () => {
+        cy.get('.btn').should('be.visible').click()
+        cy.get('.container .joke#joke').should('be.visible')
+      })
+    })
   })
 })
\ No newline at end of file

From 37ce5add33fee91f7d51400e6cc0629389ba386e Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Tue, 26 Dec 2023 11:05:38 +0500
Subject: [PATCH 23/27] Install cypress and create the first test

---
 notes-app/cypress.config.js             |  9 +++++++++
 notes-app/cypress/e2e/test1.spec.cy.js  |  5 +++++
 notes-app/cypress/fixtures/example.json |  5 +++++
 notes-app/cypress/support/commands.js   | 25 +++++++++++++++++++++++++
 notes-app/cypress/support/e2e.js        | 20 ++++++++++++++++++++
 5 files changed, 64 insertions(+)
 create mode 100644 notes-app/cypress.config.js
 create mode 100644 notes-app/cypress/e2e/test1.spec.cy.js
 create mode 100644 notes-app/cypress/fixtures/example.json
 create mode 100644 notes-app/cypress/support/commands.js
 create mode 100644 notes-app/cypress/support/e2e.js

diff --git a/notes-app/cypress.config.js b/notes-app/cypress.config.js
new file mode 100644
index 0000000..97f47c4
--- /dev/null
+++ b/notes-app/cypress.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/notes-app/cypress/e2e/test1.spec.cy.js b/notes-app/cypress/e2e/test1.spec.cy.js
new file mode 100644
index 0000000..322992c
--- /dev/null
+++ b/notes-app/cypress/e2e/test1.spec.cy.js
@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})
\ No newline at end of file
diff --git a/notes-app/cypress/fixtures/example.json b/notes-app/cypress/fixtures/example.json
new file mode 100644
index 0000000..02e4254
--- /dev/null
+++ b/notes-app/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/notes-app/cypress/support/commands.js b/notes-app/cypress/support/commands.js
new file mode 100644
index 0000000..66ea16e
--- /dev/null
+++ b/notes-app/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/notes-app/cypress/support/e2e.js b/notes-app/cypress/support/e2e.js
new file mode 100644
index 0000000..0e7290a
--- /dev/null
+++ b/notes-app/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file

From 098e079bbe10d82848efa602fca7a9c8da47fc3e Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Tue, 26 Dec 2023 11:52:56 +0500
Subject: [PATCH 24/27] Test code for website UI

---
 notes-app/cypress/e2e/test1.spec.cy.js | 58 ++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 3 deletions(-)

diff --git a/notes-app/cypress/e2e/test1.spec.cy.js b/notes-app/cypress/e2e/test1.spec.cy.js
index 322992c..45217b4 100644
--- a/notes-app/cypress/e2e/test1.spec.cy.js
+++ b/notes-app/cypress/e2e/test1.spec.cy.js
@@ -1,5 +1,57 @@
-describe('template spec', () => {
-  it('passes', () => {
-    cy.visit('https://example.cypress.io')
+describe('Project: Notes-App', () => {
+  beforeEach(() => {
+    cy.visit('http://127.0.0.1:5500/notes-app')
+  })
+
+  it('Opens the Home Page', () => {
+
+  })
+
+  it('Screen is visible', () => {
+    cy.get('body').should('be.visible')
+  })
+
+  context('Background-color', () => {
+
+    it('Background color is visible', () => {
+      cy.get('body').should('be.visible')
+    })
+
+    it('Background color is correct', () => {
+      cy.get('body').should('have.css', 'background-color', 'rgb(123, 218, 243)')
+    })
+  })
+
+  context('Body', () => {
+    context('Add Note Button', () => {
+      it('The button is visible', () => {
+        cy.get('body').get('.add').should('be.visible')
+      })
+
+      it('The color of the button is green', () => {
+        cy.get('body .add').should('have.css', 'background-color', 'rgb(158, 200, 98)')
+      })
+
+      it('The button has correct text', () => {
+        cy.get('button.add#add').invoke('text').invoke('trim').should('eq', 'Add note');
+      })
+
+      it('The plus sign is visible', () => {
+        cy.get('button i').should('be.visible')
+      })
+
+      it('The color of the plus sign is white', () => {
+        cy.get('button i').should('be.visible').should('have.css', 'color', 'rgb(255, 255, 255)')
+      })
+
+      it('The button is clickable', () => {
+        cy.get('body .add').should('be.visible').click()
+      })
+
+      it('The button when clicked opens a new note', () => {
+        cy.get('body .add').should('be.visible').click()
+        cy.get('.note').should('be.visible')
+      })
+    })
   })
 })
\ No newline at end of file

From a859189dfe9c5a4d89a9f0fa6294968a39c867d6 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Tue, 26 Dec 2023 13:10:47 +0500
Subject: [PATCH 25/27] Test code update

---
 notes-app/cypress/e2e/test1.spec.cy.js | 46 +++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/notes-app/cypress/e2e/test1.spec.cy.js b/notes-app/cypress/e2e/test1.spec.cy.js
index 45217b4..dbe5254 100644
--- a/notes-app/cypress/e2e/test1.spec.cy.js
+++ b/notes-app/cypress/e2e/test1.spec.cy.js
@@ -49,9 +49,53 @@ describe('Project: Notes-App', () => {
       })
 
       it('The button when clicked opens a new note', () => {
-        cy.get('body .add').should('be.visible').click()
+        cy.get('body .add').should('be.visible').click()  // checks if the note is visible or not too
         cy.get('.note').should('be.visible')
       })
+
+      context('New Note', () => {
+        it('The user is able to write in the note', () => {
+          cy.get('body .add').should('be.visible').click() 
+          cy.get('.note').should('be.visible').type('Hello world, how are you?')
+        })
+
+        it('The note accepts multi line input as well', () => {
+          cy.get('body .add').should('be.visible').click() 
+          cy.get('.note').should('be.visible').type('Hello world, how are you?').type('{enter}').type('The world says that it is fine.')
+        })
+
+        it('The user is able to delete characters with the help of backspace', () => {
+          cy.get('body .add').should('be.visible').click() 
+          cy.get('.note').should('be.visible').type('Hello world, how are you?').type('{enter}').type('The world says that it is fine.')
+          .type('{backspace}').type('{backspace}').type('{backspace}').type('{backspace}').type('{backspace}')
+        })
+
+        context('Notepad buttons', () => {
+          beforeEach(() => {
+            cy.get('body .add').should('be.visible').click() 
+            cy.get('.note').should('be.visible')
+          })
+
+          context('Save the text button', () => {
+            it('The button is visible', () => {
+              cy.get('.edit').should('be.visible')
+            })
+
+            it('The button is clickable', () => {
+              cy.get('.edit').should('be.visible').click()
+            })
+
+            it('The button when clicked saves the text and does not allow me to edit it and when clicked again allows me to edit the text', () => {
+              cy.get('.note').should('be.visible').type('Hello world, how are you?')
+              cy.get('.edit').should('be.visible').click()
+              cy.get('.note textarea').should('not.be.visible')
+
+              cy.get('.edit').should('be.visible').click()
+              cy.get('.note textarea').should('be.visible')
+            })
+          })
+        })
+      })
     })
   })
 })
\ No newline at end of file

From 2a7855f9e841e96deba4d062869766adcaac9716 Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Tue, 26 Dec 2023 13:28:19 +0500
Subject: [PATCH 26/27] Testing the code file

---
 notes-app/cypress/e2e/test1.spec.cy.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/notes-app/cypress/e2e/test1.spec.cy.js b/notes-app/cypress/e2e/test1.spec.cy.js
index dbe5254..b494575 100644
--- a/notes-app/cypress/e2e/test1.spec.cy.js
+++ b/notes-app/cypress/e2e/test1.spec.cy.js
@@ -94,6 +94,23 @@ describe('Project: Notes-App', () => {
               cy.get('.note textarea').should('be.visible')
             })
           })
+
+          context('Delete the note button', () => {
+            it('The button is visible', () => {
+              cy.get('.delete').should('be.visible')
+            })
+
+            it('The button is clickable', () => {
+              cy.get('.delete').should('be.visible').click()
+            })
+
+            it('The button when clicked deletes the note from the screen', () => {
+              cy.get('.note').its('length').then((initialNoteCount) => {
+                cy.get('.note:first-of-type .delete').click()
+                cy.get('.note').should('have.length', initialNoteCount - 1)
+              })
+            })
+          })
         })
       })
     })

From d0eabc9dc3e0b139c049d50f9909ab1e836559ea Mon Sep 17 00:00:00 2001
From: Hammad1007 <hammadrashid2001@gmail.com>
Date: Tue, 26 Dec 2023 14:37:16 +0500
Subject: [PATCH 27/27] Update test code

---
 notes-app/cypress/e2e/test1.spec.cy.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/notes-app/cypress/e2e/test1.spec.cy.js b/notes-app/cypress/e2e/test1.spec.cy.js
index b494575..2b8ff76 100644
--- a/notes-app/cypress/e2e/test1.spec.cy.js
+++ b/notes-app/cypress/e2e/test1.spec.cy.js
@@ -1,4 +1,5 @@
 describe('Project: Notes-App', () => {
+
   beforeEach(() => {
     cy.visit('http://127.0.0.1:5500/notes-app')
   })
@@ -11,18 +12,18 @@ describe('Project: Notes-App', () => {
     cy.get('body').should('be.visible')
   })
 
-  context('Background-color', () => {
-
-    it('Background color is visible', () => {
-      cy.get('body').should('be.visible')
-    })
+  context('Body', () => {
 
-    it('Background color is correct', () => {
-      cy.get('body').should('have.css', 'background-color', 'rgb(123, 218, 243)')
+    context('Background-color', () => {
+      it('Background color is visible', () => {
+        cy.get('body').should('be.visible')
+      })
+  
+      it('Background color is correct', () => {
+        cy.get('body').should('have.css', 'background-color', 'rgb(123, 218, 243)')
+      })
     })
-  })
-
-  context('Body', () => {
+  
     context('Add Note Button', () => {
       it('The button is visible', () => {
         cy.get('body').get('.add').should('be.visible')
@@ -85,8 +86,9 @@ describe('Project: Notes-App', () => {
               cy.get('.edit').should('be.visible').click()
             })
 
-            it('The button when clicked saves the text and does not allow me to edit it and when clicked again allows me to edit the text', () => {
+            it('The toggle button to edit and save the text', () => {
               cy.get('.note').should('be.visible').type('Hello world, how are you?')
+
               cy.get('.edit').should('be.visible').click()
               cy.get('.note textarea').should('not.be.visible')