diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/000-boilerplate/index.html b/000-boilerplate/index.html index c1ff5cb..964d393 100644 --- a/000-boilerplate/index.html +++ b/000-boilerplate/index.html @@ -3,17 +3,52 @@ - My Project -

My Project

+
+
+

Be the Best

+
+
+

Be the Best

+
+
+

Be the Best

+
+
+

Be the Best

+
+
+

Be the Best

+
+
diff --git a/000-boilerplate/script.js b/000-boilerplate/script.js index e69de29..c6bcdd0 100644 --- a/000-boilerplate/script.js +++ b/000-boilerplate/script.js @@ -0,0 +1,14 @@ +const panels = document.querySelectorAll(".panel"); + +panels.forEach((panel) => { + panel.addEventListener("click", () => { + removeActiveClasses(); + panel.classList.add("active"); + }); +}); + +const removeActiveClasses = () => { + panels.forEach((panel) => { + panel.classList.remove("active"); + }); +}; diff --git a/000-boilerplate/style.css b/000-boilerplate/style.css index b35d72c..f0d16e9 100644 --- a/000-boilerplate/style.css +++ b/000-boilerplate/style.css @@ -1,16 +1,75 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap"); * { box-sizing: border-box; } body { - font-family: "Roboto", sans-serif; + font-family: "Muli", sans-serif; display: flex; - flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } + +.container { + display: flex; + width: 90vw; +} + +@keyframes expand { + from { + flex: 0.5; + } + + to { + flex: 5; + } +} + +@keyframes shrink { + from { + flex: 5; + } + + to { + flex: 0.5; + } +} + +.panel { + background-size: auto 100%; + background-position: center; + background-repeat: no-repeat; + height: 80vh; + border-radius: 50px; + color: #fff; + cursor: pointer; + flex: 0.5; + margin: 10px; + position: relative; +} + +.panel h3 { + font-size: 24px; + position: absolute; + bottom: 20px; + left: 20px; + margin: 0; + opacity: 0; + transition: opacity 0.3s ease-in 0.4s; +} + +.panel.active { + animation: expand 0.7s ease-in forwards; +} + +.panel:not(.active) { + animation: shrink 0.7s ease-in forwards; +} + +.panel.active h3 { + opacity: 1; +} \ No newline at end of file diff --git a/002-progress steps/index.html b/002-progress steps/index.html index 07e7c79..e084a67 100644 --- a/002-progress steps/index.html +++ b/002-progress steps/index.html @@ -3,21 +3,25 @@ - + Progress Steps +
-
-
-
1
+
+
1
+
2
+
3
+
4
- - +
+ + +
- diff --git a/002-progress steps/khar/style.css b/002-progress steps/khar/style.css new file mode 100644 index 0000000..2a59205 --- /dev/null +++ b/002-progress steps/khar/style.css @@ -0,0 +1,120 @@ +@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + align-items: center; + + margin-top: 5rem; +} + + +.container { + width: 20rem; + height: 8rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + gap: 1.4rem; +} + + +/* cicles styles */ +#circle-container { + display: flex; + justify-content: space-around; + align-items: center; +} + +.line { + width: 3rem; + border: solid rgb(224, 213, 213) 2px; + +} + +.active-line { + border-color: blue; +} + +.active-line-animation { + animation: line-animation linear alternate forwards 1s; +} + +@keyframes line-animation { + 0% { + background-color: white; + } + + 100% { + background-color: blue; + } +} + +.circle { + padding-top: 0.4rem; + text-align: center; + border: solid black 1px; + width: 2rem; + height: 2rem; + border-radius: 50%; + color: lightgray; +} + +.active-circle { + background-color: blue; +} + +.active-circle-animation { + animation: circle-animation alternate forwards 0.5s linear; +} + +@keyframes circle-animation { + 0% { + background-color: white; + } + + 100% { + background-color: blue; + } +} + + + +/* Button styles */ +#button-container { + width: 12rem; + height: 3rem; + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + padding: 1rem; +} + +.btn { + text-align: center; + width: 5rem; + height: 2rem; + opacity: 0.9; + border-radius: 0.2rem; + border: none; + color: rgb(70, 59, 59); +} + +.btn:hover { + opacity: 1; + cursor: pointer; +} + +.active-btn { + background-color: blue; + color: white; + opacity: 0.8; +} \ No newline at end of file diff --git a/002-progress steps/script.js b/002-progress steps/script.js index 024a72d..e417bfd 100644 --- a/002-progress steps/script.js +++ b/002-progress steps/script.js @@ -1,34 +1,41 @@ -const progress = document.getElementById("progress"); -const prev = document.getElementById("prev"); -const next = document.getElementById("next"); -const circles = document.querySelectorAll(".circle"); - -let currentActive = 1; +"use strict"; -next.addEventListener("click", () => { - currentActive++; - if (currentActive > circles.length) currentActive = circles.length; - update(); -}); +// select all elements i need +const circles = document.querySelectorAll(".circle"); +const lines = document.querySelectorAll(".line"); +const prevBtn = document.querySelector(".prev"); +const nextBtn = document.querySelector(".next"); +let whichNumber = 0; -prev.addEventListener("click", () => { - currentActive--; - if (currentActive < 1) currentActive = 1; - update(); +// Next Event +nextBtn.addEventListener("click", (e) => { + if (whichNumber < 3) { + whichNumber++; + prevBtn.classList.add("active-btn"); + circles[whichNumber].classList.add("active-circle"); + circles[whichNumber].classList.add("active-circle-animation"); + lines[whichNumber - 1].classList.add("active-line"); + lines[whichNumber - 1].classList.add("active-line-animation"); + } + if (whichNumber == 3) { + nextBtn.classList.remove("active-btn"); + nextBtn.disabled = true; + } + console.log(whichNumber); }); -const update = () => { - circles.forEach((circle, index) => { - if (index < currentActive) circle.classList.add("active"); - else circle.classList.remove("active"); - }); - const actives = document.querySelectorAll(".active"); - progress.style.width = - ((actives.length - 1) / (circles.length - 1)) * 100 + "%"; - if (currentActive === 1) prev.disabled = true; - else if (currentActive === circles.length) next.disabled = true; - else { - prev.disabled = false; - next.disabled = false; +// Prev Event +prevBtn.addEventListener("click", (e) => { + if (whichNumber > 0) { + nextBtn.classList.add("active-btn"); + circles[whichNumber].classList.remove("active-circle"); + circles[whichNumber].classList.remove("active-circle-animation"); + lines[whichNumber - 1].classList.remove("active-line"); + lines[whichNumber - 1].classList.remove("active-line-animation"); + whichNumber--; } -}; + if (whichNumber == 0) { + prevBtn.classList.remove("active-btn"); + return; + } +}); diff --git a/002-progress steps/style.css b/002-progress steps/style.css deleted file mode 100644 index b4dfe95..0000000 --- a/002-progress steps/style.css +++ /dev/null @@ -1,100 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap"); - -:root { - --line-border-fill: #3498db; - --line-border-empty: #e0e0e0; -} - -* { - box-sizing: border-box; -} - -body { - font-family: "Muli", sans-serif; - background-color: #f6f7fb; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.container { - text-align: center; -} - -.progress-container { - display: flex; - justify-content: space-between; - position: relative; - margin-bottom: 30px; - max-width: 100%; - width: 350px; -} - -.progress-container::before { - content: ""; /* Mandatory with ::before */ - background-color: var(--line-border-empty); - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - height: 4px; - width: 100%; - z-index: -1; -} - -.progress { - background-color: var(--line-border-fill); - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - height: 4px; - width: 0%; - z-index: -1; - transition: 0.4s ease; -} - -.circle { - background-color: #fff; - color: #999; - border-radius: 50%; - height: 30px; - width: 30px; - display: flex; - align-items: center; - justify-content: center; - border: 3px solid var(--line-border-empty); - transition: 0.4s ease; -} - -.circle.active { - border-color: var(--line-border-fill); -} - -.btn { - background-color: var(--line-border-fill); - color: #fff; - border: 0; - border-radius: 6px; - cursor: pointer; - font-family: inherit; - padding: 8px 30px; - margin: 5px; - font-size: 14px; -} - -.btn:active { - transform: scale(0.98); -} - -.btn:focus { - outline: 0; -} - -.btn:disabled { - background-color: var(--line-border-empty); - cursor: not-allowed; -} diff --git a/004-hidden search widget/.vscode/settings.json b/004-hidden search widget/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/004-hidden search widget/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/004-hidden search widget/index.html b/004-hidden search widget/index.html index 3c8792a..1d061f2 100644 --- a/004-hidden search widget/index.html +++ b/004-hidden search widget/index.html @@ -3,19 +3,24 @@ - + magnifier + -
- - +
+ +
- + + diff --git a/004-hidden search widget/loupe.png b/004-hidden search widget/loupe.png new file mode 100644 index 0000000..b60e178 Binary files /dev/null and b/004-hidden search widget/loupe.png differ diff --git a/004-hidden search widget/script.js b/004-hidden search widget/script.js index 3f3ff9f..62d7d43 100644 --- a/004-hidden search widget/script.js +++ b/004-hidden search widget/script.js @@ -1,8 +1,23 @@ -const search = document.querySelector(".search"); -const btn = document.querySelector(".btn"); +// container +// input +// image + +"use strict"; + +const container = document.querySelector("#container"); const input = document.querySelector(".input"); +const image = document.querySelector(".image"); +let flag = false; -btn.addEventListener("click", () => { - search.classList.toggle("active"); - input.focus(); +image.addEventListener("click", (e) => { + flag = !flag; + console.log(input); + if (flag) { + input.classList.remove("input-close"); + input.classList.add("input-show"); + } + if (!flag) { + input.classList.add("input-close"); + input.classList.remove("input-show"); + } }); diff --git a/004-hidden search widget/style.css b/004-hidden search widget/style.css index 820b47f..b583fd0 100644 --- a/004-hidden search widget/style.css +++ b/004-hidden search widget/style.css @@ -1,6 +1,8 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { + margin: 0; + pad: 0; box-sizing: border-box; } @@ -12,46 +14,112 @@ body { justify-content: center; height: 100vh; overflow: hidden; - margin: 0; } -.search { - position: relative; - height: 50px; +/* #search-box { + + width: 10rem; + height: 2rem; + display: flex; + justify-content: space-between; + align-items: center; + animation: spand 0.5s forwards ease-out alternate; } -.search .input { - background-color: #fff; - border: 0; - font-size: 18px; - padding: 15px; - height: 50px; - width: 50px; - transition: width 0.3s ease; +#input-div { + width: 80%; + height: 100%; + + + display: flex; + justify-content: center; + align-items: center; } -.btn { - background-color: #fff; - border: 0; - cursor: pointer; - font-size: 24px; - position: absolute; - top: 0; - left: 0; - height: 50px; - width: 50px; - transition: transform 0.3s ease; +#magnifire-div { + width: 20%; + height: 100%; + + + display: flex; + justify-content: center; + align-items: center; +} + +.inp { + width: 100%; + height: 100%; + } -.btn:focus, -.input:focus { +.icon { + width: 1.3rem; + height: ; +} */ + +#container { + display: flex; + justify-content: center; + align-items: center; + gap: 0; +} + +.input { + background-color: white; + border: none; + height: 2rem; outline: none; + opacity: 0; + padding: 0.5rem; + max-width: 0; + transition: max-width 1s ease-out, opacity 1s ease-out; } -.search.active .input { - width: 200px; +.image { + background-color: white; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 4px; + opacity: 0.8; + cursor: pointer; +} + + +.input-show { + max-width: 10rem; + opacity: 0.8; } -.search.active .btn { - transform: translateX(198px); +.input-close { + max-width: 0; + opacity: 0; } + +/* .input-show { + display: block; + animation: show 1s alternate forwards ease-out; +} + +@keyframes show { + 0% { + width: 1rem; + } + + 100% { + width: 10rem; + } +} + +.input-close { + display: none; + animation: close 1s alternate forwards ease-out; +} + +@keyframes close { + 0% { + width: 10rem; + } + + 100% { + width: 0; + } +} */ \ No newline at end of file diff --git a/028-github profiles/index.html b/028-github profiles/index.html index 111406c..c931e3b 100644 --- a/028-github profiles/index.html +++ b/028-github profiles/index.html @@ -3,19 +3,37 @@ + github-profiles - GitHub Profiles + -
- -
-
- - +
+ +
+ +
+
diff --git a/028-github profiles/script.js b/028-github profiles/script.js index 63ddd92..7b66cf2 100644 --- a/028-github profiles/script.js +++ b/028-github profiles/script.js @@ -1,80 +1,57 @@ -const APIURL = "https://api.github.com/users/"; -const form = document.getElementById("form"); -const main = document.getElementById("main"); -const search = document.getElementById("search"); +"use strict "; -const createUserCard = (user) => { - const cardHTML = ` -
-
- ${user.name} -
- -
- `; - main.innerHTML = cardHTML; -}; +const info = document.querySelector(".info-box"); +const inputValue = document.querySelector(".search-box"); -const createErrorCard = (message) => { - const cardHTML = ` -

${message}

- `; - main.innerHTML = cardHTML; -}; +inputValue.addEventListener("keypress", (e) => { + if (e.key === "Enter") { + updateInfo(inputValue.value); + } +}); -const addReposToCard = (repos) => { - const reposElement = document.getElementById("repos"); - repos.slice(0, 5).forEach((repo) => { - const repoElement = document.createElement("a"); - repoElement.classList.add("repo"); - repoElement.href = repo.html_url; - repoElement.target = "_blank"; - repoElement.innerText = repo.name; - reposElement.appendChild(repoElement); - }); +const fetchData = async function (userName) { + const request = await fetch(`https://api.github.com/users/${userName}`); + const response = await request.json(); + return response; }; -const getUser = async (username) => { - try { - const { data } = await axios(APIURL + username); - createUserCard(data); - getRepos(username); - } catch (error) { - if (error.response.status == 404) - createErrorCard("No profile with this username"); - } +const fetchRepos = async function (reposUrl) { + const request = await fetch(reposUrl); + const response = await request.json(); + return response; }; -const getRepos = async (username) => { - try { - const { data } = await axios(APIURL + username + "/repos?sort=created"); - addReposToCard(data); - } catch (error) { - createErrorCard("Problem fetching repos"); +const updateInfo = async function (userName) { + const data = await fetchData(userName); + const repos = await fetchRepos(data.repos_url); + + const html = ` + + +
+

${data.name}

+

${data.bio}

+
+ +
+

${data.followers} Followers

+

${data.following} Following

+

${data.public_repos} Repos

+
+ `; + info.innerHTML = html; + const reposDiv = document.createElement("div"); + reposDiv.id = "repos-name"; + + for (let i = 0; i < repos.length; i++) { + if (i === 5) { + break; + } + const div = document.createElement("div"); + div.textContent = repos[i].name; + reposDiv.appendChild(div); } + info.appendChild(reposDiv); }; -form.addEventListener("submit", (e) => { - e.preventDefault(); - const user = search.value; - if (user) { - getUser(user); - search.value = ""; - } -}); +// updateInfo("AminAbdollahpour"); diff --git a/028-github profiles/style.css b/028-github profiles/style.css index 694ec08..c8293e4 100644 --- a/028-github profiles/style.css +++ b/028-github profiles/style.css @@ -1,117 +1,128 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"); - * { + margin: 0; + padding: 0; box-sizing: border-box; } +html { + font-size: 10px; +} + body { - background-color: #2a2a72; - color: #fff; - font-family: "Poppins", sans-serif; + background-color: rgb(52, 0, 156); + display: flex; - flex-direction: column; - align-items: center; justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; + align-items: center; + } -.user-form { - width: 95%; - max-width: 700px; +#container { + width: 70%; + height: 50rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; + + padding: 2rem; + margin-top: 10rem; } -.user-form input { - width: 100%; - display: block; - background-color: #4c2885; +.search-box { + font-family: 'Courier New', Courier, monospace; + + width: 60%; + height: 7rem; border: none; - border-radius: 10px; - color: #fff; - padding: 1rem; - margin-bottom: 2rem; - font-family: inherit; - font-size: 1rem; - box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), - 0 15px 40px rgba(0, 0, 0, 0.1); -} + padding: 2rem; -.user-form input:focus { - outline: none; -} + background-color: rgba(150, 40, 181, 0.5); + color: white; + box-shadow: inset 0px 0.1rem 1.1rem -0.3rem rgba(0, 0, 0, 0.7); -.user-form input::placeholder { - color: #bbb; + font-size: 2rem; + border-radius: 1rem; } -.card { - max-width: 800px; - background-color: #4c2885; - border-radius: 20px; - box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), - 0 15px 40px rgba(0, 0, 0, 0.1); - display: flex; - padding: 3rem; - margin: 0 1.5rem; +.search-box::placeholder { + font-family: 'Courier New', Courier, monospace; + color: rgb(232, 213, 213); + opacity: 0.8; } -.avatar { - border-radius: 50%; - border: 10px solid #2a2a72; - height: 150px; - width: 150px; +.search-box:focus { + outline: none; } -.user-info { - color: #eee; - margin-left: 2rem; -} +.info-box { + background-color: rgba(150, 40, 181, 0.5); + width: 75%; + height: 90%; -.user-info h2 { - margin-top: 0; -} + border: none; + border-radius: 1rem; -.user-info ul { - list-style-type: none; - display: flex; - justify-content: space-between; - padding: 0; - max-width: 400px; + position: relative; } -.user-info ul li { - display: flex; - align-items: center; -} -.user-info ul li strong { - font-size: 0.9rem; - margin-left: 0.5rem; +#profile-image { + width: 15rem; + height: 15rem; + border-radius: 50%; + border: solid rgba(17, 9, 117, 0.6) 1rem; + position: absolute; + left: 4rem; + top: 2.5rem; } -.repo { - text-decoration: none; - color: #fff; - background-color: #212a72; - font-size: 0.7rem; - padding: 0.25rem 0.5rem; - margin-right: 0.5rem; - margin-bottom: 0.5rem; - display: inline-block; + +.text-info { + font-size: 1.6rem; + position: absolute; + left: 21rem; + line-height: 5rem; + top: 5rem; + color: rgb(226, 209, 209); + font-family: sans-serif; } -@media (max-width: 500px) { - .card { - flex-direction: column; - align-items: center; - } - .user-form { - max-width: 400px; - } +#status { + display: flex; + gap: 10rem; + font-size: 1.6rem; + position: absolute; + left: 21rem; + line-height: 5rem; + bottom: 10rem; + color: rgb(226, 209, 209); + font-family: sans-serif; + font-weight: bold; +} - .user-info { - margin-left: 0; - } +#repos-name { + width: 51rem; + height: 10rem; + display: flex; + gap: 1.6rem; + flex-wrap: wrap; + justify-content: start; + align-items: start; + position: absolute; + bottom: 2rem; + right: 6.8rem; + padding: 1rem } + +#repos-name>div { + font-size: 1.6rem; + display: flex; + justify-content: start; + align-items: center; + background-color: rgba(17, 9, 117, 0.6); + padding: 0.6rem; + color: white; +} \ No newline at end of file