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

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

 

[evinda]

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

Do we have to add at the if-statements the possible cases for "From" and "To" and the possible cases only for "From" and the possible cases only for "To" ?
So we check:
- From < 6.1 AND To < 6.1 then no product is shown.
- From < 6.1 AND To = 6.1 then "Apple" is shown.
- From < 6.1 AND To >= 6.2 then "Apple" and "Samsung" is shown.
- From = 6.1 AND To = 6.1 then "Apple" is shown.
- From = 6.1 AND To > 6.1 then "Apple" and "Samsung" is shown.
- From = 6.2 AND To >= 6.2 then "Samsung" is shown.
- From > 6.2 AND To > 6.2 then no product is shown.
- From <= 6.1 then "Apple" and "Samsung" is shown.
- From = 6.2 then "Samsung" is shown.
- From > 6.2 then no product is shown.
- To < 6.1 then no product is shown.
- To = 6.1 then "Apple" is shown.
- To >= 6.2 then "Apple" and "Samsung" is shown. Or can we combine the cases?

 

[I like Serena]

Do we have to add at the if-statements the possible cases for "From" and "To" and the possible cases only for "From" and the possible cases only for "To" ?

Or can we combine the cases?

I think we actually have more cases.
For starters, what if the user filled in 6.15?
Or what if they did not fill in the from field at all?
Or what if they accidentally filled in something other than a number? (Sweating)

Let's focus on one product first.
And let's assume both fields were filled in with a number for now.
Then for the Apple device, I believe we can combine it all in:
- From <= 6.1 AND 6.1 <= To then "Apple" is shown.
- Otherwise "Apple" is not shown.

Doesn't that cover all cases for "Apple" (except the new cases that I came up with)?

Perhaps we can test that, and see what happens if we leave the from field empty.
And also test what happens if we put for instance "6,1" in the from field with a comma instead of a point, which could be a typical 'mistake' from the user. :unsure:

 

[evinda]

Let's focus on one product first.
And let's assume both fields were filled in with a number for now.
Then for the Apple device, I believe we can combine it all in:
- From <= 6.1 AND 6.1 <= To then "Apple" is shown.
- Otherwise "Apple" is not shown.

Doesn't that cover all cases for "Apple" (except the new cases that I came up with)?

Perhaps we can test that, and see what happens if we leave the from field empty.
And also test what happens if we put for instance "6,1" in the from field with a comma instead of a point, which could be a typical 'mistake' from the user. :unsure:

It doesn't seem to work.

In HTML I wrote:

   <input type="string" id="from" value="Από" size="1">  
   <input type="string" id="to" value="Έως" size="1"> 
   <button type="button" onclick="Function2()">Εφαρμογή</button>

In Javascript I wrote:

<script>
function Function2() { 
   if (document.getElementById("from") <= 6.1 && document.getElementById("to") >= 6.1){ 
       Apple.style.display = "block"; 
   } 
   else { 
       Apple.style.display = "none"; 
   } 
} 
</script>

I gave as example-input "from=6" and 'to=8" and "Apple" is not shown. What is the error?

 

[I like Serena]

It doesn't seem to work.

I gave as example-input "from=6" and 'to=8" and "Apple" is not shown. What is the error?

It should be document.getElementById("from").value.

 

[evinda]

It should be document.getElementById("from").value.

Now it works! (Nod) I wrote the corresponding code for "Samsung". If we choose to write something in these textboxes, should the radio button be unchecked if it was checked previously?
Also do we have to add this part at the 36 cases I wrote before? We can't write that seperately because it won't be combined with the other filters, can we? (Thinking)

 

[I like Serena]

Now it works! I wrote the corresponding code for "Samsung". If we choose to write something in these textboxes, should the radio button be unchecked if it was checked previously?

Actually, I'm not sure what is intended. Can you find out? (Wondering)
I'd expect there to be a separate radio button in front of the text boxes to make it a 3rd option, but there isn't. :unsure:

Also do we have to add this part at the 36 cases I wrote before? We can't write that seperately because it won't be combined with the other filters, can we?

