diff --git a/3d-boxes-background/index.html b/3d-boxes-background/index.html deleted file mode 100644 index 94bfc1f..0000000 --- a/3d-boxes-background/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - 3D Boxes Background - - - -
- - - diff --git a/3d-boxes-background/script.js b/3d-boxes-background/script.js deleted file mode 100644 index 4f48d7a..0000000 --- a/3d-boxes-background/script.js +++ /dev/null @@ -1,17 +0,0 @@ -const boxesContainer = document.getElementById('boxes') -const btn = document.getElementById('btn') - -btn.addEventListener('click', () => boxesContainer.classList.toggle('big')) - -function createBoxes() { - for (let i = 0; i < 4; i++) { - for (let j = 0; j < 4; j++) { - const box = document.createElement('div') - box.classList.add('box') - box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px` - boxesContainer.appendChild(box) - } - } -} - -createBoxes() diff --git a/3d-boxes-background/style.css b/3d-boxes-background/style.css deleted file mode 100644 index 81fd9cf..0000000 --- a/3d-boxes-background/style.css +++ /dev/null @@ -1,93 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #fafafa; - font-family: 'Roboto', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; -} - -.magic { - background-color: #f9ca24; - color: #fff; - font-family: 'Poppins', sans-serif; - border: 0; - border-radius: 3px; - font-size: 16px; - padding: 12px 20px; - cursor: pointer; - position: fixed; - top: 20px; - letter-spacing: 1px; - box-shadow: 0 3px rgba(249, 202, 36, 0.5); - z-index: 100; -} - -.magic:focus { - outline: none; -} - -.magic:active { - box-shadow: none; - transform: translateY(2px); -} - -.boxes { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - height: 500px; - width: 500px; - position: relative; - transition: 0.4s ease; -} - -.boxes.big { - width: 600px; - height: 600px; -} - -.boxes.big .box { - transform: rotateZ(360deg); -} - -.box { - background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif'); - background-repeat: no-repeat; - background-size: 500px 500px; - position: relative; - height: 125px; - width: 125px; - transition: 0.4s ease; -} - -.box::after { - content: ''; - background-color: #f6e58d; - position: absolute; - top: 8px; - right: -15px; - height: 100%; - width: 15px; - transform: skewY(45deg); -} - -.box::before { - content: ''; - background-color: #f9ca24; - position: absolute; - bottom: -15px; - left: 8px; - height: 15px; - width: 100%; - transform: skewX(45deg); -} diff --git a/_project_starter_/index.html b/_project_starter_/index.html deleted file mode 100644 index 4783501..0000000 --- a/_project_starter_/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - My Project - - -

Project Starter

- - - diff --git a/_project_starter_/script.js b/_project_starter_/script.js deleted file mode 100644 index 8b13789..0000000 --- a/_project_starter_/script.js +++ /dev/null @@ -1 +0,0 @@ - diff --git a/_project_starter_/style.css b/_project_starter_/style.css deleted file mode 100644 index ec80c4b..0000000 --- a/_project_starter_/style.css +++ /dev/null @@ -1,16 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Roboto', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} diff --git a/animated-countdown/index.html b/animated-countdown/index.html deleted file mode 100644 index b04e91c..0000000 --- a/animated-countdown/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - Animated Countdown - - -
-
- 3 - 2 - 1 - 0 -
-

Get Ready

-
- -
-

GO

- -
- - - diff --git a/animated-countdown/script.js b/animated-countdown/script.js deleted file mode 100644 index 3493444..0000000 --- a/animated-countdown/script.js +++ /dev/null @@ -1,40 +0,0 @@ -const nums = document.querySelectorAll('.nums span') -const counter = document.querySelector('.counter') -const finalMessage = document.querySelector('.final') -const replay = document.querySelector('#replay') - -runAnimation() - -function resetDOM() { - counter.classList.remove('hide') - finalMessage.classList.remove('show') - - nums.forEach((num) => { - num.classList.value = '' - }) - - nums[0].classList.add('in') -} - -function runAnimation() { - nums.forEach((num, idx) => { - const nextToLast = nums.length - 1 - - num.addEventListener('animationend', (e) => { - if (e.animationName === 'goIn' && idx !== nextToLast) { - num.classList.remove('in') - num.classList.add('out') - } else if (e.animationName === 'goOut' && num.nextElementSibling) { - num.nextElementSibling.classList.add('in') - } else { - counter.classList.add('hide') - finalMessage.classList.add('show') - } - }) - }) -} - -replay.addEventListener('click', () => { - resetDOM() - runAnimation() -}) diff --git a/animated-countdown/style.css b/animated-countdown/style.css deleted file mode 100644 index 8ea1c73..0000000 --- a/animated-countdown/style.css +++ /dev/null @@ -1,163 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Roboto', sans-serif; - margin: 0; - height: 100vh; - overflow: hidden; -} - -h4 { - font-size: 20px; - margin: 5px; - text-transform: uppercase; -} - -.counter { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; -} - -.counter.hide { - transform: translate(-50%, -50%) scale(0); - animation: hide 0.2s ease-out; -} - -@keyframes hide { - 0% { - transform: translate(-50%, -50%) scale(1); - } - - 100% { - transform: translate(-50%, -50%) scale(0); - } -} - -.final { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) scale(0); - text-align: center; -} - -.final.show { - transform: translate(-50%, -50%) scale(1); - animation: show 0.2s ease-out; -} - -@keyframes show { - 0% { - transform: translate(-50%, -50%) scale(0); - } - - 30% { - transform: translate(-50%, -50%) scale(1.4); - } - - 100% { - transform: translate(-50%, -50%) scale(1); - } -} - -.nums { - color: #3498db; - font-size: 50px; - position: relative; - overflow: hidden; - width: 250px; - height: 50px; -} - -.nums span { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) rotate(120deg); - transform-origin: bottom center; -} - -.nums span.in { - transform: translate(-50%, -50%) rotate(0deg); - animation: goIn 0.5s ease-in-out; -} - -.nums span.out { - animation: goOut 0.5s ease-in-out; -} - -@keyframes goIn { - 0% { - transform: translate(-50%, -50%) rotate(120deg); - } - - 30% { - transform: translate(-50%, -50%) rotate(-20deg); - } - - 60% { - transform: translate(-50%, -50%) rotate(10deg); - } - - 100% { - transform: translate(-50%, -50%) rotate(0deg); - } -} - -@keyframes goOut { - 0% { - transform: translate(-50%, -50%) rotate(0deg); - } - - 60% { - transform: translate(-50%, -50%) rotate(20deg); - } - - 100% { - transform: translate(-50%, -50%) rotate(-120deg); - } -} - -#replay{ - background-color: #3498db; - border-radius: 3px; - border: none; - color: aliceblue; - padding: 5px; - text-align: center; - display: inline-block; - cursor: pointer; - transition: all 0.3s; -} - -#replay span{ - cursor: pointer; - display: inline-block; - position: relative; - transition: 0.3s; -} - -#replay span:after{ - content: '\00bb'; - position: absolute; - opacity: 0; - top: 0; - right: -20px; - transition: 0.5s; -} - -#replay:hover span{ - padding-right: 25px; -} - -#replay:hover span:after{ - opacity: 1; - right: 0; -} diff --git a/animated-navigation/index.html b/animated-navigation/index.html deleted file mode 100644 index 2801213..0000000 --- a/animated-navigation/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - Animated Navigation - - - - - - - - diff --git a/animated-navigation/script.js b/animated-navigation/script.js deleted file mode 100644 index fd77c00..0000000 --- a/animated-navigation/script.js +++ /dev/null @@ -1,4 +0,0 @@ -const toggle = document.getElementById('toggle') -const nav = document.getElementById('nav') - -toggle.addEventListener('click', () => nav.classList.toggle('active')) diff --git a/animated-navigation/style.css b/animated-navigation/style.css deleted file mode 100644 index 77959ef..0000000 --- a/animated-navigation/style.css +++ /dev/null @@ -1,107 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #eafbff; - background-image: linear-gradient( - to bottom, - #eafbff 0%, - #eafbff 50%, - #5290f9 50%, - #5290f9 100% - ); - font-family: 'Muli', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - margin: 0; -} - -nav { - background-color: #fff; - padding: 20px; - width: 80px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 3px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); - transition: width 0.6s linear; - overflow-x: hidden; -} - -nav.active { - width: 350px; -} - -nav ul { - display: flex; - list-style-type: none; - padding: 0; - margin: 0; - width: 0; - transition: width 0.6s linear; -} - -nav.active ul { - width: 100%; -} - -nav ul li { - transform: rotateY(0deg); - opacity: 0; - transition: transform 0.6s linear, opacity 0.6s linear; -} - -nav.active ul li { - opacity: 1; - transform: rotateY(360deg); -} - -nav ul a { - position: relative; - color: #000; - text-decoration: none; - margin: 0 10px; -} - -.icon { - background-color: #fff; - border: 0; - cursor: pointer; - padding: 0; - position: relative; - height: 30px; - width: 30px; -} - -.icon:focus { - outline: 0; -} - -.icon .line { - background-color: #5290f9; - height: 2px; - width: 20px; - position: absolute; - top: 10px; - left: 5px; - transition: transform 0.6s linear; -} - -.icon .line2 { - top: auto; - bottom: 10px; -} - -nav.active .icon .line1 { - transform: rotate(-765deg) translateY(5.5px); -} - -nav.active .icon .line2 { - transform: rotate(765deg) translateY(-5.5px); -} diff --git a/auto-text-effect/index.html b/auto-text-effect/index.html deleted file mode 100644 index 3fb9ade..0000000 --- a/auto-text-effect/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - Auto Text Effect - - -

Starting...

- -
- - -
- - - - diff --git a/auto-text-effect/script.js b/auto-text-effect/script.js deleted file mode 100644 index c302628..0000000 --- a/auto-text-effect/script.js +++ /dev/null @@ -1,22 +0,0 @@ -const textEl = document.getElementById('text') -const speedEl = document.getElementById('speed') -const text = 'We Love Programming!' -let idx = 1 -let speed = 300 / speedEl.value - -writeText() - -function writeText() { - textEl.innerText = text.slice(0, idx) - - idx++ - - if(idx > text.length) { - idx = 1 - } - - setTimeout(writeText, speed) -} - - -speedEl.addEventListener('input', (e) => speed = 300 / e.target.value) \ No newline at end of file diff --git a/auto-text-effect/style.css b/auto-text-effect/style.css deleted file mode 100644 index 71fae02..0000000 --- a/auto-text-effect/style.css +++ /dev/null @@ -1,38 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: darksalmon; - font-family: 'Roboto', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -div { - position: absolute; - bottom: 20px; - background: rgba(0, 0, 0, 0.1); - padding: 10px 20px; - font-size: 18px; -} - -input { - width: 50px; - padding: 5px; - font-size: 18px; - background-color: darksalmon; - border: none; - text-align: center; -} - -input:focus { - outline: none; -} diff --git a/background-slider/index.html b/background-slider/index.html deleted file mode 100644 index 1752bc7..0000000 --- a/background-slider/index.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - - - Background Slider - - -
-
-
- -
- -
- -
- - - - -
- - - diff --git a/background-slider/script.js b/background-slider/script.js deleted file mode 100644 index a15f328..0000000 --- a/background-slider/script.js +++ /dev/null @@ -1,40 +0,0 @@ -const body = document.body -const slides = document.querySelectorAll('.slide') -const leftBtn = document.getElementById('left') -const rightBtn = document.getElementById('right') - -let activeSlide = 0 - -rightBtn.addEventListener('click', () => { - activeSlide++ - - if (activeSlide > slides.length - 1) { - activeSlide = 0 - } - - setBgToBody() - setActiveSlide() -}) - -leftBtn.addEventListener('click', () => { - activeSlide-- - - if (activeSlide < 0) { - activeSlide = slides.length - 1 - } - - setBgToBody() - setActiveSlide() -}) - -setBgToBody() - -function setBgToBody() { - body.style.backgroundImage = slides[activeSlide].style.backgroundImage -} - -function setActiveSlide() { - slides.forEach((slide) => slide.classList.remove('active')) - - slides[activeSlide].classList.add('active') -} diff --git a/background-slider/style.css b/background-slider/style.css deleted file mode 100644 index 8e46937..0000000 --- a/background-slider/style.css +++ /dev/null @@ -1,79 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Roboto', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; - background-position: center center; - background-size: cover; - transition: 0.4s; -} - -body::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - background-color: rgba(0, 0, 0, 0.7); - z-index: -1; -} - -.slider-container { - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - height: 70vh; - width: 70vw; - position: relative; - overflow: hidden; -} - -.slide { - opacity: 0; - height: 100vh; - width: 100vw; - background-position: center center; - background-size: cover; - position: absolute; - top: -15vh; - left: -15vw; - transition: 0.4s ease; - z-index: 1; -} - -.slide.active { - opacity: 1; -} - -.arrow { - position: fixed; - background-color: transparent; - color: #fff; - padding: 20px; - font-size: 30px; - border: 2px solid orange; - top: 50%; - transform: translateY(-50%); - cursor: pointer; -} - -.arrow:focus { - outline: 0; -} - -.left-arrow { - left: calc(15vw - 65px); -} - -.right-arrow { - right: calc(15vw - 65px); -} diff --git a/blurry-loading/index.html b/blurry-loading/index.html deleted file mode 100644 index 99ff943..0000000 --- a/blurry-loading/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - Blurry Loading - - -
-
0%
- - - - diff --git a/blurry-loading/script.js b/blurry-loading/script.js deleted file mode 100644 index 7803e01..0000000 --- a/blurry-loading/script.js +++ /dev/null @@ -1,23 +0,0 @@ -const loadText = document.querySelector('.loading-text') -const bg = document.querySelector('.bg') - -let load = 0 - -let int = setInterval(blurring, 30) - -function blurring() { - load++ - - if (load > 99) { - clearInterval(int) - } - - loadText.innerText = `${load}%` - loadText.style.opacity = scale(load, 0, 100, 1, 0) - bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)` -} - -// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers -const scale = (num, in_min, in_max, out_min, out_max) => { - return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min -} diff --git a/blurry-loading/style.css b/blurry-loading/style.css deleted file mode 100644 index 621ed1d..0000000 --- a/blurry-loading/style.css +++ /dev/null @@ -1,32 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Ubuntu'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Ubuntu', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.bg { - background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80') - no-repeat center center/cover; - position: absolute; - top: -30px; - left: -30px; - width: calc(100vw + 60px); - height: calc(100vh + 60px); - z-index: -1; - filter: blur(0px); -} - -.loading-text { - font-size: 50px; - color: #fff; -} diff --git a/button-ripple-effect/index.html b/button-ripple-effect/index.html deleted file mode 100644 index 1c5eea8..0000000 --- a/button-ripple-effect/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Button Ripple Effect - - - - - - diff --git a/button-ripple-effect/script.js b/button-ripple-effect/script.js deleted file mode 100644 index b17ecf1..0000000 --- a/button-ripple-effect/script.js +++ /dev/null @@ -1,23 +0,0 @@ -const buttons = document.querySelectorAll('.ripple') - -buttons.forEach(button => { - button.addEventListener('click', function (e) { - const x = e.clientX - const y = e.clientY - - const buttonTop = e.target.offsetTop - const buttonLeft = e.target.offsetLeft - - const xInside = x - buttonLeft - const yInside = y - buttonTop - - const circle = document.createElement('span') - circle.classList.add('circle') - circle.style.top = yInside + 'px' - circle.style.left = xInside + 'px' - - this.appendChild(circle) - - setTimeout(() => circle.remove(), 500) - }) -}) \ No newline at end of file diff --git a/button-ripple-effect/style.css b/button-ripple-effect/style.css deleted file mode 100644 index 758a939..0000000 --- a/button-ripple-effect/style.css +++ /dev/null @@ -1,51 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #000; - font-family: 'Roboto', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -button { - background-color: purple; - color: #fff; - border: 1px purple solid; - font-size: 14px; - text-transform: uppercase; - letter-spacing: 2px; - padding: 20px 30px; - overflow: hidden; - margin: 10px 0; - position: relative; -} - -button:focus { - outline: none; -} - -button .circle { - position: absolute; - background-color: #fff; - width: 100px; - height: 100px; - border-radius: 50%; - transform: translate(-50%, -50%) scale(0); - animation: scale 0.5s ease-out; -} - -@keyframes scale { - to { - transform: translate(-50%, -50%) scale(3); - opacity: 0; - } -} diff --git a/content-placeholder/index.html b/content-placeholder/index.html deleted file mode 100644 index 14a6974..0000000 --- a/content-placeholder/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - Content Placeholder - - -
- - -
-

-   -

-

-   -   -   -   -

-
-
 
-
-   -   -
-
-
-
- - - - diff --git a/content-placeholder/script.js b/content-placeholder/script.js deleted file mode 100644 index e2f2359..0000000 --- a/content-placeholder/script.js +++ /dev/null @@ -1,26 +0,0 @@ -const header = document.getElementById('header') -const title = document.getElementById('title') -const excerpt = document.getElementById('excerpt') -const profile_img = document.getElementById('profile_img') -const name = document.getElementById('name') -const date = document.getElementById('date') - -const animated_bgs = document.querySelectorAll('.animated-bg') -const animated_bg_texts = document.querySelectorAll('.animated-bg-text') - -setTimeout(getData, 2500) - -function getData() { - header.innerHTML = - '' - title.innerHTML = 'Lorem ipsum dolor sit amet' - excerpt.innerHTML = - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis' - profile_img.innerHTML = - '' - name.innerHTML = 'John Doe' - date.innerHTML = 'Oct 08, 2020' - - animated_bgs.forEach((bg) => bg.classList.remove('animated-bg')) - animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text')) -} diff --git a/content-placeholder/style.css b/content-placeholder/style.css deleted file mode 100644 index ab5bdd6..0000000 --- a/content-placeholder/style.css +++ /dev/null @@ -1,106 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #ecf0f1; - font-family: 'Roboto', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -img { - max-width: 100%; -} - -.card { - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); - border-radius: 10px; - overflow: hidden; - width: 350px; -} - -.card-header { - height: 200px; -} - -.card-header img { - object-fit: cover; - height: 100%; - width: 100%; -} - -.card-content { - background-color: #fff; - padding: 30px; -} - -.card-title { - height: 20px; - margin: 0; -} - -.card-excerpt { - color: #777; - margin: 10px 0 20px; -} - -.author { - display: flex; -} - -.profile-img { - border-radius: 50%; - overflow: hidden; - height: 40px; - width: 40px; -} - -.author-info { - display: flex; - flex-direction: column; - justify-content: space-around; - margin-left: 10px; - width: 100px; -} - -.author-info small { - color: #aaa; - margin-top: 5px; -} - -.animated-bg { - background-image: linear-gradient( - to right, - #f6f7f8 0%, - #edeef1 10%, - #f6f7f8 20%, - #f6f7f8 100% - ); - background-size: 200% 100%; - animation: bgPos 1s linear infinite; -} - -.animated-bg-text { - border-radius: 50px; - display: inline-block; - margin: 0; - height: 10px; - width: 100%; -} - -@keyframes bgPos { - 0% { - background-position: 50% 0; - } - - 100% { - background-position: -150% 0; - } -} diff --git a/custom-range-slider/.vscode/settings.json b/custom-range-slider/.vscode/settings.json deleted file mode 100644 index 6f3a291..0000000 --- a/custom-range-slider/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} \ No newline at end of file diff --git a/custom-range-slider/index.html b/custom-range-slider/index.html deleted file mode 100644 index ebc41e7..0000000 --- a/custom-range-slider/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - Custom Range Slider - - -

