Pease I need lines of code for this challenge.
- Within the STYLE tag, give the BODY element a white background
- Create a BUTTON element with ID of
filter-query , and give it a CSS class of mdc-icon-button and material-icons . Set its text to filter_list .
- Create a DIV element and give it a CSS class of
select . Within the DIV, create a SELECT element with a CSS class of select-text
- The SELECT element should have an option that is
disabled and selected by defualt. Give this option any text you like, e.g “Select User”
- Next, create a new DIV with a CSS class of
user-photo . Inside it, create an IMAGE and set its src to a placeholder from https://placeholder.com/ Make sure to give your IMAGE an alternate text
- Next, create a DIV with CSS class of
details and mdc-elevation--z3 . This DIV should have 5 PARAGRAPH elements, each containing a SPAN with CSS class prop and another SPAN with CSS class of value
What have you tried already? We aren’t here to do your homework for you 
1 Like
body {
background-color:#FFFFFF;
}
.buttton,
#filter-query {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: filter_list;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.material-icons.md-48 { font-size: 48px; }
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Note: Backticks are not single quotes.
What you’ve posted is CSS, the task is asking you to write HTML
Alright, thank you very much for contribution!
I type this code for the challenge but it doesn’t run, please help.
<button id ="filter-query">Submit</button>
Create a BUTTON element with ID of filter-query, and give it a CSS class of mdc-icon-button and material-icons . Set its text to filter_list .
You’ve only given it an id. I don’t know what you mean by it not running, as I don’t know how your assignment has been set up, but:
<someelement id="someid" class="class1 class2">Some text</someelement>
Also you have a space between id and =
I really appreciate your support DanCouper. Please check this code
<button id="filter-query" class="mdc-icon-button material-icons">filter_list</button>
<div> class= select
<select class = select-text> </select>
</div>
I really appreciate your support DanCouper. Please check this code
<button id="filter-query" class="mdc-icon-button material-icons">filter_list</button>
<div class= select >
<select class = select-text> SELECT </select>
</div>
You need to take more care with what you’re writing, you can’t just randomly miss off quotation marks and insert spaces. This is invalid, and doesn’t look like the first thing you wrote:
<div class= select >
<select class = select-text> SELECT </select>
</div>
Also, don’t just randomly add spaces and line breaks. So this is much easier to read and understand:
<div class= select >
<select class = select-text>SELECT</select>
</div>
(I get this may just be a formatting issue, apologies if that is the case)
@Smartakin Can you share your codes if you did them and we see what you did?
<div class= "select" >
<select class = "select-text">
<option value="available">available</option>
<option value="unavailable">Unavailable</option>
</select>
</div>
same issue, the app doesn’t seem to recognize this line
<button id="filter-query" class="mdc-icon-button mdc-icon-button">filter_list</button>
I’m having the same issue. Getting discouraged already.
I encountered the same issue, don’t know if i can i make it for the training.
here is the code i was able to come up with, but when i ran it i get this error message "The #oracle BUTTON does not have the specified CSS style" i thought i specified the CSS style
Please i need help asap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Mini App</title>
<style>
body{background:#ffffff}
div.select{margin-bottom:2.5em}
div.user-photo {
margin: 1em auto;
height:150px;
width:150px;
border-radius:50%;
overflow:hidden;
}
div.details{color:#ffffff;
background:#6200ee; font-size:1.3em;
margin-top:4em;
padding:0.5em 1em 0.5em 1em;
border-radius:10px;}
.details p{margin:0.3em}
div#outcome{position:absolute;
right:2.2em;
bottom:6.5em;
width:100px;
text-align:center}
#outcome h5{padding:1em;
background:#ffffff;
border-radius:10%;
margin:0 }
#outcome p{height:40px;
color:#ffffff;
border-bottom:5px solid #ffffff;
font-size:2em;
margin:0;
padding:0.5em 0 0.5em 0;}
#oracle{margin-top:2.5em;
border: 1px solid;
width:100%}
</style>
</head>
<body>
<button id="filter-query" class="mdc-icon-button material-icons">filter_list</button>
<div class="select">
<select class="select-text"><option disabled selected>Select User</option>
</select>
<div class="user-photo">
<img src="https://via.placeholder.com/150" alt="user photo"/>
</div>
<div class="details mdc-elevation--z3">
<p><span class="prop" data-age="">Age :</span><span class="value" data-age-value>35</span></p>
<p><span class="prop" data-height="">Height :</span><span class="value" data-height-value>1.6m</span></p>
<p><span class="prop" data-weight="">Weight :</span><span class="value" data-weight-value>75kg</span></p>
<p><span class="prop" data-gender="">Gender :</span><span class="value" data-gender-value>Male</span></p>
<p><span class="prop" data-country="">Country :</span><span class="value" data-country-value>Nigeria</span></p>
</div>
<button id="oracle" class="mdc-button">Calculate BMI</button>
<div id="outcome"><h5 class="mdc-typography--headline5" >BMI</h5><p></p>
</div>
</body>
</html>
hey @opec06, did you eventually fix the #oracle button style? I need help getting past it
Any luck?
I have the same challenge
To be honest, I do not think, the problem is with us but with their test suite! @ThElias, cos I haven’t gone past that last step in challenge 1