harunpehlivan
8/4/2018 - 1:18 AM

Solution

Solution

style.css
content_copyfile_download
body{
    background-color:  #f5f5f5;;
    color: black;
    text-align: center;
    margin-top: 175px;
}

h1{
    color: #D83B01;
}

span{
    color: #BAD80A;
}

#summary{
    width: 30%;
    margin: 10px auto;
    border: black 1px solid;
    background-color: #00B294;
}

section{
    border: black 1px solid;
    width: 40%;
    margin: 10px auto;
    color: white;
    background-color: #00B294;
}
solution.markdown
content_copyfile_download
  • Rendered
  • Source

Solution

A Pen by HARUN PEHLİVAN on CodePen.

License.

script.js
content_copyfile_download
// Part 3 - Update greeting with user's name
var userName = window.prompt("Please enter your name");
var greetingParagraph = document.getElementById("greeting");
greetingParagraph.innerHTML += ", " + userName;

// Part 4 - Get numbers from user
var num1 = parseInt(window.prompt("Enter a number"));
var num2 = parseInt(window.prompt("Enter another number"));
var span1 = document.getElementById("operand1");
var span2 = document.getElementById("operand2");
span1.innerHTML = num1;
span2.innerHTML = num2;

// Part 5 - Operations
var sum = num1 + num2;
var difference = num1 - num2;
var product = num1 * num2;
var quotient = num1 / num2;
var modResult = num1 % num2;

// Part 6 - Display results
var resultMessage = "<span>" + num1 + "</span> and <span>" + num2 + "</span> is "; 
document.getElementById("addition").innerHTML = "The sum of " + resultMessage + sum; document.getElementById("subtraction").innerHTML = "The difference between " + resultMessage + difference;
document.getElementById("multiplication").innerHTML = "The product of " + resultMessage + product; document.getElementById("division").innerHTML = "The quotient of " + resultMessage + quotient; document.getElementById("modulus").innerHTML = "The result of the mod operation on " + resultMessage + modResult;
index.html
content_copyfile_download
<!DOCTYPE HTML>

<html>
    <head>
        <title>Module 1 Lab</title>
        <link rel="stylesheet" type="text/css" href="lab.css"/>
    </head>

    <body>
        <h1 id="greeting">Welcome to Number Fun</h1>
        <p id="summary">Operand #1: <span id="operand1">___</span>    Operand #2: <span id="operand2">___</span></p>
        <section>
            <p id="addition"></p>
            <p id="subtraction"></p>
            <p id="multiplication"></p>
            <p id="division"></p>
            <p id="modulus"></p>
        </section>
        <script src="lab.js"></script>
    </body>
</html>