HTML/CSS How can I implement a website using HTML and CSS without functionality?

[evinda]

What do you mean?

I get:

But at the desired result we have more space before the price:

For my result I wrote: https://www.w3schools.com/code/tryit.asp?filename=GOFDGKW0LQ9Z

Do we have to add an empty row before the price or how do we get the desired result? :unsure:

 

[I like Serena]

For my result I wrote: https://www.w3schools.com/code/tryit.asp?filename=GOFDGKW0LQ9Z

Do we have to add an empty row before the price or how do we get the desired result?

I see you've split the text in the middle over multiple rows.
But I don't think that is desired, since "CPU:" belongs to what comes after.
So I think the text in the middle should go into a single cell so that its get wrapped however it will fit.
Consequently the lines of this text will get a little closer together.
We should also add a space after interpunction so that the wrapping happens more naturally.
We might then leave the price as is.

See https://www.w3schools.com/code/tryit.asp?filename=GOFFXLWHR2ZP

Alternatively we can put a<br/> after the text in the middle.
Or we can use CSS to add padding such that we get more space between the text and the price.
Or we can use CSS to specify a height for the row that the price is in.

 

[evinda]

I see you've split the text in the middle over multiple rows.
But I don't think that is desired, since "CPU:" belongs to what comes after.
So I think the text in the middle should go into a single cell so that its get wrapped however it will fit.
Consequently the lines of this text will get a little closer together.
We should also add a space after interpunction so that the wrapping happens more naturally.
We might then leave the price as is.

See https://www.w3schools.com/code/tryit.asp?filename=GOFFXLWHR2ZP
https://www.physicsforums.com/attachments/11015Alternatively we can put a<br/> after the text in the middle.
Or we can use CSS to add padding such that we get more space between the text and the price.
Or we can use CSS to specify a height for the row that the price is in.

Now it works! (Nod)
Can you explain to me each parameter of:

<input type="checkbox" checked="checked" value="Text1">Text1<br/>
<input type="radio" name="Text" value="Text2">Text2<br/>
<input type="text" id="uname" name="name" placeholder="From" size="7">

What is the purpose of each parameter?

 

[I like Serena]

<input type="checkbox" checked="checked" value="Text1">Text1<br/>
<input type="radio" name="Text" value="Text2">Text2<br/>

What is the purpose of each parameter?

The type is how it is shown in the browser and how it behaves when we click it.
checked is to set the initial state of the checkbox to either checked or unchecked. Often this will be omitted from the html code, but will instead be manipulated by javascript code.
At this time - for the html and css layout - we don't really need the other parameters and we can just omit them.

value is a value that javascript code can use to recognize what it needs to do.
name is an identification that javascript code can use to refer to the element and change for instance the checked status.
The Text1 that is outside the <input> tag is usually equivalent to the value, but it is what it shown to the user while the value is what is used by the javascript code.

We might have for instance:

Device types (check what you want to filter on):
<input type="checkbox" checked="checked" value="showAndroidDevices">Android<br/>

Operation System (select the operating system for the device):
<input type="radio" name="selectAndroidOperatingSystem" value="1">Android<br/>

 

[evinda]

At

<input type="text" id="uname" name="name" placeholder="From" size="7">

For the size part I have to try different sizes (7,8,9,..) till my result is the same as the desired result. Is that right? :unsure:
I mean for:

 

[I like Serena]

At

<input type="text" id="uname" name="name" placeholder="From" size="7">

For the size part I have to try different sizes (7,8,9,..) till my result is the same as the desired result. Is that right? :unsure:
I mean for:
https://www.physicsforums.com/attachments/11016

The html should be without size.
We have css for that.
In the css we can specify the font-size if the default is not good enough.

For the record, the result does not have to be exactly the same as the screenshot.

 

[I like Serena]

Did you already get the submit button with the στρογγυλεμένες γωνίες? (Wondering)

 

[evinda]

