Basic calculator

Project Status
Completed
Comment Count
3 Comments
Difficulty
Difficulty
Project Team

you can create a codepen.io account for free to code projects

if you don't know how to code a specific function w3schools.com is a great source for html, css, and all kinds of JavaScript! 

Definitely take a look at the sight and play around with it.

Materials
codepen.io
Skills Overview

Here are some of the skills you'll need to complete this project:

basic knowledge of html and javascript

you don't need to understand css besides knowing it is to edit the way text looks

you can always look up how to do certain things on js, html, and css

if you have any questions about the code email me at yasmeen.faycurry@gmail.com I'd love to answer questions and go over more advanced options for the calculator app. If you want to collab. on a project, email me! 

The Challenge

Create a calculator

The code I attached is for a four variable four function calculator. It's pretty basic but it's good to start off. 

to check out my other work go to codeine.io/yasmeena !

html code

<h1> Calculator App </h1>
<p>
  <label for="a">Please enter a number</label>
  <input id="a" type="number" value="3">
</p>
<p>
  <label for="b">Please enter a number</label>
  <input id="b" type="number" value="5">
</p>
<p>
  <label for="c">Please enter a number</label>
  <input id="c" type="number" value="3">
</p>
<p>
  <label for="d">Please enter a number</label>
  <input id="d" type="number" value="3">
</p>
<select id="operation"> <!--Supplement an id here instead of using 'name'-->
  <option value="add">add</option> 
  <option value="subtract" >subtract</option>
   <option value="multiply" >multiply</option>
   <option value="divide" >divide</option>
   <option value="surprise" >surprise</option>
</select>
<button id="Play"> solve </button>
<div id="result"> </div>

css code (kinda messy)

h1 {
  color: red;
  font-size: 30pt;
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
div {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
  color: ;
}
label {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
  color: navy;
  font-size: 10pt;
}
input {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
 p {
  color: grey;

 

java script (JQuery)

$("#Play").click(function() {
  var a = parseInt($("#a").val());
  var b = parseInt($("#b").val());
  var c = parseInt($("#c").val());
  var d = parseInt($("#d").val());
  var op = $("#operation").val();
  var result;
  if (op === "add") {
    result = a + b + c + d;
  } else if (op === "subtract") {
    result = a - b - c - d;
  } else if (op === "divide") {
    result = a / b / c / d;
  } else if (op === "surprise") {
    result = 0;
  } else {
    result = a * b * c * d;
  }
  $("#result").html("<p>" + "the answer is " + result + "</p>");
});

 

Thank you for creating this project, yasmeena. Let me know if you need help promoting it.

Definitely a good entry programming project (unlike the typical printing of "Hello World" that I argue isn't a program--at least not on our level of abstraction). May I ask though out of curiosity's sake why you use HTML & CSS for this? I've always thought of the languages as exclusively for website development.