├── 25-Dad-jokes ├── index.html ├── script.js └── style.css ├── 26-Event-Keycodes ├── index.html ├── script.js └── style.css ├── 27-Faq-Collapse ├── index.html ├── script.js └── style.css ├── 28-Toast-Notification ├── index.html ├── script.js └── style.css ├── 29-Double -heart_click ├── images │ └── 8.png ├── index.html ├── script.js └── style.css ├── 30-Auto-text-effect ├── index.html ├── script.js └── style.css ├── 31-content-placeholder ├── images │ └── avatar_hat.jpg ├── index.html ├── script.js └── style.css ├── 32-_Sticky Navbar ├── images │ └── tumblr_myebwtELvb1st5lhmo1_1280.jpg ├── index.html ├── script.js └── style.css ├── 33-Double-Vertical-Slider ├── images │ ├── 4c0efdd7be898125de1a6bf83f041f67.png │ ├── download (1).jpg │ ├── download (2).jpg │ ├── download.jpg │ ├── images.jpg │ └── rose-165819__480.jpg ├── index.html ├── script.js └── style.css ├── 34-Random-Choice-Picker ├── index.html ├── script.js └── style.css ├── 35-Kinetic-loader ├── index.html ├── script.js └── style.css ├── 36-Drawing-App ├── index.html ├── script.js └── style.css ├── 37-Drag-n-Drop ├── images │ └── download (1).jpg ├── index.html ├── script.js └── style.css ├── 38-Button-Riple=Effect ├── index.html ├── script.js └── style.css ├── 39-Theme-Clock ├── index.html ├── script.js └── style.css ├── 40-Background-slider ├── images │ ├── download (1).jpg │ ├── download (2).jpg │ ├── download (3).jpg │ ├── download.jpg │ └── laptop-backgrounds-nature-images-1920x1200-wallpaper-preview.jpg ├── index.html ├── script.js └── style.css ├── 41-Movie-App ├── images │ ├── app.jpg │ ├── app2.jpg │ └── app4.jpg ├── index.html ├── script.js └── style.css ├── 42-Drink-Water ├── index.html ├── script.js └── style.css ├── 43-Incrementing-Counter ├── index.html ├── script.js └── style.css ├── 44-Animated-Navagation ├── index.html ├── script.js └── sryle.css ├── Age-Calculator ├── app.js ├── index.html └── style.css ├── Analog-clock ├── app.js ├── index.html └── style.css ├── BMI-Calculator ├── app.js ├── index.html └── style.css ├── Binary2Decimal ├── app.js ├── index.html └── style.css ├── Blurry Loading ├── images │ ├── 553ebc3377b2cd2dc3cc5e0e0f26d4f9.png │ ├── IMG_20210218_001301_730.jpg │ └── team1.jpg ├── index.html ├── script.js └── style.css ├── Border-Radius ├── app.js ├── index.html └── style.css ├── Box-Shadow-Generator ├── app.js ├── index.html └── style.css ├── Calculator ├── app.js ├── index.html └── style.css ├── Code-Music ├── app.js ├── index.html └── style.css ├── Currency-Converter ├── app.js ├── index.html └── style.css ├── Dark-Mode ├── app.js ├── index.html └── style.css ├── Expanding Cards ├── images │ ├── tech_phone.jpg │ ├── tech_sound.jpg │ ├── tech_tablet.jpg │ ├── tech_tableturner.jpg │ └── tech_typewriter.jpg ├── index.html ├── script.js └── style.css ├── Form Wave Animation ├── index.html ├── script.js └── style.css ├── Form-Validation ├── app.js ├── index.html └── style.css ├── HTML-Canvas ├── app.js ├── index.html └── style.css ├── Hidden Search ├── index.html ├── script.js └── style.css ├── Image-Slider ├── images │ ├── car1.jpeg │ ├── car3.jpeg │ └── car3.jpg ├── index.html ├── index.js └── style.css ├── JS-Pratice ├── index.html ├── index.js └── style.css ├── Javascript-30-Projects ├── Clock │ ├── background.jpg │ ├── index.html │ ├── index.js │ └── stlyle.css ├── Css Variable │ ├── background.jpg │ ├── index.html │ ├── index.js │ └── style.css └── Drum Kit │ ├── background.jpg │ ├── index.html │ ├── index.js │ ├── sounds │ ├── boom.wav │ ├── clap.wav │ ├── hihat.wav │ ├── kick.wav │ ├── openhat.wav │ ├── ride.wav │ ├── snare.wav │ ├── tink.wav │ └── tom.wav │ └── style.css ├── LICENSE ├── Password-Generator ├── app.js ├── index.html ├── resource.md └── style.css ├── Pomodoro-Timer ├── app.js ├── index.html └── style.css ├── Progress Steps ├── index.html ├── script.js └── style.css ├── Quotes-Generator ├── app.js ├── index.html └── style.css ├── README.md ├── Random-Color-Generator ├── app.js ├── index.html └── style.css ├── Random-Linear-Gradient ├── app.js ├── index.html └── style.css ├── Rotating Navigations ├── images │ └── app.jpg ├── index.html ├── script.js └── style.css ├── Scroll Animation ├── index.html ├── script.js └── style.css ├── Sound Board ├── index.html ├── script.js ├── sounds │ ├── y2mate.com - Bulave tujhe yaar aaj Meri galiyan Luke chuppi _ DUNIYAA full lyrics.mp3 │ ├── y2mate.com - O Saathi Lyrical Video _ Baaghi 2 _ Tiger Shroff _ Disha Patani _ Arko _ Ahmed Khan Sajid Nadiadwala.mp3 │ ├── y2mate.com - Satyameva Jayate PANIYON SA Video Song Atif Aslam Tulsi Kumar John Abraham Aisha Sharma.mp3 │ ├── y2mate.com - TERE SANG YAARA LYRICS ATIF ASLAM ARKO MANOJ MUNTASHIR AKSHAY K ILEANA D RUSTOM.mp3 │ ├── y2mate.com - Tera Chehra Lyrics Sanam Teri Kasam Harshvardhan Rane Mawra Hocane Arijit Singh.mp3 │ └── y2mate.com - Teri Nazron Mein Hai Tere Sapne Tere Sapno Mein Hai Naraazi Agar Tum Sath Ho 8D Audio Sad Song.mp3 └── style.css ├── Speed-Reader ├── app.js ├── index.html └── style.css ├── Split Landing Page ├── images │ ├── team1.jpg │ └── team2.jpg ├── index.html ├── script.js └── style.css ├── Superhero-Card ├── app.js ├── index.html └── style.css ├── TaskLists ├── index.html └── script.js ├── Tip-Calculator ├── app.js ├── index.html └── style.css ├── Todo-List ├── app.js ├── index.html └── style.css ├── Weather-app ├── app.js ├── extraicons │ └── humidity.svg ├── icons │ ├── 01d.svg │ ├── 01n.svg │ ├── 02d.svg │ ├── 02n.svg │ ├── 03d.svg │ ├── 03n.svg │ ├── 04d.svg │ ├── 04n.svg │ ├── 09d.svg │ ├── 09n.svg │ ├── 10d.svg │ ├── 10n.svg │ ├── 11d.svg │ ├── 11n.svg │ ├── 13d.svg │ ├── 13n.svg │ ├── 50d.svg │ ├── 50n.svg │ └── unknown.svg ├── index.html └── style.css ├── booklists ├── app.js ├── appes6.js ├── index.html └── style.css ├── constructor ├── countdown ├── app.js ├── index.html └── style.css ├── diceroller ├── index.html ├── index.js └── style.css ├── index.html ├── loancalculator ├── images │ ├── 0_H3jZONKqRuAAeHnG.jpg │ ├── 200.gif │ ├── download (1).jpg │ └── download.jpg ├── index.html └── script.js ├── mainApp.js ├── mainStyle.css ├── new-project.sh ├── numberguesser ├── index.html └── script.js ├── projects.json ├── prototype ├── index.html └── script.js ├── stopwatch ├── app.js ├── images │ ├── pause.svg │ ├── play-button-arrowhead.svg │ └── stop.svg ├── index.html └── style.css └── tic tac toe ├── app.js ├── index.css └── index.html /25-Dad-jokes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dad jokes 8 | 9 | 10 | 11 |
12 |

Don't Laugh Challenge

13 | 14 |
15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /25-Dad-jokes/script.js: -------------------------------------------------------------------------------- 1 | const jokeEl = document.getElementById('joke') 2 | const jokeBtn = document.getElementById('jokeBtn') 3 | 4 | jokeBtn.addEventListener('click', generateJoke) 5 | 6 | generateJoke() 7 | 8 | //using async await 9 | 10 | async function generateJoke() { 11 | const config = { 12 | headers: { 13 | 'Accept': 'application/json', 14 | }, 15 | } 16 | 17 | const res = await fetch('https://icanhazdadjoke.com', config) 18 | 19 | const data = await res.json() 20 | jokeEl.innerHTML = data.joke 21 | 22 | } 23 | 24 | 25 | 26 | //using .then() 27 | 28 | // generateJoke() 29 | 30 | // function generateJoke() { 31 | // const config = { 32 | // headers: { 33 | // 'Accept': 'application/json', 34 | // }, 35 | // } 36 | 37 | // fetch('https://icanhazdadjoke.com', config) 38 | // .then((res) => res.json()) 39 | // .then((data) => { 40 | // jokeEl.innerHTML = data.joke 41 | // }) 42 | 43 | // } -------------------------------------------------------------------------------- /25-Dad-jokes/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background-color:#686de0; 9 | font-family: 'Roboto', sans-serif; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | padding: 20px; 18 | } 19 | 20 | .container{ 21 | background-color: #fff; 22 | border-radius: 10px; 23 | box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1); 24 | text-align: center; 25 | padding: 50px 20px; 26 | max-width: 100%; 27 | width: 800px; 28 | } 29 | 30 | h3{ 31 | margin: 0; 32 | opacity: 0.5; 33 | letter-spacing: 2px; 34 | } 35 | 36 | .joke{ 37 | font-size: 30px; 38 | letter-spacing: 1px; 39 | line-height: 40px; 40 | margin: 50px auto; 41 | max-width: 600px; 42 | } 43 | 44 | .btn{ 45 | background-color: #9f68e0; 46 | color: #fff; 47 | border: 0; 48 | border-radius: 10px; 49 | box-shadow: 0 5px 15px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1); 50 | padding: 14px 40px; 51 | font-size: 16px; 52 | cursor: pointer; 53 | } 54 | 55 | .btn:active{ 56 | transform: scale(0.98); 57 | } 58 | 59 | .btn:focus{ 60 | outline: 0; 61 | } -------------------------------------------------------------------------------- /26-Event-Keycodes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Events keycodes 8 | 9 | 10 | 11 |
12 | 13 |
14 | Press any key to get the keyCode 15 | 16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /26-Event-Keycodes/script.js: -------------------------------------------------------------------------------- 1 | const insert = document.getElementById('insert') 2 | 3 | 4 | window.addEventListener('keydown', (event) => { 5 | insert.innerHTML = ` 6 |
7 | ${event.key === ' ' ? 'Space' : event.key} 8 | event.key 9 |
10 |
11 | ${event.keyCode} 12 | event.keyCode 13 |
14 |
15 | ${event.code} 16 | event.code 17 |
18 | ` 19 | }) -------------------------------------------------------------------------------- /26-Event-Keycodes/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Mulidisplay=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background-color: #e1e1e1; 9 | font-family: 'Muli', sans-serif; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | text-align: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | } 18 | 19 | .key{ 20 | border: 1px solid #999; 21 | background-color: #eee; 22 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); 23 | display: inline-flex; 24 | align-items: center; 25 | font-size: 20px; 26 | font-weight: bold; 27 | padding: 20px; 28 | flex-direction: column; 29 | margin: 10px; 30 | min-width: 150px; 31 | position: relative; 32 | } 33 | 34 | .key small{ 35 | position: absolute; 36 | top: -24px; 37 | left: 0; 38 | text-align: center; 39 | width: 100%; 40 | color: #555; 41 | font-size: 14px; 42 | } -------------------------------------------------------------------------------- /27-Faq-Collapse/script.js: -------------------------------------------------------------------------------- 1 | const toggles = document.querySelectorAll('.faq-toggle') 2 | 3 | toggles.forEach(toggle => { 4 | toggle.addEventListener('click', () => { 5 | toggle.parentNode.classList.toggle('active') 6 | }) 7 | }) -------------------------------------------------------------------------------- /28-Toast-Notification/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Toast Notification 8 | 9 | 10 | 11 |
12 | 13 |
Show Notification
14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /28-Toast-Notification/script.js: -------------------------------------------------------------------------------- 1 | const button = document.getElementById('button') 2 | const toasts = document.getElementById('toasts') 3 | 4 | const messages = [ 5 | 'Message One', 6 | 'Message Two', 7 | 'Message Three', 8 | 'Message Four', 9 | ] 10 | 11 | const types = ['info', 'success', 'error'] 12 | 13 | button.addEventListener('click', () => createNotification()) 14 | 15 | function createNotification(message = null, type = null) { 16 | const notif = document.createElement('div') 17 | notif.classList.add('toast') 18 | notif.classList.add(type ? type : getRandomType()) 19 | 20 | 21 | notif.innerText = message ? message : getRandomMessage() 22 | 23 | toasts.appendChild(notif) 24 | 25 | setTimeout(() => { 26 | notif.remove() 27 | }, 3000) 28 | } 29 | 30 | function getRandomMessage() { 31 | return messages[Math.floor(Math.random() * messages.length)] 32 | } 33 | 34 | function getRandomType() { 35 | return types[Math.floor(Math.random() * types.length)] 36 | } -------------------------------------------------------------------------------- /28-Toast-Notification/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:200,400&display=swap'); 2 | 3 | 4 | 5 | *{ 6 | box-sizing: border-box; 7 | } 8 | 9 | body{ 10 | background-color: rebeccapurple; 11 | font-family: 'Poppins', sans-serif; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | height: 100vh; 17 | overflow: hidden; 18 | margin: 0; 19 | } 20 | 21 | .btn{ 22 | background-color: #ffffff; 23 | color: rebeccapurple; 24 | font-family: inherit; 25 | font-weight: bold; 26 | padding: 1rem; 27 | border-radius: 5px; 28 | border: none; 29 | cursor: pointer; 30 | } 31 | 32 | .btn:focus{ 33 | outline: none; 34 | } 35 | 36 | .btn.active{ 37 | transform: scale(0.98); 38 | } 39 | 40 | #toasts { 41 | position: fixed; 42 | bottom: 10px; 43 | right: 10px; 44 | display: flex; 45 | flex-direction: column; 46 | align-items: flex-end; 47 | } 48 | 49 | .toast{ 50 | background-color: #fff; 51 | border-radius: 5px; 52 | padding: 1rem 2rem; 53 | margin: 0.5rem; 54 | } 55 | 56 | .toast.info{ 57 | color: rebeccapurple; 58 | } 59 | .toast.success{ 60 | color: green; 61 | } 62 | .toast.error{ 63 | color: red; 64 | } -------------------------------------------------------------------------------- /29-Double -heart_click/images/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/29-Double -heart_click/images/8.png -------------------------------------------------------------------------------- /29-Double -heart_click/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Double Heart Click 8 | 9 | 10 | 11 | 12 |

Double click on the image to it

13 | 14 | You liked it 0times 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /29-Double -heart_click/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Oswald'); 2 | *{ 3 | box-sizing: border-box; 4 | } 5 | 6 | body{ 7 | font-family: 'Oswald', sans-serif; 8 | text-align: center; 9 | overflow: hidden; 10 | margin: 0; 11 | } 12 | 13 | h3{ 14 | margin-bottom: 0; 15 | text-align: center; 16 | } 17 | 18 | small{ 19 | display: block; 20 | margin-bottom: 20px; 21 | text-align: center; 22 | } 23 | 24 | .fa-heart{ 25 | color: red; 26 | } 27 | 28 | .loveMe { 29 | height: 440px; 30 | width: 300px; 31 | background: url('images/8.png'); 32 | background-size: cover; 33 | background-repeat: no-repeat; 34 | background-position: center center; 35 | margin: auto; 36 | cursor: pointer; 37 | max-width: 100%; 38 | position: relative; 39 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5, 0 10px 10px rgba(0, 0, 0, 0.22)); 40 | } 41 | 42 | .loveMe .fa-heart{ 43 | position: absolute; 44 | animation: grow 0.6s linear; 45 | transform: translate(-50%, -50%) scale(0); 46 | } 47 | 48 | @keyframes grow{ 49 | to{ 50 | transform: translate(-50%, -50%) scale(10); 51 | opacity: 0; 52 | } 53 | } -------------------------------------------------------------------------------- /30-Auto-text-effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Auto Text Effect 8 | 9 | 10 | 11 |

Starting...