Did you already get the submit button with the στρογγυλεμένες γωνίες? (Wondering)

Yes, I have done this! (Nod)

Now I try to make all these buttons to have a function. This part is done. But what I haven't achieved yet is that all these filters are combined. I have achieved that if I select a mobile phone only this picture is shown, if I select the screen size only the respective picture (or nothing at all) is shown and if I select a system only a picture of the mobile that has this system is shown. For this I used Javascript functions, I wrote each of these properties in different function. Is it possible to combine all these filters? I tried to write one function for all properties, but then no filter works. :unsure:

 

[I like Serena]

We can have a single function for the fliter button at the bottom that first collects the status of all the options, and then shows the corresponding pictures.

 

[evinda]

We can have a single function for the fliter button at the bottom that first collects the status of all the options, and then shows the corresponding pictures.

You mean to write in the function all possible combinations? I mean if we select from the first filter option1 from second filter option1 and from the third filter option1 then show this piicture, if we select from the first filter option1 from second filter option1 and from the third filter option3 then show this piicture, etc?

 

[I like Serena]

You mean to write in the function all possible combinations? I mean if we select from the first filter option1 from second filter option1 and from the third filter option1 then show this piicture, if we select from the first filter option1 from second filter option1 and from the third filter option3 then show this piicture, etc?

I'd say the other way around.
We show the first picture if it matches filter option 1, filter option 2, and filter option 3. And then the same for the 2nd picture and/or any others if we have them.

 

[evinda]

I'd say the other way around.
We show the first picture if it matches filter option 1, filter option 2, and filter option 3. And then the same for the 2nd picture and/or any others if we have them.

So we write in javascript

Pic1.style.display = "block"

and we write all cases that should satisfy inside swich-statements? :unsure:

 

[I like Serena]

So we write in javascript

Pic1.style.display = "block"

and we write all cases that should satisfy inside swich-statements?

I'd imagine we'd write something like:

if (document.getElementById('Apple').checked && document.getElementById('iOS').checked) {
  picAppleiPhone7.style.display = 'block'
} else {
  picAppleiPhone7.style.display = 'none'
}

 

[evinda]

I'd imagine we'd write something like:

if (document.getElementById('Apple').checked && document.getElementById('iOS').checked) {
  picAppleiPhone7.style.display = 'block'
} else {
  picAppleiPhone7.style.display = 'none'
}

So do we have to write this for each filter seperately and for each combination of filters?

if (document.getElementById('Apple').checked) {
  picAppleiPhone7.style.display = 'block'
} else {
  picAppleiPhone7.style.display = 'none'
} 
if (document.getElementById('Apple').checked && document.getElementById('iOS').checked) {
  picAppleiPhone7.style.display = 'block'
} else {
  picAppleiPhone7.style.display = 'none'
} 
if (document.getElementById('Apple').checked && document.getElementById(' inches ').checked) {
  picAppleiPhone7.style.display = 'block'
} else {
  picAppleiPhone7.style.display = 'none'
} 
if (document.getElementById('Apple').checked && document.getElementById('iOS').checked && document.getElementById(' inches ').checked) {
  picAppleiPhone7.style.display = 'block'
} else {
  picAppleiPhone7.style.display = 'none'
}

And so on?

 

[I like Serena]

That won't work...
We have to combine them. Otherwise the last filter will overrule the others.

 

[evinda]

That won't work...
We have to combine them. Otherwise the last filter will overrule the others.

By combining them you mean to write all the possible combinations in one if'statement? :unsure:

 

[I like Serena]

By combining them you mean to write all the possible combinations in one if'statement?

Yes. (Nod)

 

[I like Serena]

We can introduce helper functions to do it so that we end up with for instance:

showProductIf('IPhone7', brandMatches('Apple') && screenSizeMatches(6.1) && operatingSystemMatches('iOS'))

 

[evinda]

We can introduce helper functions to do it so that we end up with for instance:

