Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Algebra Problems</title>
</head>
<body>
  <h1>Let's Do Some <b>algebra</b>!</h1>
  <h2>By: Kira</h2>
  <h1>
  <button onclick = "oneVar()"> Get a <b> ONE VARIABLE</b> equation</button>
<br>
  <button onclick="twoVar()"> Get a <b>TWO VARIABLE</b> equation </button>
<br>
   <button onclick="answerPrb()"> Answer your own <b>TWO VARIABLE</b> equation </button>
  </h1>
  <!-- MODAL CODE -->
  <button id="myBtn">How to solve a 2 variable equation!</button>
​
<!-- The Modal -->
<div id="Modal" class="modal">
​
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>The 6 steps to solving a 2-variable equation:</h2>
    <p><b>5a + 2b = 3 <br> 4a + 5b = 6</b></p>
<p>1) Find <b>a </b>on its own: <br><b>a = (3-2b)/5 </b><br>
   2) Substitute into the other equation: <br><b> 4((3-2b)/5) + 5b = 6 </b> <br> 
   3) Multiply (only if there are fractions): <br><b>4(3-2b) + 25b = 30 </b> <br> 
   4) Distribute:<br> <b>12 - 8b + 25b = 30</b> <br>
   5) Combining like terms: <br><b>17b = 18</b> <br>
   6) Divide <br><b> b = 18/17 </b> <br> <br>
      AND YOU'RE DONE!!! :D
    </p>
    
  </div>
​
</div>
</body>
</html>
 
body{
  font-family: 'Quicksand', sans-serif;
  color: #00e69d;
}
button{
  font-family: 'Quicksand', sans-serif;
  border: 2px solid #00e69d;
  border-radius: 6px;
  background-color: white;
  padding: 6px;
  transition-duration: 0.15s;
  color: #00e69d;
  font-size: 17px;
}
button:hover {
  background-color: #00e69d; /* Green */
  color: white;
  font-weight: 700;
  padding: 12px;
}
h1{
  font-size: 34px;
  color: #00e69d;
  text-shadow: 2px 2px 3px  #66ffcf;
  font-weight: 500;
}
h2{
 text-shadow: 2px 2px 3px  #66ffcf;
 font-weight: 500; 
}
/* MODAL CODE*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    padding-top: 70px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: scroll; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
​
/* Modal Content */
.modal-content {
    background-color: #00e69d;
    margin: auto;
    padding: 20px;
    border: 0px solid #888;
    width: 80%;
    padding-top: 0;
    font-size: 17px;
    color: white;
}
​
/* The Close Button */
.close {
    font-size: 0px;
}
span{
  1500px;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
twinklewordpro
0viewers