00
00
diff --git a/projects/new-year-countdown/index.js b/projects/new-year-countdown/index.js
index 1a89f36..3ee8cd0 100644
--- a/projects/new-year-countdown/index.js
+++ b/projects/new-year-countdown/index.js
@@ -3,7 +3,7 @@ const hourEl = document.getElementById("hour");
const minuteEl = document.getElementById("minute");
const secondEl = document.getElementById("second");
-const newYearTime = new Date("Jan 1, 2022 00:00:00").getTime();
+const newYearTime = new Date("Jan 1, 2024 00:00:00").getTime();
updateCountdown();
diff --git a/projects/pomodoro-timer/index.html b/projects/pomodoro-timer/index.html
new file mode 100644
index 0000000..7cfe584
--- /dev/null
+++ b/projects/pomodoro-timer/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/pomodoro-timer/index.js b/projects/pomodoro-timer/index.js
new file mode 100644
index 0000000..22b4ede
--- /dev/null
+++ b/projects/pomodoro-timer/index.js
@@ -0,0 +1,42 @@
+const startEl = document.getElementById("start");
+const stopEl = document.getElementById("stop");
+const resetEl = document.getElementById("reset");
+const timerEl = document.getElementById("timer");
+
+let interval;
+let timeLeft = 1500;
+
+function updateTimer() {
+ let minutes = Math.floor(timeLeft / 60);
+ let seconds = timeLeft % 60;
+ let formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds
+ .toString()
+ .padStart(2, "0")}`;
+
+ timerEl.innerHTML = formattedTime;
+}
+
+function startTimer() {
+ interval = setInterval(() => {
+ timeLeft--;
+ updateTimer();
+ if (timeLeft === 0) {
+ clearInterval(interval);
+ alert("Time's up!");
+ timeLeft = 1500;
+ updateTimer();
+ }
+ }, 1000);
+}
+function stopTimer() {
+ clearInterval(interval);
+}
+function resetTimer() {
+ clearInterval(interval);
+ timeLeft = 1500;
+ updateTimer();
+}
+
+startEl.addEventListener("click", startTimer);
+stopEl.addEventListener("click", stopTimer);
+resetEl.addEventListener("click", resetTimer);
diff --git a/projects/pomodoro-timer/style.css b/projects/pomodoro-timer/style.css
new file mode 100644
index 0000000..0e6970b
--- /dev/null
+++ b/projects/pomodoro-timer/style.css
@@ -0,0 +1,47 @@
+.container {
+ margin: 0 auto;
+ max-width: 400px;
+ text-align: center;
+ padding: 20px;
+ font-family: "Roboto", sans-serif;
+}
+
+.title {
+ font-size: 36px;
+ margin-bottom: 10px;
+ color: #2c3e50;
+}
+
+.timer {
+ font-size: 72px;
+ color: #2c3e50;
+}
+
+button {
+ font-size: 18px;
+ padding: 10px 20px;
+ margin: 10px;
+ color: white;
+
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ text-transform: uppercase;
+ transition: opacity 0.3s ease-in-out;
+}
+
+button:hover {
+ opacity: 0.7;
+}
+
+#start {
+ background-color: #27ae60;
+}
+
+#stop {
+ background-color: #c0392b;
+}
+
+#reset {
+ background-color: #7f8c8d;
+}
diff --git a/projects/Q&A-section/app.js b/projects/q-and-a-section/app.js
similarity index 100%
rename from projects/Q&A-section/app.js
rename to projects/q-and-a-section/app.js
diff --git a/projects/Q&A-section/index.html b/projects/q-and-a-section/index.html
similarity index 100%
rename from projects/Q&A-section/index.html
rename to projects/q-and-a-section/index.html
diff --git a/projects/Q&A-section/styles.css b/projects/q-and-a-section/styles.css
similarity index 100%
rename from projects/Q&A-section/styles.css
rename to projects/q-and-a-section/styles.css
diff --git a/projects/recipe-book-app/index.html b/projects/recipe-book-app/index.html
new file mode 100644
index 0000000..b93360d
--- /dev/null
+++ b/projects/recipe-book-app/index.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Pomodoro Timer
+25:00
+ +Recipe Book App
+
+
+
+
+
diff --git a/projects/recipe-book-app/index.js b/projects/recipe-book-app/index.js
new file mode 100644
index 0000000..d35b3b8
--- /dev/null
+++ b/projects/recipe-book-app/index.js
@@ -0,0 +1,50 @@
+const API_KEY = "275d58779ccf4e22af03e792e8819fff";
+const recipeListEl = document.getElementById("recipe-list");
+
+function displayRecipes(recipes) {
+ recipeListEl.innerHTML = "";
+ recipes.forEach((recipe) => {
+ const recipeItemEl = document.createElement("li");
+ recipeItemEl.classList.add("recipe-item");
+ recipeImageEl = document.createElement("img");
+ recipeImageEl.src = recipe.image;
+ recipeImageEl.alt = "recipe image";
+
+ recipeTitleEl = document.createElement("h2");
+ recipeTitleEl.innerText = recipe.title;
+
+ recipeIngredientsEl = document.createElement("p");
+ recipeIngredientsEl.innerHTML = `
+ Ingredients: ${recipe.extendedIngredients
+ .map((ingredient) => ingredient.original)
+ .join(", ")}
+ `;
+
+ recipeLinkEl = document.createElement("a");
+ recipeLinkEl.href = recipe.sourceUrl;
+ recipeLinkEl.innerText = "View Recipe";
+
+ recipeItemEl.appendChild(recipeImageEl);
+ recipeItemEl.appendChild(recipeTitleEl);
+ recipeItemEl.appendChild(recipeIngredientsEl);
+ recipeItemEl.appendChild(recipeLinkEl);
+ recipeListEl.appendChild(recipeItemEl);
+ });
+}
+
+async function getRecipes() {
+ const response = await fetch(
+ `https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
+ );
+
+ const data = await response.json();
+
+ return data.recipes;
+}
+
+async function init() {
+ const recipes = await getRecipes();
+ displayRecipes(recipes);
+}
+
+init();
diff --git a/projects/recipe-book-app/style.css b/projects/recipe-book-app/style.css
new file mode 100644
index 0000000..9e56d02
--- /dev/null
+++ b/projects/recipe-book-app/style.css
@@ -0,0 +1,104 @@
+body {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+}
+
+header {
+ background: #0c2461;
+ color: #fff;
+ padding: 20px;
+ text-align: center;
+}
+
+h1 {
+ margin: 0;
+ font-size: 36px;
+}
+
+.container {
+ margin: 0 auto;
+ max-width: 1200px;
+ padding: 20px;
+}
+
+.recipe-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.recipe-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ border-radius: 5px;
+ overflow: hidden;
+}
+
+.recipe-item img {
+ width: 150px;
+ height: 150px;
+ object-fit: cover;
+}
+
+.recipe-item h2 {
+ margin: 0;
+ font-size: 20px;
+ padding: 10px;
+ min-width: 200px;
+}
+
+.recipe-item p {
+ margin: 0;
+ padding: 10px;
+ color: #777;
+}
+
+.recipe-item a {
+ background: #0c2461;
+ color: #fff;
+ min-width: 150px;
+ padding: 10px;
+ text-decoration: none;
+ text-transform: uppercase;
+ font-size: 14px;
+ transition: background 0.3s ease;
+}
+
+.recipe-item a:hover {
+ background: #1e3799;
+}
+
+@media screen and (max-width: 768px) {
+ .container {
+ max-width: 90%;
+ }
+ .recipe-item {
+ flex-direction: column;
+ }
+
+ .recipe-item img {
+ width: 100%;
+ height: auto;
+ margin-bottom: 10px;
+ }
+
+ .recipe-item h2 {
+ font-size: 20px;
+ padding: 0;
+ margin-bottom: 10px;
+ }
+
+ .recipe-item p {
+ font-size: 14px;
+ margin-bottom: 10px;
+ }
+
+ .recipe-item a {
+ width: 100%;
+ text-align: center;
+ }
+}
diff --git a/projects/rock-paper-scissors-game/index.html b/projects/rock-paper-scissors-game/index.html
new file mode 100644
index 0000000..c458606
--- /dev/null
+++ b/projects/rock-paper-scissors-game/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ -
+
+
Rock Paper Scissors Game
+Choose your move:
+ + ++ Your score: 0 + Computer score: 0 +
+ + + \ No newline at end of file diff --git a/projects/rock-paper-scissors-game/index.js b/projects/rock-paper-scissors-game/index.js new file mode 100644 index 0000000..4944f3e --- /dev/null +++ b/projects/rock-paper-scissors-game/index.js @@ -0,0 +1,42 @@ +const buttons = document.querySelectorAll("button"); + +const resultEl = document.getElementById("result"); + +const playerScoreEl = document.getElementById("user-score"); + +const computerScoreEl = document.getElementById("computer-score"); + +let playerScore = 0; +let computerScore = 0; + +buttons.forEach((button) => { + button.addEventListener("click", () => { + const result = playRound(button.id, computerPlay()); + resultEl.textContent = result; + + }); +}); + +function computerPlay() { + const choices = ["rock", "paper", "scissors"]; + const randomChoice = Math.floor(Math.random() * choices.length); + return choices[randomChoice]; +} + +function playRound(playerSelection, computerSelection) { + if (playerSelection === computerSelection) { + return "It's a tie!"; + } else if ( + (playerSelection === "rock" && computerSelection === "scissors") || + (playerSelection === "paper" && computerSelection === "rock") || + (playerSelection === "scissors" && computerSelection === "paper") + ) { + playerScore++; + playerScoreEl.textContent = playerScore; + return "You win! " + playerSelection + " beats " + computerSelection; + } else { + computerScore++; + computerScoreEl.textContent = computerScore; + return "You lose! " + computerSelection + " beats " + playerSelection; + } +} diff --git a/projects/rock-paper-scissors-game/style.css b/projects/rock-paper-scissors-game/style.css new file mode 100644 index 0000000..940eff4 --- /dev/null +++ b/projects/rock-paper-scissors-game/style.css @@ -0,0 +1,58 @@ +body { + background-color: #f1f1f1; + font-family: "Arial", sans-serif; + margin: 0; + padding: 0; +} + +h1 { + font-size: 2rem; + text-align: center; + padding-top: 100px; +} + +p { + font-size: 1.5rem; + font-weight: 600; + text-align: center; + margin-bottom: 0.5rem; +} + +.buttons { + display: flex; + justify-content: center; +} + +button { + border: none; + font-size: 3rem; + margin: 0 0.5rem; + padding: 0.5rem; + cursor: pointer; + border-radius: 5px; + transition: all 0.3s ease-in-out; +} + +button:hover { + opacity: 0.7; +} + +#rock { + background-color: #ff0000; +} + +#paper { + background-color: #2196f3; +} + +#scissors { + background-color: #4caf50; +} + +#user-score { + color: #2196f3; +} + +#computer-score { + color: #ff0000; +} diff --git a/projects/Sidebar-project/index.html b/projects/sidebar/index.html similarity index 100% rename from projects/Sidebar-project/index.html rename to projects/sidebar/index.html diff --git a/projects/Sidebar-project/index.js b/projects/sidebar/index.js similarity index 100% rename from projects/Sidebar-project/index.js rename to projects/sidebar/index.js diff --git a/projects/Sidebar-project/logo.svg b/projects/sidebar/logo.svg similarity index 100% rename from projects/Sidebar-project/logo.svg rename to projects/sidebar/logo.svg diff --git a/projects/Sidebar-project/styles.css b/projects/sidebar/styles.css similarity index 100% rename from projects/Sidebar-project/styles.css rename to projects/sidebar/styles.css diff --git a/projects/stopwatch/index.html b/projects/stopwatch/index.html new file mode 100644 index 0000000..05d8b2b --- /dev/null +++ b/projects/stopwatch/index.html @@ -0,0 +1,20 @@ + + + + + + +00:00:00
+
+
+
+
\ No newline at end of file
diff --git a/projects/stopwatch/index.js b/projects/stopwatch/index.js
new file mode 100644
index 0000000..0cbd647
--- /dev/null
+++ b/projects/stopwatch/index.js
@@ -0,0 +1,54 @@
+const timerEl = document.getElementById("timer");
+const startButtonEl = document.getElementById("start");
+const stopButtonEl = document.getElementById("stop");
+const resetButtonEl = document.getElementById("reset");
+
+let startTime = 0;
+let elapsedTime = 0;
+let timerInterval;
+
+function startTimer() {
+ startTime = Date.now() - elapsedTime;
+
+ timerInterval = setInterval(() => {
+ elapsedTime = Date.now() - startTime;
+ timerEl.textContent = formatTime(elapsedTime);
+ }, 10);
+
+ startButtonEl.disabled = true;
+ stopButtonEl.disabled = false;
+}
+
+function formatTime(elapsedTime) {
+ const milliseconds = Math.floor((elapsedTime % 1000) / 10);
+ const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
+ const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
+ const hours = Math.floor(elapsedTime / (1000 * 60 * 60));
+ return (
+ (hours ? (hours > 9 ? hours : "0" + hours) : "00") +
+ ":" +
+ (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") +
+ ":" +
+ (seconds ? (seconds > 9 ? seconds : "0" + seconds) : "00") +
+ "." +
+ (milliseconds > 9 ? milliseconds : "0" + milliseconds)
+ );
+}
+function stopTimer() {
+ clearInterval(timerInterval);
+ startButtonEl.disabled = false;
+ stopButtonEl.disabled = true;
+}
+function resetTimer() {
+ clearInterval(timerInterval);
+
+ elapsedTime = 0;
+ timerEl.textContent = "00:00:00";
+
+ startButtonEl.disabled = false;
+ stopButtonEl.disabled = true;
+}
+
+startButtonEl.addEventListener("click", startTimer);
+stopButtonEl.addEventListener("click", stopTimer);
+resetButtonEl.addEventListener("click", resetTimer);
diff --git a/projects/stopwatch/style.css b/projects/stopwatch/style.css
new file mode 100644
index 0000000..cf0859d
--- /dev/null
+++ b/projects/stopwatch/style.css
@@ -0,0 +1,61 @@
+body {
+ background-color: #f0f0f0;
+ font-family: "Poppins", sans-serif;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ min-height: 100vh;
+ overflow: hidden;
+ align-items: center;
+}
+
+#timer {
+ font-size: 7rem;
+ font-weight: 700;
+ text-shadow: 2px 2px #f8a5c2;
+ color: #f92672;
+ width: 600px;
+ text-align: center;
+ margin: 40px auto;
+}
+
+#buttons {
+ display: flex;
+ justify-content: center;
+}
+
+button {
+ background-color: #f92672;
+ color: white;
+ border: none;
+ font-size: 2rem;
+ font-weight: bold;
+ padding: 1.5rem 4rem;
+ margin: 1rem;
+ border-radius: 30px;
+ cursor: pointer;
+ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
+ transition: all 0.2s;
+}
+
+button:hover {
+ background-color: #f44583;
+ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+}
+
+button[disabled] {
+ opacity: 0.5;
+ cursor: default;
+}
+
+@media (max-width: 800px) {
+ #timer {
+ font-size: 4rem;
+ width: 350px;
+ }
+
+ button {
+ font-size: 1.5rem;
+ padding: 1rem 2rem;
+ }
+}
diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html
new file mode 100644
index 0000000..029457b
--- /dev/null
+++ b/projects/tip-calculator/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+ + +
+ +
+ + + +
+
+
+
\ No newline at end of file
diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
new file mode 100644
index 0000000..98cb079
--- /dev/null
+++ b/projects/tip-calculator/index.js
@@ -0,0 +1,13 @@
+const btnEl = document.getElementById("calculate");
+const billInput = document.getElementById("bill");
+const tipInput = document.getElementById("tip");
+const totalSpan = document.getElementById("total");
+
+function calculateTotal() {
+ const billValue = billInput.value;
+ const tipValue = tipInput.value;
+ const totalValue = billValue * (1 + tipValue / 100);
+ totalSpan.innerText = totalValue.toFixed(2);
+}
+
+btnEl.addEventListener("click", calculateTotal);
diff --git a/projects/tip-calculator/style.css b/projects/tip-calculator/style.css
new file mode 100644
index 0000000..786e129
--- /dev/null
+++ b/projects/tip-calculator/style.css
@@ -0,0 +1,53 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #f2f2f2;
+ font-family: "Helvetica", sans-serif;
+}
+
+.container {
+ background-color: white;
+ max-width: 600px;
+ margin: 100px auto;
+ padding: 20px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ text-align: center;
+}
+
+input {
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ margin: 10px 0;
+ width: 100%;
+}
+
+button {
+ background-color: #4caf50;
+ color: white;
+ padding: 10px;
+ border: none;
+ cursor: pointer;
+ margin: 10px 0;
+ width: 100%;
+ font-size: 18px;
+ text-transform: uppercase;
+ transition: background-color 0.2s ease;
+}
+
+button:hover {
+ background-color: #45a049;
+}
+
+#total {
+ font-size: 24px;
+ font-weight: bold;
+ margin-top: 10px;
+}
diff --git a/projects/weather-app/index.html b/projects/weather-app/index.html
index de6cdb0..7fe9e3a 100644
--- a/projects/weather-app/index.html
+++ b/projects/weather-app/index.html
@@ -1,7 +1,9 @@
-
+
+
+
Tip Calculator
+Enter the bill amount and tip percentage to calculate the total.
+ + ++ + +
+ +
+ + + +
Weather App
-
+
-
-
+
+
-
+
+
+
`;
+ weatherDataEl.querySelector(
+ ".temperature"
+ ).textContent = `${temperature}°C`;
+ weatherDataEl.querySelector(".description").textContent = description;
+
+ weatherDataEl.querySelector(".details").innerHTML = details
+ .map((detail) => `${detail}
`)
+ .join("");
+ } catch (error) {
+ weatherDataEl.querySelector(".icon").innerHTML = "";
+ weatherDataEl.querySelector(".temperature").textContent = "";
+ weatherDataEl.querySelector(".description").textContent =
+ "An error happened, please try again later";
+
+ weatherDataEl.querySelector(".details").innerHTML = "";
+ }
+}
diff --git a/projects/weather-app/script.js b/projects/weather-app/script.js
deleted file mode 100644
index ada1704..0000000
--- a/projects/weather-app/script.js
+++ /dev/null
@@ -1,71 +0,0 @@
-// Set the API key to be used for making requests to the OpenWeatherMap API
-const apiKey = "ec24604fb141c0188e07713025f2b7b8";
-
-// Get the element that will display the weather data on the page
-const weatherData = document.getElementById("weather-data");
-
-// Get the input element for the city from the HTML form
-const cityInput = document.getElementById("city-input");
-
-// Get the HTML form element
-const form = document.querySelector("form");
-
-// Add a submit event listener to the form, which will get the value from the city input field and use it to get weather data
-form.addEventListener("submit", (event) => {
- event.preventDefault(); // Prevent the default form submission behavior
- const city = cityInput.value; // Get the value from the city input field
- getWeatherData(city); // Call the function to get weather data for the specified city
-});
-
-// Define an async function to get weather data for a given city
-async function getWeatherData(city) {
- try {
- // Make a request to the OpenWeatherMap API to get weather data for the specified city
- const response = await fetch(`
-https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
-
- // Check if the response from the API is not ok (e.g. 404 error)
- if (!response.ok) {
- throw new Error("Network response was not ok");
- }
-
- // Parse the response from the API as JSON
- const data = await response.json();
-
- // Check if the API returned an error message
- if (data.cod === "404") {
- throw new Error(data.message);
- }
-
- // Extract the temperature, description, icon, and other weather details from the API response
- const temperature = Math.round(data.main.temp);
- const description = data.weather[0].description;
- const icon = data.weather[0].icon;
- const details = [
- `Feels like: ${Math.round(data.main.feels_like)}°C`,
- `Humidity: ${data.main.humidity}%`,
- `Wind speed: ${data.wind.speed} m/s`,
- ];
-
- // Set the HTML content of the weather data display elements to the retrieved weather data
- weatherData.querySelector(
- ".icon"
- ).innerHTML = ``;
- weatherData.querySelector(".temperature").textContent = `${temperature}°C`;
- weatherData.querySelector(".description").textContent = description;
- weatherData.querySelector(".details").innerHTML = details
- .map((detail) => `${detail}
`)
- .join("");
- } catch (error) {
- console.log(error);
-
- // If there was an error fetching weather data, clear the HTML content of the weather data display elements and display an error message
- weatherData.querySelector(".icon").innerHTML = "";
- weatherData.querySelector(".temperature").textContent = "";
- weatherData.querySelector(".description").textContent =
- "Error fetching weather data. Please try again.";
- weatherData.querySelector(".details").innerHTML = "";
- }
-}
-
-// The above code uses the Fetch API to retrieve weather data from the OpenWeatherMap API, and the async/await syntax to handle the asynchronous nature of the API call. The code also dynamically updates the HTML content of the weather data display elements with the retrieved weather data.
diff --git a/projects/weather-app/style.css b/projects/weather-app/style.css
index bed3d24..2030f24 100644
--- a/projects/weather-app/style.css
+++ b/projects/weather-app/style.css
@@ -1,117 +1,94 @@
body {
- margin: 0; /* Reset default margin */
- font-family: "Montserrat", sans-serif; /* Use Montserrat font for all text */
- background-color: #f7f7f7; /* Set light gray background color */
+ margin: 0;
+ font-family: "Montserrat", sans-serif;
+ background-color: #f7f7f7;
}
.container {
- max-width: 600px; /* Set maximum width of container */
- margin: 0 auto; /* Center container horizontally */
- padding: 20px; /* Add padding inside container */
- border-radius: 5px; /* Add rounded corners to container */
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Add shadow effect to container */
- background-color: #fff; /* Set white background color for container */
- margin-top: 50px; /* Add margin to the top of the container */
- text-align: center; /* Center align the content inside container */
+ background-color: #fff;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+ margin: 0 auto;
+ margin-top: 50px;
+ text-align: center;
+ max-width: 600px;
+ border-radius: 5px;
+ padding: 20px;
}
form {
- display: flex; /* Use flexbox for layout */
- justify-content: center; /* Center children horizontally */
- align-items: center; /* Center children vertically */
- margin-bottom: 20px; /* Add margin to bottom */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 20px;
}
form input[type="text"] {
- padding: 10px; /* Add padding to all sides */
- border: none; /* Remove border */
- border-radius: 5px; /* Add rounded corners */
- font-size: 18px; /* Set font size */
- width: 60%; /* Set width */
- outline: none; /* Remove outline */
+ padding: 10px;
+ border: none;
+ outline: none;
+ font-size: 18px;
+ width: 60%;
}
form input[type="submit"] {
- background-color: #007bff; /* set background color for the submit button */
- color: #fff; /* set text color for the submit button */
- border: none; /* remove border from the submit button */
- padding: 10px 20px; /* set padding for the submit button */
- border-radius: 5px; /* set border radius for the submit button */
- font-size: 18px; /* set font size for the submit button text */
- cursor: pointer; /* change cursor to pointer on hover */
- outline: none; /* remove outline on focus */
- transition: background-color 0.3s ease; /* add transition effect for background color change */
+ background-color: #007bff;
+ color: #fff;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ font-size: 18px;
+ cursor: pointer;
+ outline: none;
+ transition: background-color 0.3s ease;
}
form input[type="submit"]:hover {
- background-color: #0062cc; /* set background color on hover */
+ background-color: #0062cc;
}
-.icon {
- width: 100px; /* set width of the icon */
- height: 100px; /* set height of the icon */
- margin: 0 auto; /* center the icon horizontally */
- background-size: contain; /* scale the background image to fit within the container */
- background-repeat: no-repeat; /* prevent the background image from repeating */
- background-position: center center; /* center the background image within the container */
+.icon img {
+ width: 100px;
+ height: 100px;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center center;
}
.temperature {
- font-size: 48px; /* set font size for the temperature display */
- font-weight: bold; /* set font weight for the temperature display */
- margin: 20px 0; /* add margin to the top and bottom of the temperature display */
+ font-size: 48px;
+ font-weight: bold;
+ margin: 20px 0;
}
-.description {
- font-size: 24px; /* set font size for the weather description */
- margin-bottom: 20px; /* add margin to the bottom of the weather description */
+.description{
+ font-size: 24px;
+ margin-bottom: 20px;
}
-.details {
- display: flex; /* set display property to flex */
- justify-content: center; /* center the child elements horizontally */
- align-items: center; /* center the child elements vertically */
- flex-wrap: wrap; /* allow the child elements to wrap onto a new line if needed */
+.details{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
}
-.details > div {
- flex: 1; /* Use the remaining available space for each div */
- margin: 10px; /* Add margin around each div */
- padding: 20px; /* Add padding inside each div */
- background-color: #f1f1f1; /* Set background color for each div */
- border-radius: 5px; /* Round the corners of each div */
- text-align: center; /* Center the content horizontally */
- min-height: 45px; /* Set a minimum height for each div */
- align-items: center; /* Center the content vertically */
- justify-content: center; /* Center the content horizontally */
+.details > div{
+ padding: 20px;
+ background-color: #f1f1f1;
+ margin: 10px;
+ flex: 1;
+ border-radius: 5px;
+ text-align: center;
+ min-height: 45px;
}
-.details > div > h3 {
- margin-top: 0; /* Remove the top margin of the heading */
- font-size: 18px; /* Set the font size for the heading */
- font-weight: bold; /* Set the font weight for the heading */
-}
-
-.details > div > p {
- margin-bottom: 0; /* Remove the bottom margin of the paragraph */
- font-size: 16px; /* Set the font size for the paragraph */
-}
-
-.details > div > p:first-child {
- font-weight: bold; /* Set the font weight for the first paragraph */
-}
-
-.details > div > p:last-child {
- margin-top: 10px; /* Add margin to the top of the last paragraph */
-}
-
-@media (max-width: 768px) {
- form {
- flex-direction: column; /* Change the direction of the flex items to column */
- }
+@media (max-width: 768px){
+ form {
+ flex-direction: column;
+ }
- form input[type="text"] {
- width: 100%; /* Set the width of the input field to 100% */
- margin-bottom: 10px; /* Add margin to the bottom of the input field */
- }
+ form input[type="text"]{
+ width: 100%;
+ margin-bottom: 10px;
+ }
}