├── 01-Hello-Wold ├── hello-world.css ├── hello-world.html └── hello-world.js ├── 02-pop-up ├── popup.css ├── popup.html └── popup.js ├── 03-colour-flipper ├── colour-flipper.css ├── colour-flipper.html └── colour-flipper.js ├── 04-counter ├── counter.css ├── counter.html └── counter.js ├── 05-Analog-Clock ├── README.md ├── index.html ├── script.js ├── style.css └── waqas.JPG ├── 06-change-navTabs-on-scroll ├── nav-tabe.css ├── nav-tabe.html └── nav-tabe.js ├── 07-countdowntimer ├── timer.css ├── timer.html └── timer.js ├── 08_Quiz_app ├── README.md ├── index.html ├── script.js └── style.css ├── 09- FAQs ├── FAQs.css ├── FAQs.html └── FAQs.js ├── 10-sticky-navbar ├── sticky-navbar.css ├── sticky-navbar.html └── sticky-navbar.js ├── 11- testimonials ├── tesimonial.css ├── tesimonial.html ├── tesimonial.js ├── waqas.jpg └── zaryab.jpg ├── 12-ratings ├── rating.css ├── rating.html └── rating.js ├── 13-analog-clock ├── index.html ├── script.js └── style.css ├── 14-wesite_color_switcher ├── index.html ├── script.js └── stuyle.css ├── 15-download-button ├── download.css ├── download.html └── download.js ├── 16-rating ├── rating.css ├── rating.html └── rating.js ├── 17-navbar ├── nav.css ├── nav.html └── nav.js ├── 18-increment-decrement ├── index.html ├── script.js └── style.css ├── 19-Image-Slider-Auto-Navigation ├── 0304.mp4 ├── README.md ├── Screenshot (918).png ├── images │ ├── four.jpg │ ├── one.jpg │ ├── three.jpg │ └── two.jpg ├── index.html ├── script.js └── styles.css ├── 20-toastnitification ├── 0307.mp4 ├── README.md ├── Screenshot (920).png ├── index.html ├── toast.css └── toast.js ├── 21-multi-steps-progress-bar ├── README.md ├── Screenshot (921).png ├── index.html ├── progress.css └── progress.js ├── 22-guess-number ├── guess.css ├── guess.js └── index.html └── README.md /01-Hello-Wold/hello-world.css: -------------------------------------------------------------------------------- 1 | body{ 2 | height: 100vh; 3 | padding: 4rem; 4 | font-family: sans-serif; 5 | } 6 | h1 > span{ 7 | color: red; 8 | } 9 | button{ 10 | background-color: teal; 11 | font-size: 18px; 12 | padding: 5px 10px; 13 | box-shadow: 0 0 12px 8px rgba(0, 0, 0, 0.2); 14 | color: white; 15 | border: none; 16 | 17 | } 18 | button:hover{ 19 | background-color: darkslategrey; 20 | } -------------------------------------------------------------------------------- /01-Hello-Wold/hello-world.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | hello wrold project 7 | 8 | 9 | 10 |

Hello World!

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01-Hello-Wold/hello-world.js: -------------------------------------------------------------------------------- 1 | const btn=document.querySelector("button") 2 | const span=document.querySelector("span") 3 | 4 | btn.addEventListener("click",()=>{ 5 | const name = prompt("Enter your name please ? ") 6 | span.textContent=name 7 | }) -------------------------------------------------------------------------------- /02-pop-up/popup.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: sans-serif; 3 | padding: 0; 4 | margin: 0; 5 | background: linear-gradient(green ,blue); 6 | 7 | } 8 | button{ 9 | margin: 2rem; 10 | background-color: rgb(255, 255, 0); 11 | color:black; 12 | padding: 5px 10px; 13 | border: none; 14 | box-shadow: 0 0 12px 8px rgba(0, 0, 0, 0.3) ; 15 | cursor: pointer; 16 | transition: .1s; 17 | 18 | } 19 | button:hover{ 20 | background-color: gold; 21 | } 22 | .modal{ 23 | position: absolute; 24 | left: 0; 25 | top: 0; 26 | right: 0; 27 | bottom: 0; 28 | height: 100%; 29 | display: none; 30 | justify-content: center; 31 | align-items: center; 32 | } 33 | .modal_overlay{ 34 | position: absolute; 35 | top: 0; 36 | left: 0; 37 | right: 0; 38 | bottom: 0; 39 | background-color: rgba(0, 0, 0, .4); 40 | } 41 | 42 | .modal_content{ 43 | background-color: whitesmoke; 44 | padding: 4rem; 45 | position: relative; 46 | cursor: pointer; 47 | 48 | } 49 | .open 50 | { 51 | display: flex; 52 | } 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /02-pop-up/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | pop-up 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |

Hello World!

17 |

Click anywhere on the modl to close this window

18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /02-pop-up/popup.js: -------------------------------------------------------------------------------- 1 | const openModal=document.querySelector("#openModal"); 2 | const modal=document.querySelector(".modal"); 3 | const modalContent=modal.querySelector(".modal_content"); 4 | 5 | 6 | openModal.addEventListener('click',()=>{ 7 | modal.classList.add("open"); 8 | console.log("hello") 9 | 10 | }); 11 | 12 | modalContent.addEventListener('click',()=>{ 13 | modal.classList.remove("open"); 14 | 15 | }); -------------------------------------------------------------------------------- /03-colour-flipper/colour-flipper.css: -------------------------------------------------------------------------------- 1 | body{ 2 | transition: .3s; 3 | } 4 | section#colour-display{ 5 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 6 | margin: 100px auto; 7 | width: 50%; 8 | background-color: #ffffff; 9 | box-shadow: 0 0 30px rgba(0, 0, 0, 0.5) ; 10 | padding: 4rem; 11 | border-radius: .5rem; 12 | } 13 | section#colour-display h1{ 14 | font-weight: bolder; 15 | } 16 | section#colour-display #new-colour-button{ 17 | width: 100%; 18 | background-color: black; 19 | color: white; 20 | padding: 1rem; 21 | border: none; 22 | font-size: 1rem; 23 | cursor: pointer; 24 | transition: .2s; 25 | 26 | } 27 | section#colour-display #new-colour-button:hover{ 28 | background-color: rgb(60, 60, 60); 29 | } 30 | -------------------------------------------------------------------------------- /03-colour-flipper/colour-flipper.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | colour-filpper 7 | 8 | 9 | 10 |
11 |

Backgroud: #ffffff

12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /03-colour-flipper/colour-flipper.js: -------------------------------------------------------------------------------- 1 | const newColourBtnElement = document.getElementById("new-colour-button"); 2 | const currentColourBtnElement = document.getElementById("current-colour"); 3 | 4 | const hexValues = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; 5 | 6 | function getRandomHexValue() { 7 | const randomIndexPosition = Math.floor( 8 | Math.random()*hexValues.length 9 | ); 10 | 11 | const randomHexValue=hexValues[randomIndexPosition] 12 | 13 | return randomHexValue; 14 | } 15 | function getRandomHexString(stringLenght){ 16 | let hexString=""; 17 | for (let i=0; i{ 25 | const randomHexString ="#"+ getRandomHexString(6); 26 | 27 | document.body.style.background=randomHexString 28 | currentColourBtnElement.textContent=randomHexString 29 | }) -------------------------------------------------------------------------------- /04-counter/counter.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: sans-serif; 3 | background-color: black; 4 | } 5 | #counter{ 6 | display: flex; 7 | width: 100%; 8 | height: 100vh; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | #counter-Display{ 13 | font-size: 4rem; 14 | text-align: center; 15 | color: white; 16 | } 17 | #counter button{ 18 | border: none; 19 | padding: .5rem 1rem; 20 | font-size: 2rem; 21 | cursor: pointer; 22 | } 23 | #counterAdd{ 24 | background-color: chartreuse; 25 | } 26 | #counterSub{ 27 | background-color: red; 28 | } -------------------------------------------------------------------------------- /04-counter/counter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 04-counter 7 | 8 | 9 | 10 |
11 |
12 |

0

