├── .gitignore
├── 3d-boxes-background
├── index.html
├── script.js
└── style.css
├── README.md
├── _project_starter_
├── index.html
├── script.js
└── style.css
├── animated-countdown
├── index.html
├── script.js
└── style.css
├── animated-navigation
├── index.html
├── script.js
└── style.css
├── auto-text-effect
├── index.html
├── script.js
└── style.css
├── background-slider
├── index.html
├── script.js
└── style.css
├── blurry-loading
├── index.html
├── script.js
└── style.css
├── button-ripple-effect
├── index.html
├── script.js
└── style.css
├── content-placeholder
├── index.html
├── script.js
└── style.css
├── custom-range-slider
├── .vscode
│ └── settings.json
├── index.html
├── script.js
└── style.css
├── dad-jokes
├── index.html
├── script.js
└── style.css
├── double-click-heart
├── index.html
├── script.js
└── style.css
├── double-vertical-slider
├── index.html
├── script.js
└── style.css
├── drag-n-drop
├── index.html
├── script.js
└── style.css
├── drawing-app
├── index.html
├── script.js
└── style.css
├── drink-water
├── index.html
├── script.js
└── style.css
├── event-keycodes
├── index.html
├── script.js
└── style.css
├── expanding-cards
├── index.html
├── script.js
└── style.css
├── faq-collapse
├── index.html
├── script.js
└── style.css
├── feedback-ui-design
├── index.html
├── script.js
└── style.css
├── form-input-wave
├── index.html
├── script.js
└── style.css
├── github-profiles
├── index.html
├── script.js
└── style.css
├── good-cheap-fast
├── index.html
├── script.js
└── style.css
├── hidden-search
├── index.html
├── script.js
└── style.css
├── hoverboard
├── index.html
├── script.js
└── style.css
├── image-carousel
├── index.html
├── script.js
└── style.css
├── incrementing-counter
├── index.html
├── script.js
└── style.css
├── insect-catch-game
├── index.html
├── script.js
└── style.css
├── kinetic-loader
├── index.html
└── style.css
├── live-user-filter
├── index.html
├── script.js
└── style.css
├── mobile-tab-navigation
├── index.html
├── script.js
└── style.css
├── movie-app
├── index.html
├── script.js
└── style.css
├── netflix-mobile-navigation
├── index.html
├── script.js
└── style.css
├── notes-app
├── index.html
├── script.js
└── style.css
├── password-generator
├── index.html
├── script.js
└── style.css
├── password-strength-background
├── index.html
├── script.js
└── style.css
├── pokedex
├── index.html
├── script.js
└── style.css
├── progress-steps
├── index.html
├── script.js
└── style.css
├── quiz-app
├── index.html
├── script.js
└── style.css
├── random-choice-picker
├── index.html
├── script.js
└── style.css
├── random-image-generator
├── index.html
├── script.js
└── style.css
├── rotating-nav-animation
├── index.html
├── script.js
└── style.css
├── scroll-animation
├── index.html
├── script.js
└── style.css
├── sound-board
├── index.html
├── script.js
├── sounds
│ ├── applause.mp3
│ ├── boo.mp3
│ ├── gasp.mp3
│ ├── tada.mp3
│ ├── victory.mp3
│ └── wrong.mp3
└── style.css
├── split-landing-page
├── index.html
├── ps.jpg
├── script.js
├── style.css
└── xbox.jpg
├── sticky-navigation
├── index.html
├── script.js
└── style.css
├── testimonial-box-switcher
├── index.html
├── script.js
└── style.css
├── theme-clock
├── index.html
├── script.js
└── style.css
├── toast-notification
├── index.html
├── script.js
└── style.css
├── todo-list
├── index.html
├── script.js
└── style.css
└── verify-account-ui
├── index.html
├── script.js
└── style.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
--------------------------------------------------------------------------------
/3d-boxes-background/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 3D Boxes Background
14 |
15 |
16 | Magic 🎩
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/3d-boxes-background/script.js:
--------------------------------------------------------------------------------
1 | const boxesContainer = document.getElementById('boxes')
2 | const btn = document.getElementById('btn')
3 |
4 | btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))
5 |
6 | function createBoxes() {
7 | for (let i = 0; i < 4; i++) {
8 | for (let j = 0; j < 4; j++) {
9 | const box = document.createElement('div')
10 | box.classList.add('box')
11 | box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
12 | boxesContainer.appendChild(box)
13 | }
14 | }
15 | }
16 |
17 | createBoxes()
18 |
--------------------------------------------------------------------------------
/3d-boxes-background/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
3 |
4 | * {
5 | box-sizing: border-box;
6 | }
7 |
8 | body {
9 | background-color: #fafafa;
10 | font-family: 'Roboto', sans-serif;
11 | display: flex;
12 | flex-direction: column;
13 | align-items: center;
14 | justify-content: center;
15 | height: 100vh;
16 | overflow: hidden;
17 | }
18 |
19 | .magic {
20 | background-color: #f9ca24;
21 | color: #fff;
22 | font-family: 'Poppins', sans-serif;
23 | border: 0;
24 | border-radius: 3px;
25 | font-size: 16px;
26 | padding: 12px 20px;
27 | cursor: pointer;
28 | position: fixed;
29 | top: 20px;
30 | letter-spacing: 1px;
31 | box-shadow: 0 3px rgba(249, 202, 36, 0.5);
32 | z-index: 100;
33 | }
34 |
35 | .magic:focus {
36 | outline: none;
37 | }
38 |
39 | .magic:active {
40 | box-shadow: none;
41 | transform: translateY(2px);
42 | }
43 |
44 | .boxes {
45 | display: flex;
46 | flex-wrap: wrap;
47 | justify-content: space-around;
48 | height: 500px;
49 | width: 500px;
50 | position: relative;
51 | transition: 0.4s ease;
52 | }
53 |
54 | .boxes.big {
55 | width: 600px;
56 | height: 600px;
57 | }
58 |
59 | .boxes.big .box {
60 | transform: rotateZ(360deg);
61 | }
62 |
63 | .box {
64 | background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
65 | background-repeat: no-repeat;
66 | background-size: 500px 500px;
67 | position: relative;
68 | height: 125px;
69 | width: 125px;
70 | transition: 0.4s ease;
71 | }
72 |
73 | .box::after {
74 | content: '';
75 | background-color: #f6e58d;
76 | position: absolute;
77 | top: 8px;
78 | right: -15px;
79 | height: 100%;
80 | width: 15px;
81 | transform: skewY(45deg);
82 | }
83 |
84 | .box::before {
85 | content: '';
86 | background-color: #f9ca24;
87 | position: absolute;
88 | bottom: -15px;
89 | left: 8px;
90 | height: 15px;
91 | width: 100%;
92 | transform: skewX(45deg);
93 | }
94 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 50 Projects in 50 Days - HTML/CSS and JavaScript
2 |
3 | **NOTE ON PULL REQUESTS**: All of these projects are part of the course. While I do appreciate people trying to make some things prettier or adding new features, we are only accepting pull requests and looking at issues for bug fixes so that the code stays inline with the course
4 |
--------------------------------------------------------------------------------
/_project_starter_/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | My Project
8 |
9 |
10 | Project Starter
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/_project_starter_/script.js:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/_project_starter_/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: 'Roboto', sans-serif;
9 | display: flex;
10 | flex-direction: column;
11 | align-items: center;
12 | justify-content: center;
13 | height: 100vh;
14 | overflow: hidden;
15 | margin: 0;
16 | }
17 |
--------------------------------------------------------------------------------
/animated-countdown/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Animated Countdown
8 |
9 |
10 |
11 |
12 | 3
13 | 2
14 | 1
15 | 0
16 |
17 |
Get Ready
18 |
21 |
GO
22 |
23 | Replay
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/animated-countdown/script.js:
--------------------------------------------------------------------------------
1 | const nums = document.querySelectorAll('.nums span')
2 | const counter = document.querySelector('.counter')
3 | const finalMessage = document.querySelector('.final')
4 | const replay = document.querySelector('#replay')
5 |
6 | runAnimation()
7 |
8 | function resetDOM() {
9 | counter.classList.remove('hide')
10 | finalMessage.classList.remove('show')
11 |
12 | nums.forEach((num) => {
13 | num.classList.value = ''
14 | })
15 |
16 | nums[0].classList.add('in')
17 | }
18 |
19 | function runAnimation() {
20 | nums.forEach((num, idx) => {
21 | const nextToLast = nums.length - 1
22 |
23 | num.addEventListener('animationend', (e) => {
24 | if (e.animationName === 'goIn' && idx !== nextToLast) {
25 | num.classList.remove('in')
26 | num.classList.add('out')
27 | } else if (e.animationName === 'goOut' && num.nextElementSibling) {
28 | num.nextElementSibling.classList.add('in')
29 | } else {
30 | counter.classList.add('hide')
31 | finalMessage.classList.add('show')
32 | }
33 | })
34 | })
35 | }
36 |
37 | replay.addEventListener('click', () => {
38 | resetDOM()
39 | runAnimation()
40 | })
41 |
--------------------------------------------------------------------------------
/animated-countdown/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: 'Roboto', sans-serif;
9 | margin: 0;
10 | height: 100vh;
11 | overflow: hidden;
12 | }
13 |
14 | h4 {
15 | font-size: 20px;
16 | margin: 5px;
17 | text-transform: uppercase;
18 | }
19 |
20 | .counter {
21 | position: fixed;
22 | top: 50%;
23 | left: 50%;
24 | transform: translate(-50%, -50%);
25 | text-align: center;
26 | }
27 |
28 | .counter.hide {
29 | transform: translate(-50%, -50%) scale(0);
30 | animation: hide 0.2s ease-out;
31 | }
32 |
33 | @keyframes hide {
34 | 0% {
35 | transform: translate(-50%, -50%) scale(1);
36 | }
37 |
38 | 100% {
39 | transform: translate(-50%, -50%) scale(0);
40 | }
41 | }
42 |
43 | .final {
44 | position: fixed;
45 | top: 50%;
46 | left: 50%;
47 | transform: translate(-50%, -50%) scale(0);
48 | text-align: center;
49 | }
50 |
51 | .final.show {
52 | transform: translate(-50%, -50%) scale(1);
53 | animation: show 0.2s ease-out;
54 | }
55 |
56 | @keyframes show {
57 | 0% {
58 | transform: translate(-50%, -50%) scale(0);
59 | }
60 |
61 | 30% {
62 | transform: translate(-50%, -50%) scale(1.4);
63 | }
64 |
65 | 100% {
66 | transform: translate(-50%, -50%) scale(1);
67 | }
68 | }
69 |
70 | .nums {
71 | color: #3498db;
72 | font-size: 50px;
73 | position: relative;
74 | overflow: hidden;
75 | width: 250px;
76 | height: 50px;
77 | }
78 |
79 | .nums span {
80 | position: absolute;
81 | top: 50%;
82 | left: 50%;
83 | transform: translate(-50%, -50%) rotate(120deg);
84 | transform-origin: bottom center;
85 | }
86 |
87 | .nums span.in {
88 | transform: translate(-50%, -50%) rotate(0deg);
89 | animation: goIn 0.5s ease-in-out;
90 | }
91 |
92 | .nums span.out {
93 | animation: goOut 0.5s ease-in-out;
94 | }
95 |
96 | @keyframes goIn {
97 | 0% {
98 | transform: translate(-50%, -50%) rotate(120deg);
99 | }
100 |
101 | 30% {
102 | transform: translate(-50%, -50%) rotate(-20deg);
103 | }
104 |
105 | 60% {
106 | transform: translate(-50%, -50%) rotate(10deg);
107 | }
108 |
109 | 100% {
110 | transform: translate(-50%, -50%) rotate(0deg);
111 | }
112 | }
113 |
114 | @keyframes goOut {
115 | 0% {
116 | transform: translate(-50%, -50%) rotate(0deg);
117 | }
118 |
119 | 60% {
120 | transform: translate(-50%, -50%) rotate(20deg);
121 | }
122 |
123 | 100% {
124 | transform: translate(-50%, -50%) rotate(-120deg);
125 | }
126 | }
127 |
128 | #replay{
129 | background-color: #3498db;
130 | border-radius: 3px;
131 | border: none;
132 | color: aliceblue;
133 | padding: 5px;
134 | text-align: center;
135 | display: inline-block;
136 | cursor: pointer;
137 | transition: all 0.3s;
138 | }
139 |
140 | #replay span{
141 | cursor: pointer;
142 | display: inline-block;
143 | position: relative;
144 | transition: 0.3s;
145 | }
146 |
147 | #replay span:after{
148 | content: '\00bb';
149 | position: absolute;
150 | opacity: 0;
151 | top: 0;
152 | right: -20px;
153 | transition: 0.5s;
154 | }
155 |
156 | #replay:hover span{
157 | padding-right: 25px;
158 | }
159 |
160 | #replay:hover span:after{
161 | opacity: 1;
162 | right: 0;
163 | }
164 |
--------------------------------------------------------------------------------
/animated-navigation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Animated Navigation
8 |
9 |
10 |
11 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/animated-navigation/script.js:
--------------------------------------------------------------------------------
1 | const toggle = document.getElementById('toggle')
2 | const nav = document.getElementById('nav')
3 |
4 | toggle.addEventListener('click', () => nav.classList.toggle('active'))
5 |
--------------------------------------------------------------------------------
/animated-navigation/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #eafbff;
9 | background-image: linear-gradient(
10 | to bottom,
11 | #eafbff 0%,
12 | #eafbff 50%,
13 | #5290f9 50%,
14 | #5290f9 100%
15 | );
16 | font-family: 'Muli', sans-serif;
17 | display: flex;
18 | align-items: center;
19 | justify-content: center;
20 | height: 100vh;
21 | margin: 0;
22 | }
23 |
24 | nav {
25 | background-color: #fff;
26 | padding: 20px;
27 | width: 80px;
28 | display: flex;
29 | align-items: center;
30 | justify-content: center;
31 | border-radius: 3px;
32 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
33 | transition: width 0.6s linear;
34 | overflow-x: hidden;
35 | }
36 |
37 | nav.active {
38 | width: 350px;
39 | }
40 |
41 | nav ul {
42 | display: flex;
43 | list-style-type: none;
44 | padding: 0;
45 | margin: 0;
46 | width: 0;
47 | transition: width 0.6s linear;
48 | }
49 |
50 | nav.active ul {
51 | width: 100%;
52 | }
53 |
54 | nav ul li {
55 | transform: rotateY(0deg);
56 | opacity: 0;
57 | transition: transform 0.6s linear, opacity 0.6s linear;
58 | }
59 |
60 | nav.active ul li {
61 | opacity: 1;
62 | transform: rotateY(360deg);
63 | }
64 |
65 | nav ul a {
66 | position: relative;
67 | color: #000;
68 | text-decoration: none;
69 | margin: 0 10px;
70 | }
71 |
72 | .icon {
73 | background-color: #fff;
74 | border: 0;
75 | cursor: pointer;
76 | padding: 0;
77 | position: relative;
78 | height: 30px;
79 | width: 30px;
80 | }
81 |
82 | .icon:focus {
83 | outline: 0;
84 | }
85 |
86 | .icon .line {
87 | background-color: #5290f9;
88 | height: 2px;
89 | width: 20px;
90 | position: absolute;
91 | top: 10px;
92 | left: 5px;
93 | transition: transform 0.6s linear;
94 | }
95 |
96 | .icon .line2 {
97 | top: auto;
98 | bottom: 10px;
99 | }
100 |
101 | nav.active .icon .line1 {
102 | transform: rotate(-765deg) translateY(5.5px);
103 | }
104 |
105 | nav.active .icon .line2 {
106 | transform: rotate(765deg) translateY(-5.5px);
107 | }
108 |
--------------------------------------------------------------------------------
/auto-text-effect/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Auto Text Effect
8 |
9 |
10 | Starting...
11 |
12 |
13 | Speed:
14 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/auto-text-effect/script.js:
--------------------------------------------------------------------------------
1 | const textEl = document.getElementById('text')
2 | const speedEl = document.getElementById('speed')
3 | const text = 'We Love Programming!'
4 | let idx = 1
5 | let speed = 300 / speedEl.value
6 |
7 | writeText()
8 |
9 | function writeText() {
10 | textEl.innerText = text.slice(0, idx)
11 |
12 | idx++
13 |
14 | if(idx > text.length) {
15 | idx = 1
16 | }
17 |
18 | setTimeout(writeText, speed)
19 | }
20 |
21 |
22 | speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)
--------------------------------------------------------------------------------
/auto-text-effect/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: darksalmon;
9 | font-family: 'Roboto', sans-serif;
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | justify-content: center;
14 | height: 100vh;
15 | overflow: hidden;
16 | margin: 0;
17 | }
18 |
19 | div {
20 | position: absolute;
21 | bottom: 20px;
22 | background: rgba(0, 0, 0, 0.1);
23 | padding: 10px 20px;
24 | font-size: 18px;
25 | }
26 |
27 | input {
28 | width: 50px;
29 | padding: 5px;
30 | font-size: 18px;
31 | background-color: darksalmon;
32 | border: none;
33 | text-align: center;
34 | }
35 |
36 | input:focus {
37 | outline: none;
38 | }
39 |
--------------------------------------------------------------------------------
/background-slider/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Background Slider
14 |
15 |
16 |
17 |
23 |
29 |
30 |
36 |
37 |
43 |
44 |
50 |
51 |
52 |
54 |
55 |
56 |
58 |
Blurry Loading
8 |
9 |
10 |
11 | 0%
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/blurry-loading/script.js:
--------------------------------------------------------------------------------
1 | const loadText = document.querySelector('.loading-text')
2 | const bg = document.querySelector('.bg')
3 |
4 | let load = 0
5 |
6 | let int = setInterval(blurring, 30)
7 |
8 | function blurring() {
9 | load++
10 |
11 | if (load > 99) {
12 | clearInterval(int)
13 | }
14 |
15 | loadText.innerText = `${load}%`
16 | loadText.style.opacity = scale(load, 0, 100, 1, 0)
17 | bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
18 | }
19 |
20 | // https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
21 | const scale = (num, in_min, in_max, out_min, out_max) => {
22 | return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
23 | }
24 |
--------------------------------------------------------------------------------
/blurry-loading/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Ubuntu');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: 'Ubuntu', sans-serif;
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | height: 100vh;
13 | overflow: hidden;
14 | margin: 0;
15 | }
16 |
17 | .bg {
18 | background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80')
19 | no-repeat center center/cover;
20 | position: absolute;
21 | top: -30px;
22 | left: -30px;
23 | width: calc(100vw + 60px);
24 | height: calc(100vh + 60px);
25 | z-index: -1;
26 | filter: blur(0px);
27 | }
28 |
29 | .loading-text {
30 | font-size: 50px;
31 | color: #fff;
32 | }
33 |
--------------------------------------------------------------------------------
/button-ripple-effect/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Button Ripple Effect
8 |
9 |
10 | Click Me
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/button-ripple-effect/script.js:
--------------------------------------------------------------------------------
1 | const buttons = document.querySelectorAll('.ripple')
2 |
3 | buttons.forEach(button => {
4 | button.addEventListener('click', function (e) {
5 | const x = e.clientX
6 | const y = e.clientY
7 |
8 | const buttonTop = e.target.offsetTop
9 | const buttonLeft = e.target.offsetLeft
10 |
11 | const xInside = x - buttonLeft
12 | const yInside = y - buttonTop
13 |
14 | const circle = document.createElement('span')
15 | circle.classList.add('circle')
16 | circle.style.top = yInside + 'px'
17 | circle.style.left = xInside + 'px'
18 |
19 | this.appendChild(circle)
20 |
21 | setTimeout(() => circle.remove(), 500)
22 | })
23 | })
--------------------------------------------------------------------------------
/button-ripple-effect/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #000;
9 | font-family: 'Roboto', sans-serif;
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | justify-content: center;
14 | height: 100vh;
15 | overflow: hidden;
16 | margin: 0;
17 | }
18 |
19 | button {
20 | background-color: purple;
21 | color: #fff;
22 | border: 1px purple solid;
23 | font-size: 14px;
24 | text-transform: uppercase;
25 | letter-spacing: 2px;
26 | padding: 20px 30px;
27 | overflow: hidden;
28 | margin: 10px 0;
29 | position: relative;
30 | }
31 |
32 | button:focus {
33 | outline: none;
34 | }
35 |
36 | button .circle {
37 | position: absolute;
38 | background-color: #fff;
39 | width: 100px;
40 | height: 100px;
41 | border-radius: 50%;
42 | transform: translate(-50%, -50%) scale(0);
43 | animation: scale 0.5s ease-out;
44 | }
45 |
46 | @keyframes scale {
47 | to {
48 | transform: translate(-50%, -50%) scale(3);
49 | opacity: 0;
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/content-placeholder/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Content Placeholder
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
29 |
30 |
31 |
32 |
33 |
Custom Range Slider
8 |
9 |
10 | Custom Range Slider
11 |
12 | 50
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/custom-range-slider/script.js:
--------------------------------------------------------------------------------
1 | const range = document.getElementById('range')
2 |
3 | range.addEventListener('input', (e) => {
4 | const value = +e.target.value
5 | const label = e.target.nextElementSibling
6 |
7 | const range_width = getComputedStyle(e.target).getPropertyValue('width')
8 | const label_width = getComputedStyle(label).getPropertyValue('width')
9 |
10 | const num_width = +range_width.substring(0, range_width.length - 2)
11 | const num_label_width = +label_width.substring(0, label_width.length - 2)
12 |
13 | const max = +e.target.max
14 | const min = +e.target.min
15 |
16 | const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10)
17 |
18 | label.style.left = `${left}px`
19 |
20 |
21 | label.innerHTML = value
22 | })
23 |
24 | // https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
25 | const scale = (num, in_min, in_max, out_min, out_max) => {
26 | return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
27 | }
--------------------------------------------------------------------------------
/custom-range-slider/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
9 | font-family: 'Lato', sans-serif;
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | justify-content: center;
14 | height: 100vh;
15 | overflow: hidden;
16 | margin: 0;
17 | }
18 |
19 | h2 {
20 | position: absolute;
21 | top: 10px;
22 | }
23 |
24 | .range-container {
25 | position: relative;
26 | }
27 |
28 | input[type='range'] {
29 | width: 300px;
30 | margin: 18px 0;
31 | -webkit-appearance: none;
32 | }
33 |
34 | input[type='range']:focus {
35 | outline: none;
36 | }
37 |
38 | input[type='range'] + label {
39 | background-color: #fff;
40 | position: absolute;
41 | top: -25px;
42 | left: 110px;
43 | width: 80px;
44 | padding: 5px 0;
45 | text-align: center;
46 | border-radius: 4px;
47 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
48 | }
49 |
50 | /* Chrome & Safari */
51 | input[type='range']::-webkit-slider-runnable-track {
52 | background: purple;
53 | border-radius: 4px;
54 | width: 100%;
55 | height: 10px;
56 | cursor: pointer;
57 | }
58 |
59 | input[type='range']::-webkit-slider-thumb {
60 | -webkit-appearance: none;
61 | height: 24px;
62 | width: 24px;
63 | background: #fff;
64 | border-radius: 50%;
65 | border: 1px solid purple;
66 | margin-top: -7px;
67 | cursor: pointer;
68 | }
69 |
70 | /* Firefox */
71 | input[type='range']::-moz-range-track {
72 | background: purple;
73 | border-radius: 4px;
74 | width: 100%;
75 | height: 13px;
76 | cursor: pointer;
77 | }
78 |
79 | input[type='range']::-moz-range-thumb {
80 | -webkit-appearance: none;
81 | height: 24px;
82 | width: 24px;
83 | background: #fff;
84 | border-radius: 50%;
85 | border: 1px solid purple;
86 | margin-top: -7px;
87 | cursor: pointer;
88 | }
89 |
90 | /* IE */
91 | input[type='range']::-ms-track {
92 | background: purple;
93 | border-radius: 4px;
94 | width: 100%;
95 | height: 13px;
96 | cursor: pointer;
97 | }
98 |
99 | input[type='range']::-ms-thumb {
100 | -webkit-appearance: none;
101 | height: 24px;
102 | width: 24px;
103 | background: #fff;
104 | border-radius: 50%;
105 | border: 1px solid purple;
106 | margin-top: -7px;
107 | cursor: pointer;
108 | }
109 |
--------------------------------------------------------------------------------
/dad-jokes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Dad Jokes
8 |
9 |
10 |
11 |
Don't Laugh Challenge
12 |
// Joke goes here
13 |
Get Another Joke
14 |
Double Click Heart
9 |
10 |
11 | Double click on the image to
12 | You liked it 0 times
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/double-click-heart/script.js:
--------------------------------------------------------------------------------
1 | const loveMe = document.querySelector('.loveMe')
2 | const times = document.querySelector('#times')
3 |
4 | let clickTime = 0
5 | let timesClicked = 0
6 |
7 | loveMe.addEventListener('click', (e) => {
8 | if(clickTime === 0) {
9 | clickTime = new Date().getTime()
10 | } else {
11 | if((new Date().getTime() - clickTime) < 800) {
12 | createHeart(e)
13 | clickTime = 0
14 | } else {
15 | clickTime = new Date().getTime()
16 | }
17 | }
18 | })
19 |
20 | const createHeart = (e) => {
21 | const heart = document.createElement('i')
22 | heart.classList.add('fas')
23 | heart.classList.add('fa-heart')
24 |
25 | const x = e.clientX
26 | const y = e.clientY
27 |
28 | const leftOffset = e.target.offsetLeft
29 | const topOffset = e.target.offsetTop
30 |
31 | const xInside = x - leftOffset
32 | const yInside = y - topOffset
33 |
34 | heart.style.top = `${yInside}px`
35 | heart.style.left = `${xInside}px`
36 |
37 | loveMe.appendChild(heart)
38 |
39 | times.innerHTML = ++timesClicked
40 |
41 | setTimeout(() => heart.remove(), 1000)
42 | }
--------------------------------------------------------------------------------
/double-click-heart/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Oswald');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: 'Oswald', sans-serif;
9 | text-align: center;
10 | overflow: hidden;
11 | margin: 0;
12 | }
13 |
14 | h3 {
15 | margin-bottom: 0;
16 | text-align: center;
17 | }
18 |
19 | small {
20 | display: block;
21 | margin-bottom: 20px;
22 | text-align: center;
23 | }
24 |
25 | .fa-heart {
26 | color: red;
27 | }
28 |
29 | .loveMe {
30 | height: 440px;
31 | width: 300px;
32 | background: url('https://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')
33 | no-repeat center center/cover;
34 | margin: auto;
35 | cursor: pointer;
36 | max-width: 100%;
37 | position: relative;
38 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
39 | overflow: hidden;
40 | }
41 |
42 | .loveMe .fa-heart {
43 | position: absolute;
44 | animation: grow 0.6s linear;
45 | transform: translate(-50%, -50%) scale(0);
46 | }
47 |
48 | @keyframes grow {
49 | to {
50 | transform: translate(-50%, -50%) scale(10);
51 | opacity: 0;
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/double-vertical-slider/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vertical Slider
9 |
10 |
11 |
12 |
13 |
14 |
Nature flower
15 |
all in pink
16 |
17 |
18 |
Bluuue Sky
19 |
with it's mountains
20 |
21 |
22 |
Lonely castle
23 |
in the wilderness
24 |
25 |
26 |
Flying eagle
27 |
in the sunset
28 |
29 |
30 |
36 |
37 |
38 |
40 |
41 |
43 |
44 |
Drag N Drop
8 |
9 |
10 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/drag-n-drop/script.js:
--------------------------------------------------------------------------------
1 | const fill = document.querySelector('.fill')
2 | const empties = document.querySelectorAll('.empty')
3 |
4 | fill.addEventListener('dragstart', dragStart)
5 | fill.addEventListener('dragend', dragEnd)
6 |
7 | for(const empty of empties) {
8 | empty.addEventListener('dragover', dragOver)
9 | empty.addEventListener('dragenter', dragEnter)
10 | empty.addEventListener('dragleave', dragLeave)
11 | empty.addEventListener('drop', dragDrop)
12 | }
13 |
14 | function dragStart() {
15 | this.className += ' hold'
16 | setTimeout(() => this.className = 'invisible', 0)
17 | }
18 |
19 | function dragEnd() {
20 | this.className = 'fill'
21 | }
22 |
23 | function dragOver(e) {
24 | e.preventDefault()
25 | }
26 |
27 | function dragEnter(e) {
28 | e.preventDefault()
29 | this.className += ' hovered'
30 | }
31 |
32 | function dragLeave() {
33 | this.className = 'empty'
34 | }
35 |
36 | function dragDrop() {
37 | this.className = 'empty'
38 | this.append(fill)
39 | }
--------------------------------------------------------------------------------
/drag-n-drop/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | background-color: steelblue;
7 | display: flex;
8 | align-items: center;
9 | justify-content: center;
10 | height: 100vh;
11 | overflow: hidden;
12 | margin: 0;
13 | }
14 |
15 | .empty {
16 | height: 150px;
17 | width: 150px;
18 | margin: 10px;
19 | border: solid 3px black;
20 | background: white;
21 | }
22 |
23 | .fill {
24 | background-image: url('https://source.unsplash.com/random/150x150');
25 | height: 145px;
26 | width: 145px;
27 | cursor: pointer;
28 | }
29 |
30 | .hold {
31 | border: solid 5px #ccc;
32 | }
33 |
34 | .hovered {
35 | background-color: #333;
36 | border-color: white;
37 | border-style: dashed;
38 | }
39 |
40 | @media (max-width: 800px) {
41 | body {
42 | flex-direction: column;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/drawing-app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Drawing App
8 |
9 |
10 |
12 | -
13 | 10
14 | +
15 | X
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/drawing-app/script.js:
--------------------------------------------------------------------------------
1 | const canvas = document.getElementById('canvas');
2 | const increaseBtn = document.getElementById('increase');
3 | const decreaseBtn = document.getElementById('decrease');
4 | const sizeEL = document.getElementById('size');
5 | const colorEl = document.getElementById('color');
6 | const clearEl = document.getElementById('clear');
7 |
8 | const ctx = canvas.getContext('2d');
9 |
10 | let size = 10
11 | let isPressed = false
12 | colorEl.value = 'black'
13 | let color = colorEl.value
14 | let x
15 | let y
16 |
17 | canvas.addEventListener('mousedown', (e) => {
18 | isPressed = true
19 |
20 | x = e.offsetX
21 | y = e.offsetY
22 | })
23 |
24 | document.addEventListener('mouseup', (e) => {
25 | isPressed = false
26 |
27 | x = undefined
28 | y = undefined
29 | })
30 |
31 | canvas.addEventListener('mousemove', (e) => {
32 | if(isPressed) {
33 | const x2 = e.offsetX
34 | const y2 = e.offsetY
35 |
36 | drawCircle(x2, y2)
37 | drawLine(x, y, x2, y2)
38 |
39 | x = x2
40 | y = y2
41 | }
42 | })
43 |
44 | function drawCircle(x, y) {
45 | ctx.beginPath();
46 | ctx.arc(x, y, size, 0, Math.PI * 2)
47 | ctx.fillStyle = color
48 | ctx.fill()
49 | }
50 |
51 | function drawLine(x1, y1, x2, y2) {
52 | ctx.beginPath()
53 | ctx.moveTo(x1, y1)
54 | ctx.lineTo(x2, y2)
55 | ctx.strokeStyle = color
56 | ctx.lineWidth = size * 2
57 | ctx.stroke()
58 | }
59 |
60 | function updateSizeOnScreen() {
61 | sizeEL.innerText = size
62 | }
63 |
64 | increaseBtn.addEventListener('click', () => {
65 | size += 5
66 |
67 | if(size > 50) {
68 | size = 50
69 | }
70 |
71 | updateSizeOnScreen()
72 | })
73 |
74 | decreaseBtn.addEventListener('click', () => {
75 | size -= 5
76 |
77 | if(size < 5) {
78 | size = 5
79 | }
80 |
81 | updateSizeOnScreen()
82 | })
83 |
84 | colorEl.addEventListener('change', (e) => color = e.target.value)
85 |
86 | clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height))
87 |
--------------------------------------------------------------------------------
/drawing-app/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #f5f5f5;
9 | font-family: 'Roboto', sans-serif;
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | justify-content: center;
14 | height: 100vh;
15 | margin: 0;
16 | }
17 |
18 | canvas {
19 | border: 2px solid steelblue;
20 | }
21 |
22 | .toolbox {
23 | background-color: steelblue;
24 | border: 1px solid slateblue;
25 | display: flex;
26 | width: 804px;
27 | padding: 1rem;
28 | }
29 |
30 | .toolbox > * {
31 | background-color: #fff;
32 | border: none;
33 | display: inline-flex;
34 | align-items: center;
35 | justify-content: center;
36 | font-size: 2rem;
37 | height: 50px;
38 | width: 50px;
39 | margin: 0.25rem;
40 | padding: 0.25rem;
41 | cursor: pointer;
42 | }
43 |
44 | .toolbox > *:last-child {
45 | margin-left: auto;
46 | }
47 |
--------------------------------------------------------------------------------
/drink-water/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Drink Water
8 |
9 |
10 | Drink Water
11 | Goal: 2 Liters
12 |
13 |
14 |
15 | Remained
17 |
18 |
19 |
20 |
Select how many glasses of water that you have drank
23 |
24 |
25 |
250 ml
26 |
250 ml
27 |
250 ml
28 |
250 ml
29 |
250 ml
30 |
250 ml
31 |
250 ml
32 |
250 ml
33 |
Event KeyCodes
8 |
9 |
10 |
11 |
12 | Press any key to get the keyCode
13 |
14 |
6 | ${event.key === ' ' ? 'Space' : event.key}
7 | event.key
8 |
9 |
10 |
11 | ${event.keyCode}
12 | event.keyCode
13 |
14 |
15 |
16 | ${event.code}
17 | event.code
18 |
19 | `
20 | })
--------------------------------------------------------------------------------
/event-keycodes/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #e1e1e1;
9 | font-family: 'Muli', sans-serif;
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | text-align: center;
14 | height: 100vh;
15 | overflow: hidden;
16 | margin: 0;
17 | }
18 |
19 | .key {
20 | border: 1px solid #999;
21 | background-color: #eee;
22 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
23 | display: inline-flex;
24 | align-items: center;
25 | font-size: 20px;
26 | font-weight: bold;
27 | padding: 20px;
28 | flex-direction: column;
29 | margin: 10px;
30 | min-width: 150px;
31 | position: relative;
32 | }
33 |
34 | .key small {
35 | position: absolute;
36 | top: -24px;
37 | left: 0;
38 | text-align: center;
39 | width: 100%;
40 | color: #555;
41 | font-size: 14px;
42 | }
43 |
44 | @media(max-width:768px){
45 | .key{
46 | margin: 10px 0px;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/expanding-cards/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Expanding Cards
8 |
9 |
10 |
11 |
12 |
Explore The World
13 |
14 |
15 |
Wild Forest
16 |
17 |
18 |
Sunny Beach
19 |
20 |
21 |
City on Winter
22 |
23 |
24 |
Mountains - Clouds
25 |
26 |
27 |
FAQ
9 |
10 |
11 | Frequently Asked Questions
12 |
13 |
14 |
15 | Why shouldn't we trust atoms?
16 |
17 |
18 |
19 | They make up everything
20 |
21 |
22 |
23 |
26 |
27 |
28 |
29 |
30 | What do you call someone with no body and no nose?
31 |
32 |
33 | Nobody knows.
34 |
35 |
36 |
39 |
40 |
41 |
42 |
43 | What's the object-oriented way to become wealthy?
44 |
45 |
46 | Inheritance.
47 |
48 |
49 |
52 |
53 |
54 |
55 |
56 | How many tickles does it take to tickle an octopus?
57 |
58 |
59 | Ten-tickles!
60 |
61 |
62 |
65 |
66 |
67 |
68 |
69 | What is: 1 + 1?
70 |
71 |
72 | Depends on who are you asking.
73 |
74 |
75 |
78 |
79 |
Let Us Know Your Feedback
9 |
10 |
11 |
12 |
How satisfied are you with our
13 |
14 |
15 |
16 |
Unhappy
17 |
18 |
19 |
20 |
21 |
Neutral
22 |
23 |
24 |
25 |
26 |
Satisfied
27 |
28 |
29 |
Send Review
30 |
Thank You!
28 | Feedback: ${selectedRating}
30 | We'll use your feedback to improve our customer support
31 | `
32 | })
33 |
34 | function removeActive() {
35 | for(let i = 0; i < ratings.length; i++) {
36 | ratings[i].classList.remove('active')
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/feedback-ui-design/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #fef9f2;
9 | font-family: 'Montserrat', sans-serif;
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | height: 100vh;
14 | overflow: hidden;
15 | margin: 0;
16 | }
17 |
18 | .panel-container {
19 | background-color: #fff;
20 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
21 | border-radius: 4px;
22 | font-size: 90%;
23 | display: flex;
24 | flex-direction: column;
25 | justify-content: center;
26 | align-items: center;
27 | text-align: center;
28 | padding: 30px;
29 | max-width: 400px;
30 | }
31 |
32 | .panel-container strong {
33 | line-height: 20px;
34 | }
35 |
36 | .ratings-container {
37 | display: flex;
38 | margin: 20px 0;
39 | }
40 |
41 | .rating {
42 | flex: 1;
43 | cursor: pointer;
44 | padding: 20px;
45 | margin: 10px 5px;
46 | }
47 |
48 | .rating:hover,
49 | .rating.active {
50 | border-radius: 4px;
51 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
52 | }
53 |
54 | .rating img {
55 | width: 40px;
56 | }
57 |
58 | .rating small {
59 | color: #555;
60 | display: inline-block;
61 | margin: 10px 0 0;
62 | }
63 |
64 | .rating:hover small,
65 | .rating.active small {
66 | color: #111;
67 | }
68 |
69 | .btn {
70 | background-color: #302d2b;
71 | color: #fff;
72 | border: 0;
73 | border-radius: 4px;
74 | padding: 12px 30px;
75 | cursor: pointer;
76 | }
77 |
78 | .btn:focus {
79 | outline: 0;
80 | }
81 |
82 | .btn:active {
83 | transform: scale(0.98);
84 | }
85 |
86 | .fa-heart {
87 | color: red;
88 | font-size: 30px;
89 | margin-bottom: 10px;
90 | }
91 |
--------------------------------------------------------------------------------
/form-input-wave/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Form Input Wave
8 |
9 |
10 |
11 |
Please Login
12 |
34 |
${letter} `)
7 | .join('')
8 | })
--------------------------------------------------------------------------------
/form-input-wave/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: steelblue;
9 | color: #fff;
10 | font-family: 'Muli', sans-serif;
11 | display: flex;
12 | flex-direction: column;
13 | align-items: center;
14 | justify-content: center;
15 | height: 100vh;
16 | overflow: hidden;
17 | margin: 0;
18 | }
19 |
20 | .container {
21 | background-color: rgba(0, 0, 0, 0.4);
22 | padding: 20px 40px;
23 | border-radius: 5px;
24 | }
25 |
26 | .container h1 {
27 | text-align: center;
28 | margin-bottom: 30px;
29 | }
30 |
31 | .container a {
32 | text-decoration: none;
33 | color: lightblue;
34 | }
35 |
36 | .btn {
37 | cursor: pointer;
38 | display: inline-block;
39 | width: 100%;
40 | background: lightblue;
41 | padding: 15px;
42 | font-family: inherit;
43 | font-size: 16px;
44 | border: 0;
45 | border-radius: 5px;
46 | }
47 |
48 | .btn:focus {
49 | outline: 0;
50 | }
51 |
52 | .btn:active {
53 | transform: scale(0.98);
54 | }
55 |
56 | .text {
57 | margin-top: 30px;
58 | }
59 |
60 | .form-control {
61 | position: relative;
62 | margin: 20px 0 40px;
63 | width: 300px;
64 | }
65 |
66 | .form-control input {
67 | background-color: transparent;
68 | border: 0;
69 | border-bottom: 2px #fff solid;
70 | display: block;
71 | width: 100%;
72 | padding: 15px 0;
73 | font-size: 18px;
74 | color: #fff;
75 | }
76 |
77 | .form-control input:focus,
78 | .form-control input:valid {
79 | outline: 0;
80 | border-bottom-color: lightblue;
81 | }
82 |
83 | .form-control label {
84 | position: absolute;
85 | top: 15px;
86 | left: 0;
87 | pointer-events: none;
88 | }
89 |
90 | .form-control label span {
91 | display: inline-block;
92 | font-size: 18px;
93 | min-width: 5px;
94 | transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
95 | }
96 |
97 | .form-control input:focus + label span,
98 | .form-control input:valid + label span {
99 | color: lightblue;
100 | transform: translateY(-30px);
101 | }
102 |
--------------------------------------------------------------------------------
/github-profiles/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Github Profiles
8 |
9 |
10 |
13 |
14 | ${user.bio}
` : ''
33 | const cardHTML = `
34 |
35 |
36 |
37 |
38 |
39 |
${userID}
40 | ${userBio}
41 |
42 | ${user.followers} Followers
43 | ${user.following} Following
44 | ${user.public_repos} Repos
45 |
46 |
47 |
48 |
49 |
58 |
${msg}
59 |
60 | `
61 |
62 | main.innerHTML = cardHTML
63 | }
64 |
65 | function addReposToCard(repos) {
66 | const reposEl = document.getElementById('repos')
67 |
68 | repos
69 | .slice(0, 5)
70 | .forEach(repo => {
71 | const repoEl = document.createElement('a')
72 | repoEl.classList.add('repo')
73 | repoEl.href = repo.html_url
74 | repoEl.target = '_blank'
75 | repoEl.innerText = repo.name
76 |
77 | reposEl.appendChild(repoEl)
78 | })
79 | }
80 |
81 | form.addEventListener('submit', (e) => {
82 | e.preventDefault()
83 |
84 | const user = search.value
85 |
86 | if(user) {
87 | getUser(user)
88 |
89 | search.value = ''
90 | }
91 | })
92 |
93 |
--------------------------------------------------------------------------------
/github-profiles/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #2a2a72;
9 | color: #fff;
10 | font-family: 'Poppins', sans-serif;
11 | display: flex;
12 | flex-direction: column;
13 | align-items: center;
14 | justify-content: center;
15 | height: 100vh;
16 | overflow: hidden;
17 | margin: 0;
18 | }
19 |
20 | .user-form {
21 | width: 100%;
22 | max-width: 700px;
23 | }
24 |
25 | .user-form input {
26 | width: 100%;
27 | display: block;
28 | background-color: #4c2885;
29 | border: none;
30 | border-radius: 10px;
31 | color: #fff;
32 | padding: 1rem;
33 | margin-bottom: 2rem;
34 | font-family: inherit;
35 | font-size: 1rem;
36 | box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
37 | 0 15px 40px rgba(0, 0, 0, 0.1);
38 | }
39 |
40 | .user-form input::placeholder {
41 | color: #bbb;
42 | }
43 |
44 | .user-form input:focus {
45 | outline: none;
46 | }
47 |
48 | .card {
49 | max-width: 800px;
50 | background-color: #4c2885;
51 | border-radius: 20px;
52 | box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
53 | 0 15px 40px rgba(0, 0, 0, 0.1);
54 | display: flex;
55 | padding: 3rem;
56 | margin: 0 1.5rem;
57 | }
58 |
59 | .avatar {
60 | border-radius: 50%;
61 | border: 10px solid #2a2a72;
62 | height: 150px;
63 | width: 150px;
64 | }
65 |
66 | .user-info {
67 | color: #eee;
68 | margin-left: 2rem;
69 | }
70 |
71 | .user-info h2 {
72 | margin-top: 0;
73 | }
74 |
75 | .user-info ul {
76 | list-style-type: none;
77 | display: flex;
78 | justify-content: space-between;
79 | padding: 0;
80 | max-width: 400px;
81 | }
82 |
83 | .user-info ul li {
84 | display: flex;
85 | align-items: center;
86 | }
87 |
88 | .user-info ul li strong {
89 | font-size: 0.9rem;
90 | margin-left: 0.5rem;
91 | }
92 |
93 | .repo {
94 | text-decoration: none;
95 | color: #fff;
96 | background-color: #212a72;
97 | font-size: 0.7rem;
98 | padding: 0.25rem 0.5rem;
99 | margin-right: 0.5rem;
100 | margin-bottom: 0.5rem;
101 | display: inline-block;
102 | }
103 |
104 | @media (max-width: 500px) {
105 | .card {
106 | flex-direction: column;
107 | align-items: center;
108 | }
109 |
110 | .user-form {
111 | max-width: 400px;
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/good-cheap-fast/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Good, Cheap, Fast
8 |
9 |
10 | How do you want your project to be?
11 |
12 |
13 |
14 |
15 |
16 |
Good
17 |
20 |
21 |
22 |
23 |
24 |
Cheap
25 |
28 |
29 |
30 |
31 |
32 |
Fast
33 |
Hidden Search
9 |
10 |
11 |
12 |
14 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/hidden-search/script.js:
--------------------------------------------------------------------------------
1 | const search = document.querySelector('.search')
2 | const btn = document.querySelector('.btn')
3 | const input = document.querySelector('.input')
4 |
5 | btn.addEventListener('click', () => {
6 | search.classList.toggle('active')
7 | input.focus()
8 | })
--------------------------------------------------------------------------------
/hidden-search/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-image: linear-gradient(90deg, #7d5fff, #7158e2);
9 | font-family: 'Roboto', sans-serif;
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | height: 100vh;
14 | overflow: hidden;
15 | margin: 0;
16 | }
17 |
18 | .search {
19 | position: relative;
20 | height: 50px;
21 | }
22 |
23 | .search .input {
24 | background-color: #fff;
25 | border: 0;
26 | font-size: 18px;
27 | padding: 15px;
28 | height: 50px;
29 | width: 50px;
30 | transition: width 0.3s ease;
31 | }
32 |
33 | .btn {
34 | background-color: #fff;
35 | border: 0;
36 | cursor: pointer;
37 | font-size: 24px;
38 | position: absolute;
39 | top: 0;
40 | left: 0;
41 | height: 50px;
42 | width: 50px;
43 | transition: transform 0.3s ease;
44 | }
45 |
46 | .btn:focus,
47 | .input:focus {
48 | outline: none;
49 | }
50 |
51 | .search.active .input {
52 | width: 200px;
53 | }
54 |
55 | .search.active .btn {
56 | transform: translateX(198px);
57 | }
58 |
--------------------------------------------------------------------------------
/hoverboard/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hoverboard
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/hoverboard/script.js:
--------------------------------------------------------------------------------
1 | const container = document.getElementById('container')
2 | const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
3 | const SQUARES = 500
4 |
5 | for(let i = 0; i < SQUARES; i++) {
6 | const square = document.createElement('div')
7 | square.classList.add('square')
8 |
9 | square.addEventListener('mouseover', () => setColor(square))
10 |
11 | square.addEventListener('mouseout', () => removeColor(square))
12 |
13 | container.appendChild(square)
14 | }
15 |
16 | function setColor(element) {
17 | const color = getRandomColor()
18 | element.style.background = color
19 | element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
20 | }
21 |
22 | function removeColor(element) {
23 | element.style.background = '#1d1d1d'
24 | element.style.boxShadow = '0 0 2px #000'
25 | }
26 |
27 | function getRandomColor() {
28 | return colors[Math.floor(Math.random() * colors.length)]
29 | }
--------------------------------------------------------------------------------
/hoverboard/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | background-color: #111;
7 | display: flex;
8 | align-items: center;
9 | justify-content: center;
10 | height: 100vh;
11 | overflow: hidden;
12 | margin: 0;
13 | }
14 |
15 | .container {
16 | display: flex;
17 | align-items: center;
18 | justify-content: center;
19 | flex-wrap: wrap;
20 | max-width: 400px;
21 | }
22 |
23 | .square {
24 | background-color: #1d1d1d;
25 | box-shadow: 0 0 2px #000;
26 | height: 16px;
27 | width: 16px;
28 | margin: 2px;
29 | transition: 2s ease;
30 | }
31 |
32 | .square:hover {
33 | transition-duration: 0s;
34 | }
35 |
--------------------------------------------------------------------------------
/image-carousel/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Image Carousel
8 |
9 |
10 |
11 |
28 |
29 |
30 | Prev
31 | Next
32 |
33 |
Increment Counter
9 |
10 |
11 |
12 |
13 |
14 |
Twitter Followers
15 |
18 |
19 |
20 |
YouTube Subscribers
21 |
24 |
25 |
26 |
Facebook Fans
27 |
Catch The Insect
8 |
9 |
10 |
11 |
Catch The Insect
12 | Play Game
13 |
14 |
15 |
16 |
What is your "favorite" insect?
17 |
18 |
19 |
20 | Fly
21 |
23 |
24 |
25 |
26 | Mosquito
27 |
32 |
33 |
34 |
35 | Spider
36 |
41 |
42 |
43 |
44 | Roach
45 |
50 |
51 |
52 |
55 |
Time: 00:00
56 | Score: 0
57 |
58 | Are you annnoyed yet?
61 |
62 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/insect-catch-game/script.js:
--------------------------------------------------------------------------------
1 | const screens = document.querySelectorAll('.screen');
2 | const choose_insect_btns = document.querySelectorAll('.choose-insect-btn');
3 | const start_btn = document.getElementById('start-btn')
4 | const game_container = document.getElementById('game-container')
5 | const timeEl = document.getElementById('time')
6 | const scoreEl = document.getElementById('score')
7 | const message = document.getElementById('message')
8 | let seconds = 0
9 | let score = 0
10 | let selected_insect = {}
11 |
12 | start_btn.addEventListener('click', () => screens[0].classList.add('up'))
13 |
14 | choose_insect_btns.forEach(btn => {
15 | btn.addEventListener('click', () => {
16 | const img = btn.querySelector('img')
17 | const src = img.getAttribute('src')
18 | const alt = img.getAttribute('alt')
19 | selected_insect = { src, alt }
20 | screens[1].classList.add('up')
21 | setTimeout(createInsect, 1000)
22 | startGame()
23 | })
24 | })
25 |
26 | function startGame() {
27 | setInterval(increaseTime, 1000)
28 | }
29 |
30 | function increaseTime() {
31 | let m = Math.floor(seconds / 60)
32 | let s = seconds % 60
33 | m = m < 10 ? `0${m}` : m
34 | s = s < 10 ? `0${s}` : s
35 | timeEl.innerHTML = `Time: ${m}:${s}`
36 | seconds++
37 | }
38 |
39 | function createInsect() {
40 | const insect = document.createElement('div')
41 | insect.classList.add('insect')
42 | const { x, y } = getRandomLocation()
43 | insect.style.top = `${y}px`
44 | insect.style.left = `${x}px`
45 | insect.innerHTML = `Kinetic Loader
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/kinetic-loader/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | background-color: #2c3e50;
7 | display: flex;
8 | align-items: center;
9 | justify-content: center;
10 | height: 100vh;
11 | overflow: hidden;
12 | margin: 0;
13 | }
14 |
15 | .kinetic {
16 | position: relative;
17 | height: 80px;
18 | width: 80px;
19 | }
20 |
21 | .kinetic::after,
22 | .kinetic::before {
23 | content: '';
24 | position: absolute;
25 | top: 0;
26 | left: 0;
27 | width: 0;
28 | height: 0;
29 | border: 50px solid transparent;
30 | border-bottom-color: #fff;
31 | animation: rotateA 2s linear infinite 0.5s;
32 | }
33 |
34 | .kinetic::before {
35 | transform: rotate(90deg);
36 | animation: rotateB 2s linear infinite;
37 | }
38 |
39 | @keyframes rotateA {
40 | 0%,
41 | 25% {
42 | transform: rotate(0deg);
43 | }
44 |
45 | 50%,
46 | 75% {
47 | transform: rotate(180deg);
48 | }
49 |
50 | 100% {
51 | transform: rotate(360deg);
52 | }
53 | }
54 |
55 | @keyframes rotateB {
56 | 0%,
57 | 25% {
58 | transform: rotate(90deg);
59 | }
60 |
61 | 50%,
62 | 75% {
63 | transform: rotate(270deg);
64 | }
65 |
66 | 100% {
67 | transform: rotate(450deg);
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/live-user-filter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Live User Filter
8 |
9 |
10 |
11 |
16 |
17 |
18 |
19 | Loading...
20 |
21 |
22 |
25 |
${user.name.first} ${user.name.last}
26 |
${user.location.city}, ${user.location.country}
27 |
Mobile Tab Navigation
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | Home
21 |
22 |
23 | Work
25 |
26 |
27 | Blog
29 |
30 |
31 | About Us
33 |
34 |
35 |
36 |
Movie App
8 |
9 |
10 |
15 |
16 |
31 |
${title}
32 | ${vote_average}
33 |
34 |
35 |
Overview
36 | ${overview}
37 |
38 | `
39 | main.appendChild(movieEl)
40 | })
41 | }
42 |
43 | function getClassByRate(vote) {
44 | if(vote >= 8) {
45 | return 'green'
46 | } else if(vote >= 5) {
47 | return 'orange'
48 | } else {
49 | return 'red'
50 | }
51 | }
52 |
53 | form.addEventListener('submit', (e) => {
54 | e.preventDefault()
55 |
56 | const searchTerm = search.value
57 |
58 | if(searchTerm && searchTerm !== '') {
59 | getMovies(SEARCH_API + searchTerm)
60 |
61 | search.value = ''
62 | } else {
63 | window.location.reload()
64 | }
65 | })
--------------------------------------------------------------------------------
/movie-app/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
2 |
3 | :root {
4 | --primary-color: #22254b;
5 | --secondary-color: #373b69;
6 | }
7 |
8 | * {
9 | box-sizing: border-box;
10 | }
11 |
12 | body {
13 | background-color: var(--primary-color);
14 | font-family: 'Poppins', sans-serif;
15 | margin: 0;
16 | }
17 |
18 | header {
19 | padding: 1rem;
20 | display: flex;
21 | justify-content: flex-end;
22 | background-color: var(--secondary-color);
23 | }
24 |
25 | .search {
26 | background-color: transparent;
27 | border: 2px solid var(--primary-color);
28 | border-radius: 50px;
29 | font-family: inherit;
30 | font-size: 1rem;
31 | padding: 0.5rem 1rem;
32 | color: #fff;
33 | }
34 |
35 | .search::placeholder {
36 | color: #7378c5;
37 | }
38 |
39 | .search:focus {
40 | outline: none;
41 | background-color: var(--primary-color);
42 | }
43 |
44 | main {
45 | display: flex;
46 | flex-wrap: wrap;
47 | justify-content: center;
48 | }
49 |
50 | .movie {
51 | width: 300px;
52 | margin: 1rem;
53 | background-color: var(--secondary-color);
54 | box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
55 | position: relative;
56 | overflow: hidden;
57 | border-radius: 3px;
58 | }
59 |
60 | .movie img {
61 | width: 100%;
62 | }
63 |
64 | .movie-info {
65 | color: #eee;
66 | display: flex;
67 | align-items: center;
68 | justify-content: space-between;
69 | gap:0.2rem;
70 | padding: 0.5rem 1rem 1rem;
71 | letter-spacing: 0.5px;
72 | }
73 |
74 | .movie-info h3 {
75 | margin-top: 0;
76 | }
77 |
78 | .movie-info span {
79 | background-color: var(--primary-color);
80 | padding: 0.25rem 0.5rem;
81 | border-radius: 3px;
82 | font-weight: bold;
83 | }
84 |
85 | .movie-info span.green {
86 | color: lightgreen;
87 | }
88 |
89 | .movie-info span.orange {
90 | color: orange;
91 | }
92 |
93 | .movie-info span.red {
94 | color: red;
95 | }
96 |
97 | .overview {
98 | background-color: #fff;
99 | padding: 2rem;
100 | position: absolute;
101 | left: 0;
102 | bottom: 0;
103 | right: 0;
104 | max-height: 100%;
105 | transform: translateY(101%);
106 | overflow-y: auto;
107 | transition: transform 0.3s ease-in;
108 | }
109 |
110 | .movie:hover .overview {
111 | transform: translateY(0);
112 | }
113 |
--------------------------------------------------------------------------------
/netflix-mobile-navigation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Netflix Mobile Navigation
9 |
10 |
11 |
12 |
14 |
15 | Mobile Navigation
18 |
19 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
28 |
41 |
42 |
43 |
Notes App
9 |
10 |
11 |
12 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/notes-app/script.js:
--------------------------------------------------------------------------------
1 | const addBtn = document.getElementById('add')
2 |
3 | const notes = JSON.parse(localStorage.getItem('notes'))
4 |
5 | if(notes) {
6 | notes.forEach(note => addNewNote(note))
7 | }
8 |
9 | addBtn.addEventListener('click', () => addNewNote())
10 |
11 | function addNewNote(text = '') {
12 | const note = document.createElement('div')
13 | note.classList.add('note')
14 |
15 | note.innerHTML = `
16 |
17 |
20 |
21 |
22 |
23 | `
24 |
25 | const editBtn = note.querySelector('.edit')
26 | const deleteBtn = note.querySelector('.delete')
27 | const main = note.querySelector('.main')
28 | const textArea = note.querySelector('textarea')
29 |
30 | textArea.value = text
31 | main.innerHTML = marked(text)
32 |
33 | deleteBtn.addEventListener('click', () => {
34 | note.remove()
35 |
36 | updateLS()
37 | })
38 |
39 | editBtn.addEventListener('click', () => {
40 | main.classList.toggle('hidden')
41 | textArea.classList.toggle('hidden')
42 | })
43 |
44 | textArea.addEventListener('input', (e) => {
45 | const { value } = e.target
46 |
47 | main.innerHTML = marked(value)
48 |
49 | updateLS()
50 | })
51 |
52 | document.body.appendChild(note)
53 | }
54 |
55 | function updateLS() {
56 | const notesText = document.querySelectorAll('textarea')
57 |
58 | const notes = []
59 |
60 | notesText.forEach(note => notes.push(note.value))
61 |
62 | localStorage.setItem('notes', JSON.stringify(notes))
63 | }
--------------------------------------------------------------------------------
/notes-app/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | outline: none;
6 | }
7 |
8 | body {
9 | background-color: #7bdaf3;
10 | font-family: 'Poppins', sans-serif;
11 | display: flex;
12 | flex-wrap: wrap;
13 | margin: 0;
14 | padding-top: 3rem;
15 | }
16 |
17 | .add {
18 | position: fixed;
19 | top: 1rem;
20 | right: 1rem;
21 | background-color: #9ec862;
22 | color: #fff;
23 | border: none;
24 | border-radius: 3px;
25 | padding: 0.5rem 1rem;
26 | cursor: pointer;
27 | }
28 |
29 | .add:active {
30 | transform: scale(0.98);
31 | }
32 |
33 | .note {
34 | background-color: #fff;
35 | box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
36 | margin: 30px 20px;
37 | height: 400px;
38 | width: 400px;
39 | overflow-y: scroll;
40 | }
41 |
42 | .note .tools {
43 | background-color: #9ec862;
44 | display: flex;
45 | justify-content: flex-end;
46 | padding: 0.5rem;
47 | }
48 |
49 | .note .tools button {
50 | background-color: transparent;
51 | border: none;
52 | color: #fff;
53 | cursor: pointer;
54 | font-size: 1rem;
55 | margin-left: 0.5rem;
56 | }
57 |
58 | .note textarea {
59 | outline: none;
60 | font-family: inherit;
61 | font-size: 1.2rem;
62 | border: none;
63 | height: 400px;
64 | width: 100%;
65 | padding: 20px;
66 | }
67 |
68 | .main {
69 | padding: 20px;
70 | }
71 |
72 | .hidden {
73 | display: none;
74 | }
75 |
--------------------------------------------------------------------------------
/password-generator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Password Generator
9 |
10 |
11 |
12 |
Password Generator
13 |
14 |
16 |
18 |
19 |
41 |
42 |
43 | Generate Password
44 |
45 |
Password Strength Backround
14 |
15 |
16 |
17 |
18 |
Image Password Strength
19 |
Change the password to see the effect
20 |
21 | Email:
22 |
29 |
30 |
31 | Password:
32 |
39 |
40 |
44 | Submit
45 |
46 |
Pokedex
8 |
9 |
10 | Pokedex
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/pokedex/script.js:
--------------------------------------------------------------------------------
1 | const poke_container = document.getElementById('poke-container')
2 | const pokemon_count = 150
3 | const colors = {
4 | fire: '#FDDFDF',
5 | grass: '#DEFDE0',
6 | electric: '#FCF7DE',
7 | water: '#DEF3FD',
8 | ground: '#f4e7da',
9 | rock: '#d5d5d4',
10 | fairy: '#fceaff',
11 | poison: '#98d7a5',
12 | bug: '#f8d5a3',
13 | dragon: '#97b3e6',
14 | psychic: '#eaeda1',
15 | flying: '#F5F5F5',
16 | fighting: '#E6E0D4',
17 | normal: '#F5F5F5'
18 | }
19 |
20 | const main_types = Object.keys(colors)
21 |
22 | const fetchPokemons = async () => {
23 | for(let i = 1; i <= pokemon_count; i++) {
24 | await getPokemon(i)
25 | }
26 | }
27 |
28 | const getPokemon = async (id) => {
29 | const url = `https://pokeapi.co/api/v2/pokemon/${id}`
30 | const res = await fetch(url)
31 | const data = await res.json()
32 | createPokemonCard(data)
33 | }
34 |
35 | const createPokemonCard = (pokemon) => {
36 | const pokemonEl = document.createElement('div')
37 | pokemonEl.classList.add('pokemon')
38 |
39 | const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1)
40 | const id = pokemon.id.toString().padStart(3, '0')
41 |
42 | const poke_types = pokemon.types.map(type => type.type.name)
43 | const type = main_types.find(type => poke_types.indexOf(type) > -1)
44 | const color = colors[type]
45 |
46 | pokemonEl.style.backgroundColor = color
47 |
48 | const pokemonInnerHTML = `
49 |
50 |
51 |
53 | #${id}
54 |
${name}
55 | Type: ${type}
56 |
57 | `
58 |
59 | pokemonEl.innerHTML = pokemonInnerHTML
60 |
61 | poke_container.appendChild(pokemonEl)
62 | }
63 |
64 | fetchPokemons()
65 |
--------------------------------------------------------------------------------
/pokedex/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background: #efefbb;
9 | background: linear-gradient(to right, #d4d3dd, #efefbb);
10 | font-family: 'Lato', sans-serif;
11 | display: flex;
12 | flex-direction: column;
13 | align-items: center;
14 | justify-content: center;
15 | margin: 0;
16 | }
17 |
18 | h1 {
19 | letter-spacing: 3px;
20 | }
21 |
22 | .poke-container {
23 | display: flex;
24 | flex-wrap: wrap;
25 | align-items: space-between;
26 | justify-content: center;
27 | margin: 0 auto;
28 | max-width: 1200px;
29 | }
30 |
31 | .pokemon {
32 | background-color: #eee;
33 | border-radius: 10px;
34 | box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
35 | margin: 10px;
36 | padding: 20px;
37 | text-align: center;
38 | }
39 |
40 | .pokemon .img-container {
41 | background-color: rgba(255, 255, 255, 0.6);
42 | border-radius: 50%;
43 | width: 120px;
44 | height: 120px;
45 | text-align: center;
46 | }
47 |
48 | .pokemon .img-container img {
49 | max-width: 90%;
50 | margin-top: 20px;
51 | }
52 |
53 | .pokemon .info {
54 | margin-top: 20px;
55 | }
56 |
57 | .pokemon .info .number {
58 | background-color: rgba(0, 0, 0, 0.1);
59 | padding: 5px 10px;
60 | border-radius: 10px;
61 | font-size: 0.8em;
62 | }
63 |
64 | .pokemon .info .name {
65 | margin: 15px 0 7px;
66 | letter-spacing: 1px;
67 | }
68 |
--------------------------------------------------------------------------------
/progress-steps/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Progress Steps
8 |
9 |
10 |
11 |
12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
18 |
19 |
Prev
20 |
Next
21 |
Quiz App
8 |
9 |
10 |
11 |
35 | Submit
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/quiz-app/script.js:
--------------------------------------------------------------------------------
1 | const quizData = [
2 | {
3 | question: "Which language runs in a web browser?",
4 | a: "Java",
5 | b: "C",
6 | c: "Python",
7 | d: "JavaScript",
8 | correct: "d",
9 | },
10 | {
11 | question: "What does CSS stand for?",
12 | a: "Central Style Sheets",
13 | b: "Cascading Style Sheets",
14 | c: "Cascading Simple Sheets",
15 | d: "Cars SUVs Sailboats",
16 | correct: "b",
17 | },
18 | {
19 | question: "What does HTML stand for?",
20 | a: "Hypertext Markup Language",
21 | b: "Hypertext Markdown Language",
22 | c: "Hyperloop Machine Language",
23 | d: "Helicopters Terminals Motorboats Lamborginis",
24 | correct: "a",
25 | },
26 | {
27 | question: "What year was JavaScript launched?",
28 | a: "1996",
29 | b: "1995",
30 | c: "1994",
31 | d: "none of the above",
32 | correct: "b",
33 | },
34 | ];
35 |
36 | const quiz = document.getElementById('quiz')
37 | const answerEls = document.querySelectorAll('.answer')
38 | const questionEl = document.getElementById('question')
39 | const a_text = document.getElementById('a_text')
40 | const b_text = document.getElementById('b_text')
41 | const c_text = document.getElementById('c_text')
42 | const d_text = document.getElementById('d_text')
43 | const submitBtn = document.getElementById('submit')
44 |
45 | let currentQuiz = 0
46 | let score = 0
47 |
48 | loadQuiz()
49 |
50 | function loadQuiz() {
51 | deselectAnswers()
52 |
53 | const currentQuizData = quizData[currentQuiz]
54 |
55 | questionEl.innerText = currentQuizData.question
56 | a_text.innerText = currentQuizData.a
57 | b_text.innerText = currentQuizData.b
58 | c_text.innerText = currentQuizData.c
59 | d_text.innerText = currentQuizData.d
60 | }
61 |
62 | function deselectAnswers() {
63 | answerEls.forEach(answerEl => answerEl.checked = false)
64 | }
65 |
66 | function getSelected() {
67 | let answer
68 |
69 | answerEls.forEach(answerEl => {
70 | if(answerEl.checked) {
71 | answer = answerEl.id
72 | }
73 | })
74 |
75 | return answer
76 | }
77 |
78 | submitBtn.addEventListener('click', () => {
79 | const answer = getSelected()
80 |
81 | if(answer) {
82 | if(answer === quizData[currentQuiz].correct) {
83 | score++
84 | }
85 |
86 | currentQuiz++
87 |
88 | if(currentQuiz < quizData.length) {
89 | loadQuiz()
90 | } else {
91 | quiz.innerHTML = `
92 | You answered ${score}/${quizData.length} questions correctly
93 |
94 | Reload
95 | `
96 | }
97 | }
98 | })
--------------------------------------------------------------------------------
/quiz-app/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #b8c6db;
9 | background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
10 | font-family: 'Poppins', sans-serif;
11 | display: flex;
12 | align-items: center;
13 | justify-content: center;
14 | height: 100vh;
15 | overflow: hidden;
16 | margin: 0;
17 | }
18 |
19 | .quiz-container {
20 | background-color: #fff;
21 | border-radius: 10px;
22 | box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
23 | width: 600px;
24 | overflow: hidden;
25 | }
26 |
27 | .quiz-header {
28 | padding: 4rem;
29 | }
30 |
31 | h2 {
32 | padding: 1rem;
33 | text-align: center;
34 | margin: 0;
35 | }
36 |
37 | ul {
38 | list-style-type: none;
39 | padding: 0;
40 | }
41 |
42 | ul li {
43 | font-size: 1.2rem;
44 | margin: 1rem 0;
45 | }
46 |
47 | ul li label {
48 | cursor: pointer;
49 | }
50 |
51 | button {
52 | background-color: #8e44ad;
53 | color: #fff;
54 | border: none;
55 | display: block;
56 | width: 100%;
57 | cursor: pointer;
58 | font-size: 1.1rem;
59 | font-family: inherit;
60 | padding: 1.3rem;
61 | }
62 |
63 | button:hover {
64 | background-color: #732d91;
65 | }
66 |
67 | button:focus {
68 | outline: none;
69 | background-color: #5e3370;
70 | }
71 |
--------------------------------------------------------------------------------
/random-choice-picker/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Random Choice Picker
8 |
9 |
10 |
11 |
Enter all of the choices divided by a comma (',').
12 |
13 |
14 |
15 |
Random Image Feed
8 |
9 |
10 | Random Image Feed
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/random-image-generator/script.js:
--------------------------------------------------------------------------------
1 | const container = document.querySelector('.container')
2 | const unsplashURL = 'https://source.unsplash.com/random/'
3 | const rows = 5
4 |
5 | for(let i = 0; i < rows * 3; i++) {
6 | const img = document.createElement('img')
7 | img.src = `${unsplashURL}${getRandomSize()}`
8 | container.appendChild(img)
9 | }
10 |
11 | function getRandomSize() {
12 | return `${getRandomNr()}x${getRandomNr()}`
13 | }
14 |
15 | function getRandomNr() {
16 | return Math.floor(Math.random() * 10) + 300
17 | }
--------------------------------------------------------------------------------
/random-image-generator/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: 'Roboto', sans-serif;
9 | display: flex;
10 | flex-direction: column;
11 | align-items: center;
12 | justify-content: center;
13 | min-height: 100vh;
14 | margin: 0;
15 | }
16 |
17 | .title {
18 | margin: 10px 0 0;
19 | text-align: center;
20 | }
21 |
22 | .container {
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 | flex-wrap: wrap;
27 | max-width: 1000px;
28 | }
29 |
30 | .container img {
31 | object-fit: cover;
32 | margin: 10px;
33 | height: 300px;
34 | width: 300px;
35 | max-width: 100%;
36 | }
37 |
--------------------------------------------------------------------------------
/rotating-nav-animation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Rotating Navigation
9 |
10 |
11 |
12 |
13 |
14 |
15 |
17 |
18 |
20 |
21 |
22 |
23 |
24 |
Amazing Article
25 |
Florin Pop
26 |
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.
27 |
28 |
My Dog
29 |
30 |
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?
31 |
32 |
35 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/rotating-nav-animation/script.js:
--------------------------------------------------------------------------------
1 | const open = document.getElementById('open')
2 | const close = document.getElementById('close')
3 | const container = document.querySelector('.container')
4 |
5 | open.addEventListener('click', () => container.classList.add('show-nav'))
6 |
7 | close.addEventListener('click', () => container.classList.remove('show-nav'))
--------------------------------------------------------------------------------
/rotating-nav-animation/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: 'Lato', sans-serif;
9 | background-color: #333;
10 | color: #222;
11 | overflow-x: hidden;
12 | margin: 0;
13 | }
14 |
15 | .container {
16 | background-color: #fafafa;
17 | transform-origin: top left;
18 | transition: transform 0.5s linear;
19 | width: 100vw;
20 | min-height: 100vh;
21 | padding: 50px;
22 | }
23 |
24 | .container.show-nav {
25 | transform: rotate(-20deg);
26 | }
27 |
28 | .circle-container {
29 | position: fixed;
30 | top: -100px;
31 | left: -100px;
32 | }
33 |
34 | .circle {
35 | background-color: #ff7979;
36 | height: 200px;
37 | width: 200px;
38 | border-radius: 50%;
39 | position: relative;
40 | transition: transform 0.5s linear;
41 | }
42 |
43 | .container.show-nav .circle {
44 | transform: rotate(-70deg);
45 | }
46 |
47 | .circle button {
48 | cursor: pointer;
49 | position: absolute;
50 | top: 50%;
51 | left: 50%;
52 | height: 100px;
53 | background: transparent;
54 | border: 0;
55 | font-size: 26px;
56 | color: #fff;
57 | }
58 |
59 | .circle button:focus {
60 | outline: none;
61 | }
62 |
63 | .circle button#open {
64 | left: 60%;
65 | }
66 |
67 | .circle button#close {
68 | top: 60%;
69 | transform: rotate(90deg);
70 | transform-origin: top left;
71 | }
72 |
73 | .container.show-nav + nav li {
74 | transform: translateX(0);
75 | transition-delay: 0.3s;
76 | }
77 |
78 | nav {
79 | position: fixed;
80 | bottom: 40px;
81 | left: 0;
82 | z-index: 100;
83 | }
84 |
85 | nav ul {
86 | list-style-type: none;
87 | padding-left: 30px;
88 | }
89 |
90 | nav ul li {
91 | text-transform: uppercase;
92 | color: #fff;
93 | margin: 40px 0;
94 | transform: translateX(-100%);
95 | transition: transform 0.4s ease-in;
96 | }
97 |
98 | nav ul li i {
99 | font-size: 20px;
100 | margin-right: 10px;
101 | }
102 |
103 | nav ul li + li {
104 | margin-left: 15px;
105 | transform: translateX(-150%);
106 | }
107 |
108 | nav ul li + li + li {
109 | margin-left: 30px;
110 | transform: translateX(-200%);
111 | }
112 |
113 | nav a{
114 | color: #fafafa;
115 | text-decoration: none;
116 | transition: all 0.5s;
117 | }
118 |
119 | nav a:hover {
120 | color: #FF7979;
121 | font-weight: bold;
122 | }
123 |
124 | .content img {
125 | max-width: 100%;
126 | }
127 |
128 | .content {
129 | max-width: 1000px;
130 | margin: 50px auto;
131 | }
132 |
133 | .content h1 {
134 | margin: 0;
135 | }
136 |
137 | .content small {
138 | color: #555;
139 | font-style: italic;
140 | }
141 |
142 | .content p {
143 | color: #333;
144 | line-height: 1.5;
145 | }
146 |
--------------------------------------------------------------------------------
/scroll-animation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Scroll Animation
8 |
9 |
10 | Scroll to see the animation
11 |
Content
12 |
Content
13 |
Content
14 |
Content
15 |
Content
16 |
Content
17 |
Content
18 |
Content
19 |
Content
20 |
Content
21 |
Content
22 |
Content
23 |
Content
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/scroll-animation/script.js:
--------------------------------------------------------------------------------
1 | const boxes = document.querySelectorAll('.box')
2 |
3 | window.addEventListener('scroll', checkBoxes)
4 |
5 | checkBoxes()
6 |
7 | function checkBoxes() {
8 | const triggerBottom = window.innerHeight / 5 * 4
9 |
10 | boxes.forEach(box => {
11 | const boxTop = box.getBoundingClientRect().top
12 |
13 | if(boxTop < triggerBottom) {
14 | box.classList.add('show')
15 | } else {
16 | box.classList.remove('show')
17 | }
18 | })
19 | }
--------------------------------------------------------------------------------
/scroll-animation/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #efedd6;
9 | font-family: 'Roboto', sans-serif;
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | justify-content: center;
14 | margin: 0;
15 | overflow-x: hidden;
16 | }
17 |
18 | h1 {
19 | margin: 10px;
20 | }
21 |
22 | .box {
23 | background-color: steelblue;
24 | color: #fff;
25 | display: flex;
26 | align-items: center;
27 | justify-content: center;
28 | width: 400px;
29 | height: 200px;
30 | margin: 10px;
31 | border-radius: 10px;
32 | box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
33 | transform: translateX(400%);
34 | transition: transform 0.4s ease;
35 | }
36 |
37 | .box:nth-of-type(even) {
38 | transform: translateX(-400%);
39 | }
40 |
41 | .box.show {
42 | transform: translateX(0);
43 | }
44 |
45 | .box h2 {
46 | font-size: 45px;
47 | }
48 |
--------------------------------------------------------------------------------
/sound-board/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sound Board
8 |
9 |
10 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/sound-board/script.js:
--------------------------------------------------------------------------------
1 | const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong']
2 |
3 | sounds.forEach(sound => {
4 | const btn = document.createElement('button')
5 | btn.classList.add('btn')
6 |
7 | btn.innerText = sound
8 |
9 | btn.addEventListener('click', () => {
10 | stopSongs()
11 |
12 | document.getElementById(sound).play()
13 | })
14 |
15 | document.getElementById('buttons').appendChild(btn)
16 | })
17 |
18 | function stopSongs() {
19 | sounds.forEach(sound => {
20 | const song = document.getElementById(sound)
21 |
22 | song.pause()
23 | song.currentTime = 0;
24 | })
25 | }
--------------------------------------------------------------------------------
/sound-board/sounds/applause.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xprincedev/HTML-CSS-Training/e3bdf61cd13d7d07e11f816be8acb32df2134490/sound-board/sounds/applause.mp3
--------------------------------------------------------------------------------
/sound-board/sounds/boo.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xprincedev/HTML-CSS-Training/e3bdf61cd13d7d07e11f816be8acb32df2134490/sound-board/sounds/boo.mp3
--------------------------------------------------------------------------------
/sound-board/sounds/gasp.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xprincedev/HTML-CSS-Training/e3bdf61cd13d7d07e11f816be8acb32df2134490/sound-board/sounds/gasp.mp3
--------------------------------------------------------------------------------
/sound-board/sounds/tada.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xprincedev/HTML-CSS-Training/e3bdf61cd13d7d07e11f816be8acb32df2134490/sound-board/sounds/tada.mp3
--------------------------------------------------------------------------------
/sound-board/sounds/victory.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xprincedev/HTML-CSS-Training/e3bdf61cd13d7d07e11f816be8acb32df2134490/sound-board/sounds/victory.mp3
--------------------------------------------------------------------------------
/sound-board/sounds/wrong.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xprincedev/HTML-CSS-Training/e3bdf61cd13d7d07e11f816be8acb32df2134490/sound-board/sounds/wrong.mp3
--------------------------------------------------------------------------------
/sound-board/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: rgb(161, 100, 223);
9 | font-family: 'Poppins', sans-serif;
10 | display: flex;
11 | flex-wrap: wrap;
12 | align-items: center;
13 | justify-content: center;
14 | text-align: center;
15 | height: 100vh;
16 | overflow: hidden;
17 | margin: 0;
18 | }
19 |
20 | .btn {
21 | background-color: rebeccapurple;
22 | border-radius: 5px;
23 | border: none;
24 | color: #fff;
25 | margin: 1rem;
26 | padding: 1.5rem 3rem;
27 | font-size: 1.2rem;
28 | font-family: inherit;
29 | cursor: pointer;
30 | }
31 |
32 | .btn:hover {
33 | opacity: 0.9;
34 | }
35 |
36 | .btn:focus {
37 | outline: none;
38 | }
39 |
--------------------------------------------------------------------------------
/split-landing-page/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Split Landing Page
8 |
9 |
10 |
11 |
12 |
13 |
Playstation 5
14 |
Buy Now
15 |
16 |
17 |
XBox Series X
18 |
Buy Now
19 |
20 |
Sticky Navigation
8 |
9 |
10 |
11 |
20 |
21 |
22 |
23 |
24 |
Welcome To My Website
25 |
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?
26 |
27 |
30 | Content One
31 | 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!
32 |
33 | Content Two
34 | 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?
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/sticky-navigation/script.js:
--------------------------------------------------------------------------------
1 | const nav = document.querySelector('.nav')
2 | window.addEventListener('scroll', fixNav)
3 |
4 | function fixNav() {
5 | if(window.scrollY > nav.offsetHeight + 150) {
6 | nav.classList.add('active')
7 | } else {
8 | nav.classList.remove('active')
9 | }
10 | }
--------------------------------------------------------------------------------
/sticky-navigation/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans');
2 |
3 | * {
4 | box-sizing: border-box;
5 | margin: 0;
6 | padding: 0;
7 | }
8 |
9 | body {
10 | font-family: 'Open Sans', sans-serif;
11 | color: #222;
12 | padding-bottom: 50px;
13 | }
14 |
15 | .container {
16 | max-width: 1200px;
17 | margin: 0 auto;
18 | }
19 |
20 | .nav {
21 | position: fixed;
22 | background-color: #222;
23 | top: 0;
24 | left: 0;
25 | right: 0;
26 | transition: all 0.3s ease-in-out;
27 | }
28 |
29 | .nav .container {
30 | display: flex;
31 | justify-content: space-between;
32 | align-items: center;
33 | padding: 20px 0;
34 | transition: all 0.3s ease-in-out;
35 | }
36 |
37 | .nav ul {
38 | display: flex;
39 | list-style-type: none;
40 | align-items: center;
41 | justify-content: center;
42 | }
43 |
44 | .nav a {
45 | color: #fff;
46 | text-decoration: none;
47 | padding: 7px 15px;
48 | transition: all 0.3s ease-in-out;
49 | }
50 |
51 | .nav.active {
52 | background-color: #fff;
53 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
54 | }
55 |
56 | .nav.active a {
57 | color: #000;
58 | }
59 |
60 | .nav.active .container {
61 | padding: 10px 0;
62 | }
63 |
64 | .nav a.current,
65 | .nav a:hover {
66 | color: #c0392b;
67 | font-weight: bold;
68 | }
69 |
70 | .hero {
71 | background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
72 | background-repeat: no-repeat;
73 | background-size: cover;
74 | background-position: bottom center;
75 | height: 100vh;
76 | color: #fff;
77 | display: flex;
78 | justify-content: center;
79 | align-items: center;
80 | text-align: center;
81 | position: relative;
82 | margin-bottom: 20px;
83 | z-index: -2;
84 | }
85 |
86 | .hero::before {
87 | content: '';
88 | position: absolute;
89 | top: 0;
90 | left: 0;
91 | width: 100%;
92 | height: 100%;
93 | background-color: rgba(0, 0, 0, 0.5);
94 | z-index: -1;
95 | }
96 |
97 | .hero h1 {
98 | font-size: 46px;
99 | margin: -20px 0 20px;
100 | }
101 |
102 | .hero p {
103 | font-size: 20px;
104 | letter-spacing: 1px;
105 | }
106 |
107 | .content h2,
108 | .content h3 {
109 | font-size: 150%;
110 | margin: 20px 0;
111 | }
112 |
113 | .content p {
114 | color: #555;
115 | line-height: 30px;
116 | letter-spacing: 1.2px;
117 | }
118 |
--------------------------------------------------------------------------------
/testimonial-box-switcher/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Testimonial Box
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | I've worked with literally hundreds of HTML/CSS developers and I have to
22 | say the top spot goes to this guy. This guy is an amazing developer. He
23 | stresses on good, clean code and pays heed to the details. I love
24 | developers who respect each and every aspect of a throughly thought out
25 | design and do their best to put it in code. He goes over and beyond and
26 | transforms ART into PIXELS - without a glitch, every time.
27 |
28 |
29 |
34 |
35 |
Miyah Myles
36 |
Marketing
37 |
38 |
39 |
Theme Clock
8 |
9 |
10 |
11 |
12 | Dark mode
13 |
14 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/theme-clock/script.js:
--------------------------------------------------------------------------------
1 | const hourEl = document.querySelector('.hour')
2 | const minuteEl = document.querySelector('.minute')
3 | const secondEl = document.querySelector('.second')
4 | const timeEl = document.querySelector('.time')
5 | const dateEl = document.querySelector('.date')
6 | const toggle = document.querySelector('.toggle')
7 |
8 | const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
9 | const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
10 |
11 | toggle.addEventListener('click', (e) => {
12 | const html = document.querySelector('html')
13 | if (html.classList.contains('dark')) {
14 | html.classList.remove('dark')
15 | e.target.innerHTML = 'Dark mode'
16 | } else {
17 | html.classList.add('dark')
18 | e.target.innerHTML = 'Light mode'
19 | }
20 | })
21 |
22 | function setTime() {
23 | const time = new Date();
24 | const month = time.getMonth()
25 | const day = time.getDay()
26 | const date = time.getDate()
27 | const hours = time.getHours()
28 | const hoursForClock = hours >= 13 ? hours % 12 : hours;
29 | const minutes = time.getMinutes()
30 | const seconds = time.getSeconds()
31 | const ampm = hours >= 12 ? 'PM' : 'AM'
32 |
33 | hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`
34 | minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`
35 | secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`
36 |
37 | timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
38 | dateEl.innerHTML = `${days[day]}, ${months[month]} ${date} `
39 | }
40 |
41 | // StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
42 | const scale = (num, in_min, in_max, out_min, out_max) => {
43 | return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
44 | }
45 |
46 | setTime()
47 |
48 | setInterval(setTime, 1000)
49 |
--------------------------------------------------------------------------------
/theme-clock/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | :root {
8 | --primary-color: #000;
9 | --secondary-color: #fff;
10 | }
11 |
12 | html {
13 | transition: all 0.5s ease-in;
14 | }
15 |
16 | html.dark {
17 | --primary-color: #fff;
18 | --secondary-color: #333;
19 | }
20 |
21 | html.dark {
22 | background-color: #111;
23 | color: var(--primary-color);
24 | }
25 |
26 | body {
27 | font-family: 'Heebo', sans-serif;
28 | display: flex;
29 | align-items: center;
30 | justify-content: center;
31 | height: 100vh;
32 | overflow: hidden;
33 | margin: 0;
34 | }
35 |
36 | .toggle {
37 | cursor: pointer;
38 | background-color: var(--primary-color);
39 | color: var(--secondary-color);
40 | border: 0;
41 | border-radius: 4px;
42 | padding: 8px 12px;
43 | position: absolute;
44 | top: 100px;
45 | }
46 |
47 | .toggle:focus {
48 | outline: none;
49 | }
50 |
51 | .clock-container {
52 | display: flex;
53 | flex-direction: column;
54 | justify-content: space-between;
55 | align-items: center;
56 | }
57 |
58 | .clock {
59 | position: relative;
60 | width: 200px;
61 | height: 200px;
62 | }
63 |
64 | .needle {
65 | background-color: var(--primary-color);
66 | position: absolute;
67 | top: 50%;
68 | left: 50%;
69 | height: 65px;
70 | width: 3px;
71 | transform-origin: bottom center;
72 | transition: all 0.5s ease-in;
73 | }
74 |
75 | .needle.hour {
76 | transform: translate(-50%, -100%) rotate(0deg);
77 | }
78 |
79 | .needle.minute {
80 | transform: translate(-50%, -100%) rotate(0deg);
81 | height: 100px;
82 | }
83 |
84 | .needle.second {
85 | transform: translate(-50%, -100%) rotate(0deg);
86 | height: 100px;
87 | background-color: #e74c3c;
88 | }
89 |
90 | .center-point {
91 | background-color: #e74c3c;
92 | width: 10px;
93 | height: 10px;
94 | position: absolute;
95 | top: 50%;
96 | left: 50%;
97 | transform: translate(-50%, -50%);
98 | border-radius: 50%;
99 | }
100 |
101 | .center-point::after {
102 | content: '';
103 | background-color: var(--primary-color);
104 | width: 5px;
105 | height: 5px;
106 | position: absolute;
107 | top: 50%;
108 | left: 50%;
109 | transform: translate(-50%, -50%);
110 | border-radius: 50%;
111 | }
112 |
113 | .time {
114 | font-size: 60px;
115 | }
116 |
117 | .date {
118 | color: #aaa;
119 | font-size: 14px;
120 | letter-spacing: 0.3px;
121 | text-transform: uppercase;
122 | }
123 |
124 | .date .circle {
125 | background-color: var(--primary-color);
126 | color: var(--secondary-color);
127 | border-radius: 50%;
128 | height: 18px;
129 | width: 18px;
130 | display: inline-flex;
131 | align-items: center;
132 | justify-content: center;
133 | line-height: 18px;
134 | transition: all 0.5s ease-in;
135 | font-size: 12px;
136 | }
137 |
--------------------------------------------------------------------------------
/toast-notification/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Toast Notification
8 |
9 |
10 |
11 |
12 | Show Notification
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/toast-notification/script.js:
--------------------------------------------------------------------------------
1 | const button = document.getElementById('button')
2 | const toasts = document.getElementById('toasts')
3 |
4 | const messages = [
5 | 'Message One',
6 | 'Message Two',
7 | 'Message Three',
8 | 'Message Four',
9 | ]
10 |
11 | const types = ['info', 'success', 'error']
12 |
13 | button.addEventListener('click', () => createNotification())
14 |
15 | function createNotification(message = null, type = null) {
16 | const notif = document.createElement('div')
17 | notif.classList.add('toast')
18 | notif.classList.add(type ? type : getRandomType())
19 |
20 | notif.innerText = message ? message : getRandomMessage()
21 |
22 | toasts.appendChild(notif)
23 |
24 | setTimeout(() => {
25 | notif.remove()
26 | }, 3000)
27 | }
28 |
29 | function getRandomMessage() {
30 | return messages[Math.floor(Math.random() * messages.length)]
31 | }
32 |
33 | function getRandomType() {
34 | return types[Math.floor(Math.random() * types.length)]
35 | }
--------------------------------------------------------------------------------
/toast-notification/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: rebeccapurple;
9 | font-family: 'Poppins', sans-serif;
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | justify-content: center;
14 | height: 100vh;
15 | overflow: hidden;
16 | margin: 0;
17 | }
18 |
19 | .btn {
20 | background-color: #ffffff;
21 | color: rebeccapurple;
22 | font-family: inherit;
23 | font-weight: bold;
24 | padding: 1rem;
25 | border-radius: 5px;
26 | border: none;
27 | cursor: pointer;
28 | }
29 |
30 | .btn:focus {
31 | outline: none;
32 | }
33 |
34 | .btn:active {
35 | transform: scale(0.98);
36 | }
37 |
38 | #toasts {
39 | position: fixed;
40 | bottom: 10px;
41 | right: 10px;
42 | display: flex;
43 | flex-direction: column;
44 | align-items: flex-end;
45 | }
46 |
47 | .toast {
48 | background-color: #fff;
49 | border-radius: 5px;
50 | padding: 1rem 2rem;
51 | margin: 0.5rem;
52 | }
53 |
54 | .toast.info {
55 | color: rebeccapurple;
56 | }
57 |
58 | .toast.success {
59 | color: green;
60 | }
61 |
62 | .toast.error {
63 | color: red;
64 | }
65 |
--------------------------------------------------------------------------------
/todo-list/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Todo List
8 |
9 |
10 | todos
11 |
16 | Left click to toggle completed.
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/todo-list/script.js:
--------------------------------------------------------------------------------
1 | const form = document.getElementById('form')
2 | const input = document.getElementById('input')
3 | const todosUL = document.getElementById('todos')
4 |
5 | const todos = JSON.parse(localStorage.getItem('todos'))
6 |
7 | if(todos) {
8 | todos.forEach(todo => addTodo(todo))
9 | }
10 |
11 | form.addEventListener('submit', (e) => {
12 | e.preventDefault()
13 |
14 | addTodo()
15 | })
16 |
17 | function addTodo(todo) {
18 | let todoText = input.value
19 |
20 | if(todo) {
21 | todoText = todo.text
22 | }
23 |
24 | if(todoText) {
25 | const todoEl = document.createElement('li')
26 | if(todo && todo.completed) {
27 | todoEl.classList.add('completed')
28 | }
29 |
30 | todoEl.innerText = todoText
31 |
32 | todoEl.addEventListener('click', () => {
33 | todoEl.classList.toggle('completed')
34 | updateLS()
35 | })
36 |
37 | todoEl.addEventListener('contextmenu', (e) => {
38 | e.preventDefault()
39 |
40 | todoEl.remove()
41 | updateLS()
42 | })
43 |
44 | todosUL.appendChild(todoEl)
45 |
46 | input.value = ''
47 |
48 | updateLS()
49 | }
50 | }
51 |
52 | function updateLS() {
53 | todosEl = document.querySelectorAll('li')
54 |
55 | const todos = []
56 |
57 | todosEl.forEach(todoEl => {
58 | todos.push({
59 | text: todoEl.innerText,
60 | completed: todoEl.classList.contains('completed')
61 | })
62 | })
63 |
64 | localStorage.setItem('todos', JSON.stringify(todos))
65 | }
--------------------------------------------------------------------------------
/todo-list/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #f5f5f5;
9 | color: #444;
10 | font-family: 'Poppins', sans-serif;
11 | display: flex;
12 | flex-direction: column;
13 | align-items: center;
14 | justify-content: center;
15 | height: 100vh;
16 | margin: 0;
17 | }
18 |
19 | h1 {
20 | color: rgb(179, 131, 226);
21 | font-size: 10rem;
22 | text-align: center;
23 | opacity: 0.4;
24 | }
25 |
26 | form {
27 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
28 | max-width: 100%;
29 | width: 400px;
30 | }
31 |
32 | .input {
33 | border: none;
34 | color: #444;
35 | font-size: 2rem;
36 | padding: 1rem 2rem;
37 | display: block;
38 | width: 100%;
39 | }
40 |
41 | .input::placeholder {
42 | color: #d5d5d5;
43 | }
44 |
45 | .input:focus {
46 | outline-color: rgb(179, 131, 226);
47 | }
48 |
49 | .todos {
50 | background-color: #fff;
51 | padding: 0;
52 | margin: 0;
53 | list-style-type: none;
54 | }
55 |
56 | .todos li {
57 | border-top: 1px solid #e5e5e5;
58 | cursor: pointer;
59 | font-size: 1.5rem;
60 | padding: 1rem 2rem;
61 | }
62 |
63 | .todos li.completed {
64 | color: #b6b6b6;
65 | text-decoration: line-through;
66 | }
67 |
68 | small {
69 | color: #b5b5b5;
70 | margin-top: 3rem;
71 | text-align: center;
72 | }
73 |
--------------------------------------------------------------------------------
/verify-account-ui/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Verify Account
8 |
9 |
10 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/verify-account-ui/script.js:
--------------------------------------------------------------------------------
1 | const codes = document.querySelectorAll('.code')
2 |
3 | codes[0].focus()
4 |
5 | codes.forEach((code, idx) => {
6 | code.addEventListener('keydown', (e) => {
7 | if(e.key >= 0 && e.key <=9) {
8 | codes[idx].value = ''
9 | setTimeout(() => codes[idx + 1].focus(), 10)
10 | } else if(e.key === 'Backspace') {
11 | setTimeout(() => codes[idx - 1].focus(), 10)
12 | }
13 | })
14 | })
--------------------------------------------------------------------------------
/verify-account-ui/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');
2 | * {
3 | box-sizing: border-box;
4 | }
5 |
6 | body {
7 | background-color: #fbfcfe;
8 | font-family: 'Muli', sans-serif;
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | height: 100vh;
13 | overflow: hidden;
14 | margin: 0;
15 | }
16 |
17 | .container {
18 | background-color: #fff;
19 | border: 3px #000 solid;
20 | border-radius: 10px;
21 | padding: 30px;
22 | max-width: 1000px;
23 | text-align: center;
24 | }
25 |
26 | .code-container {
27 | display: flex;
28 | align-items: center;
29 | justify-content: center;
30 | margin: 40px 0;
31 | }
32 |
33 | .code {
34 | caret-color: transparent;
35 | border-radius: 5px;
36 | font-size: 75px;
37 | height: 120px;
38 | width: 100px;
39 | border: 1px solid #eee;
40 | margin: 1%;
41 | text-align: center;
42 | font-weight: 300;
43 | -moz-appearance: textfield;
44 | }
45 |
46 | .code::-webkit-outer-spin-button,
47 | .code::-webkit-inner-spin-button {
48 | -webkit-appearance: none;
49 | margin: 0;
50 | }
51 |
52 | .code:valid {
53 | border-color: #3498db;
54 | box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
55 | }
56 |
57 | .info {
58 | background-color: #eaeaea;
59 | display: inline-block;
60 | padding: 10px;
61 | line-height: 20px;
62 | max-width: 400px;
63 | color: #777;
64 | border-radius: 5px;
65 | }
66 |
67 | @media (max-width: 600px) {
68 | .code-container {
69 | flex-wrap: wrap;
70 | }
71 |
72 | .code {
73 | font-size: 60px;
74 | height: 80px;
75 | max-width: 70px;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
'
16 | title.innerHTML = 'Lorem ipsum dolor sit amet'
17 | excerpt.innerHTML =
18 | 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'
19 | profile_img.innerHTML =
20 | '
'
21 | name.innerHTML = 'John Doe'
22 | date.innerHTML = 'Oct 08, 2020'
23 |
24 | animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
25 | animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
26 | }
27 |
--------------------------------------------------------------------------------
/content-placeholder/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #ecf0f1;
9 | font-family: 'Roboto', sans-serif;
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | height: 100vh;
14 | overflow: hidden;
15 | margin: 0;
16 | }
17 |
18 | img {
19 | max-width: 100%;
20 | }
21 |
22 | .card {
23 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
24 | border-radius: 10px;
25 | overflow: hidden;
26 | width: 350px;
27 | }
28 |
29 | .card-header {
30 | height: 200px;
31 | }
32 |
33 | .card-header img {
34 | object-fit: cover;
35 | height: 100%;
36 | width: 100%;
37 | }
38 |
39 | .card-content {
40 | background-color: #fff;
41 | padding: 30px;
42 | }
43 |
44 | .card-title {
45 | height: 20px;
46 | margin: 0;
47 | }
48 |
49 | .card-excerpt {
50 | color: #777;
51 | margin: 10px 0 20px;
52 | }
53 |
54 | .author {
55 | display: flex;
56 | }
57 |
58 | .profile-img {
59 | border-radius: 50%;
60 | overflow: hidden;
61 | height: 40px;
62 | width: 40px;
63 | }
64 |
65 | .author-info {
66 | display: flex;
67 | flex-direction: column;
68 | justify-content: space-around;
69 | margin-left: 10px;
70 | width: 100px;
71 | }
72 |
73 | .author-info small {
74 | color: #aaa;
75 | margin-top: 5px;
76 | }
77 |
78 | .animated-bg {
79 | background-image: linear-gradient(
80 | to right,
81 | #f6f7f8 0%,
82 | #edeef1 10%,
83 | #f6f7f8 20%,
84 | #f6f7f8 100%
85 | );
86 | background-size: 200% 100%;
87 | animation: bgPos 1s linear infinite;
88 | }
89 |
90 | .animated-bg-text {
91 | border-radius: 50px;
92 | display: inline-block;
93 | margin: 0;
94 | height: 10px;
95 | width: 100%;
96 | }
97 |
98 | @keyframes bgPos {
99 | 0% {
100 | background-position: 50% 0;
101 | }
102 |
103 | 100% {
104 | background-position: -150% 0;
105 | }
106 | }
107 |
--------------------------------------------------------------------------------
/custom-range-slider/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5501
3 | }
--------------------------------------------------------------------------------
/custom-range-slider/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 
16 | Unhappy
17 | 
21 | Neutral
22 | 
26 | Satisfied
27 | 
15 | 
19 | 
23 | 
27 | 
13 | 
14 | 
15 | 
16 |
36 | 
16 |
17 | 
51 | 
30 | 
34 |