From 06519b37c87e3a4e8444e2035918a26232b2221a Mon Sep 17 00:00:00 2001
From: Meetpidev <128205241+Meetpidev@users.noreply.github.com>
Date: Fri, 4 Oct 2024 10:32:45 +0530
Subject: [PATCH 1/3] =?UTF-8?q?The=20Pok=C3=A9mon=20Search=20App?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
The Pokémon Search App allows users to input the name or ID of a Pokémon and retrieves detailed information, including its stats and avatar, from an external API.
Key Features:
(1) User Input Handling: The application captures user input for Pokémon names or IDs.
(2) API Integration: It fetches data from the Pokémon API, dynamically updating the interface with relevant information.
(3) Responsive Design: The app is designed to provide a user-friendly experience, displaying Pokémon details such as weight, height, types, and various stats like HP, attack, and defense.
(4) Error Management: It includes error handling to alert users when a Pokémon is not found.
---
projects/pokemonSearch/Readme.md | 9 ++
projects/pokemonSearch/index.html | 70 +++++++++++
projects/pokemonSearch/script.js | 73 +++++++++++
projects/pokemonSearch/style.css | 203 ++++++++++++++++++++++++++++++
4 files changed, 355 insertions(+)
create mode 100644 projects/pokemonSearch/Readme.md
create mode 100644 projects/pokemonSearch/index.html
create mode 100644 projects/pokemonSearch/script.js
create mode 100644 projects/pokemonSearch/style.css
diff --git a/projects/pokemonSearch/Readme.md b/projects/pokemonSearch/Readme.md
new file mode 100644
index 00000000..15fc21a4
--- /dev/null
+++ b/projects/pokemonSearch/Readme.md
@@ -0,0 +1,9 @@
+This repository contains the code for the Pokemon Search App, one of the projects in JavaScript from FreeCodeCamp.
+
+The Pokémon Search App allows users to input the name or ID of a Pokémon and retrieves detailed information, including its stats and avatar, from an external API.
+
+Key Features:
+(1) User Input Handling: The application captures user input for Pokémon names or IDs.
+(2) API Integration: It fetches data from the Pokémon API, dynamically updating the interface with relevant information.
+(3) Responsive Design: The app is designed to provide a user-friendly experience, displaying Pokémon details such as weight, height, types, and various stats like HP, attack, and defense.
+(4) Error Management: It includes error handling to alert users when a Pokémon is not found.
\ No newline at end of file
diff --git a/projects/pokemonSearch/index.html b/projects/pokemonSearch/index.html
new file mode 100644
index 00000000..127a09af
--- /dev/null
+++ b/projects/pokemonSearch/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ Pokemon Search App
+
+
+
+
Pokémon Search App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Base
+
Stats
+
+
+
+
HP:
+
+
+
+
Attack:
+
+
+
+
Defense:
+
+
+
+
Special Attack:
+
+
+
+
Special Defense:
+
+
+
+
Speed:
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/pokemonSearch/script.js b/projects/pokemonSearch/script.js
new file mode 100644
index 00000000..522d89e3
--- /dev/null
+++ b/projects/pokemonSearch/script.js
@@ -0,0 +1,73 @@
+// Get references to the DOM elements
+const userInput = document.getElementById("search-input");
+const submitBtn = document.getElementById("search-button");
+const pokemonImage = document.getElementById("pokemon-image");
+
+// Elements to display Pokémon details
+const pokemonName = document.getElementById("pokemon-name");
+const pokemonId = document.getElementById("pokemon-id");
+const pokemonWeight = document.getElementById("weight");
+const pokemonHeight = document.getElementById("height");
+const pokemonTypes = document.getElementById("types");
+
+// Elements for Pokémon stats
+const hp = document.getElementById("hp");
+const attack = document.getElementById("attack");
+const defense = document.getElementById("defense");
+const specialAttack = document.getElementById("special-attack");
+const specialDefense = document.getElementById("special-defense");
+const speed = document.getElementById("speed");
+
+// Function to search the Pokédex based on user input
+const searchPokedex = async () => {
+ // Check if the input field is empty and return if true
+ if (userInput.value === "") {
+ return;
+ }
+
+ try {
+ // Fetch Pokémon data from the API using the user input (converted to lowercase)
+ const res = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${userInput.value.toLowerCase()}`);
+ const data = await res.json(); // Parse the JSON response
+
+ // Destructure necessary properties from the fetched data
+ const { name, id, weight, height, types, stats, sprites } = data;
+
+ // Update the Pokémon image element with the fetched sprite
+ pokemonImage.innerHTML = `
+
+ `;
+
+ // Update the HTML elements with the fetched Pokémon details
+ pokemonName.innerHTML = name.toUpperCase(); // Display name
+ pokemonId.innerHTML = `#${id}`; // Display Pokémon ID
+
+ pokemonWeight.innerHTML = `Weight: ${weight}`;
+ pokemonHeight.innerHTML = `Height: ${height}`;
+
+ // Display types with appropriate styling based on type names
+ pokemonTypes.innerHTML = types.map(type => `${type.type.name.toUpperCase()}`).join(" ");
+
+ // Update stats in their respective elements
+ hp.innerHTML = stats[0].base_stat;
+ attack.innerHTML = stats[1].base_stat;
+ defense.innerHTML = stats[2].base_stat;
+ specialAttack.innerHTML = stats[3].base_stat;
+ specialDefense.innerHTML = stats[4].base_stat;
+ speed.innerHTML = stats[5].base_stat;
+ }
+ catch(err) {
+ console.log(err);
+ alert("Pokemon not found");
+ }
+}
+
+// Event listener for button click to trigger search function
+submitBtn.addEventListener("click", searchPokedex);
+
+// Event listener for 'Enter' key press to trigger search function
+userInput.addEventListener("keydown", (e) => {
+ if (e.key === "Enter") {
+ searchPokedex(); // Call search function on 'Enter' key press
+ }
+});
\ No newline at end of file
diff --git a/projects/pokemonSearch/style.css b/projects/pokemonSearch/style.css
new file mode 100644
index 00000000..57cb00fa
--- /dev/null
+++ b/projects/pokemonSearch/style.css
@@ -0,0 +1,203 @@
+@import url('https://fonts.cdnfonts.com/css/pokemon-solid');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+ background-color: beige;
+}
+
+h1 {
+ text-align: center;
+ margin-bottom: 4vh;
+ font-family: 'Pokemon Solid', sans-serif;
+ color: rgb(0, 0, 0);
+ text-shadow: #42a1ff 6px 6px;
+ font-size: 3rem;
+}
+
+#pokedex-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#search {
+ width: 100%;
+ text-align: center;
+}
+
+#pokedex {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: rgb(0, 153, 255);
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: black 5px 5px;
+ width: 30%;
+ margin-bottom: 20px;
+}
+
+label {
+ margin-bottom: 10px;
+ font-size: 1.3rem;
+ color: white;
+}
+
+#search input {
+ outline: none;
+ border: none;
+ padding: 10px;
+ border-radius: 8px;
+ width: 70%;
+}
+
+#search button {
+ border: none;
+ padding: 10px;
+ border-radius: 8px;
+ cursor: pointer;
+ color: white;
+ background-color: rgb(60, 61, 61);
+ width: 20%;
+}
+
+#pokemon-info {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ min-height: 300px;
+ padding: 10px;
+ background-color: rgb(12, 12, 12);
+ /*border: rgb(223, 223, 223) solid 10px;*/
+ color: white;
+ border-radius: 5px;
+ margin-top: 5vh;
+ margin-bottom: 5vh;
+ font-size: 1.5rem;
+}
+
+#pokemon-image img {
+ width: 200px;
+}
+
+#weight, #height {
+ align-self: flex-start;
+}
+
+#types {
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+
+#types span {
+ padding: 8px;
+ border-radius: 8px;
+ font-size: 17px;
+}
+
+table {
+ border-spacing: 10px;
+ width: 100%;
+}
+
+td, th {
+ background-color: #ffffff;
+ padding: 10px;
+}
+
+/*Styling for pokemon types*/
+
+.normal {
+ background-color: #b7b7aa;
+}
+
+.fire {
+ background-color: #ff6f52;
+}
+
+.water {
+ background-color: #42a1ff;
+}
+
+.electric {
+ background-color: #fecc33;
+}
+
+.grass {
+ background-color: #78cc55;
+}
+
+.ice {
+ background-color: #66ccfe;
+}
+
+.fighting {
+ background-color: #d3887e;
+}
+
+.poison {
+ background-color: #c68bb7;
+}
+
+.ground {
+ background-color: #dfba52;
+}
+
+.flying {
+ background-color: #8899ff;
+}
+
+.psychic {
+ background-color: #ff66a3;
+}
+
+.bug {
+ background-color: #aabb23;
+}
+
+.rock {
+ background-color: #baaa66;
+}
+
+.ghost {
+ background-color: #9995d0;
+}
+
+.dragon {
+ background-color: #9e93f1;
+}
+
+.dark {
+ background-color: #b59682;
+}
+
+.steel {
+ background-color: #abaabb;
+}
+
+.fairy {
+ background-color: #ed99ed;
+}
+
+/*Media Queries*/
+
+@media screen and (max-width: 700px) {
+ #pokedex {
+ width: 90%;
+ margin-bottom: 5vh;
+ }
+}
+
+@media screen and (min-width: 501px) and (max-width: 1100px) {
+ #pokedex {
+ width: 50%;
+ margin-bottom: 5vh;
+ }
+}
\ No newline at end of file
From 4d2392142d26ffcad538ea2df40658dab06a278f Mon Sep 17 00:00:00 2001
From: Meetpidev <128205241+Meetpidev@users.noreply.github.com>
Date: Fri, 4 Oct 2024 21:46:18 +0530
Subject: [PATCH 2/3] Delete projects/pokemonSearch directory
---
projects/pokemonSearch/Readme.md | 9 --
projects/pokemonSearch/index.html | 70 -----------
projects/pokemonSearch/script.js | 73 -----------
projects/pokemonSearch/style.css | 203 ------------------------------
4 files changed, 355 deletions(-)
delete mode 100644 projects/pokemonSearch/Readme.md
delete mode 100644 projects/pokemonSearch/index.html
delete mode 100644 projects/pokemonSearch/script.js
delete mode 100644 projects/pokemonSearch/style.css
diff --git a/projects/pokemonSearch/Readme.md b/projects/pokemonSearch/Readme.md
deleted file mode 100644
index 15fc21a4..00000000
--- a/projects/pokemonSearch/Readme.md
+++ /dev/null
@@ -1,9 +0,0 @@
-This repository contains the code for the Pokemon Search App, one of the projects in JavaScript from FreeCodeCamp.
-
-The Pokémon Search App allows users to input the name or ID of a Pokémon and retrieves detailed information, including its stats and avatar, from an external API.
-
-Key Features:
-(1) User Input Handling: The application captures user input for Pokémon names or IDs.
-(2) API Integration: It fetches data from the Pokémon API, dynamically updating the interface with relevant information.
-(3) Responsive Design: The app is designed to provide a user-friendly experience, displaying Pokémon details such as weight, height, types, and various stats like HP, attack, and defense.
-(4) Error Management: It includes error handling to alert users when a Pokémon is not found.
\ No newline at end of file
diff --git a/projects/pokemonSearch/index.html b/projects/pokemonSearch/index.html
deleted file mode 100644
index 127a09af..00000000
--- a/projects/pokemonSearch/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
-
-
-
-
-
-
- Pokemon Search App
-
-
-
-
Pokémon Search App
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Base
-
Stats
-
-
-
-
HP:
-
-
-
-
Attack:
-
-
-
-
Defense:
-
-
-
-
Special Attack:
-
-
-
-
Special Defense:
-
-
-
-
Speed:
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/projects/pokemonSearch/script.js b/projects/pokemonSearch/script.js
deleted file mode 100644
index 522d89e3..00000000
--- a/projects/pokemonSearch/script.js
+++ /dev/null
@@ -1,73 +0,0 @@
-// Get references to the DOM elements
-const userInput = document.getElementById("search-input");
-const submitBtn = document.getElementById("search-button");
-const pokemonImage = document.getElementById("pokemon-image");
-
-// Elements to display Pokémon details
-const pokemonName = document.getElementById("pokemon-name");
-const pokemonId = document.getElementById("pokemon-id");
-const pokemonWeight = document.getElementById("weight");
-const pokemonHeight = document.getElementById("height");
-const pokemonTypes = document.getElementById("types");
-
-// Elements for Pokémon stats
-const hp = document.getElementById("hp");
-const attack = document.getElementById("attack");
-const defense = document.getElementById("defense");
-const specialAttack = document.getElementById("special-attack");
-const specialDefense = document.getElementById("special-defense");
-const speed = document.getElementById("speed");
-
-// Function to search the Pokédex based on user input
-const searchPokedex = async () => {
- // Check if the input field is empty and return if true
- if (userInput.value === "") {
- return;
- }
-
- try {
- // Fetch Pokémon data from the API using the user input (converted to lowercase)
- const res = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${userInput.value.toLowerCase()}`);
- const data = await res.json(); // Parse the JSON response
-
- // Destructure necessary properties from the fetched data
- const { name, id, weight, height, types, stats, sprites } = data;
-
- // Update the Pokémon image element with the fetched sprite
- pokemonImage.innerHTML = `
-
- `;
-
- // Update the HTML elements with the fetched Pokémon details
- pokemonName.innerHTML = name.toUpperCase(); // Display name
- pokemonId.innerHTML = `#${id}`; // Display Pokémon ID
-
- pokemonWeight.innerHTML = `Weight: ${weight}`;
- pokemonHeight.innerHTML = `Height: ${height}`;
-
- // Display types with appropriate styling based on type names
- pokemonTypes.innerHTML = types.map(type => `${type.type.name.toUpperCase()}`).join(" ");
-
- // Update stats in their respective elements
- hp.innerHTML = stats[0].base_stat;
- attack.innerHTML = stats[1].base_stat;
- defense.innerHTML = stats[2].base_stat;
- specialAttack.innerHTML = stats[3].base_stat;
- specialDefense.innerHTML = stats[4].base_stat;
- speed.innerHTML = stats[5].base_stat;
- }
- catch(err) {
- console.log(err);
- alert("Pokemon not found");
- }
-}
-
-// Event listener for button click to trigger search function
-submitBtn.addEventListener("click", searchPokedex);
-
-// Event listener for 'Enter' key press to trigger search function
-userInput.addEventListener("keydown", (e) => {
- if (e.key === "Enter") {
- searchPokedex(); // Call search function on 'Enter' key press
- }
-});
\ No newline at end of file
diff --git a/projects/pokemonSearch/style.css b/projects/pokemonSearch/style.css
deleted file mode 100644
index 57cb00fa..00000000
--- a/projects/pokemonSearch/style.css
+++ /dev/null
@@ -1,203 +0,0 @@
-@import url('https://fonts.cdnfonts.com/css/pokemon-solid');
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: Arial, Helvetica, sans-serif;
-}
-
-body {
- background-color: beige;
-}
-
-h1 {
- text-align: center;
- margin-bottom: 4vh;
- font-family: 'Pokemon Solid', sans-serif;
- color: rgb(0, 0, 0);
- text-shadow: #42a1ff 6px 6px;
- font-size: 3rem;
-}
-
-#pokedex-container {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-#search {
- width: 100%;
- text-align: center;
-}
-
-#pokedex {
- display: flex;
- flex-direction: column;
- align-items: center;
- background-color: rgb(0, 153, 255);
- padding: 20px;
- border-radius: 8px;
- box-shadow: black 5px 5px;
- width: 30%;
- margin-bottom: 20px;
-}
-
-label {
- margin-bottom: 10px;
- font-size: 1.3rem;
- color: white;
-}
-
-#search input {
- outline: none;
- border: none;
- padding: 10px;
- border-radius: 8px;
- width: 70%;
-}
-
-#search button {
- border: none;
- padding: 10px;
- border-radius: 8px;
- cursor: pointer;
- color: white;
- background-color: rgb(60, 61, 61);
- width: 20%;
-}
-
-#pokemon-info {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 100%;
- min-height: 300px;
- padding: 10px;
- background-color: rgb(12, 12, 12);
- /*border: rgb(223, 223, 223) solid 10px;*/
- color: white;
- border-radius: 5px;
- margin-top: 5vh;
- margin-bottom: 5vh;
- font-size: 1.5rem;
-}
-
-#pokemon-image img {
- width: 200px;
-}
-
-#weight, #height {
- align-self: flex-start;
-}
-
-#types {
- margin-top: 20px;
- margin-bottom: 10px;
-}
-
-#types span {
- padding: 8px;
- border-radius: 8px;
- font-size: 17px;
-}
-
-table {
- border-spacing: 10px;
- width: 100%;
-}
-
-td, th {
- background-color: #ffffff;
- padding: 10px;
-}
-
-/*Styling for pokemon types*/
-
-.normal {
- background-color: #b7b7aa;
-}
-
-.fire {
- background-color: #ff6f52;
-}
-
-.water {
- background-color: #42a1ff;
-}
-
-.electric {
- background-color: #fecc33;
-}
-
-.grass {
- background-color: #78cc55;
-}
-
-.ice {
- background-color: #66ccfe;
-}
-
-.fighting {
- background-color: #d3887e;
-}
-
-.poison {
- background-color: #c68bb7;
-}
-
-.ground {
- background-color: #dfba52;
-}
-
-.flying {
- background-color: #8899ff;
-}
-
-.psychic {
- background-color: #ff66a3;
-}
-
-.bug {
- background-color: #aabb23;
-}
-
-.rock {
- background-color: #baaa66;
-}
-
-.ghost {
- background-color: #9995d0;
-}
-
-.dragon {
- background-color: #9e93f1;
-}
-
-.dark {
- background-color: #b59682;
-}
-
-.steel {
- background-color: #abaabb;
-}
-
-.fairy {
- background-color: #ed99ed;
-}
-
-/*Media Queries*/
-
-@media screen and (max-width: 700px) {
- #pokedex {
- width: 90%;
- margin-bottom: 5vh;
- }
-}
-
-@media screen and (min-width: 501px) and (max-width: 1100px) {
- #pokedex {
- width: 50%;
- margin-bottom: 5vh;
- }
-}
\ No newline at end of file
From 0f72d9e936d31f5a71801282099a7c9f995c1dca Mon Sep 17 00:00:00 2001
From: Meetpidev <128205241+Meetpidev@users.noreply.github.com>
Date: Fri, 4 Oct 2024 21:49:00 +0530
Subject: [PATCH 3/3] Roman_Number_Converter
A simple and interactive web application that converts decimal numbers to Roman numerals. This project showcases basic HTML, CSS, and JavaScript skills while providing a user-friendly interface for converting numbers.
Features
- User Input: Enter a decimal number between 1 and 3999.
- Conversion: Click the "Convert" button to see the corresponding Roman numeral.
- Responsive Design: Works seamlessly across different devices and screen sizes.
- Attractive UI: Modern design with hover effects and smooth transitions.
---
Roman_Number_Converter/index.html | 18 ++++++++
Roman_Number_Converter/script.js | 41 +++++++++++++++++
Roman_Number_Converter/style.css | 73 +++++++++++++++++++++++++++++++
3 files changed, 132 insertions(+)
create mode 100644 Roman_Number_Converter/index.html
create mode 100644 Roman_Number_Converter/script.js
create mode 100644 Roman_Number_Converter/style.css
diff --git a/Roman_Number_Converter/index.html b/Roman_Number_Converter/index.html
new file mode 100644
index 00000000..4ec6ad86
--- /dev/null
+++ b/Roman_Number_Converter/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ Roman Numeral Converter
+
+
+
+
Roman Numeral Converter
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Roman_Number_Converter/script.js b/Roman_Number_Converter/script.js
new file mode 100644
index 00000000..ea90c3f8
--- /dev/null
+++ b/Roman_Number_Converter/script.js
@@ -0,0 +1,41 @@
+let number = document.getElementById("number");
+let convertBtn = document.getElementById("convert-btn");
+let output = document.getElementById("output");
+
+const romans = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
+const numerals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
+
+function convertToRoman() {
+ let userInput = Number(number.value);
+ output.innerText = "";
+ output.style.padding = "1.2rem";
+
+ if (number.value === "") {
+ output.innerText = "Please enter a valid number";
+ return;
+ } else if (number.value <= 0) {
+ output.innerText = "Please enter a number greater than or equal to 1";
+ return;
+ } else if (number.value > 3999) {
+ output.innerText = "Please enter a number less than or equal to 3999";
+ return;
+ }
+
+ for (let i = 0; i < romans.length; i++) {
+ while (userInput >= numerals[i]) {
+ userInput -= numerals[i];
+ output.innerText += romans[i];
+ }
+ }
+
+}
+
+window.addEventListener("load", () => {
+ output.style.padding = "0px";
+})
+convertBtn.addEventListener("click", convertToRoman);
+number.addEventListener("keydown", e => {
+ if (e.key === "Enter") {
+ convertToRoman();
+ }
+});
\ No newline at end of file
diff --git a/Roman_Number_Converter/style.css b/Roman_Number_Converter/style.css
new file mode 100644
index 00000000..70b04c93
--- /dev/null
+++ b/Roman_Number_Converter/style.css
@@ -0,0 +1,73 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-family: 'Arial', sans-serif;
+}
+
+html, body {
+ height: 100%;
+ background-color: #121212; /* Darker background for contrast */
+}
+
+#container {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+h1 {
+ margin-bottom: 1.5em;
+ color: #f0f0f0; /* Lighter color for better readability */
+}
+
+#number {
+ border: none;
+ outline: none;
+ padding: 15px;
+ background-color: #2c2c2c; /* Slightly lighter gray */
+ margin-bottom: 1.5em;
+ width: 30%;
+ font-size: 1.5rem;
+ color: white;
+ border-radius: 5px; /* Rounded corners */
+ transition: background-color 0.3s ease; /* Smooth transition */
+}
+
+#number::placeholder {
+ color: #b0b0b0; /* Placeholder color */
+}
+
+#number:hover {
+ background-color: #3a3a3a; /* Darker on hover */
+}
+
+#convert-btn {
+ border: none;
+ padding: 15px;
+ cursor: pointer;
+ margin-bottom: 1.5em;
+ width: 30%;
+ font-size: 1.5rem;
+ background-color: dodgerblue; /* Button color */
+ color: white; /* Text color */
+ border-radius: 5px; /* Rounded corners */
+ transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition */
+}
+
+#convert-btn:hover {
+ background-color: #0056b3; /* Darker blue on hover */
+ transform: scale(1.05); /* Slightly enlarge on hover */
+}
+
+#output {
+ background-color: #4caf50; /* Green output box */
+ color: white;
+ padding: 1.2rem;
+ font-size: 2rem;
+ border-radius: 5px; /* Rounded corners */
+ width: fit-content; /* Adjust width to content */
+ margin-top: -10px; /* Overlap slightly with button for aesthetics */
+}
\ No newline at end of file