13 |
14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /04-counter/counter.js: -------------------------------------------------------------------------------- 1 | const addButtonElement = document.getElementById("counterAdd"); 2 | const subButtonElement = document.getElementById("counterSub"); 3 | const counterDisplayElement = document.getElementById("counter-Display"); 4 | 5 | 6 | let total = 0; 7 | const limit = 20; 8 | const updateCounterDisplay = () => { 9 | if(total>limit){ 10 | total=0; 11 | } 12 | if(total<0){ 13 | total=0; 14 | } 15 | counterDisplayElement.textContent = total; 16 | document.body.style.setProperty('background-color',`rgb(${(total/limit)*255},64,0)`) 17 | } 18 | 19 | addButtonElement.addEventListener("click", () => { 20 | total += 1; 21 | updateCounterDisplay(); 22 | }); 23 | subButtonElement.addEventListener("click", () => { 24 | total -= 1; 25 | updateCounterDisplay(); 26 | }); 27 | updateCounterDisplay(); -------------------------------------------------------------------------------- /05-Analog-Clock/README.md: -------------------------------------------------------------------------------- 1 | # Analog Clock with Custom Background 2 | 3 | A stylish **analog clock** built using **HTML, CSS, and JavaScript**, featuring a custom background image and dark/light mode toggle. 4 | 5 | ## 🚀 Live Demo 6 | 🔗 [View on Netlify](#) 7 | 8 | ## 📂 Features 9 | - 🕰️ **Real-time Analog Clock** with smooth ticking hands 10 | - 🎨 **Dark & Light Mode Toggle** 11 | - 🖼️ **Custom Background Image Support** 12 | - 📱 **Fully Responsive Design** 13 | 14 | ## 🛠️ Technologies Used 15 | - **HTML** - Structure 16 | - **CSS** - Styling & Animations 17 | - **JavaScript** - Clock functionality & DOM manipulation 18 | 19 | ## 📸 Preview 20 | *(Add a relevant screenshot here)* 21 | ![Project Screenshot](./Screenshot.png) 22 | 23 | ## 🔧 Installation & Usage 24 | 1. **Clone the Repository** 25 | ```sh 26 | git clone https:https://github.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/edit/main/05-Analog-Clock 27 | ``` 28 | 2. **Navigate to the Project Folder** 29 | ```sh 30 | 05-Analog-Clock 31 | ``` 32 | 3. **Open `index.html` in Your Browser** 33 | 34 | ## 🤝 Contributing 35 | Contributions, issues, and feature requests are welcome! Feel free to fork this repository and submit a pull request. 36 | 37 | ## 📩 Contact 38 | 🔗 LinkedIn: [Your Profile](#https://www.linkedin.com/in/waqas-khan10/) 39 | 📧 Email: waqaskha0589@gmail.com 40 | 41 | ## 🌟 Show Your Support 42 | If you like this project, **give it a star ⭐ on GitHub!** 43 | 44 | --- 45 | **#JavaScript #CSS #HTML #WebDevelopment #OpenSource #Coding** 46 | -------------------------------------------------------------------------------- /05-Analog-Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Analog Clock 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 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /05-Analog-Clock/script.js: -------------------------------------------------------------------------------- 1 | // ########################### Select Elements ########################### 2 | const body = document.body, 3 | hourHand = document.querySelector(".hour"), 4 | minuteHand = document.querySelector(".minute"), 5 | secondHand = document.querySelector(".second"), 6 | modeSwitch = document.querySelector(".mode-switch"); 7 | 8 | 9 | // ########################### Function to Update Clock ########################### 10 | function updateClock() { 11 | const now = new Date(); 12 | const hours = now.getHours() % 12; 13 | const minutes = now.getMinutes(); 14 | const seconds = now.getSeconds(); 15 | 16 | 17 | // ########################### Calculate Degrees ########################### 18 | const hourDeg = (hours * 30) + (minutes * 0.5); 19 | const minDeg = (minutes * 6) + (seconds * 0.1); 20 | const secDeg = seconds * 6; 21 | 22 | // ########################### Apply Rotation ########################### 23 | hourHand.style.transform = `rotate(${hourDeg}deg)`; 24 | minuteHand.style.transform = `rotate(${minDeg}deg)`; 25 | secondHand.style.transform = `rotate(${secDeg}deg)`; 26 | } 27 | 28 | // ########################### Update Clock Every Second ########################### 29 | setInterval(updateClock, 1000); 30 | updateClock(); // Initialize on Page Load 31 | 32 | let colorWhite=true; 33 | 34 | // ########################### Dark Mode Toggle ########################### 35 | modeSwitch.addEventListener("click", () => { 36 | body.classList.toggle("dark-mode"); 37 | if (colorWhite) { 38 | document.querySelector(".clock").style.background = "rgba(0, 0, 0, .01)" 39 | colorWhite=!colorWhite; 40 | }else{ 41 | document.querySelector(".clock").style.background = "#fff" 42 | colorWhite=!colorWhite; 43 | } 44 | }); 45 | -------------------------------------------------------------------------------- /05-Analog-Clock/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Arial', sans-serif; 6 | } 7 | 8 | 9 | /* ########################### Light Mode ########################### */ 10 | body { 11 | background: #f6f7fb; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | height: 100vh; 16 | transition: background 0.3s ease-in-out; 17 | } 18 | 19 | 20 | /* ########################### Dark Mode ########################### */ 21 | .dark-mode { 22 | background: #18191a; 23 | } 24 | 25 | .container { 26 | display: flex; 27 | flex-direction: column; 28 | align-items: center; 29 | gap: 40px; 30 | } 31 | 32 | 33 | /* ########################### Clock Styling ########################### */ 34 | .clock { 35 | position: relative; 36 | width: 350px; 37 | height: 350px; 38 | background: #fff; 39 | border-radius: 50%; 40 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 41 | display: flex; 42 | align-items: center; 43 | justify-content: center; 44 | overflow: hidden; 45 | } 46 | 47 | 48 | /* ########################### Dark Mode Clock ########################### */ 49 | .dark-mode .clock { 50 | background: #242526; 51 | box-shadow: 0 5px 10px rgba(255, 255, 255, 0.114); 52 | } 53 | 54 | 55 | /* ########################### Image inside the clock ########################### */ 56 | .clock-image { 57 | position: absolute; 58 | width: 100%; 59 | height: 100%; 60 | background-image: url('./waqas.JPG'); 61 | background-size: cover; 62 | background-position: center; 63 | border-radius: 50%; 64 | z-index: -1; 65 | opacity: 0.7; 66 | } 67 | 68 | 69 | /* ########################### Clock Numbers ########################### */ 70 | .clock label { 71 | position: absolute; 72 | inset: 15px; 73 | text-align: center; 74 | transform: rotate(calc(var(--i) * 30deg)); 75 | } 76 | 77 | .clock label span { 78 | display: inline-block; 79 | font-size: 22px; 80 | font-weight: bold; 81 | color: #18191a; 82 | transform: rotate(calc(var(--i) * -30deg)); 83 | } 84 | 85 | 86 | /* ########################### Dark Mode Clock Numbers ########################### */ 87 | .dark-mode .clock label span { 88 | color: #0033ff; 89 | } 90 | 91 | 92 | /* ########################### Indicator (Center Dot) ########################### */ 93 | .indicator { 94 | position: absolute; 95 | height: 12px; 96 | width: 12px; 97 | background: #e74c3c; 98 | border-radius: 50%; 99 | display: flex; 100 | justify-content: center; 101 | align-items: center; 102 | } 103 | 104 | .indicator::before { 105 | content: ""; 106 | height: 100%; 107 | width: 100%; 108 | border-radius: 50%; 109 | background: #18191a; 110 | border: 3px solid #e74c3c; 111 | } 112 | 113 | 114 | /* ########################### Clock Hands ########################### */ 115 | .hand { 116 | position: absolute; 117 | bottom: 0; 118 | border-radius: 8px; 119 | transform-origin: bottom; 120 | transition: transform 0.5s cubic-bezier(0.4, 2.3, 0.3, 1); 121 | } 122 | 123 | .hour { 124 | height: 80px; 125 | width: 6px; 126 | background: #18191a; 127 | } 128 | 129 | .minute { 130 | height: 110px; 131 | width: 4px; 132 | background: #18191a; 133 | } 134 | 135 | .second { 136 | height: 130px; 137 | width: 2px; 138 | background: #0d00ff; 139 | } 140 | 141 | 142 | /* ########################### Dark Mode Hands ########################### */ 143 | .dark-mode .hour, 144 | .dark-mode .minute { 145 | background: #0033ff; 146 | } 147 | 148 | .dark-mode .second { 149 | background: #ffe600; 150 | } 151 | 152 | 153 | /* ########################### Mode Switch Button ########################### */ 154 | .mode-switch { 155 | padding: 10px 20px; 156 | border-radius: 8px; 157 | font-size: 18px; 158 | font-weight: 500; 159 | border: none; 160 | cursor: pointer; 161 | background: #18191a; 162 | color: #fff; 163 | transition: 0.3s; 164 | } 165 | 166 | .mode-switch:hover { 167 | background: #000dff; 168 | } 169 | 170 | 171 | /* ########################### Dark Mode Button ########################### */ 172 | .dark-mode .mode-switch { 173 | background: #f6f7fb; 174 | color: #18191a; 175 | } 176 | 177 | .dark-mode .mode-switch:hover { 178 | background: #ffdd00; 179 | } 180 | -------------------------------------------------------------------------------- /05-Analog-Clock/waqas.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/05-Analog-Clock/waqas.JPG -------------------------------------------------------------------------------- /06-change-navTabs-on-scroll/nav-tabe.css: -------------------------------------------------------------------------------- 1 | main{ 2 | width: 400px; 3 | margin: 0 auto; 4 | } 5 | nav{ 6 | width: 100%; 7 | } 8 | nav ul{ 9 | list-style: none; 10 | display: flex; 11 | padding: 0; 12 | margin: 0; 13 | justify-content: flex-start; 14 | border-bottom: 1px solid gray; 15 | } 16 | nav ul li{ 17 | padding: .5rem; 18 | border-top: 1px solid gray; 19 | border-left: 1px solid gray; 20 | border-right: 1px solid gray; 21 | border-top-left-radius:.5rem ; 22 | border-top-right-radius: .5rem; 23 | } 24 | nav ul a{ 25 | text-decoration: none; 26 | } 27 | nav li.active{ 28 | background-color: lightseagreen; 29 | color: white; 30 | } 31 | .hidden{ 32 | display: none; 33 | } -------------------------------------------------------------------------------- /06-change-navTabs-on-scroll/nav-tabe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 06-nav-tabe 7 | 8 | 9 | 10 |
11 | 18 |
19 |
20 |

Section 1

21 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae adipisci, dignissimos labore placeat accusamus porro nihil incidunt quibusdam cum ipsam et voluptatibus, iste nulla laudantium voluptatem minus maxime nisi molestias.

22 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae adipisci, dignissimos labore placeat accusamus porro nihil incidunt quibusdam cum ipsam et voluptatibus, iste nulla laudantium voluptatem minus maxime nisi molestias.

