diff --git a/README.md b/README.md index 955af7c..3659363 100644 --- a/README.md +++ b/README.md @@ -24,17 +24,17 @@ Wubba lubba dub dub!!! Create an out of this world app using the [Rick And Morty See an app video [here](https://www.youtube.com/watch?v=bGyZYHU3cJ0) and can be played with [here](https://joinpursuit.github.io/Module-2-Practice-Final-Assessment/) This **burp** app should have (in order of placement in the HTML): -- A title tag that starts with the text "Szechuan Sauce" -- A header tag. Make it mean and make it green. -- Inside the header an `h1` that reads "Rick & Morty" with fantasy font. -- Inside the header an image of Rick and Morty (check your assets folder!) - -- A `ul` with the id `all-characters` that contains an `li`'s with an image (id=`photo-img`) of each character in the API (first page only), as well as the characters name. -- A `main` tag that starts not on the page -- Inside of `main` should be two sections. The first section should have the id `character-info` the second should have the id `character-comments-section`. -- Inside of `character-info` should be be an `h3` an `img` and two `p` tags. -- Inside of `character-comments-section` should be a `form`, including a "text" `input` and a "submit" `input`, that allows users to submit (not save, just add to the frontend) what they would say about the character Jerry. On submission the input should clear. -- Also insider `character-comments-section` should be a `ul` with the id `character-comments-ul` that contains the submitted comments of each character. +- *html - A title tag that starts with the text "Szechuan Sauce" +- css - A header tag. Make it mean and make it green. +- css *html - Inside the header an `h1` that reads "Rick & Morty" with fantasy font. +- *html - Inside the header an image of Rick and Morty (check your assets folder!) + +- js *html - A `ul` with the id `all-characters` that contains an `li`'s with an image (id=`photo-img`) of each character in the API (first page only), as well as the characters name. +- js - A `main` tag that starts not on the page +- js - Inside of `main` should be two sections. The first section should have the id `character-info` the second should have the id `character-comments-section`. +- js - Inside of `character-info` should be be an `h3` an `img` and two `p` tags. +- js - Inside of `character-comments-section` should be a `form`, including a "text" `input` and a "submit" `input`, that allows users to submit (not save, just add to the frontend) what they would say about the character Jerry. On submission the input should clear. +- js - Also insider `character-comments-section` should be a `ul` with the id `character-comments-ul` that contains the submitted comments of each character. Please feel free to include additional `section`s and elements if they make styling the **burp** app easier. diff --git a/cypress/integration/initial_layout_spec.js b/cypress/integration/1initial_layout_spec.js similarity index 100% rename from cypress/integration/initial_layout_spec.js rename to cypress/integration/1initial_layout_spec.js diff --git a/cypress/integration/styling_spec.js b/cypress/integration/2styling_spec.js similarity index 100% rename from cypress/integration/styling_spec.js rename to cypress/integration/2styling_spec.js diff --git a/cypress/integration/core_interaction_spec.js b/cypress/integration/3core_interaction_spec.js similarity index 100% rename from cypress/integration/core_interaction_spec.js rename to cypress/integration/3core_interaction_spec.js diff --git a/index.css b/index.css new file mode 100644 index 0000000..2a6871a --- /dev/null +++ b/index.css @@ -0,0 +1,45 @@ +body { + background-color: black; + color: white; + display: flex; + flex-direction: column; + align-items: center; +} + +header { + display: flex; + justify-content: space-around; + align-items: center; + margin: auto; + width: 70%; + height: 150px; + background-color: rgb(0, 128, 0); + font-family: fantasy; +} + +header > img { + height: 100px; +} + +main { + display: none; + width: 70%; + border: white solid 1px; + /* display: flex; */ + margin: auto; + /* justify-content: space-around; */ +} + +#all-characters { + display: flex; + list-style-type: none; + width: 70%; + padding: 0; + margin: auto; + overflow-x: scroll; + text-align: center; +} + +input[type="text"] { + width: 380px; +} diff --git a/index.html b/index.html index 248ffe9..6659dd3 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,42 @@
+
+