Need to make Calculator using HTML/CSS and Javascript from Scratch - javascript

New to Javascript Need to make a calculator by applying HTML CSS and Javascript. With all the buttons placed need to make a calculator app like this by calling the onclick function on each of the button wtih arguments passed into it. Please help to get started with it.
Calculator Current Design:
Here is the HTML and CSS Code:
body {
font-family: 'Open Sans', sans-serif;
background-color: black;
}
#container {
width: 1000px;
height: 550px;
background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)),
url(bgcalc.png);
margin: 20px auto;
}
#calculator {
width: 320px;
height: 520px;
background-color: #eaedef;
margin: 0 auto;
top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#result {
height: 120px;
margin-bottom: 20px;
}
#history {
text-align: right;
height: 20px;
margin: 0 20px;
padding-top: 20px;
font-size: 15px;
color: #919191;
}
#output {
text-align: right;
height: 60px;
margin: 10px 20px;
font-size: 30px;
background-color: #afbec4;
}
#keyboard {
height: 400px;
}
.operator,
.number,
.empty {
width: 67px;
height: 50px;
margin: 6px;
float: left;
border-width: 0;
font-weight: bold;
font-size: 15px;
}
#clear {
background-color: #cb4e4d;
border-radius: 45%;
}
.number,
.empty {
background-color: #5f7d8c;
border-radius: 10px;
color: white;
}
.number,
.operator {
cursor: pointer;
background-color: #5f7d8c;
border-radius: 10px;
color: white;
}
.operator:active,
.number:active {
font-size: 13px;
}
.operator:focus,
.number:focus,
.empty:focus {
outline: 0;
}
button:nth-child(4) {
font-size: 9px;
background-color: #cb4e4d;
border-radius: 10px;
}
button:nth-child(8) {
font-size: 20px;
background-color: #ffa500;
border-radius: 10px;
}
button:nth-child(12) {
font-size: 20px;
background-color: #f08080;
border-radius: 10px;
}
button:nth-child(16) {
font-size: 20px;
background-color: #7d93e0;
border-radius: 10px;
}
button:nth-child(20) {
font-size: 20px;
background-color: #9477af;
border-radius: 10px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>A simple calculator</title>
</head>
<body>
<div id="container">
<div id="calculator">
<div id="result">
<div id="history">
<p id="history-value"></p>
</div>
<div id="output">
<p id="output-value"></p>
</div>
</div>
<div id="keyboard">
<button class="operator" id="clear">C</button>
<button class="operator" id="backspace">+-</button>
<button class="operator" id="%">%</button>
<button class="operator" id="/">Console <br>Log</button>
<button class="number" id="7">7</button>
<button class="number" id="8">8</button>
<button class="number" id="9">9</button>
<button class="operator" id="*">&divide</button>
<button class="number" id="4">4</button>
<button class="number" id="5">5</button>
<button class="number" id="6">6</button>
<button class="operator" id="-">×</button>
<button class="number" id="1">1</button>
<button class="number" id="2">2</button>
<button class="number" id="3">3</button>
<button class="operator" id="+">-</button>
<button class="empty" id="empty">0</button>
<button class="number" id="0">.</button>
<button class="empty" id="empty">=</button>
<button class="operator" id="=">+</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

here's what you could go for as a start:
assign an onclick attribute to all of the buttons, and as a parameter pass their value, and add a main input which all the values would be added into:
<input type="text" id="mainInput" readonly>
<button class="operator" id="clear">C</button>
<button class="operator" id="backspace" onclick="addChar("-")">+-</button>
<button class="operator" id="%" onclick="addChar("%")">%</button>
<button class="operator" id="/">Console <br>Log</button>
<button class="number" id="7" onclick="addChar("%")">7</button>
<button class="number" id="8" onclick="addChar("%")">8</button>
<button class="number" id="9" onclick="addChar("%")">9</button>
<button class="operator" id="*" onclick="addChar("%")">&divide</button>
<button class="number" id="4" onclick="addChar("%")">4</button>
<button class="number" id="5" onclick="addChar("%")">5</button>
<button class="number" id="6" onclick="addChar("%")">6</button>
<button class="operator" id="-" onclick="addChar("%")">×</button>
<button class="number" id="1" onclick="addChar("1")">1</button>
<button class="number" id="2" onclick="addChar("2")">2</button>
<button class="number" id="3" onclick="addChar("3")">3</button>
<button class="operator" id="+" onclick="addChar("-")">-</button>
<button class="empty" id="empty" onclick="addChar("%")">0</button>
<button class="number" id="0" onclick="addChar(".")">.</button>
<button class="empty" id="empty" onclick="addChar("=")">=</button>
<button class="operator" id="=" onclick="addChar("+")">+</button>
Then in JS, create the onclick function:
function addChar(val) {
document.getElementById("mainInput").value += val
}
All I'm doing here is getting the mainInput's value and adding the the value of the button clicked into it.
This should set you with something to start with, good luck!

Related

How can I make a button stay to the right no matter the screen size?

I have this button made in js it has an image on top and a link, how can i make it so no matter any screen size it stays to the right, because i tried 100% 100vw but it made it to the right to much to the point you to scroll to the right in order to see it, i tried 86 for both it worked on my screen size but made it so you to scroll to the right in order to see it.
.set {
background-color: black;
.invisible {
display: none
}
}
button {
background-repeat: no-repeat;
background-position: 50% 50%;
/* put the height and width of your image here */
height: 350px;
width: 250px;
border: none;
color: black position:relative;
}
button span {
display: none;
}
.btn1 {
background-image: url("https://i.ibb.co/RPZ82RK/DRAFT.jpg");
margin-left: 80vw;
}
#test {
display: flex;
}
img {
float: left;
width: 20%;
height: 300px;
object-fit: cover;
padding: 0px;
}
h1 {
background: #ee6c4d;
color: #fff;
padding: 5px;
border-radius: 50px;
margin: 50px;
-webkit-box-decoration-break: clone;
-moz-background-inline-policy: clone;
box-decoration-break: clone;
}
.tablink {
border-radius: 500px;
background-color: #1a2858;
padding-top: -10px;
color: white;
float: center;
border: none;
outline: none;
cursor: pointer;
font-size: 30px;
width: 55.6px;
height: 55.6px;
text-align: center;
margin-top: 1.5%;
color: white;
font-family: yaqout;
font-weight: bold;
}
/* Change background color of buttons on hover */
.tablink:hover {
background-color: #49e2f8;
}
/* Set default styles for tab content */
.tabcontent color: white;
display: none;
padding: 14px;
text-align: center;
}
.container {
height: 200px;
position: relative;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
body {
font-family: sans-serif;
margin: 0;
}
.header {
padding: 1px;
text-align: center;
background: #489795;
color: #1a2858;
font-size: 70px;
height: 10%;
font-family: yaqout;
font-weight: bold;
<body style="background-image: url('https://i.ibb.co/vhvmNbQ/1234.jpg.jpg');"></body>
<button onclick="myFunction()" id="score" style="color: transparent; background-color: transparent; border-color: transparent; cursor: default;position:absolute;">Click to see progress</button>
<button id="complete" style="color: transparent; background-color: transparent; border-color: transparent; cursor: default;position:absolute;"></button>
</header>
<div class="header">
<span> خواندن مرحله‌وار<span>
</div>
</body>
<button class="tablink" id="c" onclick="location.href='https://razkudak.000webhostapp.com/index.html/ya/alif-ya.html'">ی</button>
<button class="tablink" id="b" onclick="location.href='https://razkudak.000webhostapp.com/index.html/alif%20mat/alif-ya.html'">ه</button>
<button class="tablink" id="a" onclick="location.href='https://razkudak.000webhostapp.com/index.html/wow/alif-ya.html'">و</button>
<button class="tablink" id="29" onclick="location.href='https://razkudak.000webhostapp.com/index.html/nun/alif-ya.html'">ن</button>
<button class="tablink" id="28" onclick="location.href='https://razkudak.000webhostapp.com/index.html/mem/alif-ya.html'">م</button>
<button class="tablink" id="27" onclick="location.href='https://razkudak.000webhostapp.com/index.html/lam/alif-ya.html'">ل</button>
<button class="tablink" id="26" onclick="location.href='https://razkudak.000webhostapp.com/index.html/gaf/alif-ya.html'">گ</button>
<button class="tablink" id="25" onclick="location.href='https://razkudak.000webhostapp.com/index.html/kaf/alif-ya.html'">ک</button>
<button class="tablink" id="24" onclick="location.href='https://razkudak.000webhostapp.com/index.html/gaf/alif-ya.html'">ق</button>
<button class="tablink" id="23" onclick="location.href='https://razkudak.000webhostapp.com/index.html/fe/alif-ya.html'">ف</button>
<button class="tablink" id="22" onclick="location.href='https://razkudak.000webhostapp.com/index.html/ghyn/alif-ya.html'">غ</button>
<button class="tablink" id="21" onclick="location.href='https://razkudak.000webhostapp.com/index.html/ayn/alif-ya.html'">ع</button>
<button class="tablink" id="20" onclick="location.href='https://razkudak.000webhostapp.com/index.html/zuy/alif-ya.html'">ظ</button>
<button class="tablink" id="19" onclick="location.href='https://razkudak.000webhostapp.com/index.html/tuy/alif-ya.html'">ط</button>
<button class="tablink" id="18" onclick="location.href='https://razkudak.000webhostapp.com/index.html/zad/alif-ya.html'">ض</button>
<button class="tablink" id="17" onclick="location.href='https://razkudak.000webhostapp.com/index.html/sad/alif-ya.html'">ص</button>
<button class="tablink" id="16" onclick="location.href='https://razkudak.000webhostapp.com/index.html/shen/alif-ya.html'">ش</button>
<button class="tablink" id="15" onclick="location.href='https://razkudak.000webhostapp.com/index.html/sen/alif-ya.html'">س</button>
<button class="tablink" id="14" onclick="location.href='https://razkudak.000webhostapp.com/index.html/ghe/alif-ya.html'">ژ</button>
<button class="tablink" id="13" onclick="location.href='https://razkudak.000webhostapp.com/index.html/ze/alif-ya.html'">ز</button>
<button class="tablink" id="12" onclick="location.href='https://razkudak.000webhostapp.com/index.html/re/alif-ya.html'">ر</button>
<button class="tablink" id="11" onclick="location.href='https://razkudak.000webhostapp.com/index.html/zal/alif-ya.html'">ذ</button>
<button class="tablink" id="10" onclick="location.href='https://razkudak.000webhostapp.com/index.html/dal/alif-ya.html'">د</button>
<button class="tablink" id="9" onclick="location.href='https://razkudak.000webhostapp.com/index.html/khe/alif-ya.html'">خ</button>
<button class="tablink" id="8" onclick="location.href='https://razkudak.000webhostapp.com/index.html/he/alif-ya.html'">ح</button>
<button class="tablink" id="7" onclick="location.href='https://razkudak.000webhostapp.com/index.html/che/alif-ya.html'">چ</button>
<button class="tablink" id="6" onclick="location.href='https://razkudak.000webhostapp.com/index.html/gym/alif-ya.html'">ج</button>
<button class="tablink" id="5" onclick="location.href='https://razkudak.000webhostapp.com/index.html/the/alif-ya.html'">ث</button>
<button class="tablink" id="4" onclick="location.href='https://razkudak.000webhostapp.com/index.html/te/alif-ya.html'">ت</button>
<button class="tablink" id="3" onclick="location.href='https://razkudak.000webhostapp.com/index.html/pe/alif-ya.html'">پ</button>
<button class="tablink" id="2" onclick="location.href='https://razkudak.000webhostapp.com/index.html/be/alif-ya.html'">ب</button>
<button class="tablink" id="1" onclick="location.href='https://razkudak.000webhostapp.com/index.html/alif/alif-ya.html'">ا</button>
</head>
<body>
<div id="test"></div>
</body>
</html>
Also the CSS to change the buttons things are on top of the CSS.
https://codepen.io/haroon1233212/pen/NWXQXRa
Well, for keeping a button always in the same spot, absolute positioning should get the job done.
button {
position: absolute;
right: 0;
}

how to display input using button in right to left order?

I want to display the text in the display section where the input via the buttons are aligned to the right and when the text exceeds the width of the display div it gets overflowed to the left,ie the most most recent inputs should be displayed.
but the problem occurs when i start inputting special characters. In the console input appears correctly, in order but on the display the order starts getting jumble when other characters are inputted.
is it because of the direction property?
const display = document.getElementById('display');
const numbers = document.getElementsByClassName('nums');
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i].value)
numbers[i].addEventListener('click', () => {
console.log(display.innerText + `${numbers[i].value}`)
display.innerText = display.innerText + `${String(numbers[i].value)}`;
})
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
button {
padding: 10px 18px
}
.operations button {
margin-top: 5px;
padding: 10px 15px;
}
.numbers {
width: 80%;
display: block;
/* flex-direction; */
/* justify-content: space-evenly; */
align-items: center;
}
.container {
border: 1px solid black;
padding: 20px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
/* align-items: center; */
margin: 7px 0;
}
.display {
border: 1px solid black;
width: 200px;
height: 30px;
margin: 10px;
text-align: right;
overflow: hidden;
direction: rtl;
}
.butts {
display: flex;
}
.operations {
display: flex;
margin-top: 2px;
flex-direction: column;
margin-left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="display" id='display'></div>
<div class="butts">
<div class="numbers">
<div class="row">
<button class="nums" value="1">1</button>
<button class="nums" value="2">2</button>
<button class="nums" value="3">3</button>
</div>
<div class="row">
<button class="nums" value="4">4</button>
<button class="nums" value='5'>5</button>
<button class="nums" value='6'>6</button>
</div>
<div class="row">
<button class="nums" value="7">7</button>
<button class="nums" value="8">8</button>
<button class="nums" value="9">9</button>
</div>
<div class="row">
<button class="nums" value="0" style='width:55%'>0</button>
<button classs="eqs" value="=" style='width:35%'>=</button>
</div>
</div>
<div class="operations">
<button class="nums" value="+">+</button>
<button class="nums" value="a">a</button>
<button class="nums" value="*">*</button>
<button class="nums" value="/">/</button>
</div>
</div>
</div>
</body>
</html>
Hi you need to put a container with direction: rtl; and display with direction: ltr. Working code in sandbox attached
.display-container{
direction: rtl;
border: 1px solid black;
width: 200px;
height: 30px;
margin: 10px;
overflow: hidden;
}
.display{
white-space: nowrap;
direction: ltr;
display: inline-block;
padding: 4px;
}
<div class="display-container">
<span class="display" id="display"><span>
</div>
https://codesandbox.io/s/stack-overflow-calculator-rtl-vs-ltf-cwhzi
The issue should be as simple as removing the direction: rtl; from you CSS.
Codesandbox link
Apart from removing the direction: rtl, how about using a hidden overflow container and a CustomEvent listener that will shift the oldest character from the display into the container out of view upon reaching a certain threshold of characters or width (can be whatever you want)?
This way you will get a fine-grained control over the overflow (note that this is not a non-standard "overflow" event, if you are worried about collisions, just name it differently) and the ability to perform other actions.
The approach has an additional benefit of being easily extendable with a "backspace" feature, as all overflow characters can be pushed back into the display by inverting the operation.
const display = document.getElementById('display');
const numbers = document.getElementsByClassName('nums');
const overflow = document.querySelector("#overflow");
display.addEventListener("overflow", ({
detail: {
oldest
}
}) => {
overflow.innerText += oldest
});
for (let i = 0; i < numbers.length; i++) {
numbers[i].addEventListener('click', () => {
const {
innerText
} = display;
const chars = innerText.split(""); //allowed as you use a strict subset of characters;
chars.push(numbers[i].value);
if (chars.length > 23) { //configure length to your liking
const eventInit = {
detail: {
oldest: chars.shift()
}
};
const overEvent = new CustomEvent("overflow", eventInit);
display.dispatchEvent(overEvent);
}
display.innerText = chars.join("");
});
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
button {
padding: 10px 18px
}
.operations button {
margin-top: 5px;
padding: 10px 15px;
}
.numbers {
width: 80%;
display: block;
align-items: center;
}
.container {
border: 1px solid black;
padding: 20px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 7px 0;
}
.overflow {
display: none;
}
.display {
border: 1px solid black;
width: 200px;
height: 30px;
margin: 10px;
padding: 6px;
text-align: right;
overflow: hidden;
}
.butts {
display: flex;
}
.operations {
display: flex;
margin-top: 2px;
flex-direction: column;
margin-left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="overflow" id="overflow"></div>
<div class="display" id='display'></div>
<div class="butts">
<div class="numbers">
<div class="row">
<button class="nums" value="1">1</button>
<button class="nums" value="2">2</button>
<button class="nums" value="3">3</button>
</div>
<div class="row">
<button class="nums" value="4">4</button>
<button class="nums" value='5'>5</button>
<button class="nums" value='6'>6</button>
</div>
<div class="row">
<button class="nums" value="7">7</button>
<button class="nums" value="8">8</button>
<button class="nums" value="9">9</button>
</div>
<div class="row">
<button class="nums" value="0" style='width:55%'>0</button>
<button classs="eqs" value="=" style='width:35%'>=</button>
</div>
</div>
<div class="operations">
<button class="nums" value="+">+</button>
<button class="nums" value="a">a</button>
<button class="nums" value="*">*</button>
<button class="nums" value="/">/</button>
</div>
</div>
</div>
</body>
</html>
const display = document.getElementById('display');
const numbers = document.getElementsByClassName('nums');
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i].value)
numbers[i].addEventListener('click', () => {
console.log(display.innerText + `${numbers[i].value}`)
display.innerText = display.innerText + `${String(numbers[i].value)}`;
})
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
button {
padding: 10px 18px
}
.operations button {
margin-top: 5px;
padding: 10px 15px;
}
.numbers {
width: 80%;
display: block;
/* flex-direction; */
/* justify-content: space-evenly; */
align-items: center;
}
.container {
border: 1px solid black;
padding: 20px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
/* align-items: center; */
margin: 7px 0;
}
.display {
border: 1px solid black;
width: 200px;
height: 30px;
margin: 10px;
text-align:right;
overflow: hidden;
direction: ltr;
}
.butts {
display: flex;
}
.operations {
display: flex;
margin-top: 2px;
flex-direction: column;
margin-left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="display" id='display'>
</div>
<div class="butts">
<div class="numbers">
<div class="row">
<button class="nums" value="1">1</button>
<button class="nums" value="2">2</button>
<button class="nums" value="3">3</button>
</div>
<div class="row">
<button class="nums" value="4">4</button>
<button class="nums" value='5'>5</button>
<button class="nums" value='6'>6</button>
</div>
<div class="row">
<button class="nums" value="7">7</button>
<button class="nums" value="8">8</button>
<button class="nums" value="9">9</button>
</div>
<div class="row">
<button class="nums" value="0" style='width:55%'>0</button>
<button classs="eqs" value="=" style='width:35%'>=</button>
</div>
</div>
<div class="operations">
<button class="nums" value="+">+</button>
<button class="nums" value="a">a</button>
<button class="nums" value="*">*</button>
<button class="nums" value="/">/</button>
</div>
</div>
</div>
</body>
</html>
const display = document.getElementById('display');
const numbers = document.getElementsByClassName('nums');
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i].value)
numbers[i].addEventListener('click', () => {
console.log(display.innerText + `${numbers[i].value}`)
display.innerText = display.innerText + `${String(numbers[i].value)}`;
})
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
button {
padding: 10px 18px
}
.operations button {
margin-top: 5px;
padding: 10px 15px;
}
.numbers {
width: 80%;
display: block;
/* flex-direction; */
/* justify-content: space-evenly; */
align-items: center;
}
.container {
border: 1px solid black;
padding: 20px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
/* align-items: center; */
margin: 7px 0;
}
.display {
border: 1px solid black;
width: 200px;
height: 30px;
margin: 10px;
text-align: right;
overflow: hidden;
direction: rtl;
}
.butts {
display: flex;
}
.operations {
display: flex;
margin-top: 2px;
flex-direction: column;
margin-left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="display" id='display'></div>
<div class="butts">
<div class="numbers">
<div class="row">
<button class="nums" value="1">1</button>
<button class="nums" value="2">2</button>
<button class="nums" value="3">3</button>
</div>
<div class="row">
<button class="nums" value="4">4</button>
<button class="nums" value='5'>5</button>
<button class="nums" value='6'>6</button>
</div>
<div class="row">
<button class="nums" value="7">7</button>
<button class="nums" value="8">8</button>
<button class="nums" value="9">9</button>
</div>
<div class="row">
<button class="nums" value="0" style='width:55%'>0</button>
<button classs="eqs" value="=" style='width:35%'>=</button>
</div>
</div>
<div class="operations">
<button class="nums" value="+">+</button>
<button class="nums" value="a">a</button>
<button class="nums" value="*">*</button>
<button class="nums" value="/">/</button>
</div>
</div>
</div>
</body>
</html>
You can change the text direction with LTR & RTL source

How would I store and evaluate the user input from my calculator app?

Good morning!
I am still working on my calculator app and I'm trying to create a function that will store the input from the user and evaluate it. I don't know if this idea will work as intended, but I'm trying my best to keep from copying a tutorial and learn to think like a programmer.
let reset = document.getElementById("reset"),
output = document.getElementById("output"),
calcButtons = document.getElementById("calc_buttons");
// Clears the calculator display
function clearScreen() {
output.innerHTML = " "
}
// Keeps track of any of the calculator buttons being pressed
calcButtons.addEventListener("click", printNum, false);
// Prints the clicked buttons to the display allows them to concatenate
function printNum(e) {
if (e.target !== e.currentTarget) {
let clickedItem = e.target.value;
output.innerHTML += clickedItem;
};
};
function equal() {
let userInput = document.getElementById("output").value;
eval(userInput);
console.log(eval(userInput));
}
* {
background-color: silver;
}
h1 {
text-align: center;
width: 600px;
margin-left: auto;
margin-right: auto;
}
#calc_buttons {
display: grid;
align-content: center;
justify-content: center;
min-height: 50vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(6);
margin-top: 200px;
position: relative;
margin-top: 50px;
}
#reset {
grid-column: span 4;
}
#calc_buttons > button {
cursor: pointer;
font-size: 1.5rem;
border: 1px solid white;
outline: none;
background-color: #6699cc;
width: 100px;
height: 80px;
}
#calc_buttons > button:hover {
background-color: rgba(102, 153, 204, 70%);
}
#output {
font-size: 2.5rem;
border: 2px solid black;
grid-column: span 4;
height: 50px;
text-align: right;
border-radius: 10px;
padding: 5px;
}
#calculator {
border: 3px solid black;
border-radius: 10px;
height: 600px;
width: 450px;
margin-left: auto;
background-color: silver;
box-shadow: -10px 10px 10px;
margin-right: auto;
}
<HTML>
<h1> My First JavaScript Calculator </h2>
<div id="calculator">
<div id="calc_buttons">
<span id="output"></span>
<button onclick="clearScreen()"class="operate" id="reset">C</button>
<button class="num" id="seven" value="7">7</button>
<button class="num" id="eight" value="8">8</button>
<button class="num" id="nine" value="9">9</button>
<button class="operate" id="divide" value="/">/</button>
<button class="num" id="four" value="4">4</button>
<button class="num" id="five" value="5">5</button>
<button class="num" id="six" value="6">6</button>
<button class="operate" id="multiply" value="*">*</button>
<button class="num" id="one" value="1">1</button>
<button class="num" id="two" value="2">2</button>
<button class="num" id="three" value="3">3</button>
<button class="operate" id="minus" value="-">-</button>
<button class="num" id="zero" value="0">0</button>
<button class="operate" id="decimal" value=".">.</button>
<button onclick="equal()" class="operate" id="equals" value="=">=</button>
<button class="operate" id="plus" value="+">+</button>
</div>
</HTML>
https://codepen.io/tphelps5/pen/GRgBMMZ?editors=1010