Custom Range Slider

-
- - -
- - - - diff --git a/custom-range-slider/script.js b/custom-range-slider/script.js deleted file mode 100644 index 8fa6e72..0000000 --- a/custom-range-slider/script.js +++ /dev/null @@ -1,27 +0,0 @@ -const range = document.getElementById('range') - -range.addEventListener('input', (e) => { - const value = +e.target.value - const label = e.target.nextElementSibling - - const range_width = getComputedStyle(e.target).getPropertyValue('width') - const label_width = getComputedStyle(label).getPropertyValue('width') - - const num_width = +range_width.substring(0, range_width.length - 2) - const num_label_width = +label_width.substring(0, label_width.length - 2) - - const max = +e.target.max - const min = +e.target.min - - const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10) - - label.style.left = `${left}px` - - - label.innerHTML = value -}) - -// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers -const scale = (num, in_min, in_max, out_min, out_max) => { - return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; - } \ No newline at end of file diff --git a/custom-range-slider/style.css b/custom-range-slider/style.css deleted file mode 100644 index b0951d3..0000000 --- a/custom-range-slider/style.css +++ /dev/null @@ -1,108 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); - font-family: 'Lato', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -h2 { - position: absolute; - top: 10px; -} - -.range-container { - position: relative; -} - -input[type='range'] { - width: 300px; - margin: 18px 0; - -webkit-appearance: none; -} - -input[type='range']:focus { - outline: none; -} - -input[type='range'] + label { - background-color: #fff; - position: absolute; - top: -25px; - left: 110px; - width: 80px; - padding: 5px 0; - text-align: center; - border-radius: 4px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); -} - -/* Chrome & Safari */ -input[type='range']::-webkit-slider-runnable-track { - background: purple; - border-radius: 4px; - width: 100%; - height: 10px; - cursor: pointer; -} - -input[type='range']::-webkit-slider-thumb { - -webkit-appearance: none; - height: 24px; - width: 24px; - background: #fff; - border-radius: 50%; - border: 1px solid purple; - margin-top: -7px; - cursor: pointer; -} - -/* Firefox */ -input[type='range']::-moz-range-track { - background: purple; - border-radius: 4px; - width: 100%; - height: 13px; - cursor: pointer; -} - -input[type='range']::-moz-range-thumb { - -webkit-appearance: none; - height: 24px; - width: 24px; - background: #fff; - border-radius: 50%; - border: 1px solid purple; - margin-top: -7px; - cursor: pointer; -} - -/* IE */ -input[type='range']::-ms-track { - background: purple; - border-radius: 4px; - width: 100%; - height: 13px; - cursor: pointer; -} - -input[type='range']::-ms-thumb { - -webkit-appearance: none; - height: 24px; - width: 24px; - background: #fff; - border-radius: 50%; - border: 1px solid purple; - margin-top: -7px; - cursor: pointer; -} diff --git a/dad-jokes/index.html b/dad-jokes/index.html deleted file mode 100644 index 555bcdc..0000000 --- a/dad-jokes/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - Dad Jokes - - -
-

Don't Laugh Challenge

-
// Joke goes here
- -
- - - diff --git a/dad-jokes/script.js b/dad-jokes/script.js deleted file mode 100644 index e78e685..0000000 --- a/dad-jokes/script.js +++ /dev/null @@ -1,36 +0,0 @@ -const jokeEl = document.getElementById('joke') -const jokeBtn = document.getElementById('jokeBtn') - -jokeBtn.addEventListener('click', generateJoke) - -generateJoke() - -// USING ASYNC/AWAIT -async function generateJoke() { - const config = { - headers: { - Accept: 'application/json', - }, - } - - const res = await fetch('https://icanhazdadjoke.com', config) - - const data = await res.json() - - jokeEl.innerHTML = data.joke -} - -// USING .then() -// function generateJoke() { -// const config = { -// headers: { -// Accept: 'application/json', -// }, -// } - -// fetch('https://icanhazdadjoke.com', config) -// .then((res) => res.json()) -// .then((data) => { -// jokeEl.innerHTML = data.joke -// }) -// } diff --git a/dad-jokes/style.css b/dad-jokes/style.css deleted file mode 100644 index 38cc3a7..0000000 --- a/dad-jokes/style.css +++ /dev/null @@ -1,61 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #686de0; - font-family: 'Roboto', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; - padding: 20px; -} - -.container { - background-color: #fff; - border-radius: 10px; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); - padding: 50px 20px; - text-align: center; - max-width: 100%; - width: 800px; -} - -h3 { - margin: 0; - opacity: 0.5; - letter-spacing: 2px; -} - -.joke { - font-size: 30px; - letter-spacing: 1px; - line-height: 40px; - margin: 50px auto; - max-width: 600px; -} - -.btn { - background-color: #9f68e0; - color: #fff; - border: 0; - border-radius: 10px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); - padding: 14px 40px; - font-size: 16px; - cursor: pointer; -} - -.btn:active { - transform: scale(0.98); -} - -.btn:focus { - outline: 0; -} diff --git a/double-click-heart/index.html b/double-click-heart/index.html deleted file mode 100644 index 1278213..0000000 --- a/double-click-heart/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - Double Click Heart - - -

Double click on the image to it

- You liked it 0 times - -
- - - - diff --git a/double-click-heart/script.js b/double-click-heart/script.js deleted file mode 100644 index a121037..0000000 --- a/double-click-heart/script.js +++ /dev/null @@ -1,42 +0,0 @@ -const loveMe = document.querySelector('.loveMe') -const times = document.querySelector('#times') - -let clickTime = 0 -let timesClicked = 0 - -loveMe.addEventListener('click', (e) => { - if(clickTime === 0) { - clickTime = new Date().getTime() - } else { - if((new Date().getTime() - clickTime) < 800) { - createHeart(e) - clickTime = 0 - } else { - clickTime = new Date().getTime() - } - } -}) - -const createHeart = (e) => { - const heart = document.createElement('i') - heart.classList.add('fas') - heart.classList.add('fa-heart') - - const x = e.clientX - const y = e.clientY - - const leftOffset = e.target.offsetLeft - const topOffset = e.target.offsetTop - - const xInside = x - leftOffset - const yInside = y - topOffset - - heart.style.top = `${yInside}px` - heart.style.left = `${xInside}px` - - loveMe.appendChild(heart) - - times.innerHTML = ++timesClicked - - setTimeout(() => heart.remove(), 1000) -} \ No newline at end of file diff --git a/double-click-heart/style.css b/double-click-heart/style.css deleted file mode 100644 index c578a1e..0000000 --- a/double-click-heart/style.css +++ /dev/null @@ -1,53 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Oswald'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Oswald', sans-serif; - text-align: center; - overflow: hidden; - margin: 0; -} - -h3 { - margin-bottom: 0; - text-align: center; -} - -small { - display: block; - margin-bottom: 20px; - text-align: center; -} - -.fa-heart { - color: red; -} - -.loveMe { - height: 440px; - width: 300px; - background: url('https://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80') - no-repeat center center/cover; - margin: auto; - cursor: pointer; - max-width: 100%; - position: relative; - box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); - overflow: hidden; -} - -.loveMe .fa-heart { - position: absolute; - animation: grow 0.6s linear; - transform: translate(-50%, -50%) scale(0); -} - -@keyframes grow { - to { - transform: translate(-50%, -50%) scale(10); - opacity: 0; - } -} diff --git a/double-vertical-slider/index.html b/double-vertical-slider/index.html deleted file mode 100644 index f7a229b..0000000 --- a/double-vertical-slider/index.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - Vertical Slider - - -
-
-
-

Nature flower

-

all in pink

-
-
-

Bluuue Sky

-

with it's mountains

-
-
-

Lonely castle

-

in the wilderness

-
-
-

Flying eagle

-

in the sunset

-
-
-
-
-
-
-
-
-
- - -
-
- - - - diff --git a/double-vertical-slider/script.js b/double-vertical-slider/script.js deleted file mode 100644 index 996730f..0000000 --- a/double-vertical-slider/script.js +++ /dev/null @@ -1,31 +0,0 @@ -const sliderContainer = document.querySelector('.slider-container') -const slideRight = document.querySelector('.right-slide') -const slideLeft = document.querySelector('.left-slide') -const upButton = document.querySelector('.up-button') -const downButton = document.querySelector('.down-button') -const slidesLength = slideRight.querySelectorAll('div').length - -let activeSlideIndex = 0 - -slideLeft.style.top = `-${(slidesLength - 1) * 100}vh` - -upButton.addEventListener('click', () => changeSlide('up')) -downButton.addEventListener('click', () => changeSlide('down')) - -const changeSlide = (direction) => { - const sliderHeight = sliderContainer.clientHeight - if(direction === 'up') { - activeSlideIndex++ - if(activeSlideIndex > slidesLength - 1) { - activeSlideIndex = 0 - } - } else if(direction === 'down') { - activeSlideIndex-- - if(activeSlideIndex < 0) { - activeSlideIndex = slidesLength - 1 - } - } - - slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)` - slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)` -} \ No newline at end of file diff --git a/double-vertical-slider/style.css b/double-vertical-slider/style.css deleted file mode 100644 index 709c11d..0000000 --- a/double-vertical-slider/style.css +++ /dev/null @@ -1,97 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Open+Sans'); - -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -body { - font-family: 'Open Sans', sans-serif; - height: 100vh; -} - -.slider-container { - position: relative; - overflow: hidden; - width: 100vw; - height: 100vh; -} - -.left-slide { - height: 100%; - width: 35%; - position: absolute; - top: 0; - left: 0; - transition: transform 0.5s ease-in-out; -} - -.left-slide > div { - height: 100%; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: #fff; -} - -.left-slide h1 { - font-size: 40px; - margin-bottom: 10px; - margin-top: -30px; -} - -.right-slide { - height: 100%; - position: absolute; - top: 0; - left: 35%; - width: 65%; - transition: transform 0.5s ease-in-out; -} - -.right-slide > div { - background-repeat: no-repeat; - background-size: cover; - background-position: center center; - height: 100%; - width: 100%; -} - -button { - background-color: #fff; - border: none; - color: #aaa; - cursor: pointer; - font-size: 16px; - padding: 15px; -} - -button:hover { - color: #222; -} - -button:focus { - outline: none; -} - -.slider-container .action-buttons button { - position: absolute; - left: 35%; - top: 50%; - z-index: 100; -} - -.slider-container .action-buttons .down-button { - transform: translateX(-100%); - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; -} - -.slider-container .action-buttons .up-button { - transform: translateY(-100%); - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; -} diff --git a/drag-n-drop/index.html b/drag-n-drop/index.html deleted file mode 100644 index a04cdc4..0000000 --- a/drag-n-drop/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - Drag N Drop - - -
-
-
-
-
-
-
- - - - diff --git a/drag-n-drop/script.js b/drag-n-drop/script.js deleted file mode 100644 index abc8a6e..0000000 --- a/drag-n-drop/script.js +++ /dev/null @@ -1,39 +0,0 @@ -const fill = document.querySelector('.fill') -const empties = document.querySelectorAll('.empty') - -fill.addEventListener('dragstart', dragStart) -fill.addEventListener('dragend', dragEnd) - -for(const empty of empties) { - empty.addEventListener('dragover', dragOver) - empty.addEventListener('dragenter', dragEnter) - empty.addEventListener('dragleave', dragLeave) - empty.addEventListener('drop', dragDrop) -} - -function dragStart() { - this.className += ' hold' - setTimeout(() => this.className = 'invisible', 0) -} - -function dragEnd() { - this.className = 'fill' -} - -function dragOver(e) { - e.preventDefault() -} - -function dragEnter(e) { - e.preventDefault() - this.className += ' hovered' -} - -function dragLeave() { - this.className = 'empty' -} - -function dragDrop() { - this.className = 'empty' - this.append(fill) -} \ No newline at end of file diff --git a/drag-n-drop/style.css b/drag-n-drop/style.css deleted file mode 100644 index c5036ab..0000000 --- a/drag-n-drop/style.css +++ /dev/null @@ -1,44 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - background-color: steelblue; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.empty { - height: 150px; - width: 150px; - margin: 10px; - border: solid 3px black; - background: white; -} - -.fill { - background-image: url('https://source.unsplash.com/random/150x150'); - height: 145px; - width: 145px; - cursor: pointer; -} - -.hold { - border: solid 5px #ccc; -} - -.hovered { - background-color: #333; - border-color: white; - border-style: dashed; -} - -@media (max-width: 800px) { - body { - flex-direction: column; - } -} diff --git a/drawing-app/index.html b/drawing-app/index.html deleted file mode 100644 index 8edb4e2..0000000 --- a/drawing-app/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - Drawing App - - - -
- - 10 - - - -
- - - - diff --git a/drawing-app/script.js b/drawing-app/script.js deleted file mode 100644 index 833a43f..0000000 --- a/drawing-app/script.js +++ /dev/null @@ -1,86 +0,0 @@ -const canvas = document.getElementById('canvas'); -const increaseBtn = document.getElementById('increase'); -const decreaseBtn = document.getElementById('decrease'); -const sizeEL = document.getElementById('size'); -const colorEl = document.getElementById('color'); -const clearEl = document.getElementById('clear'); - -const ctx = canvas.getContext('2d'); - -let size = 10 -let isPressed = false -colorEl.value = 'black' -let color = colorEl.value -let x -let y - -canvas.addEventListener('mousedown', (e) => { - isPressed = true - - x = e.offsetX - y = e.offsetY -}) - -document.addEventListener('mouseup', (e) => { - isPressed = false - - x = undefined - y = undefined -}) - -canvas.addEventListener('mousemove', (e) => { - if(isPressed) { - const x2 = e.offsetX - const y2 = e.offsetY - - drawCircle(x2, y2) - drawLine(x, y, x2, y2) - - x = x2 - y = y2 - } -}) - -function drawCircle(x, y) { - ctx.beginPath(); - ctx.arc(x, y, size, 0, Math.PI * 2) - ctx.fillStyle = color - ctx.fill() -} - -function drawLine(x1, y1, x2, y2) { - ctx.beginPath() - ctx.moveTo(x1, y1) - ctx.lineTo(x2, y2) - ctx.strokeStyle = color - ctx.lineWidth = size * 2 - ctx.stroke() -} - -function updateSizeOnScreen() { - sizeEL.innerText = size -} - -increaseBtn.addEventListener('click', () => { - size += 5 - - if(size > 50) { - size = 50 - } - - updateSizeOnScreen() -}) - -decreaseBtn.addEventListener('click', () => { - size -= 5 - - if(size < 5) { - size = 5 - } - - updateSizeOnScreen() -}) - -colorEl.addEventListener('change', (e) => color = e.target.value) - -clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height)) diff --git a/drawing-app/style.css b/drawing-app/style.css deleted file mode 100644 index 8c45752..0000000 --- a/drawing-app/style.css +++ /dev/null @@ -1,46 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #f5f5f5; - font-family: 'Roboto', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - margin: 0; -} - -canvas { - border: 2px solid steelblue; -} - -.toolbox { - background-color: steelblue; - border: 1px solid slateblue; - display: flex; - width: 804px; - padding: 1rem; -} - -.toolbox > * { - background-color: #fff; - border: none; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 2rem; - height: 50px; - width: 50px; - margin: 0.25rem; - padding: 0.25rem; - cursor: pointer; -} - -.toolbox > *:last-child { - margin-left: auto; -} diff --git a/drink-water/index.html b/drink-water/index.html deleted file mode 100644 index ca934e1..0000000 --- a/drink-water/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - Drink Water - - -

