diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index b34cfcfc3..335da9aaf 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,13 +1,13 @@ -# These are supported funding model platforms - -github: CodeYourFuture -patreon: # Replace with a single Patreon username -open_collective: # Replace with a single Open Collective username -ko_fi: # Replace with a single Ko-fi username -tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel -community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry -liberapay: # Replace with a single Liberapay username -issuehunt: # Replace with a single IssueHunt username -otechie: # Replace with a single Otechie username -lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry -custom: https://codeyourfuture.io/donate +# These are supported funding model platforms + +github: CodeYourFuture +patreon: # Replace with a single Patreon username +open_collective: # Replace with a single Open Collective username +ko_fi: # Replace with a single Ko-fi username +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +otechie: # Replace with a single Otechie username +lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry +custom: https://codeyourfuture.io/donate diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 5fe8ffd09..3e43fc213 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,14 +1,14 @@ -blank_issues_enabled: false -contact_links: - - name: CYF - url: contact@codeyourfuture.io - about: Please report serious issues here. - - name: Join CYF - url: https://codeyourfuture.io/volunteers/ - about: Join CYF here - - name: CYF Slack - url: codeyourfuture.slack.com - about: Come to #cyf-syllabus-tech and chat - - name: CYF Tech Ed - url: https://github.com/orgs/CodeYourFuture/teams/mentors - about: CYF mentors on Github +blank_issues_enabled: false +contact_links: + - name: CYF + url: contact@codeyourfuture.io + about: Please report serious issues here. + - name: Join CYF + url: https://codeyourfuture.io/volunteers/ + about: Join CYF here + - name: CYF Slack + url: codeyourfuture.slack.com + about: Come to #cyf-syllabus-tech and chat + - name: CYF Tech Ed + url: https://github.com/orgs/CodeYourFuture/teams/mentors + about: CYF mentors on Github diff --git a/.github/ISSUE_TEMPLATE/pd-assignment.yml b/.github/ISSUE_TEMPLATE/pd-assignment.yml index c8bd22980..3c739f74d 100644 --- a/.github/ISSUE_TEMPLATE/pd-assignment.yml +++ b/.github/ISSUE_TEMPLATE/pd-assignment.yml @@ -1,59 +1,59 @@ -name: PD Coursework -description: Assign a piece of PD coursework -title: "[PD]
`
- );
-
- const secondLi = page.window.document.querySelector(
- "#reading-list > :nth-child(2)"
- );
- expect(secondLi).toContainHTML(
- `
`
- );
-
- const thirdLi = page.window.document.querySelector(
- "#reading-list > :nth-child(3)"
- );
- expect(thirdLi).toContainHTML(
- `
`
- );
- });
- test("background color changes depending on whether book has been read", () => {
- const firstLi = page.window.document.querySelector(
- "#reading-list > :first-child"
- );
- expect(firstLi).toHaveStyle({ backgroundColor: "red" });
-
- const secondLi = page.window.document.querySelector(
- "#reading-list > :nth-child(2)"
- );
- expect(secondLi).toHaveStyle({ backgroundColor: "green" });
-
- const thirdLi = page.window.document.querySelector(
- "#reading-list > :nth-child(3)"
- );
- expect(thirdLi).toHaveStyle({ backgroundColor: "green" });
- });
-});
+const path = require("path");
+const { JSDOM } = require("jsdom");
+const { default: userEvent } = require("@testing-library/user-event");
+
+let page = null;
+
+beforeEach(async () => {
+ page = await JSDOM.fromFile(path.join(__dirname, "index.html"), {
+ resources: "usable",
+ runScripts: "dangerously",
+ });
+
+ // do this so students can use element.innerText which jsdom does not implement
+ Object.defineProperty(page.window.HTMLElement.prototype, "innerText", {
+ get() {
+ return this.textContent;
+ },
+ set(value) {
+ this.textContent = value;
+ },
+ });
+
+ return new Promise((res) => {
+ page.window.document.addEventListener("load", res);
+ });
+});
+
+afterEach(() => {
+ page = null;
+});
+
+describe("Reading list", () => {
+ test("renders a list of books with author and title", () => {
+ const readingList = page.window.document.querySelector("#reading-list");
+
+ expect(readingList).toHaveTextContent("The Design of Everyday Things");
+ expect(readingList).toHaveTextContent("Don Norman");
+
+ expect(readingList).toHaveTextContent("The Most Human Human");
+ expect(readingList).toHaveTextContent("Brian Christian");
+
+ expect(readingList).toHaveTextContent("The Pragmatic Programmer");
+ expect(readingList).toHaveTextContent("Andrew Hunt");
+ });
+ test("each book in the list has an image", () => {
+ const firstLi = page.window.document.querySelector(
+ "#reading-list > :first-child"
+ );
+ expect(firstLi).toContainHTML(
+ `
`
+ );
+
+ const secondLi = page.window.document.querySelector(
+ "#reading-list > :nth-child(2)"
+ );
+ expect(secondLi).toContainHTML(
+ `
`
+ );
+
+ const thirdLi = page.window.document.querySelector(
+ "#reading-list > :nth-child(3)"
+ );
+ expect(thirdLi).toContainHTML(
+ `
`
+ );
+ });
+ test("background color changes depending on whether book has been read", () => {
+ const firstLi = page.window.document.querySelector(
+ "#reading-list > :first-child"
+ );
+ expect(firstLi).toHaveStyle({ backgroundColor: "red" });
+
+ const secondLi = page.window.document.querySelector(
+ "#reading-list > :nth-child(2)"
+ );
+ expect(secondLi).toHaveStyle({ backgroundColor: "green" });
+
+ const thirdLi = page.window.document.querySelector(
+ "#reading-list > :nth-child(3)"
+ );
+ expect(thirdLi).toHaveStyle({ backgroundColor: "green" });
+ });
+});
diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css
index 74406e64f..8e6f8d63b 100644
--- a/Sprint-3/reading-list/style.css
+++ b/Sprint-3/reading-list/style.css
@@ -1,9 +1,172 @@
+<<<<<<< Updated upstream
+/**
+ * Base styles to use at the start of the class
+ *
+ * Module: HTML/CSS
+ * Lesson: 1,2
+ * Class: Scotland 2017
+ */
+
+html,
+body {
+ font-family: "Source Sans Pro", -apple-system, system-ui, BlinkMacSystemFont,
+ "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.site-footer {
+ margin-top: 4em;
+}
+
+.site-footer p {
+ border-top: 1px solid #dccdc6;
+ padding-top: 2em;
+ padding-bottom: 2em;
+}
+
+.navbar-brand > img {
+ max-height: 40px;
+ width: auto;
+}
+
+.navbar-light .navbar-nav .nav-link {
+ color: #292b2c;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+/* Buttons */
+.btn {
+ border-radius: 0.15em;
+}
+
+/* Alert */
+.alert {
+ position: relative;
+ margin-top: 2em;
+ margin-bottom: 3em;
+ padding-top: 1.5em;
+ padding-bottom: 1.5em;
+ border: 1px solid #dccdc6;
+ border-radius: 0;
+ font-size: 0.85rem;
+ line-height: 1.3em;
+ background: transparent;
+ color: #292b2c;
+}
+
+.alert:before {
+ content: "";
+ position: absolute;
+ left: -1px;
+ top: 0;
+ height: 100%;
+ width: 1px;
+ background: #ce5f31;
+}
+
+/* Jumbotron */
+.jumbotron {
+ border-radius: 0;
+}
+
+/* Headings */
+.heading-underline {
+ position: relative;
+ margin-bottom: 2em;
+ padding-bottom: 0.5em;
+ border-bottom: 1px solid #dccdc6;
+ font-size: 1rem;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+.heading-underline:before {
+ content: "";
+ position: absolute;
+ bottom: -1px;
+ left: 0;
+ width: 25%;
+ height: 1px;
+ max-width: 100px;
+ background: #ce5f31;
+}
+
+/* Article */
+.article {
+ margin-bottom: 2em;
+}
+
+.article-title {
+ margin-bottom: 0.5em;
+ font-weight: 700;
+}
+
+.article-read-more a {
+ font-size: 0.85em;
+ font-weight: 700;
+ text-decoration: uppercase;
+}
+
+.article-read-more a:hover,
+.article-read-more a:focus {
+ text-decoration: none;
+}
+
+.article-read-more .fa {
+ margin-right: 0.5em;
+ color: #ce5f31;
+}
+
+.article-read-more:last-child {
+ margin-bottom: 0;
+}
+
+.red {
+ background-color: red;
+}
+
+.addArticle {
+ margin-bottom: 10px;
+}
+
+#addArticleBtn {
+ margin-left: 20px;
+ height: 37px;
+}
+
+.colorButton {
+ margin-bottom: 20px;
+ margin-right: 20px;
+ width: 100px;
+ height: 50px;
+}
+
+#blueBtn {
+ background: #588fbd;
+}
+
+#orangeBtn {
+ background: #f0ad4e;
+}
+
+#greenBtn {
+ background: #87ca8a;
+}
+
+@media screen and (min-width: 992px) {
+ .navbar-brand > img {
+ max-height: 80px;
+ }
+}
+=======
/**
* Base styles to use at the start of the class
*
* Module: HTML/CSS
* Lesson: 1,2
* Class: Scotland 2017
+
+ i just left this css as is.
*/
html,
@@ -157,3 +320,4 @@ body {
max-height: 80px;
}
}
+>>>>>>> Stashed changes
diff --git a/Sprint-3/slideshow-extra/readme.md b/Sprint-3/slideshow-extra/readme.md
index 9a667a69e..989b48105 100644
--- a/Sprint-3/slideshow-extra/readme.md
+++ b/Sprint-3/slideshow-extra/readme.md
@@ -1,9 +1,9 @@
-# Extra Task for Slideshow
-
-## Optional: Add UI for delay time
-
-Add UI so that the user can specify how long to wait between images.
-
-## Advanced Challenge: Make it look good
-
-Now is a good time to make it look good with CSS, colour, typography, images, and creativity. Maybe you could ask someone to collaborate with you on those aspects.
+# Extra Task for Slideshow
+
+## Optional: Add UI for delay time
+
+Add UI so that the user can specify how long to wait between images.
+
+## Advanced Challenge: Make it look good
+
+Now is a good time to make it look good with CSS, colour, typography, images, and creativity. Maybe you could ask someone to collaborate with you on those aspects.
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
index 50f2eb1c0..ef20dd8d6 100644
--- a/Sprint-3/slideshow/index.html
+++ b/Sprint-3/slideshow/index.html
@@ -1,14 +1,14 @@
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/Sprint-3/slideshow/jest.setup.js b/Sprint-3/slideshow/jest.setup.js
index 9e785813a..2223e65df 100644
--- a/Sprint-3/slideshow/jest.setup.js
+++ b/Sprint-3/slideshow/jest.setup.js
@@ -1 +1 @@
-require("@testing-library/jest-dom");
+require("@testing-library/jest-dom");
diff --git a/Sprint-3/slideshow/package.json b/Sprint-3/slideshow/package.json
index 6928d825f..a02dc1c08 100644
--- a/Sprint-3/slideshow/package.json
+++ b/Sprint-3/slideshow/package.json
@@ -1,29 +1,29 @@
-{
- "name": "slideshow",
- "version": "1.0.0",
- "license": "CC-BY-SA-4.0",
- "description": "You must update this package",
- "scripts": {
- "test": "jest"
- },
- "repository": {
- "type": "git",
- "url": "git+https://github.com/CodeYourFuture/CYF-Coursework-Template.git"
- },
- "bugs": {
- "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues"
- },
- "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
- "devDependencies": {
- "@testing-library/dom": "^8.19.0",
- "@testing-library/jest-dom": "^5.16.5",
- "@testing-library/user-event": "^13.5.0",
- "jest": "^29.2.2",
- "jest-environment-jsdom": "^29.2.2"
- },
- "jest": {
- "setupFilesAfterEnv": [
- "./jest.setup.js"
- ]
- }
-}
+{
+ "name": "slideshow",
+ "version": "1.0.0",
+ "license": "CC-BY-SA-4.0",
+ "description": "You must update this package",
+ "scripts": {
+ "test": "jest"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/CodeYourFuture/CYF-Coursework-Template.git"
+ },
+ "bugs": {
+ "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues"
+ },
+ "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
+ "devDependencies": {
+ "@testing-library/dom": "^8.19.0",
+ "@testing-library/jest-dom": "^5.16.5",
+ "@testing-library/user-event": "^13.5.0",
+ "jest": "^29.2.2",
+ "jest-environment-jsdom": "^29.2.2"
+ },
+ "jest": {
+ "setupFilesAfterEnv": [
+ "./jest.setup.js"
+ ]
+ }
+}
diff --git a/Sprint-3/slideshow/readme.md b/Sprint-3/slideshow/readme.md
index a0c06e4ff..38cf3ac9f 100644
--- a/Sprint-3/slideshow/readme.md
+++ b/Sprint-3/slideshow/readme.md
@@ -1,82 +1,82 @@
-# Challenge: "Image Carousel"
-
-First off, once you've branched off `main`, then update the title element in `index.html` to "Image carousel"
-
-## Challenge Overview
-
-Make a website which allows the user to navigate a set of images (first manually, then with an auto-playing slideshow).
-
-[Try this live demo!](https://cyf-image-carousel.netlify.app/)
-
-# Level 1 Challenge
-
-Make forward and back buttons to move _manually_ in that direction through a list of at least 4 images.
-
-(e.g. When the user presses forward once, the display should move ONCE to the next image.)
-
-You can use any images.
-
-You can store the images within your app or you can use links to images hosted elsewhere ("hotlinking").
-
-[Unsplash](https://unsplash.com/) is a good source of images for this challenge.
-
-Level 1 challenge screenshot example.
-
-
-
-# Level 2 Challenge
-
-Make auto-forward and auto-back buttons to _automatically_ move in that direction through the list of images.
-
-Here's a screenshot example from a completed level 2 challenge.
-
-
-
-## Try to finish the rest by yourself
-
-If you want a harder challenge, don't read the rest of this document but instead try to build the app by yourself.
-
-If you want hints, then you will find some below.
-
-## Suggested approach
-
-Here's one approach you might take to building this app.
-
-### Task: Design your layout _on paper_
-
-Design your layout on paper. Keep it very simple - this is a JavaScript challenge, not a CSS challenge.
-
-Use a layout that will be ok on a phone (but _don't_ spend time on responsive design).
-
-Keep this drawing around for reference later.
-
-### Task: Convert your layout to HTML
-
-Convert the drawing to HTML (on codepen or elsewhere) and check the buttons appear correctly.
-
-_DON'T_ add any CSS or extra markup to make it look good just now. That will only make it more difficult for you to think about your app during development.
-
-#### Task: Make the buttons work
-
-Make your buttons work to navigate forwards and backwards, manually.
-
-### Task: more buttons - automated slideshow
-
-Add the following buttons:
-
-- auto-forward
-- stop
-- auto-backwards
-
-These should allow automatic navigation through the images, say every 5 seconds.
-
-### End of basic challenge!
-
-Congratulations, you've finished the basics!
-
-- Make sure you can access it and play with it on a smartphone!
-- Celebrate!
-
-## Further work
-
-See the `extra` folder of homework for further ideas for your Slideshow.
+# Challenge: "Image Carousel"
+
+First off, once you've branched off `main`, then update the title element in `index.html` to "Image carousel"
+
+## Challenge Overview
+
+Make a website which allows the user to navigate a set of images (first manually, then with an auto-playing slideshow).
+
+[Try this live demo!](https://cyf-image-carousel.netlify.app/)
+
+# Level 1 Challenge
+
+Make forward and back buttons to move _manually_ in that direction through a list of at least 4 images.
+
+(e.g. When the user presses forward once, the display should move ONCE to the next image.)
+
+You can use any images.
+
+You can store the images within your app or you can use links to images hosted elsewhere ("hotlinking").
+
+[Unsplash](https://unsplash.com/) is a good source of images for this challenge.
+
+Level 1 challenge screenshot example.
+
+
+
+# Level 2 Challenge
+
+Make auto-forward and auto-back buttons to _automatically_ move in that direction through the list of images.
+
+Here's a screenshot example from a completed level 2 challenge.
+
+
+
+## Try to finish the rest by yourself
+
+If you want a harder challenge, don't read the rest of this document but instead try to build the app by yourself.
+
+If you want hints, then you will find some below.
+
+## Suggested approach
+
+Here's one approach you might take to building this app.
+
+### Task: Design your layout _on paper_
+
+Design your layout on paper. Keep it very simple - this is a JavaScript challenge, not a CSS challenge.
+
+Use a layout that will be ok on a phone (but _don't_ spend time on responsive design).
+
+Keep this drawing around for reference later.
+
+### Task: Convert your layout to HTML
+
+Convert the drawing to HTML (on codepen or elsewhere) and check the buttons appear correctly.
+
+_DON'T_ add any CSS or extra markup to make it look good just now. That will only make it more difficult for you to think about your app during development.
+
+#### Task: Make the buttons work
+
+Make your buttons work to navigate forwards and backwards, manually.
+
+### Task: more buttons - automated slideshow
+
+Add the following buttons:
+
+- auto-forward
+- stop
+- auto-backwards
+
+These should allow automatic navigation through the images, say every 5 seconds.
+
+### End of basic challenge!
+
+Congratulations, you've finished the basics!
+
+- Make sure you can access it and play with it on a smartphone!
+- Celebrate!
+
+## Further work
+
+See the `extra` folder of homework for further ideas for your Slideshow.
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
index 063ceefb5..aa2b14f0f 100644
--- a/Sprint-3/slideshow/slideshow.js
+++ b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,8 @@
-const images = [
- "./assets/cute-cat-a.png",
- "./assets/cute-cat-b.jpg",
- "./assets/cute-cat-c.jpg",
-];
-
-
+const images = [
+ "./assets/cute-cat-a.png",
+ "./assets/cute-cat-b.jpg",
+ "./assets/cute-cat-c.jpg",
+];
+
+
// Write your code here
\ No newline at end of file
diff --git a/Sprint-3/slideshow/slideshow.test.js b/Sprint-3/slideshow/slideshow.test.js
index 34f802a3e..19cc2b041 100644
--- a/Sprint-3/slideshow/slideshow.test.js
+++ b/Sprint-3/slideshow/slideshow.test.js
@@ -1,227 +1,227 @@
-/* ======= TESTS - DO NOT MODIFY =====
-There are some Tests in this file that will help you work out if your code is working.
-*/
-
-const path = require("path");
-const { JSDOM } = require("jsdom");
-const { default: userEvent } = require("@testing-library/user-event");
-
-let page = null;
-
-beforeEach(async () => {
- page = await JSDOM.fromFile(path.join(__dirname, "index.html"), {
- resources: "usable",
- runScripts: "dangerously",
- });
-
- // do this so students can use element.innerText which jsdom does not implement
- Object.defineProperty(page.window.HTMLElement.prototype, "innerText", {
- get() {
- return this.textContent;
- },
- set(value) {
- this.textContent = value;
- },
- });
-
- return new Promise((res) => {
- page.window.document.addEventListener("load", res);
- });
-});
-
-afterEach(() => {
- page = null;
-});
-
-describe("Level 1 challenge", () => {
- test("renders the first image with control buttons", () => {
- const images = [
- "./assets/cute-cat-a.png",
- "./assets/cute-cat-b.jpg",
- "./assets/cute-cat-c.jpg",
- ];
- const image = page.window.document.querySelector("#carousel-img");
- const forwardBtn = page.window.document.querySelector("#forward-btn");
- const backwardBtn = page.window.document.querySelector("#backward-btn");
-
- expect(image).toHaveAttribute("src", images[0]);
- expect(forwardBtn).toBeInTheDocument();
- expect(backwardBtn).toBeInTheDocument();
- });
- test("can move the image forwards once", () => {
- const images = [
- "./assets/cute-cat-a.png",
- "./assets/cute-cat-b.jpg",
- "./assets/cute-cat-c.jpg",
- ];
- const image = page.window.document.querySelector("#carousel-img");
- const forwardBtn = page.window.document.querySelector("#forward-btn");
-
- expect(image).toHaveAttribute("src", images[0]);
-
- userEvent.click(forwardBtn);
-
- expect(image).toHaveAttribute("src", images[1]);
- });
-
- test("can move the image forwards multiple times", () => {
- const images = [
- "./assets/cute-cat-a.png",
- "./assets/cute-cat-b.jpg",
- "./assets/cute-cat-c.jpg",
- ];
- const image = page.window.document.querySelector("#carousel-img");
- const forwardBtn = page.window.document.querySelector("#forward-btn");
-
- userEvent.click(forwardBtn);
- userEvent.click(forwardBtn);
-
- expect(image).toHaveAttribute("src", images[2]);
- });
-
- test("can move the image backwards to the end", () => {
- const images = [
- "./assets/cute-cat-a.png",
- "./assets/cute-cat-b.jpg",
- "./assets/cute-cat-c.jpg",
- ];
- const image = page.window.document.querySelector("#carousel-img");
- const backwardBtn = page.window.document.querySelector("#backward-btn");
-
- expect(image).toHaveAttribute("src", images[0]);
-
- userEvent.click(backwardBtn);
-
- expect(image).toHaveAttribute("src", images[2]);
- });
-
- test("can move the image backwards multiple times", () => {
- const images = [
- "./assets/cute-cat-a.png",
- "./assets/cute-cat-b.jpg",
- "./assets/cute-cat-c.jpg",
- ];
- const image = page.window.document.querySelector("#carousel-img");
- const backwardBtn = page.window.document.querySelector("#backward-btn");
- expect(image).toHaveAttribute("src", images[0]);
-
- userEvent.click(backwardBtn);
- userEvent.click(backwardBtn);
-
- expect(image).toHaveAttribute("src", images[1]);
- });
-
- test("moving forwards will eventually wrap around to the start", () => {
- const images = [
- "./assets/cute-cat-a.png",
- "./assets/cute-cat-b.jpg",
- "./assets/cute-cat-c.jpg",
- ];
- const image = page.window.document.querySelector("#carousel-img");
- const forwardBtn = page.window.document.querySelector("#forward-btn");
-
- expect(image).toHaveAttribute("src", images[0]);
-
- userEvent.click(forwardBtn);
- userEvent.click(forwardBtn);
- userEvent.click(forwardBtn);
-
- expect(image).toHaveAttribute("src", images[0]);
- });
-});
-
-describe("Level 2 challenge", () => {
- beforeEach(() => {
- jest.useFakeTimers();
- });
- afterEach(() => {
- jest.useRealTimers();
- });
- test("can start moving images forward automatically", () => {
- const images = [
- "./assets/cute-cat-a.png",
- "./assets/cute-cat-b.jpg",
- "./assets/cute-cat-c.jpg",
- ];
- const image = page.window.document.querySelector("#carousel-img");
- const autoForwardBtn = page.window.document.querySelector("#auto-forward");
- const autoBackBtn = page.window.document.querySelector("#auto-backward");
- const interval = 2000;
-
- expect(image).toHaveAttribute("src", images[0]);
-
- userEvent.click(autoForwardBtn);
-
- expect(autoForwardBtn).toBeDisabled();
- expect(autoBackBtn).toBeDisabled();
-
- jest.advanceTimersByTime(interval);
- expect(image).toHaveAttribute("src", images[1]);
-
- jest.advanceTimersByTime(interval);
- expect(image).toHaveAttribute("src", images[2]);
-
- jest.advanceTimersByTime(interval);
- expect(image).toHaveAttribute("src", images[0]);
- });
- test("can start moving images backward automatically", () => {
- const images = [
- "./assets/cute-cat-a.png",
- "./assets/cute-cat-b.jpg",
- "./assets/cute-cat-c.jpg",
- ];
- const image = page.window.document.querySelector("#carousel-img");
- const autoForwardBtn = page.window.document.querySelector("#auto-forward");
- const autoBackBtn = page.window.document.querySelector("#auto-backward");
- const interval = 2000;
-
- expect(image).toHaveAttribute("src", images[0]);
-
- userEvent.click(autoBackBtn);
-
- expect(autoForwardBtn).toBeDisabled();
- expect(autoBackBtn).toBeDisabled();
-
- jest.advanceTimersByTime(interval);
- expect(image).toHaveAttribute("src", images[2]);
-
- jest.advanceTimersByTime(interval);
- expect(image).toHaveAttribute("src", images[1]);
-
- jest.advanceTimersByTime(interval);
- expect(image).toHaveAttribute("src", images[0]);
- });
- test("can stop the automatic timer", () => {
- const images = [
- "./assets/cute-cat-a.png",
- "./assets/cute-cat-b.jpg",
- "./assets/cute-cat-c.jpg",
- ];
- const image = page.window.document.querySelector("#carousel-img");
- const autoForwardBtn = page.window.document.querySelector("#auto-forward");
- const autoBackBtn = page.window.document.querySelector("#auto-backward");
- const stopBtn = page.window.document.querySelector("#stop");
- const interval = 2000;
-
- expect(image).toHaveAttribute("src", images[0]);
-
- userEvent.click(autoForwardBtn);
-
- expect(autoForwardBtn).toBeDisabled();
- expect(autoBackBtn).toBeDisabled();
-
- jest.advanceTimersByTime(interval);
- expect(image).toHaveAttribute("src", images[1]);
-
- jest.advanceTimersByTime(interval);
- expect(image).toHaveAttribute("src", images[2]);
-
- userEvent.click(stopBtn);
-
- expect(autoForwardBtn).toBeEnabled();
- expect(autoBackBtn).toBeEnabled();
-
- jest.runOnlyPendingTimers();
- expect(image).toHaveAttribute("src", images[2]);
- });
-});
+/* ======= TESTS - DO NOT MODIFY =====
+There are some Tests in this file that will help you work out if your code is working.
+*/
+
+const path = require("path");
+const { JSDOM } = require("jsdom");
+const { default: userEvent } = require("@testing-library/user-event");
+
+let page = null;
+
+beforeEach(async () => {
+ page = await JSDOM.fromFile(path.join(__dirname, "index.html"), {
+ resources: "usable",
+ runScripts: "dangerously",
+ });
+
+ // do this so students can use element.innerText which jsdom does not implement
+ Object.defineProperty(page.window.HTMLElement.prototype, "innerText", {
+ get() {
+ return this.textContent;
+ },
+ set(value) {
+ this.textContent = value;
+ },
+ });
+
+ return new Promise((res) => {
+ page.window.document.addEventListener("load", res);
+ });
+});
+
+afterEach(() => {
+ page = null;
+});
+
+describe("Level 1 challenge", () => {
+ test("renders the first image with control buttons", () => {
+ const images = [
+ "./assets/cute-cat-a.png",
+ "./assets/cute-cat-b.jpg",
+ "./assets/cute-cat-c.jpg",
+ ];
+ const image = page.window.document.querySelector("#carousel-img");
+ const forwardBtn = page.window.document.querySelector("#forward-btn");
+ const backwardBtn = page.window.document.querySelector("#backward-btn");
+
+ expect(image).toHaveAttribute("src", images[0]);
+ expect(forwardBtn).toBeInTheDocument();
+ expect(backwardBtn).toBeInTheDocument();
+ });
+ test("can move the image forwards once", () => {
+ const images = [
+ "./assets/cute-cat-a.png",
+ "./assets/cute-cat-b.jpg",
+ "./assets/cute-cat-c.jpg",
+ ];
+ const image = page.window.document.querySelector("#carousel-img");
+ const forwardBtn = page.window.document.querySelector("#forward-btn");
+
+ expect(image).toHaveAttribute("src", images[0]);
+
+ userEvent.click(forwardBtn);
+
+ expect(image).toHaveAttribute("src", images[1]);
+ });
+
+ test("can move the image forwards multiple times", () => {
+ const images = [
+ "./assets/cute-cat-a.png",
+ "./assets/cute-cat-b.jpg",
+ "./assets/cute-cat-c.jpg",
+ ];
+ const image = page.window.document.querySelector("#carousel-img");
+ const forwardBtn = page.window.document.querySelector("#forward-btn");
+
+ userEvent.click(forwardBtn);
+ userEvent.click(forwardBtn);
+
+ expect(image).toHaveAttribute("src", images[2]);
+ });
+
+ test("can move the image backwards to the end", () => {
+ const images = [
+ "./assets/cute-cat-a.png",
+ "./assets/cute-cat-b.jpg",
+ "./assets/cute-cat-c.jpg",
+ ];
+ const image = page.window.document.querySelector("#carousel-img");
+ const backwardBtn = page.window.document.querySelector("#backward-btn");
+
+ expect(image).toHaveAttribute("src", images[0]);
+
+ userEvent.click(backwardBtn);
+
+ expect(image).toHaveAttribute("src", images[2]);
+ });
+
+ test("can move the image backwards multiple times", () => {
+ const images = [
+ "./assets/cute-cat-a.png",
+ "./assets/cute-cat-b.jpg",
+ "./assets/cute-cat-c.jpg",
+ ];
+ const image = page.window.document.querySelector("#carousel-img");
+ const backwardBtn = page.window.document.querySelector("#backward-btn");
+ expect(image).toHaveAttribute("src", images[0]);
+
+ userEvent.click(backwardBtn);
+ userEvent.click(backwardBtn);
+
+ expect(image).toHaveAttribute("src", images[1]);
+ });
+
+ test("moving forwards will eventually wrap around to the start", () => {
+ const images = [
+ "./assets/cute-cat-a.png",
+ "./assets/cute-cat-b.jpg",
+ "./assets/cute-cat-c.jpg",
+ ];
+ const image = page.window.document.querySelector("#carousel-img");
+ const forwardBtn = page.window.document.querySelector("#forward-btn");
+
+ expect(image).toHaveAttribute("src", images[0]);
+
+ userEvent.click(forwardBtn);
+ userEvent.click(forwardBtn);
+ userEvent.click(forwardBtn);
+
+ expect(image).toHaveAttribute("src", images[0]);
+ });
+});
+
+describe("Level 2 challenge", () => {
+ beforeEach(() => {
+ jest.useFakeTimers();
+ });
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+ test("can start moving images forward automatically", () => {
+ const images = [
+ "./assets/cute-cat-a.png",
+ "./assets/cute-cat-b.jpg",
+ "./assets/cute-cat-c.jpg",
+ ];
+ const image = page.window.document.querySelector("#carousel-img");
+ const autoForwardBtn = page.window.document.querySelector("#auto-forward");
+ const autoBackBtn = page.window.document.querySelector("#auto-backward");
+ const interval = 2000;
+
+ expect(image).toHaveAttribute("src", images[0]);
+
+ userEvent.click(autoForwardBtn);
+
+ expect(autoForwardBtn).toBeDisabled();
+ expect(autoBackBtn).toBeDisabled();
+
+ jest.advanceTimersByTime(interval);
+ expect(image).toHaveAttribute("src", images[1]);
+
+ jest.advanceTimersByTime(interval);
+ expect(image).toHaveAttribute("src", images[2]);
+
+ jest.advanceTimersByTime(interval);
+ expect(image).toHaveAttribute("src", images[0]);
+ });
+ test("can start moving images backward automatically", () => {
+ const images = [
+ "./assets/cute-cat-a.png",
+ "./assets/cute-cat-b.jpg",
+ "./assets/cute-cat-c.jpg",
+ ];
+ const image = page.window.document.querySelector("#carousel-img");
+ const autoForwardBtn = page.window.document.querySelector("#auto-forward");
+ const autoBackBtn = page.window.document.querySelector("#auto-backward");
+ const interval = 2000;
+
+ expect(image).toHaveAttribute("src", images[0]);
+
+ userEvent.click(autoBackBtn);
+
+ expect(autoForwardBtn).toBeDisabled();
+ expect(autoBackBtn).toBeDisabled();
+
+ jest.advanceTimersByTime(interval);
+ expect(image).toHaveAttribute("src", images[2]);
+
+ jest.advanceTimersByTime(interval);
+ expect(image).toHaveAttribute("src", images[1]);
+
+ jest.advanceTimersByTime(interval);
+ expect(image).toHaveAttribute("src", images[0]);
+ });
+ test("can stop the automatic timer", () => {
+ const images = [
+ "./assets/cute-cat-a.png",
+ "./assets/cute-cat-b.jpg",
+ "./assets/cute-cat-c.jpg",
+ ];
+ const image = page.window.document.querySelector("#carousel-img");
+ const autoForwardBtn = page.window.document.querySelector("#auto-forward");
+ const autoBackBtn = page.window.document.querySelector("#auto-backward");
+ const stopBtn = page.window.document.querySelector("#stop");
+ const interval = 2000;
+
+ expect(image).toHaveAttribute("src", images[0]);
+
+ userEvent.click(autoForwardBtn);
+
+ expect(autoForwardBtn).toBeDisabled();
+ expect(autoBackBtn).toBeDisabled();
+
+ jest.advanceTimersByTime(interval);
+ expect(image).toHaveAttribute("src", images[1]);
+
+ jest.advanceTimersByTime(interval);
+ expect(image).toHaveAttribute("src", images[2]);
+
+ userEvent.click(stopBtn);
+
+ expect(autoForwardBtn).toBeEnabled();
+ expect(autoBackBtn).toBeEnabled();
+
+ jest.runOnlyPendingTimers();
+ expect(image).toHaveAttribute("src", images[2]);
+ });
+});
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
index 63cedf2d2..36fd81a54 100644
--- a/Sprint-3/slideshow/style.css
+++ b/Sprint-3/slideshow/style.css
@@ -1 +1 @@
-/** Write your CSS in here **/
+/** Write your CSS in here **/
diff --git a/Sprint-3/todo-list/README.md b/Sprint-3/todo-list/README.md
index 7c6a25c41..c716964e6 100644
--- a/Sprint-3/todo-list/README.md
+++ b/Sprint-3/todo-list/README.md
@@ -1,66 +1,66 @@
-# Todo-list
-
-## Explanation
-
-This is a super handy, super simple to do list.
-
-You will be given a list of tasks which are "To Do". We call these tasks "ToDos"
-
-Each item in the list should have 2 buttons:
-
-- One to click when the ToDo has been completed - it will apply a line-through style to the text of the ToDo.
-- A second to delete the ToDo. This could be used to delete completed ToDos from the list, or remove ToDos that we are no longer interested in doing.
-
-We also want to be able to add ToDos to the list using an input field and a button. When ToDos are created this way they should be added to the list with the 2 above buttons.
-
-More details for the implementation of this challenge can be found in `script.js`
-
-## Installation
-
-To view the website, open index.html in a browser.
-
-## Example Solution
-
-A basic example of this can website can be found here
-
-https://chrisowen101.github.io/ToDoListSolution/
-
-This covers only the basic tasks, not the advanced tasks.
-
-## Instructions
-
-The `populateTodoList()` function should iterate over the list of todos that we are given at the start, it should create a `