12 | 13 |
14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /30-Auto-text-effect/script.js: -------------------------------------------------------------------------------- 1 | const textEl = document.getElementById('text') 2 | const speedEl = document.getElementById('speed') 3 | 4 | const text = 'We Love Programming!' 5 | 6 | let idx = 1 7 | 8 | let speed = 300 / speedEl.value 9 | 10 | 11 | writetext() 12 | 13 | function writetext() { 14 | textEl.innerText = text.slice(0, idx) 15 | 16 | idx++ 17 | 18 | if(idx > text.length) { 19 | idx = 1 20 | } 21 | 22 | setTimeout(writetext, speed) 23 | } 24 | 25 | speedEl.addEventListener('input',(e) => speed = 300 / e.target.value) -------------------------------------------------------------------------------- /30-Auto-text-effect/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto:wght@400;700&display=swap'); 2 | *{ 3 | box-sizing: border-box; 4 | } 5 | 6 | body{ 7 | background-color: rgb(126, 118, 118); 8 | font-family: 'Roboto', sans-serif; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | height: 100vh; 13 | overflow: hidden; 14 | margin: 0; 15 | } 16 | 17 | div{ 18 | position: absolute; 19 | bottom: 20px; 20 | background: rgba(0, 0, 0, 0.1); 21 | padding: 10px 20px; 22 | font-size: 18px; 23 | } 24 | 25 | input{ 26 | width: 50px; 27 | padding: 5px; 28 | font-size: 18px; 29 | background-color: rgb(143, 138, 137); 30 | border: none; 31 | text-align: center; 32 | } 33 | 34 | input:focus{ 35 | outline: none; 36 | } -------------------------------------------------------------------------------- /31-content-placeholder/images/avatar_hat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/31-content-placeholder/images/avatar_hat.jpg -------------------------------------------------------------------------------- /31-content-placeholder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Content Placeholder 8 | 9 | 10 | 11 |
12 | 15 |
16 |

17 | Lorem ipsum dolor sit amet. 18 |

19 |

20 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, aut. 21 |   22 |   23 |   24 |

25 |
26 |
27 | 28 |
29 |
30 | 31 | John Doe 32 | 33 | 34 | July 05, 2021 35 | 36 |
37 |
38 |
39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /31-content-placeholder/script.js: -------------------------------------------------------------------------------- 1 | const header = document.getElementById('header') 2 | const title = document.getElementById('title') 3 | const excerpt = document.getElementById('excerpt') 4 | const profile_img = document.getElementById('profile_img') 5 | const name = document.getElementById('name') 6 | const date = document.getElementById('date') 7 | 8 | const animated_bgs = document.querySelectorAll('.animated-bg') 9 | const animated_bg_texts = document.querySelectorAll('.animated-bg-text') 10 | 11 | setTimeout(getData, 2500) 12 | 13 | function getData() { 14 | header.innerHTML = 15 | '' 16 | title.innerHTML = 'Lorem ipsum dolor sit amet' 17 | excerpt.innerHTML = 18 | 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis' 19 | profile_img.innerHTML = 20 | '' 21 | name.innerHTML = 'John Doe' 22 | date.innerHTML = 'Oct 08, 2020' 23 | 24 | animated_bgs.forEach((bg) => bg.classList.remove('animated-bg')) 25 | animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text')) 26 | } -------------------------------------------------------------------------------- /31-content-placeholder/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | background-color: #ecf0f1; 7 | font-family: 'Roboto', sans-serif; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | overflow: hidden; 13 | margin: 0; 14 | } 15 | 16 | img{ 17 | max-width: 100%; 18 | } 19 | .card{ 20 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 21 | border-radius: 10px; 22 | overflow: hidden; 23 | width: 350px; 24 | } 25 | .card-header{ 26 | height: 200px; 27 | } 28 | 29 | .card-header img{ 30 | object-fit: cover; 31 | height: 100%; 32 | width: 100%; 33 | } 34 | 35 | .card-content{ 36 | background-color: #fff; 37 | padding: 30px; 38 | } 39 | .card-title{ 40 | height: 20px; 41 | margin: 0; 42 | } 43 | .card-excerpt{ 44 | color: #777; 45 | margin: 10px 0 20px; 46 | } 47 | .author{ 48 | display: flex; 49 | } 50 | .profile-img{ 51 | border-radius: 50%; 52 | overflow: hidden; 53 | height: 40px; 54 | width: 40px; 55 | } 56 | .author-info{ 57 | display: flex; 58 | flex-direction: column; 59 | justify-content: space-around; 60 | margin-left: 10px; 61 | width: 100px; 62 | } 63 | .author-info-small{ 64 | color: #aaa; 65 | margin-top: 5px; 66 | } -------------------------------------------------------------------------------- /32-_Sticky Navbar/images/tumblr_myebwtELvb1st5lhmo1_1280.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/32-_Sticky Navbar/images/tumblr_myebwtELvb1st5lhmo1_1280.jpg -------------------------------------------------------------------------------- /32-_Sticky Navbar/script.js: -------------------------------------------------------------------------------- 1 | const nav = document.querySelector('.nav') 2 | window.addEventListener('scroll',fixNav) 3 | 4 | function fixNav() { 5 | if(window.scrollY > nav.offsetHeight + 150) { 6 | nav.classList.add('active') 7 | 8 | }else { 9 | 10 | nav.classList.remove('active') 11 | } 12 | 13 | } -------------------------------------------------------------------------------- /33-Double-Vertical-Slider/images/4c0efdd7be898125de1a6bf83f041f67.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/33-Double-Vertical-Slider/images/4c0efdd7be898125de1a6bf83f041f67.png -------------------------------------------------------------------------------- /33-Double-Vertical-Slider/images/download (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/33-Double-Vertical-Slider/images/download (1).jpg -------------------------------------------------------------------------------- /33-Double-Vertical-Slider/images/download (2).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/33-Double-Vertical-Slider/images/download (2).jpg -------------------------------------------------------------------------------- /33-Double-Vertical-Slider/images/download.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/33-Double-Vertical-Slider/images/download.jpg -------------------------------------------------------------------------------- /33-Double-Vertical-Slider/images/images.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/33-Double-Vertical-Slider/images/images.jpg -------------------------------------------------------------------------------- /33-Double-Vertical-Slider/images/rose-165819__480.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/33-Double-Vertical-Slider/images/rose-165819__480.jpg -------------------------------------------------------------------------------- /33-Double-Vertical-Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Double Vertical Slider 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

Nature Flower

16 |

all in pink

17 |
18 |
19 |

Bluuue Sky

20 |

withs it's mountains

21 |
22 |
23 |

Lonely Castle

24 |

in the wilderness

25 |
26 |
27 |

Flying Eagle

28 |

in the sunset

29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | 41 | 44 |
45 |
46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /34-Random-Choice-Picker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Choice Picker 8 | 9 | 10 | 11 |
12 |

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