Drink Water

-

Goal: 2 Liters

- -
-
- - Remained -
- -
-
- -

Select how many glasses of water that you have drank

- -
-
250 ml
-
250 ml
-
250 ml
-
250 ml
-
250 ml
-
250 ml
-
250 ml
-
250 ml
-
- - - - diff --git a/drink-water/script.js b/drink-water/script.js deleted file mode 100644 index 12143ae..0000000 --- a/drink-water/script.js +++ /dev/null @@ -1,49 +0,0 @@ -const smallCups = document.querySelectorAll('.cup-small') -const liters = document.getElementById('liters') -const percentage = document.getElementById('percentage') -const remained = document.getElementById('remained') - -updateBigCup() - -smallCups.forEach((cup, idx) => { - cup.addEventListener('click', () => highlightCups(idx)) -}) - -function highlightCups(idx) { - if (idx===7 && smallCups[idx].classList.contains("full")) idx--; - else if(smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling.classList.contains('full')) { - idx-- - } - - smallCups.forEach((cup, idx2) => { - if(idx2 <= idx) { - cup.classList.add('full') - } else { - cup.classList.remove('full') - } - }) - - updateBigCup() -} - -function updateBigCup() { - const fullCups = document.querySelectorAll('.cup-small.full').length - const totalCups = smallCups.length - - if(fullCups === 0) { - percentage.style.visibility = 'hidden' - percentage.style.height = 0 - } else { - percentage.style.visibility = 'visible' - percentage.style.height = `${fullCups / totalCups * 330}px` - percentage.innerText = `${fullCups / totalCups * 100}%` - } - - if(fullCups === totalCups) { - remained.style.visibility = 'hidden' - remained.style.height = 0 - } else { - remained.style.visibility = 'visible' - liters.innerText = `${2 - (250 * fullCups / 1000)}L` - } -} diff --git a/drink-water/style.css b/drink-water/style.css deleted file mode 100644 index f4580ab..0000000 --- a/drink-water/style.css +++ /dev/null @@ -1,104 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap'); - -:root { - --border-color: #144fc6; - --fill-color: #6ab3f8; -} - -* { - box-sizing: border-box; -} - -body { - background-color: #3494e4; - color: #fff; - font-family: 'Montserrat', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 40px; -} - -h1 { - margin: 10px 0 0; -} - -h3 { - font-weight: 400; - margin: 10px 0; -} - -.cup { - background-color: #fff; - border: 4px solid var(--border-color); - color: var(--border-color); - border-radius: 0 0 40px 40px; - height: 330px; - width: 150px; - margin: 30px 0; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.cup.cup-small { - height: 95px; - width: 50px; - border-radius: 0 0 15px 15px; - background-color: rgba(255, 255, 255, 0.9); - cursor: pointer; - font-size: 14px; - align-items: center; - justify-content: center; - text-align: center; - margin: 5px; - transition: 0.3s ease; -} - -.cup.cup-small.full { - background-color: var(--fill-color); - color: #fff; -} - -.cups { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - width: 280px; -} - -.remained { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - flex: 1; - transition: 0.3s ease; -} - -.remained span { - font-size: 20px; - font-weight: bold; -} - -.remained small { - font-size: 12px; -} - -.percentage { - background-color: var(--fill-color); - display: flex; - align-items: center; - justify-content: center; - font-weight: bold; - font-size: 30px; - height: 0; - transition: 0.3s ease; -} - -.text { - text-align: center; - margin: 0 0 5px; -} diff --git a/event-keycodes/index.html b/event-keycodes/index.html deleted file mode 100644 index a6b9ad0..0000000 --- a/event-keycodes/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - Event KeyCodes - - -
-
- Press any key to get the keyCode -
-
- - - diff --git a/event-keycodes/script.js b/event-keycodes/script.js deleted file mode 100644 index 68dab4d..0000000 --- a/event-keycodes/script.js +++ /dev/null @@ -1,20 +0,0 @@ -const insert = document.getElementById('insert') - -window.addEventListener('keydown', (event) => { - insert.innerHTML = ` -
- ${event.key === ' ' ? 'Space' : event.key} - event.key -
- -
- ${event.keyCode} - event.keyCode -
- -
- ${event.code} - event.code -
- ` -}) \ No newline at end of file diff --git a/event-keycodes/style.css b/event-keycodes/style.css deleted file mode 100644 index e597872..0000000 --- a/event-keycodes/style.css +++ /dev/null @@ -1,48 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #e1e1e1; - font-family: 'Muli', sans-serif; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.key { - border: 1px solid #999; - background-color: #eee; - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); - display: inline-flex; - align-items: center; - font-size: 20px; - font-weight: bold; - padding: 20px; - flex-direction: column; - margin: 10px; - min-width: 150px; - position: relative; -} - -.key small { - position: absolute; - top: -24px; - left: 0; - text-align: center; - width: 100%; - color: #555; - font-size: 14px; -} - -@media(max-width:768px){ - .key{ - margin: 10px 0px; - } -} diff --git a/expanding-cards/index.html b/expanding-cards/index.html deleted file mode 100644 index 164951d..0000000 --- a/expanding-cards/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - Expanding Cards - - -
-
-

Explore The World

-
-
-

Wild Forest

-
-
-

Sunny Beach

-
-
-

City on Winter

-
-
-

Mountains - Clouds

-
- -
- - - - diff --git a/expanding-cards/script.js b/expanding-cards/script.js deleted file mode 100644 index 68d6b5c..0000000 --- a/expanding-cards/script.js +++ /dev/null @@ -1,14 +0,0 @@ -const panels = document.querySelectorAll('.panel') - -panels.forEach(panel => { - panel.addEventListener('click', () => { - removeActiveClasses() - panel.classList.add('active') - }) -}) - -function removeActiveClasses() { - panels.forEach(panel => { - panel.classList.remove('active') - }) -} \ No newline at end of file diff --git a/expanding-cards/style.css b/expanding-cards/style.css deleted file mode 100644 index a6fe024..0000000 --- a/expanding-cards/style.css +++ /dev/null @@ -1,63 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Muli', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.container { - display: flex; - width: 90vw; -} - -.panel { - background-size: cover; - background-position: center; - background-repeat: no-repeat; - height: 80vh; - border-radius: 50px; - color: #fff; - cursor: pointer; - flex: 0.5; - margin: 10px; - position: relative; - -webkit-transition: all 700ms ease-in; -} - -.panel h3 { - font-size: 24px; - position: absolute; - bottom: 20px; - left: 20px; - margin: 0; - opacity: 0; -} - -.panel.active { - flex: 5; -} - -.panel.active h3 { - opacity: 1; - transition: opacity 0.3s ease-in 0.4s; -} - -@media (max-width: 480px) { - .container { - width: 100vw; - } - - .panel:nth-of-type(4), - .panel:nth-of-type(5) { - display: none; - } -} diff --git a/faq-collapse/index.html b/faq-collapse/index.html deleted file mode 100644 index a690091..0000000 --- a/faq-collapse/index.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - FAQ - - -

Frequently Asked Questions

-
-
-

- Why shouldn't we trust atoms? -

- -

- They make up everything -

- - -
- -
-

- What do you call someone with no body and no nose? -

-

- Nobody knows. -

- -
- -
-

- What's the object-oriented way to become wealthy? -

-

- Inheritance. -

- -
- -
-

- How many tickles does it take to tickle an octopus? -

-

- Ten-tickles! -

- -
- -
-

- What is: 1 + 1? -

-

- Depends on who are you asking. -

- -
-
- - - diff --git a/faq-collapse/script.js b/faq-collapse/script.js deleted file mode 100644 index f1d63bb..0000000 --- a/faq-collapse/script.js +++ /dev/null @@ -1,7 +0,0 @@ -const toggles = document.querySelectorAll('.faq-toggle') - -toggles.forEach(toggle => { - toggle.addEventListener('click', () => { - toggle.parentNode.classList.toggle('active') - }) -}) \ No newline at end of file diff --git a/faq-collapse/style.css b/faq-collapse/style.css deleted file mode 100644 index cc2db22..0000000 --- a/faq-collapse/style.css +++ /dev/null @@ -1,107 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Muli', sans-serif; - background-color: #f0f0f0; -} - -h1 { - margin: 50px 0 30px; - text-align: center; -} - -.faq-container { - max-width: 600px; - margin: 0 auto; -} - -.faq { - background-color: transparent; - border: 1px solid #9fa4a8; - border-radius: 10px; - margin: 20px 0; - padding: 30px; - position: relative; - overflow: hidden; - transition: 0.3s ease; -} - -.faq.active { - background-color: #fff; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); -} - -.faq.active::before, -.faq.active::after { - content: '\f075'; - font-family: 'Font Awesome 5 Free'; - color: #2ecc71; - font-size: 7rem; - position: absolute; - opacity: 0.2; - top: 20px; - left: 20px; - z-index: 0; -} - -.faq.active::before { - color: #3498db; - top: -10px; - left: -30px; - transform: rotateY(180deg); -} - -.faq-title { - margin: 0 35px 0 0; -} - -.faq-text { - display: none; - margin: 30px 0 0; -} - -.faq.active .faq-text { - display: block; -} - -.faq-toggle { - background-color: transparent; - border: 0; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - padding: 0; - position: absolute; - top: 30px; - right: 30px; - height: 30px; - width: 30px; -} - -.faq-toggle:focus { - outline: 0; -} - -.faq-toggle .fa-times { - display: none; -} - -.faq.active .faq-toggle .fa-times { - color: #fff; - display: block; -} - -.faq.active .faq-toggle .fa-chevron-down { - display: none; -} - -.faq.active .faq-toggle { - background-color: #9fa4a8; -} diff --git a/feedback-ui-design/index.html b/feedback-ui-design/index.html deleted file mode 100644 index 504bc64..0000000 --- a/feedback-ui-design/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - Let Us Know Your Feedback - - -
- How satisfied are you with our
customer support performance? -
-
- - Unhappy -
- -
- - Neutral -
- -
- - Satisfied -
-
- -
- - - diff --git a/feedback-ui-design/script.js b/feedback-ui-design/script.js deleted file mode 100644 index 1b758c5..0000000 --- a/feedback-ui-design/script.js +++ /dev/null @@ -1,38 +0,0 @@ -const ratings = document.querySelectorAll('.rating') -const ratingsContainer = document.querySelector('.ratings-container') -const sendBtn = document.querySelector('#send') -const panel = document.querySelector('#panel') -let selectedRating = 'Satisfied' - -ratingsContainer.addEventListener('click', (e) => { - if(e.target.parentNode.classList.contains('rating') && e.target.nextElementSibling) { - removeActive() - e.target.parentNode.classList.add('active') - selectedRating = e.target.nextElementSibling.innerHTML - } else if( - e.target.parentNode.classList.contains('rating') && - e.target.previousSibling && - e.target.previousElementSibling.nodeName === 'IMG' - ) { - removeActive() - e.target.parentNode.classList.add('active') - selectedRating = e.target.innerHTML - } - -}) - -sendBtn.addEventListener('click', (e) => { - panel.innerHTML = ` - - Thank You! -
- Feedback: ${selectedRating} -

We'll use your feedback to improve our customer support

- ` -}) - -function removeActive() { - for(let i = 0; i < ratings.length; i++) { - ratings[i].classList.remove('active') - } -} diff --git a/feedback-ui-design/style.css b/feedback-ui-design/style.css deleted file mode 100644 index 5b4ad46..0000000 --- a/feedback-ui-design/style.css +++ /dev/null @@ -1,90 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #fef9f2; - font-family: 'Montserrat', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.panel-container { - background-color: #fff; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); - border-radius: 4px; - font-size: 90%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - padding: 30px; - max-width: 400px; -} - -.panel-container strong { - line-height: 20px; -} - -.ratings-container { - display: flex; - margin: 20px 0; -} - -.rating { - flex: 1; - cursor: pointer; - padding: 20px; - margin: 10px 5px; -} - -.rating:hover, -.rating.active { - border-radius: 4px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -} - -.rating img { - width: 40px; -} - -.rating small { - color: #555; - display: inline-block; - margin: 10px 0 0; -} - -.rating:hover small, -.rating.active small { - color: #111; -} - -.btn { - background-color: #302d2b; - color: #fff; - border: 0; - border-radius: 4px; - padding: 12px 30px; - cursor: pointer; -} - -.btn:focus { - outline: 0; -} - -.btn:active { - transform: scale(0.98); -} - -.fa-heart { - color: red; - font-size: 30px; - margin-bottom: 10px; -} diff --git a/form-input-wave/index.html b/form-input-wave/index.html deleted file mode 100644 index 77ddc08..0000000 --- a/form-input-wave/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - Form Input Wave - - -
-

Please Login

-
-
- - - -
- -
- - -
- - - -

Don't have an account? Register

