harsh98trivedi
diff --git a/‎index.html‎
Lines changed: 10 additions & 9 deletions b/‎index.html‎
Lines changed: 10 additions & 9 deletions
diff --git a/‎scripts/hist.js‎
Lines changed: 3 additions & 3 deletions b/‎scripts/hist.js‎
Lines changed: 3 additions & 3 deletions
diff --git a/‎styles/style.css‎
Lines changed: 33 additions & 5 deletions b/‎styles/style.css‎
Lines changed: 33 additions & 5 deletions
@@ -49,15 +49,16 @@
 <link rel='icon' type='image/x-icon' href='./images/favicon.ico' />
 </head>
 <body>
- <div class="toggle-container">
- <label class="toggle-switch">
- <input type="checkbox" id="toggle-mode" />
- <span class="toggle-slider"></span>
- </label>
- </div>
+ 
 <div class="container">
  <h1>
- <a style="text-decoration: none; color: #f1c40f; margin-left: 1.25rem; cursor: pointer;" onclick="location.reload();">CALCULATOR</a>
+ <div class="toggle-container">
+ <label class="toggle-switch">
+ <input type="checkbox" id="toggle-mode" />
+ <span class="toggle-slider"></span>
+ </label>
+ </div>
+ <a class="tittle" onclick="location.reload();">CALCULATOR</a>
  <img id="historybutton" src="./images/history.png">
  </h1>
  <div class="calculator">
@@ -69,10 +70,10 @@ <h1>
  <td>
  <div class="row">
  <div class="col">
- <button style="background-color: #f01600; font-weight: bold; color: #ecf0f1; width: 8vw;" onclick="clearAll()">C</button>
+ <button onclick="clearAll()">C</button>
  </div>
  <div class="col">
- <button style="background-color: #f01600; font-weight: bold; color: #ecf0f1;width: 8vw;" onclick="deleteLastEntry()">CE</button>
+ <button onclick="deleteLastEntry()">CE</button>
  </div>
  </div>
  </td>
 
@@ -2,7 +2,7 @@ let historybutton = document.getElementById('historybutton');
 let history = document.getElementById('history');
 let bar1 = document.getElementById('bar1');
 let bar2 = document.getElementById('bar2');
-let dis=document.getElementById('answer');
+let dis = document.getElementById('answer');
 
 function showHistory() {
  let calcHistory = JSON.parse(localStorage.getItem("calcHistory")) || [];
@@ -19,7 +19,7 @@ function showHistory() {
  historyItem.style.fontSize = '25px';
  history.appendChild(historyItem);
  } else {
- for (let index = len-1; index >=0; index--) {
+ for (let index = len-1; index >= 0; index--) {
  const element = calcHistory[index];
  let historyItem = document.createElement('div');
  historyItem.className = 'historyelement';
@@ -35,7 +35,7 @@ function showHistory() {
 historybutton.addEventListener('click', showHistory);
 
 function clearAll(){
- dis.value=''
+ dis.value = '';
 }
 
 function hide(){
 
@@ -23,6 +23,10 @@ h1 {
  font-size: 2.5rem;
  font-weight: 500;
  margin-bottom: 0;
+ padding: 0 5px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
 } 
 
 input {
@@ -65,6 +69,7 @@ button {
  width: 20vw;
  height: 10vh;
  padding: 0.5rem 0;
+ cursor: pointer;
  margin: 0.25vmax;
  font-size: 2vmax;
  border-radius: 1rem;
@@ -116,8 +121,6 @@ a:hover{
  width:40px;
  height:40px;
  border-radius: 20px;
- float:right; 
- margin-right:15px;
  cursor: pointer;
 }
 
@@ -169,13 +172,25 @@ a:hover{
  }
 }
 
+@media (max-width: 700px) {
+ td button{
+ font-size: 18px;
+ font-weight: 600;
+ }
+}
+
 .toggle-container {
- position: absolute;
- top: 4rem;
- left: 3rem;
+ margin: 10px -10px 0 0;
 
 }
 
+.tittle{
+ text-decoration: none; 
+ color: #f1c40f;
+ cursor: pointer;
+ margin-left: -20px;
+}
+
 .toggle-switch {
  position: relative;
  display: inline-block;
@@ -278,6 +293,19 @@ input:checked + .toggle-slider:before {
  max-width: 20vw;
  margin: auto;
 }
+
+.row .col button{
+ background-color: #f01600;
+ font-weight: bold;
+ color: #ecf0f1; 
+ width: 8vw;
+}
+
+@media (max-width: 700px) {
+ .row .col button{
+ width: 10vw;
+ }
+}
 
 #answer {
  caret-color: #0f38f1;