23 |
24 | 29 | 34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /06-change-navTabs-on-scroll/nav-tabe.js: -------------------------------------------------------------------------------- 1 | const navElement = document.querySelector("nav"); 2 | const navbarLinks = navElement.querySelectorAll("a"); 3 | const sectionElements = document.querySelectorAll("section"); 4 | 5 | const removerActiverLinks = () => { 6 | navbarLinks.forEach(link => link.parentElement.classList.remove('active')) 7 | } 8 | 9 | const hideSections = () => { 10 | sectionElements.forEach(section => section.classList.add("hidden")) 11 | } 12 | 13 | navbarLinks.forEach(link => { 14 | link.addEventListener("click", () => { 15 | removerActiverLinks(); 16 | hideSections(); 17 | link.parentElement.classList.add("active"); 18 | const hello = document.querySelector(link.hash); 19 | console.log(hello) 20 | hello.classList.remove("hidden"); 21 | }) 22 | }) -------------------------------------------------------------------------------- /07-countdowntimer/timer.css: -------------------------------------------------------------------------------- 1 | body{ 2 | height: 100vh; 3 | background-color: #2f2f2f; 4 | font-family: sans-serif; 5 | margin: 2rem; 6 | 7 | } 8 | h1{ 9 | color: white; 10 | } 11 | .container{ 12 | display: flex; 13 | gap: 2rem; 14 | box-shadow: 0 0 24px rgba(0, 0, 0, 0.2) ; 15 | padding: 1rem; 16 | border-radius: .5rem; 17 | background-color: whitesmoke; 18 | } 19 | .inputs{ 20 | display: flex; 21 | flex-direction: column; 22 | gap: .5rem; 23 | width: 100%; 24 | } 25 | .inputs input{ 26 | padding: .5rem; 27 | } 28 | .inputs button{ 29 | border: none; 30 | padding: .5rem 1rem; 31 | background-color: lightgrey; 32 | cursor: pointer; 33 | font-size: 16px; 34 | } 35 | .inputs button:hover{ 36 | background-color: white; 37 | } 38 | .timer{ 39 | width: 100%; 40 | display: flex; 41 | align-items: center; 42 | justify-content: center; 43 | font-size: 2rem; 44 | } 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /07-countdowntimer/timer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | countDown timer 7 | 8 | 9 | 10 |

Countdown Timer

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

26 |
27 |
28 |
29 |

30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /07-countdowntimer/timer.js: -------------------------------------------------------------------------------- 1 | const hoursInputElement = document.getElementById("hoursInput") 2 | const minutesInputElement = document.getElementById("minutesInput") 3 | const secondsInputElement = document.getElementById("secondsInput") 4 | 5 | 6 | const hoursOutputElement = document.getElementById("hoursOutput") 7 | const minutesOutputElement = document.getElementById("minutesOutput") 8 | const secondsOutputElement = document.getElementById("secondsOutput") 9 | 10 | const startTimerButtonElement = document.getElementById("startTimer") 11 | 12 | let targetTime=575875; 13 | let timerInterval; 14 | 15 | const updateTimer = () => { 16 | if (targetTime) { 17 | const differenceInSeconds = Math.floor(targetTime - Date.now()) / 1000; 18 | 19 | const hours = Math.floor(differenceInSeconds / 3600); 20 | const minutes = Math.floor(differenceInSeconds / 60) % 60; 21 | const seconds = Math.floor(differenceInSeconds % 60); 22 | 23 | hoursOutputElement.textContent=`${hours} hours`; 24 | minutesOutputElement.textContent=`${minutes} minutes`; 25 | secondsOutputElement.textContent=`${seconds} seconds`; 26 | 27 | } 28 | } 29 | 30 | startTimerButtonElement.addEventListener("click",()=>{ 31 | const futurHours=parseInt(hoursInputElement.value); 32 | const futurMinutes=parseInt(minutesInputElement.value); 33 | const futurSeconds=parseInt(secondsInputElement.value); 34 | 35 | const date =new Date(); 36 | const currentHours = getHours(); 37 | const currentMintes = getMinutes(); 38 | const currentSecondes = getSecondes(); 39 | 40 | date.setHours(currentHours + futurHours); 41 | date.setHours(currentMintes + futurMinutes); 42 | date.setHours(currentSecondes + futurSeconds); 43 | 44 | targetTime=date.getTime(); 45 | updateTimer(); 46 | timerInterval=setInterval(updateTimer,500) 47 | 48 | }) 49 | 50 | 51 | 52 | updateTimer(); 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /08_Quiz_app/README.md: -------------------------------------------------------------------------------- 1 | # Quiz App -------------------------------------------------------------------------------- /08_Quiz_app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

1 ) this is a demo question ?

16 |
17 |

Select the correct option

18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 |
37 |
38 |
39 |
40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /08_Quiz_app/script.js: -------------------------------------------------------------------------------- 1 | const questions=[ 2 | { 3 | 'question':"which of the following is markup language", 4 | 'a':"HTML", 5 | 'b':"CSS", 6 | 'c':"JAVASCRIP", 7 | 'd':"PYTHON", 8 | 'correct':"a" 9 | }, 10 | { 11 | "question":"which of the following language is used for styling", 12 | "a":"HTML", 13 | "b":"CSS", 14 | "c":"JAVASCRIP", 15 | "d":"PYTHON", 16 | "correct":"b" 17 | }, 18 | { 19 | "question":"which of the following langauge is used to creat logic in websites", 20 | "a":"HTML", 21 | "b":"CSS", 22 | "c":"JAVASCRIP", 23 | "d":"PYTHON", 24 | "correct":"c" 25 | } 26 | ] 27 | 28 | 29 | let index=0; 30 | let right=0; 31 | let wrong=0; 32 | let total=questions.length; 33 | 34 | const questionboxElement=document.getElementById("quebox"); 35 | const inputOptionElement=document.querySelectorAll(".options"); 36 | const boxElement=document.querySelector(".box"); 37 | 38 | 39 | const loadQuestion=()=>{ 40 | const data=questions[index] 41 | questionboxElement.innerText=`${index+1}) ${data.question}` 42 | inputOptionElement[0].nextElementSibling.innerText=data.a; 43 | inputOptionElement[1].nextElementSibling.innerText=data.b; 44 | inputOptionElement[2].nextElementSibling.innerText=data.c; 45 | inputOptionElement[3].nextElementSibling.innerText=data.d; 46 | } 47 | loadQuestion(); 48 | 49 | 50 | const submitQuiz=()=>{ 51 | if (index==total) { 52 | return endQuiz(); 53 | } 54 | reset(); 55 | const data=questions[index] 56 | let answer=getAnswer() 57 | console.log(answer,data.correct) 58 | if(answer==data.correct){ 59 | console.log("corerrct") 60 | right++; 61 | } 62 | else{ 63 | console.log("wrrrrrrong") 64 | wrong++; 65 | } 66 | index++; 67 | loadQuestion(); 68 | return; 69 | 70 | } 71 | 72 | const getAnswer=()=>{ 73 | let ans; 74 | inputOptionElement.forEach( 75 | (input)=>{ 76 | if(input.checked){ 77 | ans = input[name="option"].value; 78 | console.log(ans) 79 | } 80 | } 81 | ) 82 | return ans; 83 | }; 84 | 85 | const reset=()=>{ 86 | inputOptionElement.forEach( 87 | (input)=>{ 88 | input.checked=false 89 | } 90 | )} 91 | 92 | 93 | const endQuiz=()=>{ 94 | boxElement.innerHTML=`

Thank you for playing this Quiz game

95 |

${right}/ ${total} out of correct

96 | ` 97 | } 98 | 99 | -------------------------------------------------------------------------------- /08_Quiz_app/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/08_Quiz_app/style.css -------------------------------------------------------------------------------- /09- FAQs/FAQs.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: sans-serif; 3 | height: 100vh; 4 | width: 100%; 5 | display: block; 6 | justify-content: center; 7 | align-items: center; 8 | background-color: black; 9 | } 10 | h1{ 11 | color: rgb(17, 250, 0); 12 | } 13 | details{ 14 | width: 40%; 15 | cursor: pointer; 16 | padding: 1rem; 17 | margin: .5rem; 18 | background-color: yellow; 19 | font-size: 19px; 20 | font-weight: bold; 21 | border: 2px solid red; 22 | box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.2); 23 | 24 | } 25 | summary{ 26 | color: blue; 27 | } -------------------------------------------------------------------------------- /09- FAQs/FAQs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FAQs 8 | 9 | 10 | 11 | 12 |

FAQs