showProductIf('IPhone7', brandMatches('Apple') && screenSizeMatches(6.1) && operatingSystemMatches('iOS'))

Do we have to define a function that shows a product if the specific properties are satisfied? :unsure:

 

[I like Serena]

Do we have to define a function that shows a product if the specific properties are satisfied?

Nope. We don't have to.
It's just a way to make it more readable and manageable.

 

[evinda]

Yes. (Nod)

I wrote now an if-statement with all possible combinations, which are 27 When I tried examples to check if the result is correct then I noticed that the casesI have written at the end are not computed correctly. Can that be because I have written so many "else if" ? Or must there be an error at the code?

 

[I like Serena]

I wrote now an if-statement with all possible combinations, which are 27 When I tried examples to check if the result is correct then I noticed that the casesI have written at the end are not computed correctly. Can that be because I have written so many "else if" ? Or must there be an error at the code?

I don't think we can really write too many "else if"'s for the code to handle.
So there must be in an error in the code.

Btw, we have 2 checkboxes, 3 choices for the screen size, and 2 options for the operating system.
Doesn't that mean we should have 2 x 2 x 3 x 2 = 24 combinations?

 

[evinda]

I don't think we can really write too many "else if"'s for the code to handle.
So there must be in an error in the code.

Btw, we have 2 checkboxes, 3 choices for the screen size, and 2 options for the operating system.
Doesn't that mean we should have 2 x 2 x 3 x 3 = 36 combinations?

I wrote it again. I wrote each of the 36 combinations analytically. Now it doesn't work at all.
I don't know what I am doing wrong, I don't see any mistake at the code. Here is what I have written: https://pastebin.com/mpw6PDYw :unsure:

 

[I like Serena]

I wrote it again. I wrote each of the 36 combinations analytically. Now it doesn't work at all.
I don't know what I am doing wrong, I don't see any mistake at the code. Here is what I have written: https://pastebin.com/mpw6PDYw

We can debug and step through the code to figure it out.
Right click on the web page and select Inspect Element.
Find where your javascript source code is and set a breakpoint.
Execute the scenario that fails, which should then stop in the debugger from where you can inspect all expressions, and step through the if statements to see if we land where we're supposed to be.

 

[evinda]

We can debug and step through the code to figure it out.
Right click on the web page and select Inspect Element.
Find where your javascript source code is and set a breakpoint.
Execute the scenario that fails, which should then stop in the debugger from where you can inspect all expressions, and step through the if statements to see if we land where we're supposed to be.

I found the typo I had, now every case of the if-statement works. Now an oher problem appears. I cannot click the first checkbox ("Apple"), only if I click first at the second one ("Samsung") and then I can click on "Apple"or in general if I click first any filter then I can click on "Apple". What could be the reason? It is not related to the if-stetements, is it? :unsure:

 

[I like Serena]

I cannot click the first checkbox ("Apple")

What do you mean exactly? (Wondering)

 

[evinda]

What do you mean exactly? (Wondering)

I click the checkbox of "Apple" but it is not getting marked. If I click first any other filter and then I try to click the checkbox of "Apple" then it gets marked.

 

[I like Serena]

I click the checkbox of "Apple" but it is not getting marked. If I click first any other filter and then I try to click the checkbox of "Apple" then it gets marked.

That sounds strange. It suggests that it was disabled somehow but is enabled later on. It is possible from html, css, and javascript. But it seems unlikely you'd have done that.
Do you have the page somewhere?

 

[evinda]

That sounds strange. It suggests that it was disabled somehow but is enabled later on. It is possible from html, css, and javascript. But it seems unlikely you'd have done that.
Do you have the page somewhere?

I found my mistake. Now it works! (Nod)
As for the Textboxes at the size of the screen do we have to include them in the if-statements?

 

[I like Serena]

As for the Textboxes at the size of the screen do we have to include them in the if-statements?

I believe they are intended as a 3rd option yes.