We could see that if we combine both Apple and Samsung in an if-tree that it becomes unmanageable.
Suppose we have a separate if-tree for Apple and also a separate if-tree for Samsung. Then we can combine the text boxes into those if-trees can't we?

 

[evinda]

We could see that if we combine both Apple and Samsung in an if-tree that it becomes unmanageable.
Suppose we have a separate if-tree for Apple and also a separate if-tree for Samsung. Then we can combine the text boxes into those if-trees can't we?

Should the if-tree for Apple look as follows?

If Apple is chosen then: 
      If Large Screen is chosen 
             If at Checkbox we have From <= 6.1 AND 6.1 <= To  
                      If iOS is chosen 
                               then "Apple" is shown

Then we have to check also the cases that only two filters are chosen, and the case that only one filter is chosen. Is it right?

 

[I like Serena]

If Apple is chosen then:
      If Large Screen is chosen
             If at Checkbox we have From <= 6.1 AND 6.1 <= To
                      If iOS is chosen
                               then "Apple" is shown

"Large Screen is chosen" and "at Checkbox we have From <= 6.1 AND 6.1 <= To" can't both be true at the same time can they? :unsure:
Perhaps it should be Large Screen is chosen OR (at Checkbox we have From <= 6.1 AND 6.1 <= To)?

Then we have to check also the cases that only two filters are chosen, and the case that only one filter is chosen. Is it right?

What do you mean? :unsure:

 

[evinda]

"Large Screen is chosen" and "at Checkbox we have From <= 6.1 AND 6.1 <= To" can't both be true at the same time can they? :unsure:
Perhaps it should be Large Screen is chosen OR (at Checkbox we have From <= 6.1 AND 6.1 <= To)?

I wrote the case for choosing "Apple" and the case for choosing "Samsung", and it works! (Nod) Do we have to write also the case if neither "Apple" nor "Samsung" is chosen? This cannot be included in the previous cases, can it?

For the first case, choosing "Apple" I wrote:

if (Apple is checked){ 
        if (Large Screen is cheched OR (FROM <= 6.1 AND TO >= 6.1)){ 
            if (iOS ic checked){ 
                Apple is shown  
            } 
            else if (Androis ic checked){ 
                Apple is not shown 
            }
            else { 
                Apple is shown 
            } 
        }   
        else if (Median nScreen is checked OR (FROM > 6.1 OR TO < 6.1)){ 
            Apple is not shown 
        } 
        else if (Median Screen is not checked AND Large Screen is not checked && FROM == "Από" && TO == "Έως") { 
            if (iOS is checked){ 
                Apple is shown  
            } 
            else if (Androis is checked){ 
                Apple is not shown 
            } 
            else { 
                Apple is shown 
            } 
        } 
    }

Is this right?

 

[I like Serena]

I wrote the case for choosing "Apple" and the case for choosing "Samsung", and it works! (Nod) Do we have to write also the case if neither "Apple" nor "Samsung" is chosen? This cannot be included in the previous cases, can it?

For the first case, choosing "Apple" I wrote:

if (Apple is checked){
        if (Large Screen is cheched OR (FROM <= 6.1 AND TO >= 6.1)){
            if (iOS ic checked){
                Apple is shown
            }
            else if (Androis ic checked){
                Apple is not shown
            }
            else {
                Apple is shown
            }
        }
        else if (Median nScreen is checked OR (FROM > 6.1 OR TO < 6.1)){
            Apple is not shown
        }
        else if (Median Screen is not checked AND Large Screen is not checked && FROM == "Από" && TO == "Έως") {
            if (iOS is checked){
                Apple is shown
            }
            else if (Androis is checked){
                Apple is not shown
            }
            else {
                Apple is shown
            }
        }
    }

Is this right?

How about:

var showApple = false
if (Apple is checked) {
    if (Large Screen is checked OR (FROM <= 6.1 AND TO >= 6.1)) {
        if (iOS is checked){
            showApple = true
        }
    }
}
if (showApple) {
    Apple is shown
} else{
    Apple is not shown
}

Oh, and a radio button is supposed to always give a single selection, so we shouldn't be able to select both Medium Screen and Large Screen.