React
. 3 page SPA . First page o The title of this page (both tab title and an indicator on the page itself) will display My o Will display your name, the course code and course title, the data you started this o Will contain an initially empty data component (see below) Playground assignment 4 buttons (I recommend a custom button component for this) o Appropriate text will be used for each button When button 1 is pressed, display Surprise in an alert box When button 2 is pressed the empty data component will display in the data component " " " Toes in the ocean, seat in the sand as the title Your name as the author The name of a travel destination that you would like to go to, a description of that locatiorn When button 3 is pressed the empty data component will display in the data component " The name of a poem that you like/found The author of the poem as the author of the component . The text of the poem as the data " The fourth button will clear the data component of all text " This button will use CSS to somehow change the display of the button (freedom of choice) Remember, you need to use className, not class, when setting a class for an object in React Second page o The title of this page (both tab title and an indicator on the page itself) will display Fun Technology o Will contain an initially empty data component (see below) o Will contain 3 interesting technologies (hypothetical or new or old) -A more details option to get more details on the technology When clicked the empty data component will display The Technology of interest as the title The author will be the author of the information that will be displayed in the data section. If it has no author that you can find, enter the name of the webpage the data was retrieved from (e.g. Wikipedia) The data that will be displayed will be a description of the data a personal addition of why you think it is interesting (in italics) o o . Third page The title of this page (both tab title and an indicator on the page itself) will display Personal Library o o Will contain an initially empty data component (see below) o Will contain The titles of 3 books An image of each book When the title of the book is clicked on (or some sort of element to let me know I can get more information), the data component will be populated Title will have the book name The author's name will be the author of the book The data will be a short synopsis of the book (can be personal or grabbed from anywhere on the internet) . All pages will have a navigation component This component will have three buttons to allow navigation to any of the three pages The button that corresponds to the page the user is on will be a light blue, all the others will be a default colour (you can choose a different one, or use the system default) o o I recommend using a custom button component to manage this (different from the one in the first page) " . A Data component will be used. This component will contain: o An h1 element that will display the title of the data component o An element to display the author's name, in italics o An element to display the data . 3 page SPA . First page o The title of this page (both tab title and an indicator on the page itself) will display My o Will display your name, the course code and course title, the data you started this o Will contain an initially empty data component (see below) Playground assignment 4 buttons (I recommend a custom button component for this) o Appropriate text will be used for each button When button 1 is pressed, display Surprise in an alert box When button 2 is pressed the empty data component will display in the data component " " " Toes in the ocean, seat in the sand as the title Your name as the author The name of a travel destination that you would like to go to, a description of that locatiorn When button 3 is pressed the empty data component will display in the data component " The name of a poem that you like/found The author of the poem as the author of the component . The text of the poem as the data " The fourth button will clear the data component of all text " This button will use CSS to somehow change the display of the button (freedom of choice) Remember, you need to use className, not class, when setting a class for an object in React Second page o The title of this page (both tab title and an indicator on the page itself) will display Fun Technology o Will contain an initially empty data component (see below) o Will contain 3 interesting technologies (hypothetical or new or old) -A more details option to get more details on the technology When clicked the empty data component will display The Technology of interest as the title The author will be the author of the information that will be displayed in the data section. If it has no author that you can find, enter the name of the webpage the data was retrieved from (e.g. Wikipedia) The data that will be displayed will be a description of the data a personal addition of why you think it is interesting (in italics) o o . Third page The title of this page (both tab title and an indicator on the page itself) will display Personal Library o o Will contain an initially empty data component (see below) o Will contain The titles of 3 books An image of each book When the title of the book is clicked on (or some sort of element to let me know I can get more information), the data component will be populated Title will have the book name The author's name will be the author of the book The data will be a short synopsis of the book (can be personal or grabbed from anywhere on the internet) . All pages will have a navigation component This component will have three buttons to allow navigation to any of the three pages The button that corresponds to the page the user is on will be a light blue, all the others will be a default colour (you can choose a different one, or use the system default) o o I recommend using a custom button component to manage this (different from the one in the first page) " . A Data component will be used. This component will contain: o An h1 element that will display the title of the data component o An element to display the author's name, in italics o An element to display the data
