Skip to content

finished assessment #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vrwatson wants to merge 2 commits into
base: main
Choose a base branch
from
Open

finished assessment #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
23e251e
finished assessment
vrwatson Mar 23, 2021
02c1359
removing extra LI tag
vrwatson Mar 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 96 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
h1 {
font-family: fantasy;
}

body {
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
color: white;
}

header {
width: 70%;
height: 150px;
display: flex;
justify-content: space-between;
padding: 0 30px;
background-color: green;
margin-bottom: 20px;
}

header > img {
height: 100px;
}

main {
display: none;
border: 5px solid white;
width: 70%;
color: white;
}

input[type="text"] {
width: 380px;
}

#all-characters {
display: flex;
list-style: none;
width: 70%;
padding: 0;
margin: 0;
overflow-x: scroll;
}

ul > li > img {
width: 150px;
height: 150px;
flex-wrap: wrap;
}

/* body {
background-color: black;
color: white;
width: 70%;
}

#rnm-header {
display: flex;
justify-content: space-between;
font-family:'fantasy';
background-color: green;
}

#header-type {
font-family: fantasy;
color: white;
}

header > img {
height: 100px;
}

ul {
display: flex;
justify-content: space-between;
overflow-x: scroll;
list-style-type: none;
}

ul > li > img {
width: 150px;
height: 150px;
flex-wrap: wrap;
}

li > p {
text-align: center;
}

main {
display: none;
justify-content: space-evenly;
text-align: center;
} */
47 changes: 46 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,52 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type="image/png" href="./assets/favicon.jpeg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Szechuan Sauce</title>
<link rel="stylesheet" href="./index.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./ricknmorty.js" defer></script>
</head>

<header id="rnm-header">
<h1 id="header-type">Rick & Morty</h1>
<img src="./assets/rickAndMorty.png" id="rnm-img" alt="Image of Rick & Morty">
</header>

<ul id="all-characters">
</ul>

<main>
<section id="character-info">
<h3 id="character-header"></h3>
<img src="" id="character-img" alt="">
<p id="character-status"></p>
<p id="character-location"></p>
</section>
<section id="character-comments-section">
<form action="" id="comment-form">
<label for="user-comment">What would this character say about Jerry?</label>
<br><input type="text" id="user-comment" required/>
<br><input type="submit" id="comment-submit" value="Comment"/>
</form>
<ul id="character-comments-ul"></ul>
</section>
</main>

<body>
</body>
</html>
</html>

<!-- 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.

Please feel free to include additional `section`s and elements if they make styling the **burp** app easier. -->
Loading