diff --git a/book/src/06_styling/devwatch.md b/book/src/06_styling/devwatch.md
index e4959e7..0db0f61 100644
--- a/book/src/06_styling/devwatch.md
+++ b/book/src/06_styling/devwatch.md
@@ -24,6 +24,16 @@ Inside the video controller define sections for the episode controllers
For fill each section with a different background colour. We're looking to see if the layout is correct and will work on a variety of desktop screen sizes. To test this try resizing your browser window.
+
+ Click for Relevant Tailwind Documentation
+
At this stage your webpage should look similar to the image below.
@@ -31,6 +41,7 @@ At this stage your webpage should look similar to the image below.
If you are so inclined you could also make the layout work for mobile by making the info panel (pink) either disappear on smaller screens or move below the video player. [Breakpoints](https://tailwindcss.com/docs/responsive-design) will be helpful.
+
# Part B - Complete the Info Panel
Kevin already finished most of the **info panel**. His work can be found in **components/SeriesInfo.jsx**.
@@ -41,14 +52,9 @@ Your task is to insert the SeriesInfo component into the main page and finish th
- The description should be limited to 200 characters until the user presses +show more. Will revert back when -show less is pressed. The show text should be placed after the description.
- Score card (optional), see design in the original website
-
- Click for Title, Description and Score
-
- Title: Legend of the Galactic Heroes
- Score: 9.8
- Description: For over a century and a half, two interstellar states have wrested for control of the Milky Way. The Galactic Empire, an absolute monarchy ruled by Kaiser Friedrich IV and an entrenched nobility, seeks to suppress the rebels daring to oppose the inviolable crown. The Free Planets Alliance, a representative democracy led by a corrupt High Council, degenerates as its elected leaders use war and conflict as a way to win popular support. But this long-standing stalemate between the Empire and the Alliance ends with the rise of two opposing military geniuses. Reinhard von Lohengramm, a minor noble and High Admiral of the Empire through his strategic brilliance and his sister's position as the favored concubine of the Kaiser, dreams of conquering the galaxy and uniting mankind under his iron fist. Meanwhile, Yang Wen-li of the Alliance, an avid historian and reluctant commodore hailed as the Hero of El Facil, uses his tactical prowess to navigate around his leaders' incompetence—and to carve the path to lasting peace. As the war rages on, Reinhard and Yang each strive for their ideals and to secure their place among the stars as the leaders of a new era of galactic heroes. [Written by MAL Rewrite]
-
+For hints refer to the tailwind documenation especially the ones in the dropdown above.
+Your page should look simialr to the image below.
@@ -64,7 +70,7 @@ Your task is to complete the following UI components
- Number all episodes
- Alternate colours between episodes
- When an episode is clicked on the left it will change the videosrc for the video player.
-- The selected episode will have a marker to indicate it has been selected. Make sure to align this correctly!
+- The selected episode will have a marker to indicate it has been selected. For simplicity make the marker an emoji of your choice. Make sure to align this correctly!
### Streaming Service Controls
- Display all subs and dubs streaming services. These have been hardcoded in VideoController.jsx
diff --git a/exercise-solutions/reputable-anime-site/src/App.jsx b/exercise-solutions/reputable-anime-site/src/App.jsx
index b8390f4..7f282be 100644
--- a/exercise-solutions/reputable-anime-site/src/App.jsx
+++ b/exercise-solutions/reputable-anime-site/src/App.jsx
@@ -6,7 +6,7 @@ import VideoController from './components/VideoPlayer/VideoController'
import VideoPlayer from './components/VideoPlayer/VideoPlayer'
function App() {
- const episodes = [
+ const episodes = [
{
"name": "Episode 1",
"src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
@@ -20,50 +20,55 @@ function App() {
"src": "https://www.youtube.com/embed/cqrIJCJ3AsU?si=JEg8hxU1J9hTOzHk"
},
{
- "name": "Episode 4",
+ "name": "Truth",
"src": "https://www.youtube.com/embed/aXOChLn5ZdQ?si=QnlhULUOzK-UxSF"
}
,
{
- "name": "Episode 5",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "Not a rick roll",
+ "src": "https://www.youtube.com/embed/dQw4w9WgXcQ?si=KaZQb2Lz7M6k_ZbK"
}
,
{
- "name": "Episode 6",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "More Anime",
+ "src": "https://www.youtube.com/embed/OIBODIPC_8Y?si=kjXpi9m6RE0A2brD"
}
,
{
- "name": "Episode 7",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name":"🦀🦀🦀🦀🦀🦀",
+ "src": "https://www.youtube.com/embed/OhJttQZlU1E?si=90ySbFfy1IYoSqmc"
}
,
{
- "name": "Episode 8",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "Good Stuff",
+ "src": "https://www.youtube.com/embed/fzQ6gRAEoy0?si=8Cd0C0-wLT9J1vCb"
}
,
{
- "name": "Episode 9",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "Vampire",
+ "src": "https://www.youtube.com/embed/e1xCOsgWG0M?si=scY7iAPvWILRl-8h"
}
,
{
- "name": "Episode 10",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "Seycara",
+ "src": "https://www.youtube.com/embed/Xh6eAYM3Sfk?si=2ip0Gkag9HsYgGGq"
}
,
{
- "name": "Episode 11",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "Cyberpunk",
+ "src": "https://www.youtube.com/embed/KvMY1uzSC1E?si=-2ojWRN5vmpNkm86"
}
,
{
- "name": "Episode 12",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "Titleless",
+ "src": "https://www.youtube.com/embed/LfephiFN76E?si=vsrD0H7D_DEdo4ph"
}]
+ const seriesInfo = {
+ title: "Legend of the Galactic Heroes",
+ score: 9.8,
+ description: "Description: For over a century and a half, two interstellar states have wrested for control of the Milky Way. The Galactic Empire, an absolute monarchy ruled by Kaiser Friedrich IV and an entrenched nobility, seeks to suppress the rebels daring to oppose the inviolable crown. The Free Planets Alliance, a representative democracy led by a corrupt High Council, degenerates as its elected leaders use war and conflict as a way to win popular support. But this long-standing stalemate between the Empire and the Alliance ends with the rise of two opposing military geniuses. Reinhard von Lohengramm, a minor noble and High Admiral of the Empire through his strategic brilliance and his sister's position as the favored concubine of the Kaiser, dreams of conquering the galaxy and uniting mankind under his iron fist. Meanwhile, Yang Wen-li of the Alliance, an avid historian and reluctant commodore hailed as the Hero of El Facil, uses his tactical prowess to navigate around his leaders' incompetence—and to carve the path to lasting peace. As the war rages on, Reinhard and Yang each strive for their ideals and to secure their place among the stars as the leaders of a new era of galactic heroes. [Written by MAL Rewrite] "
+ }
return (
<>
@@ -77,9 +82,9 @@ function App() {
diff --git a/exercises/reputable-anime-site/README.md b/exercises/reputable-anime-site/README.md
index e4959e7..0db0f61 100644
--- a/exercises/reputable-anime-site/README.md
+++ b/exercises/reputable-anime-site/README.md
@@ -24,6 +24,16 @@ Inside the video controller define sections for the episode controllers
For fill each section with a different background colour. We're looking to see if the layout is correct and will work on a variety of desktop screen sizes. To test this try resizing your browser window.
+
+ Click for Relevant Tailwind Documentation
+
At this stage your webpage should look similar to the image below.
@@ -31,6 +41,7 @@ At this stage your webpage should look similar to the image below.
If you are so inclined you could also make the layout work for mobile by making the info panel (pink) either disappear on smaller screens or move below the video player. [Breakpoints](https://tailwindcss.com/docs/responsive-design) will be helpful.
+
# Part B - Complete the Info Panel
Kevin already finished most of the **info panel**. His work can be found in **components/SeriesInfo.jsx**.
@@ -41,14 +52,9 @@ Your task is to insert the SeriesInfo component into the main page and finish th
- The description should be limited to 200 characters until the user presses +show more. Will revert back when -show less is pressed. The show text should be placed after the description.
- Score card (optional), see design in the original website
-
- Click for Title, Description and Score
-
- Title: Legend of the Galactic Heroes
- Score: 9.8
- Description: For over a century and a half, two interstellar states have wrested for control of the Milky Way. The Galactic Empire, an absolute monarchy ruled by Kaiser Friedrich IV and an entrenched nobility, seeks to suppress the rebels daring to oppose the inviolable crown. The Free Planets Alliance, a representative democracy led by a corrupt High Council, degenerates as its elected leaders use war and conflict as a way to win popular support. But this long-standing stalemate between the Empire and the Alliance ends with the rise of two opposing military geniuses. Reinhard von Lohengramm, a minor noble and High Admiral of the Empire through his strategic brilliance and his sister's position as the favored concubine of the Kaiser, dreams of conquering the galaxy and uniting mankind under his iron fist. Meanwhile, Yang Wen-li of the Alliance, an avid historian and reluctant commodore hailed as the Hero of El Facil, uses his tactical prowess to navigate around his leaders' incompetence—and to carve the path to lasting peace. As the war rages on, Reinhard and Yang each strive for their ideals and to secure their place among the stars as the leaders of a new era of galactic heroes. [Written by MAL Rewrite]
-
+For hints refer to the tailwind documenation especially the ones in the dropdown above.
+Your page should look simialr to the image below.
@@ -64,7 +70,7 @@ Your task is to complete the following UI components
- Number all episodes
- Alternate colours between episodes
- When an episode is clicked on the left it will change the videosrc for the video player.
-- The selected episode will have a marker to indicate it has been selected. Make sure to align this correctly!
+- The selected episode will have a marker to indicate it has been selected. For simplicity make the marker an emoji of your choice. Make sure to align this correctly!
### Streaming Service Controls
- Display all subs and dubs streaming services. These have been hardcoded in VideoController.jsx
diff --git a/exercises/reputable-anime-site/src/App.jsx b/exercises/reputable-anime-site/src/App.jsx
index 69f2031..29a3584 100644
--- a/exercises/reputable-anime-site/src/App.jsx
+++ b/exercises/reputable-anime-site/src/App.jsx
@@ -1,7 +1,8 @@
import VideoController from './components/VideoPlayer/VideoController'
function App() {
- const episodes = [
+ const episodes =
+ [
{
"name": "Episode 1",
"src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
@@ -15,50 +16,54 @@ function App() {
"src": "https://www.youtube.com/embed/cqrIJCJ3AsU?si=JEg8hxU1J9hTOzHk"
},
{
- "name": "Episode 4",
+ "name": "Truth",
"src": "https://www.youtube.com/embed/aXOChLn5ZdQ?si=QnlhULUOzK-UxSF"
}
,
{
- "name": "Episode 5",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "Not a rick roll",
+ "src": "https://www.youtube.com/embed/dQw4w9WgXcQ?si=KaZQb2Lz7M6k_ZbK"
}
,
{
- "name": "Episode 6",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "More Anime",
+ "src": "https://www.youtube.com/embed/OIBODIPC_8Y?si=kjXpi9m6RE0A2brD"
}
,
{
- "name": "Episode 7",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name":"🦀🦀🦀🦀🦀🦀",
+ "src": "https://www.youtube.com/embed/OhJttQZlU1E?si=90ySbFfy1IYoSqmc"
}
,
{
- "name": "Episode 8",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "Good Stuff",
+ "src": "https://www.youtube.com/embed/fzQ6gRAEoy0?si=8Cd0C0-wLT9J1vCb"
}
,
{
- "name": "Episode 9",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "Vampire",
+ "src": "https://www.youtube.com/embed/e1xCOsgWG0M?si=scY7iAPvWILRl-8h"
}
,
{
- "name": "Episode 10",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "Seycara",
+ "src": "https://www.youtube.com/embed/Xh6eAYM3Sfk?si=2ip0Gkag9HsYgGGq"
}
,
{
- "name": "Episode 11",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
+ "name": "Cyberpunk",
+ "src": "https://www.youtube.com/embed/KvMY1uzSC1E?si=-2ojWRN5vmpNkm86"
}
,
{
- "name": "Episode 12",
- "src": "https://www.youtube.com/embed/O5fk80I3orw?si=glzg5a4MmrQzEbzB&start=3"
- }]
-
+ "name": "Titleless",
+ "src": "https://www.youtube.com/embed/LfephiFN76E?si=vsrD0H7D_DEdo4ph"
+ }]
+ const seriesInfo = {
+ title: "Legend of the Galactic Heroes",
+ score: 9.8,
+ description: "Description: For over a century and a half, two interstellar states have wrested for control of the Milky Way. The Galactic Empire, an absolute monarchy ruled by Kaiser Friedrich IV and an entrenched nobility, seeks to suppress the rebels daring to oppose the inviolable crown. The Free Planets Alliance, a representative democracy led by a corrupt High Council, degenerates as its elected leaders use war and conflict as a way to win popular support. But this long-standing stalemate between the Empire and the Alliance ends with the rise of two opposing military geniuses. Reinhard von Lohengramm, a minor noble and High Admiral of the Empire through his strategic brilliance and his sister's position as the favored concubine of the Kaiser, dreams of conquering the galaxy and uniting mankind under his iron fist. Meanwhile, Yang Wen-li of the Alliance, an avid historian and reluctant commodore hailed as the Hero of El Facil, uses his tactical prowess to navigate around his leaders' incompetence—and to carve the path to lasting peace. As the war rages on, Reinhard and Yang each strive for their ideals and to secure their place among the stars as the leaders of a new era of galactic heroes. [Written by MAL Rewrite] "
+ }
return (
<>