14 | 15 | 16 |
17 | 20 |
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /34-Random-Choice-Picker/script.js: -------------------------------------------------------------------------------- 1 | const tagsEl = document.getElementById('tags') 2 | const textarea = document.getElementById('textarea') 3 | 4 | 5 | textarea.focus() 6 | 7 | textarea.addEventListener('keyup', (e) => { 8 | createTags(e.target.value) 9 | 10 | if(e.key === 'Enter') { 11 | 12 | setTimeout(() => { 13 | e.target.value = '' 14 | }, 10) 15 | 16 | randomSelect() 17 | } 18 | }) 19 | 20 | function createTags(input) { 21 | 22 | const tags = input.split(',').filter(tag => tag.trim() 23 | !== '').map(tag => tag.trim()) 24 | 25 | tagsEl.innerHTML = '' 26 | 27 | tags.forEach(tag => { 28 | const tagEl = document.createElement('span') 29 | tagEl.classList.add('tag') 30 | tagEl.innerText = tag 31 | tagsEl.appendChild(tagEl) 32 | }) 33 | } 34 | 35 | 36 | function randomSelect() { 37 | const times = 30 38 | 39 | const interval = setInterval(() => { 40 | const randomTag = pickRandomtag() 41 | 42 | highLightTag(randomTag) 43 | 44 | setTimeout(() => { 45 | 46 | unHighLightTag(randomTag) 47 | }, 100); 48 | 49 | }, 100); 50 | 51 | setTimeout(() => { 52 | clearInterval(interval) 53 | 54 | setTimeout(() => { 55 | const randomTag = pickRandomtag() 56 | highLightTag(randomTag) 57 | }, 100); 58 | 59 | }, times * 100); 60 | 61 | } 62 | 63 | function pickRandomtag() { 64 | const tags = document.querySelectorAll('.tag') 65 | return tags[Math.floor(Math.random() * tags.length)] 66 | } 67 | 68 | function highLightTag(tag) { 69 | tag.classList.add('highlight') 70 | } 71 | 72 | function unHighLightTag(tag) { 73 | tag.classList.remove('highlight') 74 | } -------------------------------------------------------------------------------- /34-Random-Choice-Picker/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Muli:wght@400;700&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background-color: #2b88f0; 9 | font-family: 'Muli', sans-serif; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | margin: 0; 16 | } 17 | 18 | h3{ 19 | color: #fff; 20 | text-align: center; 21 | margin: 10px 0 20px; 22 | } 23 | 24 | .container{ 25 | width: 500px; 26 | } 27 | 28 | textarea{ 29 | border: none; 30 | display: block; 31 | width: 100%; 32 | height: 100px; 33 | font-family: inherit; 34 | padding: 10px; 35 | margin: 0 0 20px; 36 | font-size: 16px; 37 | } 38 | 39 | .tag{ 40 | background-color: #f0932b; 41 | color: #fff; 42 | border-radius: 50px; 43 | padding: 10px 20px; 44 | margin: 0 5px 10px 0; 45 | font-size: 14px; 46 | display: inline-block; 47 | } 48 | 49 | .tag.highlight{ 50 | background-color: #273c75; 51 | } -------------------------------------------------------------------------------- /35-Kinetic-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Kinetic Loader 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /35-Kinetic-loader/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/35-Kinetic-loader/script.js -------------------------------------------------------------------------------- /35-Kinetic-loader/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | box-sizing: border-box; 4 | } 5 | 6 | body{ 7 | background-color: #2c3e50; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | overflow: hidden; 13 | margin: 0; 14 | } 15 | 16 | .kinetic{ 17 | position: relative; 18 | height: 80px; 19 | width: 80px; 20 | } 21 | 22 | .kinetic::after, 23 | .kinetic::before { 24 | content: ''; 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | width: 0; 29 | height: 0; 30 | border: 50px solid transparent; 31 | border-bottom-color: #fff; 32 | animation: rotateA 2s linear infinite 0.5s; 33 | 34 | } 35 | 36 | .kinetic::before { 37 | transform: rotate(90deg); 38 | animation: rotateB 2s linear infinite; 39 | 40 | } 41 | 42 | @keyframes rotateA { 43 | 0%, 25% { 44 | transform: rotate(0deg); 45 | } 46 | 50%, 75% { 47 | transform: rotate(180deg); 48 | } 49 | 100% { 50 | transform: rotate(360deg); 51 | } 52 | } 53 | 54 | @keyframes rotateB { 55 | 0%, 25% { 56 | transform: rotate(90deg); 57 | } 58 | 50%, 75% { 59 | transform: rotate(270deg); 60 | } 61 | 100% { 62 | transform: rotate(450deg); 63 | } 64 | } -------------------------------------------------------------------------------- /36-Drawing-App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drawing App 8 | 9 | 10 | 11 | 12 |
13 | 14 | 20 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /36-Drawing-App/script.js: -------------------------------------------------------------------------------- 1 | const canvas = document.getElementById('canvas'); 2 | const ctx = canvas.getContext('2d'); 3 | 4 | let size = 20 5 | let isPressed = false 6 | let color = 'back' 7 | let x 8 | let y 9 | 10 | canvas.addEventListener('mousedown', (e) => { 11 | 12 | isPressed = true 13 | 14 | x = e.offsetX 15 | y = e.offsetY 16 | }) 17 | 18 | canvas.addEventListener('mouseup', (e) => { 19 | 20 | isPressed = true 21 | 22 | x = undefined 23 | y = undefined 24 | }) 25 | 26 | canvas.addEventListener('mousemove', (e) => { 27 | 28 | if(isPressed) { 29 | const x2 = e.offsetX 30 | const y2 = e.offsetY 31 | 32 | drawCircle(x2, y2) 33 | drawLine(x,y, x2, y2) 34 | 35 | x = x2 36 | y = y2 37 | } 38 | }) 39 | 40 | 41 | function drawCircle(x, y) { 42 | ctx.beginPath(); 43 | ctx.arc(x, y, size, 0, Math.PI * 2) 44 | ctx.fillStyle = color 45 | ctx.fill(); 46 | } 47 | 48 | function drawLine(x1, y1, x2, y2) { 49 | ctx.beginPath() 50 | ctx.moveTo(x1, y1) 51 | ctx.lineTo(x2, y2) 52 | ctx.strokeStyle = color 53 | ctx.lineWidth = size * 2 54 | ctx.stroke() 55 | } 56 | 57 | 58 | -------------------------------------------------------------------------------- /36-Drawing-App/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); 2 | *{ 3 | box-sizing: border-box; 4 | } 5 | 6 | body{ 7 | background-color: #f5f5f5; 8 | font-family: 'Roboto', sans-serif; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | margin: 0; 15 | } 16 | 17 | canvas{ 18 | border: 2px rgb(0, 140, 255); 19 | } 20 | 21 | .toolbox{ 22 | background-color: steelblue; 23 | border: 1px solid slateblue; 24 | display: flex; 25 | width: 804px; 26 | padding: 1rem; 27 | } 28 | .toolbox > * { 29 | background-color: #fff; 30 | border: none; 31 | display: inline-flex; 32 | align-items: center; 33 | justify-content: center; 34 | font-size: 2rem; 35 | height: 50px; 36 | width: 50px; 37 | padding: 0.25rem; 38 | margin: 0.25rem; 39 | cursor: pointer; 40 | } 41 | 42 | .toolbox > *:last-child { 43 | margin-left: auto; 44 | } -------------------------------------------------------------------------------- /37-Drag-n-Drop/images/download (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/37-Drag-n-Drop/images/download (1).jpg -------------------------------------------------------------------------------- /37-Drag-n-Drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drag N Drop 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /37-Drag-n-Drop/script.js: -------------------------------------------------------------------------------- 1 | 2 | const fill = document.querySelector('.fill') 3 | const empties = document.querySelectorAll('.empty') 4 | 5 | fill.addEventListener('dragstart', dragStart) 6 | fill.addEventListener('dragend', dragEnd) 7 | 8 | 9 | for(const empty of empties) { 10 | empty.addEventListener('dragover', dragOver) 11 | empty.addEventListener('dragenter', dragEnter) 12 | empty.addEventListener('dragleave', dragLeave) 13 | empty.addEventListener('drop', dragDrop) 14 | } 15 | 16 | function dragStart() { 17 | this.className += ' hold' 18 | setTimeout( () => this.className = 'invisible', 0) 19 | } 20 | 21 | function dragEnd() { 22 | this.className = 'fill' 23 | } 24 | function dragOver(e) { 25 | e.preventDefault() 26 | } 27 | function dragEnter(e) { 28 | e.preventDefault() 29 | this.className += ' hovered' 30 | } 31 | function dragLeave() { 32 | console.log('drag leave') 33 | this.className += 'empty' 34 | } 35 | function dragDrop() { 36 | this.className = 'empty' 37 | this.append(fill) 38 | } 39 | 40 | -------------------------------------------------------------------------------- /37-Drag-n-Drop/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | box-sizing: border-box; 4 | } 5 | 6 | body{ 7 | background-color: steelblue; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | overflow: hidden; 13 | margin: 0; 14 | } 15 | 16 | .empty{ 17 | height: 150px; 18 | width: 150px; 19 | margin: 10px; 20 | border: 3px solid black; 21 | background-color: white; 22 | } 23 | 24 | .fill{ 25 | background-image: url(images/download\ \(1\).jpg); 26 | height: 145px; 27 | width: 145px; 28 | cursor: pointer; 29 | } 30 | 31 | .hold{ 32 | border: solid 5px #ccc; 33 | } 34 | 35 | .hovered{ 36 | background-color: #333; 37 | border-color: white; 38 | border-style: dashed; 39 | } 40 | 41 | @media(max-width:800px) { 42 | body{ 43 | flex-direction: column; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /38-Button-Riple=Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Ripple Effect 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /38-Button-Riple=Effect/script.js: -------------------------------------------------------------------------------- 1 | const buttons = document.querySelectorAll('.ripple') 2 | 3 | buttons.forEach(button => { 4 | button.addEventListener('click', function(e) { 5 | const x = e.clientX 6 | const y = e.clientY 7 | 8 | const buttonTop = e.target.offsetTop 9 | const buttonLeft = e.target.offsetLeft 10 | 11 | const xInside = x- buttonLeft 12 | const yInside = y- buttonTop 13 | 14 | const circle = document.createElement('span') 15 | circle.classList.add('circle') 16 | circle.style.top = yInside + 'px' 17 | circle.style.left = xInside + 'px' 18 | 19 | this.appendChild(circle) 20 | 21 | setTimeout(() => circle.remove(), 500) 22 | 23 | }) 24 | }) -------------------------------------------------------------------------------- /38-Button-Riple=Effect/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | *{ 3 | box-sizing: border-box; 4 | } 5 | 6 | body{ 7 | background-color: #000; 8 | font-family: 'Muli', sans-serif; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | height: 100vh; 13 | overflow: hidden; 14 | margin: 0; 15 | } 16 | 17 | button{ 18 | background-color: purple; 19 | color: #fff; 20 | border: 1px solid purple; 21 | font-size: 14px; 22 | text-transform: uppercase; 23 | letter-spacing: 2px; 24 | padding: 20px 30px; 25 | overflow: hidden; 26 | margin: 10px 0; 27 | position: relative; 28 | } 29 | 30 | button:focus{ 31 | outline: none; 32 | } 33 | 34 | button .circle{ 35 | background-color: #fff; 36 | position: absolute; 37 | width: 100px; 38 | height: 100px; 39 | border-radius: 50%; 40 | transform: translate(-50%, -50%) scale(0); 41 | animation: scale 0.5s ease-in-out; 42 | } 43 | 44 | @keyframes scale { 45 | to{ 46 | transform: translate(-50%, -50%) scale(3); 47 | opacity: 0; 48 | } 49 | } 50 | 51 | -------------------------------------------------------------------------------- /39-Theme-Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Theme Clock 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /39-Theme-Clock/script.js: -------------------------------------------------------------------------------- 1 | const hourEl = document.querySelector('.hour') 2 | const minuteEl = document.querySelector('.minute') 3 | const secondEl = document.querySelector('.second') 4 | const timeEl = document.querySelector('.time') 5 | const dateEl = document.querySelector('.date') 6 | const toggle = document.querySelector('.toggle') 7 | 8 | const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thusday", "Friday", "Saturday"]; 9 | const months = ["Jan", "Feb", "Mar", "Apr", "May", "jun", "jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 10 | 11 | toggle.addEventListener('click', (e) => { 12 | const html = document.querySelector('html') 13 | if(html.classList.contains('dark')){ 14 | html.classList.remove('dark') 15 | e.target.innerHTML = 'Dark mode' 16 | }else{ 17 | html.classList.add('dark') 18 | e.target.innerHTML = 'Light mode' 19 | } 20 | }) 21 | 22 | function setTime() { 23 | const time = new Date(); 24 | const month = time.getMonth(); 25 | const day = time.getDay(); 26 | const date = time.getDate(); 27 | const hours = time.getHours(); 28 | const hoursForClock = hours % 12 29 | const minutes = time.getMinutes(); 30 | const seconds = time.getSeconds(); 31 | const ampm = hours >=12 ? 'PM' : 'AM' 32 | 33 | 34 | hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0 ,11, 0, 360)}deg)` 35 | minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0 ,59, 0, 360)}deg)` 36 | secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0 ,59, 0, 360)}deg)` 37 | 38 | timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}`: minutes}${ampm}` 39 | 40 | dateEl.innerHTML = `${days[day]},${months[month]} ${date}` 41 | 42 | 43 | 44 | } 45 | 46 | 47 | const scale = (num, in_min, in_max, out_min, out_max) => { 48 | return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; 49 | } 50 | 51 | setTime() 52 | 53 | setInterval(setTime, 1000) 54 | 55 | -------------------------------------------------------------------------------- /40-Background-slider/images/download (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/40-Background-slider/images/download (1).jpg -------------------------------------------------------------------------------- /40-Background-slider/images/download (2).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/40-Background-slider/images/download (2).jpg -------------------------------------------------------------------------------- /40-Background-slider/images/download (3).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/40-Background-slider/images/download (3).jpg -------------------------------------------------------------------------------- /40-Background-slider/images/download.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/40-Background-slider/images/download.jpg -------------------------------------------------------------------------------- /40-Background-slider/images/laptop-backgrounds-nature-images-1920x1200-wallpaper-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/40-Background-slider/images/laptop-backgrounds-nature-images-1920x1200-wallpaper-preview.jpg -------------------------------------------------------------------------------- /40-Background-slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Background Slider 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 | 29 | 32 | 33 | 36 |
37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /40-Background-slider/script.js: -------------------------------------------------------------------------------- 1 | const body = document.body 2 | const slides = document.querySelectorAll('.slide') 3 | const leftBtn = document.getElementById('left') 4 | const rightBtn = document.getElementById('right') 5 | 6 | let activeSlide = 0 7 | 8 | rightBtn.addEventListener('click', () => { 9 | activeSlide++ 10 | 11 | if(activeSlide > slides.length -1) { 12 | activeSlide = 0 13 | } 14 | 15 | setBgToBody() 16 | setActiveSlide() 17 | }) 18 | 19 | leftBtn.addEventListener('click', () => { 20 | activeSlide-- 21 | 22 | if(activeSlide < 0) { 23 | activeSlide = slides.length -1 24 | } 25 | 26 | setBgToBody() 27 | setActiveSlide() 28 | }) 29 | 30 | 31 | 32 | 33 | setBgToBody() 34 | 35 | function setBgToBody() { 36 | body.style.backgroundImage = slides[activeSlide].style.backgroundImage 37 | } 38 | 39 | function setActiveSlide() { 40 | slides.forEach((slide) => slide.classList.remove('active')) 41 | 42 | slides[activeSlide].classList.add('active') 43 | } -------------------------------------------------------------------------------- /40-Background-slider/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); 2 | *{ 3 | box-sizing: border-box; 4 | } 5 | 6 | body{ 7 | font-family: 'Roboto', sans-serif; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | height: 100vh; 13 | overflow: hidden; 14 | margin: 0; 15 | background-position: center center; 16 | background-size: cover; 17 | transition: 0.4s ; 18 | } 19 | 20 | body::before{ 21 | content: ''; 22 | position: absolute; 23 | left: 0; 24 | top: 0; 25 | width: 100%; 26 | height: 100vh; 27 | background-color:rgba(0, 0, 0, 0.7) ; 28 | z-index: -1; 29 | } 30 | 31 | .slider-container{ 32 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 33 | height: 70vh; 34 | width: 70vw; 35 | position: relative; 36 | overflow: hidden; 37 | } 38 | .slide{ 39 | opacity: 0; 40 | height: 100vh; 41 | width: 100vw; 42 | background-position: center center; 43 | background-size: cover; 44 | position: absolute; 45 | left: -15vh; 46 | left: -15vw; 47 | transition: 0.4s ease; 48 | z-index: 1; 49 | } 50 | 51 | .slide.active{ 52 | opacity: 1; 53 | } 54 | 55 | .arrow{ 56 | position: fixed; 57 | background-color: transparent; 58 | color: #fff; 59 | padding: 20px; 60 | font-size: 30px; 61 | z-index: 100; 62 | border: 2px solid orange; 63 | top: 50%; 64 | transform: translateY(-50%); 65 | cursor: pointer; 66 | } 67 | 68 | .arrow:focus{ 69 | outline: 0; 70 | } 71 | 72 | .left-arrow{ 73 | left: calc(15vw - 65px); 74 | } 75 | 76 | .right-arrow{ 77 | right: calc(15vw - 65px); 78 | } -------------------------------------------------------------------------------- /41-Movie-App/images/app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/41-Movie-App/images/app.jpg -------------------------------------------------------------------------------- /41-Movie-App/images/app2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/41-Movie-App/images/app2.jpg -------------------------------------------------------------------------------- /41-Movie-App/images/app4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/41-Movie-App/images/app4.jpg -------------------------------------------------------------------------------- /41-Movie-App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Movie App 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /41-Movie-App/script.js: -------------------------------------------------------------------------------- 1 | const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1' 2 | const IMG_PATH = 'https://image.tmdb.org/t/p/w1280' 3 | const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="' 4 | 5 | 6 | 7 | const main = document.getElementById('main') 8 | const form = document.getElementById('form') 9 | const search = document.getElementById('search') 10 | 11 | // Get initial movies 12 | getMovies(API_URL) 13 | 14 | async function getMovies(url) { 15 | const res = await fetch(url) 16 | const data = await res.json() 17 | 18 | showMovies(data.results) 19 | } 20 | 21 | function showMovies(movies) { 22 | main.innerHTML = '' 23 | 24 | movies.forEach((movie) => { 25 | const { title, poster_path, vote_average, overview } = movie 26 | 27 | const movieEl = document.createElement('div') 28 | movieEl.classList.add('movie') 29 | 30 | movieEl.innerHTML = ` 31 | ${title} 32 |
33 |

${title}

34 | ${vote_average} 35 |
36 |
37 |

Overview

38 | ${overview} 39 |
40 | ` 41 | main.appendChild(movieEl) 42 | }) 43 | } 44 | 45 | function getClassByRate(vote) { 46 | if(vote >= 8) { 47 | return 'green' 48 | } else if(vote >= 5) { 49 | return 'orange' 50 | } else { 51 | return 'red' 52 | } 53 | } 54 | 55 | form.addEventListener('submit', (e) => { 56 | e.preventDefault() 57 | 58 | const searchTerm = search.value 59 | 60 | if(searchTerm && searchTerm !== '') { 61 | getMovies(SEARCH_API + searchTerm) 62 | 63 | search.value = '' 64 | } else { 65 | window.location.reload() 66 | } 67 | }) -------------------------------------------------------------------------------- /42-Drink-Water/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drink Water 8 | 9 | 10 | 11 |

Drink Water

12 |

Goal: 2Liters

13 | 14 |
15 |
16 | 17 | Remained 18 |
19 |
20 |
21 |

22 | Select how many glasses of water that you have drunk 23 |

24 |
25 |
250 ml
26 |
250 ml
27 |
250 ml
28 |
250 ml
29 |
250 ml
30 |
250 ml
31 |
250 ml
32 |
250 ml
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /42-Drink-Water/script.js: -------------------------------------------------------------------------------- 1 | const smallCups = document.querySelectorAll('.cup-small') 2 | const listers = document.getElementById('liters') 3 | const percentage = document.getElementById('percentage') 4 | const remained = document.getElementById('remained') 5 | 6 | 7 | updateBigCup() 8 | 9 | smallCups.forEach((cup,idx) => { 10 | cup.addEventListener('click',() => highlightCups(idx)) 11 | 12 | }) 13 | 14 | function highlightCups(idx) { 15 | 16 | if(smallCups[idx].classList.contains('full') && 17 | !smallCups[idx].nextElementSibling.classList.contains('full')){ 18 | 19 | idx-- 20 | } 21 | 22 | smallCups.forEach((cup,idx2) => { 23 | if(idx2 <= idx ) { 24 | cup.classList.add('full') 25 | 26 | }else{ 27 | cup.classList.remove('full') 28 | } 29 | }) 30 | 31 | updateBigCup() 32 | } 33 | 34 | function updateBigCup() { 35 | const fullCups = document.querySelectorAll('.cup-small.full').length 36 | const totalCups = smallCups.length 37 | 38 | if(fullCups === 0) { 39 | percentage.style.visibility = 'hidden' 40 | percentage.style.height = '0' 41 | }else{ 42 | percentage.style.visibility = 'visible' 43 | percentage.style.height = `${fullCups / totalCups *330}px` 44 | percentage.innerText = `${fullCups / totalCups *100}%` 45 | } 46 | 47 | if(fullCups === totalCups) { 48 | remained.style.visibility = 'hidden' 49 | remained.style.height = '0' 50 | }else{ 51 | remained.style.visibility = 'visible' 52 | listers.innerText = `${2 - (250 * fullCups /1000)}L` 53 | } 54 | 55 | } -------------------------------------------------------------------------------- /43-Incrementing-Counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Increment Counter 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | Twitter Followers 16 |
17 | 18 |
19 | 20 |
21 | Youtube Subcribers 22 |
23 | 24 |
25 | 26 |
27 | Facebook Fans 28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /43-Incrementing-Counter/script.js: -------------------------------------------------------------------------------- 1 | const counters = document.querySelectorAll('.counter') 2 | 3 | counters.forEach(counter => { 4 | counter.innerText = '0' 5 | 6 | const updateCounter = () => { 7 | const target = counter.getAttribute('data-target') 8 | const c = +counter.innerText 9 | const increment = target / 200 10 | 11 | if(c < target) { 12 | counter.innerText = `${Math.ceil(c + increment)}` 13 | setTimeout (updateCounter,1) 14 | }else{ 15 | counter.innerText = target 16 | } 17 | } 18 | 19 | updateCounter() 20 | }) 21 | -------------------------------------------------------------------------------- /43-Incrementing-Counter/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); 2 | *{ 3 | box-sizing: border-box; 4 | } 5 | 6 | body{ 7 | background-color: #8e44ad; 8 | color: #fff; 9 | font-family: 'Roboto Mono', sans-serif; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | margin: 0; 16 | } 17 | 18 | .counter-container{ 19 | display: flex; 20 | flex-direction: column; 21 | text-align: center; 22 | justify-content: center; 23 | padding: 30px 50px; 24 | } 25 | 26 | .counter{ 27 | font-size: 60px; 28 | margin-top: 10px; 29 | } 30 | 31 | @media (max-width:580px) { 32 | body{ 33 | flex-direction: column; 34 | } 35 | } -------------------------------------------------------------------------------- /44-Animated-Navagation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated Navigation 8 | 9 | 10 | 11 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /44-Animated-Navagation/script.js: -------------------------------------------------------------------------------- 1 | const toggle = document.getElementById('toggle') 2 | const nav = document.getElementById('nav') 3 | 4 | toggle.addEventListener('click', () => 5 | nav.classList.toggle('active')) -------------------------------------------------------------------------------- /Age-Calculator/app.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector('.container'); 2 | const error = document.querySelector('.error'); 3 | 4 | function getAge(){ 5 | 6 | const dobValue = document.getElementById('dob').value; 7 | 8 | //if the dob value is falsy, then simply return 9 | if(!dobValue) return; 10 | 11 | //stores dob ----- Date Wed Sep 01 1999 05:30:00 GMT+0530 (India Standard Time) 12 | let dob = new Date(dobValue); 13 | 14 | //current date 15 | const today = new Date(); 16 | 17 | 18 | let diff = today - dob; 19 | let age = diff / (1000 * 60 * 60 * 24 * 365); //21.375 20 | 21 | calcAge(age); 22 | } 23 | 24 | function calcAge(age){ 25 | let year = Math.floor(age); //21 26 | let remainingYear = age - year; //0.375 27 | 28 | let monthDiff = remainingYear * 12; //4.5 29 | let month = Math.floor(monthDiff); //4 30 | 31 | let remainingMonth = monthDiff - month; //0.5 32 | let day = Math.floor(remainingMonth * 30); //15 33 | 34 | //display age to UI 35 | displayAge(year, month, day); 36 | } 37 | 38 | function displayAge(y,m,d){ 39 | 40 | const years = document.getElementById('years'); 41 | const months = document.getElementById('months'); 42 | const days = document.getElementById('days'); 43 | 44 | years.innerText = y; 45 | months.innerText = m; 46 | days.innerText = d; 47 | 48 | if(y >= 0){ 49 | error.style.display = `none`; 50 | } 51 | if(y < 0){ 52 | error.style.display = `block`; 53 | } 54 | } 55 | 56 | container.addEventListener('input', getAge); -------------------------------------------------------------------------------- /Age-Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Age Calculator 7 | 8 | 9 | 10 |
11 | 12 | 13 |

Your Age is :

14 |

15 | years 16 | months 17 | days 18 |

19 |

Welcome Time Traveller 🔮

20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Age-Calculator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html, 7 | body { 8 | font-size: 10px; 9 | font-family: 'lato', Arial, Helvetica, sans-serif; 10 | } 11 | body { 12 | min-height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | .container { 18 | display: flex; 19 | flex-direction: column; 20 | text-align: center; 21 | height: 40rem; 22 | min-width: 30rem; 23 | align-items: center; 24 | } 25 | .container label { 26 | font-size: 2rem; 27 | margin-bottom: 1rem; 28 | } 29 | .container #dob { 30 | margin-bottom: 3rem; 31 | } 32 | .container .desc { 33 | font-size: 2rem; 34 | margin-bottom: 4rem; 35 | } 36 | .container .age { 37 | font-size: 3rem; 38 | } 39 | .container .age > span { 40 | font-weight: bold; 41 | } 42 | .error { 43 | display: none; 44 | font-size: 4rem; 45 | } -------------------------------------------------------------------------------- /Analog-clock/app.js: -------------------------------------------------------------------------------- 1 | function getAngle(){ 2 | //Get hand Elements 3 | const hourHand = document.querySelector('.hour'); 4 | const minuteHand = document.querySelector('.minute'); 5 | const secondHand = document.querySelector('.second'); 6 | 7 | //hours, minutes and seconds 8 | const today = new Date(); //Date object 9 | let hours = today.getHours(); 10 | let minutes = today.getMinutes(); 11 | let seconds = today.getSeconds(); 12 | 13 | // angle of rotation of hands 14 | let hrHandRotation = 30*hours + minutes/2 + seconds/120; 15 | let minHandRotation = 6*minutes + seconds/10; 16 | let secHandRotation = 6*seconds; 17 | 18 | //now rotate the hands 19 | //adding translateX here otherwise only rotate works 20 | hourHand.style.transform = `translateX(-50%) rotate(${hrHandRotation}deg)`; 21 | minuteHand.style.transform = `translateX(-50%) rotate(${minHandRotation}deg)`; 22 | secondHand.style.transform = `translateX(-50%) rotate(${secHandRotation}deg)`; 23 | } 24 | 25 | getAngle(); //to start the clock as soon as page loads otherwise it jumps to current time abruptly form 12 26 | 27 | setInterval(getAngle, 1000); -------------------------------------------------------------------------------- /Analog-clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Analog Clock 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
5
19 |
6
20 |
7
21 |
8
22 |
9
23 |
10
24 |
11
25 |
12
26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /BMI-Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BMI Calculator 7 | 8 | 9 | 10 |
11 |

BMI Calculator

12 |
13 | 14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 |
BMI
22 |

Body Weight

23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /BMI-Calculator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | *::before, 7 | *::after { box-sizing: border-box; } 8 | html, 9 | body { 10 | font-size: 10px; 11 | font-family: 'lato', Arial, sans-serif; 12 | } 13 | body { 14 | background: #d5d6d7; 15 | color: #4d5468; 16 | min-height: 100vh; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | .container { 22 | width: 30rem; 23 | height: 50rem; 24 | background: inherit; 25 | box-shadow: 0 0 18px 8px rgba(0, 0, 0, 0.2); 26 | border-radius: 1rem; 27 | display: flex; 28 | flex-direction: column; 29 | align-items: center; 30 | justify-content: space-between; 31 | padding: 1rem; 32 | } 33 | .container .title { font-size: 2.2rem; } 34 | .weight-wrapper, 35 | .height-wrapper { 36 | display: flex; 37 | flex-direction: column; 38 | align-items: center; 39 | font-size: 1.7rem; 40 | } 41 | .input-box { 42 | text-align: center; 43 | border: none; 44 | outline: none; 45 | border-radius: 0.6rem; 46 | height: 2.5rem; 47 | margin-top: 1.1rem; 48 | } 49 | .result-wrapper { 50 | display: flex; 51 | flex-direction: column; 52 | align-items: center; 53 | margin-bottom: 3rem; 54 | } 55 | .bmi { 56 | font-size: 4rem; 57 | width: 14rem; 58 | height: 14rem; 59 | border-radius: 50%; 60 | background: white; 61 | display: flex; 62 | justify-content: center; 63 | align-items: center; 64 | border: 1rem solid #2ca1bc; 65 | transition: border-color 0.3s ease-in-out; 66 | } 67 | .desc { 68 | font-size: 1.5rem; 69 | margin-top: 2rem; 70 | } 71 | .bmi-category { font-weight: bold; } -------------------------------------------------------------------------------- /Binary2Decimal/app.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector('.container'); 2 | 3 | container.addEventListener('submit', (event)=>{ 4 | 5 | event.preventDefault(); 6 | 7 | let decimal = 0; 8 | let counter = 0; 9 | 10 | const result = document.querySelector('.result'); 11 | let binary = document.querySelector('#binary').value; 12 | 13 | while(binary > 0){ 14 | let lastDigit = Math.round(binary % 10); 15 | decimal += Math.pow(2, counter) * lastDigit; 16 | counter++; 17 | binary /= 10; 18 | } 19 | 20 | result.textContent = `Decimal Number : ${decimal}`; 21 | }); -------------------------------------------------------------------------------- /Binary2Decimal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Binary to decimal converter 7 | 8 | 9 | 10 |
11 |

Binary to Decimal Converter

12 |
13 | 14 | 15 |
16 |
17 | 18 |
19 |
20 |

Decimal Number : 0

21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /Binary2Decimal/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | :root { 7 | 8 | } 9 | body { 10 | font-family: Roboto, 'sans-serif'; 11 | font-size: 16px; 12 | min-height: 100vh; 13 | background: linear-gradient(41deg, #90ecce,#26ff85); 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | .container { 19 | background-color: rgba(255, 255, 255, 0.6); 20 | border-radius: 5px; 21 | height: 25rem; 22 | width: 20rem; 23 | padding: 1rem; 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: center; 27 | align-items: center; 28 | } 29 | .title { 30 | font-size: 1.4rem; 31 | } 32 | #binary { 33 | height: 1.5rem; 34 | border-radius: 5px; 35 | margin-top: 0.5rem; 36 | height: 2rem; 37 | } 38 | .row { 39 | margin: 1rem; 40 | text-align: center; 41 | } 42 | .btn { 43 | width: 5rem; 44 | height: 2rem; 45 | border-radius: 5px; 46 | background: black; 47 | color: white; 48 | border: none; 49 | cursor: pointer; 50 | } -------------------------------------------------------------------------------- /Blurry Loading/images/553ebc3377b2cd2dc3cc5e0e0f26d4f9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Blurry Loading/images/553ebc3377b2cd2dc3cc5e0e0f26d4f9.png -------------------------------------------------------------------------------- /Blurry Loading/images/IMG_20210218_001301_730.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Blurry Loading/images/IMG_20210218_001301_730.jpg -------------------------------------------------------------------------------- /Blurry Loading/images/team1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Blurry Loading/images/team1.jpg -------------------------------------------------------------------------------- /Blurry Loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blurry loading 8 | 9 | 10 | 11 |
12 |
0%
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Blurry Loading/script.js: -------------------------------------------------------------------------------- 1 | const loadText = document.querySelector('.loading-text') 2 | const bg = document.querySelector('.bg') 3 | 4 | let load = 0 5 | 6 | let int = setInterval(blurring, 30) 7 | 8 | function blurring() { 9 | load++ 10 | 11 | if(load > 99){ 12 | clearInterval(int) 13 | } 14 | 15 | loadText.innerText = `${load}%` 16 | loadText.style.opacity = scale(load, 0, 100, 1, 0) 17 | bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)` 18 | } 19 | 20 | const scale = (num, in_min, in_max, out_min, out_max) => { 21 | return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; 22 | } -------------------------------------------------------------------------------- /Blurry Loading/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | font-family: 'Ubuntu', sans-serif; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | height: 100vh; 13 | overflow: hidden; 14 | margin: 0; 15 | } 16 | 17 | .bg{ 18 | background: url(images/553ebc3377b2cd2dc3cc5e0e0f26d4f9.png); 19 | position: absolute; 20 | background-repeat: no-repeat; 21 | background-position: center; 22 | background-size: cover; 23 | left: -30; 24 | top: -30; 25 | width: calc(100vw + 60px); 26 | height: calc(100vh + 60px); 27 | z-index: -1; 28 | filter: blur(0px); 29 | } 30 | 31 | .loading-text{ 32 | font-size: 50px; 33 | color: #fff; 34 | } -------------------------------------------------------------------------------- /Border-Radius/app.js: -------------------------------------------------------------------------------- 1 | //DOM Elements 2 | 3 | const shapeElem = document.querySelector('.shape'); 4 | const leftElem = document.getElementById('left'); 5 | const topElem = document.getElementById('top'); 6 | const rightElem = document.getElementById('right'); 7 | const bottomElem = document.getElementById('bottom'); 8 | const rangerElem = document.getElementById('ranger'); 9 | const codeElem = document.querySelector('.code'); 10 | 11 | 12 | function leftSlider(event){ 13 | //go furthur only if id is left 14 | if (event.target.id !== `left`) return; 15 | 16 | //when #left is checked 17 | if(event.target.checked){ 18 | ranger(leftElem); 19 | } 20 | } 21 | 22 | function ranger(){ 23 | let rangerValue = rangerElem.value; 24 | leftElem.style.top = `${rangerValue}%`; 25 | } 26 | 27 | 28 | 29 | 30 | // //Change postion of slider 31 | 32 | // function leftSlider(event) { 33 | // //go furthur only if id is left 34 | // if (event.target.id !== `left`) return; 35 | 36 | // //when #left is checked 37 | // if(event.target.checked){ 38 | // console.log(rangerElem.value); 39 | // // rangerHandle(); 40 | // } 41 | // } 42 | 43 | // function rangerHandle(){ 44 | // leftElem.style.top = rangerElem.value; 45 | // } 46 | 47 | // function sliderHandler(event) { 48 | // leftSlider(event); 49 | // // topSlider(event); 50 | // // rightSlider(event); 51 | // // bottomSlider(event); 52 | // } 53 | 54 | // //Event 55 | 56 | document.addEventListener('change', ranger); 57 | 58 | 59 | -------------------------------------------------------------------------------- /Border-Radius/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Border Radius 7 | 8 | 9 | 10 |
11 |

Border Radius

12 |
13 |
14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 |

border-radius

22 |
23 |
20% 80% 60% 40% / 60% 50% 50% 40%
24 | 25 |
26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /Box-Shadow-Generator/app.js: -------------------------------------------------------------------------------- 1 | //Stores all the input elements into a nodeList 2 | const inputsNodeList = document.querySelectorAll('.property input'); 3 | 4 | function handleUpdate(){ 5 | // DOM Elements 6 | 7 | const box = document.querySelector('.box'); 8 | const hOffset = document.getElementById('h-offset').value; 9 | const vOffset = document.getElementById('v-offset').value; 10 | const blurRadius = document.getElementById('blur').value; 11 | const spread = document.getElementById('spread').value; 12 | const color = document.getElementById('color').value; 13 | const moz = document.querySelector('.moz'); 14 | const webkit = document.querySelector('.webkit'); 15 | const normal = document.querySelector('.normal'); 16 | 17 | //updating styles of box 18 | let boxShadowValue = box.style.boxShadow; 19 | box.style.boxShadow = `${hOffset}px ${vOffset}px ${blurRadius}px ${spread}px ${color}`; 20 | 21 | //updating css value to be copied 22 | moz.textContent = `-moz-box-shadow: ${boxShadowValue}`; 23 | webkit.textContent = `-webkit-box-shadow: ${boxShadowValue}`; 24 | normal.textContent = `box-shadow: ${boxShadowValue}`; 25 | 26 | } 27 | 28 | 29 | //Event listeners 30 | inputsNodeList.forEach(input => { 31 | input.addEventListener('change', handleUpdate); 32 | }); 33 | inputsNodeList.forEach(input => { 34 | input.addEventListener('mousemove', handleUpdate); 35 | }); 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Box-Shadow-Generator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | *::before, 7 | *::after { 8 | box-sizing: border-box; 9 | } 10 | html, 11 | body { 12 | font-size: 10px; 13 | font-family: 'lato', Arial, Helvetica, sans-serif; 14 | } 15 | body { 16 | min-height: 100vh; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | background: #ffffff; 21 | } 22 | .container { 23 | max-width: 50rem; 24 | width: 80%; 25 | min-height: 60rem; 26 | background: inherit; 27 | display: flex; 28 | flex-direction: column; 29 | align-items: center; 30 | justify-content: space-between; 31 | padding: 1rem; 32 | } 33 | .box { 34 | background: #5c0275; 35 | color: white; 36 | padding: 2rem 3.5rem; 37 | box-shadow: 0 0 10px 10px rgb(226, 102, 30); 38 | } 39 | .properties-wrapper { 40 | font-size: 1.5rem; 41 | } 42 | .property { 43 | display: flex; 44 | align-items: center; 45 | justify-content: space-between; 46 | padding: 0.6rem 0; 47 | } 48 | .property > input { 49 | width: 10rem; 50 | margin: 0 2rem; 51 | } 52 | .output { 53 | font-size: 1.5rem; 54 | font-family: monospace; 55 | max-width: 40rem; 56 | height: 14rem; 57 | background: #333333; 58 | color: #ffffff; 59 | border-radius: 0.5rem; 60 | text-align: left; 61 | } 62 | .code { 63 | padding: 1rem; 64 | } 65 | .code > p { 66 | margin-bottom: 1rem; 67 | } -------------------------------------------------------------------------------- /Calculator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | :root { 7 | --bg : #22252d; 8 | --btn-bg : #272b33; 9 | --btn-green : #26f7d1; 10 | --btn-red : #ff1214; 11 | --controls-bg : #292d36; 12 | } 13 | html, 14 | body { 15 | font-size: 10px; 16 | font-family: 'lato', Arial, Helvetica, sans-serif; 17 | } 18 | body { 19 | min-height: 100vh; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | background-color: #e3e3e3; 24 | } 25 | .container { 26 | width: 28rem; 27 | height: 50rem; 28 | background-color:var(--bg); 29 | border-radius: 2rem; 30 | } 31 | .screen { 32 | height: 35%; 33 | color: white; 34 | display: flex; 35 | flex-direction: column; 36 | justify-content: end; 37 | align-items: end; 38 | padding: 2rem; 39 | letter-spacing: 1.5px; 40 | } 41 | .calc { 42 | font-size: 1.6rem; 43 | } 44 | .result { 45 | font-size: 3rem; 46 | word-break: break-all; 47 | word-wrap: break-word; 48 | } 49 | .controls { 50 | height: 65%; 51 | background: var(--controls-bg); 52 | border-radius: 2rem; 53 | padding: 2rem; 54 | } 55 | .btn-row { 56 | display: flex; 57 | justify-content: space-between; 58 | } 59 | button { 60 | background-color: var(--btn-bg); 61 | color: white; 62 | border: none; 63 | cursor: pointer; 64 | padding: 1rem; 65 | border-radius: 0.4rem; 66 | width: 5rem; 67 | font-size: 2.2rem; 68 | margin-bottom: 1.3rem; 69 | transition: background-color 0.2s ease; 70 | outline: none; /* Bad for assesibility */ 71 | } 72 | button:hover, 73 | button:active { 74 | background-color: #20232b; 75 | } 76 | .btn-green { 77 | color: var(--btn-green); 78 | } 79 | .btn-green.clear { 80 | width: 11.2rem; 81 | } 82 | .btn-red { 83 | color: var(--btn-red); 84 | } -------------------------------------------------------------------------------- /Code-Music/app.js: -------------------------------------------------------------------------------- 1 | //Api 2 | const api = 'https://coderadio-admin.freecodecamp.org/api/live/nowplaying/coderadio'; 3 | 4 | //DOM Elements 5 | const songTitleElement = document.querySelector('.track-title'); 6 | const songArtistElement = document.querySelector('.track-artist'); 7 | const playerElement = document.getElementById('player'); 8 | const selectBitrateElement = document.getElementById('select-bitrate'); 9 | 10 | const song = { 11 | bitrate : {}, 12 | url : {} 13 | }; 14 | 15 | function getSong(){ 16 | fetch(api) 17 | .then(response => { 18 | return response.json(); 19 | }) 20 | .then(data => { 21 | console.log(data); 22 | song.title = data.now_playing.song.title; 23 | song.artist = data.now_playing.song.artist; 24 | 25 | song.bitrate.high = data.station.mounts[0].bitrate; 26 | song.url.high = data.station.mounts[0].url; 27 | 28 | song.bitrate.low = data.station.mounts[1].bitrate; 29 | song.url.low = data.station.mounts[1].url; 30 | }) 31 | .then(() => { 32 | displayInfo(); 33 | }) 34 | .catch(error =>{ 35 | songTitleElement.innerText = error.message; 36 | }); 37 | } 38 | 39 | function displayInfo(){ 40 | songTitleElement.innerText = song.title; 41 | songArtistElement.innerText = song.artist; 42 | let link = changeBitrate(); 43 | if(playerElement.getAttribute('src') != link){ 44 | playerElement.pause(); 45 | playerElement.setAttribute('src', link); 46 | playerElement.load(); 47 | playerElement.play(); 48 | } 49 | } 50 | 51 | function changeBitrate(){ 52 | switch(selectBitrateElement.value){ 53 | case 'normal-128' : 54 | return song.url.high; 55 | case 'normal-64' : 56 | return song.url.low; 57 | default : 58 | return; 59 | } 60 | } 61 | getSong(); 62 | selectBitrateElement.addEventListener('change', getSong); -------------------------------------------------------------------------------- /Code-Music/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code Music 🎧 7 | 8 | 9 | 10 |
11 |

Code Music

12 |

13 |

14 | 15 | 19 |
20 |

This project is a part of 60 Minute javascript

21 | 22 | 23 | -------------------------------------------------------------------------------- /Code-Music/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html, 7 | body { 8 | font-size: 10px; 9 | font-family: 'lato', Arial, Helvetica, sans-serif; 10 | } 11 | body { 12 | min-height: 100vh; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | align-items: center; 17 | background-color: #fff; 18 | } 19 | .container { 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: space-evenly; 23 | align-items: center; 24 | background: linear-gradient(0deg, #ffd42f, #d3aeff); 25 | width: 30rem; 26 | height: 50rem; 27 | border-radius: 2rem; 28 | padding: 1rem; 29 | } 30 | .title { 31 | font-size: 4rem; 32 | } 33 | .track-title { 34 | font-size: 2.2rem; 35 | margin-bottom: -5rem; 36 | text-align: center; 37 | } 38 | .track-artist { 39 | font-size: 1.7rem; 40 | } 41 | .footer { 42 | font-size: 1.2rem; 43 | position: relative; 44 | bottom: -2rem; 45 | } -------------------------------------------------------------------------------- /Currency-Converter/app.js: -------------------------------------------------------------------------------- 1 | const currency1InputElem = document.getElementById('currency-1'); 2 | const selectCurrency1 = document.getElementById('select-currency-1'); 3 | const currency2InputElem = document.getElementById('currency-2'); 4 | const selectCurrency2 = document.getElementById('select-currency-2'); 5 | const rateDetail = document.getElementById('rate-detail'); 6 | 7 | calc(); 8 | 9 | function calc(){ 10 | 11 | const selectCurrency1value = selectCurrency1.value; 12 | const selectCurrency2value = selectCurrency2.value; 13 | 14 | fetch(`https://api.exchangerate-api.com/v4/latest/${selectCurrency1value}`) 15 | .then(response => { 16 | //if promise wasn't resolved 17 | if(!response.ok){ 18 | throw new Error('Network response was not ok'); 19 | } 20 | return response.json(); 21 | }) 22 | .then(data => { 23 | 24 | const val = data.rates[selectCurrency2value]; 25 | currency2InputElem.value = (currency1InputElem.value * val).toFixed(3); 26 | 27 | rateDetail.innerText = `1 ${selectCurrency1value} = ${val.toFixed(3)} ${selectCurrency2value}`; 28 | }) 29 | .catch(error => { 30 | console.log('problem : ', error); 31 | }); 32 | } 33 | 34 | currency1InputElem.addEventListener('input', calc); 35 | currency2InputElem.addEventListener('input', calc); 36 | 37 | selectCurrency1.addEventListener('change', calc); 38 | selectCurrency2.addEventListener('change', calc); -------------------------------------------------------------------------------- /Currency-Converter/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html, 7 | body { 8 | font-size: 10px; 9 | font-family: 'lato', Arial, Helvetica, sans-serif; 10 | } 11 | body { 12 | min-height: 100vh; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | align-items: center; 17 | background-color: #6bc1c1; 18 | background-image: linear-gradient(315deg, #73a6e8 0%, #64d7a1 74%); 19 | } 20 | .container { 21 | display: flex; 22 | flex-direction: column; 23 | align-items: center; 24 | height: 80vh; 25 | text-align: center; 26 | padding: 1.5rem; 27 | justify-content: space-evenly; 28 | } 29 | .title { font-size: 3rem; } 30 | .row { 31 | display: flex; 32 | justify-content: space-between; 33 | background: linear-gradient(315deg, #89dbb9 0%, #cbcedb 74%); 34 | height: 5rem; 35 | padding: 1rem; 36 | border-radius: 0.5rem; 37 | } 38 | input { margin-right: 2rem; } 39 | input, 40 | select { 41 | font-size: 1.7rem; 42 | border: none; 43 | background: transparent; 44 | } 45 | #rate-detail { 46 | font-size: 1.8rem; 47 | border-bottom: 3px dotted #035d66; 48 | } 49 | .footer { 50 | font-size: 1.2rem; 51 | position: relative; 52 | bottom: -2rem; 53 | letter-spacing: 1px; 54 | } 55 | .footer > a { text-decoration: none; } -------------------------------------------------------------------------------- /Dark-Mode/app.js: -------------------------------------------------------------------------------- 1 | const btn = document.querySelector('.btn'); 2 | 3 | btn.addEventListener('click', ()=>{ 4 | document.body.classList.toggle('dark'); 5 | }); -------------------------------------------------------------------------------- /Dark-Mode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dark Mode 7 | 8 | 9 | 10 |

Dark mode is here

11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Dark-Mode/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html,body { 7 | font-size: 10px; 8 | font-family: 'lato', Arial, Helvetica, sans-seri; 9 | } 10 | body { 11 | background: #fff; 12 | color: black; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | transition: all 0.5s ease; 19 | } 20 | .title { 21 | font-size: 5rem; 22 | text-align: center; 23 | margin-bottom: 3rem; 24 | } 25 | .btn { 26 | font-size: 3rem; 27 | cursor: pointer; 28 | } 29 | .btn::before{ 30 | content: '🖤'; 31 | } 32 | body.dark { 33 | color: #a8acb0; 34 | background: #1b1f23; 35 | transition: all 0.5s ease; 36 | } 37 | body.dark .btn::before{ 38 | content: '💡'; 39 | } -------------------------------------------------------------------------------- /Expanding Cards/images/tech_phone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Expanding Cards/images/tech_phone.jpg -------------------------------------------------------------------------------- /Expanding Cards/images/tech_sound.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Expanding Cards/images/tech_sound.jpg -------------------------------------------------------------------------------- /Expanding Cards/images/tech_tablet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Expanding Cards/images/tech_tablet.jpg -------------------------------------------------------------------------------- /Expanding Cards/images/tech_tableturner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Expanding Cards/images/tech_tableturner.jpg -------------------------------------------------------------------------------- /Expanding Cards/images/tech_typewriter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Expanding Cards/images/tech_typewriter.jpg -------------------------------------------------------------------------------- /Expanding Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exanding cards 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Tech Iphone

15 |
16 |
17 |

Tech Sound

18 |
19 |
20 |

Tech Tablet

21 |
22 |
23 |

Tech_Tableturner

24 |
25 |
26 |

tech_typewriter

27 |
28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Expanding Cards/script.js: -------------------------------------------------------------------------------- 1 | const panels = document.querySelectorAll('.panel') 2 | 3 | panels.forEach(panel => { 4 | 5 | panel.addEventListener('click', () => { 6 | removeActiveClasses() 7 | panel.classList.add('active') 8 | }) 9 | }) 10 | 11 | function removeActiveClasses() { 12 | panels.forEach(panel => { 13 | panel.classList.remove('active') 14 | 15 | }) 16 | } 17 | -------------------------------------------------------------------------------- /Expanding Cards/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | *{ 3 | box-sizing: border-box; 4 | } 5 | 6 | body{ 7 | font-family: 'Muli', sans-serif; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | overflow: hidden; 13 | margin: 0; 14 | } 15 | 16 | .container{ 17 | display: flex; 18 | width: 90vh; 19 | } 20 | 21 | .panel{ 22 | background-size: auto 100%; 23 | background-position: center; 24 | background-repeat: no-repeat; 25 | height: 80vh; 26 | border-radius: 50px; 27 | color: #fff; 28 | cursor: pointer; 29 | flex: 0.5; 30 | margin: 10px; 31 | position: relative; 32 | transition: flex 0.7s ease-in; 33 | 34 | } 35 | 36 | .panel h3{ 37 | font-size: 24px; 38 | position: absolute; 39 | bottom: 20px; 40 | left: 20px; 41 | margin: 0; 42 | opacity: 0; 43 | } 44 | .panel.active{ 45 | flex: 5; 46 | } 47 | 48 | .panel.active h3{ 49 | transition: opacity 0.3s ease-in 0.4s; 50 | opacity: 1; 51 | } 52 | 53 | @media (max-width: 480px){ 54 | .container{ 55 | width: 100vh; 56 | } 57 | 58 | .panel:nth-of-type(4), 59 | .panel:nth-of-type(5) { 60 | display: none; 61 | } 62 | 63 | } 64 | -------------------------------------------------------------------------------- /Form Wave Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Form Wave Animation 8 | 9 | 10 | 11 |
12 |

Please Login

13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 | 23 | 24 |

Don't have an account? Register

25 |
26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Form Wave Animation/script.js: -------------------------------------------------------------------------------- 1 | const labels = document.querySelectorAll('.form-control label') 2 | 3 | labels.forEach(label => { 4 | label.innerHTML = label.innerText 5 | .split('') 6 | .map((letter,idx) => `${letter}`) 7 | .join('') 8 | }) -------------------------------------------------------------------------------- /Form-Validation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Form Validation 7 | 8 | 9 | 10 |
11 |

Create Account

12 |
13 | 14 | 15 | Error message goes here 16 |
17 |
18 | 19 | 20 | Error message goes here 21 |
22 |
23 | 24 | 25 | Error message goes here 26 |
27 |
28 | 29 | 30 | Error message goes here 31 |
32 | 33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Form-Validation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | :root { 7 | --bg-form : #fcf8f3; 8 | --btn : #5056c6; 9 | } 10 | html, 11 | body { 12 | font-size: 10px; 13 | font-family: 'lato' ,Arial, Helvetica, sans-serif; 14 | } 15 | body { 16 | min-height: 100vh; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | background-image: linear-gradient(45deg,#ff35a7, #ff283d); 21 | } 22 | #form { 23 | background: var(--bg-form); 24 | width: 34rem; 25 | height: 49rem; 26 | display: flex; 27 | flex-direction: column; 28 | align-items: center; 29 | justify-content: space-between; 30 | padding: 2rem; 31 | border-radius: 1rem; 32 | } 33 | .title { 34 | font-weight: bold; 35 | margin-bottom: 1.5rem; 36 | } 37 | .row { 38 | display: grid; 39 | font-size: 1.4rem; 40 | width: 24rem; 41 | height: 6.6rem; 42 | margin-bottom: 2rem; 43 | } 44 | .row input { 45 | border: none; 46 | outline: none; 47 | height: 3.5rem; 48 | border-radius: 0.5rem; 49 | padding: 0 1rem; 50 | border: 2px solid #dfd8d8; 51 | } 52 | .row.success input { 53 | border-color: rgb(8, 236, 8); 54 | } 55 | .row.error input { 56 | border-color: rgb(255, 0, 0); 57 | } 58 | .row input:focus { 59 | border-color: black ; 60 | } 61 | .row small { 62 | visibility: hidden; 63 | } 64 | .row.error small { 65 | text-align: center; 66 | color: red; 67 | letter-spacing: 1px; 68 | visibility: visible; 69 | } 70 | #btn { 71 | border: none; 72 | cursor: pointer; 73 | width: 24rem; 74 | height: 3.5rem; 75 | border-radius: 0.5rem; 76 | background-color: var(--btn); 77 | color: var(--bg-form); 78 | font-size: 1.7rem; 79 | margin-bottom: 1rem; 80 | } 81 | #btn:hover { 82 | transition: opacity 0.2s ease-in-out; 83 | opacity: 0.8; 84 | } 85 | .tNc { 86 | display: flex; 87 | width: 24rem; 88 | font-size: 1.1rem; 89 | } 90 | #terms { 91 | margin-right: 1rem; 92 | } 93 | -------------------------------------------------------------------------------- /HTML-Canvas/app.js: -------------------------------------------------------------------------------- 1 | const canvas = document.getElementById('canvas'); 2 | const colorElement = document.getElementById('color'); 3 | const rangeElement = document.getElementById('range'); 4 | 5 | function getCanvas(){ 6 | 7 | if(canvas.getContext){ 8 | //ctx object will provide the drawing interface 9 | const ctx = canvas.getContext('2d'); 10 | 11 | //resize the canvas according to dimensions of window 12 | // resizing(); 13 | 14 | //flag variable 15 | let painting = false; 16 | 17 | function startDrawing(event){ 18 | painting = true; 19 | draw(event); 20 | } 21 | 22 | function stopDrawing(){ 23 | painting = false; 24 | ctx.beginPath(); 25 | } 26 | 27 | function draw(event){ 28 | //if not painting , then return 29 | if(!painting) return; 30 | 31 | ctx.lineWidth = rangeElement.value; 32 | ctx.lineCap = 'round'; 33 | ctx.strokeStyle = colorElement.value; 34 | 35 | ctx.lineTo(event.clientX, event.clientY); 36 | ctx.stroke(); 37 | 38 | ctx.beginPath(); 39 | ctx.moveTo(event.clientX, event.clientY); 40 | } 41 | 42 | window.addEventListener('mousedown', startDrawing); 43 | window.addEventListener('mouseup', stopDrawing); 44 | window.addEventListener('mousemove', draw); 45 | } else { 46 | console.log(`brower doesn't support canvas`); 47 | } 48 | } 49 | 50 | window.addEventListener('load', getCanvas); 51 | 52 | function resizing(){ 53 | canvas.height = window.innerHeight; 54 | canvas.width = window.innerWidth; 55 | } 56 | window.addEventListener('resize', resizing); 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /HTML-Canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML Canvas 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /HTML-Canvas/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | #canvas { 7 | border: 2px solid black; 8 | } -------------------------------------------------------------------------------- /Hidden Search/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hidden Search 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Hidden Search/script.js: -------------------------------------------------------------------------------- 1 | const search = document.querySelector('.search') 2 | const input = document.querySelector('.input') 3 | const btn = document.querySelector('.btn') 4 | 5 | btn.addEventListener('click', () => { 6 | search.classList.toggle('active') 7 | input.focus() 8 | }) -------------------------------------------------------------------------------- /Hidden Search/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background-image: linear-gradient(90deg, #7d5fff, #7158e2); 9 | font-family: 'Lato', sans-serif; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | margin: 0; 16 | } 17 | 18 | .search{ 19 | position: relative; 20 | height: 50px; 21 | } 22 | .search .input{ 23 | background-color: #fff; 24 | border: 0; 25 | font-size: 18px; 26 | padding: 15px; 27 | height: 50px; 28 | width: 50px; 29 | transition: width 0.3s ease; 30 | } 31 | .btn{ 32 | background-color: #fff; 33 | border: 0; 34 | font-size: 24px; 35 | position: absolute; 36 | cursor: pointer; 37 | top: 0; 38 | left: 0; 39 | height: 50px; 40 | width: 50px; 41 | transition: transform 0.3s ease; 42 | } 43 | 44 | .btn:focus, 45 | .input:focus{ 46 | outline: none; 47 | } 48 | 49 | .search.active .input { 50 | width: 200px; 51 | } 52 | 53 | .search.active .btn{ 54 | transform: translateX(198px); 55 | } -------------------------------------------------------------------------------- /Image-Slider/images/car1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Image-Slider/images/car1.jpeg -------------------------------------------------------------------------------- /Image-Slider/images/car3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Image-Slider/images/car3.jpeg -------------------------------------------------------------------------------- /Image-Slider/images/car3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Image-Slider/images/car3.jpg -------------------------------------------------------------------------------- /Image-Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 |
13 | Image #1 14 | Image #2 15 | Image #3 16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Image-Slider/index.js: -------------------------------------------------------------------------------- 1 | const slides = document.querySelectorAll(".slides img"); 2 | let slideIndex = 0; 3 | let intervalId = null; 4 | 5 | document.addEventListener("DOMContentLoaded", initializeSlider); 6 | 7 | function initializeSlider(){ 8 | if(slides.length > 0){ 9 | slides[slideIndex].classList.add("displaySlide"); 10 | intervalId = setInterval(nextSlide, 5000); 11 | } 12 | } 13 | 14 | function showSlide(index){ 15 | if(index >= slides.length){ 16 | slideIndex = 0; 17 | } 18 | else if(index < 0){ 19 | slideIndex = slides.length - 1; 20 | } 21 | 22 | slides.forEach(slide => { 23 | slide.classList.remove("displaySlide"); 24 | }); 25 | slides[slideIndex].classList.add("displaySlide"); 26 | } 27 | 28 | function prevSlide(){ 29 | clearInterval(intervalId); 30 | slideIndex--; 31 | showSlide(slideIndex); 32 | } 33 | 34 | function nextSlide(){ 35 | slideIndex++; 36 | showSlide(slideIndex); 37 | } -------------------------------------------------------------------------------- /Image-Slider/style.css: -------------------------------------------------------------------------------- 1 | .slider{ 2 | position: relative; 3 | width: 100%; 4 | margin: auto; 5 | overflow: hidden; 6 | } 7 | .slider img{ 8 | width: 100%; 9 | display: none; 10 | } 11 | img.displaySlide{ 12 | display: block; 13 | animation-name: fade; 14 | animation-duration: 1.5s; 15 | } 16 | .slider button{ 17 | position: absolute; 18 | top: 50%; 19 | transform: translateY(-50%); 20 | font-size: 2rem; 21 | padding: 10px 15px; 22 | background-color: hsla(0, 0%, 0%, 0.5); 23 | color: white; 24 | border: none; 25 | cursor: pointer; 26 | } 27 | .prev{ 28 | left: 0; 29 | } 30 | .next{ 31 | right: 0; 32 | } 33 | @keyframes fade { 34 | from {opacity: .5} 35 | to {opacity: 1} 36 | } -------------------------------------------------------------------------------- /JS-Pratice/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS-Pratice/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/JS-Pratice/style.css -------------------------------------------------------------------------------- /Javascript-30-Projects/ Clock/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/ Clock/background.jpg -------------------------------------------------------------------------------- /Javascript-30-Projects/ Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS + CSS Clock 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | 22 | 23 | -------------------------------------------------------------------------------- /Javascript-30-Projects/ Clock/index.js: -------------------------------------------------------------------------------- 1 | const secondHand = document.querySelector('.second-hand'); 2 | const minsHand = document.querySelector('.min-hand'); 3 | const hourHand = document.querySelector('.hour-hand'); 4 | 5 | function setDate() { 6 | const now = new Date(); 7 | 8 | const seconds = now.getSeconds(); 9 | const secondsDegrees = ((seconds / 60) * 360) + 90; 10 | secondHand.style.transform = `rotate(${secondsDegrees}deg)`; 11 | 12 | const mins = now.getMinutes(); 13 | const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90; 14 | minsHand.style.transform = `rotate(${minsDegrees}deg)`; 15 | 16 | const hour = now.getHours(); 17 | const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90; 18 | hourHand.style.transform = `rotate(${hourDegrees}deg)`; 19 | } 20 | 21 | setInterval(setDate, 1000); 22 | 23 | setDate(); -------------------------------------------------------------------------------- /Javascript-30-Projects/ Clock/stlyle.css: -------------------------------------------------------------------------------- 1 | html { 2 | background: #018DED url("background.jpg"); 3 | background-size: cover; 4 | font-family: 'helvetica neue'; 5 | text-align: center; 6 | font-size: 10px; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | font-size: 2rem; 12 | display: flex; 13 | flex: 1; 14 | min-height: 100vh; 15 | align-items: center; 16 | } 17 | 18 | .clock { 19 | width: 30rem; 20 | height: 30rem; 21 | border: 20px solid white; 22 | border-radius: 50%; 23 | margin: 50px auto; 24 | position: relative; 25 | padding: 2rem; 26 | box-shadow: 27 | 0 0 0 4px rgba(0,0,0,0.1), 28 | inset 0 0 0 3px #EFEFEF, 29 | inset 0 0 10px black, 30 | 0 0 10px rgba(0,0,0,0.2); 31 | } 32 | 33 | .clock-face { 34 | position: relative; 35 | width: 100%; 36 | height: 100%; 37 | transform: translateY(-3px); /* account for the height of the clock hands */ 38 | } 39 | 40 | .hand { 41 | width: 50%; 42 | height: 6px; 43 | background: black; 44 | position: absolute; 45 | top: 50%; 46 | transform-origin: 100%; 47 | transform: rotate(90deg); 48 | transition: all 0.05s; 49 | transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 50 | } -------------------------------------------------------------------------------- /Javascript-30-Projects/Css Variable/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/Css Variable/background.jpg -------------------------------------------------------------------------------- /Javascript-30-Projects/Css Variable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scoped CSS Variables and JS 6 | 7 | 8 | 9 | 10 |

Update CSS Variables with JS

11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Javascript-30-Projects/Css Variable/index.js: -------------------------------------------------------------------------------- 1 | const inputs = document.querySelectorAll('.controls input'); 2 | 3 | function handleUpdate() { 4 | const suffix = this.dataset.sizing || ''; 5 | document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); 6 | } 7 | 8 | inputs.forEach(input => input.addEventListener('change', handleUpdate)); 9 | inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); -------------------------------------------------------------------------------- /Javascript-30-Projects/Css Variable/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --base: #ffc600; 3 | --spacing: 10px; 4 | --blur: 10px; 5 | } 6 | 7 | img { 8 | padding: var(--spacing); 9 | background: var(--base); 10 | filter: blur(var(--blur)); 11 | } 12 | 13 | .hl { 14 | color: var(--base); 15 | } 16 | 17 | /* 18 | misc styles, nothing to do with CSS variables 19 | */ 20 | 21 | body { 22 | text-align: center; 23 | background: #193549; 24 | color: white; 25 | font-family: 'helvetica neue', sans-serif; 26 | font-weight: 100; 27 | font-size: 50px; 28 | } 29 | 30 | .controls { 31 | margin-bottom: 50px; 32 | } 33 | 34 | input { 35 | width: 100px; 36 | } 37 | -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/Drum Kit/background.jpg -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS Drum Kit 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | A 15 | clap 16 |
17 |
18 | S 19 | hihat 20 |
21 |
22 | D 23 | kick 24 |
25 |
26 | F 27 | openhat 28 |
29 |
30 | G 31 | boom 32 |
33 |
34 | H 35 | ride 36 |
37 |
38 | J 39 | snare 40 |
41 |
42 | K 43 | tom 44 |
45 |
46 | L 47 | tink 48 |
49 |
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/index.js: -------------------------------------------------------------------------------- 1 | function removeTransition(e) { 2 | if (e.propertyName !== 'transform') return; 3 | e.target.classList.remove('playing'); 4 | } 5 | 6 | function playSound(e) { 7 | const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 8 | const key = document.querySelector(`div[data-key="${e.keyCode}"]`); 9 | if (!audio) return; 10 | 11 | key.classList.add('playing'); 12 | audio.currentTime = 0; 13 | audio.play(); 14 | } 15 | 16 | const keys = Array.from(document.querySelectorAll('.key')); 17 | keys.forEach(key => key.addEventListener('transitionend', removeTransition)); 18 | window.addEventListener('keydown', playSound); -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/sounds/boom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/Drum Kit/sounds/boom.wav -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/sounds/clap.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/Drum Kit/sounds/clap.wav -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/sounds/hihat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/Drum Kit/sounds/hihat.wav -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/sounds/kick.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/Drum Kit/sounds/kick.wav -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/sounds/openhat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/Drum Kit/sounds/openhat.wav -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/sounds/ride.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/Drum Kit/sounds/ride.wav -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/sounds/snare.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/Drum Kit/sounds/snare.wav -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/sounds/tink.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/Drum Kit/sounds/tink.wav -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/sounds/tom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Javascript-30-Projects/Drum Kit/sounds/tom.wav -------------------------------------------------------------------------------- /Javascript-30-Projects/Drum Kit/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 10px; 3 | background: url('./background.jpg') bottom center; 4 | background-size: cover; 5 | } 6 | 7 | body,html { 8 | margin: 0; 9 | padding: 0; 10 | font-family: sans-serif; 11 | } 12 | 13 | .keys { 14 | display: flex; 15 | flex: 1; 16 | min-height: 100vh; 17 | align-items: center; 18 | justify-content: center; 19 | } 20 | 21 | .key { 22 | border: .4rem solid black; 23 | border-radius: .5rem; 24 | margin: 1rem; 25 | font-size: 1.5rem; 26 | padding: 1rem .5rem; 27 | transition: all .07s ease; 28 | width: 10rem; 29 | text-align: center; 30 | color: white; 31 | background: rgba(0,0,0,0.4); 32 | text-shadow: 0 0 .5rem black; 33 | } 34 | 35 | .playing { 36 | transform: scale(1.1); 37 | border-color: #ffc600; 38 | box-shadow: 0 0 1rem #ffc600; 39 | } 40 | 41 | kbd { 42 | display: block; 43 | font-size: 4rem; 44 | } 45 | 46 | .sound { 47 | font-size: 1.2rem; 48 | text-transform: uppercase; 49 | letter-spacing: .1rem; 50 | color: #ffc600; 51 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Ayush Saini 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 | -------------------------------------------------------------------------------- /Password-Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Password Generator 7 | 8 | 9 | 10 |
11 |

Password Generator

12 |

Your Password

13 | 14 |

Preferences

15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /Password-Generator/resource.md: -------------------------------------------------------------------------------- 1 | ## CheatSheet Reference 2 | 3 | [ASCII](https://www.petefreitag.com/cheatsheets/ascii-codes/) 4 | -------------------------------------------------------------------------------- /Password-Generator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | *::before, 7 | *::after { 8 | box-sizing: border-box; 9 | } 10 | html, 11 | body { 12 | font-size: 10px; 13 | font-family: 'lato', Arial, Helvetica, sans-serif; 14 | } 15 | body { 16 | min-height: 100vh; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | background: linear-gradient(115deg, #85ee56 50%, #144dd5 50%); 21 | } 22 | .container { 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | justify-content: space-between; 27 | background: #eee; 28 | border-radius: 0.5rem; 29 | padding: 2rem; 30 | min-height: 35rem; 31 | } 32 | .title { 33 | width: 71%; 34 | text-align: center; 35 | } 36 | .desc-title { 37 | font-size: 1.6rem; 38 | text-align: left; 39 | width: 71%; 40 | border-bottom: 1px solid #144dd5; 41 | } 42 | .form { 43 | display: grid; 44 | grid-template-columns: auto auto; 45 | row-gap: 1rem; 46 | column-gap: 3rem; 47 | align-items: center; 48 | justify-content: center; 49 | font-size: 1.3rem; 50 | } 51 | label{ 52 | font-weight: bold; 53 | } 54 | .number-input { 55 | width: 4rem; 56 | } 57 | .password { 58 | background: black; 59 | color: white; 60 | padding: 1rem; 61 | font-size: 1.5rem; 62 | height: 6rem; 63 | width: 28rem; 64 | display: flex; 65 | justify-content: center; 66 | align-items: center; 67 | word-break: break-all; 68 | border-radius: 0.5rem; 69 | } 70 | .btn { 71 | cursor: pointer; 72 | border: none; 73 | background: #144dd5; 74 | border-radius: 0.5rem; 75 | padding: 1rem; 76 | width: 100%; 77 | color: #fff; 78 | font-weight: bold; 79 | letter-spacing: 0.3rem; 80 | transition: opacity ease-in-out 0.2s; 81 | } 82 | .btn:hover { 83 | opacity: 0.9; 84 | } -------------------------------------------------------------------------------- /Pomodoro-Timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pomodoro Timer 7 | 8 | 9 | 10 |
11 |

Get Work done

12 | 17 |

25:00

18 |
19 | 20 | 21 | 22 |
23 |
24 |

This project is a part of 60 Minute javascript

25 | 26 | 27 | -------------------------------------------------------------------------------- /Pomodoro-Timer/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html, 7 | body { 8 | font-size: 10px; 9 | font-family: 'lato', Arial, Helvetica, sans-serif; 10 | } 11 | body { 12 | min-height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | background: #151b37; 17 | flex-direction: column; 18 | } 19 | .container { 20 | background:linear-gradient(90deg, #020c22, #4e253c); 21 | width: 31rem; 22 | height: 47rem; 23 | border-radius: 1rem; 24 | padding: 2rem; 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | justify-content: space-around; 29 | } 30 | .title { 31 | font-size: 2.5rem; 32 | } 33 | .title, 34 | .timer, 35 | .footer { 36 | background: #9867f0; 37 | background: -webkit-linear-gradient(to right, #9867f0 0%, #d5557c 50%); 38 | background: -moz-linear-gradient(to right, #9867f0 0%, #d5557c 50%); 39 | background: linear-gradient(to right, #9867f0 0%, #d5557c 50%); 40 | -webkit-background-clip: text; 41 | -webkit-text-fill-color: transparent; 42 | } 43 | #select-type { 44 | color: #d9749f; 45 | background: black; 46 | border: none; 47 | width: 15rem; 48 | height: 3rem; 49 | cursor: pointer; 50 | text-align: center; 51 | } 52 | .timer { 53 | font-size: 10rem; 54 | } 55 | .btn-wrapper { 56 | display: flex; 57 | justify-content: center; 58 | } 59 | .btn { 60 | border: none; 61 | cursor: pointer; 62 | padding: 1rem; 63 | margin: 1rem; 64 | border-radius: 0.2rem; 65 | background: black; 66 | color: #d5557c; 67 | font-weight: bold; 68 | letter-spacing: 2px; 69 | } 70 | .btn:hover { 71 | opacity: 0.8; 72 | } 73 | .footer { 74 | font-size: 1.2rem; 75 | position: relative; 76 | bottom: -2rem; 77 | letter-spacing: 1px; 78 | } 79 | .footer > a { 80 | text-decoration: none; 81 | } -------------------------------------------------------------------------------- /Progress Steps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Progress Steps 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
1
16 |
2
17 |
3
18 |
4
19 |
20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Progress Steps/script.js: -------------------------------------------------------------------------------- 1 | const progress = document.getElementById('progress') 2 | const prev = document.getElementById('prev') 3 | const next = document.getElementById('next') 4 | const circles = document.querySelectorAll('.circle') 5 | 6 | let currentActive = 1; 7 | 8 | next.addEventListener('click', () => { 9 | currentActive++ 10 | 11 | if(currentActive > circles.length) { 12 | currentActive = circles.length 13 | } 14 | 15 | update() 16 | 17 | }) 18 | 19 | prev.addEventListener('click', () => { 20 | currentActive-- 21 | 22 | if(currentActive < 1) { 23 | currentActive = 1 24 | } 25 | 26 | 27 | update() 28 | 29 | }) 30 | 31 | function update() { 32 | circles.forEach((circle, idx) => { 33 | 34 | if(idx < currentActive) { 35 | 36 | circle.classList.add('active') 37 | 38 | } else{ 39 | 40 | circle.classList.remove('active') 41 | } 42 | 43 | }) 44 | 45 | const actives = document.querySelectorAll('.active') 46 | 47 | progress.style.width = (actives.length -1) / (circles.length -1) * 100 + '%' 48 | 49 | if(currentActive === 1){ 50 | prev.disabled = true 51 | 52 | }else if(currentActive === circles.length){ 53 | next.disabled = true 54 | }else{ 55 | prev.disabled = false 56 | next.disabled = false 57 | } 58 | 59 | } 60 | 61 | 62 | -------------------------------------------------------------------------------- /Progress Steps/style.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background-color: #f6f7fb; 9 | font-family: 'Muli', sans-serif; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | margin: 0; 16 | } 17 | .container{ 18 | text-align: center; 19 | } 20 | .progress-container{ 21 | display: flex; 22 | justify-content: space-between; 23 | position: relative; 24 | margin-bottom: 30px; 25 | max-width: 100%; 26 | width: 350px; 27 | } 28 | .progress-container::before{ 29 | content: ''; 30 | background-color: #e0e0e0; 31 | position: absolute; 32 | top: 50%; 33 | left: 0; 34 | transform: translateY(-50%); 35 | height: 4px; 36 | width: 100%; 37 | z-index: -1; 38 | 39 | } 40 | .progress{ 41 | background-color: #3498db; 42 | position: absolute; 43 | top: 50%; 44 | left: 0; 45 | transform: translateY(-50%); 46 | height: 4px; 47 | width: 0%; 48 | z-index: -1; 49 | transition: 0.4s ease; 50 | } 51 | 52 | .circle{ 53 | background-color: #fff; 54 | color: #999; 55 | border-radius: 50%; 56 | height: 30px; 57 | width: 30px; 58 | display: flex; 59 | justify-content: center; 60 | align-items: center; 61 | border: 3px solid #e0e0e0; 62 | transition: .4s ease; 63 | 64 | } 65 | .circle.active{ 66 | border-color: #3498db; 67 | } 68 | .btn{ 69 | background-color: #3498db; 70 | color: #fff; 71 | border: 0; 72 | border-radius: 6px; 73 | cursor: pointer; 74 | font-family: inherit; 75 | padding: 8px 30px; 76 | margin: 5px; 77 | font-size: 14px; 78 | } 79 | .btn:active{ 80 | transform: scale(0.98); 81 | } 82 | .btn:focus{ 83 | outline: 0; 84 | } 85 | .btn:disabled{ 86 | background-color: #e0e0e0; 87 | cursor: not-allowed; 88 | } -------------------------------------------------------------------------------- /Quotes-Generator/app.js: -------------------------------------------------------------------------------- 1 | const quoteElement = document.querySelector('.quote'); 2 | const authorElement = document.querySelector('.author'); 3 | 4 | 5 | const link = `https://api.quotable.io/random`; 6 | 7 | function getQuote(){ 8 | fetch(link) 9 | .then(response => { 10 | let data = response.json(); 11 | return data; 12 | }) 13 | .then(data => { 14 | quoteElement.innerText = `“${data.content}”`; 15 | authorElement.innerText = `―${data.author}`; 16 | }) 17 | .catch(error => { 18 | console.log(error); 19 | }); 20 | } 21 | 22 | window.addEventListener('load', getQuote); -------------------------------------------------------------------------------- /Quotes-Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Quotes Generator 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Quotes-Generator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap'); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | *::before, 8 | *::after { 9 | box-sizing: border-box; 10 | } 11 | html, 12 | body { 13 | font-size: 10px; 14 | font-family: 'PT Sans','lato', Arial, Helvetica, sans-serif; 15 | } 16 | body { 17 | min-height: 100vh; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | .container { 23 | padding: 3.5rem; 24 | max-width: 70rem; 25 | } 26 | .quote { 27 | font-size: 3rem; 28 | margin-bottom: 3rem; 29 | } 30 | .author { 31 | font-size: 2rem; 32 | font-style: italic; 33 | letter-spacing: 1px; 34 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Random-Color-Generator/app.js: -------------------------------------------------------------------------------- 1 | const hexValueElement = document.querySelector('.hex-value'); 2 | 3 | function generateHEX(){ 4 | let randomHex = 5 | Math.random() //random number between 0 and 1 6 | .toString(16) //convert that number to hexadecimal string (i.e, base 16) 7 | .substr(-6); //grab last 6 digit string 8 | let randomHexColor = `#${randomHex}`; 9 | hexValueElement.textContent = randomHexColor; 10 | document.body.style.background = randomHexColor; 11 | } 12 | 13 | function keybord(event){ 14 | if(event.code == 'Space'){ 15 | generateHEX(); 16 | } 17 | } 18 | 19 | //when user clicks on HEX value 20 | hexValueElement.addEventListener('click', generateHEX); 21 | 22 | //when user clicks on spacebar 23 | window.addEventListener('keydown', keybord); -------------------------------------------------------------------------------- /Random-Color-Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Random Color Generator 7 | 8 | 9 | 10 |
11 |

Where's my Color

12 |

Tap above or press SPACE

13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Random-Color-Generator/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html, 7 | body { 8 | font-size: 10px; /* 1rem = 10px */ 9 | font-family: 'lato', Arial, sans-serif; 10 | } 11 | body{ 12 | min-height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | .container { 18 | background: #000; 19 | border-radius: 1rem; 20 | padding: 1.2rem 2.5rem; 21 | color: white; 22 | min-width: 26rem; 23 | } 24 | .hex-value{ 25 | text-align: center; 26 | font-size: 4rem; 27 | } 28 | .how-to { 29 | text-align: center; 30 | font-size: 1.5rem; 31 | margin-top: 2rem; 32 | } -------------------------------------------------------------------------------- /Random-Linear-Gradient/app.js: -------------------------------------------------------------------------------- 1 | //DOM Elements 2 | const color1Elem = document.getElementById('color-1'); 3 | const color2Elem = document.getElementById('color-2'); 4 | const codeElem = document.querySelector('.code'); 5 | const btn = document.querySelector('.btn'); 6 | const infoElem = document.querySelector('.info'); 7 | 8 | //Generate HEX 9 | function getHEX(){ 10 | let randomHex = Math.random().toString(16).substr(-6); 11 | let hexColor = `#${randomHex}`; 12 | return hexColor; 13 | } 14 | 15 | //Update the UI 16 | function updateUI(){ 17 | infoElem.remove(); 18 | 19 | color1Elem.innerText = getHEX(); 20 | color2Elem.innerText = getHEX(); 21 | 22 | color1Elem.style.background = color1Elem.innerText; 23 | color2Elem.style.background = color2Elem.innerText; 24 | 25 | codeElem.innerText = `background: linear-gradient(90deg, ${color1Elem.innerText}, ${color2Elem.innerText});`; 26 | document.body.style.background = `linear-gradient(90deg, ${color1Elem.innerText}, ${color2Elem.innerText})`; 27 | } 28 | 29 | //when user clicks SPACE or the arrow, then UpdateUI 30 | 31 | window.addEventListener('keydown', event => { 32 | if(event.code === 'Space') 33 | updateUI(); 34 | }); 35 | 36 | btn.addEventListener('click', updateUI); -------------------------------------------------------------------------------- /Random-Linear-Gradient/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Random Linear Gradient Generator 7 | 8 | 9 | 10 |
11 |

Press SPACE or ➡

12 |

13 | color-1 14 | 15 | color-2 16 |

17 | 18 |
19 |

CSS Background Linear Gradient

20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /Random-Linear-Gradient/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | *::before, 7 | *::after { 8 | box-sizing: border-box; 9 | } 10 | html, 11 | body { 12 | font-size: 10px; 13 | font-family: 'lato', Arial, Helvetica, sans-serif; 14 | } 15 | body { 16 | min-height: 100vh; 17 | display: flex; 18 | justify-content: center; 19 | align-items: flex-end; 20 | } 21 | .container { 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: center; 25 | align-items: center; 26 | margin-bottom: 2rem; 27 | } 28 | .colors { 29 | font-size: 2.5rem; 30 | margin-bottom: 5rem; 31 | } 32 | .color { 33 | background: black; 34 | color: white; 35 | padding: 0.7rem 1rem; 36 | border-radius: 5rem; 37 | display: inline-block; 38 | width: 12rem; 39 | text-align: center; 40 | } 41 | .btn { 42 | border: none; 43 | cursor: pointer; 44 | background: transparent; 45 | font-size: 3rem; 46 | } 47 | .output { 48 | font-size: 1.7rem; 49 | background: black; 50 | color: white; 51 | border-radius: 0.5rem; 52 | padding: 3rem; 53 | width: 50rem; 54 | text-align: center; 55 | } 56 | .info { 57 | font-size: 3rem; 58 | margin-bottom: 10rem; 59 | } -------------------------------------------------------------------------------- /Rotating Navigations/images/app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Rotating Navigations/images/app.jpg -------------------------------------------------------------------------------- /Rotating Navigations/script.js: -------------------------------------------------------------------------------- 1 | const open = document.getElementById('open') 2 | const close = document.getElementById('close') 3 | const container = document.querySelector('.container') 4 | 5 | open.addEvevtListener('click', () => container.classList.add('show-nav')) 6 | close.addEvevtListener('click', () => container.classList.remove('show-nav')) -------------------------------------------------------------------------------- /Scroll Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Scroll Animation 8 | 9 | 10 | 11 |

Scroll to the animation

12 |

Content

13 |

Content

14 |

Content

15 |

Content

16 |

Content

17 |

Content

18 |

Content

19 |

Content

20 |

Content

21 |

Content

22 |

Content

23 |

Content

24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Scroll Animation/script.js: -------------------------------------------------------------------------------- 1 | const boxes = document.querySelectorAll('.box') 2 | 3 | window.addEventListener('scroll',checkBoxes) 4 | 5 | checkBoxes() 6 | 7 | function checkBoxes() { 8 | const triggerBottom = window.innerHeight / 5 *4 9 | 10 | boxes.forEach(box => { 11 | 12 | const boxTop = box.getBoundingClientRect().top 13 | 14 | if(boxTop < triggerBottom){ 15 | box.classList.add('show') 16 | }else{ 17 | box.classList.remove('show') 18 | } 19 | }) 20 | 21 | } -------------------------------------------------------------------------------- /Scroll Animation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background-color: #efedd6; 9 | font-family: 'Roboto', sans-serif; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | margin: 0; 15 | overflow-x: hidden; 16 | } 17 | 18 | h1{ 19 | margin: 10px; 20 | } 21 | 22 | .box{ 23 | background-color: steelblue; 24 | color: #fff; 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | width: 400px; 29 | height: 200px; 30 | margin: 10px; 31 | border-radius: 10px; 32 | box-shadow: 2px 4px 5px rgba(0, 0, 0,0.3); 33 | transform: translateX(200%); 34 | transition: transform 0.4s ease; 35 | } 36 | 37 | .box:nth-of-type(even){ 38 | transform: translateX(-200%); 39 | } 40 | 41 | .box.show{ 42 | transform: translateX(0); 43 | } 44 | 45 | .box h2{ 46 | font-size: 45px; 47 | } -------------------------------------------------------------------------------- /Sound Board/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sound Board 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Sound Board/script.js: -------------------------------------------------------------------------------- 1 | const sounds = ['Song1', 'Song2', 'Song3', 'Song4', 'Song5', 'Song6'] 2 | 3 | sounds.forEach(sound => { 4 | const btn = document.createElement('button') 5 | btn.classList.add('btn') 6 | 7 | btn.innerText = sound 8 | 9 | btn.addEventListener('click', () => { 10 | stopSong() 11 | 12 | document.getElementById(sound).play() 13 | }) 14 | 15 | document.getElementById('buttons'). 16 | appendChild(btn) 17 | }) 18 | 19 | function stopSong() { 20 | sounds.forEach(sound => { 21 | const song = document.getElementById(sound) 22 | 23 | song.pause() 24 | song.currenTime = 0; 25 | }) 26 | } 27 | -------------------------------------------------------------------------------- /Sound Board/sounds/y2mate.com - Bulave tujhe yaar aaj Meri galiyan Luke chuppi _ DUNIYAA full lyrics.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Sound Board/sounds/y2mate.com - Bulave tujhe yaar aaj Meri galiyan Luke chuppi _ DUNIYAA full lyrics.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/y2mate.com - O Saathi Lyrical Video _ Baaghi 2 _ Tiger Shroff _ Disha Patani _ Arko _ Ahmed Khan Sajid Nadiadwala.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Sound Board/sounds/y2mate.com - O Saathi Lyrical Video _ Baaghi 2 _ Tiger Shroff _ Disha Patani _ Arko _ Ahmed Khan Sajid Nadiadwala.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/y2mate.com - Satyameva Jayate PANIYON SA Video Song Atif Aslam Tulsi Kumar John Abraham Aisha Sharma.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Sound Board/sounds/y2mate.com - Satyameva Jayate PANIYON SA Video Song Atif Aslam Tulsi Kumar John Abraham Aisha Sharma.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/y2mate.com - TERE SANG YAARA LYRICS ATIF ASLAM ARKO MANOJ MUNTASHIR AKSHAY K ILEANA D RUSTOM.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Sound Board/sounds/y2mate.com - TERE SANG YAARA LYRICS ATIF ASLAM ARKO MANOJ MUNTASHIR AKSHAY K ILEANA D RUSTOM.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/y2mate.com - Tera Chehra Lyrics Sanam Teri Kasam Harshvardhan Rane Mawra Hocane Arijit Singh.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Sound Board/sounds/y2mate.com - Tera Chehra Lyrics Sanam Teri Kasam Harshvardhan Rane Mawra Hocane Arijit Singh.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/y2mate.com - Teri Nazron Mein Hai Tere Sapne Tere Sapno Mein Hai Naraazi Agar Tum Sath Ho 8D Audio Sad Song.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Sound Board/sounds/y2mate.com - Teri Nazron Mein Hai Tere Sapne Tere Sapno Mein Hai Naraazi Agar Tum Sath Ho 8D Audio Sad Song.mp3 -------------------------------------------------------------------------------- /Sound Board/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background-color: black; 9 | color: #fff; 10 | font-family: 'Poppins', sans-serif; 11 | display: flex; 12 | flex-wrap: wrap; 13 | text-align: center; 14 | align-items: center; 15 | justify-content: center; 16 | height: 100vh; 17 | overflow: hidden; 18 | margin: 0; 19 | } 20 | 21 | .btn{ 22 | background-color: red; 23 | color: #fff; 24 | border: none; 25 | border-radius: 5px; 26 | margin: 1rem; 27 | padding: 1.5rem 3rem; 28 | font-size: 1.2rem; 29 | font-family: inherit; 30 | cursor: pointer; 31 | } 32 | 33 | .btn:hover{ 34 | opacity: 0.9; 35 | } 36 | 37 | .btn:focus{ 38 | outline: none; 39 | } -------------------------------------------------------------------------------- /Speed-Reader/app.js: -------------------------------------------------------------------------------- 1 | //Getting DOM Elements 2 | const textElem = document.getElementById('text'); 3 | const wpmElem = document.getElementById('wpm'); 4 | const readerElem = document.querySelector('.reader'); 5 | 6 | //variables 7 | let words, speed, current, interval; 8 | 9 | //Event listener 10 | document.addEventListener('click', clickHandler); 11 | 12 | function clickHandler(event){ //passing the event object 13 | startReader(event); 14 | stopReader(event); 15 | // pauseReader(event); 16 | } 17 | 18 | //Start the Reader 19 | function startReader(event){ 20 | //only run on #start button 21 | if(event.target.id !== 'start') 22 | return; 23 | 24 | // If there's no text to read, do nothing 25 | if (!textElem.value.length) 26 | return; 27 | 28 | //store the words in words array 29 | words = 30 | textElem.value.split(' ') //divide the space separated words into words array 31 | .filter(function(individualWord){ //filters empty array elements 32 | return individualWord.length; 33 | }); 34 | 35 | //get the words per minute 36 | speed = (60 / parseInt(wpmElem.value, 10)) * 1000; //speed of a word in milliseconds 37 | 38 | //set the current item to the first word 39 | current = 0; 40 | 41 | //Run the reader 42 | run(); 43 | } 44 | 45 | //Stop the Reader 46 | function stopReader(event){ 47 | //only run on #stop button 48 | if(event.target.id !== 'stop') 49 | return; 50 | 51 | end(); 52 | } 53 | 54 | function end(){ 55 | //clear the interval 56 | clearInterval(interval); 57 | } 58 | 59 | function run(){ 60 | //run the reader 61 | interval = setInterval(function(){ 62 | 63 | // If there are no more words, stop 64 | if (!words[current]) { 65 | end(); 66 | return; 67 | } 68 | 69 | //display the words to ui 70 | readerElem.textContent = words[current]; 71 | 72 | //go to next word 73 | current++; 74 | 75 | }, speed); 76 | } -------------------------------------------------------------------------------- /Speed-Reader/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: border-box; 9 | } 10 | html, body { 11 | font-size: 10px; 12 | font-family: 'lato', Arial, sans-serif; 13 | } 14 | body { 15 | background: #f5f5f5; 16 | min-height: 100vh; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | .container { 22 | background: #ffffff; 23 | width: 98vw; 24 | min-height: 70vh; 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | justify-content: space-between; 29 | font-size: 2rem; 30 | padding: 2rem 1rem; 31 | } 32 | #text { 33 | width: 70%; 34 | min-height: 20rem; 35 | margin-bottom: 2rem; 36 | } 37 | #wpm { 38 | margin: 0 0 2rem 0; 39 | } 40 | .btn { 41 | border: none; 42 | border-radius: 0.4rem; 43 | cursor: pointer; 44 | margin: 0 1rem; 45 | padding: 0.8rem 1.2rem; 46 | width: 6rem; 47 | transition: ease-in-out 0.2s; 48 | } 49 | .btn:hover { 50 | background: #d0cfcf; 51 | } 52 | .reader-wrapper { 53 | background: #040000; 54 | color: white; 55 | font-size: 4rem; 56 | margin: 4rem 0; 57 | padding: 0.5rem 1rem; 58 | border-radius: 0.5rem; 59 | word-wrap: anywhere; 60 | } -------------------------------------------------------------------------------- /Split Landing Page/images/team1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Split Landing Page/images/team1.jpg -------------------------------------------------------------------------------- /Split Landing Page/images/team2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/Split Landing Page/images/team2.jpg -------------------------------------------------------------------------------- /Split Landing Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Split landing Page 8 | 9 | 10 | 11 |
12 |
13 |

Playstation 5

14 | Buy Now 15 | 16 |
17 |
18 |

XBox Series X

19 | Buy Now 20 | 21 |
22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Split Landing Page/script.js: -------------------------------------------------------------------------------- 1 | const left = document.querySelector('.left') 2 | const right = document.querySelector('.right') 3 | const container = document.querySelector('.container') 4 | 5 | 6 | left.addEventListener('mouseenter', () => container.classList.add('hover-left')) 7 | left.addEventListener('mouseleave', () => container.classList.remove('hover-left')) 8 | 9 | right.addEventListener('mouseenter', () => container.classList.add('hover-right')) 10 | right.addEventListener('mouseleave', () => container.classList.remove('hover-right')) -------------------------------------------------------------------------------- /Superhero-Card/app.js: -------------------------------------------------------------------------------- 1 | const nameEl = document.querySelector('.name'); 2 | const imgEl = document.querySelector('.img'); 3 | const fullNameEl = document.querySelector('.full-name'); 4 | const publisherEl = document.querySelector('.publisher'); 5 | 6 | const intelligenceEl = document.getElementById('intelligence'); 7 | const strengthEl = document.getElementById('strength'); 8 | const speedEl = document.getElementById('speed'); 9 | const durabilityEl = document.getElementById('durability'); 10 | const powerEl = document.getElementById('power'); 11 | const combatEl = document.getElementById('combat'); 12 | 13 | function url(){ 14 | let randomId = Math.floor(Math.random() * 731) + 1; //random integer b/w 1 and 731 15 | let api = `https://cdn.jsdelivr.net/gh/akabab/superhero-api@0.3.0/api/id/${randomId}.json`; 16 | getInfo(api); 17 | } 18 | 19 | function getInfo(apiURL){ 20 | fetch(apiURL) 21 | .then(response => { 22 | if(!response.ok){ 23 | url(); //re fetch with new apiURL if response wasn't ok 24 | throw new Error('Network response was not ok'); 25 | } 26 | return response.json(); 27 | }) 28 | .then(data => { 29 | nameEl.innerText = data.name; 30 | 31 | imgEl.src = data.images.sm; 32 | imgEl.setAttribute('alt', data.name); 33 | 34 | fullNameEl.innerText = data.biography.fullName; 35 | 36 | publisherEl.innerText = data.biography.publisher; 37 | 38 | intelligenceEl.innerText = data.powerstats.intelligence; 39 | strengthEl.innerText = data.powerstats.strength; 40 | speedEl.innerText = data.powerstats.speed; 41 | durabilityEl.innerText = data.powerstats.durability; 42 | powerEl.innerText = data.powerstats.power; 43 | combatEl.innerText = data.powerstats.combat; 44 | }) 45 | .catch(error => { 46 | console.log('problem : ', error); 47 | 48 | }); 49 | } 50 | 51 | window.addEventListener('load', url); -------------------------------------------------------------------------------- /Superhero-Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Superhero Card 8 | 9 | 10 | 11 |
12 |

13 |

14 | 15 |
16 |

PowerStats

17 |
18 |
19 |
intelligence
20 |
21 |
strength
22 |
23 |
speed
24 |
25 |
26 |
27 |
durability
28 |
29 |
power
30 |
31 |
combat
32 |
33 |
34 |
35 |
36 |

37 |
38 |

This project is a part of 60 Minute javascript

39 | 40 | 41 | -------------------------------------------------------------------------------- /Superhero-Card/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html, 7 | body { 8 | font-size: 10px; 9 | font-family: 'lato', Arial, Helvetica, sans-serif; 10 | } 11 | body { 12 | min-height: 100vh; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | align-items: center; 17 | background: #ffffff; 18 | } 19 | .container { 20 | width: 30rem; 21 | height: 50rem; 22 | border-radius: 1rem; 23 | border: 0.7rem solid black; 24 | display: flex; 25 | flex-direction: column; 26 | align-items: center; 27 | } 28 | .name { 29 | font-size: 2rem; 30 | font-weight: bold; 31 | background: black; 32 | color: white; 33 | padding: 0.5rem; 34 | border-radius: 0 0 1rem 0; 35 | align-self: self-start; 36 | } 37 | .full-name { 38 | font-size: 1.5rem; 39 | font-weight: lighter; 40 | letter-spacing: 1px; 41 | min-height: 1.8rem; 42 | } 43 | /*setting width and height of the img in case img doesn't load, 44 | i want the alt text to aquire the same area*/ 45 | .img { 46 | width: 16rem; 47 | height: 24rem; 48 | border-radius: 5px; 49 | } 50 | .powerstats-title { 51 | font-size: 1.5rem; 52 | font-weight: bold; 53 | text-align: center; 54 | text-decoration: underline black; 55 | } 56 | .powerstats-wrapper { display: flex; } 57 | dl { margin: 1rem 2rem; } 58 | dt { font-size: 1.5rem; } 59 | dd { 60 | font-size: 2rem; 61 | font-weight: bold; 62 | } 63 | .publisher { 64 | font-size: 2rem; 65 | letter-spacing: 1px; 66 | background: black; 67 | color: white; 68 | padding: 0.5rem 2rem; 69 | align-self: end; 70 | border-radius: 3rem 0 0 0px; 71 | } 72 | .footer { 73 | font-size: 1.2rem; 74 | position: relative; 75 | bottom: -2rem; 76 | letter-spacing: 1px; 77 | } 78 | .footer > a { text-decoration: none; } -------------------------------------------------------------------------------- /Tip-Calculator/app.js: -------------------------------------------------------------------------------- 1 | //DOM elements 2 | 3 | const container = document.querySelector('.container'); 4 | const billAmountElem = document.getElementById('bill-amount'); 5 | const tipPercentageElem = document.getElementById('tip-percentage'); 6 | const tipInputElem = document.getElementById('tip-input'); 7 | const tipTotalElem = document.querySelector('.tip-total'); 8 | const splitValueElem = document.getElementById('split-value'); 9 | const splitInputElem = document.getElementById('split-input'); 10 | const totalPerPersonElem = document.getElementById('total-per-person'); 11 | const billPerPersonElem = document.getElementById('bill-per-person'); 12 | const tipPerPersonElem = document.getElementById('tip-per-person'); 13 | 14 | //Updating the UI 15 | 16 | function update(){ 17 | let billAmount = Number(billAmountElem.value); //string to number 18 | let tipPercentage = tipInputElem.value; 19 | let persons = splitInputElem.value; 20 | 21 | let tipValue = (tipPercentage / 100) * billAmount; 22 | let tipEach = tipValue / persons; 23 | let totalEach = (billAmount + tipValue) / persons; 24 | let billEach = billAmount / persons; 25 | 26 | tipPercentageElem.innerHTML = `${tipPercentage}%`; 27 | tipTotalElem.innerHTML = formatMoney(tipValue); 28 | splitValueElem.innerHTML = formatSplit(persons); 29 | totalPerPersonElem.innerHTML = formatMoney(totalEach); 30 | billPerPersonElem.innerHTML = formatMoney(billEach); 31 | tipPerPersonElem.innerHTML = formatMoney(tipEach); 32 | } 33 | //FORMATTING MONEY 34 | 35 | function formatMoney(value){ 36 | value = Math.ceil(value * 100) / 100; 37 | value = value.toFixed(2); 38 | return `₹${value}`; 39 | } 40 | //FORMATTING SPLIT 41 | 42 | function formatSplit(value){ 43 | if(value === '1') 44 | return `${value} Person`; 45 | return `${value} People`; 46 | } 47 | //LISTENING FOR INPUT EVENT ON CONTAINER 48 | 49 | container.addEventListener('input', update); 50 | 51 | -------------------------------------------------------------------------------- /Tip-Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tip Calculator 7 | 8 | 9 | 10 |
11 |

Tip Calcy

12 |
13 | 14 | ₹ 15 | 16 |
17 |
18 | 19 | 20 | 21 |

₹0.00

22 |
23 |
24 | 25 | 26 | 27 |
28 |
29 |
30 |

Total Per Person

31 |

₹0.00

32 |
33 |
34 |
35 |

bill

36 |

₹0.00

37 |
38 |
39 |

tip

40 |

₹0.00

41 |
42 |
43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /Todo-List/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Todo List 7 | 8 | 9 | 10 |
11 |

Todo List 📃

12 |
13 |
14 | 15 | 16 |
17 |
18 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /Todo-List/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html, 7 | body { 8 | font-size: 10px; 9 | font-family: 'lato',Arial, Helvetica, sans-serif; 10 | } 11 | body { 12 | background: #f0f0f0; 13 | color: black; 14 | min-height: 100vh; 15 | } 16 | header { 17 | font-size: 2rem; 18 | } 19 | header, 20 | form { 21 | min-height: 20vh; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | } 26 | form input, 27 | form button { 28 | padding: 0.5rem; 29 | font-size: 2rem; 30 | border: none; 31 | background: black; 32 | } 33 | .todo-input { 34 | color: white; 35 | } 36 | .todo-btn { 37 | cursor: pointer; 38 | padding: 0.35rem; 39 | border-left: 1px solid white; 40 | transition: background 0.2s ease; 41 | } 42 | .todo-btn:hover { 43 | background: #6b25d2; 44 | } 45 | .todo-container { 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | } 50 | .todo-list { 51 | min-width: 32rem; 52 | width: 50vw; 53 | list-style: none; 54 | } 55 | .todo { 56 | font-size: 1.6rem; 57 | display: flex; 58 | justify-content: space-between; 59 | align-items: center; 60 | padding: 0.5rem; 61 | margin: 0.5rem; 62 | background: white; 63 | transition: all 0.3s ease; 64 | } 65 | .todo button { 66 | cursor: pointer; 67 | border: none; 68 | background: transparent; 69 | font-size: 2rem; 70 | transition: transform 0.2s ease; 71 | } 72 | .todo button:hover { 73 | transform: scale(1.1); 74 | } 75 | .todo li { 76 | flex: 1; 77 | } 78 | .completed { 79 | text-decoration: line-through; 80 | opacity: 0.5; 81 | } 82 | .fade-away { 83 | transform: translateX(10rem); 84 | opacity: 0; 85 | } -------------------------------------------------------------------------------- /Weather-app/icons/01d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/01n.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /Weather-app/icons/02d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/02n.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 14 | 18 | 19 | -------------------------------------------------------------------------------- /Weather-app/icons/03d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/03n.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 14 | 18 | 19 | -------------------------------------------------------------------------------- /Weather-app/icons/04d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/04n.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/09d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/09n.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/10d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/10n.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/11d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/11n.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/13d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/13n.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/50d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/50n.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/icons/unknown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Weather-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Weather App 7 | 8 | 9 | 10 |
11 | 12 |
13 |

City, Country

14 |
15 |
16 |
17 | icon 18 |
19 |

Allow location access ☹

20 |
21 |
22 |

23 | humidity 24 | _ 25 |

26 |

_°c

27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Weather-app/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | font-family: lato, sans-serif, arial; 8 | min-height: 100vh; 9 | background: linear-gradient(45deg, #363548, #030303); 10 | font-size: 16px; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | .container{ 17 | color: #fff; 18 | background: linear-gradient(225deg, #363548, #030303); 19 | width: 20rem; 20 | height: 20rem; 21 | border-radius: 5px; 22 | box-shadow: 0 0 4px 4px #00000075; 23 | padding: 1.5rem; 24 | } 25 | .place{ 26 | border: 0.1px solid white; 27 | border-radius: 5px; 28 | padding: 0 0.5rem; 29 | font-size: 1rem; 30 | font-weight: lighter; 31 | background: #2e2e2e; 32 | display: flex; 33 | align-items: center; 34 | } 35 | .row.row-2, 36 | .row.row-4 { 37 | display: flex; 38 | justify-content: space-between; 39 | } 40 | .row.row-3 { 41 | display: flex; 42 | justify-content: center; 43 | align-items: center; 44 | flex-direction: column; 45 | } 46 | .row.row-4 { 47 | align-items: center; 48 | } 49 | .weather-icon { 50 | width: 67%; 51 | } 52 | .temperature { 53 | cursor: pointer; 54 | font-size: 2.5rem; 55 | } 56 | .humidity { 57 | display: flex; 58 | align-items: center; 59 | } 60 | 61 | /* https://www.flaticon.com/authors/freepik 62 | Icons made by - Freepik from www.flaticon.com 63 | */ 64 | .humidity-icon { 65 | width: 15%; 66 | margin-right: 0.5rem; 67 | } 68 | -------------------------------------------------------------------------------- /booklists/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Book lists 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Add Book

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 |
TitleAuthorISBN
44 |
45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /booklists/style.css: -------------------------------------------------------------------------------- 1 | .success, .error{ 2 | color: white; 3 | padding: 5px; 4 | margin: 5px 0 15px 0; 5 | } 6 | 7 | .success{ 8 | background-color: green; 9 | } 10 | 11 | .error{ 12 | background-color: red; 13 | } -------------------------------------------------------------------------------- /constructor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |

Calculate Age from Date of Birth

14 | 15 | 16 | 17 |

18 | 19 |

Enter Date of Birth:

20 | 21 |

22 | 23 |

hello zahid you are 19 years old

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /countdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Countdown Timer 7 | 8 | 9 | 10 | 11 |
12 |

CountDown

13 |
14 | 15 |
16 |
17 |
18 |

00

19 |

Days

20 |
21 |
22 |

00

23 |

Hours

24 |
25 |
26 |

00

27 |

Minutes

28 |
29 |
30 |

00

31 |

Seconds

32 |
33 |
34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /countdown/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html, 7 | body { 8 | font-size: 10px; /* 1rem = 10px */ 9 | font-family: 'lato', Arial, sans-serif; 10 | min-height: 100vh; 11 | } 12 | body { 13 | background: cadetblue; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | .container { 19 | background: #e3e3e3; 20 | width: 35rem; 21 | height: 40rem; 22 | border-radius: 0.5rem; 23 | box-shadow: 0 0 5px 3px #0c5349; 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: space-between; 27 | align-items: center; 28 | padding: 3rem; 29 | } 30 | .title { 31 | font-size: 3rem; 32 | font-style: oblique; 33 | } 34 | .input { 35 | border: none; 36 | padding: 1rem; 37 | border-radius: 0.5rem; 38 | text-align: center; 39 | } 40 | .timer-wrapper { 41 | display: flex; 42 | } 43 | .col { 44 | margin: 0 1.2rem; 45 | display: flex; 46 | flex-direction: column; 47 | align-items: center; 48 | } 49 | .timer { 50 | font-size: 4rem; 51 | font-weight: lighter; 52 | } 53 | .timer > span { 54 | font-size: 1rem; 55 | } -------------------------------------------------------------------------------- /diceroller/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |

Dice Roller

12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /diceroller/index.js: -------------------------------------------------------------------------------- 1 | function rollDice(){ 2 | 3 | const numOfDice = document.getElementById("numOfDice").value; 4 | const diceResult = document.getElementById("diceResult"); 5 | const diceImages = document.getElementById("diceImages"); 6 | const values = []; 7 | const images = []; 8 | 9 | for(let i = 0; i < numOfDice; i++){ 10 | const value = Math.floor(Math.random() * 6) + 1; 11 | values.push(value); 12 | images.push(`Dice ${value}`); 13 | } 14 | 15 | diceResult.textContent = `dice: ${values.join(', ')}`; 16 | diceImages.innerHTML = images.join(''); 17 | } -------------------------------------------------------------------------------- /diceroller/style.css: -------------------------------------------------------------------------------- 1 | #container{ 2 | font-family: Arial, sans-serif; 3 | text-align: center; 4 | font-size: 2rem; 5 | font-weight: bold; 6 | } 7 | button{ 8 | font-size: 1.5rem; 9 | padding: 10px 15px; 10 | border-radius: 10px; 11 | border: none; 12 | background-color: hsl(210, 100%, 50%); 13 | color: white; 14 | font-weight: bold; 15 | cursor: pointer; 16 | } 17 | button:hover{ 18 | background-color: hsl(210, 100%, 60%); 19 | } 20 | button:active{ 21 | background-color: hsl(210, 100%, 70%); 22 | } 23 | input{ 24 | font-size: 2rem; 25 | width: 150px; 26 | text-align: center; 27 | font-weight: bold; 28 | } 29 | #diceResult{ 30 | margin: 25px; 31 | } 32 | #diceImages img{ 33 | width: 150px; 34 | margin: 5px; 35 | } -------------------------------------------------------------------------------- /loancalculator/images/0_H3jZONKqRuAAeHnG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/loancalculator/images/0_H3jZONKqRuAAeHnG.jpg -------------------------------------------------------------------------------- /loancalculator/images/200.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/loancalculator/images/200.gif -------------------------------------------------------------------------------- /loancalculator/images/download (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/loancalculator/images/download (1).jpg -------------------------------------------------------------------------------- /loancalculator/images/download.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shehxad-hussain/javascript-projects/fec263401ff2e4ea80e12887bc46e49681426e8d/loancalculator/images/download.jpg -------------------------------------------------------------------------------- /mainApp.js: -------------------------------------------------------------------------------- 1 | const list = document.querySelector('.list'); 2 | 3 | fetch("./projects.json") 4 | .then(response => { 5 | return response.json(); 6 | }) 7 | .then(data => { 8 | updateUI(data); 9 | }); 10 | 11 | function updateUI(projects){ 12 | projects.forEach(({name, code, index}) => { 13 | 14 | const listItem = document.createElement('li'); 15 | 16 | listItem.innerHTML = ` 17 | ${index} 18 | 19 | ${projectNameFormater(name)} 20 | 21 | 22 | Code 23 | 24 | `; 25 | list.appendChild(listItem); 26 | }); 27 | } 28 | 29 | function projectNameFormater(name){ 30 | return name 31 | .split('-') 32 | .map(word => word[0].toUpperCase() + word.slice(1)) 33 | .join(' '); 34 | } -------------------------------------------------------------------------------- /new-project.sh: -------------------------------------------------------------------------------- 1 | git add . && git commit -m "New Project" && git push -u origin main -------------------------------------------------------------------------------- /numberguesser/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Number Guesser 8 | 9 | 10 |
11 |

Number Guesser

12 |
13 |

Guess a number between and

14 | 15 | 16 |

17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /prototype/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Calculate Age from Date of Birth

12 | 13 |

14 | 15 |

16 | 17 |

Enter Date of Birth:

18 | 19 |

20 | 21 |

hello zahid you are 19 years old

22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /stopwatch/images/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 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 | -------------------------------------------------------------------------------- /stopwatch/images/play-button-arrowhead.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 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 | -------------------------------------------------------------------------------- /stopwatch/images/stop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 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 | -------------------------------------------------------------------------------- /stopwatch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | StopWatch 7 | 8 | 9 | 10 |
11 |

StopWatch

12 |
13 |

00:00:00

14 |
15 |
16 | 19 | 23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /stopwatch/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html, 7 | body { 8 | font-family: lato, sans-serif, Arial; 9 | font-size: 10px; /* 1rem = 10px */ 10 | min-height: 100vh; 11 | } 12 | body { 13 | background: linear-gradient(45deg, #5f5fc4, #062d25, #259f88); 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | .container { 20 | width: 30rem; 21 | height: 35rem; 22 | background: #eeeeee; 23 | display: flex; 24 | flex-direction: column; 25 | justify-content: space-between; 26 | align-items: center; 27 | border-radius: 5px; 28 | box-shadow: 0 0 8px 4px rgba(0,0,0,0.4); 29 | padding: 2rem; 30 | } 31 | .timer-box { 32 | background: white; 33 | border: 1px solid black; 34 | border-radius: 5px; 35 | padding: 1rem; 36 | } 37 | .timer { 38 | font-size: 4rem; 39 | font-weight: lighter; 40 | } 41 | .btn-wrapper { 42 | display: flex; 43 | justify-content: space-between; 44 | width: 15rem; 45 | } 46 | .btn { 47 | cursor: pointer; 48 | background: transparent; 49 | border: none; 50 | outline: none; 51 | width: 4rem; 52 | } 53 | .btn-svg { 54 | width: 4rem; 55 | } 56 | #btn-play{ 57 | display: block; 58 | } 59 | #btn-pause{ 60 | display: none; 61 | } 62 | /* 63 | Icons made by Freepik from www.flaticon.com 64 | Icons made by Chanut from www.flaticon.com 65 | Icons made by Pixel perfect from www.flaticon.com 66 | */ 67 | -------------------------------------------------------------------------------- /tic tac toe/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | background-color: slategray; 4 | } 5 | 6 | header { 7 | margin-right: 40px; 8 | } 9 | 10 | h1 { 11 | color: aliceblue; 12 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 13 | } 14 | 15 | button:hover { 16 | cursor: pointer; 17 | box-shadow: 5px 5px 5px rgb(0, 0, 0); 18 | } 19 | 20 | header button { 21 | font-size: 20px; 22 | background-color: rgb(18, 153, 0); 23 | box-shadow: 3px 3px 3px rgb(0, 87, 15); 24 | margin-right: 20px; 25 | border: none; 26 | } 27 | 28 | header p { 29 | font-size: 25px; 30 | font-weight: bold; 31 | } 32 | 33 | .board { 34 | display: flex; 35 | flex-wrap: wrap; 36 | height: 360px; 37 | width: 360px; 38 | } 39 | 40 | .board:hover { 41 | cursor: pointer; 42 | } 43 | 44 | .cell { 45 | border: solid 2px; 46 | flex-basis: 100px; 47 | display: flex; 48 | align-items: center; 49 | justify-content: center; 50 | font-size: large; 51 | } 52 | 53 | body { 54 | display: flex; 55 | align-items: center; 56 | justify-content: center; 57 | } 58 | 59 | #status { 60 | font-size: 30px; 61 | color: whitesmoke; 62 | } 63 | 64 | 65 | #reset { 66 | background-color: rgb(199, 2, 2); 67 | box-shadow: 3px 3px 3px rgb(0, 0, 0); 68 | } -------------------------------------------------------------------------------- /tic tac toe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tic Tac Toe 8 | 9 | 10 | 11 |
12 |

Tic Tac Toe

13 | 14 | 15 |

16 | 17 |
18 | 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 |
32 | 33 | 34 | --------------------------------------------------------------------------------