-
-
- - - diff --git a/form-input-wave/script.js b/form-input-wave/script.js deleted file mode 100644 index b740afd..0000000 --- a/form-input-wave/script.js +++ /dev/null @@ -1,8 +0,0 @@ -const labels = document.querySelectorAll('.form-control label') - -labels.forEach(label => { - label.innerHTML = label.innerText - .split('') - .map((letter, idx) => `${letter}`) - .join('') -}) \ No newline at end of file diff --git a/form-input-wave/style.css b/form-input-wave/style.css deleted file mode 100644 index 2269f7b..0000000 --- a/form-input-wave/style.css +++ /dev/null @@ -1,101 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: steelblue; - color: #fff; - font-family: 'Muli', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.container { - background-color: rgba(0, 0, 0, 0.4); - padding: 20px 40px; - border-radius: 5px; -} - -.container h1 { - text-align: center; - margin-bottom: 30px; -} - -.container a { - text-decoration: none; - color: lightblue; -} - -.btn { - cursor: pointer; - display: inline-block; - width: 100%; - background: lightblue; - padding: 15px; - font-family: inherit; - font-size: 16px; - border: 0; - border-radius: 5px; -} - -.btn:focus { - outline: 0; -} - -.btn:active { - transform: scale(0.98); -} - -.text { - margin-top: 30px; -} - -.form-control { - position: relative; - margin: 20px 0 40px; - width: 300px; -} - -.form-control input { - background-color: transparent; - border: 0; - border-bottom: 2px #fff solid; - display: block; - width: 100%; - padding: 15px 0; - font-size: 18px; - color: #fff; -} - -.form-control input:focus, -.form-control input:valid { - outline: 0; - border-bottom-color: lightblue; -} - -.form-control label { - position: absolute; - top: 15px; - left: 0; - pointer-events: none; -} - -.form-control label span { - display: inline-block; - font-size: 18px; - min-width: 5px; - transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -} - -.form-control input:focus + label span, -.form-control input:valid + label span { - color: lightblue; - transform: translateY(-30px); -} diff --git a/github-profiles/index.html b/github-profiles/index.html deleted file mode 100644 index 5157144..0000000 --- a/github-profiles/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - Github Profiles - - -
- -
- -
- - - - - diff --git a/github-profiles/script.js b/github-profiles/script.js deleted file mode 100644 index 6ac589d..0000000 --- a/github-profiles/script.js +++ /dev/null @@ -1,92 +0,0 @@ -const APIURL = 'https://api.github.com/users/' - -const main = document.getElementById('main') -const form = document.getElementById('form') -const search = document.getElementById('search') - -async function getUser(username) { - try { - const { data } = await axios(APIURL + username) - - createUserCard(data) - getRepos(username) - } catch(err) { - if(err.response.status == 404) { - createErrorCard('No profile with this username') - } - } -} - -async function getRepos(username) { - try { - const { data } = await axios(APIURL + username + '/repos?sort=created') - - addReposToCard(data) - } catch(err) { - createErrorCard('Problem fetching repos') - } -} - -function createUserCard(user) { - const userID = user.name || user.login - const userBio = user.bio ? `

${user.bio}

` : '' - const cardHTML = ` -
-
- ${user.name} -
-
-

${userID}

- ${userBio} - - -
-
-
- ` - main.innerHTML = cardHTML - -} - -function createErrorCard(msg) { - const cardHTML = ` -
-

${msg}

-
- ` - - main.innerHTML = cardHTML -} - -function addReposToCard(repos) { - const reposEl = document.getElementById('repos') - - repos - .slice(0, 5) - .forEach(repo => { - const repoEl = document.createElement('a') - repoEl.classList.add('repo') - repoEl.href = repo.html_url - repoEl.target = '_blank' - repoEl.innerText = repo.name - - reposEl.appendChild(repoEl) - }) -} - -form.addEventListener('submit', (e) => { - e.preventDefault() - - const user = search.value - - if(user) { - getUser(user) - - search.value = '' - } -}) - diff --git a/github-profiles/style.css b/github-profiles/style.css deleted file mode 100644 index b648f88..0000000 --- a/github-profiles/style.css +++ /dev/null @@ -1,113 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #2a2a72; - color: #fff; - font-family: 'Poppins', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.user-form { - width: 100%; - max-width: 700px; -} - -.user-form input { - width: 100%; - display: block; - background-color: #4c2885; - 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); -} - -.user-form input::placeholder { - color: #bbb; -} - -.user-form input:focus { - outline: none; -} - -.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; -} - -.avatar { - border-radius: 50%; - border: 10px solid #2a2a72; - height: 150px; - width: 150px; -} - -.user-info { - color: #eee; - margin-left: 2rem; -} - -.user-info h2 { - margin-top: 0; -} - -.user-info ul { - list-style-type: none; - display: flex; - justify-content: space-between; - padding: 0; - max-width: 400px; -} - -.user-info ul li { - display: flex; - align-items: center; -} - -.user-info ul li strong { - font-size: 0.9rem; - margin-left: 0.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; -} - -@media (max-width: 500px) { - .card { - flex-direction: column; - align-items: center; - } - - .user-form { - max-width: 400px; - } -} diff --git a/good-cheap-fast/index.html b/good-cheap-fast/index.html deleted file mode 100644 index 2be481c..0000000 --- a/good-cheap-fast/index.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - Good, Cheap, Fast - - -

How do you want your project to be?