Transition duration on a js click

I have a page with a button; and when I click on it I want to have a transition which display a block and remove the button.
Here is my code:
HTML
<body>
<p class="launch-game">Launch Game</p>
<div class="wrapper clearfix">
<form>
<p id="question" class="question"></p>
<div class="block-answers">
<button id="answer-0" type="submit" class="answer"></button>
<button id="answer-1" type="submit" class="answer"></button>
<button id="answer-2" type="submit" class="answer"></button>
</div>
<p id="result" class="result"></p>
</form>
</div>
<script src="script.js"></script>
</body>
CSS
.wrapper {
transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
overflow: hidden;
display: none;
transition: opacity 2s;
opacity: 0;
}
.launch-game {
text-align: center;
font-family: Lato;
font-size: 20px;
text-transform: uppercase;
cursor: pointer;
font-weight: 300;
}
Here is my EvenListener when I click on the button
document.querySelector('.launch-game').addEventListener('click',
function() {
document.querySelector('.launch-game').style.display = 'none';
document.querySelector('.wrapper').style.display = 'block';
document.querySelector('.wrapper').style.opacity = '1';
});
Instead of display none/block. Keep height and width as 0 initially and then set them to be auto. Transitions doesn't work for display none-> block transition.
document.querySelector('.launch-game').addEventListener('click',
function() {
document.querySelector('.launch-game').style.display = 'none';
document.querySelector('.wrapper').style.width = 'auto';
document.querySelector('.wrapper').style.height = 'auto';
document.querySelector('.wrapper').style.opacity = '1';
});
.wrapper {
transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: 0;
height: 0;
transition: opacity 2s;
opacity: 0;
}
.launch-game {
text-align: center;
font-family: Lato;
font-size: 20px;
text-transform: uppercase;
cursor: pointer;
font-weight: 300;
}
<body>
<p class="launch-game">Launch Game</p>
<div class="wrapper clearfix">
<form>
<p id="question" class="question"></p>
<div class="block-answers">
<button id="answer-0" type="submit" class="answer"></button>
<button id="answer-1" type="submit" class="answer"></button>
<button id="answer-2" type="submit" class="answer"></button>
</div>
<p id="result" class="result"></p>
</form>
</div>
<script src="script.js"></script>
</body>