13 |
14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /09- FAQs/FAQs.js: -------------------------------------------------------------------------------- 1 | const dataArry = [ 2 | { 3 | title: 'why is javascript cool', 4 | detail: ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias dolores vitae quos corrupti explicabo, itaque earum accusantium eveniet sit quibusdam voluptatibus consequuntur iusto, voluptas totam temporibus perspiciatis. Officiis, eligendi cumque.' 5 | }, 6 | { 7 | title: 'what is javascript ', 8 | detail: ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias dolores vitae quos corrupti explicabo, itaque earum accusantium eveniet sit quibusdam voluptatibus consequuntur iusto, voluptas totam temporibus perspiciatis. Officiis, eligendi cumque.' 9 | }, 10 | { 11 | title: 'how can I LEARN javascript ', 12 | detail: ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias dolores vitae quos corrupti explicabo, itaque earum accusantium eveniet sit quibusdam voluptatibus consequuntur iusto, voluptas totam temporibus perspiciatis. Officiis, eligendi cumque.' 13 | } 14 | ]; 15 | 16 | const makeHTML = data => { 17 | return `
18 | ${data.title} 19 |

${data.detail}

20 |
` 21 | } 22 | const containerElement=document.getElementById('faq-container') 23 | containerElement.innerHTML = dataArry.map(dataItem => makeHTML(dataItem)).join('') -------------------------------------------------------------------------------- /10-sticky-navbar/sticky-navbar.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: flex; 3 | width: 400px; 4 | margin: 0 auto; 5 | } 6 | 7 | nav { 8 | position: relative; 9 | } 10 | 11 | nav ul { 12 | width: 6rem; 13 | list-style-type: none; 14 | } 15 | 16 | nav ul li { 17 | padding: .5rem; 18 | } 19 | 20 | nav ul li a { 21 | padding: .5rem; 22 | text-decoration: none; 23 | 24 | } 25 | 26 | nav .sticky { 27 | position: sticky; 28 | top: 0; 29 | } 30 | nav a.active{ 31 | background-color: lightseagreen; 32 | color: white; 33 | } -------------------------------------------------------------------------------- /10-sticky-navbar/sticky-navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | stikcy-navbar 8 | 9 | 10 | 11 | 12 |
13 | 20 |
21 |
22 |

Section 1

23 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, excepturi fugit sapiente quod id 24 | sequi quos beatae mollitia possimus porro autem, doloremque suscipit eos corrupti veniam cum error 25 | unde explicabo.

26 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, excepturi fugit sapiente quod id 27 | sequi quos beatae mollitia possimus porro autem, doloremque suscipit eos corrupti veniam cum error 28 | unde explicabo.

29 |
30 |
31 |

Section 2

32 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, excepturi fugit sapiente quod id 33 | sequi quos beatae mollitia possimus porro autem, doloremque suscipit eos corrupti veniam cum error 34 | unde explicabo.

35 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, excepturi fugit sapiente quod id 36 | sequi quos beatae mollitia possimus porro autem, doloremque suscipit eos corrupti veniam cum error 37 | unde explicabo.

38 |
39 |
40 |

Section 3

41 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, excepturi fugit sapiente quod id 42 | sequi quos beatae mollitia possimus porro autem, doloremque suscipit eos corrupti veniam cum error 43 | unde explicabo.

44 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, excepturi fugit sapiente quod id 45 | sequi quos beatae mollitia possimus porro autem, doloremque suscipit eos corrupti veniam cum error 46 | unde explicabo.

47 |
48 |
49 |
50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /10-sticky-navbar/sticky-navbar.js: -------------------------------------------------------------------------------- 1 | const navElement = document.querySelector("nav") 2 | const navbarLinks = navElement.querySelectorAll("a") 3 | 4 | const navPosition = navElement.getBoundingClientRect().top; 5 | 6 | window.addEventListener("scroll", () => { 7 | const scrollPosition = window.scrollY; 8 | navElement.style.top = scrollPosition + "px"; 9 | 10 | navbarLinks.forEach(link => { 11 | const sectionElement= document.querySelector(link.hash); 12 | const offset=60; 13 | if (scrollPosition +offset>sectionElement.offsetTop && scrollPosition +offset < sectionElement.offsetTop+sectionElement.offsetHeight){ 14 | link.classList.add("active"); 15 | }else{ 16 | link.classList.remove("active"); 17 | } 18 | 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /11- testimonials/tesimonial.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: sans-serif; 3 | /* background-color: black; */ 4 | } 5 | #testimonilas-container{ 6 | width: 400px; 7 | margin: 0 auto; 8 | } 9 | .testimonial-card{ 10 | padding: 1rem; 11 | box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.1); 12 | width: 100%; 13 | border-radius: .5rem; 14 | line-height: 1.4; 15 | } 16 | .testimonial-card img{ 17 | width: 150px; 18 | margin: 0 auto; 19 | border-radius: 50%; 20 | display: block; 21 | } 22 | .testimonial-card h2{ 23 | text-align: center; 24 | text-transform: uppercase; 25 | } 26 | .testimonial-card date{ 27 | text-align: right; 28 | display: block; 29 | font-style: italic; 30 | } 31 | nav{ 32 | display: flex; 33 | justify-content: center; 34 | margin: 1rem 0; 35 | gap: 1rem; 36 | 37 | } 38 | nav button{ 39 | cursor: pointer; 40 | width: 6rem; 41 | background-color: blue; 42 | color: white; 43 | border: none; 44 | padding: .5rem 1rem; 45 | font-size: 16px; 46 | 47 | } 48 | nav button:hover{ 49 | background-color: rgb(62, 62, 255); 50 | } -------------------------------------------------------------------------------- /11- testimonials/tesimonial.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Testimonials 7 | 8 | 9 | 10 | 11 |

Testimonials

12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /11- testimonials/tesimonial.js: -------------------------------------------------------------------------------- 1 | const testimonials=[ 2 | { 3 | author:{ 4 | name:"Waqas Khan", 5 | image:"waqas.jpg", 6 | }, 7 | text:" Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias saepe recusandae ipsum, doloribus quo hic et voluptatem perferendis, quas vel non facere repudiandae modi doloremque itaque? Quisquam, iusto. Maiores ipsam", 8 | date:"23rd March" 9 | }, 10 | { 11 | author:{ 12 | name:"zaryab Khan", 13 | image:"zaryab.jpg", 14 | }, 15 | text:" Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias saepe recusandae ipsum, doloribus quo hic et voluptatem perferendis, quas vel non facere repudiandae modi doloremque itaque? Quisquam, iusto. Maiores ipsam", 16 | date:"2rd March" 17 | }, 18 | { 19 | author:{ 20 | name:"hasham Khan", 21 | image:"zaryab.jpg", 22 | }, 23 | text:" Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias saepe recusandae ipsum, doloribus quo hic et voluptatem perferendis, quas vel non facere repudiandae modi doloremque itaque? Quisquam, iusto. Maiores ipsam", 24 | date:"28rd March" 25 | } 26 | ] 27 | 28 | 29 | const containerElement=document.getElementById("testimonilas-container") 30 | console.log(containerElement) 31 | 32 | const makeTestimonialCard=testimonial=>{ 33 | return`
34 | 35 |

${testimonial.author.name}

36 |

${testimonial.text}

37 | Written on ${testimonial.date} 38 |
` 39 | }; 40 | let currentTestimonial=0; 41 | const nextTestimonial=()=>{ 42 | if (currentTestimonial { 49 | if (currentTestimonial>0){ 50 | currentTestimonial-=1; 51 | updatePage(); 52 | } 53 | } 54 | const updatePage=()=>{ 55 | let markup=makeTestimonialCard(testimonials[currentTestimonial]) 56 | 57 | if (testimonials.length >1){ 58 | markup+=`` 62 | } 63 | 64 | 65 | containerElement.innerHTML=markup 66 | } 67 | updatePage(); 68 | 69 | -------------------------------------------------------------------------------- /11- testimonials/waqas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/11- testimonials/waqas.jpg -------------------------------------------------------------------------------- /11- testimonials/zaryab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/11- testimonials/zaryab.jpg -------------------------------------------------------------------------------- /12-ratings/rating.css: -------------------------------------------------------------------------------- 1 | #ratings{ 2 | display: flex; 3 | flex-direction: column; 4 | gap: 1rem; 5 | border: 2px solid black; 6 | padding: 1rem; 7 | width: 100px; 8 | } 9 | .empty::before{ 10 | content: ""; 11 | cursor: pointer; 12 | } 13 | .filled::before{ 14 | content: ""; 15 | cursor: pointer; 16 | } -------------------------------------------------------------------------------- /12-ratings/rating.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ratings 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /12-ratings/rating.js: -------------------------------------------------------------------------------- 1 | const initialQuestions = [ 2 | { 3 | label: "Riendliness", 4 | rating: 0, 5 | }, 6 | ] 7 | 8 | const storedQuestions = JSON.parse(localStorage.getItem("storedQuestions")); 9 | 10 | const questions = storedQuestions || initialQuestions; 11 | 12 | const makeStarRating = question => { 13 | const container = document.createElement("div"); 14 | const label = document.createElement("label"); 15 | label.textContent = question.label; 16 | container.appendChild(label) 17 | container.appendChild(makeStarRating(5, question)) 18 | 19 | return container; 20 | } 21 | 22 | const madeStars = (maxValue, question) => { 23 | const starContainer = document.createElement("div"); 24 | 25 | for (let starPosition = 1; starPosition <= maxValue; starPosition++) { 26 | const starElement = document.createElement("span"); 27 | starContainer.appendChild(starElement); 28 | if (starPosition <= question.rating) { 29 | starElement.classList.add("filled"); 30 | 31 | } else { 32 | starElement.classList.add("empty"); 33 | } 34 | } 35 | return starContainer 36 | } 37 | 38 | const ratingsElement = document.getElementById("ratings") 39 | questions.forEach(question => { 40 | ratingsElement.appendChild(makeStarRating(question)); 41 | 42 | }); -------------------------------------------------------------------------------- /13-analog-clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Analog Clock 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 |
Dark Mode
34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /13-analog-clock/script.js: -------------------------------------------------------------------------------- 1 | const body = document.querySelector("body"), 2 | hourHand = document.querySelector(".hour"), 3 | minuteHand = document.querySelector(".minute"), 4 | secondHand = document.querySelector(".hand"), 5 | switchMode = document.querySelector(".mode-switch") 6 | console.log(secondHand) 7 | const updateTime = () => { 8 | let date = new Date(), 9 | secToDeg = (date.getSeconds() / 60) * 360; 10 | secondHand.style.transform=`rotate(${secToDeg})`; 11 | 12 | }; 13 | 14 | setInterval(updateTime, 1000) 15 | 16 | 17 | -------------------------------------------------------------------------------- /13-analog-clock/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | :root { 9 | --prinmary-color: #f6f7fb; 10 | --white-color: #fff; 11 | --black-color: #18191a; 12 | --red-color: #e74c3c; 13 | } 14 | 15 | body { 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | height: 100vh; 20 | } 21 | .container{ 22 | display: flex; 23 | flex-direction: column; 24 | align-items: center; 25 | gap: 60px; 26 | } 27 | .container .clock{ 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | border-radius: 50%; 32 | height: 400px; 33 | width: 400px; 34 | background: var(--white-color); 35 | box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1); 36 | position: relative; 37 | 38 | 39 | } 40 | 41 | .clock label { 42 | position: absolute; 43 | inset: 20px; 44 | text-align: center; 45 | transform: rotate(calc(var(--i)*(360deg/12))); 46 | } 47 | 48 | .clock label span { 49 | display: inline-block; 50 | font-size: 30px; 51 | font-weight: bold; 52 | color: var(--black-color); 53 | transform: rotate(calc(var(--i)*(-360deg/12))); 54 | } 55 | 56 | .container .indecator{ 57 | position: absolute; 58 | height: 10px; 59 | width: 10px; 60 | background: var(--red-color); 61 | display: flex; 62 | justify-content: center; 63 | } 64 | .indecator::before{ 65 | content: ""; 66 | position: absolute; 67 | height: 100%; 68 | width: 100%; 69 | border-radius: 50%; 70 | z-index: 100; 71 | background: var(--black-color); 72 | border: 4px solid var(--red-color); 73 | 74 | } 75 | .indecator .hand{ 76 | position: absolute; 77 | height: 130px; 78 | width: 4px; 79 | bottom: 0; 80 | border-radius: 25px; 81 | transform-origin: bottom; 82 | background: var(--red-color); 83 | } 84 | .minute{ 85 | height: 120px; 86 | width: 5px; 87 | transform: rotate(55deg); 88 | background: var(--black-color); 89 | } 90 | .hour{ 91 | height: 100px; 92 | width: 8px; 93 | transform: rotate(59deg); 94 | background: var(--black-color); 95 | } 96 | .mode-switch{ 97 | padding: 10px 20px; 98 | border-radius: 8px; 99 | font-size: 22px; 100 | font-weight: 400; 101 | display: inline-block; 102 | color: var(--white-color); 103 | background: var(--black-color); 104 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 105 | } 106 | -------------------------------------------------------------------------------- /14-wesite_color_switcher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | color_switcher site 8 | 9 | 12 | 13 | 14 | 15 | 51 | 52 |
53 | 54 |

Cusomize your Website

55 |

With a Beautiful Colours...

56 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur amet neque ullam quae aliquam natus quidem excepturi. Libero animi, expedita accusantium fugiat repellendus doloribus earum eius. Rem consequatur eos consequuntur.

57 |
58 | Explore 59 |
60 | 61 |
62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /14-wesite_color_switcher/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/14-wesite_color_switcher/script.js -------------------------------------------------------------------------------- /14-wesite_color_switcher/stuyle.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | transition: all .3s ease; 7 | } 8 | :root{ 9 | --white:#fff; 10 | --black:#24292d; 11 | --nav-main:#4070f4; 12 | --switcher-main:#0b3cc1; 13 | --light-bg:#fff; 14 | 15 | 16 | } 17 | nav{ 18 | position: fixed; 19 | top: 0; 20 | left: 0; 21 | height: 70px; 22 | width: 100%; 23 | background: var(--nav-main); 24 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 25 | } 26 | nav .nvabar{ 27 | height: 100%; 28 | display: flex; 29 | align-items: center; 30 | justify-content: space-between; 31 | padding: 0 30px; 32 | } 33 | .nvabar .logo a{ 34 | font-size: 30px; 35 | font-weight: 500; 36 | color: var(--white); 37 | text-decoration: none; 38 | } 39 | .nvabar .nav-links{ 40 | display: flex; 41 | } 42 | .nav-links li{ 43 | list-style: none; 44 | margin: 0 8px; 45 | } 46 | .nav-links li a{ 47 | color: var(--white); 48 | font-size: 18px; 49 | font-weight: 400; 50 | opacity: .8; 51 | text-decoration: none; 52 | } 53 | .nav-links li a:hover{ 54 | opacity: 1; 55 | } 56 | .nvabar .appearance{ 57 | display: flex; 58 | align-items: center; 59 | } 60 | .color-icon{ 61 | position: relative; 62 | 63 | } 64 | .appearance .light-dark, 65 | .appearance .color-icon .icons{ 66 | height: 50px; 67 | width: 50px; 68 | text-align: center; 69 | line-height: 50px; 70 | color: var(--white); 71 | font-size: 20px; 72 | margin: 0 10px; 73 | border-radius: 6px; 74 | background: var(--switcher-main); 75 | opacity: .8; 76 | cursor: pointer; 77 | } 78 | .appearance .color-icon .icons{ 79 | width: 70px; 80 | } 81 | .appearance .light-dark:hover, 82 | .appearance .color-icon .icons:hover{ 83 | opacity: 1; 84 | } 85 | .color-icon .color-box{ 86 | position: absolute; 87 | bottom: -133px; 88 | right: 0; 89 | min-height: 100px; 90 | background: var(--white); 91 | padding: 16px 20px 20px 20px ; 92 | border-radius: 6px; 93 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 94 | } 95 | .color-box h3{ 96 | display: inline-block; 97 | white-space: nowrap; 98 | font-size: 16px; 99 | font-weight: 600; 100 | width: 100%; 101 | text-align: left; 102 | margin-bottom: 8px; 103 | } 104 | .color-box .color-switchers{ 105 | display: flex; 106 | } 107 | .color-box .color-switchers .btn{ 108 | display: inline-block; 109 | height: 40px; 110 | width: 40px; 111 | outline: none; 112 | border: none; 113 | border-radius: 50%; 114 | background: var(--nav-main); 115 | margin: 0 5px; 116 | } 117 | .color-box .color-switchers .btn.active{ 118 | box-shadow: 0 0 0 2px #fff, 119 | 0 0 0 4px var(--nav-main); 120 | } 121 | .color-box .color-switchers .btn.orange{ 122 | background: #f79f1f; 123 | } 124 | .color-box .color-switchers .btn.orange.active{ 125 | box-shadow: 0 0 0 2px #fff, 126 | 0 0 0 4px #f79f1f; 127 | } 128 | .color-box .color-switchers .btn.purple{ 129 | background: #8e44ad; 130 | } 131 | .color-box .color-switchers .btn.purple.active{ 132 | box-shadow: 0 0 0 2px #fff, 133 | 0 0 0 4px #8e44ad; 134 | } 135 | .color-box .color-switchers .btn.green{ 136 | background: #3a9943; 137 | } 138 | .color-box .color-switchers .btn.green.active{ 139 | box-shadow: 0 0 0 2px #fff, 140 | 0 0 0 4px #3a9943; 141 | } 142 | 143 | 144 | 145 | .home-content{ 146 | display: flex; 147 | flex-direction: column; 148 | justify-content: center; 149 | height: 100vh; 150 | width: 100%; 151 | background: var(--light-bg); 152 | padding: 0 60px; 153 | } 154 | .home-content h2{ 155 | font-size: 40px; 156 | color: var(--black); 157 | } 158 | .home-content h3{ 159 | font-size: 35px; 160 | color: var(--black); 161 | } 162 | .home-content h3 span{ 163 | color: var(--nav-main); 164 | } 165 | .home-content p{ 166 | font-size: 14px; 167 | width: 40%; 168 | margin-bottom: 30px; 169 | } 170 | .home-content a{ 171 | font-size: 20px; 172 | padding: 12px 24px ; 173 | color: var(--white); 174 | background: var(--switcher-main); 175 | text-decoration: none; 176 | border-radius: 6px; 177 | } 178 | .home-content a:hover{ 179 | background: var(--nav-main); 180 | } 181 | .home-content a i{ 182 | transform: rotate(45deg); 183 | } 184 | 185 | @media (max-width : 1100px){ 186 | .home-content p{ 187 | width: 70%; 188 | } 189 | } -------------------------------------------------------------------------------- /15-download-button/download.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | body{ 8 | height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | background: #d4d6fc; 13 | } 14 | .download-btn{ 15 | display: flex; 16 | align-items: center; 17 | border: none; 18 | color: white; 19 | border-radius: 6px; 20 | padding: 16px 25px; 21 | background: rgb(85, 85, 255); 22 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 23 | cursor: pointer; 24 | transition: all .2s; 25 | } 26 | .download-btn:hover{ 27 | background: rgb(55, 55, 255); 28 | } 29 | .download-btn .fa-download{ 30 | font-size: 2rem ; 31 | } 32 | .download-btn .text{ 33 | font-size: 1.6rem; 34 | padding-left: 10px; 35 | } -------------------------------------------------------------------------------- /15-download-button/download.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Download button with timer 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /15-download-button/download.js: -------------------------------------------------------------------------------- 1 | const downloadBtn=document.querySelector(".download-btn"); 2 | 3 | 4 | -------------------------------------------------------------------------------- /16-rating/rating.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | body{ 8 | height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | background: linear-gradient(45deg, rgb(241, 96, 96),yellow); 13 | } 14 | .rating-box{ 15 | position: relative; 16 | background: #fff; 17 | padding: 25px 50px 35px; 18 | border-radius: 25px; 19 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) ; 20 | } 21 | .rating-box header{ 22 | font-size: 22px; 23 | color: #dadada; 24 | font-weight: bold; 25 | margin-bottom: 20px; 26 | text-align: center; 27 | } 28 | .rating-box .stars{ 29 | display: flex; 30 | align-content: center; 31 | gap: 25px; 32 | } 33 | .stars i{ 34 | color: #e6e6e6; 35 | font-size: 35px; 36 | cursor: pointer; 37 | transition: color .2s ease; 38 | } 39 | 40 | .stars i.active{ 41 | color: gold; 42 | 43 | } 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /16-rating/rating.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | rating shor method 7 | 8 | 9 | 10 | 11 |
12 |
How was your experience?
13 |
14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /16-rating/rating.js: -------------------------------------------------------------------------------- 1 | const stars = document.querySelectorAll(".stars i"); 2 | // console.log(stars) 3 | 4 | stars.forEach((star, index1) => { 5 | star.addEventListener("click", () => { 6 | console.log(index1) 7 | 8 | stars.forEach((star, index2) => { 9 | console.log(index2) 10 | index1 >= index2 ? star.classList.add("active") : star.classList.remove("active") 11 | }) 12 | }) 13 | }) -------------------------------------------------------------------------------- /17-navbar/nav.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | text-decoration: none; 7 | } 8 | header{ 9 | height: 100vh; 10 | width: 100%; 11 | background: #e6e6e6; 12 | position: relative; 13 | } 14 | nav{ 15 | position: fixed; 16 | width: 100%; 17 | height: 60px; 18 | display: flex; 19 | align-items: center; 20 | padding: 10px; 21 | background: #a0a0a0; 22 | } 23 | .logo-box .logo{ 24 | font-size: 30px; 25 | font-weight: bold; 26 | padding-left: 20px; 27 | } 28 | .menu-box{ 29 | transform: translateX(70%); 30 | } 31 | .menu{ 32 | list-style: none; 33 | } 34 | 35 | .menu li{ 36 | display: inline-block; 37 | padding: 0 10px; 38 | font-size: 18px; 39 | font-weight: bold; 40 | } 41 | .login-box { 42 | position: absolute; 43 | right: 0; 44 | } 45 | .login-box .login{ 46 | padding-right: 20px; 47 | font-size: 18px; 48 | font-weight: bold; 49 | } 50 | .login-box .check{ 51 | /* margin-right: 10px; */ 52 | width: 20px; 53 | height: 15px; 54 | } 55 | .login-box .search{ 56 | position: relative; 57 | display: inline-block; 58 | 59 | } 60 | .login-box .search input{ 61 | position: relative; 62 | height: 29px; 63 | max-width: 30px; 64 | width: 100%; 65 | padding: 0 10px ; 66 | font-size: 16px; 67 | border-radius: 5px; 68 | border: none; 69 | transition: .5s; 70 | } 71 | .search.open input{ 72 | max-width: 214px; 73 | padding: 0 10px 0 30px; 74 | 75 | } 76 | .search-Icon{ 77 | position: absolute; 78 | top: 50%; 79 | left: 0; 80 | height: 100%; 81 | width: 20px; 82 | transform: translateY(-50%); 83 | padding-left: 5px; 84 | display: flex; 85 | justify-content: center; 86 | align-items: center; 87 | background: #fff; 88 | border-radius: 5px; 89 | } 90 | .close-Icon{ 91 | opacity: 0; 92 | pointer-events: none; 93 | } 94 | .search.open .close-Icon{ 95 | opacity: 1; 96 | pointer-events: auto; 97 | } 98 | 99 | /* here section after navbar start from here */ 100 | 101 | .text{ 102 | position: absolute; 103 | left: 50%; 104 | top: 50%; 105 | width: 246px; 106 | height: 60px; 107 | font-size: 30px; 108 | font-weight: bold; 109 | } 110 | .text .animate-text{ 111 | color: rgb(0, 17, 255); 112 | position: relative; 113 | } 114 | .animate-text::before{ 115 | content: ""; 116 | position: absolute; 117 | top: 0; 118 | left: 0; 119 | height: 100%; 120 | width: 100%; 121 | background: #e6e6e6; 122 | border-left: 2px solid red; 123 | animation: animate 4s steps(12) infinite; 124 | } 125 | @keyframes animate{ 126 | 40%{ 127 | left: 100%; 128 | } 129 | 100%{ 130 | left: 0%; 131 | } 132 | } -------------------------------------------------------------------------------- /17-navbar/nav.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | navbar 8 | 9 | 10 | 11 | 12 |
13 | 36 |
37 | I'm a YouTuber 38 |
39 |
40 |
41 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quidem repellat nam, quae facilis minima at explicabo. Deleniti aperiam ad fugit pariatur minima reprehenderit exercitationem! Ab hic nemo magnam dolorum.

42 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quidem repellat nam, quae facilis minima at explicabo. Deleniti aperiam ad fugit pariatur minima reprehenderit exercitationem! Ab hic nemo magnam dolorum.

43 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quidem repellat nam, quae facilis minima at explicabo. Deleniti aperiam ad fugit pariatur minima reprehenderit exercitationem! Ab hic nemo magnam dolorum.

44 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quidem repellat nam, quae facilis minima at explicabo. Deleniti aperiam ad fugit pariatur minima reprehenderit exercitationem! Ab hic nemo magnam dolorum.

45 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quidem repellat nam, quae facilis minima at explicabo. Deleniti aperiam ad fugit pariatur minima reprehenderit exercitationem! Ab hic nemo magnam dolorum.

46 |
47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /17-navbar/nav.js: -------------------------------------------------------------------------------- 1 | const searchIcon=document.querySelector(".search-Icon"), 2 | search=document.querySelector(".search"), 3 | closeIcon=document.querySelector(".close-Icon"), 4 | menu=document.querySelector(".menu"), 5 | text=document.querySelector(".animate-text"); 6 | 7 | 8 | 9 | searchIcon.addEventListener("click",()=>search.classList.add("open")); 10 | closeIcon.addEventListener("click",()=>search.classList.remove("open")); 11 | 12 | const animateText=(()=>{ 13 | setTimeout(() => { 14 | text.textContent="YouTuber" 15 | }, 0); 16 | setTimeout(() => { 17 | text.textContent="Developer" 18 | }, 4000); 19 | setTimeout(() => { 20 | text.textContent="Programer" 21 | }, 8000); 22 | setTimeout(() => { 23 | text.textContent="bloger" 24 | }, 12000); 25 | setTimeout(() => { 26 | text.textContent="Gamer" 27 | }, 16000); 28 | }); 29 | animateText(); 30 | setInterval(animateText,16000); -------------------------------------------------------------------------------- /18-increment-decrement/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | counter of increment and decrement 7 | 8 | 9 | 10 |
11 | - 12 | 01 13 | + 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /18-increment-decrement/script.js: -------------------------------------------------------------------------------- 1 | const num = document.querySelector(".num"), 2 | plus = document.querySelector(".plus"), 3 | minus = document.querySelector(".minus"); 4 | 5 | let a = 1; 6 | 7 | 8 | plus.addEventListener("click", () => { 9 | a++; 10 | a = (a < 10) ? "0"+a : a; 11 | num.innerHTML = a; 12 | }); 13 | minus.addEventListener("click", () => { 14 | if (a > 1) { 15 | a--; 16 | a = (a < 10) ? "0" + a : a; 17 | num.innerHTML = a; 18 | } 19 | }); 20 | -------------------------------------------------------------------------------- /18-increment-decrement/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | body{ 8 | height: 100vh; 9 | width: 100%; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | background: #333; 14 | } 15 | .wrapper{ 16 | height: 120px; 17 | width: 380px; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | background: white; 22 | border-radius: 12px; 23 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 24 | 25 | } 26 | .wrapper span{ 27 | width: 100%; 28 | text-align: center; 29 | font-size: 55px; 30 | font-weight: bold; 31 | cursor: pointer; 32 | } 33 | .wrapper .num{ 34 | font-size: 50px; 35 | border-right: 2px solid rgba(0, 0, 0, 0.2); 36 | border-left: 2px solid rgba(0, 0, 0, 0.2); 37 | pointer-events: none; 38 | } 39 | -------------------------------------------------------------------------------- /19-Image-Slider-Auto-Navigation/0304.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/19-Image-Slider-Auto-Navigation/0304.mp4 -------------------------------------------------------------------------------- /19-Image-Slider-Auto-Navigation/README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Image Slider - Auto Navigation & Controls 🎯 2 | 3 | Welcome to the **Image Slider with Auto Navigation**! A sleek, modern, and responsive carousel built with **HTML, CSS, and JavaScript**. Whether you're showcasing your favorite photos or just flexing your front-end skills, this slider has got you covered! 😎 4 | 5 | ## 📸 Live Preview 6 | 🎥 Check it out in action: [Live Demo](#) 7 | 8 | --- 9 | 10 | ## 🎯 Features 11 | ✅ **Auto Image Sliding** (because who wants to keep clicking? 😆) 12 | ✅ **Pause on Hover** (because sometimes you just wanna admire the view 🖼️) 13 | ✅ **Left & Right Navigation Buttons** (for those who like control 🕹️) 14 | ✅ **Smooth Transitions** (because we all love a bit of eye candy 🍭) 15 | ✅ **Fully Responsive Design** (because mobile users deserve love too! ❤️) 16 | 17 | --- 18 | 19 | ## 🛠️ Technologies Used 20 | - **HTML** (for structure 📜) 21 | - **CSS** (for style 💅) 22 | - **JavaScript** (for magic ✨) 23 | 24 | --- 25 | 26 | ## 🚀 Getting Started 27 | Wanna have this awesome slider on your project? Follow these steps: 28 | 29 | ### 1️⃣ Clone the Repository 30 | ```bash 31 | git clone https://github.com/waqas-khan-CodeCanvas/Image-Slider-Auto-Navigation.git 32 | ``` 33 | 34 | ### 2️⃣ Open in Your Favorite Code Editor 35 | (VS Code, Sublime, Notepad++, or even Notepad if you're feeling adventurous 🏴‍☠️) 36 | 37 | ### 3️⃣ Open the `index.html` File in Your Browser 38 | Boom! You're all set. 🎉 39 | 40 | --- 41 | 42 | ## 🎮 How to Use 43 | 📌 **Auto-Slide:** The images will slide automatically every 2 seconds. 44 | 📌 **Manual Navigation:** Click the left/right buttons to navigate manually. 45 | 📌 **Pause on Hover:** Hover over the slider to pause auto navigation. 46 | 📌 **Resume Auto-Slide:** Move your mouse away, and it starts rolling again! 47 | 48 | --- 49 | 50 | ## 🎨 Screenshots 51 | > *Coming soon! (Or you can add your own screenshots here 📷)* 52 | 53 | --- 54 | 55 | ## 🤝 Contributing 56 | Wanna make this even cooler? Fork it, improve it, and send a PR! Let's build something awesome together! 💪 57 | 58 | --- 59 | 60 | 61 | ## 🌟 Show Some Love 62 | If you like this project, don’t forget to **star ⭐ the repository**! It keeps me motivated! 😍 63 | 64 | 🔗 **Follow me on GitHub**: [GitHub](https://github.com/waqas-khan-CodeCanvas) 65 | 66 | Happy Coding! 🚀 67 | -------------------------------------------------------------------------------- /19-Image-Slider-Auto-Navigation/Screenshot (918).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/19-Image-Slider-Auto-Navigation/Screenshot (918).png -------------------------------------------------------------------------------- /19-Image-Slider-Auto-Navigation/images/four.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/19-Image-Slider-Auto-Navigation/images/four.jpg -------------------------------------------------------------------------------- /19-Image-Slider-Auto-Navigation/images/one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/19-Image-Slider-Auto-Navigation/images/one.jpg -------------------------------------------------------------------------------- /19-Image-Slider-Auto-Navigation/images/three.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/19-Image-Slider-Auto-Navigation/images/three.jpg -------------------------------------------------------------------------------- /19-Image-Slider-Auto-Navigation/images/two.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/19-Image-Slider-Auto-Navigation/images/two.jpg -------------------------------------------------------------------------------- /19-Image-Slider-Auto-Navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image-Slider 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | product-image 16 | product-image 17 | product-image 18 |
19 |
20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /19-Image-Slider-Auto-Navigation/script.js: -------------------------------------------------------------------------------- 1 | //get the DOM element for the image carousel 2 | const wrapper = document.querySelector(".wrapper"), 3 | carousel = document.querySelector(".carousel"), 4 | images = document.querySelectorAll("img"), 5 | buttons = document.querySelectorAll(".button"); 6 | // console.log(wrapper,carousel,images,buttons) 7 | 8 | let imageIndex = 0, 9 | intervalId; 10 | 11 | // Define fauction to start autimatic image slider 12 | const autoSlide = () => { 13 | //Start the slideshow by calling slideImae() every 2 seconds 14 | intervalId = setInterval(() => slideImage(++imageIndex), 2000); 15 | }; 16 | //call autoslide function on page load 17 | autoSlide(); 18 | // a function that updates the carousel display to show the specified image 19 | const slideImage = () => { 20 | // console.log(imageIndex) 21 | //calculate the updated image index 22 | imageIndex = imageIndex === images.length ? 0 : imageIndex < 0 ? images.length - 1 : imageIndex; 23 | //update the carousel display to show the specified image 24 | carousel.style.transform = `translate(-${imageIndex * 100}%)`; 25 | }; 26 | 27 | // a function that updaes the carousel display to show the next or previous image 28 | const updateClick = (e) => { 29 | // console.log("clicked") 30 | clearInterval(intervalId); 31 | //calculate the updated image index bassed on the button clicked 32 | imageIndex += e.target.id === "next" ? 1 : -1; 33 | slideImage(imageIndex); 34 | //Restart the automatic slideshow 35 | autoSlide(); 36 | }; 37 | //add event listeners to the navigation buttons 38 | buttons.forEach((button) => button.addEventListener("click", updateClick)); 39 | //add mouseover event listener to wrapper element to stop auto sliding 40 | wrapper.addEventListener("mouseover", () => clearInterval(intervalId)); 41 | //add mouseleave event listener to wrapper element to star auto sliding again 42 | wrapper.addEventListener("mouseleave", autoSlide); 43 | 44 | -------------------------------------------------------------------------------- /19-Image-Slider-Auto-Navigation/styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | body{ 8 | height: 100vh; 9 | width: 100%; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | background: #343f4f; 14 | } 15 | .wrapper{ 16 | max-width: 650px; 17 | width: 100%; 18 | height: 400px; 19 | background: #e9e9e9; 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | position: relative; 24 | border-radius: 12px; 25 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 26 | } 27 | .wrapper i.button{ 28 | position: absolute; 29 | top: 50%; 30 | transform: translateX(-50%); 31 | height: 36px; 32 | width: 36px; 33 | background: #4B164C; 34 | border-radius: 50%; 35 | text-align: center; 36 | line-height: 36px; 37 | color: white; 38 | font-size: 15px; 39 | transition: all .3s linear; 40 | cursor: pointer; 41 | z-index: 100; 42 | } 43 | i.button:active{ 44 | transform: scale(0.90) translateX(-50%); 45 | } 46 | i#prev{ 47 | left: 25px; 48 | } 49 | i#next{ 50 | right: 25px; 51 | } 52 | .image-container{ 53 | height: 320px; 54 | max-width: 500px; 55 | width: 100%; 56 | overflow: hidden; 57 | } 58 | .image-container .carousel{ 59 | display: flex; 60 | height: 100%; 61 | width: 100%; 62 | transition: all .4s ease; 63 | } 64 | .carousel img{ 65 | height: 100%; 66 | width: 100%; 67 | border-radius: 18px; 68 | border: 10px solid #4B164C; 69 | object-fit: cover; 70 | margin-right: 30px; 71 | } -------------------------------------------------------------------------------- /20-toastnitification/0307.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/20-toastnitification/0307.mp4 -------------------------------------------------------------------------------- /20-toastnitification/README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Custom Toast Notification 2 | [![Netlify Status](https://api.netlify.com/api/v1/badges/3135fe98-2c56-4cfe-9b71-59173de04b14/deploy-status)](https://app.netlify.com/sites/toast-notifier/deploys)
3 | A sleek and responsive **Toast Notification System** built using **HTML, CSS, and JavaScript**. This project provides instant feedback to users with smooth animations, auto-dismiss functionality, and a clean UI. 4 | 5 | ## 🚀 Live Demo 6 | 🔗 [Live Demo](https://toast-notifier.netlify.app/) 7 | 8 | ## 📌 Features 9 | ✅ Modern and minimal UI 10 | ✅ Auto-dismiss with a progress indicator 11 | ✅ Smooth animations for a professional look 12 | ✅ Customizable styling and message types 13 | ✅ Easy to integrate into any web project 14 | 15 | ## 📂 Project Structure 16 | ``` 17 | 📦 custom-toast-notification 18 | │── 📜 index.html # Main HTML file 19 | │── 📜 style.css # Styling for the notification 20 | │── 📜 script.js # JavaScript functionality 21 | │── 📜 screenShort.png # project image 22 | │── 📜 Video.mp4 # project video 23 | │── 📜 READMD.md # description file 24 | ``` 25 | 26 | ## ⚡ How to Use 27 | 28 | 1. **Clone the repository** 29 | ```sh 30 | git clone https://github.com/Waqas-Khan-CodeCanvas/toast-notification.git 31 | ``` 32 | 2. **Open `index.html` in a browser** 33 | 3. Click the **"Show Toast"** button to see the notification in action 34 | 35 | ## 🛠 Customization 36 | Modify the **style.css** file to change the colors, font, and animation styles. You can also update the **script.js** file to customize the behavior of the notification. 37 | 38 | ## 🌟 Contribute 39 | If you have ideas to improve this project, feel free to **fork the repo and submit a pull request**! 🚀 40 | 41 | ## 📜 License 42 | This project is licensed under the **MIT License** – feel free to use and modify it as needed. 43 | 44 | --- 45 | 46 | Let me know if you need any modifications! 🚀 47 | 48 | -------------------------------------------------------------------------------- /20-toastnitification/Screenshot (920).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/20-toastnitification/Screenshot (920).png -------------------------------------------------------------------------------- /20-toastnitification/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Toast notification 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 | Success 16 | Your changes has been saved . 17 |
18 |
19 | 20 |
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /20-toastnitification/toast.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | background-color: #143D60; 15 | overflow: hidden; 16 | } 17 | 18 | .toast { 19 | position: absolute; 20 | top: 25px; 21 | right: 30px; 22 | border-radius: 12px; 23 | padding: 20px 35px 20px 25px; 24 | background-color: #fff; 25 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 26 | border-left: 6px solid#4070f4; 27 | overflow: hidden; 28 | transform: translateX(calc(100% + 30px)); 29 | transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.35); 30 | } 31 | 32 | .toast.active { 33 | transform: translateX(0%); 34 | } 35 | 36 | .toast .toast-content { 37 | display: flex; 38 | align-items: center; 39 | } 40 | 41 | .toast-content .check { 42 | display: flex; 43 | align-items: center; 44 | justify-content: center; 45 | height: 35px; 46 | width: 35px; 47 | background-color: #4070f4; 48 | color: white; 49 | font-size: 20px; 50 | border-radius: 50%; 51 | } 52 | 53 | .toast-content .message { 54 | display: flex; 55 | flex-direction: column; 56 | margin: 0 20px; 57 | } 58 | 59 | .message .text { 60 | font-weight: 400; 61 | font-size: 20px; 62 | color: #666666; 63 | } 64 | 65 | .message .text-1 { 66 | font-weight: 600; 67 | color: #333; 68 | } 69 | 70 | .toast .close { 71 | position: absolute; 72 | top: 10px; 73 | right: 15px; 74 | padding: 5px; 75 | cursor: pointer; 76 | opacity: 0.5; 77 | } 78 | 79 | .toast .close:hover { 80 | opacity: 1; 81 | } 82 | 83 | .toast .progress { 84 | position: absolute; 85 | bottom: 0; 86 | left: 0; 87 | height: 3px; 88 | width: 100%; 89 | background-color: #ddd; 90 | } 91 | 92 | .toast .progress::before { 93 | content: ""; 94 | position: absolute; 95 | bottom: 0; 96 | right: 0px; 97 | height: 100%; 98 | width: 100%; 99 | background-color: #4070f4; 100 | } 101 | .progress.active:before{ 102 | animation: progress 5s linear forwards; 103 | } 104 | @keyframes progress{ 105 | 100%{ 106 | right: 100%; 107 | } 108 | } 109 | button { 110 | padding: 10px 20px; 111 | font-size: 20px; 112 | outline: none; 113 | border: none; 114 | background-color: #4070f4; 115 | color: white; 116 | border-radius: 6px; 117 | cursor: pointer; 118 | transition: .3s; 119 | } 120 | 121 | button:hover { 122 | background-color: #0e4bf1; 123 | } -------------------------------------------------------------------------------- /20-toastnitification/toast.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector("button"), 2 | toast = document.querySelector(".toast"), 3 | closeIcon = document.querySelector(".close"), 4 | progress = document.querySelector(".progress"); 5 | 6 | button.addEventListener("click", () => { 7 | toast.classList.add("active"); 8 | progress.classList.add("active"); 9 | 10 | setTimeout(() => { 11 | toast.classList.remove("active"); 12 | }, 5000); 13 | setTimeout(() => { 14 | progress.classList.remove("active"); 15 | }, 5500); 16 | }) 17 | closeIcon.addEventListener("click", () => { 18 | toast.classList.remove("active"); 19 | 20 | setTimeout(() => { 21 | toast.classList.remove("active"); 22 | }, 300); 23 | }) -------------------------------------------------------------------------------- /21-multi-steps-progress-bar/README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Step Progress Bar
2 | [![Netlify Status](https://api.netlify.com/api/v1/badges/71e33e43-fd5d-4b30-b553-fae2ad5b47a8/deploy-status)](https://app.netlify.com/sites/multistepprogressbar/deploys)
3 | A sleek and interactive **Step Progress Bar** built using **HTML, CSS, and JavaScript**. This project visually represents progress through multiple steps, making it ideal for **multi-step forms, onboarding processes, and guided user journeys**. 4 | 5 | ![Step Progress Bar](./Scre![Screenshot (921)](https://github.com/user-attachments/assets/65b1b384-71d3-4e6e-ab7f-2c732356a2d0) 6 | enshot.png) 7 | 8 | ## 🔥 Features 9 | 10 | ✅ Smooth step transitions 11 | ✅ Fully responsive design 12 | ✅ Dynamic **Next** and **Previous** navigation 13 | ✅ Visually appealing progress indicator 14 | 15 | ## 📌 Demo 16 | 17 | 👉 **[Live Preview](https://multistepprogressbar.netlify.app/) 18 | 19 | ## 🛠️ Technologies Used 20 | 21 | - **HTML** – Structure of the progress bar 22 | - **CSS** – Styling and animations 23 | - **JavaScript** – Handles step transitions 24 | 25 | ## 🎯 How It Works 26 | 27 | 1️⃣ Click the **Next** button to move to the next step 28 | 2️⃣ Click the **Prev** button to go back 29 | 3️⃣ The active step updates dynamically with a visual indication 30 | 31 | ## 📂 Project Structure 32 | 33 | ``` 34 | /step-progress-bar 35 | │── index.html # HTML structure 36 | │── style.css # Styling & animations 37 | │── script.js # JavaScript logic 38 | │── README.md # Project documentation 39 | │── Screenshot.png # Project preview image 40 | ``` 41 | 42 | ## 🚀 Getting Started 43 | 44 | 1️⃣ Clone the repository 45 | 46 | ```bash 47 | git clone https://github.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025.git 48 | ``` 49 | 50 | 2️⃣ Open the **index.html** file in your browser 51 | 52 | 3️⃣ Customize the styles and logic as needed! 53 | 54 | ## 🌟 Show Your Support 55 | 56 | If you like this project, don't forget to: 57 | 58 | ⭐ **Star the repo** 59 | 🔄 **Fork it** and contribute 60 | 👥 **Follow me on GitHub** for more projects 61 | 62 | 📌 **GitHub Profile:** [Waqas khan](https://github.com/Waqas-Khan-CodeCanvas) 63 | -------------------------------------------------------------------------------- /21-multi-steps-progress-bar/Screenshot (921).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025/e3f7455f2536cc13ab723f4e07a35f4e0df5f54a/21-multi-steps-progress-bar/Screenshot (921).png -------------------------------------------------------------------------------- /21-multi-steps-progress-bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | progressbar 7 | 8 | 9 | 10 |
11 |
12 | 1 13 | 2 14 | 3 15 | 4 16 |
17 | 18 |
19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /21-multi-steps-progress-bar/progress.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | box-sizing: border-box; 6 | } 7 | body{ 8 | height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | background: #FFEDFA; 13 | } 14 | .container{ 15 | width: 400px; 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | gap: 45px; 20 | 21 | 22 | } 23 | .container .steps{ 24 | display: flex; 25 | align-items: center; 26 | justify-content: space-between; 27 | width: 100%; 28 | position: relative; 29 | 30 | } 31 | .container .steps .cricle{ 32 | height: 50px; 33 | width: 50px; 34 | border-radius: 50%; 35 | border: 4px solid #e0e0e0; 36 | display: flex; 37 | align-items: center; 38 | justify-content: center; 39 | color: #999; 40 | font-size: 22px; 41 | font-weight: bold; 42 | background-color: #fff; 43 | transition: all .2s; 44 | transition-delay: .0s; 45 | } 46 | .steps .cricle.active{ 47 | transition-delay: .1s; 48 | border-color:#4070f4; 49 | color: #4070f4; 50 | } 51 | .steps .progress{ 52 | position: absolute; 53 | height: 4px; 54 | width: 100%; 55 | background: #e0e0e0; 56 | z-index: -1; 57 | } 58 | .progress .indicator{ 59 | position: absolute; 60 | height: 100%; 61 | width: 0%; 62 | background: #4070f4; 63 | transition: all .3s; 64 | } 65 | .container .buttons{ 66 | display: flex; 67 | gap: 20px; 68 | 69 | } 70 | .buttons button{ 71 | padding: 8px 25px; 72 | background: #4070f4; 73 | border: none; 74 | border-radius: 8px; 75 | color: #fff; 76 | font-size: 16px; 77 | font-weight: 400; 78 | cursor: pointer; 79 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); 80 | 81 | } 82 | .buttons button:disabled{ 83 | background: #7395f1; 84 | cursor: not-allowed; 85 | } 86 | -------------------------------------------------------------------------------- /21-multi-steps-progress-bar/progress.js: -------------------------------------------------------------------------------- 1 | const circles = document.querySelectorAll(".cricle"), 2 | progressBar = document.querySelector(".indicator"), 3 | buttons = document.querySelectorAll("button"); 4 | 5 | 6 | let currentStep = 1; 7 | //function that update the current step and updates the dom 8 | const updateSteps = (e) => { 9 | currentStep = e.target.id === "next" ? ++currentStep : --currentStep; 10 | 11 | console.log(currentStep) 12 | 13 | // update through all circles and add or remove "active " class bassed on their index on and current step 14 | circles.forEach((circle, index) => { 15 | circle.classList[`${index < currentStep ? "add" : "remove"}`]("active"); 16 | }); 17 | //update progress bar width bassed on current step 18 | progressBar.style.width = `${((currentStep - 1) / (circles.length - 1)) * 100}%` 19 | 20 | if (currentStep===circles.length) { 21 | buttons[1].disabled=true; 22 | } else if(currentStep===1){ 23 | buttons[0].disabled=true; 24 | }else{ 25 | buttons.forEach((button)=>(button.disabled=false)); 26 | } 27 | }; 28 | //add click event listeners to all buttons 29 | buttons.forEach((button) => { 30 | button.addEventListener("click", updateSteps); 31 | }); -------------------------------------------------------------------------------- /22-guess-number/guess.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | body{ 8 | min-height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | background: #4a98f7; 13 | } 14 | .warpper{ 15 | padding: 30px; 16 | border-radius: 12px; 17 | background: #fff; 18 | text-align: center; 19 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 20 | } 21 | .warpper header{ 22 | font-size:18px ; 23 | font-weight: 400; 24 | color: #333; 25 | } 26 | .warpper p{ 27 | color: #333; 28 | font-size: 18px; 29 | } 30 | .warpper .input-field{ 31 | display: flex; 32 | justify-content: center; 33 | gap: 25px; 34 | margin: 25px 0; 35 | } 36 | .input-field input, 37 | .input-field button{ 38 | height: 50px; 39 | width: calc(100%/2 ); 40 | outline: none; 41 | padding:0 20px; 42 | border-radius: 8px; 43 | } 44 | .input-field input:disabled{ 45 | cursor: not-allowed; 46 | } 47 | .input-field input{ 48 | font-size: 19px; 49 | text-align: center; 50 | color: #707070; 51 | border: 1px solid #aaa ; 52 | } 53 | input::-webkit-inner-spin-button, 54 | input::-webkit-outer-spin-button{ 55 | display: none; 56 | } 57 | 58 | .input-field button{ 59 | font-size: 16px; 60 | border: none; 61 | background: #4a98f7; 62 | color: white; 63 | cursor: pointer; 64 | transition: .3s; 65 | } 66 | .input-field button:hover{ 67 | background: #127af9; 68 | } 69 | .input-field button:active{ 70 | transform: scale(0.97); 71 | } -------------------------------------------------------------------------------- /22-guess-number/guess.js: -------------------------------------------------------------------------------- 1 | const input = document.querySelector("input"), 2 | guess = document.querySelector(".guess"), 3 | checkButton = document.querySelector("button"), 4 | remainCharnce = document.querySelector(".chances") 5 | 6 | input.focus(); 7 | 8 | 9 | let randomNum = Math.floor(Math.random() * 10); 10 | chances = 5; 11 | console.log(randomNum); 12 | 13 | checkButton.addEventListener("click", () => { 14 | chances--; 15 | let inputValue = input.value; 16 | console.log(inputValue); 17 | 18 | if (inputValue == randomNum) { 19 | [guess.textContent, checkButton.disabled] = ["Congratulation", true]; 20 | [checkButton.textContent, guess.style.color] = ["Reply", "blue"] 21 | } 22 | else if (inputValue > randomNum && inputValue < 10) { 23 | [guess.textContent, remainCharnce.textContent] = ["Your guess is high", chances]; 24 | guess.style.color = "blue"; 25 | } 26 | else if (inputValue < randomNum && inputValue > 0) { 27 | [guess.textContent, remainCharnce.textContent] = ["Your guess is low", chances]; 28 | guess.style.color = "blue"; 29 | } 30 | else { 31 | [guess.textContent, remainCharnce.textContent] = ["Your number is invalid", chances]; 32 | guess.style.color = "red"; 33 | } 34 | if(chances==0){ 35 | [checkButton.textContent,input.disabled,inputValue]=["Replay",true,""]; 36 | [guess.textContent,guess.style.color]=["You loss the game","red"] 37 | } 38 | if(chances<0){ 39 | window.location.reload(); 40 | } 41 | 42 | }); 43 | 44 | 45 | -------------------------------------------------------------------------------- /22-guess-number/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | GuessTheNumber 7 | 8 | 9 | 10 |
11 |
Guess a number from 1 to 10
12 |

13 |
14 | 15 | 16 |
17 |

You have 5 chances

18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚀 JavaScript Projects 2025 2 | 3 | Welcome to the **JavaScript Projects 2025** repository! 🎉 This collection showcases various JavaScript projects, each designed to enhance frontend development skills, improve interactivity, and provide real-world solutions. 4 | 5 | Every project includes: 6 | - ✅ A well-documented **README.md** 7 | - 🌐 **Live Deployment Links** 8 | - 📂 **Clean and Structured Code** 9 | - 🎯 **JavaScript Functionalities Demonstrated** 10 | 11 | --- 12 | 13 | ## 📌 Projects Included 14 | 15 | | # | Project Name | Live Demo | Description | 16 | |----|---------------------------------------|----------|-------------| 17 | | 01 | Hello World | [Live](#) | A basic "Hello World" setup. | 18 | | 02 | Pop-up | [Live](#) | A simple JavaScript pop-up modal. | 19 | | 03 | Colour Flipper | [Live](#) | Click to change background colors dynamically. | 20 | | 04 | Counter | [Live](#) | Increment and decrement counter with JavaScript. | 21 | | 05 | Analog Clock | [Live](#) | A real-time analog clock using JavaScript and CSS. | 22 | | 06 | Change Nav Tabs on Scroll | [Live](#) | Dynamically change navigation tabs while scrolling. | 23 | | 07 | Countdown Timer | [Live](#) | A countdown timer that tracks time till an event. | 24 | | 08 | Quiz App | [Live](#) | An interactive JavaScript-based quiz app. | 25 | | 09 | FAQs | [Live](#) | Frequently Asked Questions section with toggle. | 26 | | 10 | Sticky Navbar | [Live](#) | Navbar remains fixed on scrolling. | 27 | | 11 | Testimonials | [Live](#) | A testimonial section with auto-slide effect. | 28 | | 12 | Ratings | [Live](#) | A rating system with interactive stars. | 29 | | 13 | Analog Clock | [Live](#) | Another version of an analog clock. | 30 | | 14 | Website Color Switcher | [Live](#) | Allows users to change website colors dynamically. | 31 | | 15 | Download Button | [Live](#) | A download button with animations and effects. | 32 | | 16 | Rating | [Live](#) | Another rating system variation. | 33 | | 17 | Navbar | [Live](#) | A responsive navigation bar with JavaScript. | 34 | | 18 | Increment-Decrement | [Live](#) | A simple increment/decrement counter. | 35 | | 19 | Image Slider with Auto Navigation | [Live](#) | An auto-sliding image gallery. | 36 | | 20 | Toast Notification | [Live](#) | Displays toast notifications dynamically. | 37 | 38 | 📢 *Click on the "Live" link to explore the deployed versions!* 39 | 40 | --- 41 | 42 | ## 🛠️ Technologies Used 43 | 44 | - **HTML5** 🏗️ 45 | - **CSS3** 🎨 46 | - **JavaScript (ES6+)** 🚀 47 | - **Bootstrap (for some projects)** 🎭 48 | 49 | --- 50 | 51 | ## 📜 How to Use 52 | 53 | 1. **Clone the repository** 54 | ```bash 55 | git clone https://github.com/Waqas-Khan-CodeCanvas/JavaScript-Projects-2025.git 56 | cd JavaScript-Projects-2025 57 | ``` 58 | 2. **Open any project** 59 | - Navigate to the desired project folder. 60 | - Open `index.html` in your browser. 61 | 62 | --- 63 | 64 | ## 🌟 Contributing 65 | 66 | Feel free to **fork** this repository and submit pull requests for improvements. Your contributions are always welcome! 🤝 67 | 68 | --- 69 | 70 | ## 📧 Contact 71 | 72 | For any queries or collaborations, reach out: 73 | 74 | 📩 **Email:** waqaskhan0589@gmail.com 75 | 🔗 **GitHub:** [Your Profile](https://github.com/Waqas-Khan-CodeCanvas) 76 | 🔗 **LinkedIn:** [Your Profile](https://linkedin.com/in/waqas-khan-dev) 77 | 78 | --- 79 | 80 | 📌 *Don't forget to ⭐ the repository if you found these projects useful! Happy Coding! 🚀* 81 | --------------------------------------------------------------------------------