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
new file mode 100644
index 0000000..7fe9e3a
--- /dev/null
+++ b/projects/weather-app/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Tip Calculator
+Enter the bill amount and tip percentage to calculate the total.
+ + ++ + +
+ +
+ + + +
+
+
+
+
diff --git a/projects/weather-app/index.js b/projects/weather-app/index.js
new file mode 100644
index 0000000..f773a49
--- /dev/null
+++ b/projects/weather-app/index.js
@@ -0,0 +1,58 @@
+const apikey = "46f80a02ecae410460d59960ded6e1c6";
+
+const weatherDataEl = document.getElementById("weather-data");
+
+const cityInputEl = document.getElementById("city-input");
+
+const formEl = document.querySelector("form");
+
+formEl.addEventListener("submit", (event) => {
+ event.preventDefault();
+ const cityValue = cityInputEl.value;
+ getWeatherData(cityValue);
+});
+
+async function getWeatherData(cityValue) {
+ try {
+ const response = await fetch(
+ `https://api.openweathermap.org/data/2.5/weather?q=${cityValue}&appid=${apikey}&units=metric`
+ );
+
+ if (!response.ok) {
+ throw new Error("Network response was not ok");
+ }
+
+ const data = await response.json();
+
+ 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)}`,
+ `Humidity: ${data.main.humidity}%`,
+ `Wind speed: ${data.wind.speed} m/s`,
+ ];
+
+ weatherDataEl.querySelector(
+ ".icon"
+ ).innerHTML = `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/style.css b/projects/weather-app/style.css
new file mode 100644
index 0000000..2030f24
--- /dev/null
+++ b/projects/weather-app/style.css
@@ -0,0 +1,94 @@
+body {
+ margin: 0;
+ font-family: "Montserrat", sans-serif;
+ background-color: #f7f7f7;
+}
+
+.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;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+form input[type="text"] {
+ padding: 10px;
+ border: none;
+ outline: none;
+ font-size: 18px;
+ width: 60%;
+}
+
+form input[type="submit"] {
+ 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;
+}
+
+.icon img {
+ width: 100px;
+ height: 100px;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+
+.temperature {
+ font-size: 48px;
+ font-weight: bold;
+ margin: 20px 0;
+}
+
+.description{
+ font-size: 24px;
+ margin-bottom: 20px;
+}
+
+.details{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.details > div{
+ padding: 20px;
+ background-color: #f1f1f1;
+ margin: 10px;
+ flex: 1;
+ border-radius: 5px;
+ text-align: center;
+ min-height: 45px;
+}
+
+@media (max-width: 768px){
+ form {
+ flex-direction: column;
+ }
+
+ form input[type="text"]{
+ width: 100%;
+ margin-bottom: 10px;
+ }
+}