How to put buttons on the leaflet map

I am using leaflet map in my application & using bootstrap for responsiveness.
I have some buttons bellow that map.
It looks something like this.
But I want to overlap buttons on map like this
Here is my HTML
<div class="span9" style="height:100%">
<div id="map"></div>
<div style="padding-left: 10px;padding-right: 10px">
<input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" />
<input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
<span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>
</div>
My css for map
html, body, #map, .row-fluid{
height: 100%;
}
#map {
width: 100%;
}
.btnStyle {
background-color: #4D90FE;
background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED);
border: 1px solid #3079ED;
color: #FFFFFF;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width:100%
}
.lblStyle {
color: red;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width: 100%;
font-weight: bold;
}
Leaflet.js provides the following classes:
leaflet-bottom
leaflet-top
leaflet-left
leaflet-right
Generic HTML example:
<div id="divmap"> <!--leaflet map wrapper div -->
<div id="map" > <!--leaflet map div -->
<div class="leaflet-bottom leaflet-left">
<div id="marker-legend"> <!-- here the legend -->
</div>
</div>
</div>
</div>
Adapting the previous HTML to your particular question:
<div class="span9" style="height:100%">
<div id="map">
<div class="leaflet-bottom leaflet-left">
<input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3 leaflet-control" />
<input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3 leaflet-control" />
<span id="studentsCount" class="lblStyle span3 leaflet-control"> Ikke rutesat: </span>
</div>
</div>
</div>
I hope i understood you right and it helps.
Here is the fiddle: http://jsfiddle.net/g3JrG/4/
HTML:
<div class="span9" style="height:100%">
<div id="map-wrapper">
<div id="map"></div>
<div id="button-wrapper">
<input type="button" id="Btn1" value="Btn1" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" class="btnStyle span3" />
<input type="button" id="Btn3" value="Btn3" class="btnStyle span3" />
</div>
</div>
<span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>
CSS:
#map-wrapper {
width: 100%;
height: 500px;
position: relative;
border: 1px solid black;
}
#map {
width: 100%;
height: 100%;
background-color: green;
}
#button-wrapper {
position: absolute;
bottom: 10px;
width: 100%;
border: 1px solid red;
}
TJL
I hope i understood your question right. You want to show three buttons inside the map and map should have rounded corners as well as the buttons should also have rounded corners.
Hope this helps.
Try this:
HTML:
<div class="span9" style="height:100%">
<div id="map">
<div style="padding-left: 10px;padding-right: 10px; position:absolute; bottom:-10px; width:100%;">
<input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" />
<input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
</div>
</div>
<span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>
CSS:
html, body, #map, .row-fluid{
height: 100%;
}
#map {
width: 100%;
border-radius: 15px;
border:solid 1px black;
}
.btnStyle {
cursor:pointer;
background-color: #4D90FE;
border-radius: 15px;
background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED);
border: 1px solid #3079ED;
color: #FFFFFF;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width:28%
}
.lblStyle {
color: red;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width: 100%;
font-weight: bold;
}
Fiddle

Categories