Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history 
Fixed the responsive layout trouble
  • Loading branch information
@paulorasilva
paulorasilva committed Apr 23, 2020
1 parent 735a7c5 commit ffc24c1
Showing 1 changed file with 44 additions and 42 deletions.
86 changes: 44 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- Created by PauloRASilva
This code use only Bootstrap 4, no custom Css here
Made using Bootstrap 4
Follow me on GitHub
Be free to improve this code!
-->
Expand All @@ -15,65 +15,67 @@
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="keys.js" type="text/javascript"></script>

</head>

<body>

<div class="container">

<p>
<div class="row">
<div class="col-4 text-center"></div>
<div class="col-4 text-center">
<div class="row justify-content-center">

<div class="col-lg-5 col-md-6">

<!-- Start of the card -->
<div class ="card">
<div class="card-body">
<div class="row">
<div class="col">
<input class="form-control bg-dark text-white text-right"
id="display" placeholder="CalculaThor" name='display' value="" disabled>
</div>
</div>

<!-- Calculator Keyboard-->
<p>
<div class="row" name="line2">
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '1'">1</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '2'">2</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '3'">3</button></div>
<div class="col"><button type="button" class="btn btn-warning btn-lg btn-block" onclick="display.value += '+'">+</button></div>
<div class="row">
<div class="col">
<input class="form-control bg-dark text-white text-right"
id="display" placeholder="CalculaThor" name='display' value="" disabled>
</div>
</div>

<p>
<div class="row" name="line3">
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '4'">4</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '5'">5</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '6'">6</button></div>
<div class="col"><button type="button" class="btn btn-warning btn-lg btn-block" onclick="display.value += '-'">-</button></div>
</div>
<!-- Calculator Keyboard-->
<p>
<div class="row" name="line2">
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '1'">1</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '2'">2</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '3'">3</button></div>
<div class="col"><button type="button" class="btn btn-warning btn-lg btn-block" onclick="display.value += '+'">+</button></div>
</div>

<p>
<div class="row" name="line4">
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '7'">7</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '8'">8</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '9'">9</button></div>
<div class="col"><button type="button" class="btn btn-warning btn-lg btn-block" onclick="display.value += '/'">/</button></div>
</div>
<p>
<div class="row" name="line3">
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '4'">4</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '5'">5</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '6'">6</button></div>
<div class="col"><button type="button" class="btn btn-warning btn-lg btn-block" onclick="display.value += '-'">-</button></div>
</div>

<p>
<div class="row" name="line5">
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '0'">0</button></div>
<div class="col"><button type="button" class="btn btn-danger btn-lg btn-block" onclick="display.value = ''">Ac</button></div>
<div class="col"><button type="button" class="btn btn-success btn-lg btn-block" onclick="display.value = eval(display.value)">=</button></div>
<div class="col"><button type="button" class="btn btn-warning btn-lg btn-block" onclick="display.value += '*'">x</button></div>
</div>

</div>
</div>
</div>
<p>
<div class="row" name="line4">
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '7'">7</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '8'">8</button></div>
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '9'">9</button></div>
<div class="col"><button type="button" class="btn btn-warning btn-lg btn-block" onclick="display.value += '/'">/</button></div>
</div>

<p>
<div class="row" name="line5">
<div class="col"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="display.value += '0'">0</button></div>
<div class="col"><button type="button" class="btn btn-danger btn-lg btn-block" onclick="display.value = ''">C</button></div>
<div class="col"><button type="button" class="btn btn-success btn-lg btn-block" onclick="display.value = eval(display.value)">=</button></div>
<div class="col"><button type="button" class="btn btn-warning btn-lg btn-block" onclick="display.value += '*'">x</button></div>
</div>
</div>
</div>
</div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
Expand Down

0 comments on commit ffc24c1

Please sign in to comment.