Merge pull request #34 from Tsiangana/master

harsh98trivedi · web-flow · commit 374378b25df5 · 2023-12-06T03:44:20.000+05:30
Resize components
diff --git a/index.html b/index.html
@@ -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>
diff --git a/scripts/hist.js b/scripts/hist.js
@@ -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(){
diff --git a/styles/style.css b/styles/style.css
@@ -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;
