Calculator, Pythagorean Theorem and algebra calculator feedback

Code Feedback
1

Ideas for a background? Or should i keep it simple?

I finished the JavaScript calculator challenge. Since we were learning about the Pythagorean Theorem in school, i decided to write some code to do it (don’t worry- didn’t use it to do my homework). Now when i went to go do this project, i thought of this code and decided to make a calculator out of it.

When your using the PT calculator, skip the red boxes/ text. Its just there to show what you’re going to calculate. It also doesn’t matter if you put the leg in C’s place, etc because it sorts he input by size anyways (when the programs goes to solve).

I finished this around 2+ weeks ago, but just remembered now. There is more i could of added (calculators) but i decided its time to move on.

There is some small things that aren’t the best, but it does work fairly well. Please tell me if you come across any major mistakes --> https://codepen.io/Mike-was-here123/full/PQOYjB/

(My HTML isn’t the best, i know)

2

Kudos on using your new programming skills making programs to suit your needs.

A few suggestions:

To prevent users from entering values in your fields, you can do it this way:

<input type="text" placeholder="Find C" disabled>

Then to properly color it, use:

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: red;
    opacity: 1; /* Firefox */
}

The end result looks the same, but users won’t be able to enter values into those fields.

1 Like
3

Thank you, i added that.

Also fixed the Hypotenuse @ PT section not working if the two legs were the same.

4

More UI improvements.

I don’t think you should use “value=something” to populate your input fields because then the user will have to erase that text before they can enter their number.

Instead, you should use placeholder tag.

<li><input type="text" id="leg1Leg" placeholder="leg"></li>
<li><input type="text" placeholder="Find Leg" disabled class="readonly"></li>
<li><input type="text" id="cLeg" placeholder="C"></li>

Then add this to your CSS

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: gray;
    opacity: 1; /* Firefox */
}

.readonly::placeholder{
  color: red;
}

5

Thank you again. I was wondering on how to do that. what do the :: mean? How come it came be .placeholder or just placeholder?

6

if it’s just placeholder, then that would be looking for the html tag “placeholder”

And .placeholder will be looking for the class=“placeholder”

In this case, placeholder is a tag attribute for form elements.

1 Like
7

Looks nice , heres a minor issue
Capture%20(3)

8

yeah that is if you don’t click directly on the button. Not really worth fixing.

9

@owel @Annestezia do you guys have any idea on why the bottom two rows of my calculator don’t work? When i go to click on them, it highlights the Algebra Calculator text below. Even if i try to highlight the button text it highlights the same Algebra Calculator``` text below it.

This is only happening because of the classes i use on lines 279 && 285 in css. These are used to change the margins of the calculators. the PT and regular calculator is in its own row separate from the algebra calculator and output. The two rows that contains the calculators are naturally stacked on top of each other.

I wanted to make them closer together so i made that class. If i remove the classes, the buttons work fine.

I marked where the row's && sep && sep2 end/ start on the html.

Why is this happening? Why does buttons not able to activate because of a margin?

10

It looks like your div with class row and sep2 is covering it.

calc.png1227×521 29.8 KB

When developing, sometimes it’s a good idea to temporarily put a border: 1px solid red around your divs so you can see exactly where they are positioned or how big/wide/tall they are.

1 Like
11

All i did was add margins. Should i just added a margin below the calculators instead of a separate class?

Also, do you like the algebra calculator i added?

12

A quick fix to your div problem is just add margin-top to your .sep2 class.

.sep2 {
   margin-top: 8em;
}
13

Thanks, it worked. I also edited the margin-bottom of sep to bring them closer together without interfering with anything.

14

yep there was/is a problem with your margins( overlapping elements) check this out .
i just commented out most of those huge margins , made it 1 row intead of 2 added couple of margins 20px 0 to separate calscs vertically;
there are still right margins there 4 margins’ lovers :grin: