Middle School Coding Practice

October 27, 2025     tocsadmin    

Here is some code for you to try at home in our HTML Editor

Simple Calculator

Type in a simple problem like 2+2. You can use * for multiplication or / for division: 2*5 to get 10 or 10/2 to get 5.

It’ll even do harder problems like ((10*5+6)/(10-5))^2

<input id="math">

<button onclick="domath()">Calculate</button>

<script>
function domath(){
i=document.getElementById('math').value;
alert(eval(i));
}
</script>

Changing Size

Here is code that will change the size of an image when you click a button.

The code to make it shrink isn’t working. Can you fix the code?

Hint: Look at the line that says “w=w-0” in then Look at the code that makes it grow. That “w” increases because it is adding 10 to itself (that is what w = w + 10 means), so the size goes up by 10 when the button is pressed, so what should you change in w=w-0 make it get smaller? Think about it, but if you are stuck, the answer is at the bottom of this page.

<p>
<button onclick="grow()">Grow</button>
<button onclick="shrink()">Shrink</button>
</p>
<img id="cat" width="50" src="https://tocsweb.com/cat.jpg">

<script>
var w = 50;
var catPic = document.getElementById("cat");

function grow(){
  w = w+10;
  catPic.width = w;
}

function shrink(){
  w = w-0;
  catPic.width = w;
}

</script>

Answer:

Change the w = w-0; to w = w-10; so it will subtract 10 from itself.

Share