├── .github
└── ISSUE_TEMPLATE
│ ├── bug_report.md
│ └── feature_request.md
├── 30dayofJavascriptProject
├── Images
│ ├── AlarmClock.png
│ ├── Calculator.png
│ ├── Calender.png
│ ├── Captcha.png
│ ├── ColorPallat.png
│ ├── CountryGuide.png
│ ├── Dictionary.png
│ ├── FaviconFetcher.png
│ ├── FilterImage.png
│ ├── GradientGenerator.png
│ ├── ImageEditor.png
│ ├── ImageFilter.png
│ ├── LoginForm.png
│ ├── MathGame.png
│ ├── Meme.png
│ ├── ParrotColor.png
│ ├── ProductZoom.png
│ ├── ProfileCard.png
│ ├── QuizApp.png
│ ├── Quote.png
│ ├── RandomUser.png
│ ├── Recipe.png
│ ├── Scratch.png
│ ├── SimpleInterest.png
│ ├── Tictoetak.png
│ ├── TodoList.png
│ ├── TypingSpeed.png
│ └── clock.png
├── index.html
├── script.js
└── style.css
├── Alarm Clock
├── images.jpg
├── index.html
├── ringtone.mp3
├── script.js
└── style.css
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── Calculator
├── index.html
├── script.js
└── style.css
├── Calendar
├── index.html
├── index.js
└── style.css
├── Captcha in js
├── index.html
├── index.js
└── style.css
├── Color Palette Generator
├── app.js
├── index.html
└── style.css
├── Dictionary
├── index.html
├── index.js
└── style.css
├── Favicon Fetcher generator
├── index.html
├── index.js
└── style.css
├── Filter Gallery
├── index.html
└── style.css
├── Filter Image
├── index.html
└── index.js
├── Flag Game
├── index.html
├── script.js
└── style.css
├── Gradient Generator
├── index.html
├── index.js
└── style.css
├── ImageEditor
├── index.html
├── script.js
└── style.css
├── LICENSE
├── Login Form with js
├── index.css
├── index.html
└── index.js
├── Math Game
├── index.css
├── index.html
└── index.js
├── Memory Game
├── index.html
├── script.js
└── style.css
├── Parrot Color
├── index.html
├── script.js
└── style.css
├── Product Image Zoom
├── index.html
├── script.js
└── style.css
├── Profile Card
├── index.html
├── profile.png
├── script.js
└── style.css
├── Quiz App
├── index.html
├── script.js
└── style.css
├── README.md
├── Ramdom User cards
├── index.css
├── index.html
└── index.js
├── Random Mems App
├── index.css
├── index.html
└── index.js
├── Random quote genertor
├── index.html
├── script.js
└── style.css
├── Recipe App
├── index.html
├── index.js
└── style.css
├── Scratch Card
├── index.html
├── script.js
└── style.css
├── Simple Interest App
├── index.html
├── script.js
└── style.css
├── Tic tac toe game
├── index.html
├── script.js
└── style.css
├── Todo List
├── index.css
├── index.html
└── index.js
├── Typing speed Test
├── index.html
├── script.js
└── style.css
├── Weather App
├── index.html
├── key.js
├── script.js
└── style.css
├── clock
├── README.md
├── index.html
└── sytle.css
└── country Guide App
├── index.html
├── index.js
└── style.css
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 |
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Desktop (please complete the following information):**
27 | - OS: [e.g. iOS]
28 | - Browser [e.g. chrome, safari]
29 | - Version [e.g. 22]
30 |
31 | **Smartphone (please complete the following information):**
32 | - Device: [e.g. iPhone6]
33 | - OS: [e.g. iOS8.1]
34 | - Browser [e.g. stock browser, safari]
35 | - Version [e.g. 22]
36 |
37 | **Additional context**
38 | Add any other context about the problem here.
39 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 |
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 |
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 |
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 |
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/AlarmClock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/AlarmClock.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/Calculator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Calculator.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/Calender.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Calender.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/Captcha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Captcha.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/ColorPallat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ColorPallat.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/CountryGuide.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/CountryGuide.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/Dictionary.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Dictionary.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/FaviconFetcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/FaviconFetcher.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/FilterImage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/FilterImage.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/GradientGenerator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/GradientGenerator.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/ImageEditor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ImageEditor.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/ImageFilter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ImageFilter.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/LoginForm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/LoginForm.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/MathGame.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/MathGame.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/Meme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Meme.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/ParrotColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ParrotColor.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/ProductZoom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ProductZoom.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/ProfileCard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ProfileCard.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/QuizApp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/QuizApp.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/Quote.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Quote.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/RandomUser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/RandomUser.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/Recipe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Recipe.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/Scratch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Scratch.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/SimpleInterest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/SimpleInterest.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/Tictoetak.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Tictoetak.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/TodoList.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/TodoList.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/TypingSpeed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/TypingSpeed.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/Images/clock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/clock.png
--------------------------------------------------------------------------------
/30dayofJavascriptProject/script.js:
--------------------------------------------------------------------------------
1 | // Preloader
2 | var preloader = document.getElementById('loading');
3 |
4 | function loading(){
5 | setTimeout( myfunction,2000);
6 | }
7 | function myfunction(){
8 | preloader.style.display = 'none';
9 | }
10 |
11 |
12 | $(document).ready(function () {
13 | $(window).scroll(function () {
14 | if ($(this).scrollTop() >= 100) {
15 | $(".scrollToTop").fadeIn();
16 | } else {
17 | $(".scrollToTop").fadeOut();
18 | }
19 | });
20 | $(".scrollToTop").click(function (e) {
21 | e.preventDefault();
22 | $("html, body").animate({ scrollTop: 0 }, 500);
23 | return false;
24 | });
25 | });
26 |
27 | function toggleDarkLight() {
28 | var body = document.getElementById("body");
29 | var button = document.getElementById("toggle");
30 | if (button.innerHTML == "🌙") {
31 | button.innerHTML = "☀️";
32 | } else {
33 | button.innerHTML = "🌙";
34 | }
35 |
36 | var trans = () => {
37 | document.documentElement.classList.add("transition");
38 | window.setTimeout(() => {
39 | document.documentElement.classList.remove("transition");
40 | }, 500);
41 | };
42 |
43 | var currentClass = body.className;
44 | // body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
45 | if (currentClass == "dark-mode") {
46 | trans();
47 | body.className = "light-mode";
48 | } else {
49 | trans();
50 | body.className = "dark-mode";
51 | }
52 | }
53 |
54 | function search_project() {
55 | let input = document.getElementById('searchbar').value;
56 | input = input.toLowerCase();
57 | var x = document.getElementsByClassName('item');
58 |
59 | for (i = 0; i < x.length; i++) {
60 | if (!x[i].querySelector('a').innerHTML.toLowerCase().includes(input)) {
61 | x[i].style.display = "none";
62 | }
63 | else {
64 | x[i].style.display = "list-item";
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/30dayofJavascriptProject/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | list-style: none;
6 | }
7 |
8 | @font-face {
9 | font-family: "sans";
10 | src: url(font/sans.ttf);
11 | }
12 |
13 | body {
14 | font-family: "sans";
15 | }
16 |
17 | /* Preloader */
18 | #loading{
19 | position: fixed;
20 | width: 100%;
21 | height: 100vh;
22 | background: #1f1e1e url('./assets/js-preloader.gif');
23 | background-repeat: no-repeat;
24 | background-position: center;
25 | z-index: 99999;
26 | }
27 |
28 | img{
29 | width:100%;
30 | }
31 | /* Dark Mode */
32 | body.dark-mode {
33 | background-color: #111;
34 | color: #eee;
35 | }
36 |
37 | body.dark-mode a {
38 | color: #111;
39 | }
40 |
41 | body.dark-mode button {
42 | background-color: #eee;
43 | color: #111;
44 | }
45 |
46 | body.dark-mode h4 {
47 | color: #eee;
48 | }
49 |
50 | body.dark-mode svg {
51 | fill: #fff;
52 | color: #151513;
53 | }
54 |
55 | body.dark-mode input {
56 | color: white;
57 | }
58 |
59 | body.light-mode input {
60 | color: #111;
61 | }
62 |
63 | body.light-mode {
64 | background-color: #eee;
65 | color: #111;
66 | }
67 |
68 | body.light-mode a {
69 | color: #111;
70 | }
71 |
72 | body.light-mode button {
73 | background-color: #111;
74 | color: #eee;
75 | }
76 |
77 | body.light-mode h4 {
78 | color: #111;
79 | }
80 |
81 | body.light-mode svg {
82 | fill: #151513;
83 | color: #fff;
84 | }
85 |
86 | /* Octocat */
87 |
88 | .github-corner:hover .octo-arm {
89 | animation: octocat-wave 560ms ease-in-out;
90 | }
91 |
92 | @keyframes octocat-wave {
93 |
94 | 0%,
95 | 100% {
96 | transform: rotate(0);
97 | }
98 |
99 | 20%,
100 | 60% {
101 | transform: rotate(-25deg);
102 | }
103 |
104 | 40%,
105 | 80% {
106 | transform: rotate(10deg);
107 | }
108 | }
109 |
110 | @media (max-width: 500px) {
111 | .github-corner:hover .octo-arm {
112 | animation: none;
113 | }
114 |
115 | .github-corner .octo-arm {
116 | animation: octocat-wave 560ms ease-in-out;
117 | }
118 | }
119 |
120 | .toggleButton {
121 | position: absolute;
122 | top: 0;
123 | margin: 10px 3px 3px 10px;
124 | padding: 3px;
125 | border: none;
126 | border-radius: 50%;
127 | font-size: 30px;
128 | left: 0;
129 | }
130 |
131 | html.transition,
132 | html.transition *,
133 | html.transition *:before,
134 | html.transition *:after {
135 | transition: all 750ms !important;
136 | transition-delay: 0 !important;
137 | }
138 |
139 | h1 {
140 | text-align: center;
141 | font-size: 3.5rem;
142 | padding: 5vh 7vw;
143 | }
144 |
145 | @media only screen and (max-width: 658px) {
146 |
147 | h1 {
148 | font-size: 1.6em;
149 | padding: 32px 40px;
150 | }
151 |
152 | }
153 |
154 | h4 {
155 | padding: 2%;
156 | }
157 |
158 | img {
159 | max-width: 100%;
160 | border-radius: 10px 10px 0 0;
161 | height: 200px;
162 | }
163 |
164 | a {
165 | color: inherit;
166 | }
167 |
168 | a:visited {
169 | color: inherit;
170 | }
171 |
172 | .container {
173 | display: flex;
174 | flex-direction: row;
175 | font-size: 30px;
176 | text-align: center;
177 | }
178 |
179 | .item {
180 | flex: 50%;
181 | width: 90%;
182 | height: 100%;
183 | background-color: rgba(0, 0, 0, 0.4);
184 | box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
185 | border-radius: 10px;
186 | transition: transform .3s ease-in-out 0s;
187 | }
188 |
189 | .item:hover {
190 | transform: scale3d(1.05, 1.05, 1);
191 | /* border: 1px solid #ffffff; */
192 | filter: drop-shadow(10px);
193 | filter: contrast(110%);
194 | }
195 |
196 | .item h4 {
197 | font-size: 1.3rem;
198 | text-align: center;
199 | }
200 |
201 | .main {
202 | width: 90vw;
203 | display: grid;
204 | grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
205 | grid-gap: 24px;
206 | row-gap: 24px;
207 | margin: auto;
208 | }
209 |
210 | .main a {
211 | text-decoration: none;
212 | }
213 |
214 | footer {
215 | background-color: #19172e;
216 | text-align: center;
217 | color: white;
218 | font-size: 1rem;
219 | left: 0;
220 | right: 0;
221 | bottom: 0;
222 | margin-bottom: 0;
223 | padding: 10px;
224 | line-height: 3vh;
225 | margin-top: 30px;
226 | }
227 |
228 | footer a:visited {
229 | color: white;
230 |
231 | }
232 |
233 | @media (max-width: 800px) {
234 | .container {
235 | flex-direction: column;
236 | }
237 | }
238 |
239 | .scrollToTop {
240 | position: fixed;
241 | right: 10px;
242 | bottom: 10px;
243 | cursor: pointer;
244 | width: 40px;
245 | height: 40px;
246 | background-color: #5520b6;
247 | border-radius: 50%;
248 | }
249 |
250 | .scrollToTop span {
251 | position: absolute;
252 | top: 50%;
253 | left: 50%;
254 | margin-left: -8px;
255 | margin-top: -12px;
256 | border: 8px solid transparent;
257 | border-bottom-color: white;
258 | }
259 |
260 | .scrollToTop:hover {
261 | background-color: #5836D8;
262 | }
263 |
264 | input {
265 | border-radius: 3rem;
266 | padding: 10px;
267 | width: 15%;
268 | position: absolute;
269 | top: 6.5%;
270 | right: 7%;
271 | background: transparent;
272 | }
273 |
274 | @media(max-width:1000px) {
275 | input {
276 | position: relative;
277 | align-items: center;
278 | margin-bottom: 3%;
279 | left: 35%;
280 | width: 25%
281 | }
282 | }
--------------------------------------------------------------------------------
/Alarm Clock/images.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/Alarm Clock/images.jpg
--------------------------------------------------------------------------------
/Alarm Clock/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Alarm Clock
8 |
9 |
10 |
11 |
12 |
13 |
04:20:30 PM
14 |
15 |
16 |
17 | Hour
18 |
19 |
20 |
21 |
22 | Minute
23 |
24 |
25 |
26 |
27 | AM/PM
28 |
29 |
30 |
31 |
Set Alarm
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/Alarm Clock/ringtone.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/Alarm Clock/ringtone.mp3
--------------------------------------------------------------------------------
/Alarm Clock/script.js:
--------------------------------------------------------------------------------
1 | const currentTime=document.querySelector('h1'),
2 | content=document.querySelector('.content'),
3 | selectMenu=document.querySelectorAll('select'),
4 | setAlarmBtn=document.querySelector('button');
5 | let alarmTime, isAlarmSet = false,
6 | rigntone = new Audio("ringtone.mp3")
7 | for(let i=12; i>0; i--){
8 | i = i<10 ? "0" + i : i;
9 | let option = `${i} `;
10 | selectMenu[0].firstElementChild.insertAdjacentHTML('afterend',option);
11 | }
12 |
13 | for(let i=59; i>=0; i--){
14 | i = i<10 ? "0" + i : i;
15 | let option = `${i} `;
16 | selectMenu[1].firstElementChild.insertAdjacentHTML('afterend',option);
17 | }
18 |
19 | for(let i=2; i>0; i--){
20 | let ampm = i == 1 ? "AM" : "PM"
21 | let option = `${ampm} `;
22 | selectMenu[2].firstElementChild.insertAdjacentHTML('afterend',option);
23 | }
24 |
25 | setInterval(()=>{
26 | let date = new Date(),
27 | h = date.getHours(),
28 | m = date.getMinutes(),
29 | s = date.getSeconds(),
30 | ampm = "AM";
31 | if(h >= 12){
32 | h = h-12;
33 | ampm = "PM";
34 | }
35 | h = h == 0 ? h = 12 : h;
36 | h = h < 10 ? "0" + h : h;
37 | m = m < 10 ? "0" + m : m;
38 | s = s < 10 ? "0" + s : s;
39 | currentTime.innerText =`${h}:${m}:${s} ${ampm}`;
40 |
41 | if( alarmTime == `${h}:${m} ${ampm}`){
42 | rigntone.play();
43 | rigntone.loop = true;
44 | }
45 | }, 1000);
46 |
47 | function setAlarm(){
48 | if(isAlarmSet){
49 | alarmTime = "";
50 | rigntone.pause();
51 | content.classList.remove('disable');
52 | setAlarmBtn.innerText = "Set Alarm";
53 | return isAlarmSet = false;
54 | }
55 | let time = `${selectMenu[0].value}:${selectMenu[1].value}:${selectMenu[02].value}`
56 | if(time.includes("Hour")||time.includes("Minute")||time.includes("AM/PM")){
57 | return alert("Please, select a valid time to set Alarm!")
58 | }
59 | isAlarmSet = true;
60 | alarmTime = time;
61 | content.classList.add('disable');
62 | setAlarmBtn.innerText = "Clear Alarm"
63 | }
64 | setAlarmBtn.addEventListener('click',setAlarm)
--------------------------------------------------------------------------------
/Alarm Clock/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
2 | *{
3 | margin: 0;
4 | padding:0;
5 | box-sizing: border-box;
6 | font-family: 'Poppins',sans-serif;
7 | }
8 | body, .wrapper,.content{
9 | display:flex;
10 | align-items: center;
11 | justify-content: center;
12 | }
13 | body{
14 | min-height: 100vh;
15 | background: #4a98f7;
16 | }
17 | .wrapper{
18 | background: #fff;
19 | width:440px;
20 | border-radius: 10px;
21 | flex-direction: column;
22 | padding: 30px 30px 38px;
23 | }
24 | .wrapper img{
25 | min-height: 103px;
26 | }
27 | .wrapper h1{
28 | font-size: 38px;
29 | font-weight: 500;
30 | margin: 30px 0;
31 | }
32 | .wrapper .content{
33 | width:100%;
34 | justify-content: space-between;
35 |
36 | }
37 | .content .column{
38 | border-radius:5px;
39 | border:1px solid #999;
40 | width:calc(100%/3 - 5px);
41 | }
42 | .column select{
43 | outline: none;
44 | border: none;
45 | height:53px;
46 | width:100%;
47 | font-size: 19px;
48 | }
49 | .wrapper button{
50 | width:100%;
51 | margin-top: 20px;
52 | font-size: 20px;
53 | border:none;
54 | cursor: pointer;
55 | color:#fff;
56 | padding:17px 0;
57 | border-radius: 5px;
58 | background: #4a98f7;
59 | }
60 | .wrapper.content.disable{
61 | opacity: 0.6;
62 | pointer-events: none;
63 | }
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | .
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | When contributing to this repository, please first discuss the change you wish to make via issue,
4 | email, or any other method with the owners of this repository before making a change.
5 |
6 | Please note we have a code of conduct, please follow it in all your interactions with the project.
7 |
8 | ## Pull Request Process
9 |
10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a
11 | build.
12 | 2. Update the README.md with details of changes to the interface, this includes new environment
13 | variables, exposed ports, useful file locations and container parameters.
14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this
15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you
17 | do not have permission to do that, you may request the second reviewer to merge it for you.
18 |
19 | ## Code of Conduct
20 |
21 | ### Our Pledge
22 |
23 | In the interest of fostering an open and welcoming environment, we as
24 | contributors and maintainers pledge to making participation in our project and
25 | our community a harassment-free experience for everyone, regardless of age, body
26 | size, disability, ethnicity, gender identity and expression, level of experience,
27 | nationality, personal appearance, race, religion, or sexual identity and
28 | orientation.
29 |
30 | ### Our Standards
31 |
32 | Examples of behavior that contributes to creating a positive environment
33 | include:
34 |
35 | * Using welcoming and inclusive language
36 | * Being respectful of differing viewpoints and experiences
37 | * Gracefully accepting constructive criticism
38 | * Focusing on what is best for the community
39 | * Showing empathy towards other community members
40 |
41 | Examples of unacceptable behavior by participants include:
42 |
43 | * The use of sexualized language or imagery and unwelcome sexual attention or
44 | advances
45 | * Trolling, insulting/derogatory comments, and personal or political attacks
46 | * Public or private harassment
47 | * Publishing others' private information, such as a physical or electronic
48 | address, without explicit permission
49 | * Other conduct which could reasonably be considered inappropriate in a
50 | professional setting
51 |
52 | ### Our Responsibilities
53 |
54 | Project maintainers are responsible for clarifying the standards of acceptable
55 | behavior and are expected to take appropriate and fair corrective action in
56 | response to any instances of unacceptable behavior.
57 |
58 | Project maintainers have the right and responsibility to remove, edit, or
59 | reject comments, commits, code, wiki edits, issues, and other contributions
60 | that are not aligned to this Code of Conduct, or to ban temporarily or
61 | permanently any contributor for other behaviors that they deem inappropriate,
62 | threatening, offensive, or harmful.
63 |
64 | ### Scope
65 |
66 | This Code of Conduct applies both within project spaces and in public spaces
67 | when an individual is representing the project or its community. Examples of
68 | representing a project or community include using an official project e-mail
69 | address, posting via an official social media account, or acting as an appointed
70 | representative at an online or offline event. Representation of a project may be
71 | further defined and clarified by project maintainers.
72 |
73 | ### Enforcement
74 |
75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
76 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
77 | complaints will be reviewed and investigated and will result in a response that
78 | is deemed necessary and appropriate to the circumstances. The project team is
79 | obligated to maintain confidentiality with regard to the reporter of an incident.
80 | Further details of specific enforcement policies may be posted separately.
81 |
82 | Project maintainers who do not follow or enforce the Code of Conduct in good
83 | faith may face temporary or permanent repercussions as determined by other
84 | members of the project's leadership.
85 |
86 | ### Attribution
87 |
88 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
89 | available at [http://contributor-covenant.org/version/1/4][version]
90 |
91 | [homepage]: http://contributor-covenant.org
92 | [version]: http://contributor-covenant.org/version/1/4/
93 |
--------------------------------------------------------------------------------
/Calculator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Calculator
6 |
7 |
11 |
12 |
13 |
14 |
15 | Build by 💙 PREETI RAJ
16 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/Calculator/script.js:
--------------------------------------------------------------------------------
1 | let equal_pressed = 0;
2 | //Refer all buttons excluding AC and DEL
3 | let button_input = document.querySelectorAll(".input-button");
4 | //Refer input,equal,clear and erase
5 | let input = document.getElementById("input");
6 | let equal = document.getElementById("equal");
7 | let clear = document.getElementById("clear");
8 | let erase = document.getElementById("erase");
9 |
10 | window.onload = () => {
11 | input.value = "";
12 | };
13 |
14 | //Access each class using forEach
15 | button_input.forEach((button_class) => {
16 | button_class.addEventListener("click", () => {
17 | if (equal_pressed == 1) {
18 | input.value = "";
19 | equal_pressed = 0;
20 | }
21 | //display value of each button
22 | input.value += button_class.value;
23 | });
24 | });
25 |
26 | //Solve the user's input when clicked on equal sign
27 | equal.addEventListener("click", () => {
28 | equal_pressed = 1;
29 | let inp_val = input.value;
30 | try {
31 | //evaluate user's input
32 | let solution = eval(inp_val);
33 | //True for natural numbers
34 | //false for decimals
35 | if (Number.isInteger(solution)) {
36 | input.value = solution;
37 | } else {
38 | input.value = solution.toFixed(2);
39 | }
40 | } catch (err) {
41 | //If user has entered invalid input
42 | alert("Invalid Input");
43 | }
44 | });
45 |
46 | //Clear Whole Input
47 | clear.addEventListener("click", () => {
48 | input.value = "";
49 | });
50 | //Erase Single Digit
51 | erase.addEventListener("click", () => {
52 | input.value = input.value.substr(0, input.value.length - 1);
53 | });
--------------------------------------------------------------------------------
/Calculator/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Roboto Mono", monospace;
6 | }
7 | body {
8 | height: 150vh;
9 | background: linear-gradient(to bottom, #f9544c 50%, #090c31 50%);
10 | }
11 | .calculator {
12 | width: 400px;
13 | background-color: #15173c;
14 | padding: 50px 30px;
15 | position: absolute;
16 | transform: translate(-50%, -50%);
17 | top: 60%;
18 | left: 50%;
19 | border-radius: 8px;
20 | box-shadow: 0 20px 50px rgba(0, 5, 24, 0.4);
21 | }
22 | .display {
23 | width: 100%;
24 | }
25 | .display input {
26 | width: 100%;
27 | padding: 15px 10px;
28 | text-align: right;
29 | border: none;
30 | background-color: transparent;
31 | color: #ffffff;
32 | font-size: 35px;
33 | }
34 | .display input::placeholder {
35 | color: #9490ac;
36 | }
37 | .buttons {
38 | display: grid;
39 | grid-template-columns: repeat(4, 1fr);
40 | grid-gap: 20px;
41 | margin-top: 40px;
42 | }
43 | .buttons input[type="button"] {
44 | font-size: 20px;
45 | padding: 17px;
46 | border: none;
47 | background-color: transparent;
48 | color: #ffffff;
49 | cursor: pointer;
50 | border-radius: 5px;
51 | }
52 | .buttons input[type="button"]:hover {
53 | box-shadow: 0 8px 25px #000d2e;
54 | }
55 | input[type="button"]#equal {
56 | grid-row: span 2;
57 | background-color: #f9544c;
58 | }
59 | input[type="button"][value="0"] {
60 | grid-column: span 2;
61 | }
62 | #h1{
63 | text-align: center;
64 | margin:10px;
65 | }
--------------------------------------------------------------------------------
/Calendar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Pure CSS & JavaScript Calendar
9 |
10 |
11 |
12 |
13 |
14 |
15 | ❮
16 |
17 |
18 | ❯
19 |
20 |
21 |
22 |
23 | Su
24 | Mo
25 | Tu
26 | We
27 | Th
28 | Fr
29 | Sa
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/Calendar/index.js:
--------------------------------------------------------------------------------
1 | // set variables
2 | let today = new Date();
3 | let dayInt = today.getDate();
4 | let month = today.getMonth();
5 | let year = today.getFullYear();
6 | // body of the calendar
7 | let calendarBody = document.getElementById("days");
8 |
9 | let months = [
10 | "January",
11 | "February",
12 | "March",
13 | "April",
14 | "May",
15 | "June",
16 | "July",
17 | "August",
18 | "September",
19 | "October",
20 | "November",
21 | "December"
22 | ];
23 |
24 | // next and previous functionality
25 | let nextbtn = document.getElementById("next");
26 | let prevBtn = document.getElementById("prev");
27 |
28 | nextbtn.onclick = function() {
29 | next();
30 | };
31 | prevBtn.onclick = function() {
32 | previous();
33 | };
34 |
35 | // on select of date
36 | // let selectDay = document.getElementsByClassName("singleDay");
37 |
38 | // init calendar
39 | showCalendar(month, year);
40 |
41 | function showCalendar(month, year) {
42 | // gets the day of the week for this date
43 | let firstDay = new Date(year, month).getDay();
44 | // clearing all previous cells
45 | calendarBody.innerHTML = "";
46 | // checking the mount of days in this month to control the loop
47 | let totalDays = daysInMonth(month, year);
48 |
49 | // adding the blank boxes so that date start on correct day of the week
50 | blankDates(firstDay);
51 | // adding the dates to the calendar
52 | for (let day = 1; day <= totalDays; day++) {
53 | // create li node with text content & apend to body
54 | let cell = document.createElement("li");
55 | let cellText = document.createTextNode(day);
56 | // adding active class if day matches today
57 | if (
58 | dayInt === day &&
59 | month === today.getMonth() &&
60 | year === today.getFullYear()
61 | ) {
62 | cell.classList.add("active");
63 | }
64 |
65 | // appending date attributes to single date li element
66 | cell.setAttribute("data-day", day);
67 | cell.setAttribute("data-month", month);
68 | cell.setAttribute("data-year", year);
69 |
70 | //appending li to body of calendar
71 | cell.classList.add("singleDay");
72 | cell.appendChild(cellText);
73 | calendarBody.appendChild(cell);
74 | }
75 |
76 | // set month string value
77 | document.getElementById("month").innerHTML = months[month];
78 | // set year string value
79 | document.getElementById("year").innerHTML = year;
80 | }
81 |
82 | function daysInMonth(month, year) {
83 | // day 0 here returns the last day of the PREVIOUS month
84 | return new Date(year, month + 1, 0).getDate();
85 | }
86 |
87 | function blankDates(count) {
88 | // looping to add the correct amount of blank days to the calendar
89 | for (let x = 0; x < count; x++) {
90 | let cell = document.createElement("li");
91 | let cellText = document.createTextNode("");
92 | cell.appendChild(cellText);
93 | calendarBody.appendChild(cell);
94 | }
95 | }
96 |
97 | function next() {
98 | year = month === 11 ? year + 1 : year;
99 | month = (month + 1) % 12;
100 | showCalendar(month, year);
101 | }
102 |
103 | function previous() {
104 | year = month === 0 ? year - 1 : year;
105 | month = month === 0 ? 11 : month - 1;
106 | showCalendar(month, year);
107 | }
108 |
109 | // function select(d, m, y) {
110 | // document.getElementById("select").innerHTML = new Date(y, m, d);
111 | // }
112 |
--------------------------------------------------------------------------------
/Calendar/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 | ul {
5 | list-style-type: none;
6 | }
7 | body {
8 | font-family: Verdana, sans-serif;
9 | }
10 |
11 | #calendar {
12 | max-width: 600px;
13 | text-align: center;
14 | align-items: center;
15 | justify-content: center;
16 | margin:auto;
17 | }
18 |
19 | .month {
20 | padding: 70px 25px;
21 | width: 100%;
22 | background: #1abc9c;
23 | text-align: center;
24 | }
25 |
26 | .month ul {
27 | margin: 0;
28 | padding: 0;
29 | display: grid;
30 | grid-template-columns: 1fr 1fr 1fr 1fr;
31 | grid-template-rows: 1fr;
32 | }
33 |
34 | .month ul li {
35 | color: white;
36 | font-size: 20px;
37 | text-transform: uppercase;
38 | letter-spacing: 3px;
39 | }
40 |
41 | #weekdays {
42 | margin: 0;
43 | padding: 10px 0;
44 | background-color: #ddd;
45 | }
46 |
47 | #weekdays li {
48 | color: #666;
49 | text-align: center;
50 | }
51 |
52 | #days {
53 | padding: 10px 0;
54 | background: #eee;
55 | margin: 0;
56 | }
57 |
58 | #days li {
59 | list-style-type: none;
60 | text-align: center;
61 | font-size: 16px;
62 | color: #777;
63 | padding: 15px;
64 | border: 1px solid #ccc;
65 | }
66 |
67 | #days li.active {
68 | background: #1abc9c;
69 | color: white !important;
70 | }
71 |
72 | #next,
73 | #prev {
74 | cursor: pointer;
75 | }
76 |
77 | /* Add media queries for smaller screens */
78 | @media screen and (max-width: 720px) {
79 | .weekdays li,
80 | #days li {
81 | width: 13.1%;
82 | }
83 | }
84 |
85 | @media screen and (max-width: 420px) {
86 | .weekdays li,
87 | #days li {
88 | width: 12.5%;
89 | }
90 | #days li .active {
91 | padding: 2px;
92 | }
93 | }
94 |
95 | @media screen and (max-width: 290px) {
96 | .weekdays li,
97 | #days li {
98 | width: 12.2%;
99 | }
100 | }
101 |
102 | #days,
103 | #weekdays {
104 | display: grid;
105 | grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
106 | grid-template-rows: 1fr;
107 | }
108 |
109 | @media all and (-ms-high-contrast: none) {
110 | #days {
111 | display: -ms-grid;
112 | -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
113 | -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/Captcha in js/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Captcha Generator
6 |
7 |
11 |
12 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
32 |
Submit
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/Captcha in js/index.js:
--------------------------------------------------------------------------------
1 | //Initial References
2 | let submitButton = document.getElementById("submit-button");
3 | let userInput = document.getElementById("user-input");
4 | let canvas = document.getElementById("canvas");
5 | let reloadButton = document.getElementById("reload-button");
6 | let text = "";
7 |
8 | //Generate Text
9 | const textGenerator = () => {
10 | let generatedText = "";
11 | /* String.fromCharCode gives ASCII value from a given number */
12 | // total 9 letters hence loop of 3
13 | for (let i = 0; i < 3; i++) {
14 | //65-90 numbers are capital letters
15 | generatedText += String.fromCharCode(randomNumber(65, 90));
16 | //97-122 are small letters
17 | generatedText += String.fromCharCode(randomNumber(97, 122));
18 | //48-57 are numbers from 0-9
19 | generatedText += String.fromCharCode(randomNumber(48, 57));
20 | }
21 | return generatedText;
22 | };
23 |
24 | //Generate random numbers between a given range
25 | const randomNumber = (min, max) =>
26 | Math.floor(Math.random() * (max - min + 1) + min);
27 |
28 | //Canvas part
29 | function drawStringOnCanvas(string) {
30 | //The getContext() function returns the drawing context that has all the drawing properties and functions needed to draw on canvas
31 | let ctx = canvas.getContext("2d");
32 | //clear canvas
33 | ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
34 | //array of text color
35 | const textColors = ["rgb(0,0,0)", "rgb(130,130,130)"];
36 | //space between letters
37 | const letterSpace = 150 / string.length;
38 | //loop through string
39 | for (let i = 0; i < string.length; i++) {
40 | //Define initial space on X axis
41 | const xInitialSpace = 25;
42 | //Set font for canvas element
43 | ctx.font = "20px Roboto Mono";
44 | //set text color
45 | ctx.fillStyle = textColors[randomNumber(0, 1)];
46 | ctx.fillText(
47 | string[i],
48 | xInitialSpace + i * letterSpace,
49 | randomNumber(25, 40),
50 | 100
51 | );
52 | }
53 | }
54 |
55 | //Initial Function
56 | function triggerFunction() {
57 | //clear Input
58 | userInput.value = "";
59 | text = textGenerator();
60 | console.log(text);
61 | //Randomize the text so that everytime the position of numbers and small letters is random
62 | text = [...text].sort(() => Math.random() - 0.5).join("");
63 | drawStringOnCanvas(text);
64 | }
65 |
66 | //call triggerFunction for reload button
67 | reloadButton.addEventListener("click", triggerFunction);
68 |
69 | //call triggerFunction when page loads
70 | window.onload = () => triggerFunction();
71 |
72 | //When user clicks on submit
73 | submitButton.addEventListener("click", () => {
74 | //check if user input == generated text
75 | if (userInput.value === text) {
76 | alert("Success");
77 | } else {
78 | alert("Incorrect");
79 | triggerFunction();
80 | }
81 | });
--------------------------------------------------------------------------------
/Captcha in js/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 | body {
7 | height: 100vh;
8 | background: linear-gradient(135deg, #8052ec, #d161ff);
9 | }
10 | .container {
11 | width: 32em;
12 | background-color: #ffffff;
13 | padding: 5em;
14 | border-radius: 0.6em;
15 | position: absolute;
16 | transform: translate(-50%, -50%);
17 | top: 50%;
18 | left: 50%;
19 | box-shadow: 0 1em 2em rgba(0, 0, 0, 0.25);
20 | }
21 | .wrapper {
22 | display: flex;
23 | align-content: center;
24 | justify-content: space-between;
25 | margin: 1em 0;
26 | }
27 | canvas {
28 | border: 1px solid #000000;
29 | border-radius: 0.4em;
30 | }
31 | button#reload-button {
32 | font-size: 26px;
33 | width: 4.6em;
34 | background-color: #8052ec;
35 | border: none;
36 | border-radius: 0.4em;
37 | color: #ffffff;
38 | }
39 | input[type="text"] {
40 | font-family: "Roboto Mono", monospace;
41 | font-size: 1.05em;
42 | width: 100%;
43 | padding: 1em 0.7em;
44 | border: 1px solid #000000;
45 | border-radius: 0.4em;
46 | }
47 | button#submit-button {
48 | width: 100%;
49 | background-color: #8052ec;
50 | color: #ffffff;
51 | font-size: 1.5em;
52 | border: none;
53 | margin-top: 1em;
54 | padding: 0.8em 0;
55 | border-radius: 0.4em;
56 | font-family: "Roboto Mono", monospace;
57 | }
--------------------------------------------------------------------------------
/Color Palette Generator/app.js:
--------------------------------------------------------------------------------
1 | const colorBtn = document.querySelector('#btn-1');
2 | const boxes = document.querySelectorAll('.box');
3 |
4 | let running =false;
5 | function getRandomColor(){
6 | let letters = "0123456789ABCDEF";
7 | let color = "#";
8 | for(let i=0; i<6; i++){
9 | color += letters[Math.floor(Math.random()*16)];
10 | }
11 | return color;
12 | }
13 |
14 | function start(){
15 | if(running){
16 | boxes.forEach(color =>{
17 | color.style.background = getRandomColor();
18 | });
19 | setTimeout(start,500);
20 | }
21 | }
22 |
23 | colorBtn.addEventListener('click',function(){
24 | colorBtn.innerText = "STOP";
25 | if(running){
26 | running=false;
27 | colorBtn.innerText = "CHANGE COLOR";
28 | }else{
29 | running= true;
30 | start();
31 | }
32 | })
--------------------------------------------------------------------------------
/Color Palette Generator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Random Color Palatte Generator
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 | Change color
75 |
76 |
77 |
107 |
108 |
--------------------------------------------------------------------------------
/Color Palette Generator/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin:0;
3 | padding:0;
4 | box-sizing: border-box;
5 | font-family:Arial, Helvetica, sans-serif;
6 | }
7 | body{
8 | background: radial-gradient(circle,rgba(51,51,51,1)0%,rgba(29,19,19,1) 100%);
9 | }
10 |
11 | .container{
12 | display:flex;
13 | flex-direction: column;
14 | justify-content: center;
15 | align-items: center;
16 | margin:1rem auto;
17 | padding-top:1rem;
18 | color:#fff;
19 | }
20 | .btn{
21 | background: red;
22 | border:none;
23 | border-radius: 4px;
24 | font-size: 1.2rem;
25 | outline:none;
26 | cursor: pointer;
27 | color:#fff;
28 | width:200px;
29 | height:60px;
30 | }
31 | .btn:hover{
32 | background: transparent;
33 | border:2px solid red;
34 | transition:200ms;
35 | transform: scale(1.1);
36 | color:#fff;
37 | }
38 | .box-container{
39 | width:100%;
40 | height:100%;
41 | display:grid;
42 | grid-template-columns: repeat(12,1fr);
43 |
44 | }
45 | .box{
46 | padding:3rem;
47 | background: radial-gradient(circle,rgba(51,51,51,1)0%,rgba(29,19,19,1) 100%);
48 | }
--------------------------------------------------------------------------------
/Dictionary/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Dictionary
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Search
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Dictionary/index.js:
--------------------------------------------------------------------------------
1 | const url = "https://api.dictionaryapi.dev/api/v2/entries/en/";
2 | const result = document.getElementById("result");
3 | const sound = document.getElementById("sound");
4 | const btn = document.getElementById("search-btn");
5 |
6 | btn.addEventListener("click", () => {
7 | let inpWord = document.getElementById("inp-word").value;
8 | fetch(`${url}${inpWord}`)
9 | .then((response) => response.json())
10 | .then((data) => {
11 | console.log(data);
12 | result.innerHTML = `
13 |
14 |
${inpWord}
15 |
16 |
17 |
18 |
19 |
20 |
${data[0].meanings[0].partOfSpeech}
21 |
/${data[0].phonetic}/
22 |
23 |
24 | ${data[0].meanings[0].definitions[0].definition}
25 |
26 |
27 | ${data[0].meanings[0].definitions[0].example || ""}
28 |
`;
29 | sound.setAttribute("src", `https:${data[0].phonetics[0].audio}`);
30 | //console.log(sound)
31 | })
32 | .catch(() => {
33 | result.innerHTML = `Couldn't Find The Word `;
34 | });
35 | });
36 | function playSound() {
37 | sound.play();
38 | }
--------------------------------------------------------------------------------
/Dictionary/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 | *:not(i) {
7 | font-family: "Poppins", sans-serif;
8 | }
9 | body {
10 | background-color: #ae9cff;
11 | }
12 | .container {
13 | background-color: #ffffff;
14 | width: 90vmin;
15 | position: absolute;
16 | transform: translate(-50%, -50%);
17 | top: 50%;
18 | left: 50%;
19 | padding: 80px 50px;
20 | border-radius: 10px;
21 | box-shadow: 0 20px 40px rgba(38, 33, 61, 0.2);
22 | }
23 | .search-box {
24 | width: 100%;
25 | display: flex;
26 | justify-content: space-between;
27 | }
28 | .search-box input {
29 | padding: 5px;
30 | width: 70%;
31 | border: none;
32 | outline: none;
33 | border-bottom: 3px solid #ae9cff;
34 | font-size: 16px;
35 | }
36 | .search-box button {
37 | padding: 15px 0;
38 | width: 25%;
39 | background-color: #ae9cff;
40 | border: none;
41 | outline: none;
42 | color: #ffffff;
43 | border-radius: 5px;
44 | }
45 | .result {
46 | position: relative;
47 | }
48 | .result h3 {
49 | font-size: 30px;
50 | color: #1f194c;
51 | }
52 | .result .word {
53 | display: flex;
54 | justify-content: space-between;
55 | margin-top: 80px;
56 | }
57 | .result button {
58 | background-color: transparent;
59 | color: #ae9cff;
60 | border: none;
61 | outline: none;
62 | font-size: 18px;
63 | }
64 | .result .details {
65 | display: flex;
66 | gap: 10px;
67 | color: #b3b6d4;
68 | margin: 5px 0 20px 0;
69 | font-size: 14px;
70 | }
71 | .word-meaning {
72 | color: #575a7b;
73 | }
74 | .word-example {
75 | color: #575a7b;
76 | font-style: italic;
77 | border-left: 5px solid #ae9cff;
78 | padding-left: 20px;
79 | margin-top: 30px;
80 | }
81 | .error {
82 | margin-top: 80px;
83 | text-align: center;
84 | color:red;
85 | }
--------------------------------------------------------------------------------
/Favicon Fetcher generator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Favicon Fetcher
11 |
12 |
13 | Favicon Fetcher
14 |
15 |
16 |
17 |
18 | Press enter after typing a URL
19 |
20 |
21 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/Favicon Fetcher generator/index.js:
--------------------------------------------------------------------------------
1 | const img = document.querySelector('img');
2 | const input = document.querySelector('input');
3 |
4 | input.addEventListener('keydown', () =>{
5 | const favicon = `https://www.google.com/s2/favicons?sz=32&domain_url=${input.value}`;
6 | img.src = favicon;
7 | })
--------------------------------------------------------------------------------
/Favicon Fetcher generator/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-family: "sans";
6 | }
7 |
8 | @font-face {
9 | font-family: "sans";
10 | src: url(font/sans.ttf);
11 | }
12 |
13 | html,body{
14 | height: 100%;
15 | }
16 |
17 | body{
18 | display: flex;
19 | align-items: center;
20 | justify-content: center;
21 | background: #19172e;
22 | }
23 |
24 | h2 {
25 | position: absolute;
26 | top: 0;
27 | padding-top: 100px;
28 | color: white;
29 | font-size: 2rem;
30 | text-align: center;
31 | }
32 |
33 | h3{
34 | position: absolute;
35 | top: -70px;
36 | color: white;
37 | font-size: 1.3rem;
38 | text-align: center;
39 | }
40 |
41 | img{
42 | size:18px;
43 | margin-right: 1.2rem;
44 | }
45 |
46 | label{
47 | position: relative;
48 | }
49 |
50 | label input{
51 | font-size: 1rem;
52 | padding: 1rem ;
53 | border-radius: 0.2rem;
54 | }
55 |
56 | footer {
57 | background-color: #19172e;
58 | text-align: center;
59 | color: white;
60 | font-size: 1rem;
61 | position: absolute;
62 | left: 0;
63 | right: 0;
64 | bottom: 0;
65 | margin-bottom: 0;
66 | padding: 5px;
67 | line-height: 3vh;
68 | }
69 |
70 | footer a:visited {
71 | color: inherit;
72 | }
--------------------------------------------------------------------------------
/Filter Gallery/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 | Filter by PREETI RAJ
12 |
13 |
14 | All
15 | Mobile
16 | Camera
17 | Watch
18 | Shoe
19 | Headphone
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
71 |
72 |
--------------------------------------------------------------------------------
/Filter Gallery/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
2 | *{
3 | margin:0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | font-family: "Poppins",sans-serif;
7 | }
8 | h1{
9 | font-family: 'Montserrat',sans-serif;
10 | background-color: #f40303;
11 | -webkit-background-clip: text;
12 | background-clip: text;
13 | -webkit-text-fill-color: transparent;
14 | animation: text 7.5s linear infinite;
15 | text-align: center;
16 | }
17 | @keyframes text {
18 | from{background-position: 0% 50%;}
19 | to{background-position: 100% 100%;}
20 | }
21 | section{
22 | padding:20px;
23 | width:100%;
24 | display:flex;
25 | justify-content: center;
26 | align-items: center;
27 | flex-direction: column;
28 | margin:40px auto;
29 | }
30 | section ul{
31 | display:flex;
32 | justify-content: center;
33 | align-items: center;
34 | flex-wrap: wrap;
35 | margin-bottom:20px;
36 | }
37 | section ul li{
38 | list-style: none;
39 | background: #eee;
40 | padding: 12px 20px;
41 | margin:5px;
42 | letter-spacing: 1px;
43 | cursor: pointer;
44 | }
45 | section ul li.active{
46 | background: #03a9f4;
47 | color:#fff;
48 | }
49 |
50 | .product{
51 | display:flex;
52 | justify-content: center;
53 | align-items: center;
54 | flex-wrap: wrap;
55 | }
56 | .product .itemBox{
57 | position:relative;
58 | width:200px;
59 | height:200px;
60 | margin:5px;
61 | display:block;
62 | border-radius: 10px;
63 | box-shadow: 10px 10px 10px #0f0f0f;
64 | }
65 | .product .itemBox.hide{
66 | display:none;
67 | }
68 | .product .itemBox img{
69 | position:absolute;
70 | top:0;
71 | left:0;
72 | width:100%;
73 | height:100%;
74 | border-radius: 10px;
75 | /* object-fit: cover; */
76 | }
--------------------------------------------------------------------------------
/Filter Image/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Apply a Filter to Your Image
5 |
6 | Please, upload an image and apply the filter that best suits the image
7 |
8 |
9 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/Filter Image/index.js:
--------------------------------------------------------------------------------
1 | // hiding the div that will contain the images
2 | const imagesDiv = document.querySelector("#images");
3 |
4 | const fileInput = document.querySelector("#upload");
5 |
6 | let imageToFilter = null;
7 | const filteredImage = document.querySelector("#filteredImage");
8 |
9 | // initializing the filter value
10 | const filterElement = document.getElementsByName("filterRadio");
11 | let filter;
12 | filterElement.forEach((f) => {
13 | if (f.checked) filter = f.value;
14 | });
15 |
16 | // applying the selected filter
17 | filterElement.forEach((f) => {
18 | f.onclick = () => {
19 | filter = f.value;
20 | filteredImage.src = filterImage(imageToFilter, filter);
21 | };
22 | });
23 |
24 | fileInput.addEventListener("change", async (e) => {
25 | const [file] = fileInput.files;
26 |
27 | // displaying the uploaded image
28 | imageToFilter = document.querySelector("#imageToFilter");
29 | imageToFilter.src = await fileToDataUri(file);
30 |
31 | // making the div containing the image visible
32 | imagesDiv.style.visibility = "visible";
33 |
34 | // applying the defaul filter
35 | imageToFilter.addEventListener("load", () => {
36 | filteredImage.src = filterImage(imageToFilter, filter);
37 | });
38 |
39 | return false;
40 | });
41 |
42 | function fileToDataUri(field) {
43 | return new Promise((resolve) => {
44 | const reader = new FileReader();
45 |
46 | reader.addEventListener("load", () => {
47 | resolve(reader.result);
48 | });
49 |
50 | reader.readAsDataURL(field);
51 | });
52 | }
53 |
54 | function filterImage(imageToFilter, filter) {
55 | const canvas = document.createElement("canvas");
56 | const context = canvas.getContext("2d");
57 |
58 | const canvasWidth = imageToFilter.width;
59 | const canvasHeight = imageToFilter.height;
60 |
61 | canvas.width = canvasWidth;
62 | canvas.height = canvasHeight;
63 |
64 | context.drawImage(imageToFilter, 0, 0, canvasWidth, canvasHeight);
65 |
66 | const sourceImageData = context.getImageData(0, 0, canvasWidth, canvasHeight);
67 | const blankOutputImageData = context.createImageData(
68 | canvasWidth,
69 | canvasHeight
70 | );
71 |
72 | const outputImageData = applyFilter(
73 | sourceImageData,
74 | blankOutputImageData,
75 | filter
76 | );
77 |
78 | context.putImageData(outputImageData, 0, 0);
79 |
80 | return canvas.toDataURL();
81 | }
82 |
83 | function applyFilter(sourceImageData, outputImageData, filter) {
84 | if (filter === "noFilter") {
85 | return sourceImageData;
86 | } else if (filter === "threshold") {
87 | return applyThreshold(sourceImageData);
88 | } else if (filter === "sharpen") {
89 | return applyConvolution(sourceImageData, outputImageData, [
90 | 0,
91 | -1,
92 | 0,
93 | -1,
94 | 5,
95 | -1,
96 | 0,
97 | -1,
98 | 0
99 | ]);
100 | } else if (filter === "blur") {
101 | return applyConvolution(sourceImageData, outputImageData, [
102 | 1 / 16,
103 | 2 / 16,
104 | 1 / 16,
105 | 2 / 16,
106 | 4 / 16,
107 | 2 / 16,
108 | 1 / 16,
109 | 2 / 16,
110 | 1 / 16
111 | ]);
112 | } else {
113 | return sourceImageData;
114 | }
115 | }
116 |
117 | function applyThreshold(sourceImageData, threshold = 127) {
118 | const src = sourceImageData.data;
119 |
120 | for (let i = 0; i < src.length; i += 4) {
121 | const r = src[i];
122 | const g = src[i + 1];
123 | const b = src[i + 2];
124 | // thresholding the current value
125 | const v = 0.2126 * r + 0.7152 * g + 0.0722 * b >= threshold ? 255 : 0;
126 | src[i] = src[i + 1] = src[i + 2] = v;
127 | }
128 |
129 | return sourceImageData;
130 | }
131 |
132 | function applyConvolution(sourceImageData, outputImageData, kernel) {
133 | const src = sourceImageData.data;
134 | const dst = outputImageData.data;
135 |
136 | const srcWidth = sourceImageData.width;
137 | const srcHeight = sourceImageData.height;
138 |
139 | const side = Math.round(Math.sqrt(kernel.length));
140 | const halfSide = Math.floor(side / 2);
141 |
142 | // padding the output by the convolution kernel
143 | const w = srcWidth;
144 | const h = srcHeight;
145 |
146 | // iterating through the output image pixels
147 | for (let y = 0; y < h; y++) {
148 | for (let x = 0; x < w; x++) {
149 | let r = 0,
150 | g = 0,
151 | b = 0,
152 | a = 0;
153 |
154 | // calculating the weighed sum of the source image pixels that
155 | // fall under the convolution kernel
156 | for (let cy = 0; cy < side; cy++) {
157 | for (let cx = 0; cx < side; cx++) {
158 | const scy = y + cy - halfSide;
159 | const scx = x + cx - halfSide;
160 |
161 | if (scy >= 0 && scy < srcHeight && scx >= 0 && scx < srcWidth) {
162 | let srcOffset = (scy * srcWidth + scx) * 4;
163 | let wt = kernel[cy * side + cx];
164 | r += src[srcOffset] * wt;
165 | g += src[srcOffset + 1] * wt;
166 | b += src[srcOffset + 2] * wt;
167 | a += src[srcOffset + 3] * wt;
168 | }
169 | }
170 | }
171 |
172 | const dstOffset = (y * w + x) * 4;
173 |
174 | dst[dstOffset] = r;
175 | dst[dstOffset + 1] = g;
176 | dst[dstOffset + 2] = b;
177 | dst[dstOffset + 3] = a;
178 | }
179 | }
180 | return outputImageData;
181 | }
182 |
--------------------------------------------------------------------------------
/Flag Game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Flags Game
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
Drag & Drop The Flags Over Their Respective Country Names
17 |
18 |
19 |
20 |
21 |
22 |
Start Game
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/Flag Game/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Poppins", sans-serif;
6 | }
7 | body {
8 | background-color: #5372ef;
9 | }
10 | .container {
11 | width: 90%;
12 | max-width: 37.5em;
13 | background-color: #ffffff;
14 | padding: 3em 0.5em;
15 | position: absolute;
16 | transform: translate(-50%, -50%);
17 | top: 50%;
18 | left: 50%;
19 | border-radius: 0.8em;
20 | }
21 | h3 {
22 | text-align: center;
23 | width: 60%;
24 | margin: 0 auto 2em auto;
25 | font-size: 1.2em;
26 | font-weight: 600;
27 | letter-spacing: 0.03em;
28 | line-height: 1.8em;
29 | color: #010c39;
30 | }
31 | .draggable-objects,
32 | .drop-points {
33 | display: flex;
34 | justify-content: space-around;
35 | padding: 2em;
36 | }
37 | .draggable-image {
38 | width: 8em;
39 | cursor: move;
40 | }
41 | img {
42 | width: 8em;
43 | filter: drop-shadow(0 0.3em 0.9em rgba(0, 0, 0, 0.25));
44 | }
45 | .countries {
46 | width: 10em;
47 | height: 8em;
48 | display: grid;
49 | place-items: center;
50 | border: 0.25em dashed #010c39;
51 | border-radius: 0.8em;
52 | }
53 | .dropped {
54 | padding: 0;
55 | background-color: #e5ffc8;
56 | }
57 | .controls-container {
58 | position: absolute;
59 | display: flex;
60 | align-items: center;
61 | justify-content: center;
62 | height: 100%;
63 | width: 100%;
64 | background-color: #5372ef;
65 | flex-direction: column;
66 | top: 0;
67 | }
68 | .controls-container button {
69 | font-size: 1.12em;
70 | padding: 0.8em 1em;
71 | border-radius: 0.2em;
72 | border: none;
73 | outline: none;
74 | color: #010c39;
75 | letter-spacing: 0.06em;
76 | cursor: pointer;
77 | }
78 | .controls-container p {
79 | color: #ffffff;
80 | font-size: 2em;
81 | margin-bottom: 1em;
82 | }
83 | .hide {
84 | display: none;
85 | }
--------------------------------------------------------------------------------
/Gradient Generator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
13 | Gradient Generator
14 |
20 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
Generator
60 |
61 |
62 | Copy
63 |
64 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/Gradient Generator/index.js:
--------------------------------------------------------------------------------
1 | let colorOne =document.getElementById('color-a');
2 | let colorTwo = document.getElementById('color-b');
3 | let currentDirection = 'to bottom';
4 | let outputCode = document.getElementById('code');
5 |
6 | function setDirection(value,_this){
7 | let directions = document.querySelectorAll(".buttons button");
8 | // console.log(directions)
9 | for(let i of directions){
10 | i.classList.remove('active');
11 | }
12 | _this.classList.add('active');
13 | currentDirection =value;
14 | console.log(currentDirection);
15 | }
16 | function generateCode(){
17 | outputCode.value = `background-image:linear-gradient(${currentDirection},${colorOne.value},
18 | ${colorTwo.value});`
19 |
20 | document.getElementsByTagName("BODY")[0].style.backgroundImage = `linear-gradient(${currentDirection}
21 | ,${colorOne.value},${colorTwo.value})`;
22 | }
23 | function copyText(){
24 | outputCode.select();
25 | document.execCommand('copy');
26 | alert('Gradient Copied!');
27 | }
28 | generateCode();
29 | /*
30 |
31 | background-image:linear-gradient(to bottom,#c0cc14,
32 | #2bb13a);
33 | background-image:linear-gradient(to bottom left,#33cc14,
34 | #2b4cb1);
35 | */
--------------------------------------------------------------------------------
/Gradient Generator/style.css:
--------------------------------------------------------------------------------
1 | *,
2 | *:before,
3 | *:after{
4 | padding:0;
5 | margin:0;
6 | box-sizing: border-box;
7 | border:none;
8 | outline:none;
9 | }
10 | body{
11 | height:100vh;
12 |
13 | }
14 | .container{
15 | background-color: #ffffff;
16 | width:400px;
17 | padding:50px 30px;
18 | position:absolute;
19 | transform: translate(-50%,-50%);
20 | top:50%;
21 | left:50%;
22 | border-radius: 10px;
23 | box-shadow: 0 20px 25px rgba(0,0,0,0.25);
24 | }
25 | .container *:not(i){
26 | font-family: "Rubik",sans-serif;
27 | }
28 | .colors{
29 | width:100%;
30 | display:flex;
31 | justify-content: space-around;
32 | }
33 | input[type="color"]{
34 | -webkit-appearance: none;
35 | background-color: transparent;
36 | width:100px;
37 | height:45px;
38 | cursor: pointer;
39 | }
40 |
41 | input[type="color"]::-webkit-color-swatch{
42 | border-radius: 20px;
43 | border:none;
44 | }
45 | .buttons{
46 | width:100%;
47 | display:flex;
48 | justify-content: space-between;
49 | margin:30px 0;
50 | }
51 | .buttons button{
52 | height:35px;
53 | width:35px;
54 | background-color: transparent;
55 | border: 2px solid #d5d5dc;
56 | color:#d5d5dc;
57 | cursor: pointer;
58 | }
59 | .rotate-icon i{
60 | transform: rotate(45deg);
61 |
62 | }
63 | .buttons .active{
64 | border:none;
65 | background-color: #4a6ee0;
66 | color:#ffffff;
67 | }
68 | #submit{
69 | display:block;background-color: #4a6ee0;
70 | color:#ffffff;
71 | font-size:16px;
72 | padding:12px 70px;
73 | border-radius: 25px;
74 | margin:0 auto 30px auto;
75 | cursor: pointer;
76 | }
77 | .output{
78 | background-color: #f0f2fc;
79 |
80 | }
81 | #code{
82 | width:100%;
83 | resize: none;
84 | color:#30304a;
85 | padding:10px 20px;
86 | background-color: transparent;
87 | }
88 | #copy{
89 | font-size:14px;
90 | background-color:#4a6ee0;
91 | color:#ffffff;
92 | position:relative;
93 | left:85%;
94 | bottom:10px;
95 | border-radius: 3px;
96 | padding:5px;
97 | cursor: pointer;
98 | }
--------------------------------------------------------------------------------
/ImageEditor/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Image Editor
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
45 |
46 |
47 |
48 |
49 |
50 |
Choose An Image
51 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/ImageEditor/script.js:
--------------------------------------------------------------------------------
1 | let filterA = document.getElementById("blur");
2 | let filterB = document.getElementById("contrast");
3 | let filterC = document.getElementById("hue-rotate");
4 | let filterD = document.getElementById("sepia");
5 |
6 | let noFlipBtn = document.getElementById("no-flip");
7 | let flipXBtn = document.getElementById("flip-x");
8 | let flipYBtn = document.getElementById("flip-y");
9 |
10 | let uploadButton = document.getElementById("upload-button");
11 | let image = document.getElementById("chosen-image");
12 |
13 |
14 | function resetFilter(){
15 | filterA.value = "0";
16 | filterB.value = "100";
17 | filterC.value = "0";
18 | filterD.value = "0";
19 | noFlipBtn.checked = true;
20 | addFilter();
21 | flipImage();
22 | }
23 |
24 | uploadButton.onchange = () => {
25 | resetFilter();
26 | document.querySelector(".image-container").style.display = "block";
27 | let reader = new FileReader();
28 | reader.readAsDataURL(uploadButton.files[0]);
29 | reader.onload = () => {
30 | image.setAttribute("src", reader.result);
31 | }
32 | }
33 |
34 | let sliders = document.querySelectorAll(".filter input[type='range']");
35 | sliders.forEach( slider => {
36 | slider.addEventListener("input", addFilter);
37 | });
38 |
39 | function addFilter(){
40 | image.style.filter = `blur(${filterA.value}px) contrast(${filterB.value}%) hue-rotate(${filterC.value}deg) sepia(${filterD.value}%)`;
41 | }
42 |
43 | let radioBtns = document.querySelectorAll(".flip-option input[type='radio']");
44 | radioBtns.forEach( radioBtn => {
45 | radioBtn.addEventListener("click", flipImage);
46 | });
47 |
48 | function flipImage(){
49 | if(flipXBtn.checked){
50 | image.style.transform = "scaleX(-1)";
51 | }
52 | else if(flipYBtn.checked){
53 | image.style.transform = "scaleY(-1)";
54 | }
55 | else{
56 | image.style.transform = "scale(1,1)";
57 | }
58 | }
--------------------------------------------------------------------------------
/ImageEditor/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Rubik",sans-serif;
6 | }
7 | body{
8 | background-color: #d3e8f5;
9 | }
10 | .wrapper{
11 | width: 85vw;
12 | min-height: 50vmin;
13 | padding: 50px 30px;
14 | background-color: #ffffff;
15 | position: absolute;
16 | transform: translate(-50%,-50%);
17 | top: 50%;
18 | left: 50%;
19 | border-radius: 10px;
20 | box-shadow: 0 20px 35px rgba(0,0,0,0.15);
21 | display: grid;
22 | grid-template-columns: 5fr 7fr;
23 | }
24 | .editor{
25 | min-height: 35vmin;
26 | display: flex;
27 | flex-direction: column;
28 | justify-content: space-around;
29 | gap: 20px;
30 | }
31 | .editor label{
32 | font-size: 2.8vmin;
33 | color: #2a292a;
34 | font-weight: 400;
35 | }
36 | .editor input[type="range"]{
37 | display: block;
38 | width: 100%;
39 | position: relative;
40 | margin-top: 5px;
41 | }
42 | .flip-buttons{
43 | display: flex;
44 | flex-direction: column;
45 | margin-top: 10px;
46 | }
47 | .flip-buttons .flip-option{
48 | margin-top: 10px;
49 | }
50 | .result{
51 | position: relative;
52 | display: flex;
53 | flex-direction: column;
54 | justify-content: center;
55 | gap: 20px;
56 | }
57 | .result img{
58 | display: block;
59 | position: relative;
60 | max-width: calc(100% - 4vmin);
61 | max-height: 45vmin;
62 | margin: auto;
63 | }
64 | .image-container{
65 | display: none;
66 | }
67 | input[type="file"]{
68 | display: none;
69 | }
70 | .result label{
71 | display: block;
72 | position: relative;
73 | margin: 0 auto;
74 | width: 220px;
75 | background-color: #025bee;
76 | color: #ffffff;
77 | text-align: center;
78 | padding: 16px 0;
79 | border-radius: 5px;
80 | font-size: 2.8vmin;
81 | font-weight: 400;
82 | cursor: pointer;
83 | }
84 | @media screen and (max-width: 620px) {
85 | .wrapper{
86 | width: 95vw;
87 | grid-template-columns: 1fr;
88 | padding: 30px 20px;
89 | gap: 10px;
90 | }
91 | .editor{
92 | grid-row: 2;
93 | }
94 | .flip-buttons{
95 | flex-direction: row;
96 | justify-content: space-between;
97 | }
98 | .flip-buttons .flip-option{
99 | margin-top: 0;
100 | }
101 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Preeti Raj
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/Login Form with js/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Poppins", sans-serif;
6 | }
7 | body {
8 | background-color: #31d7f4;;
9 | }
10 | .container {
11 | height: 31.25em;
12 | width: 31.25em;
13 | position: absolute;
14 | transform: translate(-50%, -50%);
15 | top: 50%;
16 | left: 50%;
17 | }
18 | form {
19 | width: 23.75em;
20 | height: 18.75em;
21 | background-color: #ffffff;
22 | position: absolute;
23 | transform: translate(-50%, -50%);
24 | top: calc(50% + 3.1em);
25 | left: 50%;
26 | padding: 0 3.1em;
27 | display: flex;
28 | flex-direction: column;
29 | justify-content: center;
30 | border-radius: 0.5em;
31 | }
32 | form label {
33 | display: block;
34 | margin-bottom: 0.2em;
35 | font-weight: 600;
36 | color: #2e0d30;
37 | }
38 | form input {
39 | font-size: 0.95em;
40 | font-weight: 400;
41 | color: #3f3554;
42 | padding: 0.3em;
43 | border: none;
44 | border-bottom: 0.12em solid #3f3554;
45 | outline: none;
46 | }
47 | form input:focus {
48 | border-color: #31d7f4;
49 | }
50 | form input:not(:last-child) {
51 | margin-bottom: 0.9em;
52 | }
53 | form button {
54 | font-size: 0.95em;
55 | padding: 0.8em 0;
56 | border-radius: 2em;
57 | border: none;
58 | outline: none;
59 | background-color: #31d7f4;;
60 | color: #2e0d30;
61 | text-transform: uppercase;
62 | font-weight: 600;
63 | letter-spacing: 0.15em;
64 | margin-top: 0.8em;
65 | }
66 | .panda-face {
67 | height: 7.5em;
68 | width: 8.4em;
69 | background-color: #ffffff;
70 | border: 0.18em solid #2e0d30;
71 | border-radius: 7.5em 7.5em 5.62em 5.62em;
72 | position: absolute;
73 | top: 2em;
74 | margin: auto;
75 | left: 0;
76 | right: 0;
77 | }
78 | .ear-l,
79 | .ear-r {
80 | background-color: #3f3554;
81 | height: 2.5em;
82 | width: 2.81em;
83 | border: 0.18em solid #2e0d30;
84 | border-radius: 2.5em 2.5em 0 0;
85 | top: 1.75em;
86 | position: absolute;
87 | }
88 | .ear-l {
89 | transform: rotate(-38deg);
90 | left: 10.75em;
91 | }
92 | .ear-r {
93 | transform: rotate(38deg);
94 | right: 10.75em;
95 | }
96 | .blush-l,
97 | .blush-r {
98 | background-color: #ff8bb1;
99 | height: 1em;
100 | width: 1.37em;
101 | border-radius: 50%;
102 | position: absolute;
103 | top: 4em;
104 | }
105 | .blush-l {
106 | transform: rotate(25deg);
107 | left: 1em;
108 | }
109 | .blush-r {
110 | transform: rotate(-25deg);
111 | right: 1em;
112 | }
113 | .eye-l,
114 | .eye-r {
115 | background-color: #3f3554;
116 | height: 2.18em;
117 | width: 2em;
118 | border-radius: 2em;
119 | position: absolute;
120 | top: 2.18em;
121 | }
122 | .eye-l {
123 | left: 1.37em;
124 | transform: rotate(-20deg);
125 | }
126 | .eye-r {
127 | right: 1.37em;
128 | transform: rotate(20deg);
129 | }
130 | .eyeball-l,
131 | .eyeball-r {
132 | height: 0.6em;
133 | width: 0.6em;
134 | background-color: #ffffff;
135 | border-radius: 50%;
136 | position: absolute;
137 | left: 0.6em;
138 | top: 0.6em;
139 | transition: 1s all;
140 | }
141 | .eyeball-l {
142 | transform: rotate(20deg);
143 | }
144 | .eyeball-r {
145 | transform: rotate(-20deg);
146 | }
147 | .nose {
148 | height: 1em;
149 | width: 1em;
150 | background-color: #3f3554;
151 | position: absolute;
152 | top: 4.37em;
153 | margin: auto;
154 | left: 0;
155 | right: 0;
156 | border-radius: 1.2em 0 0 0.25em;
157 | transform: rotate(45deg);
158 | }
159 | .nose:before {
160 | content: "";
161 | position: absolute;
162 | background-color: #3f3554;
163 | height: 0.6em;
164 | width: 0.1em;
165 | transform: rotate(-45deg);
166 | top: 0.75em;
167 | left: 1em;
168 | }
169 | .mouth,
170 | .mouth:before {
171 | height: 0.75em;
172 | width: 0.93em;
173 | background-color: transparent;
174 | position: absolute;
175 | border-radius: 50%;
176 | box-shadow: 0 0.18em #3f3554;
177 | }
178 | .mouth {
179 | top: 5.31em;
180 | left: 3.12em;
181 | }
182 | .mouth:before {
183 | content: "";
184 | position: absolute;
185 | left: 0.87em;
186 | }
187 | .hand-l,
188 | .hand-r {
189 | background-color: #3f3554;
190 | height: 2.81em;
191 | width: 2.5em;
192 | border: 0.18em solid #2e0d30;
193 | border-radius: 0.6em 0.6em 2.18em 2.18em;
194 | transition: 1s all;
195 | position: absolute;
196 | top: 8.4em;
197 | }
198 | .hand-l {
199 | left: 7.5em;
200 | }
201 | .hand-r {
202 | right: 7.5em;
203 | }
204 | .paw-l,
205 | .paw-r {
206 | background-color: #3f3554;
207 | height: 3.12em;
208 | width: 3.12em;
209 | border: 0.18em solid #2e0d30;
210 | border-radius: 2.5em 2.5em 1.2em 1.2em;
211 | position: absolute;
212 | top: 26.56em;
213 | }
214 | .paw-l {
215 | left: 10em;
216 | }
217 | .paw-r {
218 | right: 10em;
219 | }
220 | .paw-l:before,
221 | .paw-r:before {
222 | position: absolute;
223 | content: "";
224 | background-color: #ffffff;
225 | height: 1.37em;
226 | width: 1.75em;
227 | top: 1.12em;
228 | left: 0.55em;
229 | border-radius: 1.56em 1.56em 0.6em 0.6em;
230 | }
231 | .paw-l:after,
232 | .paw-r:after {
233 | position: absolute;
234 | content: "";
235 | background-color: #ffffff;
236 | height: 0.5em;
237 | width: 0.5em;
238 | border-radius: 50%;
239 | top: 0.31em;
240 | left: 1.12em;
241 | box-shadow: 0.87em 0.37em #ffffff, -0.87em 0.37em #ffffff;
242 | }
243 | @media screen and (max-width: 500px) {
244 | .container {
245 | font-size: 14px;
246 | }
247 | }
248 | #h1{
249 | text-align: center;
250 | margin:20px;
251 | z-index:9;
252 | }
--------------------------------------------------------------------------------
/Login Form with js/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Interactive Panda Form
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
23 |
24 |
25 |
26 |
27 |
28 |
31 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Build by 💞 PREETI RAJ
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/Login Form with js/index.js:
--------------------------------------------------------------------------------
1 | let usernameRef = document.getElementById("username");
2 | let passwordRef = document.getElementById("password");
3 | let eyeL = document.querySelector(".eyeball-l");
4 | let eyeR = document.querySelector(".eyeball-r");
5 | let handL = document.querySelector(".hand-l");
6 | let handR = document.querySelector(".hand-r");
7 |
8 | let normalEyeStyle = () => {
9 | eyeL.style.cssText = `
10 | left:0.6em;
11 | top: 0.6em;
12 | `;
13 | eyeR.style.cssText = `
14 | right:0.6em;
15 | top:0.6em;
16 | `;
17 | };
18 |
19 | let normalHandStyle = () => {
20 | handL.style.cssText = `
21 | height: 2.81em;
22 | top:8.4em;
23 | left:7.5em;
24 | transform: rotate(0deg);
25 | `;
26 | handR.style.cssText = `
27 | height: 2.81em;
28 | top: 8.4em;
29 | right: 7.5em;
30 | transform: rotate(0deg)
31 | `;
32 | };
33 | //When clicked on username input
34 | usernameRef.addEventListener("focus", () => {
35 | eyeL.style.cssText = `
36 | left: 0.75em;
37 | top: 1.12em;
38 | `;
39 | eyeR.style.cssText = `
40 | right: 0.75em;
41 | top: 1.12em;
42 | `;
43 | normalHandStyle();
44 | });
45 | //When clicked on password input
46 | passwordRef.addEventListener("focus", () => {
47 | handL.style.cssText = `
48 | height: 6.56em;
49 | top: 3.87em;
50 | left: 11.75em;
51 | transform: rotate(-155deg);
52 | `;
53 | handR.style.cssText = `
54 | height: 6.56em;
55 | top: 3.87em;
56 | right: 11.75em;
57 | transform: rotate(155deg);
58 | `;
59 | normalEyeStyle();
60 | });
61 | //When clicked outside username and password input
62 | document.addEventListener("click", (e) => {
63 | let clickedElem = e.target;
64 | if (clickedElem != usernameRef && clickedElem != passwordRef) {
65 | normalEyeStyle();
66 | normalHandStyle();
67 | }
68 | });
--------------------------------------------------------------------------------
/Math Game/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Poppins", sans-serif;
6 | }
7 | body {
8 | background-color: #f4c531;
9 | }
10 | .container {
11 | background-color: #ffffff;
12 | width: 90%;
13 | max-width: 31.25em;
14 | position: absolute;
15 | transform: translate(-50%, -50%);
16 | top: 50%;
17 | left: 50%;
18 | padding: 5em 3em;
19 | border-radius: 0.5em;
20 | }
21 | .container h3 {
22 | font-size: 1.2em;
23 | color: #23234c;
24 | text-align: center;
25 | font-weight: 500;
26 | line-height: 1.8em;
27 | }
28 | .container #submit-btn {
29 | font-size: 1.2em;
30 | font-weight: 500;
31 | display: block;
32 | margin: 0 auto;
33 | background-color: #f4c531;
34 | border-radius: 0.3em;
35 | border: none;
36 | outline: none;
37 | cursor: pointer;
38 | color: #23234c;
39 | padding: 0.6em 2em;
40 | }
41 | #error-msg {
42 | text-align: center;
43 | margin-top: 1em;
44 | background-color: #ffdde0;
45 | color: #d62f2f;
46 | padding: 0.2em 0;
47 | }
48 | .container #question {
49 | background-color: #eeedf1;
50 | font-size: 2em;
51 | font-weight: 600;
52 | color: #23234c;
53 | text-align: center;
54 | display: flex;
55 | align-items: center;
56 | justify-content: center;
57 | margin: 1.4em 0 1em 0;
58 | padding: 1em 0;
59 | }
60 | .container input {
61 | font-size: 1em;
62 | font-weight: 600;
63 | width: 2.35em;
64 | color: #23234c;
65 | text-align: center;
66 | padding: 0 0.2em;
67 | border: none;
68 | background-color: transparent;
69 | border-bottom: 0.12em solid #23234c;
70 | margin: 0 0.25em;
71 | }
72 | .container input:focus {
73 | border-color: #f4c531;
74 | outline: none;
75 | }
76 | /*Hide Number Arrows*/
77 | .container input[type="number"] {
78 | -moz-appearance: textfield;
79 | }
80 | .container input[type="number"]::-webkit-outer-spin-button,
81 | .container input[type="number"]::-webkit-inner-spin-button {
82 | -webkit-appearance: none;
83 | margin: 0;
84 | }
85 | .controls-container {
86 | position: absolute;
87 | display: flex;
88 | align-items: center;
89 | justify-content: center;
90 | flex-direction: column;
91 | background-color: #f4c531;
92 | height: 100%;
93 | width: 100%;
94 | top: 0;
95 | }
96 | #start-btn {
97 | font-size: 1.2em;
98 | font-weight: 500;
99 | background-color: #ffffff;
100 | color: #23234c;
101 | border: none;
102 | outline: none;
103 | cursor: pointer;
104 | padding: 0.8em 1.8em;
105 | border-radius: 0.3em;
106 | }
107 | #result {
108 | margin-bottom: 1em;
109 | font-size: 1.5em;
110 | color: #23234c;
111 | }
112 | #result span {
113 | font-weight: 600;
114 | }
115 |
116 | .hide {
117 | display: none;
118 | }
119 | #h1{
120 | text-align: center;
121 | margin:20px;
122 | z-index:9;
123 | }
--------------------------------------------------------------------------------
/Math Game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Math Game
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
Fill In The Blank With Correct Number Or Operator
17 |
18 |
Submit
19 |
Some Demo Error Message
20 |
21 |
22 |
23 |
Start Game
24 |
Build by 💞 PREETI RAJ
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/Math Game/index.js:
--------------------------------------------------------------------------------
1 | let operators = ["+", "-", "*"];
2 | const startBtn = document.getElementById("start-btn");
3 | const question = document.getElementById("question");
4 | const controls = document.querySelector(".controls-container");
5 | const result = document.getElementById("result");
6 | const submitBtn = document.getElementById("submit-btn");
7 | const errorMessage = document.getElementById("error-msg");
8 | let answerValue;
9 | let operatorQuestion;
10 |
11 | //Random Value Generator
12 | const randomValue = (min, max) => Math.floor(Math.random() * (max - min)) + min;
13 |
14 | const questionGenerator = () => {
15 | //Two random values between 1 and 20
16 | let [num1, num2] = [randomValue(1, 20), randomValue(1, 20)];
17 |
18 | //For getting random operator
19 | let randomOperator = operators[Math.floor(Math.random() * operators.length)];
20 |
21 | if (randomOperator == "-" && num2 > num1) {
22 | [num1, num2] = [num2, num1];
23 | }
24 |
25 | //Solve equation
26 | let solution = eval(`${num1}${randomOperator}${num2}`);
27 |
28 | //For placing the input at random position
29 | //(1 for num1, 2 for num2, 3 for operator, anything else(4) for solution)
30 | let randomVar = randomValue(1, 5);
31 |
32 | if (randomVar == 1) {
33 | answerValue = num1;
34 | question.innerHTML = ` ${randomOperator} ${num2} = ${solution}`;
35 | } else if (randomVar == 2) {
36 | answerValue = num2;
37 | question.innerHTML = `${num1} ${randomOperator} = ${solution}`;
38 | } else if (randomVar == 3) {
39 | answerValue = randomOperator;
40 | operatorQuestion = true;
41 | question.innerHTML = `${num1} ${num2} = ${solution}`;
42 | } else {
43 | answerValue = solution;
44 | question.innerHTML = `${num1} ${randomOperator} ${num2} = `;
45 | }
46 |
47 | //User Input Check
48 | submitBtn.addEventListener("click", () => {
49 | errorMessage.classList.add("hide");
50 | let userInput = document.getElementById("inputValue").value;
51 | //If user input is not empty
52 | if (userInput) {
53 | //If the user guessed correct answer
54 | if (userInput == answerValue) {
55 | stopGame(`Yippie!! Correct Answer`);
56 | }
57 | //If user inputs operator other than +,-,*
58 | else if (operatorQuestion && !operators.includes(userInput)) {
59 | errorMessage.classList.remove("hide");
60 | errorMessage.innerHTML = "Please enter a valid operator";
61 | }
62 | //If user guessed wrong answer
63 | else {
64 | stopGame(`Opps!! Wrong Answer`);
65 | }
66 | }
67 | //If user input is empty
68 | else {
69 | errorMessage.classList.remove("hide");
70 | errorMessage.innerHTML = "Input Cannot Be Empty";
71 | }
72 | });
73 | };
74 |
75 | //Start Game
76 | startBtn.addEventListener("click", () => {
77 | operatorQuestion = false;
78 | answerValue = "";
79 | errorMessage.innerHTML = "";
80 | errorMessage.classList.add("hide");
81 | //Controls and buttons visibility
82 | controls.classList.add("hide");
83 | startBtn.classList.add("hide");
84 | questionGenerator();
85 | });
86 |
87 | //Stop Game
88 | const stopGame = (resultText) => {
89 | result.innerHTML = resultText;
90 | startBtn.innerText = "Restart";
91 | controls.classList.remove("hide");
92 | startBtn.classList.remove("hide");
93 | };
--------------------------------------------------------------------------------
/Memory Game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Memory Game
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
20 |
21 |
Stop Game
22 |
23 |
24 |
25 |
Start Game
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/Memory Game/script.js:
--------------------------------------------------------------------------------
1 | const moves = document.getElementById("moves-count");
2 | const timeValue = document.getElementById("time");
3 | const startButton = document.getElementById("start");
4 | const stopButton = document.getElementById("stop");
5 | const gameContainer = document.querySelector(".game-container");
6 | const result = document.getElementById("result");
7 | const controls = document.querySelector(".controls-container");
8 | let cards;
9 | let interval;
10 | let firstCard = false;
11 | let secondCard = false;
12 |
13 | //Items array
14 | const items = [
15 | { name: "bee", image: "bee.png" },
16 | { name: "crocodile", image: "crocodile.png" },
17 | { name: "macaw", image: "macaw.png" },
18 | { name: "gorilla", image: "gorilla.png" },
19 | { name: "tiger", image: "tiger.png" },
20 | { name: "monkey", image: "monkey.png" },
21 | { name: "chameleon", image: "chameleon.png" },
22 | { name: "piranha", image: "piranha.png" },
23 | { name: "anaconda", image: "anaconda.png" },
24 | { name: "sloth", image: "sloth.png" },
25 | { name: "cockatoo", image: "cockatoo.png" },
26 | { name: "toucan", image: "toucan.png" },
27 | ];
28 |
29 | //Initial Time
30 | let seconds = 0,
31 | minutes = 0;
32 | //Initial moves and win count
33 | let movesCount = 0,
34 | winCount = 0;
35 |
36 | //For timer
37 | const timeGenerator = () => {
38 | seconds += 1;
39 | //minutes logic
40 | if (seconds >= 60) {
41 | minutes += 1;
42 | seconds = 0;
43 | }
44 | //format time before displaying
45 | let secondsValue = seconds < 10 ? `0${seconds}` : seconds;
46 | let minutesValue = minutes < 10 ? `0${minutes}` : minutes;
47 | timeValue.innerHTML = `Time: ${minutesValue}:${secondsValue}`;
48 | };
49 |
50 | //For calculating moves
51 | const movesCounter = () => {
52 | movesCount += 1;
53 | moves.innerHTML = `Moves: ${movesCount}`;
54 | };
55 |
56 | //Pick random objects from the items array
57 | const generateRandom = (size = 4) => {
58 | //temporary array
59 | let tempArray = [...items];
60 | //initializes cardValues array
61 | let cardValues = [];
62 | //size should be double (4*4 matrix)/2 since pairs of objects would exist
63 | size = (size * size) / 2;
64 | //Random object selection
65 | for (let i = 0; i < size; i++) {
66 | const randomIndex = Math.floor(Math.random() * tempArray.length);
67 | cardValues.push(tempArray[randomIndex]);
68 | //once selected remove the object from temp array
69 | tempArray.splice(randomIndex, 1);
70 | }
71 | return cardValues;
72 | };
73 |
74 | const matrixGenerator = (cardValues, size = 4) => {
75 | gameContainer.innerHTML = "";
76 | cardValues = [...cardValues, ...cardValues];
77 | //simple shuffle
78 | cardValues.sort(() => Math.random() - 0.5);
79 | for (let i = 0; i < size * size; i++) {
80 | /*
81 | Create Cards
82 | before => front side (contains question mark)
83 | after => back side (contains actual image);
84 | data-card-values is a custom attribute which stores the names of the cards to match later
85 | */
86 | gameContainer.innerHTML += `
87 |
88 |
?
89 |
90 |
91 |
92 | `;
93 | }
94 | //Grid
95 | gameContainer.style.gridTemplateColumns = `repeat(${size},auto)`;
96 |
97 | //Cards
98 | cards = document.querySelectorAll(".card-container");
99 | cards.forEach((card) => {
100 | card.addEventListener("click", () => {
101 | //If selected card is not matched yet then only run (i.e already matched card when clicked would be ignored)
102 | if (!card.classList.contains("matched")) {
103 | //flip the cliked card
104 | card.classList.add("flipped");
105 | //if it is the firstcard (!firstCard since firstCard is initially false)
106 | if (!firstCard) {
107 | //so current card will become firstCard
108 | firstCard = card;
109 | //current cards value becomes firstCardValue
110 | firstCardValue = card.getAttribute("data-card-value");
111 | } else {
112 | //increment moves since user selected second card
113 | movesCounter();
114 | //secondCard and value
115 | secondCard = card;
116 | let secondCardValue = card.getAttribute("data-card-value");
117 | if (firstCardValue == secondCardValue) {
118 | //if both cards match add matched class so these cards would beignored next time
119 | firstCard.classList.add("matched");
120 | secondCard.classList.add("matched");
121 | //set firstCard to false since next card would be first now
122 | firstCard = false;
123 | //winCount increment as user found a correct match
124 | winCount += 1;
125 | //check if winCount ==half of cardValues
126 | if (winCount == Math.floor(cardValues.length / 2)) {
127 | result.innerHTML = `You Won
128 | Moves: ${movesCount} `;
129 | stopGame();
130 | }
131 | } else {
132 | //if the cards dont match
133 | //flip the cards back to normal
134 | let [tempFirst, tempSecond] = [firstCard, secondCard];
135 | firstCard = false;
136 | secondCard = false;
137 | let delay = setTimeout(() => {
138 | tempFirst.classList.remove("flipped");
139 | tempSecond.classList.remove("flipped");
140 | }, 900);
141 | }
142 | }
143 | }
144 | });
145 | });
146 | };
147 |
148 | //Start game
149 | startButton.addEventListener("click", () => {
150 | movesCount = 0;
151 | seconds = 0;
152 | minutes = 0;
153 | //controls amd buttons visibility
154 | controls.classList.add("hide");
155 | stopButton.classList.remove("hide");
156 | startButton.classList.add("hide");
157 | //Start timer
158 | interval = setInterval(timeGenerator, 1000);
159 | //initial moves
160 | moves.innerHTML = `Moves: ${movesCount}`;
161 | initializer();
162 | });
163 |
164 | //Stop game
165 | stopButton.addEventListener(
166 | "click",
167 | (stopGame = () => {
168 | controls.classList.remove("hide");
169 | stopButton.classList.add("hide");
170 | startButton.classList.remove("hide");
171 | clearInterval(interval);
172 | })
173 | );
174 |
175 | //Initialize values and func calls
176 | const initializer = () => {
177 | result.innerText = "";
178 | winCount = 0;
179 | let cardValues = generateRandom();
180 | console.log(cardValues);
181 | matrixGenerator(cardValues);
182 | };
--------------------------------------------------------------------------------
/Memory Game/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Poppins", sans-serif;
6 | }
7 | body {
8 | background-color: #f4c531;
9 | }
10 | .wrapper {
11 | box-sizing: content-box;
12 | width: 26.87em;
13 | padding: 2.5em 3em;
14 | background-color: #ffffff;
15 | position: absolute;
16 | transform: translate(-50%, -50%);
17 | left: 50%;
18 | top: 50%;
19 | border-radius: 0.6em;
20 | box-shadow: 0 0.9em 2.8em rgba(86, 66, 0, 0.2);
21 | }
22 | .game-container {
23 | position: relative;
24 | width: 100%;
25 | display: grid;
26 | gap: 0.6em;
27 | }
28 | .stats-container {
29 | text-align: right;
30 | margin-bottom: 1.2em;
31 | }
32 | .stats-container span {
33 | font-weight: 600;
34 | }
35 | .card-container {
36 | position: relative;
37 | width: 6.25em;
38 | height: 6.25em;
39 | cursor: pointer;
40 | }
41 | .card-before,
42 | .card-after {
43 | position: absolute;
44 | border-radius: 5px;
45 | width: 100%;
46 | height: 100%;
47 | display: flex;
48 | align-items: center;
49 | justify-content: center;
50 | border: 4px solid #000000;
51 | transition: transform 0.7s ease-out;
52 | backface-visibility: hidden;
53 | }
54 | .card-before {
55 | background-color: #f4c531;
56 | font-size: 2.8em;
57 | font-weight: 600;
58 | }
59 | .card-after {
60 | background-color: #ffffff;
61 | transform: rotateY(180deg);
62 | }
63 | .card-container.flipped .card-before {
64 | transform: rotateY(180deg);
65 | }
66 | .card-container.flipped .card-after {
67 | transform: rotateY(0deg);
68 | }
69 | .controls-container {
70 | position: absolute;
71 | display: flex;
72 | align-items: center;
73 | justify-content: center;
74 | flex-direction: column;
75 | width: 100%;
76 | height: 100%;
77 | background-color: #f4c531;
78 | top: 0;
79 | }
80 | button {
81 | border: none;
82 | border-radius: 0.3em;
83 | padding: 1em 1.5em;
84 | cursor: pointer;
85 | }
86 | #stop {
87 | font-size: 1.1em;
88 | display: block;
89 | margin: 1.1em auto 0 auto;
90 | background-color: #000000;
91 | color: #ffffff;
92 | }
93 | .controls-container button {
94 | font-size: 1.3em;
95 | box-shadow: 0 0.6em 2em rgba(86, 66, 0, 0.2);
96 | }
97 | .hide {
98 | display: none;
99 | }
100 | #result {
101 | text-align: center;
102 | }
103 | #result h2 {
104 | font-size: 2.5em;
105 | }
106 | #result h4 {
107 | font-size: 1.8em;
108 | margin: 0.6em 0 1em 0;
109 | }
--------------------------------------------------------------------------------
/Parrot Color/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Color The Parrot
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
26 |
29 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | Body
39 | Wing
40 | Wing Highlight
41 | Upper Beak
42 | Lower Beak
43 | Claw
44 | Tail Wing
45 | Head Wing
46 | Eye Patch
47 | Eye
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/Parrot Color/script.js:
--------------------------------------------------------------------------------
1 | let bodyBtn = document.getElementById("body-btn");
2 | let mainWingBtn = document.getElementById("main-wing-btn");
3 | let subWingBtn = document.getElementById("sub-wing-btn");
4 | let upperBeakBtn = document.getElementById("upper-beak-btn");
5 | let lowerBeakBtn = document.getElementById("lower-beak-btn");
6 | let clawBtn = document.getElementById("claw-btn");
7 | let tailWingBtn = document.getElementById("tail-wing-btn");
8 | let headWingBtn = document.getElementById("head-wing-btn");
9 | let eyePatchBtn = document.getElementById("eye-patch-btn");
10 | let eyeBtn = document.getElementById("eye-btn");
11 |
12 | let colors = [
13 | "#cd0000",
14 | "#f03800",
15 | "#ffb64c",
16 | "#ff9100",
17 | "#0095ff",
18 | "#1fbf66",
19 | "#ff4380",
20 | "#deecf1",
21 | "#714c2f",
22 | "#7fe881",
23 | "#f7006a",
24 | ];
25 |
26 | let counter1 = 0;
27 | let counter2 = 0;
28 | let counter3 = 0;
29 | let counter4 = 0;
30 | let counter5 = 0;
31 | let counter6 = 0;
32 | let counter7 = 0;
33 | let counter8 = 0;
34 | let counter9 = 0;
35 | let counter10 = 0;
36 |
37 | function setCounterValue(counter) {
38 | return counter < colors.length - 1 ? counter + 1 : 0;
39 | }
40 |
41 | bodyBtn.addEventListener("click", () => {
42 | document.querySelectorAll(".body-clr").forEach((item) => {
43 | item.style.backgroundColor = colors[counter1];
44 | });
45 | document.querySelector(".wing-color2-inner").style.borderTopColor =
46 | colors[counter1];
47 | counter1 = setCounterValue(counter1);
48 | });
49 | mainWingBtn.addEventListener("click", () => {
50 | document.querySelector(".wing-color1").style.backgroundColor =
51 | colors[counter2];
52 | counter2 = setCounterValue(counter2);
53 | });
54 | subWingBtn.addEventListener("click", () => {
55 | document.querySelector(".wing-color2").style.borderTopColor =
56 | colors[counter3];
57 | counter3 = setCounterValue(counter3);
58 | });
59 | upperBeakBtn.addEventListener("click", () => {
60 | document.querySelector(".beak-upper").style.backgroundColor =
61 | colors[counter4];
62 | counter4 = setCounterValue(counter4);
63 | });
64 | lowerBeakBtn.addEventListener("click", () => {
65 | document.querySelector(".beak-lower").style.backgroundColor =
66 | colors[counter5];
67 | counter5 = setCounterValue(counter5);
68 | });
69 | clawBtn.addEventListener("click", () => {
70 | document.querySelector(".leg").style.backgroundColor = colors[counter6];
71 | counter6 = setCounterValue(counter6);
72 | });
73 | tailWingBtn.addEventListener("click", () => {
74 | document
75 | .querySelectorAll(".tail-wing")
76 | .forEach((item) => (item.style.backgroundColor = colors[counter7]));
77 | counter7 = setCounterValue(counter7);
78 | });
79 | headWingBtn.addEventListener("click", () => {
80 | document.querySelector(".feather").style.backgroundColor = colors[counter8];
81 | counter8 = setCounterValue(counter8);
82 | });
83 | eyePatchBtn.addEventListener("click", () => {
84 | document.querySelector(".eye-patch").style.backgroundColor = colors[counter9];
85 | counter9 = setCounterValue(counter9);
86 | });
87 | eyeBtn.addEventListener("click", () => {
88 | document.querySelector(".eye").style.backgroundColor = colors[counter10];
89 | counter10 = setCounterValue(counter10);
90 | });
--------------------------------------------------------------------------------
/Parrot Color/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 | body {
7 | background-color: #ffb64c;
8 | }
9 | .container {
10 | width: 95vw;
11 | font-size: 16px;
12 | max-width: 53em;
13 | background-color: #ffffff;
14 | padding: 1.8em;
15 | position: absolute;
16 | transform: translate(-50%, -50%);
17 | top: 50%;
18 | left: 50%;
19 | display: grid;
20 | grid-template-columns: 1fr 2fr;
21 | border-radius: 0.9em;
22 | }
23 | .wrapper {
24 | min-height: 18.75em;
25 | min-width: 18.75em;
26 | z-index: 1;
27 | position: relative;
28 | border-radius: 0.9em 0.9em 0 0;
29 | }
30 | .controls {
31 | padding: 1.8em 0.6em 0 0.6em;
32 | display: grid;
33 | grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
34 | grid-gap: 1.2em;
35 | align-items: center;
36 | border-left: 2px dashed #000000;
37 | }
38 | .controls button {
39 | font-size: 1em;
40 | height: 3em;
41 | border-radius: 1.5em;
42 | border: none;
43 | background-color: #ffb64c;
44 | font-family: "Poppins", sans-serif;
45 | }
46 | .parrot {
47 | background-color: #f03800;
48 | height: 9.3em;
49 | width: 5em;
50 | position: absolute;
51 | margin: auto;
52 | left: 0;
53 | right: 0;
54 | top: -3.75em;
55 | bottom: 0;
56 | border-radius: 2.8em 0.9em;
57 | }
58 | .tail1 {
59 | position: absolute;
60 | height: 3.75em;
61 | width: 1.75em;
62 | background-color: #cd0000;
63 | border-radius: 0 0 1.25em 0.3em;
64 | bottom: -2.8em;
65 | z-index: -1;
66 | }
67 | .tail2 {
68 | position: absolute;
69 | height: 3.75em;
70 | width: 1.75em;
71 | background-color: #cd0000;
72 | border-radius: 0 0 3em 0;
73 | bottom: -1.8em;
74 | left: 1.5em;
75 | z-index: -1;
76 | }
77 | .wing {
78 | background-color: #f03800;
79 | height: 6.8em;
80 | width: 3.75em;
81 | border-radius: 3.1em 0.6em;
82 | position: absolute;
83 | left: -0.9em;
84 | top: 3.1em;
85 | overflow: hidden;
86 | z-index: 1;
87 | }
88 | .wing-color1 {
89 | position: absolute;
90 | content: "";
91 | background-color: #0095ff;
92 | height: 60%;
93 | width: 100%;
94 | bottom: 0;
95 | }
96 | .wing-color2 {
97 | height: 0;
98 | width: 0;
99 | border-top: 1.87em solid #ffb64c;
100 | border-left: 1.87em solid transparent;
101 | border-right: 1.87em solid transparent;
102 | position: absolute;
103 | top: 2.7em;
104 | margin: auto;
105 | left: 0;
106 | right: 0;
107 | }
108 | .wing-color2-inner {
109 | position: absolute;
110 | border-top: 1.56em solid #f03800;
111 | border-left: 1.5em solid transparent;
112 | border-right: 1.5em solid transparent;
113 | right: -1.5em;
114 | bottom: 1.2em;
115 | }
116 | .eye-patch {
117 | height: 3.75em;
118 | width: 70%;
119 | background-color: #deecf1;
120 | border-radius: 3.1em 1.25em 1.25em 3.1em;
121 | position: absolute;
122 | right: -1px;
123 | top: 0;
124 | z-index: 2;
125 | }
126 | .eye {
127 | position: absolute;
128 | height: 0.9em;
129 | width: 0.9em;
130 | background-color: #714c2f;
131 | border-radius: 50%;
132 | margin: auto;
133 | left: 0;
134 | right: 0;
135 | bottom: 1.56em;
136 | }
137 | .beak-upper {
138 | position: absolute;
139 | height: 3.75em;
140 | width: 3.75em;
141 | background-color: #ffb64c;
142 | z-index: -1;
143 | right: -3em;
144 | border-radius: 0 3.4em 0.3em 0;
145 | }
146 | .beak-lower {
147 | position: absolute;
148 | background-color: #ff9100;
149 | height: 1.56em;
150 | width: 1.56em;
151 | left: 0.7em;
152 | bottom: -1.56em;
153 | border-radius: 0 0 1.56em 0;
154 | }
155 | .feather {
156 | background-color: #cd0000;
157 | height: 3.1em;
158 | width: 6.25em;
159 | border-radius: 0.6em 0 0 6.25em;
160 | position: absolute;
161 | z-index: -1;
162 | left: -1.87em;
163 | }
164 | .leg {
165 | background-color: #ff9100;
166 | height: 2.1em;
167 | width: 4.37em;
168 | border-radius: 0 4.37em 0.6em 0.6em;
169 | position: absolute;
170 | z-index: -2;
171 | bottom: 0;
172 | left: 1.2em;
173 | }
174 | .branch {
175 | background-color: #ffb64c;
176 | height: 0.5em;
177 | width: 13.12em;
178 | position: absolute;
179 | right: -3.4em;
180 | bottom: -0.5em;
181 | border-radius: 0.5em;
182 | }
183 | @media screen and (max-width: 750px) {
184 | .container {
185 | grid-template-columns: 1fr;
186 | }
187 | .controls {
188 | border: none;
189 | border-top: 2px dashed #000000;
190 | }
191 | .controls button {
192 | font-size: 0.9em;
193 | height: 3em;
194 | }
195 | }
--------------------------------------------------------------------------------
/Product Image Zoom/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Product Image Zoom
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/Product Image Zoom/script.js:
--------------------------------------------------------------------------------
1 | //Initial References
2 | let imageContainer = document.getElementById("image-container");
3 | let productImage = document.getElementById("product-image");
4 | let overlay = document.getElementById("overlay");
5 | let mouseOverlay = document.getElementById("mouse-overlay");
6 |
7 | //events object(stores events for touch,mouse)
8 | let events = {
9 | mouse: {
10 | move: "mousemove",
11 | },
12 | touch: {
13 | move: "touchmove",
14 | },
15 | };
16 |
17 | //initially blank
18 | let deviceType = "";
19 |
20 | //Checks for device type
21 | function isTouchDevice() {
22 | try {
23 | //We try to create touch event (it would fail for desktops and throw error)
24 | deviceType = "touch";
25 | document.createEvent("TouchEvent");
26 | return true;
27 | } catch (e) {
28 | deviceType = "mouse";
29 | return false;
30 | }
31 | }
32 |
33 | //hides overlay
34 | const hideElement = () => {
35 | overlay.style.display = "none";
36 | mouseOverlay.style.display = "none";
37 | };
38 |
39 | //Check device so that deviceType variable is set to touch or mouse
40 | isTouchDevice();
41 |
42 | /*In addEventListener we use the events object to set the event so deviceType would be set to touch or mouse since we called 'isTouchDevice()' above
43 | E.g:
44 | if deviceType = "mouse" => the statement for event would be events[mouse].move which equals to mousemove.
45 | if deviceType = "touch" => the statement for event would be events[touch].move which equals to touchstart.
46 | */
47 |
48 | imageContainer.addEventListener(events[deviceType].move, (e) => {
49 | //Try, catch to avoid any errors for touch screens
50 | try {
51 | //pageX and pageY return the position of client's cursor from top left pf screen
52 | var x = !isTouchDevice() ? e.pageX : e.touches[0].pageX;
53 | var y = !isTouchDevice() ? e.pageY : e.touches[0].pageY;
54 | } catch (e) {}
55 | //get image height and width
56 | let imageWidth = imageContainer.offsetWidth;
57 | let imageHeight = imageContainer.offsetHeight;
58 |
59 | //check if mouse goes out of image container
60 | if (
61 | imageWidth - (x - imageContainer.offsetLeft) < 15 ||
62 | x - imageContainer.offsetLeft < 15 ||
63 | imageHeight - (y - imageContainer.offsetTop) < 15 ||
64 | y - imageContainer.offsetTop < 15
65 | ) {
66 | hideElement();
67 | } else {
68 | overlay.style.display = "block";
69 | mouseOverlay.style.display = "inline-block";
70 | }
71 |
72 | var posX = ((x - imageContainer.offsetLeft) / imageWidth).toFixed(4) * 100;
73 | var posY = ((y - imageContainer.offsetTop) / imageHeight).toFixed(4) * 100;
74 |
75 | //set background position to above obtained values
76 | overlay.style.backgroundPosition = posX + "%" + posY + "%";
77 |
78 | //move the overlay with cursor
79 | mouseOverlay.style.top = y + "px";
80 | mouseOverlay.style.left = x + "px";
81 | });
--------------------------------------------------------------------------------
/Product Image Zoom/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 | .image-container {
7 | width: 30%;
8 | margin: 5% 0 0 5%;
9 | }
10 | img {
11 | max-width: 100%;
12 | }
13 | #overlay {
14 | display: none;
15 | background: url("shoe-img.jpg");
16 | position: absolute;
17 | width: 25%;
18 | height: 35%;
19 | margin-top: -30%;
20 | margin-left: 50%;
21 | border: 2px solid #555;
22 | z-index: 1000;
23 | background-repeat: no-repeat;
24 | }
25 | #mouse-overlay {
26 | cursor: zoom-in;
27 | position: absolute;
28 | width: 2em;
29 | height: 2em;
30 | transform: translate(-50%, -50%);
31 | background-color: rgba(245, 245, 245, 0.6);
32 | border-radius: 50%;
33 | }
34 | @media only screen and (max-width: 768px) {
35 | .image-container {
36 | width: 55%;
37 | }
38 | #overlay {
39 | margin-left: 70%;
40 | width: 25%;
41 | height: 15%;
42 | }
43 | }
--------------------------------------------------------------------------------
/Profile Card/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Profile Card
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Preeti Raj
17 |
Full stack web Developer
18 |
19 |
20 |
1.6K
21 | Followers
22 |
23 |
24 |
200
25 | Following
26 |
27 |
28 |
29 | Follow
30 | Message
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/Profile Card/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/Profile Card/profile.png
--------------------------------------------------------------------------------
/Profile Card/script.js:
--------------------------------------------------------------------------------
1 | const theme = document.querySelector(':root');
2 | const btns = document.querySelectorAll('.btn');
3 | btns.forEach(function(btn){
4 |
5 | btn.addEventListener('click',function(e){
6 | const color = e.currentTarget.classList;
7 |
8 | if(color.contains("btn1")){
9 | theme.style.setProperty("--theme-color","#3498db");
10 | }else if(color.contains("btn2")){
11 | theme.style.setProperty("--theme-color","#ff1756");
12 | }else if(color.contains("btn3")){
13 | theme.style.setProperty("--theme-color","#1cb65d");
14 | }else if(color.contains("btn4")){
15 | theme.style.setProperty("--theme-color","#8e44ad");
16 | }else if(color.contains("btn5")){
17 | theme.style.setProperty("--theme-color","#f4b932");
18 | }
19 |
20 | })
21 | })
--------------------------------------------------------------------------------
/Profile Card/style.css:
--------------------------------------------------------------------------------
1 | *,
2 | *:before,
3 | *:after{
4 | padding:0;
5 | margin:0;
6 | box-sizing: border-box;
7 | }
8 | :root{
9 | --theme-color:#ff1756;
10 | }
11 | body{
12 | background-color: #fafafa;
13 | }
14 | .container{
15 | position:absolute;
16 | transform: translate(-50%,-50%);
17 | top:50%;
18 | left:50%;
19 | }
20 | .card{
21 | height:420px;
22 | width:320px;
23 | background: linear-gradient(to bottom, var(--theme-color) 110px , #ffffff 110px);
24 | border-radius: 10px;
25 | box-shadow: 0 5px 15px rgba(50,50,50,0.1);
26 | padding:50px 0;
27 | }
28 | .card *{
29 | font-family: "Poppins", sans-serif;
30 | text-align: center;
31 | letter-spacing: 0.5px;
32 | font-weight: 600;
33 | }
34 | img{
35 | display:block;
36 | width:100px;
37 | height:100px;
38 | position:relative;
39 | border-radius:50%;
40 | margin: 0 auto;
41 | box-shadow: 0 0 0 8px #ffffff;
42 |
43 | }
44 | .card h4{
45 | color: var(--theme-color);
46 | font-size: 16px;
47 | margin:15px 0 5px 0;
48 | }
49 | .card h5{
50 | color: #454545;
51 | font-size: 14px;
52 | font-weight: 400;
53 | }
54 | .details{
55 | width:100%;
56 | margin-top:30px;
57 | display:flex;
58 | justify-content: space-around;
59 | }
60 | .details h2{
61 | font-weight: 400;
62 | }
63 | .details span{
64 | color:var(--theme-color);
65 |
66 | }
67 | .buttons{
68 | width:100%;
69 | display:flex;
70 | justify-content: space-around;
71 | margin-top: 30px;
72 | }
73 | .buttons button{
74 | width:130px;
75 | padding:8px 0;
76 | border-radius: 25px;
77 | border:3px solid var(--theme-color)
78 | }
79 | .buttons button:first-child{
80 | background-color: var(--theme-color);
81 | }
82 | .buttons button:last-child{
83 | background-color: transparent;
84 | color:var(--theme-color)
85 | }
86 | .themes{
87 | background-color: #ffffff;
88 | box-shadow: 0 5px 15px rgba(50,50,50,0.1);
89 | padding:20px;
90 | margin-top:40px;
91 | display:flex;
92 | justify-content: space-around;
93 | }
94 | .themes button{
95 | height:25px;
96 | width:25px;
97 | border:3px solid #dddddd;
98 | outline:none;
99 | border-radius:50%;
100 | cursor: pointer;
101 | }
102 | .btn1{
103 | background-color: #3498db;
104 | }
105 | .btn2{
106 | background-color: #ff1756;
107 | }
108 | .btn3{
109 | background-color: #1cb65d;
110 | }
111 | .btn4{
112 | background-color: #8e44ad;
113 | }
114 | .btn5{
115 | background-color: #f4b932;
116 | }
--------------------------------------------------------------------------------
/Quiz App/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | MCQ Quiz
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 | Start
17 |
18 |
19 |
28 |
29 |
30 |
31 |
Next
32 |
33 |
34 |
Demo Score
35 |
Restart
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/Quiz App/script.js:
--------------------------------------------------------------------------------
1 | //References
2 | let timeLeft = document.querySelector(".time-left");
3 | let quizContainer = document.getElementById("container");
4 | let nextBtn = document.getElementById("next-button");
5 | let countOfQuestion = document.querySelector(".number-of-question");
6 | let displayContainer = document.getElementById("display-container");
7 | let scoreContainer = document.querySelector(".score-container");
8 | let restart = document.getElementById("restart");
9 | let userScore = document.getElementById("user-score");
10 | let startScreen = document.querySelector(".start-screen");
11 | let startButton = document.getElementById("start-button");
12 | let questionCount;
13 | let scoreCount = 0;
14 | let count = 11;
15 | let countdown;
16 |
17 | //Questions and Options array
18 |
19 | const quizArray = [
20 | {
21 | id: "0",
22 | question: "Which is the most widely spoken language in the world?",
23 | options: ["Spanish", "Mandarin", "English", "German"],
24 | correct: "Mandarin",
25 | },
26 | {
27 | id: "1",
28 | question: "Which is the only continent in the world without a desert?",
29 | options: ["North America", "Asia", "Africa", "Europe"],
30 | correct: "Europe",
31 | },
32 | {
33 | id: "2",
34 | question: "Who invented Computer?",
35 | options: ["Charles Babbage", "Henry Luce", "Henry Babbage", "Charles Luce"],
36 | correct: "Charles Babbage",
37 | },
38 | ];
39 |
40 | //Restart Quiz
41 | restart.addEventListener("click", () => {
42 | initial();
43 | displayContainer.classList.remove("hide");
44 | scoreContainer.classList.add("hide");
45 | });
46 |
47 | //Next Button
48 | nextBtn.addEventListener(
49 | "click",
50 | (displayNext = () => {
51 | //increment questionCount
52 | questionCount += 1;
53 | //if last question
54 | if (questionCount == quizArray.length) {
55 | //hide question container and display score
56 | displayContainer.classList.add("hide");
57 | scoreContainer.classList.remove("hide");
58 | //user score
59 | userScore.innerHTML =
60 | "Your score is " + scoreCount + " out of " + questionCount;
61 | } else {
62 | //display questionCount
63 | countOfQuestion.innerHTML =
64 | questionCount + 1 + " of " + quizArray.length + " Question";
65 | //display quiz
66 | quizDisplay(questionCount);
67 | count = 11;
68 | clearInterval(countdown);
69 | timerDisplay();
70 | }
71 | })
72 | );
73 |
74 | //Timer
75 | const timerDisplay = () => {
76 | countdown = setInterval(() => {
77 | count--;
78 | timeLeft.innerHTML = `${count}s`;
79 | if (count == 0) {
80 | clearInterval(countdown);
81 | displayNext();
82 | }
83 | }, 1000);
84 | };
85 |
86 | //Display quiz
87 | const quizDisplay = (questionCount) => {
88 | let quizCards = document.querySelectorAll(".container-mid");
89 | //Hide other cards
90 | quizCards.forEach((card) => {
91 | card.classList.add("hide");
92 | });
93 | //display current question card
94 | quizCards[questionCount].classList.remove("hide");
95 | };
96 |
97 | //Quiz Creation
98 | function quizCreator() {
99 | //randomly sort questions
100 | quizArray.sort(() => Math.random() - 0.5);
101 | //generate quiz
102 | for (let i of quizArray) {
103 | //randomly sort options
104 | i.options.sort(() => Math.random() - 0.5);
105 | //quiz card creation
106 | let div = document.createElement("div");
107 | div.classList.add("container-mid", "hide");
108 | //question number
109 | countOfQuestion.innerHTML = 1 + " of " + quizArray.length + " Question";
110 | //question
111 | let question_DIV = document.createElement("p");
112 | question_DIV.classList.add("question");
113 | question_DIV.innerHTML = i.question;
114 | div.appendChild(question_DIV);
115 | //options
116 | div.innerHTML += `
117 | ${i.options[0]}
118 | ${i.options[1]}
119 | ${i.options[2]}
120 | ${i.options[3]}
121 | `;
122 | quizContainer.appendChild(div);
123 | }
124 | }
125 |
126 | //Checker Function to check if option is correct or not
127 | function checker(userOption) {
128 | let userSolution = userOption.innerText;
129 | let question =
130 | document.getElementsByClassName("container-mid")[questionCount];
131 | let options = question.querySelectorAll(".option-div");
132 |
133 | //if user clicked answer == correct option stored in object
134 | if (userSolution === quizArray[questionCount].correct) {
135 | userOption.classList.add("correct");
136 | scoreCount++;
137 | } else {
138 | userOption.classList.add("incorrect");
139 | //For marking the correct option
140 | options.forEach((element) => {
141 | if (element.innerText == quizArray[questionCount].correct) {
142 | element.classList.add("correct");
143 | }
144 | });
145 | }
146 |
147 | //clear interval(stop timer)
148 | clearInterval(countdown);
149 | //disable all options
150 | options.forEach((element) => {
151 | element.disabled = true;
152 | });
153 | }
154 |
155 | //initial setup
156 | function initial() {
157 | quizContainer.innerHTML = "";
158 | questionCount = 0;
159 | scoreCount = 0;
160 | count = 11;
161 | clearInterval(countdown);
162 | timerDisplay();
163 | quizCreator();
164 | quizDisplay(questionCount);
165 | }
166 |
167 | //when user click on start button
168 | startButton.addEventListener("click", () => {
169 | startScreen.classList.add("hide");
170 | displayContainer.classList.remove("hide");
171 | initial();
172 | });
173 |
174 | //hide quiz and display start screen
175 | window.onload = () => {
176 | startScreen.classList.remove("hide");
177 | displayContainer.classList.add("hide");
178 | };
--------------------------------------------------------------------------------
/Quiz App/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Poppins", sans-serif;
6 | }
7 | body {
8 | background-color: #0a69ed;
9 | }
10 | .start-screen,
11 | .score-container {
12 | position: absolute;
13 | top: 0;
14 | width: 100%;
15 | height: 100%;
16 | display: flex;
17 | flex-direction: column;
18 | align-items: center;
19 | justify-content: center;
20 | }
21 | button {
22 | border: none;
23 | outline: none;
24 | cursor: pointer;
25 | }
26 | #start-button,
27 | #restart {
28 | font-size: 1.3em;
29 | padding: 0.5em 1.8em;
30 | border-radius: 0.2em;
31 | }
32 | #restart {
33 | margin-top: 0.9em;
34 | }
35 | #display-container {
36 | background-color: #ffffff;
37 | padding: 3.1em 1.8em;
38 | width: 80%;
39 | max-width: 37.5em;
40 | margin: 0 auto;
41 | position: absolute;
42 | transform: translate(-50%, -50%);
43 | top: 50%;
44 | left: 50%;
45 | border-radius: 0.6em;
46 | }
47 | .header {
48 | margin-bottom: 1.8em;
49 | display: flex;
50 | justify-content: space-between;
51 | align-items: center;
52 | padding-bottom: 0.6em;
53 | border-bottom: 0.1em solid #c0bfd2;
54 | }
55 | .timer-div {
56 | background-color: #e1f5fe;
57 | width: 7.5em;
58 | border-radius: 1.8em;
59 | display: flex;
60 | align-items: center;
61 | justify-content: space-between;
62 | padding: 0.7em 1.8em;
63 | }
64 | .question {
65 | margin-bottom: 1.25em;
66 | font-weight: 600;
67 | }
68 | .option-div {
69 | font-size: 0.9em;
70 | width: 100%;
71 | padding: 1em;
72 | margin: 0.3em 0;
73 | text-align: left;
74 | outline: none;
75 | background: transparent;
76 | border: 1px solid #c0bfd2;
77 | border-radius: 0.3em;
78 | }
79 | .option-div:disabled {
80 | color: #000000;
81 | cursor: not-allowed;
82 | }
83 | #next-button {
84 | font-size: 1em;
85 | margin-top: 1.5em;
86 | background-color: #0a69ed;
87 | color: #ffffff;
88 | padding: 0.7em 1.8em;
89 | border-radius: 0.3em;
90 | float: right;
91 | }
92 | .hide {
93 | display: none;
94 | }
95 | .incorrect {
96 | background-color: #ffdde0;
97 | color: #d32f2f;
98 | border-color: #d32f2f;
99 | }
100 | .correct {
101 | background-color: #e7f6d5;
102 | color: #689f38;
103 | border-color: #689f38;
104 | }
105 | #user-score {
106 | font-size: 1.5em;
107 | color: #ffffff;
108 | }
109 | #img{
110 | border-radius: 50%;
111 | width:30px;
112 | }
--------------------------------------------------------------------------------
/Ramdom User cards/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Poppins", sans-serif;
6 | }
7 | :root {
8 | --theme-color: #5074f3;
9 | }
10 | body {
11 | background-color: var(--theme-color);
12 | }
13 | #h1{
14 | text-align: center;
15 | margin:20px;
16 | z-index:9;
17 | }
18 | .container {
19 | width: 90%;
20 | max-width: 25em;
21 | position: absolute;
22 | transform: translate(-50%, -50%);
23 | top: 60%;
24 | left: 50%;
25 | }
26 | .card {
27 | width: 100%;
28 | padding: 4em 0;
29 | background-color: #ffffff;
30 | text-align: center;
31 | border-radius: 0.5em;
32 | }
33 | .card .img-container {
34 | height: 11.25em;
35 | width: 11.25em;
36 | display: block;
37 | margin: -8.75em auto 0 auto;
38 | background-color: #ffffff;
39 | box-shadow: 0 0 0 0.3em #ffffff, 0 0 0 0.9em var(--theme-color);
40 | border-radius: 50%;
41 | }
42 | .img-container img {
43 | width: 100%;
44 | border-radius: 50%;
45 | }
46 | .container button {
47 | display: block;
48 | font-size: 1.2em;
49 | width: 90%;
50 | margin: 2em auto 0 auto;
51 | padding: 1.1em 0;
52 | border-radius: 0.3em;
53 | border: none;
54 | outline: mome;
55 | font-weight: 600;
56 | color: #000341;
57 | cursor: pointer;
58 | }
59 | .card h2 {
60 | margin-top: 1.8em;
61 | font-weight: 600;
62 | color: #000341;
63 | }
64 | .card h3,
65 | .card h4 {
66 | font-size: 1em;
67 | letter-spacing: 0.02em;
68 | margin-top: 0.5em;
69 | font-weight: 300;
70 | color: #90919e;
71 | }
72 | .card i {
73 | color: var(--theme-color);
74 | margin-right: 0.3em;
75 | }
76 | .card h4 {
77 | margin-top: 0.4em;
78 | }
--------------------------------------------------------------------------------
/Ramdom User cards/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Random User Card
6 |
7 |
11 |
12 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
26 |
Get Random User
27 |
Build by 💞 PREETI RAJ
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/Ramdom User cards/index.js:
--------------------------------------------------------------------------------
1 | let details = document.querySelector(".details");
2 | let imgContainer = document.querySelector(".img-container");
3 | let getUserBtn = document.getElementById("get-user-btn");
4 | let url = "https://random-data-api.com/api/v2/users?response_type=json";
5 |
6 | let getUser = () => {
7 | fetch(url)
8 | .then((resp) => resp.json())
9 | .then((data) => {
10 | imgContainer.innerHTML = ` `;
11 | details.innerHTML = `
12 | ${data.first_name} ${data.last_name}
13 | ${data.employment.title}
14 | ${data.address.city} `;
15 |
16 | let randomColor =
17 | "#" + ((Math.random() * 0xffffff) << 0).toString(16).padStart(6, "0");
18 | document.documentElement.style.setProperty("--theme-color", randomColor);
19 | });
20 | };
21 | window.addEventListener("load", getUser);
22 | getUserBtn.addEventListener("click", getUser);
--------------------------------------------------------------------------------
/Random Mems App/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Poppins", sans-serif;
6 | }
7 | body {
8 | background-color: #7f5eff;
9 | background-size: 3.12em;
10 | }
11 | #h1{
12 | text-align: center;
13 | margin:20px;
14 | z-index:9;
15 | }
16 | .container {
17 | width: 80%;
18 | max-width: 37.5em;
19 | padding: 3em 1.5em;
20 | background-color: #ffffff;
21 | text-align: center;
22 | justify-content: center;
23 | align-items: center;
24 | border-radius: 0.6em;
25 | box-shadow: 0 1.4em 3em rgba(20, 16, 39, 0.3);
26 | margin-bottom:50px;
27 | margin-left: 350px;
28 | }
29 | .container img {
30 | display: block;
31 | height: 25em;
32 | max-width: 80%;
33 | margin: 0 auto 1em auto;
34 | }
35 | .container h3 {
36 | display: block;
37 | font-size: 1em;
38 | margin: 0.5em auto 2em auto;
39 | width: 70%;
40 | font-weight: 400;
41 | text-align: center;
42 | text-transform: capitalize;
43 | color: #737081;
44 | letter-spacing: 0.03em;
45 | }
46 | .container button {
47 | display: block;
48 | margin: 0 auto;
49 | font-size: 1.2em;
50 | padding: 0.8em 2em;
51 | border-radius: 2em;
52 | background-color: #7f5eff;
53 | border: none;
54 | outline: none;
55 | color: #ffffff;
56 | cursor: pointer;
57 | }
58 | @media screen and (max-width: 600px) {
59 | .container {
60 | font-size: 14px;
61 | }
62 | }
--------------------------------------------------------------------------------
/Random Mems App/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Memes Generator
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
hahaha!
19 |
Get Meme
20 |
Build by 💞 PREETI RAJ
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/Random Mems App/index.js:
--------------------------------------------------------------------------------
1 | let meme = document.getElementById("meme");
2 | let title = document.getElementById("title");
3 | let getMemeBtn = document.getElementById("get-meme-btn");
4 | //API URL
5 | let url = " https://meme-api.herokuapp.com/gimme/";
6 | //Array of subreddits of your choice
7 | let subreddits = ["catmemes", "wholesomemes", "dogmemes", "me_irl"];
8 |
9 | //Function To Get Random Meme
10 | let getMeme = () => {
11 | //Choose a random subreddit from the subreddits array
12 | let randomSubreddit =
13 | subreddits[Math.floor(Math.random() * subreddits.length)];
14 | //Fetch data from the api
15 | fetch(url + randomSubreddit)
16 | .then((res) => res.json())
17 | .then((data) => {
18 | let memeImg = new Image();
19 | //Display meme image and title only after the image loads
20 | memeImg.onload = () => {
21 | meme.src = data.url;
22 | title.innerHTML = data.title;
23 | };
24 | memeImg.src = data.url;
25 | });
26 | };
27 |
28 | //Call the getMeme() on button click and on window load
29 | getMemeBtn.addEventListener("click", getMeme);
30 | window.addEventListener("load", getMeme);
--------------------------------------------------------------------------------
/Random quote genertor/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Random Quote Generator
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas,
19 | magni.
20 |
21 |
Lorem, ipsum.
22 |
Get Quote
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/Random quote genertor/script.js:
--------------------------------------------------------------------------------
1 | let quote = document.getElementById("quote");
2 | let author = document.getElementById("author");
3 | let btn = document.getElementById("btn");
4 |
5 | const url = "https://api.quotable.io/random";
6 |
7 | let getQuote = () => {
8 | fetch(url)
9 | .then((data) => data.json())
10 | .then((item) => {
11 | quote.innerText = item.content;
12 | author.innerText = item.author;
13 | });
14 | };
15 |
16 | window.addEventListener("load", getQuote);
17 | btn.addEventListener("click", getQuote);
--------------------------------------------------------------------------------
/Random quote genertor/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Poppins", sans-serif;
6 | }
7 | body {
8 | background-color: #f43543;
9 | }
10 | .wrapper {
11 | width: 400px;
12 | position: absolute;
13 | transform: translate(-50%, -50%);
14 | top: 50%;
15 | left: 50%;
16 | }
17 | .container {
18 | width: 100%;
19 | background-color: #f43543;
20 | padding: 50px 40px;
21 | box-shadow: 0 20px 65px rgba(87, 11, 16, 0.5);
22 | position: relative;
23 | border-radius: 8px;
24 | text-align: center;
25 | }
26 | .container:after {
27 | content: "";
28 | position: absolute;
29 | width: 80%;
30 | height: 120%;
31 | background-color: #ffffff;
32 | z-index: -1;
33 | top: -10%;
34 | left: 10%;
35 | }
36 | .container p {
37 | color: #fdd8d8;
38 | line-height: 2;
39 | font-size: 18px;
40 | }
41 | .container h3 {
42 | color: #ffffff;
43 | margin: 20px 0 60px 0;
44 | font-weight: 600;
45 | text-transform: capitalize;
46 | }
47 | .container button {
48 | background-color: #ffffff;
49 | border: none;
50 | padding: 15px 45px;
51 | border-radius: 5px;
52 | font-size: 18px;
53 | font-weight: 600;
54 | color: #f43543;
55 | cursor: pointer;
56 | }
--------------------------------------------------------------------------------
/Recipe App/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Recipe App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Search
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/Recipe App/index.js:
--------------------------------------------------------------------------------
1 | let result =document.getElementById('result');
2 | let searchBtn =document.getElementById("search-btn");
3 |
4 | let url = "https:www.themealdb.com/api/json/v1/1/search.php?s="
5 |
6 |
7 | searchBtn.addEventListener("click",()=>{
8 | let userInp = document.getElementById('user-inp').value;
9 | if(userInp.length == 0){
10 | result.innerHTML=`Input Field Cannot Be Empty `;
11 | }
12 | else{
13 | fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${userInp}`)
14 | .then((response)=> response.json())
15 | .then((data)=>{
16 | console.log(data);
17 | let myMeal = data.meals[0];
18 | console.log(myMeal.strMealThumb);
19 | console.log(myMeal.strMeal);
20 | console.log(myMeal.strArea);
21 | console.log(myMeal.strInstructions);
22 | let count=1;
23 | let ingredients=[];
24 | for(let i in myMeal){
25 | let ingredient = "";
26 | let measure ="";
27 | if(i.startsWith("strIngredient")&& myMeal[i]){
28 | ingredient=myMeal[i];
29 | measure = myMeal[`strMeasure`+count];
30 | count+=1;
31 | ingredients.push(`${measure} ${ingredient}`);
32 | }
33 | }
34 | console.log(ingredients);
35 | result.innerHTML=`
36 |
37 |
${myMeal.strMeal}
38 | ${myMeal.strArea}
39 |
40 |
41 |
42 |
X
43 |
${myMeal.strInstructions}
44 |
45 | View Recipe `;
46 | let ingredientcon = document.getElementById("ingredient-con");
47 | let parent = document.createElement("ul");
48 | let recipe =document.getElementById("recipe");
49 | let hideRecipe =document.getElementById("hide-recipe");
50 | let showRecipe = document.getElementById("show-recipe");
51 |
52 | ingredients.forEach((i)=>{
53 | let child = document.createElement("li");
54 | child.innerText=i;
55 | parent.appendChild(child);
56 | ingredientcon.appendChild(parent)
57 | });
58 | hideRecipe.addEventListener('click',()=>{
59 | recipe.style.display="none";
60 | });
61 | showRecipe.addEventListener("click",()=>{
62 | recipe.style.display ="block";
63 | });
64 | }).catch(()=>{
65 | result.innerHTML=`Invalid Input `;
66 | })
67 | }
68 | })
69 |
--------------------------------------------------------------------------------
/Recipe App/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | padding:0;
3 | margin:0;
4 | box-sizing: border-box;
5 | font-family: "Poppins",sans-serif;
6 | }
7 | body{
8 | background-color: #f4c531;
9 | }
10 | .container{
11 | background-color:#ffffff;
12 | font-size:16px;
13 | padding:3em 2.8em;
14 | width:90vw;
15 | max-width:32em;
16 | position:absolute;
17 | transform: translate(-50%);
18 | left:50%;
19 | top:1em;
20 | border-radius:0.6em;
21 | box-shadow:0 1.2em 2.5em rgba(42,32,0,0.2);
22 | }
23 | .search-container{
24 | width:100%;
25 | display:grid;
26 | grid-template-columns: 9fr 3fr;
27 | gap:1.2em;
28 | }
29 | .search-container input{
30 | font-size:1em;
31 | padding:0.6em;
32 | border:none;
33 | outline:none;
34 | border-bottom:2px solid #202030;
35 | }
36 |
37 | .search-container button{
38 | font-size:1em;
39 | background-color: #f4c531;
40 | border:none;
41 | font-weight: 600;
42 | border-radius: 0.3em;
43 | }
44 | img{
45 | display:block;
46 | width:50%;
47 | margin:1.8em auto 0 auto;
48 |
49 | }
50 | .details{
51 | background-color: #f4c531;
52 | position: relative;
53 | margin:-4.3em 0 0 0 ;
54 | text-align: center;
55 | padding:0.6em 0;
56 | }
57 | .details h2{
58 | font-size: 1.2em;
59 | font-weight:600;
60 | }
61 | .details h4{
62 | font-size: 1em;
63 | font-weight:400;
64 | }
65 | #show-recipe{
66 | font-size: 1em;
67 | position: relative;
68 | left:75%;
69 | padding: 0.9em 0.6em;
70 | background-color: #f4c531;
71 | border:none;
72 | top:1.5em;
73 | border-radius: 0.3em;
74 | font-weight: 600;
75 | }
76 | #recipe{
77 | position:absolute;
78 | background-color: #ffffff;
79 | min-height: 100%;
80 | width:100%;
81 | top:0;
82 | left:0;
83 | z-index:2;
84 | border-radius: 0.6em;
85 | display:none;
86 | }
87 | #recipe pre{
88 | white-space:pre-wrap;
89 | word-wrap: break-word;
90 | padding:2.5em 1.2em 1.2em 1.2em;
91 | }
92 | #hide-recipe{
93 | font-size:1em;
94 | position:relative;
95 | width:1.8em;
96 | height:1.8em;
97 | background-color: #f4c531;
98 | border:none;
99 | top:1.2em;
100 | left:90%;
101 | border-radius: 0.3em;
102 | }
103 | ul{
104 | font-size:1em;
105 | position: relative;
106 | display:grid;
107 | grid-template-columns: auto auto;
108 | gap:0.8em 1.1em;
109 | padding:1.2em 0 0 1.2em;
110 | }
111 | h3{
112 | text-align: center;
113 | margin-top: 1.8em;
114 | color:#202030;
115 | }
116 | @media screen and (max-width:500px){
117 | .container{
118 | font-size:14px;
119 | }
120 | }
--------------------------------------------------------------------------------
/Scratch Card/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Scratch Card
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
You Won
18 | $10
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/Scratch Card/script.js:
--------------------------------------------------------------------------------
1 | let canvas = document.getElementById("scratch");
2 | let context = canvas.getContext("2d");
3 |
4 | const init = () => {
5 | let gradientColor = context.createLinearGradient(0, 0, 135, 135);
6 | gradientColor.addColorStop(0, "#c3a3f1");
7 | gradientColor.addColorStop(1, "#6414e9");
8 | context.fillStyle = gradientColor;
9 | context.fillRect(0, 0, 200, 200);
10 | };
11 |
12 | //initially mouse X and mouse Y positions are 0
13 | let mouseX = 0;
14 | let mouseY = 0;
15 | let isDragged = false;
16 |
17 | //Events for touch and mouse
18 | let events = {
19 | mouse: {
20 | down: "mousedown",
21 | move: "mousemove",
22 | up: "mouseup",
23 | },
24 | touch: {
25 | down: "touchstart",
26 | move: "touchmove",
27 | up: "touchend",
28 | },
29 | };
30 |
31 | let deviceType = "";
32 |
33 | //Detech touch device
34 | const isTouchDevice = () => {
35 | try {
36 | //We try to create TouchEvent. It would fail for desktops and throw error.
37 | document.createEvent("TouchEvent");
38 | deviceType = "touch";
39 | return true;
40 | } catch (e) {
41 | deviceType = "mouse";
42 | return false;
43 | }
44 | };
45 |
46 | //Get left and top of canvas
47 | let rectLeft = canvas.getBoundingClientRect().left;
48 | let rectTop = canvas.getBoundingClientRect().top;
49 |
50 | //Exact x and y position of mouse/touch
51 | const getXY = (e) => {
52 | mouseX = (!isTouchDevice() ? e.pageX : e.touches[0].pageX) - rectLeft;
53 | mouseY = (!isTouchDevice() ? e.pageY : e.touches[0].pageY) - rectTop;
54 | };
55 |
56 | isTouchDevice();
57 | //Start Scratch
58 | canvas.addEventListener(events[deviceType].down, (event) => {
59 | isDragged = true;
60 | //Get x and y position
61 | getXY(event);
62 | scratch(mouseX, mouseY);
63 | });
64 |
65 | //mousemove/touchmove
66 | canvas.addEventListener(events[deviceType].move, (event) => {
67 | if (!isTouchDevice()) {
68 | event.preventDefault();
69 | }
70 | if (isDragged) {
71 | getXY(event);
72 | scratch(mouseX, mouseY);
73 | }
74 | });
75 |
76 | //stop drawing
77 | canvas.addEventListener(events[deviceType].up, () => {
78 | isDragged = false;
79 | });
80 |
81 | //If mouse leaves the square
82 | canvas.addEventListener("mouseleave", () => {
83 | isDragged = false;
84 | });
85 |
86 | const scratch = (x, y) => {
87 | //destination-out draws new shapes behind the existing canvas content
88 | context.globalCompositeOperation = "destination-out";
89 | context.beginPath();
90 | //arc makes circle - x,y,radius,start angle,end angle
91 | context.arc(x, y, 12, 0, 2 * Math.PI);
92 | context.fill();
93 | };
94 |
95 | window.onload = init();
--------------------------------------------------------------------------------
/Scratch Card/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 | body {
7 | height: 100vh;
8 | background: linear-gradient(135deg, #c3a3f1, #6414e9);
9 | }
10 | .container {
11 | width: 31em;
12 | height: 31em;
13 | background-color: #f5f5f5;
14 | position: absolute;
15 | transform: translate(-50%, -50%);
16 | top: 50%;
17 | left: 50%;
18 | border-radius: 0.6em;
19 | }
20 | .base,
21 | #scratch {
22 | height: 200px;
23 | width: 200px;
24 | position: absolute;
25 | transform: translate(-50%, -50%);
26 | top: 50%;
27 | left: 50%;
28 | text-align: center;
29 | cursor: grabbing;
30 | border-radius: 0.3em;
31 | }
32 | .base {
33 | background-color: #ffffff;
34 | font-family: "Poppins", sans-serif;
35 | display: flex;
36 | flex-direction: column;
37 | align-items: center;
38 | justify-content: center;
39 | box-shadow: 0 1.2em 2.5em rgba(16, 2, 96, 0.15);
40 | }
41 | .base h3 {
42 | font-weight: 600;
43 | font-size: 1.5em;
44 | color: #17013b;
45 | }
46 | .base h4 {
47 | font-weight: 400;
48 | color: #746e7e;
49 | }
50 | #scratch {
51 | -webkit-tap-highlight-color: transparent;
52 | -webkit-touch-callout: none;
53 | -webkit-user-select: none;
54 | user-select: none;
55 | }
--------------------------------------------------------------------------------
/Simple Interest App/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Simple Interest Calculator
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
26 |
Time:
27 |
28 |
29 |
30 | Year
31 | Month
32 |
33 |
34 |
Calculate
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/Simple Interest App/script.js:
--------------------------------------------------------------------------------
1 | let calculateBtn = document.getElementById("calculate-btn");
2 | let result = document.getElementById("result");
3 | let calculate = () => {
4 | let p = Number(document.getElementById("principal").value);
5 | let r = Number(document.getElementById("rate").value);
6 | let t = Number(document.getElementById("time").value);
7 | let duration = document.getElementById("duration").value;
8 | let simpleInterest =
9 | duration == "year" ? (p * r * t) / 100 : (p * r * t) / 1200;
10 | let amount = p + simpleInterest;
11 |
12 | result.innerHTML = `Principal Amount: ${p.toFixed(2)}
13 | Total Interest: ${simpleInterest.toFixed(2)}
14 | Total Amount: ${amount.toFixed(2)}
`;
15 | };
16 | calculateBtn.addEventListener("click", calculate);
17 | window.addEventListener("load", calculate);
--------------------------------------------------------------------------------
/Simple Interest App/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: "Poppins", sans-serif;
6 | }
7 | body {
8 | height: 100vh;
9 | background: linear-gradient(#01e26e, #72ffb4);
10 | }
11 | .container {
12 | background-color: #ffffff;
13 | position: absolute;
14 | transform: translate(-50%, -50%);
15 | top: 50%;
16 | left: 50%;
17 | width: 80vw;
18 | max-width: 600px;
19 | min-width: 350px;
20 | padding: 60px 30px;
21 | border-radius: 10px;
22 | box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
23 | }
24 | label {
25 | display: block;
26 | font-size: 22px;
27 | margin-bottom: 10px;
28 | font-weight: 500;
29 | }
30 | input {
31 | margin-bottom: 20px;
32 | border: none;
33 | font-size: 20px;
34 | border-bottom: 2px solid #585858;
35 | color: #585858;
36 | padding: 2px 15px;
37 | }
38 | input:focus {
39 | outline: none;
40 | border-bottom: 2.4px solid #01e26e;
41 | }
42 | .input-wrapper {
43 | display: flex;
44 | justify-content: space-between;
45 | gap: 20px;
46 | }
47 | .input-wrapper input {
48 | width: 100%;
49 | }
50 | .time-wrapper input {
51 | width: 60%;
52 | }
53 | select {
54 | width: 35%;
55 | border: 1px solid #585858;
56 | font-size: 20px;
57 | margin-left: 3%;
58 | padding: 8px 0;
59 | border-radius: 5px;
60 | }
61 | button {
62 | display: block;
63 | background-color: #01e26e;
64 | border: none;
65 | color: #ffffff;
66 | margin: 20px auto 0 auto;
67 | padding: 15px 40px;
68 | font-size: 20px;
69 | border-radius: 5px;
70 | }
71 | #result {
72 | background-color: #c6ffe2;
73 | margin-top: 30px;
74 | color: #585858;
75 | text-align: center;
76 | font-size: 18px;
77 | padding: 20px;
78 | border-radius: 5px;
79 | }
80 | #result div {
81 | margin-bottom: 10px;
82 | }
83 | #result span {
84 | color: #000000;
85 | font-weight: 500;
86 | }
--------------------------------------------------------------------------------
/Tic tac toe game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Tic Tac Toe
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
Restart
24 |
25 |
26 |
30 |
31 |
32 |
33 |
34 |