add/sum section

abelstor · abelstor · commit 861ba679f936 · 2026-01-21T20:11:11.000+01:00
diff --git a/index.html b/index.html
@@ -19,13 +19,35 @@ <h1>JavaScript Basics</h1>
                 <h3 id="smile"></h3>
             </div>
         </section>
+        <section class="section">
+            <h3 class="sum-title">Sum two numbers</h3>
+            <div class="section-content">
+                <div class="sum-content">
+                    <label>Type number one</label>
+                    <input type="number" id="num-1">
+                </div>
+                <div class="sum-content">
+                    <label>Type number two</label>
+                    <input type="number" id="num-2">
+                </div>
+            </div>
+            <button id="result-button">Sum +</button>
+            <h3 id="result"></h3>
+        </section>
     </main>
 
     <script>
         document.querySelector('#smile-button').addEventListener('click', function () {
             let name = prompt('Type your name!');
-            document.getElementById('smile').innerHTML = `Welcome ${name}, nice to meet you! 😊`;
+            document.getElementById('smile').innerHTML = `Welcome <span>${name}</span>, nice to meet you! 😊`;
         });
+
+        document.querySelector('#result-button').addEventListener('click', function () {
+            let num1 = document.getElementById('num-1').value;
+            let num2 = document.getElementById('num-2').value;
+            let result = parseInt(num1) + parseInt(num2);
+            document.getElementById('result').innerHTML = `Rresult is: <span>${result}</span>`;
+        })
     </script>
 
 </body>
diff --git a/styles.css b/styles.css
@@ -8,6 +8,7 @@ html,
 body {
   height: 100%;
   font-family: Arial, sans-serif;
+  color: darkslategray;
 }
 
 body {
@@ -41,17 +42,41 @@ section {
   padding: 1.5rem;
   background-color: #f9f9f9;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
 }
 
 .section {
   margin: 24px auto;
   max-width: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+.section-content{
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-bottom: 1rem;
+  gap: 2rem;
 }
 
 .smile-content {
   text-align: center;
 }
 
+.sum-title{
+  color: chocolate;
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+span{
+  color: chocolate;
+  font-size: 1.5rem;
+}
+
 button {
   background-color: blueviolet;
   color: bisque;
@@ -61,4 +86,27 @@ button {
   font-size: 1rem;
   cursor: pointer;
   margin: 1rem;
-}
+  max-width: fit-content;
+  align-self: center;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.7rem;
+  font-weight: 600;
+}
+
+input {
+  width: 100%;
+  padding: 0.8rem 1rem;
+  border: 1px solid gray;
+  border-radius: 5px;
+  font-family: inherit;
+  font-size: 1rem;
+}
+
+input:focus {
+  outline: none;
+  border-color: blueviolet;
+  box-shadow: 0 0 5px rgba(138, 43, 226, 0.5);
+}