-
- - - Good -
- -
- - - Cheap -
- -
- - - Fast -
- - - diff --git a/good-cheap-fast/script.js b/good-cheap-fast/script.js deleted file mode 100644 index 622600e..0000000 --- a/good-cheap-fast/script.js +++ /dev/null @@ -1,22 +0,0 @@ -const toggles = document.querySelectorAll('.toggle') -const good = document.querySelector('#good') -const cheap = document.querySelector('#cheap') -const fast = document.querySelector('#fast') - -toggles.forEach(toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target))) - -function doTheTrick(theClickedOne) { - if(good.checked && cheap.checked && fast.checked) { - if(good === theClickedOne) { - fast.checked = false - } - - if(cheap === theClickedOne) { - good.checked = false - } - - if(fast === theClickedOne) { - cheap.checked = false - } - } -} \ No newline at end of file diff --git a/good-cheap-fast/style.css b/good-cheap-fast/style.css deleted file mode 100644 index 32ced37..0000000 --- a/good-cheap-fast/style.css +++ /dev/null @@ -1,83 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Roboto', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.toggle-container { - display: flex; - align-items: center; - margin: 10px 0; - width: 200px; -} - -.toggle { - visibility: hidden; -} - -.label { - position: relative; - background-color: #d0d0d0; - border-radius: 50px; - cursor: pointer; - display: inline-block; - margin: 0 15px 0; - width: 80px; - height: 40px; -} - -.toggle:checked + .label { - background-color: #8e44ad; -} - -.ball { - background: #fff; - height: 34px; - width: 34px; - border-radius: 50%; - position: absolute; - top: 3px; - left: 3px; - align-items: center; - justify-content: center; - animation: slideOff 0.3s linear forwards; -} - -.toggle:checked + .label .ball { - animation: slideOn 0.3s linear forwards; -} - -@keyframes slideOn { - 0% { - transform: translateX(0) scale(1); - } - 50% { - transform: translateX(20px) scale(1.2); - } - 100% { - transform: translateX(40px) scale(1); - } -} - -@keyframes slideOff { - 0% { - transform: translateX(40px) scale(1); - } - 50% { - transform: translateX(20px) scale(1.2); - } - 100% { - transform: translateX(0) scale(1); - } -} diff --git a/hidden-search/index.html b/hidden-search/index.html deleted file mode 100644 index 54f45b9..0000000 --- a/hidden-search/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - Hidden Search - - -
- - -
- - - diff --git a/hidden-search/script.js b/hidden-search/script.js deleted file mode 100644 index e8eb0d0..0000000 --- a/hidden-search/script.js +++ /dev/null @@ -1,8 +0,0 @@ -const search = document.querySelector('.search') -const btn = document.querySelector('.btn') -const input = document.querySelector('.input') - -btn.addEventListener('click', () => { - search.classList.toggle('active') - input.focus() -}) \ No newline at end of file diff --git a/hidden-search/style.css b/hidden-search/style.css deleted file mode 100644 index 4dadd30..0000000 --- a/hidden-search/style.css +++ /dev/null @@ -1,57 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-image: linear-gradient(90deg, #7d5fff, #7158e2); - font-family: 'Roboto', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.search { - position: relative; - height: 50px; -} - -.search .input { - background-color: #fff; - border: 0; - font-size: 18px; - padding: 15px; - height: 50px; - width: 50px; - transition: width 0.3s ease; -} - -.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; -} - -.btn:focus, -.input:focus { - outline: none; -} - -.search.active .input { - width: 200px; -} - -.search.active .btn { - transform: translateX(198px); -} diff --git a/hoverboard/index.html b/hoverboard/index.html deleted file mode 100644 index efe9a9e..0000000 --- a/hoverboard/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Hoverboard - - -
- - - diff --git a/hoverboard/script.js b/hoverboard/script.js deleted file mode 100644 index d888c8b..0000000 --- a/hoverboard/script.js +++ /dev/null @@ -1,29 +0,0 @@ -const container = document.getElementById('container') -const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71'] -const SQUARES = 500 - -for(let i = 0; i < SQUARES; i++) { - const square = document.createElement('div') - square.classList.add('square') - - square.addEventListener('mouseover', () => setColor(square)) - - square.addEventListener('mouseout', () => removeColor(square)) - - container.appendChild(square) -} - -function setColor(element) { - const color = getRandomColor() - element.style.background = color - element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}` -} - -function removeColor(element) { - element.style.background = '#1d1d1d' - element.style.boxShadow = '0 0 2px #000' -} - -function getRandomColor() { - return colors[Math.floor(Math.random() * colors.length)] -} \ No newline at end of file diff --git a/hoverboard/style.css b/hoverboard/style.css deleted file mode 100644 index 1283d2e..0000000 --- a/hoverboard/style.css +++ /dev/null @@ -1,34 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - background-color: #111; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.container { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 400px; -} - -.square { - background-color: #1d1d1d; - box-shadow: 0 0 2px #000; - height: 16px; - width: 16px; - margin: 2px; - transition: 2s ease; -} - -.square:hover { - transition-duration: 0s; -} diff --git a/image-carousel/index.html b/image-carousel/index.html deleted file mode 100644 index a3386f9..0000000 --- a/image-carousel/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - Image Carousel - - -
-
- first-image - second-image - third-image - fourth-image -
- -
- - -
-
- - - - diff --git a/image-carousel/script.js b/image-carousel/script.js deleted file mode 100644 index 2d0532c..0000000 --- a/image-carousel/script.js +++ /dev/null @@ -1,41 +0,0 @@ -const imgs = document.getElementById('imgs') -const leftBtn = document.getElementById('left') -const rightBtn = document.getElementById('right') - -const img = document.querySelectorAll('#imgs img') - -let idx = 0 - -let interval = setInterval(run, 2000) - -function run() { - idx++ - changeImage() -} - -function changeImage() { - if(idx > img.length - 1) { - idx = 0 - } else if(idx < 0) { - idx = img.length - 1 - } - - imgs.style.transform = `translateX(${-idx * 500}px)` -} - -function resetInterval() { - clearInterval(interval) - interval = setInterval(run, 2000) -} - -rightBtn.addEventListener('click', () => { - idx++ - changeImage() - resetInterval() -}) - -leftBtn.addEventListener('click', () => { - idx-- - changeImage() - resetInterval() -}) diff --git a/image-carousel/style.css b/image-carousel/style.css deleted file mode 100644 index 338592c..0000000 --- a/image-carousel/style.css +++ /dev/null @@ -1,55 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Roboto', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - margin: 0; -} - -img { - width: 500px; - height: 500px; - object-fit: cover; -} - -.carousel { - box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); - height: 530px; - width: 500px; - overflow: hidden; -} - -.image-container { - display: flex; - transform: translateX(0); - transition: transform 0.5s ease-in-out; -} - -.buttons-container { - display: flex; - justify-content: space-between; -} - -.btn { - background-color: rebeccapurple; - color: #fff; - border: none; - padding: 0.5rem; - cursor: pointer; - width: 49.5%; -} - -.btn:hover { - opacity: 0.9; -} - -.btn:focus { - outline: none; -} diff --git a/incrementing-counter/index.html b/incrementing-counter/index.html deleted file mode 100644 index 8bab33f..0000000 --- a/incrementing-counter/index.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - Increment Counter - - -
- -
- Twitter Followers -
- -
- -
- YouTube Subscribers -
- -
- -
- Facebook Fans -
- - - diff --git a/incrementing-counter/script.js b/incrementing-counter/script.js deleted file mode 100644 index 1bb0837..0000000 --- a/incrementing-counter/script.js +++ /dev/null @@ -1,21 +0,0 @@ -const counters = document.querySelectorAll('.counter') - -counters.forEach(counter => { - counter.innerText = '0' - - const updateCounter = () => { - const target = +counter.getAttribute('data-target') - const c = +counter.innerText - - const increment = target / 200 - - if(c < target) { - counter.innerText = `${Math.ceil(c + increment)}` - setTimeout(updateCounter, 1) - } else { - counter.innerText = target - } - } - - updateCounter() -}) \ No newline at end of file diff --git a/incrementing-counter/style.css b/incrementing-counter/style.css deleted file mode 100644 index 082d1fd..0000000 --- a/incrementing-counter/style.css +++ /dev/null @@ -1,36 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #8e44ad; - color: #fff; - font-family: 'Roboto Mono', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.counter-container { - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - margin: 30px 50px; -} - -.counter { - font-size: 60px; - margin-top: 10px; -} - -@media (max-width: 580px) { - body { - flex-direction: column; - } -} diff --git a/insect-catch-game/index.html b/insect-catch-game/index.html deleted file mode 100644 index ebd3581..0000000 --- a/insect-catch-game/index.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - Catch The Insect - - -
-

Catch The Insect

- -
- -
-

What is your "favorite" insect?

- -
- -
-

Time: 00:00

-

Score: 0

-
- Are you annoyed yet?
- You are playing an impossible game!! -
-
- - - - diff --git a/insect-catch-game/script.js b/insect-catch-game/script.js deleted file mode 100644 index f9963e7..0000000 --- a/insect-catch-game/script.js +++ /dev/null @@ -1,78 +0,0 @@ -const screens = document.querySelectorAll('.screen'); -const choose_insect_btns = document.querySelectorAll('.choose-insect-btn'); -const start_btn = document.getElementById('start-btn') -const game_container = document.getElementById('game-container') -const timeEl = document.getElementById('time') -const scoreEl = document.getElementById('score') -const message = document.getElementById('message') -let seconds = 0 -let score = 0 -let selected_insect = {} - -start_btn.addEventListener('click', () => screens[0].classList.add('up')) - -choose_insect_btns.forEach(btn => { - btn.addEventListener('click', () => { - const img = btn.querySelector('img') - const src = img.getAttribute('src') - const alt = img.getAttribute('alt') - selected_insect = { src, alt } - screens[1].classList.add('up') - setTimeout(createInsect, 1000) - startGame() - }) -}) - -function startGame() { - setInterval(increaseTime, 1000) -} - -function increaseTime() { - let m = Math.floor(seconds / 60) - let s = seconds % 60 - m = m < 10 ? `0${m}` : m - s = s < 10 ? `0${s}` : s - timeEl.innerHTML = `Time: ${m}:${s}` - seconds++ -} - -function createInsect() { - const insect = document.createElement('div') - insect.classList.add('insect') - const { x, y } = getRandomLocation() - insect.style.top = `${y}px` - insect.style.left = `${x}px` - insect.innerHTML = `${selected_insect.alt}` - - insect.addEventListener('click', catchInsect) - - game_container.appendChild(insect) -} - -function getRandomLocation() { - const width = window.innerWidth - const height = window.innerHeight - const x = Math.random() * (width - 200) + 100 - const y = Math.random() * (height - 200) + 100 - return { x, y } -} - -function catchInsect() { - increaseScore() - this.classList.add('caught') - setTimeout(() => this.remove(), 2000) - addInsects() -} - -function addInsects() { - setTimeout(createInsect, 1000) - setTimeout(createInsect, 1500) -} - -function increaseScore() { - score++ - if(score > 19) { - message.classList.add('visible') - } - scoreEl.innerHTML = `Score: ${score}` -} \ No newline at end of file diff --git a/insect-catch-game/style.css b/insect-catch-game/style.css deleted file mode 100644 index 9808e9c..0000000 --- a/insect-catch-game/style.css +++ /dev/null @@ -1,150 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #516dff; - color: #fff; - font-family: 'Press Start 2P', sans-serif; - height: 100vh; - overflow: hidden; - margin: 0; - text-align: center; -} - -a { - color: #fff; -} - -h1 { - line-height: 1.4; -} - -.btn { - border: 0; - background-color: #fff; - color: #516dff; - padding: 15px 20px; - font-family: inherit; - cursor: pointer; -} - -.btn:hover { - opacity: 0.9; -} - -.btn:focus { - outline: 0; -} - -.screen { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - width: 100vw; - transition: margin 0.5s ease-out; -} - -.screen.up { - margin-top: -100vh; -} - -.insects-list { - display: flex; - flex-wrap: wrap; - justify-content: center; - list-style-type: none; - padding: 0; -} - -.insects-list li { - margin: 10px; -} - -.choose-insect-btn { - background-color: transparent; - border: 2px solid #fff; - color: #fff; - cursor: pointer; - font-family: inherit; - width: 150px; - height: 150px; -} - -.choose-insect-btn:hover { - background-color: #fff; - color: #516dff; -} - -.choose-insect-btn:active { - background-color: rgba(255, 255, 255, 0.7); -} - -.choose-insect-btn img { - width: 100px; - height: 100px; - object-fit: contain; -} - -.game-container { - position: relative; -} - -.time, -.score { - position: absolute; - top: 20px; -} - -.time { - left: 20px; -} - -.score { - right: 20px; -} - -.message { - line-height: 1.7; - background-color: rgba(0, 0, 0, 0.5); - width: 100%; - padding: 20px; - z-index: 100; - text-align: center; - opacity: 0; - position: absolute; - top: 0; - left: 50%; - transform: translate(-50%, -150%); - transition: transform 0.4s ease-in; -} - -.message.visible { - transform: translate(-50%, 150%); - opacity: 1; -} - -.insect { - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - width: 100px; - height: 100px; - position: absolute; - transform: translate(-50%, -50%) scale(1); - transition: transform 0.3s ease-in-out; -} - -.insect.caught { - transform: translate(-50%, -50%) scale(0); -} - -.insect img { - width: 100px; - height: 100px; -} diff --git a/kinetic-loader/index.html b/kinetic-loader/index.html deleted file mode 100644 index 1ebaee5..0000000 --- a/kinetic-loader/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - Kinetic Loader - - -
- - - - diff --git a/kinetic-loader/style.css b/kinetic-loader/style.css deleted file mode 100644 index f783c59..0000000 --- a/kinetic-loader/style.css +++ /dev/null @@ -1,69 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - background-color: #2c3e50; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.kinetic { - position: relative; - height: 80px; - width: 80px; -} - -.kinetic::after, -.kinetic::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 0; - height: 0; - border: 50px solid transparent; - border-bottom-color: #fff; - animation: rotateA 2s linear infinite 0.5s; -} - -.kinetic::before { - transform: rotate(90deg); - animation: rotateB 2s linear infinite; -} - -@keyframes rotateA { - 0%, - 25% { - transform: rotate(0deg); - } - - 50%, - 75% { - transform: rotate(180deg); - } - - 100% { - transform: rotate(360deg); - } -} - -@keyframes rotateB { - 0%, - 25% { - transform: rotate(90deg); - } - - 50%, - 75% { - transform: rotate(270deg); - } - - 100% { - transform: rotate(450deg); - } -} diff --git a/live-user-filter/index.html b/live-user-filter/index.html deleted file mode 100644 index 3387842..0000000 --- a/live-user-filter/index.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - Live User Filter - - -
-
-

Live User Filter

- Search by name and/or location - -
- - -
- - - diff --git a/live-user-filter/script.js b/live-user-filter/script.js deleted file mode 100644 index a4a6dab..0000000 --- a/live-user-filter/script.js +++ /dev/null @@ -1,42 +0,0 @@ -const result = document.getElementById('result') -const filter = document.getElementById('filter') -const listItems = [] - -getData() - -filter.addEventListener('input', (e) => filterData(e.target.value)) - -async function getData() { - const res = await fetch('https://randomuser.me/api?results=50') - - const { results } = await res.json() - - // Clear result - result.innerHTML = '' - - results.forEach(user => { - const li = document.createElement('li') - - listItems.push(li) - - li.innerHTML = ` - ${user.name.first} -
-

${user.name.first} ${user.name.last}

-

${user.location.city}, ${user.location.country}

-
- ` - - result.appendChild(li) - }) -} - -function filterData(searchTerm) { - listItems.forEach(item => { - if(item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) { - item.classList.remove('hide') - } else { - item.classList.add('hide') - } - }) -} \ No newline at end of file diff --git a/live-user-filter/style.css b/live-user-filter/style.css deleted file mode 100644 index bae1199..0000000 --- a/live-user-filter/style.css +++ /dev/null @@ -1,94 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #f8f9fd; - font-family: 'Roboto', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.container { - border-radius: 5px; - box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); - overflow: hidden; - width: 300px; -} - -.title { - margin: 0; -} - -.subtitle { - display: inline-block; - margin: 5px 0 20px; - opacity: 0.8; -} - -.header { - background-color: #3e57db; - color: #fff; - padding: 30px 20px; -} - -.header input { - background-color: rgba(0, 0, 0, 0.3); - border: 0; - border-radius: 50px; - color: #fff; - font-size: 14px; - padding: 10px 15px; - width: 100%; -} - -.header input:focus { - outline: none; -} - -.user-list { - background-color: #fff; - list-style-type: none; - margin: 0; - padding: 0; - max-height: 400px; - overflow-y: auto; -} - -.user-list li { - display: flex; - padding: 20px; -} - -.user-list img { - border-radius: 50%; - object-fit: cover; - height: 50px; - width: 50px; -} - -.user-list .user-info { - margin-left: 10px; -} - -.user-list .user-info h4 { - margin: 0 0 10px; -} - -.user-list .user-info p { - font-size: 12px; -} - -.user-list li:not(:last-of-type) { - border-bottom: 1px solid #eee; -} - -.user-list li.hide { - display: none; -} diff --git a/mobile-tab-navigation/index.html b/mobile-tab-navigation/index.html deleted file mode 100644 index 0c47430..0000000 --- a/mobile-tab-navigation/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - Mobile Tab Navigation - - -
- home - work - blog - about - -
- - - diff --git a/mobile-tab-navigation/script.js b/mobile-tab-navigation/script.js deleted file mode 100644 index 8ae9fcf..0000000 --- a/mobile-tab-navigation/script.js +++ /dev/null @@ -1,21 +0,0 @@ -const contents = document.querySelectorAll('.content') -const listItems = document.querySelectorAll('nav ul li') - -listItems.forEach((item, idx) => { - item.addEventListener('click', () => { - hideAllContents() - hideAllItems() - - item.classList.add('active') - contents[idx].classList.add('show') - }) -}) - -function hideAllContents() { - contents.forEach(content => content.classList.remove('show')) -} - - -function hideAllItems() { - listItems.forEach(item => item.classList.remove('active')) -} \ No newline at end of file diff --git a/mobile-tab-navigation/style.css b/mobile-tab-navigation/style.css deleted file mode 100644 index 56b48b9..0000000 --- a/mobile-tab-navigation/style.css +++ /dev/null @@ -1,74 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: rgba(155, 89, 182, 0.7); - font-family: 'Open Sans', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - margin: 0; -} - -.phone { - position: relative; - overflow: hidden; - border: 3px solid #eee; - border-radius: 15px; - height: 600px; - width: 340px; -} - -.phone .content { - opacity: 0; - object-fit: cover; - position: absolute; - top: 0; - left: 0; - height: calc(100% - 60px); - width: 100%; - transition: opacity 0.4s ease; -} - -.phone .content.show { - opacity: 1; -} - -nav { - position: absolute; - bottom: 0; - left: 0; - margin-top: -5px; - width: 100%; -} - -nav ul { - background-color: #fff; - display: flex; - list-style-type: none; - padding: 0; - margin: 0; - height: 60px; -} - -nav li { - color: #777; - cursor: pointer; - flex: 1; - padding: 10px; - text-align: center; -} - -nav ul li p { - font-size: 12px; - margin: 2px 0; -} - -nav ul li:hover, -nav ul li.active { - color: #8e44ad; -} diff --git a/movie-app/index.html b/movie-app/index.html deleted file mode 100644 index b607834..0000000 --- a/movie-app/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - Movie App - - -
-
- -
-
- -
- - - - diff --git a/movie-app/script.js b/movie-app/script.js deleted file mode 100644 index 469f141..0000000 --- a/movie-app/script.js +++ /dev/null @@ -1,65 +0,0 @@ -const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1' -const IMG_PATH = 'https://image.tmdb.org/t/p/w1280' -const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="' - -const main = document.getElementById('main') -const form = document.getElementById('form') -const search = document.getElementById('search') - -// Get initial movies -getMovies(API_URL) - -async function getMovies(url) { - const res = await fetch(url) - const data = await res.json() - - showMovies(data.results) -} - -function showMovies(movies) { - main.innerHTML = '' - - movies.forEach((movie) => { - const { title, poster_path, vote_average, overview } = movie - - const movieEl = document.createElement('div') - movieEl.classList.add('movie') - - movieEl.innerHTML = ` - ${title} -
-

${title}

- ${vote_average} -
-
-

Overview

- ${overview} -
- ` - main.appendChild(movieEl) - }) -} - -function getClassByRate(vote) { - if(vote >= 8) { - return 'green' - } else if(vote >= 5) { - return 'orange' - } else { - return 'red' - } -} - -form.addEventListener('submit', (e) => { - e.preventDefault() - - const searchTerm = search.value - - if(searchTerm && searchTerm !== '') { - getMovies(SEARCH_API + searchTerm) - - search.value = '' - } else { - window.location.reload() - } -}) \ No newline at end of file diff --git a/movie-app/style.css b/movie-app/style.css deleted file mode 100644 index 4821341..0000000 --- a/movie-app/style.css +++ /dev/null @@ -1,112 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); - -:root { - --primary-color: #22254b; - --secondary-color: #373b69; -} - -* { - box-sizing: border-box; -} - -body { - background-color: var(--primary-color); - font-family: 'Poppins', sans-serif; - margin: 0; -} - -header { - padding: 1rem; - display: flex; - justify-content: flex-end; - background-color: var(--secondary-color); -} - -.search { - background-color: transparent; - border: 2px solid var(--primary-color); - border-radius: 50px; - font-family: inherit; - font-size: 1rem; - padding: 0.5rem 1rem; - color: #fff; -} - -.search::placeholder { - color: #7378c5; -} - -.search:focus { - outline: none; - background-color: var(--primary-color); -} - -main { - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -.movie { - width: 300px; - margin: 1rem; - background-color: var(--secondary-color); - box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); - position: relative; - overflow: hidden; - border-radius: 3px; -} - -.movie img { - width: 100%; -} - -.movie-info { - color: #eee; - display: flex; - align-items: center; - justify-content: space-between; - gap:0.2rem; - padding: 0.5rem 1rem 1rem; - letter-spacing: 0.5px; -} - -.movie-info h3 { - margin-top: 0; -} - -.movie-info span { - background-color: var(--primary-color); - padding: 0.25rem 0.5rem; - border-radius: 3px; - font-weight: bold; -} - -.movie-info span.green { - color: lightgreen; -} - -.movie-info span.orange { - color: orange; -} - -.movie-info span.red { - color: red; -} - -.overview { - background-color: #fff; - padding: 2rem; - position: absolute; - left: 0; - bottom: 0; - right: 0; - max-height: 100%; - transform: translateY(101%); - overflow-y: auto; - transition: transform 0.3s ease-in; -} - -.movie:hover .overview { - transform: translateY(0); -} diff --git a/netflix-mobile-navigation/index.html b/netflix-mobile-navigation/index.html deleted file mode 100644 index 5a178b3..0000000 --- a/netflix-mobile-navigation/index.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - Netflix Mobile Navigation - - - - - - -

Mobile Navigation

- -
-
-
- - - - - -
-
-
- - - - diff --git a/netflix-mobile-navigation/script.js b/netflix-mobile-navigation/script.js deleted file mode 100644 index 3bc1f9a..0000000 --- a/netflix-mobile-navigation/script.js +++ /dev/null @@ -1,11 +0,0 @@ -const open_btn = document.querySelector('.open-btn') -const close_btn = document.querySelector('.close-btn') -const nav = document.querySelectorAll('.nav') - -open_btn.addEventListener('click', () => { - nav.forEach(nav_el => nav_el.classList.add('visible')) -}) - -close_btn.addEventListener('click', () => { - nav.forEach(nav_el => nav_el.classList.remove('visible')) -}) \ No newline at end of file diff --git a/netflix-mobile-navigation/style.css b/netflix-mobile-navigation/style.css deleted file mode 100644 index c5d723a..0000000 --- a/netflix-mobile-navigation/style.css +++ /dev/null @@ -1,110 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Muli', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; -} - -.text { - text-transform: uppercase; -} - -.logo { - width: 150px; -} - -.nav-btn { - border: none; - background-color: transparent; - cursor: pointer; - font-size: 20px; -} - -.open-btn { - position: fixed; - top: 10px; - left: 10px; -} - -.nav { - position: fixed; - top: 0; - left: 0; - height: 100vh; - transform: translateX(-100%); - transition: transform 0.3s ease-in-out; -} - -.nav.visible { - transform: translateX(0); -} - -.nav-black { - background-color: rgb(34, 31, 31); - width: 60%; - max-width: 480px; - min-width: 320px; - transition-delay: 0.4s; -} - -.nav-black.visible { - transition-delay: 0s; -} - -.nav-red { - background-color: rgb(229, 9, 20); - width: 95%; - transition-delay: 0.2s; -} - -.nav-red.visible { - transition-delay: 0.2s; -} - -.nav-white { - background-color: #fff; - width: 95%; - padding: 40px; - position: relative; - transition-delay: 0s; -} - -.nav-white.visible { - transition-delay: 0.4s; -} - -.close-btn { - opacity: 0.3; - position: absolute; - top: 40px; - right: 30px; -} - -.list { - list-style-type: none; - padding: 0; -} - -.list li { - margin: 20px 0; -} - -.list li a { - color: rgb(34, 31, 31); - font-size: 14px; - text-decoration: none; - text-transform: uppercase; -} - -.list ul { - list-style-type: none; - padding-left: 20px; -} diff --git a/notes-app/index.html b/notes-app/index.html deleted file mode 100644 index c2054c0..0000000 --- a/notes-app/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - Notes App - - - - - - - - diff --git a/notes-app/script.js b/notes-app/script.js deleted file mode 100644 index 399ab0f..0000000 --- a/notes-app/script.js +++ /dev/null @@ -1,63 +0,0 @@ -const addBtn = document.getElementById('add') - -const notes = JSON.parse(localStorage.getItem('notes')) - -if(notes) { - notes.forEach(note => addNewNote(note)) -} - -addBtn.addEventListener('click', () => addNewNote()) - -function addNewNote(text = '') { - const note = document.createElement('div') - note.classList.add('note') - - note.innerHTML = ` -
- - -
- -
- - ` - - const editBtn = note.querySelector('.edit') - const deleteBtn = note.querySelector('.delete') - const main = note.querySelector('.main') - const textArea = note.querySelector('textarea') - - textArea.value = text - main.innerHTML = marked(text) - - deleteBtn.addEventListener('click', () => { - note.remove() - - updateLS() - }) - - editBtn.addEventListener('click', () => { - main.classList.toggle('hidden') - textArea.classList.toggle('hidden') - }) - - textArea.addEventListener('input', (e) => { - const { value } = e.target - - main.innerHTML = marked(value) - - updateLS() - }) - - document.body.appendChild(note) -} - -function updateLS() { - const notesText = document.querySelectorAll('textarea') - - const notes = [] - - notesText.forEach(note => notes.push(note.value)) - - localStorage.setItem('notes', JSON.stringify(notes)) -} \ No newline at end of file diff --git a/notes-app/style.css b/notes-app/style.css deleted file mode 100644 index 8188439..0000000 --- a/notes-app/style.css +++ /dev/null @@ -1,74 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); - -* { - box-sizing: border-box; - outline: none; -} - -body { - background-color: #7bdaf3; - font-family: 'Poppins', sans-serif; - display: flex; - flex-wrap: wrap; - margin: 0; - padding-top: 3rem; -} - -.add { - position: fixed; - top: 1rem; - right: 1rem; - background-color: #9ec862; - color: #fff; - border: none; - border-radius: 3px; - padding: 0.5rem 1rem; - cursor: pointer; -} - -.add:active { - transform: scale(0.98); -} - -.note { - background-color: #fff; - box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1); - margin: 30px 20px; - height: 400px; - width: 400px; - overflow-y: scroll; -} - -.note .tools { - background-color: #9ec862; - display: flex; - justify-content: flex-end; - padding: 0.5rem; -} - -.note .tools button { - background-color: transparent; - border: none; - color: #fff; - cursor: pointer; - font-size: 1rem; - margin-left: 0.5rem; -} - -.note textarea { - outline: none; - font-family: inherit; - font-size: 1.2rem; - border: none; - height: 400px; - width: 100%; - padding: 20px; -} - -.main { - padding: 20px; -} - -.hidden { - display: none; -} diff --git a/password-generator/index.html b/password-generator/index.html deleted file mode 100644 index d28270e..0000000 --- a/password-generator/index.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - Password Generator - - -
-

Password Generator

-
- - -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- - - diff --git a/password-generator/script.js b/password-generator/script.js deleted file mode 100644 index ee4fe2b..0000000 --- a/password-generator/script.js +++ /dev/null @@ -1,77 +0,0 @@ -const resultEl = document.getElementById('result') -const lengthEl = document.getElementById('length') -const uppercaseEl = document.getElementById('uppercase') -const lowercaseEl = document.getElementById('lowercase') -const numbersEl = document.getElementById('numbers') -const symbolsEl = document.getElementById('symbols') -const generateEl = document.getElementById('generate') -const clipboardEl = document.getElementById('clipboard') - -const randomFunc = { - lower: getRandomLower, - upper: getRandomUpper, - number: getRandomNumber, - symbol: getRandomSymbol -} - -clipboardEl.addEventListener('click', () => { - const textarea = document.createElement('textarea') - const password = resultEl.innerText - - if(!password) { return } - - textarea.value = password - document.body.appendChild(textarea) - textarea.select() - document.execCommand('copy') - textarea.remove() - alert('Password copied to clipboard!') -}) - -generateEl.addEventListener('click', () => { - const length = +lengthEl.value - const hasLower = lowercaseEl.checked - const hasUpper = uppercaseEl.checked - const hasNumber = numbersEl.checked - const hasSymbol = symbolsEl.checked - - resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length) -}) - -function generatePassword(lower, upper, number, symbol, length) { - let generatedPassword = '' - const typesCount = lower + upper + number + symbol - const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0]) - - if(typesCount === 0) { - return '' - } - - for(let i = 0; i < length; i += typesCount) { - typesArr.forEach(type => { - const funcName = Object.keys(type)[0] - generatedPassword += randomFunc[funcName]() - }) - } - - const finalPassword = generatedPassword.slice(0, length) - - return finalPassword -} - -function getRandomLower() { - return String.fromCharCode(Math.floor(Math.random() * 26) + 97) -} - -function getRandomUpper() { - return String.fromCharCode(Math.floor(Math.random() * 26) + 65) -} - -function getRandomNumber() { - return String.fromCharCode(Math.floor(Math.random() * 10) + 48) -} - -function getRandomSymbol() { - const symbols = '!@#$%^&*(){}[]=<>/,.' - return symbols[Math.floor(Math.random() * symbols.length)] -} \ No newline at end of file diff --git a/password-generator/style.css b/password-generator/style.css deleted file mode 100644 index 1e017e0..0000000 --- a/password-generator/style.css +++ /dev/null @@ -1,86 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #3b3b98; - color: #fff; - font-family: 'Muli', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - padding: 10px; - margin: 0; -} - -h2 { - margin: 10px 0 20px; - text-align: center; -} - -.container { - background-color: #23235b; - box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2); - padding: 20px; - width: 350px; - max-width: 100%; -} - -.result-container { - background-color: rgba(0, 0, 0, 0.4); - display: flex; - justify-content: flex-start; - align-items: center; - position: relative; - font-size: 18px; - letter-spacing: 1px; - padding: 12px 10px; - height: 50px; - width: 100%; -} - -.result-container #result { - word-wrap: break-word; - max-width: calc(100% - 40px); - overflow-y: scroll; - height: 100%; -} - -#result::-webkit-scrollbar { - width: 1rem; -} - -.result-container .btn { - position: absolute; - top: 5px; - right: 5px; - width: 40px; - height: 40px; - font-size: 20px; -} - -.btn { - border: none; - background-color: #3b3b98; - color: #fff; - font-size: 16px; - padding: 8px 12px; - cursor: pointer; -} - -.btn-large { - display: block; - width: 100%; -} - -.setting { - display: flex; - justify-content: space-between; - align-items: center; - margin: 15px 0; -} diff --git a/password-strength-background/index.html b/password-strength-background/index.html deleted file mode 100644 index fd14e7f..0000000 --- a/password-strength-background/index.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - Password Strength Backround - - -
-
-

Image Password Strength

-

Change the password to see the effect

-
- - -
- -
- - -
- - -
- - - diff --git a/password-strength-background/script.js b/password-strength-background/script.js deleted file mode 100644 index 82737e0..0000000 --- a/password-strength-background/script.js +++ /dev/null @@ -1,9 +0,0 @@ -const password = document.getElementById('password') -const background = document.getElementById('background') - -password.addEventListener('input', (e) => { - const input = e.target.value - const length = input.length - const blurValue = 20 - length * 2 - background.style.filter = `blur(${blurValue}px)` -}) diff --git a/password-strength-background/style.css b/password-strength-background/style.css deleted file mode 100644 index e8d7ade..0000000 --- a/password-strength-background/style.css +++ /dev/null @@ -1,25 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.background { - background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b') - no-repeat center center/cover; - position: absolute; - top: -20px; - bottom: -20px; - left: -20px; - right: -20px; - z-index: -1; - filter: blur(20px); -} diff --git a/pokedex/index.html b/pokedex/index.html deleted file mode 100644 index 4fb798c..0000000 --- a/pokedex/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - Pokedex - - -

Pokedex

-
- - - - - diff --git a/pokedex/script.js b/pokedex/script.js deleted file mode 100644 index 6b824d9..0000000 --- a/pokedex/script.js +++ /dev/null @@ -1,64 +0,0 @@ -const poke_container = document.getElementById('poke-container') -const pokemon_count = 150 -const colors = { - fire: '#FDDFDF', - grass: '#DEFDE0', - electric: '#FCF7DE', - water: '#DEF3FD', - ground: '#f4e7da', - rock: '#d5d5d4', - fairy: '#fceaff', - poison: '#98d7a5', - bug: '#f8d5a3', - dragon: '#97b3e6', - psychic: '#eaeda1', - flying: '#F5F5F5', - fighting: '#E6E0D4', - normal: '#F5F5F5' -} - -const main_types = Object.keys(colors) - -const fetchPokemons = async () => { - for(let i = 1; i <= pokemon_count; i++) { - await getPokemon(i) - } -} - -const getPokemon = async (id) => { - const url = `https://pokeapi.co/api/v2/pokemon/${id}` - const res = await fetch(url) - const data = await res.json() - createPokemonCard(data) -} - -const createPokemonCard = (pokemon) => { - const pokemonEl = document.createElement('div') - pokemonEl.classList.add('pokemon') - - const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1) - const id = pokemon.id.toString().padStart(3, '0') - - const poke_types = pokemon.types.map(type => type.type.name) - const type = main_types.find(type => poke_types.indexOf(type) > -1) - const color = colors[type] - - pokemonEl.style.backgroundColor = color - - const pokemonInnerHTML = ` -
- ${name} -
-
- #${id} -

${name}

- Type: ${type} -
- ` - - pokemonEl.innerHTML = pokemonInnerHTML - - poke_container.appendChild(pokemonEl) -} - -fetchPokemons() diff --git a/pokedex/style.css b/pokedex/style.css deleted file mode 100644 index fc5ca34..0000000 --- a/pokedex/style.css +++ /dev/null @@ -1,67 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background: #efefbb; - background: linear-gradient(to right, #d4d3dd, #efefbb); - font-family: 'Lato', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0; -} - -h1 { - letter-spacing: 3px; -} - -.poke-container { - display: flex; - flex-wrap: wrap; - align-items: space-between; - justify-content: center; - margin: 0 auto; - max-width: 1200px; -} - -.pokemon { - background-color: #eee; - border-radius: 10px; - box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5); - margin: 10px; - padding: 20px; - text-align: center; -} - -.pokemon .img-container { - background-color: rgba(255, 255, 255, 0.6); - border-radius: 50%; - width: 120px; - height: 120px; - text-align: center; -} - -.pokemon .img-container img { - max-width: 90%; - margin-top: 20px; -} - -.pokemon .info { - margin-top: 20px; -} - -.pokemon .info .number { - background-color: rgba(0, 0, 0, 0.1); - padding: 5px 10px; - border-radius: 10px; - font-size: 0.8em; -} - -.pokemon .info .name { - margin: 15px 0 7px; - letter-spacing: 1px; -} diff --git a/progress-steps/index.html b/progress-steps/index.html deleted file mode 100644 index 8672c0c..0000000 --- a/progress-steps/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - Progress Steps - - -
-
-
-
1
-
2
-
3
-
4
-
- - - -
- - - diff --git a/progress-steps/script.js b/progress-steps/script.js deleted file mode 100644 index 58067d4..0000000 --- a/progress-steps/script.js +++ /dev/null @@ -1,49 +0,0 @@ -const progress = document.getElementById('progress') -const prev = document.getElementById('prev') -const next = document.getElementById('next') -const circles = document.querySelectorAll('.circle') - -let currentActive = 1 - -next.addEventListener('click', () => { - currentActive++ - - if(currentActive > circles.length) { - currentActive = circles.length - } - - update() -}) - -prev.addEventListener('click', () => { - currentActive-- - - if(currentActive < 1) { - currentActive = 1 - } - - update() -}) - -function update() { - circles.forEach((circle, idx) => { - if(idx < 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 - } -} \ No newline at end of file diff --git a/progress-steps/style.css b/progress-steps/style.css deleted file mode 100644 index d8462f6..0000000 --- a/progress-steps/style.css +++ /dev/null @@ -1,100 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -:root { - --line-border-fill: #3498db; - --line-border-empty: #e0e0e0; -} - -* { - box-sizing: border-box; -} - -body { - background-color: #f6f7fb; - font-family: 'Muli', sans-serif; - 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: ''; - 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/quiz-app/index.html b/quiz-app/index.html deleted file mode 100644 index 688716a..0000000 --- a/quiz-app/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - Quiz App - - -
-
-

Question text

- -
- -
- - - diff --git a/quiz-app/script.js b/quiz-app/script.js deleted file mode 100644 index 543ee19..0000000 --- a/quiz-app/script.js +++ /dev/null @@ -1,98 +0,0 @@ -const quizData = [ - { - question: "Which language runs in a web browser?", - a: "Java", - b: "C", - c: "Python", - d: "JavaScript", - correct: "d", - }, - { - question: "What does CSS stand for?", - a: "Central Style Sheets", - b: "Cascading Style Sheets", - c: "Cascading Simple Sheets", - d: "Cars SUVs Sailboats", - correct: "b", - }, - { - question: "What does HTML stand for?", - a: "Hypertext Markup Language", - b: "Hypertext Markdown Language", - c: "Hyperloop Machine Language", - d: "Helicopters Terminals Motorboats Lamborginis", - correct: "a", - }, - { - question: "What year was JavaScript launched?", - a: "1996", - b: "1995", - c: "1994", - d: "none of the above", - correct: "b", - }, -]; - -const quiz = document.getElementById('quiz') -const answerEls = document.querySelectorAll('.answer') -const questionEl = document.getElementById('question') -const a_text = document.getElementById('a_text') -const b_text = document.getElementById('b_text') -const c_text = document.getElementById('c_text') -const d_text = document.getElementById('d_text') -const submitBtn = document.getElementById('submit') - -let currentQuiz = 0 -let score = 0 - -loadQuiz() - -function loadQuiz() { - deselectAnswers() - - const currentQuizData = quizData[currentQuiz] - - questionEl.innerText = currentQuizData.question - a_text.innerText = currentQuizData.a - b_text.innerText = currentQuizData.b - c_text.innerText = currentQuizData.c - d_text.innerText = currentQuizData.d -} - -function deselectAnswers() { - answerEls.forEach(answerEl => answerEl.checked = false) -} - -function getSelected() { - let answer - - answerEls.forEach(answerEl => { - if(answerEl.checked) { - answer = answerEl.id - } - }) - - return answer -} - -submitBtn.addEventListener('click', () => { - const answer = getSelected() - - if(answer) { - if(answer === quizData[currentQuiz].correct) { - score++ - } - - currentQuiz++ - - if(currentQuiz < quizData.length) { - loadQuiz() - } else { - quiz.innerHTML = ` -

You answered ${score}/${quizData.length} questions correctly

- - - ` - } - } -}) \ No newline at end of file diff --git a/quiz-app/style.css b/quiz-app/style.css deleted file mode 100644 index 2db24b0..0000000 --- a/quiz-app/style.css +++ /dev/null @@ -1,70 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #b8c6db; - background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%); - font-family: 'Poppins', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.quiz-container { - background-color: #fff; - border-radius: 10px; - box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1); - width: 600px; - overflow: hidden; -} - -.quiz-header { - padding: 4rem; -} - -h2 { - padding: 1rem; - text-align: center; - margin: 0; -} - -ul { - list-style-type: none; - padding: 0; -} - -ul li { - font-size: 1.2rem; - margin: 1rem 0; -} - -ul li label { - cursor: pointer; -} - -button { - background-color: #8e44ad; - color: #fff; - border: none; - display: block; - width: 100%; - cursor: pointer; - font-size: 1.1rem; - font-family: inherit; - padding: 1.3rem; -} - -button:hover { - background-color: #732d91; -} - -button:focus { - outline: none; - background-color: #5e3370; -} diff --git a/random-choice-picker/index.html b/random-choice-picker/index.html deleted file mode 100644 index 830f22a..0000000 --- a/random-choice-picker/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - Random Choice Picker - - -
-

Enter all of the choices divided by a comma (',').
Press enter when you're done

- - -
-
- - - - diff --git a/random-choice-picker/script.js b/random-choice-picker/script.js deleted file mode 100644 index 3fddcc6..0000000 --- a/random-choice-picker/script.js +++ /dev/null @@ -1,69 +0,0 @@ -const tagsEl = document.getElementById('tags') -const textarea = document.getElementById('textarea') - -textarea.focus() - -textarea.addEventListener('keyup', (e) => { - createTags(e.target.value) - - if(e.key === 'Enter') { - setTimeout(() => { - e.target.value = '' - }, 10) - - randomSelect() - } -}) - -function createTags(input) { - const tags = input.split(',').filter(tag => tag.trim() !== '').map(tag => tag.trim()) - - tagsEl.innerHTML = '' - - tags.forEach(tag => { - const tagEl = document.createElement('span') - tagEl.classList.add('tag') - tagEl.innerText = tag - tagsEl.appendChild(tagEl) - }) -} - -function randomSelect() { - const times = 30 - - const interval = setInterval(() => { - const randomTag = pickRandomTag() - - if (randomTag !== undefined) { - highlightTag(randomTag) - - setTimeout(() => { - unHighlightTag(randomTag) - }, 100) - } - }, 100); - - setTimeout(() => { - clearInterval(interval) - - setTimeout(() => { - const randomTag = pickRandomTag() - - highlightTag(randomTag) - }, 100) - - }, times * 100) -} - -function pickRandomTag() { - const tags = document.querySelectorAll('.tag') - return tags[Math.floor(Math.random() * tags.length)] -} - -function highlightTag(tag) { - tag.classList.add('highlight') -} - -function unHighlightTag(tag) { - tag.classList.remove('highlight') -} diff --git a/random-choice-picker/style.css b/random-choice-picker/style.css deleted file mode 100644 index c4fab60..0000000 --- a/random-choice-picker/style.css +++ /dev/null @@ -1,56 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #2b88f0; - font-family: 'Muli', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -h3 { - color: #fff; - margin: 10px 0 20px; - text-align: center; -} - -.container { - width: 500px; -} - -textarea { - border: none; - display: block; - width: 100%; - height: 100px; - font-family: inherit; - padding: 10px; - margin: 0 0 20px; - font-size: 16px; -} - -textarea:focus { - outline: none; -} - -.tag { - background-color: #f0932b; - color: #fff; - border-radius: 50px; - padding: 10px 20px; - margin: 0 5px 10px 0; - font-size: 14px; - display: inline-block; -} - -.tag.highlight { - background-color: #273c75; -} diff --git a/random-image-generator/index.html b/random-image-generator/index.html deleted file mode 100644 index 9e826f7..0000000 --- a/random-image-generator/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - Random Image Feed - - -

Random Image Feed

-
- - - - diff --git a/random-image-generator/script.js b/random-image-generator/script.js deleted file mode 100644 index 0f9b658..0000000 --- a/random-image-generator/script.js +++ /dev/null @@ -1,17 +0,0 @@ -const container = document.querySelector('.container') -const unsplashURL = 'https://source.unsplash.com/random/' -const rows = 5 - -for(let i = 0; i < rows * 3; i++) { - const img = document.createElement('img') - img.src = `${unsplashURL}${getRandomSize()}` - container.appendChild(img) -} - -function getRandomSize() { - return `${getRandomNr()}x${getRandomNr()}` -} - -function getRandomNr() { - return Math.floor(Math.random() * 10) + 300 -} \ No newline at end of file diff --git a/random-image-generator/style.css b/random-image-generator/style.css deleted file mode 100644 index dddbe9d..0000000 --- a/random-image-generator/style.css +++ /dev/null @@ -1,36 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Roboto', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 100vh; - margin: 0; -} - -.title { - margin: 10px 0 0; - text-align: center; -} - -.container { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 1000px; -} - -.container img { - object-fit: cover; - margin: 10px; - height: 300px; - width: 300px; - max-width: 100%; -} diff --git a/rotating-nav-animation/index.html b/rotating-nav-animation/index.html deleted file mode 100644 index 98d8215..0000000 --- a/rotating-nav-animation/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - Rotating Navigation - - -
-
-
- - -
-
- -
-

Amazing Article

- Florin Pop -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.

- -

My Dog

- doggy -

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?

-
-
- - - - - diff --git a/rotating-nav-animation/script.js b/rotating-nav-animation/script.js deleted file mode 100644 index 1521dcd..0000000 --- a/rotating-nav-animation/script.js +++ /dev/null @@ -1,7 +0,0 @@ -const open = document.getElementById('open') -const close = document.getElementById('close') -const container = document.querySelector('.container') - -open.addEventListener('click', () => container.classList.add('show-nav')) - -close.addEventListener('click', () => container.classList.remove('show-nav')) \ No newline at end of file diff --git a/rotating-nav-animation/style.css b/rotating-nav-animation/style.css deleted file mode 100644 index c249065..0000000 --- a/rotating-nav-animation/style.css +++ /dev/null @@ -1,145 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Lato', sans-serif; - background-color: #333; - color: #222; - overflow-x: hidden; - margin: 0; -} - -.container { - background-color: #fafafa; - transform-origin: top left; - transition: transform 0.5s linear; - width: 100vw; - min-height: 100vh; - padding: 50px; -} - -.container.show-nav { - transform: rotate(-20deg); -} - -.circle-container { - position: fixed; - top: -100px; - left: -100px; -} - -.circle { - background-color: #ff7979; - height: 200px; - width: 200px; - border-radius: 50%; - position: relative; - transition: transform 0.5s linear; -} - -.container.show-nav .circle { - transform: rotate(-70deg); -} - -.circle button { - cursor: pointer; - position: absolute; - top: 50%; - left: 50%; - height: 100px; - background: transparent; - border: 0; - font-size: 26px; - color: #fff; -} - -.circle button:focus { - outline: none; -} - -.circle button#open { - left: 60%; -} - -.circle button#close { - top: 60%; - transform: rotate(90deg); - transform-origin: top left; -} - -.container.show-nav + nav li { - transform: translateX(0); - transition-delay: 0.3s; -} - -nav { - position: fixed; - bottom: 40px; - left: 0; - z-index: 100; -} - -nav ul { - list-style-type: none; - padding-left: 30px; -} - -nav ul li { - text-transform: uppercase; - color: #fff; - margin: 40px 0; - transform: translateX(-100%); - transition: transform 0.4s ease-in; -} - -nav ul li i { - font-size: 20px; - margin-right: 10px; -} - -nav ul li + li { - margin-left: 15px; - transform: translateX(-150%); -} - -nav ul li + li + li { - margin-left: 30px; - transform: translateX(-200%); -} - -nav a{ - color: #fafafa; - text-decoration: none; - transition: all 0.5s; -} - -nav a:hover { - color: #FF7979; - font-weight: bold; -} - -.content img { - max-width: 100%; -} - -.content { - max-width: 1000px; - margin: 50px auto; -} - -.content h1 { - margin: 0; -} - -.content small { - color: #555; - font-style: italic; -} - -.content p { - color: #333; - line-height: 1.5; -} diff --git a/scroll-animation/index.html b/scroll-animation/index.html deleted file mode 100644 index 7f2e1d0..0000000 --- a/scroll-animation/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - Scroll Animation - - -

Scroll to see the animation

-

Content

-

Content

-

Content

-

Content

-

Content

-

Content

-

Content

-

Content

-

Content

-

Content

-

Content

-

Content

-

Content

- - - diff --git a/scroll-animation/script.js b/scroll-animation/script.js deleted file mode 100644 index f021563..0000000 --- a/scroll-animation/script.js +++ /dev/null @@ -1,19 +0,0 @@ -const boxes = document.querySelectorAll('.box') - -window.addEventListener('scroll', checkBoxes) - -checkBoxes() - -function checkBoxes() { - const triggerBottom = window.innerHeight / 5 * 4 - - boxes.forEach(box => { - const boxTop = box.getBoundingClientRect().top - - if(boxTop < triggerBottom) { - box.classList.add('show') - } else { - box.classList.remove('show') - } - }) -} \ No newline at end of file diff --git a/scroll-animation/style.css b/scroll-animation/style.css deleted file mode 100644 index a0e7490..0000000 --- a/scroll-animation/style.css +++ /dev/null @@ -1,47 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #efedd6; - font-family: 'Roboto', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0; - overflow-x: hidden; -} - -h1 { - margin: 10px; -} - -.box { - background-color: steelblue; - color: #fff; - display: flex; - align-items: center; - justify-content: center; - width: 400px; - height: 200px; - margin: 10px; - border-radius: 10px; - box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); - transform: translateX(400%); - transition: transform 0.4s ease; -} - -.box:nth-of-type(even) { - transform: translateX(-400%); -} - -.box.show { - transform: translateX(0); -} - -.box h2 { - font-size: 45px; -} diff --git a/sound-board/index.html b/sound-board/index.html deleted file mode 100644 index e3d4e94..0000000 --- a/sound-board/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - Sound Board - - - - - - - - - -
- - - - diff --git a/sound-board/script.js b/sound-board/script.js deleted file mode 100644 index b1c3393..0000000 --- a/sound-board/script.js +++ /dev/null @@ -1,25 +0,0 @@ -const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong'] - -sounds.forEach(sound => { - const btn = document.createElement('button') - btn.classList.add('btn') - - btn.innerText = sound - - btn.addEventListener('click', () => { - stopSongs() - - document.getElementById(sound).play() - }) - - document.getElementById('buttons').appendChild(btn) -}) - -function stopSongs() { - sounds.forEach(sound => { - const song = document.getElementById(sound) - - song.pause() - song.currentTime = 0; - }) -} \ No newline at end of file diff --git a/sound-board/sounds/applause.mp3 b/sound-board/sounds/applause.mp3 deleted file mode 100644 index 8be6dc1..0000000 Binary files a/sound-board/sounds/applause.mp3 and /dev/null differ diff --git a/sound-board/sounds/boo.mp3 b/sound-board/sounds/boo.mp3 deleted file mode 100644 index 8c27241..0000000 Binary files a/sound-board/sounds/boo.mp3 and /dev/null differ diff --git a/sound-board/sounds/gasp.mp3 b/sound-board/sounds/gasp.mp3 deleted file mode 100644 index 1f4c6f0..0000000 Binary files a/sound-board/sounds/gasp.mp3 and /dev/null differ diff --git a/sound-board/sounds/tada.mp3 b/sound-board/sounds/tada.mp3 deleted file mode 100644 index a284f94..0000000 Binary files a/sound-board/sounds/tada.mp3 and /dev/null differ diff --git a/sound-board/sounds/victory.mp3 b/sound-board/sounds/victory.mp3 deleted file mode 100644 index f565a5e..0000000 Binary files a/sound-board/sounds/victory.mp3 and /dev/null differ diff --git a/sound-board/sounds/wrong.mp3 b/sound-board/sounds/wrong.mp3 deleted file mode 100644 index 2b4939a..0000000 Binary files a/sound-board/sounds/wrong.mp3 and /dev/null differ diff --git a/sound-board/style.css b/sound-board/style.css deleted file mode 100644 index 91ee7d1..0000000 --- a/sound-board/style.css +++ /dev/null @@ -1,38 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: rgb(161, 100, 223); - font-family: 'Poppins', sans-serif; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - text-align: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.btn { - background-color: rebeccapurple; - border-radius: 5px; - border: none; - color: #fff; - margin: 1rem; - padding: 1.5rem 3rem; - font-size: 1.2rem; - font-family: inherit; - cursor: pointer; -} - -.btn:hover { - opacity: 0.9; -} - -.btn:focus { - outline: none; -} diff --git a/split-landing-page/index.html b/split-landing-page/index.html deleted file mode 100644 index 0623077..0000000 --- a/split-landing-page/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - Split Landing Page - - - -
-
-

Playstation 5

- Buy Now -
-
-

XBox Series X

- Buy Now -
-
- - - - diff --git a/split-landing-page/ps.jpg b/split-landing-page/ps.jpg deleted file mode 100644 index b4c5095..0000000 Binary files a/split-landing-page/ps.jpg and /dev/null differ diff --git a/split-landing-page/script.js b/split-landing-page/script.js deleted file mode 100644 index 07bf3ac..0000000 --- a/split-landing-page/script.js +++ /dev/null @@ -1,9 +0,0 @@ -const left = document.querySelector('.left') -const right = document.querySelector('.right') -const container = document.querySelector('.container') - -left.addEventListener('mouseenter', () => container.classList.add('hover-left')) -left.addEventListener('mouseleave', () => container.classList.remove('hover-left')) - -right.addEventListener('mouseenter', () => container.classList.add('hover-right')) -right.addEventListener('mouseleave', () => container.classList.remove('hover-right')) \ No newline at end of file diff --git a/split-landing-page/style.css b/split-landing-page/style.css deleted file mode 100644 index 0888b68..0000000 --- a/split-landing-page/style.css +++ /dev/null @@ -1,139 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -:root { - --left-bg-color: rgba(87, 84, 236, 0.7); - --right-bg-color: rgba(43, 43, 43, 0.8); - --left-btn-hover-color: rgba(87, 84, 236, 1); - --right-btn-hover-color: rgba(28, 122, 28, 1); - --hover-width: 75%; - --other-width: 25%; - --speed: 1000ms; -} - -* { - box-sizing: border-box; -} - -body { - font-family: 'Roboto', sans-serif; - height: 100vh; - overflow: hidden; - margin: 0; -} - -h1 { - font-size: 4rem; - color: #fff; - position: absolute; - left: 50%; - top: 20%; - transform: translateX(-50%); - white-space: nowrap; -} - -.btn { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - left: 50%; - top: 40%; - transform: translateX(-50%); - text-decoration: none; - color: #fff; - border: #fff solid 0.2rem; - font-size: 1rem; - font-weight: bold; - text-transform: uppercase; - width: 15rem; - padding: 1.5rem; -} - -.split.left .btn:hover { - background-color: var(--left-btn-hover-color); - border-color: var(--left-btn-hover-color); -} - -.split.right .btn:hover { - background-color: var(--right-btn-hover-color); - border-color: var(--right-btn-hover-color); -} - -.container { - position: relative; - width: 100%; - height: 100%; - background: #333; -} - -.split { - position: absolute; - width: 50%; - height: 100%; - overflow: hidden; -} - -.split.left { - left: 0; - background: url('ps.jpg'); - background-repeat: no-repeat; - background-size: cover; -} - -.split.left::before { - content: ''; - position: absolute; - width: 100%; - height: 100%; - background-color: var(--left-bg-color); -} - -.split.right { - right: 0; - background: url('xbox.jpg'); - background-repeat: no-repeat; - background-size: cover; -} - -.split.right::before { - content: ''; - position: absolute; - width: 100%; - height: 100%; - background-color: var(--right-bg-color); -} - -.split.right, -.split.left, -.split.right::before, -.split.left::before { - transition: all var(--speed) ease-in-out; -} - -.hover-left .left { - width: var(--hover-width); -} - -.hover-left .right { - width: var(--other-width); -} - -.hover-right .right { - width: var(--hover-width); -} - -.hover-right .left { - width: var(--other-width); -} - -@media (max-width: 800px) { - h1 { - font-size: 2rem; - top: 30%; - } - - .btn { - padding: 1.2rem; - width: 12rem; - } -} diff --git a/split-landing-page/xbox.jpg b/split-landing-page/xbox.jpg deleted file mode 100644 index fe806ac..0000000 Binary files a/split-landing-page/xbox.jpg and /dev/null differ diff --git a/sticky-navigation/index.html b/sticky-navigation/index.html deleted file mode 100644 index d793d0d..0000000 --- a/sticky-navigation/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - Sticky Navigation - - - - -
-
-

Welcome To My Website

-

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?

-
-
- -
-

Content One

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a dolorum voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum labore, placeat officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerum sequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!

- -

Content Two

-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum possimus inventore nisi laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit provident, voluptates illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est! Tenetur tempora doloremque quae iste aperiam hic cumque repellat?

-
- - - - diff --git a/sticky-navigation/script.js b/sticky-navigation/script.js deleted file mode 100644 index f7d2bd9..0000000 --- a/sticky-navigation/script.js +++ /dev/null @@ -1,10 +0,0 @@ -const nav = document.querySelector('.nav') -window.addEventListener('scroll', fixNav) - -function fixNav() { - if(window.scrollY > nav.offsetHeight + 150) { - nav.classList.add('active') - } else { - nav.classList.remove('active') - } -} \ No newline at end of file diff --git a/sticky-navigation/style.css b/sticky-navigation/style.css deleted file mode 100644 index 3fffd64..0000000 --- a/sticky-navigation/style.css +++ /dev/null @@ -1,117 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Open+Sans'); - -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -body { - font-family: 'Open Sans', sans-serif; - color: #222; - padding-bottom: 50px; -} - -.container { - max-width: 1200px; - margin: 0 auto; -} - -.nav { - position: fixed; - background-color: #222; - top: 0; - left: 0; - right: 0; - transition: all 0.3s ease-in-out; -} - -.nav .container { - display: flex; - justify-content: space-between; - align-items: center; - padding: 20px 0; - transition: all 0.3s ease-in-out; -} - -.nav ul { - display: flex; - list-style-type: none; - align-items: center; - justify-content: center; -} - -.nav a { - color: #fff; - text-decoration: none; - padding: 7px 15px; - transition: all 0.3s ease-in-out; -} - -.nav.active { - background-color: #fff; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -} - -.nav.active a { - color: #000; -} - -.nav.active .container { - padding: 10px 0; -} - -.nav a.current, -.nav a:hover { - color: #c0392b; - font-weight: bold; -} - -.hero { - background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'); - background-repeat: no-repeat; - background-size: cover; - background-position: bottom center; - height: 100vh; - color: #fff; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - position: relative; - margin-bottom: 20px; - z-index: -2; -} - -.hero::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: -1; -} - -.hero h1 { - font-size: 46px; - margin: -20px 0 20px; -} - -.hero p { - font-size: 20px; - letter-spacing: 1px; -} - -.content h2, -.content h3 { - font-size: 150%; - margin: 20px 0; -} - -.content p { - color: #555; - line-height: 30px; - letter-spacing: 1.2px; -} diff --git a/testimonial-box-switcher/index.html b/testimonial-box-switcher/index.html deleted file mode 100644 index 7fa9386..0000000 --- a/testimonial-box-switcher/index.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - Testimonial Box - - -
-
-
-
-

- I've worked with literally hundreds of HTML/CSS developers and I have to - say the top spot goes to this guy. This guy is an amazing developer. He - stresses on good, clean code and pays heed to the details. I love - developers who respect each and every aspect of a throughly thought out - design and do their best to put it in code. He goes over and beyond and - transforms ART into PIXELS - without a glitch, every time. -

-
- user -
-

Miyah Myles

-

Marketing

-
-
-
- - - diff --git a/testimonial-box-switcher/script.js b/testimonial-box-switcher/script.js deleted file mode 100644 index 23fc31d..0000000 --- a/testimonial-box-switcher/script.js +++ /dev/null @@ -1,78 +0,0 @@ -const testimonialsContainer = document.querySelector('.testimonials-container') -const testimonial = document.querySelector('.testimonial') -const userImage = document.querySelector('.user-image') -const username = document.querySelector('.username') -const role = document.querySelector('.role') - -const testimonials = [ - { - name: 'Miyah Myles', - position: 'Marketing', - photo: - 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6', - text: - "I've worked with literally hundreds of HTML/CSS developers and I have to say the top spot goes to this guy. This guy is an amazing developer. He stresses on good, clean code and pays heed to the details. I love developers who respect each and every aspect of a throughly thought out design and do their best to put it in code. He goes over and beyond and transforms ART into PIXELS - without a glitch, every time.", - }, - { - name: 'June Cha', - position: 'Software Engineer', - photo: 'https://randomuser.me/api/portraits/women/44.jpg', - text: - 'This guy is an amazing frontend developer that delivered the task exactly how we need it, do your self a favor and hire him, you will not be disappointed by the work delivered. He will go the extra mile to make sure that you are happy with your project. I will surely work again with him!', - }, - { - name: 'Iida Niskanen', - position: 'Data Entry', - photo: 'https://randomuser.me/api/portraits/women/68.jpg', - text: - "This guy is a hard worker. Communication was also very good with him and he was very responsive all the time, something not easy to find in many freelancers. We'll definitely repeat with him.", - }, - { - name: 'Renee Sims', - position: 'Receptionist', - photo: 'https://randomuser.me/api/portraits/women/65.jpg', - text: - "This guy does everything he can to get the job done and done right. This is the second time I've hired him, and I'll hire him again in the future.", - }, - { - name: 'Jonathan Nunfiez', - position: 'Graphic Designer', - photo: 'https://randomuser.me/api/portraits/men/43.jpg', - text: - "I had my concerns that due to a tight deadline this project can't be done. But this guy proved me wrong not only he delivered an outstanding work but he managed to deliver 1 day prior to the deadline. And when I asked for some revisions he made them in MINUTES. I'm looking forward to work with him again and I totally recommend him. Thanks again!", - }, - { - name: 'Sasha Ho', - position: 'Accountant', - photo: - 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb', - text: - 'This guy is a top notch designer and front end developer. He communicates well, works fast and produces quality work. We have been lucky to work with him!', - }, - { - name: 'Veeti Seppanen', - position: 'Director', - photo: 'https://randomuser.me/api/portraits/men/97.jpg', - text: - 'This guy is a young and talented IT professional, proactive and responsible, with a strong work ethic. He is very strong in PSD2HTML conversions and HTML/CSS technology. He is a quick learner, eager to learn new technologies. He is focused and has the good dynamics to achieve due dates and outstanding results.', - }, -] - -let idx = 1 - -function updateTestimonial() { - const { name, position, photo, text } = testimonials[idx] - - testimonial.innerHTML = text - userImage.src = photo - username.innerHTML = name - role.innerHTML = position - - idx++ - - if (idx > testimonials.length - 1) { - idx = 0 - } -} - -setInterval(updateTestimonial, 10000) diff --git a/testimonial-box-switcher/style.css b/testimonial-box-switcher/style.css deleted file mode 100644 index 631a801..0000000 --- a/testimonial-box-switcher/style.css +++ /dev/null @@ -1,98 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Montserrat'); - -* { - box-sizing: border-box; -} - -body { - background-color: #f4f4f4; - font-family: 'Montserrat', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; - padding: 10px; -} - -.testimonial-container { - background-color: #476ce4; - color: #fff; - border-radius: 15px; - margin: 20px auto; - padding: 50px 80px; - max-width: 768px; - position: relative; -} - -.fa-quote { - color: rgba(255, 255, 255, 0.3); - font-size: 28px; - position: absolute; - top: 70px; -} - -.fa-quote-right { - left: 40px; -} - -.fa-quote-left { - right: 40px; -} - -.testimonial { - line-height: 28px; - text-align: justify; -} - -.user { - display: flex; - align-items: center; - justify-content: center; -} - -.user .user-image { - border-radius: 50%; - height: 75px; - width: 75px; - object-fit: cover; -} - -.user .user-details { - margin-left: 10px; -} - -.user .username { - margin: 0; -} - -.user .role { - font-weight: normal; - margin: 10px 0; -} - -.progress-bar { - background-color: #fff; - height: 4px; - width: 100%; - animation: grow 10s linear infinite; - transform-origin: left; -} - -@keyframes grow { - 0% { - transform: scaleX(0); - } -} - -@media (max-width: 768px) { - .testimonial-container { - padding: 20px 30px; - } - - .fa-quote { - display: none; - } -} diff --git a/theme-clock/index.html b/theme-clock/index.html deleted file mode 100644 index 8b50d24..0000000 --- a/theme-clock/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - Theme Clock - - - - - - -
-
-
-
-
-
-
- -
-
-
- - - - diff --git a/theme-clock/script.js b/theme-clock/script.js deleted file mode 100644 index 5f1126d..0000000 --- a/theme-clock/script.js +++ /dev/null @@ -1,48 +0,0 @@ -const hourEl = document.querySelector('.hour') -const minuteEl = document.querySelector('.minute') -const secondEl = document.querySelector('.second') -const timeEl = document.querySelector('.time') -const dateEl = document.querySelector('.date') -const toggle = document.querySelector('.toggle') - -const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; -const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; - -toggle.addEventListener('click', (e) => { - const html = document.querySelector('html') - if (html.classList.contains('dark')) { - html.classList.remove('dark') - e.target.innerHTML = 'Dark mode' - } else { - html.classList.add('dark') - e.target.innerHTML = 'Light mode' - } -}) - -function setTime() { - const time = new Date(); - const month = time.getMonth() - const day = time.getDay() - const date = time.getDate() - const hours = time.getHours() - const hoursForClock = hours >= 13 ? hours % 12 : hours; - const minutes = time.getMinutes() - const seconds = time.getSeconds() - const ampm = hours >= 12 ? 'PM' : 'AM' - - hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)` - minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)` - secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)` - - timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}` - dateEl.innerHTML = `${days[day]}, ${months[month]} ${date}` -} - -// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers -const scale = (num, in_min, in_max, out_min, out_max) => { - return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; -} - -setTime() - -setInterval(setTime, 1000) diff --git a/theme-clock/style.css b/theme-clock/style.css deleted file mode 100644 index 2e9f941..0000000 --- a/theme-clock/style.css +++ /dev/null @@ -1,136 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap'); - -* { - box-sizing: border-box; -} - -:root { - --primary-color: #000; - --secondary-color: #fff; -} - -html { - transition: all 0.5s ease-in; -} - -html.dark { - --primary-color: #fff; - --secondary-color: #333; -} - -html.dark { - background-color: #111; - color: var(--primary-color); -} - -body { - font-family: 'Heebo', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.toggle { - cursor: pointer; - background-color: var(--primary-color); - color: var(--secondary-color); - border: 0; - border-radius: 4px; - padding: 8px 12px; - position: absolute; - top: 100px; -} - -.toggle:focus { - outline: none; -} - -.clock-container { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; -} - -.clock { - position: relative; - width: 200px; - height: 200px; -} - -.needle { - background-color: var(--primary-color); - position: absolute; - top: 50%; - left: 50%; - height: 65px; - width: 3px; - transform-origin: bottom center; - transition: all 0.5s ease-in; -} - -.needle.hour { - transform: translate(-50%, -100%) rotate(0deg); -} - -.needle.minute { - transform: translate(-50%, -100%) rotate(0deg); - height: 100px; -} - -.needle.second { - transform: translate(-50%, -100%) rotate(0deg); - height: 100px; - background-color: #e74c3c; -} - -.center-point { - background-color: #e74c3c; - width: 10px; - height: 10px; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; -} - -.center-point::after { - content: ''; - background-color: var(--primary-color); - width: 5px; - height: 5px; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; -} - -.time { - font-size: 60px; -} - -.date { - color: #aaa; - font-size: 14px; - letter-spacing: 0.3px; - text-transform: uppercase; -} - -.date .circle { - background-color: var(--primary-color); - color: var(--secondary-color); - border-radius: 50%; - height: 18px; - width: 18px; - display: inline-flex; - align-items: center; - justify-content: center; - line-height: 18px; - transition: all 0.5s ease-in; - font-size: 12px; -} diff --git a/toast-notification/index.html b/toast-notification/index.html deleted file mode 100644 index 4fba9c2..0000000 --- a/toast-notification/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - Toast Notification - - -
- - - - - - diff --git a/toast-notification/script.js b/toast-notification/script.js deleted file mode 100644 index ece1e00..0000000 --- a/toast-notification/script.js +++ /dev/null @@ -1,35 +0,0 @@ -const button = document.getElementById('button') -const toasts = document.getElementById('toasts') - -const messages = [ - 'Message One', - 'Message Two', - 'Message Three', - 'Message Four', -] - -const types = ['info', 'success', 'error'] - -button.addEventListener('click', () => createNotification()) - -function createNotification(message = null, type = null) { - const notif = document.createElement('div') - notif.classList.add('toast') - notif.classList.add(type ? type : getRandomType()) - - notif.innerText = message ? message : getRandomMessage() - - toasts.appendChild(notif) - - setTimeout(() => { - notif.remove() - }, 3000) -} - -function getRandomMessage() { - return messages[Math.floor(Math.random() * messages.length)] -} - -function getRandomType() { - return types[Math.floor(Math.random() * types.length)] -} \ No newline at end of file diff --git a/toast-notification/style.css b/toast-notification/style.css deleted file mode 100644 index 9ae67d4..0000000 --- a/toast-notification/style.css +++ /dev/null @@ -1,64 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: rebeccapurple; - font-family: 'Poppins', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.btn { - background-color: #ffffff; - color: rebeccapurple; - font-family: inherit; - font-weight: bold; - padding: 1rem; - border-radius: 5px; - border: none; - cursor: pointer; -} - -.btn:focus { - outline: none; -} - -.btn:active { - transform: scale(0.98); -} - -#toasts { - position: fixed; - bottom: 10px; - right: 10px; - display: flex; - flex-direction: column; - align-items: flex-end; -} - -.toast { - background-color: #fff; - border-radius: 5px; - padding: 1rem 2rem; - margin: 0.5rem; -} - -.toast.info { - color: rebeccapurple; -} - -.toast.success { - color: green; -} - -.toast.error { - color: red; -} diff --git a/todo-list/index.html b/todo-list/index.html deleted file mode 100644 index f11f16a..0000000 --- a/todo-list/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - Todo List - - -

todos

-
- - - -
- Left click to toggle completed.
Right click to delete todo - - - - diff --git a/todo-list/script.js b/todo-list/script.js deleted file mode 100644 index ec2ca20..0000000 --- a/todo-list/script.js +++ /dev/null @@ -1,65 +0,0 @@ -const form = document.getElementById('form') -const input = document.getElementById('input') -const todosUL = document.getElementById('todos') - -const todos = JSON.parse(localStorage.getItem('todos')) - -if(todos) { - todos.forEach(todo => addTodo(todo)) -} - -form.addEventListener('submit', (e) => { - e.preventDefault() - - addTodo() -}) - -function addTodo(todo) { - let todoText = input.value - - if(todo) { - todoText = todo.text - } - - if(todoText) { - const todoEl = document.createElement('li') - if(todo && todo.completed) { - todoEl.classList.add('completed') - } - - todoEl.innerText = todoText - - todoEl.addEventListener('click', () => { - todoEl.classList.toggle('completed') - updateLS() - }) - - todoEl.addEventListener('contextmenu', (e) => { - e.preventDefault() - - todoEl.remove() - updateLS() - }) - - todosUL.appendChild(todoEl) - - input.value = '' - - updateLS() - } -} - -function updateLS() { - todosEl = document.querySelectorAll('li') - - const todos = [] - - todosEl.forEach(todoEl => { - todos.push({ - text: todoEl.innerText, - completed: todoEl.classList.contains('completed') - }) - }) - - localStorage.setItem('todos', JSON.stringify(todos)) -} \ No newline at end of file diff --git a/todo-list/style.css b/todo-list/style.css deleted file mode 100644 index 866d46c..0000000 --- a/todo-list/style.css +++ /dev/null @@ -1,72 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #f5f5f5; - color: #444; - font-family: 'Poppins', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - margin: 0; -} - -h1 { - color: rgb(179, 131, 226); - font-size: 10rem; - text-align: center; - opacity: 0.4; -} - -form { - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - max-width: 100%; - width: 400px; -} - -.input { - border: none; - color: #444; - font-size: 2rem; - padding: 1rem 2rem; - display: block; - width: 100%; -} - -.input::placeholder { - color: #d5d5d5; -} - -.input:focus { - outline-color: rgb(179, 131, 226); -} - -.todos { - background-color: #fff; - padding: 0; - margin: 0; - list-style-type: none; -} - -.todos li { - border-top: 1px solid #e5e5e5; - cursor: pointer; - font-size: 1.5rem; - padding: 1rem 2rem; -} - -.todos li.completed { - color: #b6b6b6; - text-decoration: line-through; -} - -small { - color: #b5b5b5; - margin-top: 3rem; - text-align: center; -} diff --git a/verify-account-ui/index.html b/verify-account-ui/index.html deleted file mode 100644 index a8a1c06..0000000 --- a/verify-account-ui/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - Verify Account - - -
-

Verify Your Account

-

We emailed you the six digit code to cool_guy@email.com
Enter the code below to confirm your email address.

-
- - - - - - -
- - This is design only. We didn't actually send you an email as we don't have your email, right? - -
- - - diff --git a/verify-account-ui/script.js b/verify-account-ui/script.js deleted file mode 100644 index 6df6bf0..0000000 --- a/verify-account-ui/script.js +++ /dev/null @@ -1,14 +0,0 @@ -const codes = document.querySelectorAll('.code') - -codes[0].focus() - -codes.forEach((code, idx) => { - code.addEventListener('keydown', (e) => { - if(e.key >= 0 && e.key <=9) { - codes[idx].value = '' - setTimeout(() => codes[idx + 1].focus(), 10) - } else if(e.key === 'Backspace') { - setTimeout(() => codes[idx - 1].focus(), 10) - } - }) -}) \ No newline at end of file diff --git a/verify-account-ui/style.css b/verify-account-ui/style.css deleted file mode 100644 index 71308d9..0000000 --- a/verify-account-ui/style.css +++ /dev/null @@ -1,78 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #fbfcfe; - font-family: 'Muli', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.container { - background-color: #fff; - border: 3px #000 solid; - border-radius: 10px; - padding: 30px; - max-width: 1000px; - text-align: center; -} - -.code-container { - display: flex; - align-items: center; - justify-content: center; - margin: 40px 0; -} - -.code { - caret-color: transparent; - border-radius: 5px; - font-size: 75px; - height: 120px; - width: 100px; - border: 1px solid #eee; - margin: 1%; - text-align: center; - font-weight: 300; - -moz-appearance: textfield; -} - -.code::-webkit-outer-spin-button, -.code::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -.code:valid { - border-color: #3498db; - box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25); -} - -.info { - background-color: #eaeaea; - display: inline-block; - padding: 10px; - line-height: 20px; - max-width: 400px; - color: #777; - border-radius: 5px; -} - -@media (max-width: 600px) { - .code-container { - flex-wrap: wrap; - } - - .code { - font-size: 60px; - height: 80px; - max-width: 70px; - } -}