├── LICENSE ├── README.md ├── _config.yml ├── google7521b4b8a878888b.html ├── project-10_404_error_page ├── css │ └── index.css ├── img │ └── error.png ├── index.html └── js │ └── index.js ├── project-11_analog_clock ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-12_contact_form ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-13_profile_card ├── css │ └── index.css ├── img │ └── profile.jpg ├── index.html └── js │ └── index.js ├── project-14_music_loader ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-15_currrency_convertor ├── css │ └── index.css ├── index.html └── js │ ├── country.js │ └── index.js ├── project-16_pricing_component ├── app.js ├── images │ ├── bg-bottom.svg │ ├── bg-top.svg │ ├── favicon-32x32.png │ └── project-preview.png ├── index.html └── styles.css ├── project-17_remove_Signature_bg ├── favicon.png ├── images │ └── remove_bg.png ├── index.html ├── script.js └── styles.css ├── project-18_toggle_dark_light_mode ├── index.html ├── script.js └── style.css ├── project-19_weather_app ├── img │ ├── clear.png │ ├── clouds.png │ ├── demo.png │ ├── drizzle.png │ ├── haze.png │ ├── humidity.png │ ├── mist.png │ ├── rain.png │ ├── search.png │ ├── snow.png │ └── wind.png ├── index.html ├── script.js └── style.css ├── project-1_landing-page ├── css │ └── index.css ├── img │ ├── features.png │ └── hero-bg.svg ├── index.html ├── js │ └── index.js └── scss │ └── index.scss ├── project-20_bubble_game ├── index.html ├── index.js └── style.css ├── project-2_calculator ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-3_wavy_login_form ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-4_random_quote_generator ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-5_random_color_changer ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-6_qr_code_generator ├── css │ ├── index.css │ └── index.scss ├── index.html └── js │ └── index.js ├── project-7_stopwatch_timer ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-8_password_generator ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-9_responsive_navbar ├── css │ └── index.css ├── index.html └── js │ └── index.js └── sitemap.xml /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Arman Idrisi 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Projects 🌐 2 | 3 | [![GitHub contributors](https://img.shields.io/github/contributors/ArmanIdrisi/frontend-projects)](https://github.com/ArmanIdrisi/frontend-projects/graphs/contributors) 4 | [![GitHub last commit](https://img.shields.io/github/last-commit/ArmanIdrisi/frontend-projects)](https://github.com/ArmanIdrisi/frontend-projects/commits/main) 5 | 6 | This repository contains a collection of frontend projects.Each project is built using HTML, CSS, and JavaScript. 7 | 8 | ## Projects 📂 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 |
#Project NameLink
01Landing PageClick Here
02CalculatorClick Here
03Wavy Login FormClick Here
04Random Quote GeneratorClick Here
05Random Background ChangerClick Here
06Qr Code GeneratorClick Here
07Stopwatch TimerClick Here
08Password GeneratorClick Here
09Responsive NavbarClick Here
10404 Error PageClick Here
11Analog ClockClick Here
12Contact FormClick Here
13Profile CardClick Here
14Music PreloaderClick Here
15Currency ConverterClick Here
16Pricing cardClick Here
17Background Remover AppClick Here
18Toggle Dark & Light ModeClick Here
19Weather AppClick Here
20Bubble GameClick Here
117 | 118 | 119 | 120 | 121 | 122 | ## Installation 🚀 123 | 124 | To run any of the projects locally, simply clone this repository using the following command: 125 | 126 | ```bash 127 | git clone https://github.com/ArmanIdrisi/frontend-projects.git 128 | ``` 129 | 130 | ## Usage 💻 131 | 132 | Each project is contained in its own directory, and can be opened and run directly in a web browser. 133 | 134 | ## Contributing 🤝 135 | 136 | Contributions to this repository are welcome! If you have a project you'd like to add, simply create a new branch, add your project, and create a pull request. 137 | 138 | ## License 📝 139 | 140 | This repository is licensed under the MIT license. See [LICENSE](/LICENSE) for more information. 141 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman 2 | 3 | title: Explore Engaging HTML, CSS, and JavaScript Frontend Projects for Your Next Web Development Adventure 4 | 5 | show_downloads: false 6 | 7 | include: [README.md] 8 | 9 | plugins: 10 | 11 | - jemoji -------------------------------------------------------------------------------- /google7521b4b8a878888b.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google7521b4b8a878888b.html -------------------------------------------------------------------------------- /project-10_404_error_page/css/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700,800|Roboto"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Open Sans", sans-serif; 8 | font-weight: 400; 9 | } 10 | body { 11 | height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background-color: #e8e8e8; 16 | } 17 | .container { 18 | text-align: center; 19 | } 20 | .container img { 21 | width: 550px; 22 | } 23 | .container h1 { 24 | font-size: 45px; 25 | } 26 | .container p { 27 | font-size: 25px; 28 | margin: 20px 0; 29 | color: #004273; 30 | } 31 | .container button { 32 | padding: 5px; 33 | width: 30%; 34 | height: 40px; 35 | border: none; 36 | outline: none; 37 | border-radius: 3px; 38 | background: #004273; 39 | color: white; 40 | margin: 10px 0 0 0; 41 | } 42 | 43 | /*For Responsiveness*/ 44 | @media (max-width: 760px) { 45 | .container img { 46 | width: 100%; 47 | } 48 | .container h1 { 49 | font-size: 33px; 50 | } 51 | .container p { 52 | font-size: 15px; 53 | padding: 0 10px; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /project-10_404_error_page/img/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-10_404_error_page/img/error.png -------------------------------------------------------------------------------- /project-10_404_error_page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 404 Error Occurred 8 | 9 | 10 |
11 | 404 Error 12 |

Didn’t find anything here!

13 |

Sorry! The Request Url Not Found On The Server

14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /project-10_404_error_page/js/index.js: -------------------------------------------------------------------------------- 1 | //For Go Back Button : (It's Optional You Can Also Use Anchor Tag Of Html) 2 | let btn = document.getElementById("btn"); 3 | btn.addEventListener("click", () => { 4 | window.location.href="/" 5 | }); 6 | -------------------------------------------------------------------------------- /project-11_analog_clock/css/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | 14 | #clockContainer { 15 | position: relative; 16 | height: 40vw; 17 | width: 40vw; 18 | background: url(https://i.ibb.co/K7wS7TF/imgonlinecomua-Compress-To-Size-Om-NATj-UMFKw-300x300.jpg) no-repeat; 19 | background-size: 100%; 20 | } 21 | 22 | #clockContainer #hour, 23 | #clockContainer #minute, 24 | #clockContainer #second { 25 | position: absolute; 26 | background: black; 27 | border-radius: 10px; 28 | transform-origin: bottom; 29 | } 30 | 31 | #clockContainer #hour { 32 | width: 1.8%; 33 | height: 25%; 34 | top: 25%; 35 | left: 48.85%; 36 | opacity: 0.8; 37 | } 38 | 39 | #clockContainer #minute { 40 | width: 1.6%; 41 | height: 30%; 42 | top: 19%; 43 | left: 48.9%; 44 | opacity: 0.8; 45 | } 46 | 47 | #clockContainer #second { 48 | width: 1%; 49 | height: 40%; 50 | top: 9%; 51 | left: 49.25%; 52 | opacity: 0.8; 53 | } 54 | -------------------------------------------------------------------------------- /project-11_analog_clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | project-11_analog_clock 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /project-11_analog_clock/js/index.js: -------------------------------------------------------------------------------- 1 | // Selecting the hour, minute, and second elements by their IDs 2 | const hour = document.getElementById("hour"); 3 | const minute = document.getElementById("minute"); 4 | const second = document.getElementById("second"); 5 | 6 | // Setting up an interval to update the clock every second 7 | setInterval(() => { 8 | // Creating a new Date object to get the current time 9 | const now = new Date(); 10 | 11 | // Extracting the hours, minutes, and seconds from the Date object 12 | const hours = now.getHours(); 13 | const minutes = now.getMinutes(); 14 | const seconds = now.getSeconds(); 15 | 16 | // Calculating the rotation angles for the hour, minute, and second hands 17 | const hourRotation = 30 * hours + minutes / 2; 18 | const minuteRotation = 6 * minutes; 19 | const secondRotation = 6 * seconds; 20 | 21 | // Setting the transform property of the hour, minute, and second elements to rotate them to their respective angles 22 | hour.style.transform = `rotate(${hourRotation}deg)`; 23 | minute.style.transform = `rotate(${minuteRotation}deg)`; 24 | second.style.transform = `rotate(${secondRotation}deg)`; 25 | }, 1000); 26 | -------------------------------------------------------------------------------- /project-12_contact_form/css/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"); 2 | * { 3 | margin: 0px; 4 | padding: 0px; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | 8 | body { 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: #142457; 14 | } 15 | .container { 16 | background: white; 17 | height: 550px; 18 | width: 100%; 19 | max-width: 430px; 20 | padding: 20px; 21 | text-align: center; 22 | border-radius: 8px; 23 | } 24 | .container input, 25 | textarea { 26 | width: 100%; 27 | outline: none; 28 | margin: 15px 0; 29 | border-radius: 8px; 30 | border: 1px solid #ccc; 31 | padding: 10px 5px; 32 | } 33 | .container button { 34 | width: 100%; 35 | outline: none; 36 | border-radius: 8px; 37 | border: 2px solid #142457; 38 | padding: 10px 5px; 39 | color: black; 40 | background: transparent; 41 | transition: 0.5s ease-in-out; 42 | } 43 | .container input:focus,textarea:focus { 44 | border: 2px solid #142457; 45 | } 46 | .container button:hover { 47 | background: #142457; 48 | color: white; 49 | } 50 | -------------------------------------------------------------------------------- /project-12_contact_form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Contact Us - <Site Title> 9 | 10 | 11 |
12 |
13 |

Get In Touch

14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /project-12_contact_form/js/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-12_contact_form/js/index.js -------------------------------------------------------------------------------- /project-13_profile_card/css/index.css: -------------------------------------------------------------------------------- 1 | /* Google Fonts - Poppins */ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: "Poppins", sans-serif; 9 | } 10 | body { 11 | height: 100vh; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | background-color: #f4f4f4; 16 | } 17 | .profile-card { 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | max-width: 350px; 22 | width: 100%; 23 | background: #fff; 24 | padding: 25px; 25 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 26 | position: relative; 27 | } 28 | .profile-card::before { 29 | content: ""; 30 | position: absolute; 31 | top: 0; 32 | left: 0; 33 | height: 36%; 34 | width: 100%; 35 | background-color: #4070f4; 36 | } 37 | .profile-card .image { 38 | position: relative; 39 | height: 150px; 40 | width: 150px; 41 | border-radius: 50%; 42 | background-color: #4070f4; 43 | padding: 3px; 44 | margin-bottom: 10px; 45 | } 46 | .profile-card .image .profile-img { 47 | height: 100%; 48 | width: 100%; 49 | object-fit: cover; 50 | border-radius: 50%; 51 | border: 3px solid #fff; 52 | } 53 | .profile-card .text-data { 54 | display: flex; 55 | flex-direction: column; 56 | align-items: center; 57 | color: #333; 58 | margin-bottom: 20px; 59 | } 60 | .profile-card .text-data .name { 61 | font-size: 22px; 62 | font-weight: 500; 63 | } 64 | .profile-card ul { 65 | list-style: none; 66 | } 67 | .profile-card ul li { 68 | margin-bottom: 10px; 69 | } 70 | .profile-card .media-buttons { 71 | display: flex; 72 | align-items: center; 73 | margin-top: 15px; 74 | } 75 | .profile-card .media-buttons .link { 76 | display: flex; 77 | align-items: center; 78 | justify-content: center; 79 | color: #fff; 80 | font-size: 18px; 81 | height: 34px; 82 | width: 34px; 83 | border-radius: 50%; 84 | margin: 0 8px; 85 | background-color: #4070f4; 86 | text-decoration: none; 87 | } 88 | -------------------------------------------------------------------------------- /project-13_profile_card/img/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-13_profile_card/img/profile.jpg -------------------------------------------------------------------------------- /project-13_profile_card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | User Profile 8 | 12 | 13 | 14 |
15 |
16 | 17 |
18 | 19 |
20 | John Doe 21 |
22 |
23 | 29 |
30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /project-13_profile_card/js/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-13_profile_card/js/index.js -------------------------------------------------------------------------------- /project-14_music_loader/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | } 7 | .loader { 8 | display: flex; 9 | } 10 | 11 | .bar { 12 | width: 6px; 13 | height: 20px; 14 | margin: 0 4px; 15 | background-color: #000; 16 | border-radius: 4px; 17 | animation: loader 1s ease-in-out infinite; 18 | } 19 | .bar:nth-child(1) { 20 | animation-delay: 0s; 21 | } 22 | 23 | .bar:nth-child(2) { 24 | animation-delay: 0.1s; 25 | } 26 | 27 | .bar:nth-child(3) { 28 | animation-delay: 0.2s; 29 | } 30 | 31 | .bar:nth-child(4) { 32 | animation-delay: 0.3s; 33 | } 34 | 35 | .bar:nth-child(5) { 36 | animation-delay: 0.4s; 37 | } 38 | @keyframes loader { 39 | 0% { 40 | transform: scale(1); 41 | } 42 | 20% { 43 | transform: scale(1, 2); 44 | } 45 | 40% { 46 | transform: scale(1); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /project-14_music_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Music Loader 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /project-14_music_loader/js/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-14_music_loader/js/index.js -------------------------------------------------------------------------------- /project-15_currrency_convertor/css/index.css: -------------------------------------------------------------------------------- 1 | /* Global styles */ 2 | body { 3 | height: 100vh; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | background-color: steelblue; 8 | } 9 | 10 | /* Container for the entire form */ 11 | .wrapper { 12 | text-align: center; 13 | background: rgba(0, 0, 0, 0.3); 14 | padding: 30px 0; 15 | max-width: 430px; 16 | width: 100%; 17 | border-radius: 8px; 18 | } 19 | 20 | /* Header style */ 21 | h2 { 22 | font-weight: 500; 23 | color: white; 24 | } 25 | 26 | /* Styles for currency input section */ 27 | .currency-input { 28 | display: flex; 29 | flex-direction: column; 30 | align-items: center; 31 | margin-top: 20px; 32 | } 33 | 34 | .currency-input label { 35 | color: white; 36 | font-weight: 400; 37 | font-size: 18px; 38 | text-transform: uppercase; 39 | margin-bottom: 5px; 40 | } 41 | 42 | .currency-input input { 43 | width: 50%; 44 | padding: 10px; 45 | margin-top: 3px; 46 | outline: none; 47 | border: 1px solid #ccc; 48 | border-radius: 5px; 49 | font-size: 16px; 50 | } 51 | 52 | /* Styles for currency select boxes */ 53 | .select-box { 54 | display: flex; 55 | gap: 10px; 56 | flex-direction: row; 57 | justify-content: center; 58 | padding: 10px; 59 | margin: 10px 0; 60 | } 61 | 62 | .select { 63 | display: flex; 64 | flex-direction: column; 65 | align-items: center; 66 | width: 50%; 67 | } 68 | 69 | .select label { 70 | color: white; 71 | font-weight: 400; 72 | font-size: 18px; 73 | text-transform: uppercase; 74 | } 75 | 76 | .select select { 77 | width: 100%; 78 | margin-top: 3px; 79 | padding: 10px; 80 | outline: none; 81 | } 82 | 83 | /* Button styles */ 84 | button { 85 | cursor: pointer; 86 | display: inline-block; 87 | margin: 0 10px; 88 | background: lightblue; 89 | padding: 15px; 90 | font-family: inherit; 91 | font-size: 16px; 92 | border: 0; 93 | border-radius: 5px; 94 | } 95 | 96 | /* Output paragraph style */ 97 | p.output { 98 | font-weight: 300; 99 | color: white; 100 | display: none; 101 | } 102 | -------------------------------------------------------------------------------- /project-15_currrency_convertor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Stopwatch Timer 8 | 9 | 10 |
11 |

Currency converter

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

₹99

28 |
29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /project-15_currrency_convertor/js/country.js: -------------------------------------------------------------------------------- 1 | const currencyCodes = [ 2 | "AED", 3 | "AFN", 4 | "XCD", 5 | "ALL", 6 | "AMD", 7 | "ANG", 8 | "AOA", 9 | "AQD", 10 | "ARS", 11 | "AUD", 12 | "AZN", 13 | "BAM", 14 | "BBD", 15 | "BDT", 16 | "XOF", 17 | "BGN", 18 | "BHD", 19 | "BIF", 20 | "BMD", 21 | "BND", 22 | "BOB", 23 | "BRL", 24 | "BSD", 25 | "NOK", 26 | "BWP", 27 | "BYR", 28 | "BZD", 29 | "CAD", 30 | "CDF", 31 | "XAF", 32 | "CHF", 33 | "CLP", 34 | "CNY", 35 | "COP", 36 | "CRC", 37 | "CUP", 38 | "CVE", 39 | "CYP", 40 | "CZK", 41 | "DJF", 42 | "DKK", 43 | "DOP", 44 | "DZD", 45 | "ECS", 46 | "EEK", 47 | "EGP", 48 | "ETB", 49 | "EUR", 50 | "FJD", 51 | "FKP", 52 | "GBP", 53 | "GEL", 54 | "GGP", 55 | "GHS", 56 | "GIP", 57 | "GMD", 58 | "GNF", 59 | "GTQ", 60 | "GYD", 61 | "HKD", 62 | "HNL", 63 | "HRK", 64 | "HTG", 65 | "HUF", 66 | "IDR", 67 | "ILS", 68 | "INR", 69 | "IQD", 70 | "IRR", 71 | "ISK", 72 | "JMD", 73 | "JOD", 74 | "JPY", 75 | "KES", 76 | "KGS", 77 | "KHR", 78 | "KMF", 79 | "KPW", 80 | "KRW", 81 | "KWD", 82 | "KYD", 83 | "KZT", 84 | "LAK", 85 | "LBP", 86 | "LKR", 87 | "LRD", 88 | "LSL", 89 | "LTL", 90 | "LVL", 91 | "LYD", 92 | "MAD", 93 | "MDL", 94 | "MGA", 95 | "MKD", 96 | "MMK", 97 | "MNT", 98 | "MOP", 99 | "MRO", 100 | "MTL", 101 | "MUR", 102 | "MVR", 103 | "MWK", 104 | "MXN", 105 | "MYR", 106 | "MZN", 107 | "NAD", 108 | "XPF", 109 | "NGN", 110 | "NIO", 111 | "NPR", 112 | "NZD", 113 | "OMR", 114 | "PAB", 115 | "PEN", 116 | "PGK", 117 | "PHP", 118 | "PKR", 119 | "PLN", 120 | "PYG", 121 | "QAR", 122 | "RON", 123 | "RSD", 124 | "RUB", 125 | "RWF", 126 | "SAR", 127 | "SBD", 128 | "SCR", 129 | "SDG", 130 | "SEK", 131 | "SGD", 132 | "SKK", 133 | "SLL", 134 | "SOS", 135 | "SRD", 136 | "STD", 137 | "SVC", 138 | "SYP", 139 | "SZL", 140 | "THB", 141 | "TJS", 142 | "TMT", 143 | "TND", 144 | "TOP", 145 | "TRY", 146 | "TTD", 147 | "TWD", 148 | "TZS", 149 | "UAH", 150 | "UGX", 151 | "USD", 152 | "UYU", 153 | "UZS", 154 | "VEF", 155 | "VND", 156 | "VUV", 157 | "YER", 158 | "ZAR", 159 | "ZMK", 160 | "ZWD", 161 | ]; 162 | 163 | // Get a NodeList of all select inputs on the page 164 | let selectInputs = document.querySelectorAll("select"); 165 | console.log(selectInputs); 166 | // Loop through each select input 167 | selectInputs.forEach((selectInput) => { 168 | for (let i=0;i { 8 | const amount = amountInput.value; 9 | const from = fromCurrencySelect.value; 10 | const to = toCurrencySelect.value; 11 | 12 | if (amount < 1) { 13 | alert("Invalid amount"); 14 | return; 15 | } 16 | 17 | fetch(`https://v6.exchangerate-api.com/v6/814385ebe55498d47ded4e4f/latest/${from}`) 18 | .then((res) => res.json()) 19 | .then((response) => { 20 | const conversionRate = response.conversion_rates[to]; 21 | if (conversionRate !== undefined) { 22 | const result = amount * conversionRate; 23 | outputElement.textContent = `${amount} ${from} = ${result} ${to}`; 24 | outputElement.style.display = "block"; 25 | } else { 26 | alert("Invalid currency selection"); 27 | } 28 | }) 29 | .catch((e) => { 30 | alert("Something went wrong"); 31 | }); 32 | }); -------------------------------------------------------------------------------- /project-16_pricing_component/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const toggleBtn = document.querySelector(".toggle-btn"); 4 | const toggleArea = document.querySelector(".toggle-area"); 5 | const basicPrice = document.querySelector(".price-1"); 6 | const profPrice = document.querySelector(".price-2"); 7 | const masterPrice = document.querySelector(".price-3"); 8 | 9 | toggleArea.addEventListener("click", function (e) { 10 | e.preventDefault(); 11 | if (toggleArea.classList.contains("monthly")) { 12 | toggleArea.classList.remove("monthly"); 13 | toggleArea.classList.add("anually"); 14 | basicPrice.innerHTML = `

$199.99

`; 15 | profPrice.innerHTML = `

$249.99

`; 16 | masterPrice.innerHTML = `

$399.99

`; 17 | } else { 18 | toggleArea.classList.add("monthly"); 19 | toggleArea.classList.remove("anually"); 20 | basicPrice.innerHTML = `

$19.99

`; 21 | profPrice.innerHTML = `

$24.99

`; 22 | masterPrice.innerHTML = `

$39.99

`; 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /project-16_pricing_component/images/bg-bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-16_pricing_component/images/bg-top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-16_pricing_component/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-16_pricing_component/images/favicon-32x32.png -------------------------------------------------------------------------------- /project-16_pricing_component/images/project-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-16_pricing_component/images/project-preview.png -------------------------------------------------------------------------------- /project-16_pricing_component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Pricing Component With Toggle 12 | 13 | 14 | 15 | 16 |
17 |

Our Pricing

18 | 25 |
26 |
27 |
28 | 29 |
30 |

Basic

31 |

$19.99

32 |
    33 |
    34 |
  • 500 GB Storage
    • 35 |
    36 |
  • 2 Users Allowed
    • 37 |
    38 |
  • Send up to 3 GB
    • 39 |
    40 |
41 | 42 |
43 | 44 |
45 |

Professional

46 |

$24.99

47 |
    48 |
    49 |
  • 1 TB Storage
    • 50 |
    51 |
  • 5 Users Allowed
    • 52 |
    53 |
  • Send up to 10 GB
    • 54 |
    55 |
56 | 57 |
58 | 59 |
60 |

Master

61 |

$39.99

62 |
    63 |
    64 |
  • 2 TB Storage
    • 65 |
    66 |
  • 10 Users Allowed
    • 67 |
    68 |
  • Send up to 20 GB
    • 69 |
    70 |
71 | 72 |
73 |
74 |
75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /project-16_pricing_component/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap"); 2 | 3 | :root { 4 | --gradient: hsl(236, 72%, 79%), hsl(237, 63%, 64%); 5 | --purple: hsl(237, 63%, 64%); 6 | --very-light-grayish-blue: hsl(240, 78%, 98%); 7 | --light-grayish-blue: hsl(234, 14%, 74%); 8 | --grayish-blue: hsl(233, 13%, 49%); 9 | --dark-grayish-blue: hsl(232, 13%, 33%); 10 | --white: white; 11 | --body-font: "Montserrat", sans-serif; 12 | --transition: all ease-in-out 0.3s; 13 | } 14 | 15 | * { 16 | margin: 0; 17 | padding: 0; 18 | } 19 | 20 | html { 21 | font-size: 15px; 22 | } 23 | 24 | body { 25 | -ms-overflow-style: none; /* for Internet Explorer, Edge */ 26 | scrollbar-width: none; /* for Firefox */ 27 | overflow-y: scroll; 28 | box-sizing: border-box; 29 | font-family: var(--body-font); 30 | background-color: var(--very-light-grayish-blue); 31 | background-image: url("images/bg-top.svg"), url("images/bg-bottom.svg"); 32 | background-repeat: no-repeat, no-repeat; 33 | background-size: 26.5%, 26.5%; 34 | background-position: 35 | top 0 right -1rem, 36 | bottom -4.7rem left -1.9rem; 37 | } 38 | 39 | body::-webkit-scrollbar { 40 | display: none; /* for Chrome, Safari, and Opera */ 41 | } 42 | 43 | main { 44 | width: 100%; 45 | margin: 0 auto; 46 | text-align: center; 47 | margin-top: 5rem; 48 | margin-bottom: 5rem; 49 | } 50 | 51 | h1 { 52 | color: var(--grayish-blue); 53 | font-size: 2rem; 54 | font-weight: 700; 55 | letter-spacing: 1px; 56 | } 57 | header { 58 | display: flex; 59 | flex-direction: column; 60 | margin: 0 auto; 61 | justify-content: center; 62 | align-items: center; 63 | padding: 5rem; 64 | padding-bottom: 0; 65 | gap: 2.6rem; 66 | } 67 | /* Toggle Section */ 68 | nav { 69 | display: inline-flex; 70 | flex-direction: row; 71 | gap: 1.9rem; 72 | align-items: center; 73 | } 74 | 75 | .toggle-area { 76 | border: none; 77 | position: relative; 78 | display: inline-flex; 79 | align-items: center; 80 | cursor: pointer; 81 | width: 3.8rem; 82 | height: 2.3rem; 83 | border-radius: 25px; 84 | background: linear-gradient(var(--gradient)); 85 | } 86 | 87 | .toggle-btn { 88 | cursor: pointer; 89 | position: relative; 90 | width: 1.7rem; 91 | height: 1.7rem; 92 | margin: 5%; 93 | border-radius: 50%; 94 | background-color: var(--very-light-grayish-blue); 95 | } 96 | 97 | .toggle-area.monthly { 98 | justify-content: flex-end; 99 | align-content: flex-end; 100 | } 101 | 102 | .toggle-area.anually { 103 | justify-content: flex-start; 104 | align-content: flex-start; 105 | } 106 | 107 | .toggle-section p { 108 | color: var(--light-grayish-blue); 109 | } 110 | 111 | /* Pricing Section */ 112 | 113 | .pricing-container { 114 | display: grid; 115 | width: 72%; 116 | grid-template-columns: repeat(3, 1fr); 117 | margin: 0 auto; 118 | margin-top: 5.8rem; 119 | max-width: 1440px; 120 | } 121 | 122 | .pricing { 123 | display: grid; 124 | grid-template-columns: 1fr; 125 | align-items: center; 126 | border-radius: 10px; 127 | padding: 2.1rem 0.8rem; 128 | } 129 | 130 | .container-2 { 131 | background: linear-gradient(var(--gradient)); 132 | color: var(--white); 133 | margin-top: -1.6rem; 134 | margin-bottom: -1.6rem; 135 | padding: 3rem 1rem; 136 | } 137 | .container-1, 138 | .container-3 { 139 | background-color: var(--white); 140 | gap: 1.3rem; 141 | } 142 | 143 | .pricing h2 { 144 | font-size: 1.23rem; 145 | font-weight: 700; 146 | } 147 | 148 | .container-1 h2, 149 | .container-1 li, 150 | .container-3 h2, 151 | .container-3 li { 152 | color: var(--light-grayish-blue); 153 | } 154 | .pricing p { 155 | display: flex; 156 | align-items: center; 157 | gap: 6px; 158 | margin: 0 auto; 159 | font-size: 4.6rem; 160 | } 161 | 162 | .dollar-sign { 163 | font-size: 2.5rem; 164 | } 165 | 166 | .container-1 p, 167 | .container-3 p { 168 | color: var(--dark-grayish-blue); 169 | } 170 | 171 | hr { 172 | width: 90%; 173 | border-width: 0.5px; 174 | margin: 0 auto; 175 | border-color: transparent; 176 | border-color: var(--light-grayish-blue); 177 | border-style: solid; 178 | opacity: 0.5; 179 | } 180 | .pricing ul { 181 | list-style: none; 182 | margin-top: 10px; 183 | } 184 | 185 | .pricing ul li { 186 | padding: 1.06rem; 187 | } 188 | 189 | .pricing button { 190 | cursor: pointer; 191 | width: 90%; 192 | margin: 0 auto; 193 | margin-top: 1rem; 194 | border-radius: 5px; 195 | border-color: transparent; 196 | border-style: solid; 197 | border-width: 1px; 198 | padding: 0.8rem; 199 | text-transform: uppercase; 200 | letter-spacing: 1.5px; 201 | word-spacing: 3px; 202 | font-weight: 700; 203 | text-align: center; 204 | } 205 | 206 | .container-2 button { 207 | color: var(--purple); 208 | background-color: var(--white); 209 | transition: var(--transition); 210 | } 211 | .container-1 button, 212 | .container-3 button { 213 | color: var(--white); 214 | background: linear-gradient(var(--gradient)); 215 | background-repeat: no-repeat; 216 | transition: background ease-in-out 0.3s; 217 | transition: color ease-in-out 0.3s; 218 | } 219 | 220 | @media (hover: hover) { 221 | .container-1 button:hover, 222 | .container-3 button:hover { 223 | background: transparent; 224 | border-color: var(--light-grayish-blue); 225 | color: var(--purple); 226 | border-width: 1px; 227 | transition: background ease-in-out 0.3s; 228 | transition: color ease-in-out 0.3s; 229 | } 230 | .container-2 button:hover { 231 | background-color: transparent; 232 | border-color: var(--white); 233 | color: var(--white); 234 | border-width: 1px; 235 | transition: var(--transition); 236 | } 237 | } 238 | 239 | @media screen and (max-width: 1025px) { 240 | .pricing-container { 241 | width: 50%; 242 | grid-template-columns: 1fr; 243 | margin-top: 5.8rem; 244 | gap: 5rem; 245 | } 246 | 247 | .container-2 { 248 | margin-top: initial; 249 | margin-bottom: initial; 250 | } 251 | .container-2 ul li { 252 | padding: 1.06rem; 253 | } 254 | 255 | .container-2 h2 { 256 | padding-top: initial; 257 | } 258 | .container-2 p { 259 | margin-top: initial; 260 | } 261 | } 262 | 263 | @media screen and (max-width: 800px) { 264 | body { 265 | background-size: 80%, 26.5%; 266 | background-position: 267 | top 0 right -10rem, 268 | bottom -4.7rem left -1.9rem; 269 | } 270 | .pricing-container { 271 | width: 60%; 272 | } 273 | } 274 | 275 | @media screen and (max-width: 600px) { 276 | .pricing-container { 277 | width: 90%; 278 | } 279 | } 280 | -------------------------------------------------------------------------------- /project-17_remove_Signature_bg/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-17_remove_Signature_bg/favicon.png -------------------------------------------------------------------------------- /project-17_remove_Signature_bg/images/remove_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-17_remove_Signature_bg/images/remove_bg.png -------------------------------------------------------------------------------- /project-17_remove_Signature_bg/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | remove_bg 9 | 10 | 11 |
12 |

Remove Background From Your Image

13 |

Upload your image here

14 | 15 |
16 |
17 | image 18 |
19 |
20 | 26 | 29 | 30 | 38 | 39 |
40 | 47 | 54 |
55 |
56 |
57 |
58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /project-17_remove_Signature_bg/script.js: -------------------------------------------------------------------------------- 1 | let imageURL; 2 | 3 | const fileInput = document.getElementById("fileInput"); 4 | const file = document.getElementById("file"); 5 | const uploadedImage = document.getElementById("uploadedImage"); 6 | const removeBgButton = document.getElementById("removeBgButton"); 7 | const downloadButton = document.getElementById("downloadBtn"); 8 | const reloadButton = document.getElementById("reloadBtn"); 9 | 10 | // Hide the download button initially 11 | reloadButton.style.display = "none"; 12 | downloadButton.style.display = "none"; 13 | 14 | fileInput.addEventListener("change", function (event) { 15 | if (event.target.files && event.target.files[0]) { 16 | const reader = new FileReader(); 17 | 18 | reader.onload = function (e) { 19 | uploadedImage.src = e.target.result; 20 | }; 21 | reader.readAsDataURL(event.target.files[0]); 22 | } 23 | }); 24 | 25 | function submitHandler() { 26 | removeBgButton.classList.toggle("btn_loading"); 27 | const fileInput = document.getElementById("fileInput"); 28 | console.log(fileInput.files); 29 | const image = fileInput.files[0]; 30 | 31 | if (!fileInput.files || fileInput.files.length === 0) { 32 | alert("Please select an image before submitting."); 33 | return; 34 | } 35 | 36 | // Multipart file 37 | const formData = new FormData(); 38 | formData.append("image_file", image); 39 | formData.append("size", "auto"); 40 | 41 | const apiKey = "5V4yNGbdJ9Dr83u6GAbxD8Vw"; 42 | 43 | fetch("https://api.remove.bg/v1.0/removebg", { 44 | method: "POST", 45 | headers: { 46 | "X-Api-Key": apiKey, 47 | }, 48 | body: formData, 49 | }) 50 | .then(function (response) { 51 | return response.blob(); 52 | }) 53 | .then(function (blob) { 54 | console.log(blob); 55 | const url = URL.createObjectURL(blob); 56 | imageURL = url; 57 | uploadedImage.src = url; 58 | reloadButton.style.display = "block"; 59 | file.style.display = "none"; 60 | 61 | downloadButton.style.display = "block"; 62 | removeBgButton.style.display = "none"; 63 | }) 64 | .catch(); 65 | } 66 | 67 | function downloadFile() { 68 | var anchorElement = document.createElement("a"); 69 | anchorElement.href = imageURL; 70 | anchorElement.download = "removed_bg.png"; 71 | document.body.appendChild(anchorElement); 72 | 73 | anchorElement.click(); 74 | 75 | document.body.removeChild(anchorElement); 76 | } 77 | 78 | function reset() { 79 | window.location.reload(); 80 | } 81 | -------------------------------------------------------------------------------- /project-17_remove_Signature_bg/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | height: 100vh; 8 | font-size: 62.5%; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | text-align: center; 13 | box-sizing: border-box; 14 | background: #f8edfa; 15 | } 16 | 17 | h1 { 18 | font: 2rem "Cambria", "Cochin", Georgia, Times, "Times New Roman", serif; 19 | color: #38464c; 20 | letter-spacing: 0.2rem; 21 | padding: 0.3rem; 22 | } 23 | 24 | h4 { 25 | font: 1rem "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 26 | "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 27 | color: #455a64; 28 | text-align: center; 29 | padding: 0.5rem; 30 | margin: 1rem; 31 | } 32 | 33 | .img { 34 | height: 300px; 35 | /* width: auto; */ 36 | padding: 0.8rem 1.6rem; 37 | border-radius: 1.5rem; 38 | display: flex; 39 | align-items: center; 40 | justify-content: center; 41 | overflow: hidden; 42 | box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 43 | } 44 | 45 | img { 46 | object-fit: contain; 47 | width: 90%; 48 | height: 90%; 49 | } 50 | 51 | .custom-file-input { 52 | display: inline-block; 53 | padding: 0.8rem 1.5rem; 54 | color: #ffffff; 55 | background-color: #f5af09; 56 | cursor: pointer; 57 | border-radius: 0.4rem; 58 | font: bold 15px "Quicksand", sans-serif; 59 | transition: all 0.3s ease; 60 | } 61 | 62 | .custom-file-input:hover { 63 | background-color: #e09707; 64 | } 65 | 66 | .btn { 67 | padding: 1rem; 68 | text-align: center; 69 | } 70 | 71 | .btn-container { 72 | display: flex; 73 | justify-content: center; 74 | } 75 | 76 | button { 77 | position: relative; 78 | padding: 0.8rem 1.6rem; 79 | margin: 1rem; 80 | border: none; 81 | outline: none; 82 | border-radius: 0.5rem; 83 | cursor: pointer; 84 | font: bold 1.2rem "Quicksand", sans-serif; 85 | color: #ffffff; 86 | transition: all 0.2s; 87 | } 88 | 89 | .btn_loading .btn__text { 90 | visibility: hidden; 91 | opacity: 0; 92 | } 93 | 94 | .btn_loading::after { 95 | content: " "; 96 | position: absolute; 97 | width: 1.5rem; 98 | height: 1.5rem; 99 | top: 0; 100 | bottom: 0; 101 | left: 0; 102 | right: 0; 103 | margin: auto; 104 | border: 0.4rem solid transparent; 105 | border-radius: 50%; 106 | border-top-color: #ffffff; 107 | animation: loader 1s ease infinite; 108 | } 109 | 110 | #removeBgButton:active { 111 | background: #007a63; 112 | } 113 | 114 | @keyframes loader { 115 | from { 116 | transform: rotate(0turn); 117 | } 118 | to { 119 | transform: rotate(1turn); 120 | } 121 | } 122 | 123 | @media screen and (max-width: 760px) { 124 | body { 125 | font-size: 45%; 126 | } 127 | h1 { 128 | font-size: 1.8rem; 129 | } 130 | button { 131 | font-size: 1rem; 132 | } 133 | .img { 134 | margin: 16px; 135 | padding: 0; 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /project-18_toggle_dark_light_mode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dark & Light Mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | image not found 19 |
20 |

21 | lorem ipsum dolor sit amet consectetur adipiscing elit 22 | namaste namaste 23 |

24 |
25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /project-18_toggle_dark_light_mode/script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const button = document.getElementById("mode-toggle"); 3 | const body = document.body; 4 | const isDarkMode = localStorage.getItem("darkMode") === "true"; 5 | 6 | // Function to set dark mode state 7 | function setDarkMode(isDark) { 8 | if (isDark) { 9 | body.classList.add("dark"); 10 | localStorage.setItem("darkMode", "true"); 11 | } else { 12 | body.classList.remove("dark"); 13 | localStorage.setItem("darkMode", "false"); 14 | } 15 | } 16 | 17 | // Initial state based on local storage 18 | setDarkMode(isDarkMode); 19 | 20 | // Toggle dark mode when button is clicked 21 | button.addEventListener("click", () => { 22 | const newMode = !body.classList.contains("dark"); 23 | setDarkMode(newMode); 24 | }); 25 | }); 26 | 27 | -------------------------------------------------------------------------------- /project-18_toggle_dark_light_mode/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | height: 100vh; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | flex-direction: column; 11 | } 12 | body.dark { 13 | background-color: #121212; 14 | color: #ffffff; 15 | } 16 | 17 | body.dark .card { 18 | background: #1e1e1e; 19 | border: 0px; 20 | } 21 | 22 | button#mode-toggle { 23 | margin-bottom: 5px; 24 | padding: 10px 20px; 25 | background-color: #007bff; 26 | color: #fff; 27 | border: none; 28 | border-radius: 5px; 29 | cursor: pointer; 30 | transition: background-color 0.3s ease; 31 | } 32 | 33 | button#mode-toggle:hover { 34 | background-color: #0056b3; 35 | } 36 | 37 | .card { 38 | width: 250px; 39 | border: 1px solid #ccc; 40 | border-radius: 5px; 41 | padding: 20px; 42 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 43 | background-color: #ececec; 44 | } 45 | 46 | .img { 47 | text-align: center; 48 | } 49 | 50 | .img img { 51 | max-width: 100%; 52 | height: auto; 53 | border-radius: 50%; 54 | } 55 | 56 | p { 57 | margin-top: 15px; 58 | font-size: 14px; 59 | line-height: 1.5; 60 | } 61 | 62 | -------------------------------------------------------------------------------- /project-19_weather_app/img/clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-19_weather_app/img/clear.png -------------------------------------------------------------------------------- /project-19_weather_app/img/clouds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-19_weather_app/img/clouds.png -------------------------------------------------------------------------------- /project-19_weather_app/img/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-19_weather_app/img/demo.png -------------------------------------------------------------------------------- /project-19_weather_app/img/drizzle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-19_weather_app/img/drizzle.png -------------------------------------------------------------------------------- /project-19_weather_app/img/haze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-19_weather_app/img/haze.png -------------------------------------------------------------------------------- /project-19_weather_app/img/humidity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-19_weather_app/img/humidity.png -------------------------------------------------------------------------------- /project-19_weather_app/img/mist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-19_weather_app/img/mist.png -------------------------------------------------------------------------------- /project-19_weather_app/img/rain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-19_weather_app/img/rain.png -------------------------------------------------------------------------------- /project-19_weather_app/img/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-19_weather_app/img/search.png -------------------------------------------------------------------------------- /project-19_weather_app/img/snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-19_weather_app/img/snow.png -------------------------------------------------------------------------------- /project-19_weather_app/img/wind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-19_weather_app/img/wind.png -------------------------------------------------------------------------------- /project-19_weather_app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Weather App 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |
16 |

Weather App

17 |

Check Weather searching City Name

18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 |
26 | 31 | 32 | 33 |
34 | 35 | 36 | 37 |

38 |

39 | 40 | 41 |
42 |
43 | 44 | 45 |
46 |

47 |

Humidity

48 |
49 | 50 |
51 | 52 |
53 | 54 | 55 |
56 |

57 |

Wind

58 |
59 | 60 |
61 | 62 | 63 |
64 |
65 | 66 | 67 | 68 |
69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /project-19_weather_app/script.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const apiURL = `https://api.openweathermap.org/data/2.5/weather?units=metric`; 4 | const appKey = `&appid=1dc02c2cda3d32eda98eede7405d0e42`; 5 | 6 | const searchField = document.querySelector(".searchArea input"); 7 | const searchBtn = document.querySelector(".searchArea button"); 8 | const weatherIcon = document.querySelector(".Weather-Icon"); 9 | 10 | 11 | function city() { 12 | const inputName = document.querySelector("#impTXT"); 13 | const city = `&q=${inputName.value}`; 14 | checkWeather(city); 15 | } 16 | 17 | // document.querySelector(".WeatherDisplay").style.display = "block"; 18 | 19 | 20 | async function checkWeather(city) { 21 | const response = await fetch(apiURL + appKey + city); 22 | var data = await response.json(); 23 | console.log(data); 24 | 25 | document.querySelector(".city").innerHTML = data.name; 26 | document.querySelector(".temperature").innerHTML = Math.round(data.main.temp) + "°C"; 27 | document.querySelector(".humidity").innerHTML = data.main.humidity + "%"; 28 | document.querySelector(".wind").innerHTML = data.wind.speed + "km/h"; 29 | 30 | if (data.weather[0].main == "Clouds") { 31 | weatherIcon.src = "img/clouds.png"; 32 | } 33 | 34 | if (data.weather[0].main == "Mist") { 35 | weatherIcon.src = "img/Mist.png"; 36 | } 37 | 38 | if (data.weather[0].main == "Rain") { 39 | weatherIcon.src = "img/rain.png"; 40 | } 41 | 42 | if (data.weather[0].main == "Drizzle") { 43 | weatherIcon.src = "img/drizzle.png"; 44 | } 45 | 46 | if (data.weather[0].main == "Clear") { 47 | weatherIcon.src = "img/clear.png"; 48 | } 49 | 50 | if (data.weather[0].main == "Snow") { 51 | weatherIcon.src = "img/snow.png"; 52 | } 53 | 54 | if (data.weather[0].main == "Haze") { 55 | weatherIcon.src = "img/haze.png"; 56 | } 57 | 58 | document.querySelector(".WeatherDisplay").style.display = "block"; 59 | }; 60 | 61 | searchBtn.addEventListener("click", city); // addEventlistener e funcion call korle () lage na 62 | 63 | 64 | // const input = document.getElementById("impTXT"); 65 | searchField.addEventListener("keypress", function (event) { 66 | if (event.key === "Enter") { 67 | event.preventDefault(); 68 | city(); 69 | } 70 | }); 71 | 72 | -------------------------------------------------------------------------------- /project-19_weather_app/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 6 | box-sizing: border-box; 7 | } 8 | 9 | body{ 10 | background: #222; 11 | } 12 | .AppCard{ 13 | width: 90%; 14 | max-width: 470px; 15 | background: linear-gradient(200deg, #fe9000, #8a5469); 16 | color: #fefffe; 17 | margin: 100px auto 0; 18 | 19 | border-radius: 15px; 20 | 21 | padding: 40px 40px; 22 | 23 | text-align: center; 24 | border: 1px solid white; 25 | } 26 | 27 | .searchArea{ 28 | 29 | width: 100%; 30 | display: flex; 31 | align-items: center; 32 | justify-content: space-between; 33 | 34 | 35 | } 36 | 37 | .searchArea input{ 38 | border: 0; 39 | outline: 0; 40 | background: #35282d; 41 | color: #7a7171; 42 | 43 | padding: 15px 25px; 44 | 45 | height: 60px; 46 | 47 | border-radius: 30px; 48 | flex: 1; 49 | /* This property is used to make the input field flexible, 50 | so that it can adjust its size according to the available space. */ 51 | 52 | margin-right: 16px; 53 | font-size: large; 54 | 55 | 56 | } 57 | 58 | 59 | .Weather-Icon{ 60 | 61 | width: 170px; 62 | margin-top: 30px; 63 | } 64 | 65 | .searchArea button{ 66 | border: 0; 67 | outline: 0; 68 | background: #35282d; 69 | border-radius: 50%; 70 | width: 60px; 71 | height: 60px; 72 | cursor: pointer; 73 | } 74 | .searchArea button img{ 75 | width: 20px; 76 | padding-top: 5px; 77 | } 78 | 79 | .WeatherDisplay h1{ 80 | font-size: 80px; 81 | font-weight: 500; 82 | } 83 | .WeatherDisplay h2{ 84 | font-size: 45px; 85 | font-weight: 400; 86 | margin-top: -10px; 87 | } 88 | 89 | 90 | .detailsInfo{ 91 | display: flex; 92 | 93 | align-items: center; 94 | justify-content: space-between; 95 | padding: 0 20px; 96 | margin-top: 50px; 97 | 98 | } 99 | 100 | .column{ 101 | display: flex; 102 | align-items: center; 103 | text-align: left; 104 | } 105 | 106 | .column img{ 107 | width: 50px; 108 | margin-right: 10px; 109 | } 110 | 111 | .humidity, .wind{ 112 | font-size: larger; 113 | margin-top: -5px; 114 | } 115 | 116 | 117 | .WeatherDisplay{ 118 | display: none; 119 | } 120 | 121 | .title{ 122 | margin-top: -30px; 123 | margin-bottom: 15px; 124 | } 125 | 126 | .title p{ 127 | font-size: 18px; 128 | } 129 | 130 | .title p span{ 131 | color:#35282d; 132 | font-weight: 800; 133 | } 134 | 135 | 136 | -------------------------------------------------------------------------------- /project-1_landing-page/css/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | background: #f1f1f1; 9 | } 10 | 11 | header .navbar { 12 | height: 70px; 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | background: transparent; 17 | padding: 10px 26px; 18 | } 19 | 20 | header .navbar .logo { 21 | font-size: 2rem; 22 | font-weight: 600; 23 | font-family: "Source Sans Pro", sans-serif; 24 | color: #1f3569; 25 | } 26 | 27 | header .navbar #check { 28 | display: none; 29 | } 30 | 31 | header .navbar #check:checked ~ .menu-items { 32 | left: 0; 33 | } 34 | 35 | header .navbar #checkbtn { 36 | font-size: 33px; 37 | display: none; 38 | } 39 | 40 | header .navbar .menu-items { 41 | display: flex; 42 | align-items: center; 43 | justify-content: center; 44 | transition: 0.3s all ease-in-out; 45 | } 46 | 47 | header .navbar .menu-items li { 48 | list-style: none; 49 | padding: 0 20px; 50 | } 51 | 52 | header .navbar .menu-items li a { 53 | text-decoration-line: none; 54 | font-size: 18px; 55 | color: #1f3569; 56 | text-transform: uppercase; 57 | } 58 | 59 | #hero { 60 | margin: auto; 61 | display: flex; 62 | flex-direction: row; 63 | padding: 30px; 64 | height: 550px; 65 | justify-content: space-between; 66 | width: 100%; 67 | } 68 | 69 | #hero .text { 70 | margin: auto; 71 | font-family: "Source Sans Pro", sans-serif; 72 | text-align: center; 73 | } 74 | 75 | #hero .text h1 { 76 | font-size: 55px; 77 | color: #1f3569; 78 | padding: 10px; 79 | margin-bottom: 10px; 80 | } 81 | 82 | #hero .text p { 83 | font-size: 18px; 84 | padding: 18px; 85 | } 86 | 87 | #hero .text button { 88 | padding: 8px; 89 | width: 40%; 90 | border-radius: 40px; 91 | border: none; 92 | outline: none; 93 | background: #1f3569; 94 | color: white; 95 | } 96 | 97 | #hero .img { 98 | margin: auto; 99 | } 100 | 101 | #hero .img img { 102 | width: 550px; 103 | } 104 | 105 | #features { 106 | margin: auto; 107 | width: 100%; 108 | height: max-content; 109 | display: flex; 110 | flex-direction: column; 111 | align-items: center; 112 | padding: 30px; 113 | } 114 | 115 | #features .content { 116 | text-align: center; 117 | font-family: "Source Sans Pro", sans-serif; 118 | } 119 | 120 | #features .content p { 121 | font-size: 23px; 122 | margin-bottom: 10px; 123 | color: #5e80d2; 124 | } 125 | 126 | #features .content h2 { 127 | font-size: 33px; 128 | color: #1f3569; 129 | } 130 | 131 | #features .content img { 132 | width: 650px; 133 | margin-top: 30px; 134 | } 135 | 136 | #features .cards { 137 | display: grid; 138 | grid-template-columns: repeat(2, 1fr); 139 | grid-gap: 10px; 140 | margin: 40px 0; 141 | } 142 | 143 | #features .cards .card { 144 | display: flex; 145 | flex-direction: row; 146 | align-items: center; 147 | justify-content: center; 148 | width: 300px; 149 | padding: 20px; 150 | box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1); 151 | border-radius: 5px; 152 | text-align: left; 153 | background-color: #fff; 154 | font-family: "Source Sans Pro", sans-serif; 155 | color: #1f3569; 156 | } 157 | 158 | #features .cards .card i { 159 | font-size: 40px; 160 | } 161 | 162 | #services { 163 | margin: auto; 164 | width: 100%; 165 | height: max-content; 166 | display: flex; 167 | flex-direction: column; 168 | align-items: center; 169 | padding: 30px; 170 | } 171 | 172 | #services .content { 173 | text-align: center; 174 | font-family: "Source Sans Pro", sans-serif; 175 | } 176 | 177 | #services .content p { 178 | font-size: 23px; 179 | margin-bottom: 10px; 180 | color: #5e80d2; 181 | } 182 | 183 | #services .content h2 { 184 | font-size: 33px; 185 | color: #1f3569; 186 | } 187 | 188 | #services .cards { 189 | display: grid; 190 | grid-template-columns: repeat(2, 1fr); 191 | grid-gap: 10px; 192 | margin: 40px 0; 193 | } 194 | 195 | #services .cards .card { 196 | border: none; 197 | padding: 40px; 198 | background-color: #fff; 199 | box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1); 200 | border-radius: 5px; 201 | place-items: center; 202 | width: 250px; 203 | } 204 | 205 | #services .cards .card-android { 206 | border-bottom: 2px solid #3ddc84; 207 | } 208 | 209 | #services .cards .card-website { 210 | border-bottom: 2px solid #ff3a00; 211 | } 212 | 213 | #services .cards .card-others { 214 | border-bottom: 2px solid #5e80d2; 215 | } 216 | 217 | #services .cards .card-body { 218 | display: flex; 219 | align-items: center; 220 | flex-direction: column; 221 | } 222 | 223 | #services .cards .bi { 224 | font-size: 5rem; 225 | padding: 0 10px; 226 | } 227 | 228 | #services .cards .bi-android { 229 | color: #3ddc84; 230 | } 231 | 232 | #services .cards .bi-code-square { 233 | color: #ff3a00; 234 | } 235 | 236 | #services .cards .bi-chat-right { 237 | color: #5e80d2; 238 | } 239 | 240 | #services .cards h2 { 241 | margin: 0; 242 | font-size: 1.5rem; 243 | font-weight: bold; 244 | } 245 | 246 | #services .cards p { 247 | margin-top: 10px; 248 | font-size: 1rem; 249 | } 250 | 251 | #contact { 252 | margin: auto; 253 | width: 100%; 254 | height: max-content; 255 | display: flex; 256 | flex-direction: column; 257 | align-items: center; 258 | padding: 30px; 259 | } 260 | 261 | #contact .content { 262 | text-align: center; 263 | font-family: "Source Sans Pro", sans-serif; 264 | } 265 | 266 | #contact .content p { 267 | font-size: 23px; 268 | margin-bottom: 10px; 269 | color: #5e80d2; 270 | } 271 | 272 | #contact .content h2 { 273 | font-size: 33px; 274 | color: #1f3569; 275 | } 276 | 277 | #contact form { 278 | display: flex; 279 | justify-content: center; 280 | flex-direction: column; 281 | width: 600px; 282 | padding: 2rem; 283 | } 284 | 285 | #contact form label { 286 | font-size: 18px; 287 | font-family: "Source Sans Pro", sans-serif; 288 | margin: 10px 0; 289 | } 290 | 291 | #contact form input { 292 | width: 100%; 293 | margin: 0.5rem 0; 294 | height: 50px; 295 | border: none; 296 | outline: none; 297 | border-radius: 4px; 298 | } 299 | 300 | #contact form textarea { 301 | width: 100%; 302 | margin: 0.5rem 0; 303 | border: none; 304 | outline: none; 305 | border-radius: 4px; 306 | } 307 | 308 | #contact form button { 309 | width: 100%; 310 | background: #1f3569; 311 | border: none; 312 | outline: none; 313 | color: white; 314 | margin: 8px 0 0 0; 315 | height: 50px; 316 | font-size: 18px; 317 | border-radius: 4px; 318 | } 319 | 320 | footer { 321 | width: 100vw; 322 | overflow: hidden; 323 | padding: 20px; 324 | font-family: "Source Sans Pro", sans-serif; 325 | background: #fff; 326 | margin: 0; 327 | } 328 | 329 | footer .footer-content { 330 | display: flex; 331 | width: 100%; 332 | justify-content: center; 333 | flex-direction: column; 334 | text-align: center; 335 | } 336 | 337 | footer .footer-content h3 { 338 | font-size: 2rem; 339 | color: #1f3569; 340 | margin-bottom: 1rem; 341 | } 342 | 343 | footer .footer-content p { 344 | font-size: 18px; 345 | color: #5e80d2; 346 | margin-bottom: 1rem; 347 | } 348 | 349 | footer .socials { 350 | display: flex; 351 | justify-content: center; 352 | gap: 12px; 353 | } 354 | 355 | footer .socials li { 356 | list-style: none; 357 | } 358 | 359 | footer .socials li a { 360 | text-decoration: none; 361 | font-size: 1.5rem; 362 | } 363 | 364 | footer .socials li .bi-facebook { 365 | color: #1877f2; 366 | } 367 | 368 | footer .socials li .bi-twitter { 369 | color: #1da1f2; 370 | } 371 | 372 | footer .socials li .bi-github { 373 | color: #181717; 374 | } 375 | 376 | footer .socials li .bi-youtube { 377 | color: #ff0000; 378 | } 379 | 380 | footer .socials li .bi-linkedin { 381 | color: #0a66c2; 382 | } 383 | 384 | @media (max-width: 760px) { 385 | header .navbar { 386 | margin: auto; 387 | text-align: center; 388 | background: white; 389 | box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); 390 | } 391 | header .navbar #checkbtn { 392 | display: block; 393 | } 394 | header .navbar .menu-items { 395 | position: absolute; 396 | background: #1f3569; 397 | flex-direction: column; 398 | display: block; 399 | top: 90px; 400 | left: -100%; 401 | height: max-content; 402 | width: 100%; 403 | } 404 | header .navbar .menu-items li { 405 | padding: 25px; 406 | } 407 | header .navbar .menu-items li a { 408 | color: white; 409 | } 410 | #hero { 411 | flex-direction: column; 412 | text-align: center; 413 | padding: 0; 414 | margin-top: 33px; 415 | height: max-content; 416 | } 417 | #hero .img img { 418 | width: 370px; 419 | margin-top: 30px; 420 | } 421 | #features { 422 | padding: 0; 423 | margin-top: 33px; 424 | overflow: hidden; 425 | } 426 | #features .content h2 { 427 | padding: 10px; 428 | } 429 | #features .content img { 430 | width: 350px; 431 | } 432 | #features .cards { 433 | grid-template-columns: repeat(1, 1fr); 434 | } 435 | #services { 436 | padding: 0; 437 | margin-top: 33px; 438 | overflow: hidden; 439 | } 440 | #services .content h2 { 441 | padding: 10px; 442 | } 443 | #services .cards { 444 | grid-template-columns: repeat(1, 1fr); 445 | place-items: center; 446 | } 447 | #contact { 448 | padding: 0; 449 | margin-top: 33px; 450 | overflow: hidden; 451 | } 452 | #contact .content h2 { 453 | padding: 10px; 454 | } 455 | #contact form { 456 | width: 350px; 457 | } 458 | footer { 459 | padding: 0; 460 | padding: 20px 0; 461 | text-align: center; 462 | } 463 | footer .footer-content p { 464 | padding: 10px; 465 | } 466 | } 467 | -------------------------------------------------------------------------------- /project-1_landing-page/img/features.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Armanidrisi/frontend-projects/cb924a7369285695549eee72a242e9a76cb0efa1/project-1_landing-page/img/features.png -------------------------------------------------------------------------------- /project-1_landing-page/img/hero-bg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-1_landing-page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | Landing - AppDev 13 | 14 | 15 |
16 | 28 |
29 |
30 |
31 |

excepteur nostrud excepteur sunt

32 |

33 | deserunt minim velit pariatur exercitation laborum ipsum cillum aliqua 34 | dolor nisi ullamco sunt deserunt qui occaecat cupidatat quis ea id 35 | aliqua exercitation adipisicing officia amet eu fugiat aliquip culpa 36 | cillum 37 |

38 | 39 |
40 |
41 | 42 |
43 |
44 |
45 |
46 |

Features

47 |

Quality Products is our promise..

48 | 49 |
50 |
51 |
52 | 53 |

Friendly Behaviour

54 |
55 |
56 | 57 |

Budget Friendly

58 |
59 |
60 | 61 |

Quality Developers

62 |
63 |
64 | 65 |

Maintenance Support

66 |
67 |
68 | 69 |

Correct time completion

70 |
71 |
72 | 73 |

Error Solving

74 |
75 |
76 |
77 |
78 |
79 |

Services

80 |

Grow your business with us

81 |
82 |
83 |
84 | 85 |

Android Apps

86 |

87 | We have a very experienced team for app development, We offer 88 | you a very attractive user interface and functions for your 89 | application. 90 |

91 |
92 |
93 |
94 |
95 | 96 |

Website

97 |

98 | Need a website for your bussiness or personal use ? why are you 99 | waiting drop a project request now! 100 |

101 |
102 |
103 |
104 |
105 | 106 |

Other

107 |

108 | We provide you any type of technical services as you need, for 109 | more details please contact us 110 |

111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |

Contact

119 |

Contact Us

120 |
121 |
122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 |
132 |
133 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /project-1_landing-page/js/index.js: -------------------------------------------------------------------------------- 1 | //JavaScript code here 2 | -------------------------------------------------------------------------------- /project-1_landing-page/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | body { 7 | background: #f1f1f1; 8 | } 9 | header { 10 | .navbar { 11 | height: 70px; 12 | display: flex; 13 | justify-content: space-between; 14 | align-items: center; 15 | background: transparent; 16 | 17 | padding: 10px 26px; 18 | .logo { 19 | font-size: 2rem; 20 | font-weight: 600; 21 | font-family: "Source Sans Pro", sans-serif; 22 | color: #1f3569; 23 | } 24 | #check { 25 | display: none; 26 | } 27 | #check:checked ~ .menu-items { 28 | left: 0; 29 | } 30 | #checkbtn { 31 | font-size: 33px; 32 | display: none; 33 | } 34 | .menu-items { 35 | display: flex; 36 | align-items: center; 37 | justify-content: center; 38 | transition: 0.3s all ease-in-out; 39 | li { 40 | list-style: none; 41 | padding: 0 20px; 42 | a { 43 | text-decoration-line: none; 44 | font-size: 18px; 45 | color: #1f3569; 46 | text-transform: uppercase; 47 | } 48 | } 49 | } 50 | } 51 | } 52 | #hero { 53 | margin: auto; 54 | 55 | display: flex; 56 | flex-direction: row; 57 | padding: 30px; 58 | height: 550px; 59 | justify-content: space-between; 60 | width: 100%; 61 | .text { 62 | margin: auto; 63 | font-family: "Source Sans Pro", sans-serif; 64 | text-align: center; 65 | h1 { 66 | font-size: 55px; 67 | color: #1f3569; 68 | padding: 10px; 69 | margin-bottom: 10px; 70 | } 71 | p { 72 | font-size: 18px; 73 | padding: 18px; 74 | } 75 | button { 76 | padding: 8px; 77 | width: 40%; 78 | border-radius: 40px; 79 | border: none; 80 | outline: none; 81 | background: #1f3569; 82 | color: white; 83 | } 84 | } 85 | .img { 86 | margin: auto; 87 | img { 88 | width: 550px; 89 | } 90 | } 91 | } 92 | #features { 93 | margin: auto; 94 | width: 100%; 95 | 96 | height: max-content; 97 | display: flex; 98 | flex-direction: column; 99 | align-items: center; 100 | padding: 30px; 101 | .content { 102 | text-align: center; 103 | font-family: "Source Sans Pro", sans-serif; 104 | p { 105 | font-size: 23px; 106 | margin-bottom: 10px; 107 | color: #5e80d2; 108 | } 109 | h2 { 110 | font-size: 33px; 111 | color: #1f3569; 112 | } 113 | img { 114 | width: 650px; 115 | margin-top: 30px; 116 | } 117 | } 118 | .cards { 119 | display: grid; 120 | grid-template-columns: repeat(2, 1fr); 121 | grid-gap: 10px; 122 | margin: 40px 0; 123 | .card { 124 | display: flex; 125 | flex-direction: row; 126 | align-items: center; 127 | justify-content: center; 128 | width: 300px; 129 | padding: 20px; 130 | box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1); 131 | border-radius: 5px; 132 | text-align: left; 133 | background-color: #fff; 134 | font-family: "Source Sans Pro", sans-serif; 135 | color: #1f3569; 136 | i { 137 | font-size: 40px; 138 | } 139 | } 140 | } 141 | } 142 | #services { 143 | margin: auto; 144 | width: 100%; 145 | 146 | height: max-content; 147 | display: flex; 148 | flex-direction: column; 149 | align-items: center; 150 | padding: 30px; 151 | .content { 152 | text-align: center; 153 | font-family: "Source Sans Pro", sans-serif; 154 | p { 155 | font-size: 23px; 156 | margin-bottom: 10px; 157 | color: #5e80d2; 158 | } 159 | h2 { 160 | font-size: 33px; 161 | color: #1f3569; 162 | } 163 | } 164 | .cards { 165 | display: grid; 166 | grid-template-columns: repeat(2, 1fr); 167 | grid-gap: 10px; 168 | margin: 40px 0; 169 | .card { 170 | border: none; 171 | padding: 40px; 172 | background-color: #fff; 173 | box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1); 174 | border-radius: 5px; 175 | place-items: center; 176 | width: 250px; 177 | } 178 | .card-android { 179 | border-bottom: 2px solid #3ddc84; 180 | } 181 | .card-website { 182 | border-bottom: 2px solid #ff3a00; 183 | } 184 | .card-others { 185 | border-bottom: 2px solid #5e80d2; 186 | } 187 | .card-body { 188 | display: flex; 189 | align-items: center; 190 | flex-direction: column; 191 | } 192 | 193 | .bi { 194 | font-size: 5rem; 195 | padding: 0 10px; 196 | } 197 | .bi-android { 198 | color: #3ddc84; 199 | } 200 | .bi-code-square { 201 | color: #ff3a00; 202 | } 203 | .bi-chat-right { 204 | color: #5e80d2; 205 | } 206 | h2 { 207 | margin: 0; 208 | font-size: 1.5rem; 209 | font-weight: bold; 210 | } 211 | 212 | p { 213 | margin-top: 10px; 214 | font-size: 1rem; 215 | } 216 | } 217 | } 218 | #contact { 219 | margin: auto; 220 | width: 100%; 221 | height: max-content; 222 | display: flex; 223 | flex-direction: column; 224 | align-items: center; 225 | padding: 30px; 226 | 227 | .content { 228 | text-align: center; 229 | font-family: "Source Sans Pro", sans-serif; 230 | p { 231 | font-size: 23px; 232 | margin-bottom: 10px; 233 | color: #5e80d2; 234 | } 235 | h2 { 236 | font-size: 33px; 237 | color: #1f3569; 238 | } 239 | } 240 | form { 241 | display: flex; 242 | justify-content: center; 243 | flex-direction: column; 244 | width: 600px; 245 | padding: 2rem; 246 | label { 247 | font-size: 18px; 248 | font-family: "Source Sans Pro", sans-serif; 249 | margin: 10px 0; 250 | } 251 | input { 252 | width: 100%; 253 | margin: 0.5rem 0; 254 | height: 50px; 255 | border: none; 256 | outline: none; 257 | border-radius: 4px; 258 | } 259 | textarea { 260 | width: 100%; 261 | margin: 0.5rem 0; 262 | border: none; 263 | outline: none; 264 | border-radius: 4px; 265 | } 266 | button { 267 | width: 100%; 268 | background: #1f3569; 269 | border: none; 270 | outline: none; 271 | color: white; 272 | margin: 8px 0 0 0; 273 | height: 50px; 274 | font-size: 18px; 275 | border-radius: 4px; 276 | } 277 | } 278 | } 279 | footer { 280 | width: 100vw; 281 | overflow: hidden; 282 | padding: 20px; 283 | font-family: "Source Sans Pro", sans-serif; 284 | background: #fff; 285 | margin: 0; 286 | .footer-content { 287 | display: flex; 288 | width: 100%; 289 | justify-content: center; 290 | flex-direction: column; 291 | text-align: center; 292 | h3 { 293 | font-size: 2rem; 294 | color: #1f3569; 295 | margin-bottom: 1rem; 296 | } 297 | p { 298 | font-size: 18px; 299 | color: #5e80d2; 300 | margin-bottom: 1rem; 301 | } 302 | } 303 | .socials { 304 | display: flex; 305 | justify-content: center; 306 | gap: 12px; 307 | li { 308 | list-style: none; 309 | 310 | a { 311 | text-decoration: none; 312 | font-size: 1.5rem; 313 | } 314 | .bi-facebook { 315 | color: #1877f2; 316 | } 317 | .bi-twitter { 318 | color: #1da1f2; 319 | } 320 | .bi-github { 321 | color: #181717; 322 | } 323 | .bi-youtube { 324 | color: #ff0000; 325 | } 326 | .bi-linkedin { 327 | color: #0a66c2; 328 | } 329 | } 330 | } 331 | } 332 | @media (max-width: 760px) { 333 | header { 334 | .navbar { 335 | margin: auto; 336 | text-align: center; 337 | background: white; 338 | box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); 339 | #checkbtn { 340 | display: block; 341 | } 342 | .menu-items { 343 | position: absolute; 344 | background: #1f3569; 345 | 346 | flex-direction: column; 347 | display: block; 348 | top: 90px; 349 | left: -100%; 350 | height: max-content; 351 | width: 100%; 352 | 353 | li { 354 | padding: 25px; 355 | a { 356 | color: white; 357 | } 358 | } 359 | } 360 | } 361 | } 362 | #hero { 363 | flex-direction: column; 364 | text-align: center; 365 | padding: 0; 366 | margin-top: 33px; 367 | height: max-content; 368 | .img { 369 | img { 370 | width: 370px; 371 | margin-top: 30px; 372 | } 373 | } 374 | } 375 | #features { 376 | padding: 0; 377 | margin-top: 33px; 378 | overflow: hidden; 379 | .content { 380 | h2 { 381 | padding: 10px; 382 | } 383 | img { 384 | width: 350px; 385 | } 386 | } 387 | .cards { 388 | grid-template-columns: repeat(1, 1fr); 389 | } 390 | } 391 | #services { 392 | padding: 0; 393 | margin-top: 33px; 394 | overflow: hidden; 395 | .content { 396 | h2 { 397 | padding: 10px; 398 | } 399 | } 400 | .cards { 401 | grid-template-columns: repeat(1, 1fr); 402 | place-items: center; 403 | } 404 | } 405 | #contact { 406 | padding: 0; 407 | margin-top: 33px; 408 | overflow: hidden; 409 | .content { 410 | h2 { 411 | padding: 10px; 412 | } 413 | } 414 | form { 415 | width: 350px; 416 | } 417 | } 418 | footer { 419 | padding: 0; 420 | padding-top: 20px; 421 | text-align: center; 422 | } 423 | } 424 | -------------------------------------------------------------------------------- /project-20_bubble_game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bubble Game 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

Hits

17 |

1

18 |
19 |
20 |

Time

21 |

30

22 |
23 |
24 |

Score

25 |

0

26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /project-20_bubble_game/index.js: -------------------------------------------------------------------------------- 1 | var timerValue = 30; 2 | var scoreValue = 0; 3 | var hitsValue = 0; 4 | const createBubble = () => { 5 | var contentbox = ''; 6 | for (let i = 1; i < 208; i++) { 7 | contentbox += `
${Math.floor(Math.random() * 10)}
`; 8 | 9 | } 10 | document.querySelector('.content').innerHTML = contentbox; 11 | } 12 | const setTimeing = () => { 13 | var timerNode = document.querySelector('.timer'); 14 | const timeInterval = setInterval(() => { 15 | if (timerValue > 0) { 16 | timerValue--; 17 | timerNode.textContent = timerValue; 18 | } 19 | else { 20 | clearInterval(timeInterval); 21 | document.querySelector('.content').innerHTML = '

Game Over

'; 22 | } 23 | }, 1000); 24 | } 25 | const hitsgenerate = () => { 26 | hitsValue = Math.floor(Math.random() * 10); 27 | console.log(hitsValue); 28 | document.querySelector('.hitsvalue').textContent = hitsValue; 29 | 30 | } 31 | const score = () => { 32 | scoreValue += 10; 33 | document.querySelector('.scoreValue').textContent = scoreValue; 34 | 35 | } 36 | 37 | document.querySelector('.content').addEventListener('click', (e) => { 38 | if (Number(e.target.textContent) === hitsValue) { 39 | score(); 40 | createBubble(); 41 | hitsgenerate(); 42 | } 43 | // console.log(Number(e.target.textContent)); 44 | }) 45 | const restartGame = () => { 46 | scoreValue = 0; 47 | document.querySelector('.scoreValue').textContent = scoreValue; 48 | timerValue = 30; 49 | createBubble(); 50 | setTimeing(); 51 | hitsgenerate(); 52 | } 53 | const Startingfun = () => { 54 | 55 | createBubble(); 56 | setTimeing(); 57 | hitsgenerate(); 58 | } 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /project-20_bubble_game/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | .main { 7 | background-color: aqua; 8 | width: 100vw; 9 | height: 100vh; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .outer-box { 16 | border: 2px solid black; 17 | width: 70vw; 18 | height: 59%; 19 | overflow: hidden; 20 | border-radius: 10px; 21 | } 22 | 23 | .navbar { 24 | background-color: #55a555; 25 | width: 100%; 26 | height: 15%; 27 | display: flex; 28 | justify-content: space-evenly; 29 | 30 | } 31 | 32 | .value-box { 33 | background-color: white; 34 | width: 30px; 35 | text-align: center; 36 | font-weight: 700; 37 | } 38 | 39 | .mr-2 h3, 40 | p { 41 | margin-top: 20px; 42 | display: inline-block; 43 | } 44 | 45 | .content { 46 | background-color: white; 47 | width: 100%; 48 | height: 100%; 49 | display: flex; 50 | flex-wrap: wrap; 51 | 52 | 53 | } 54 | 55 | .bubble { 56 | text-align: center; 57 | display: flex; 58 | align-items: center; 59 | justify-content: center; 60 | height: 30px; 61 | width: 30px; 62 | border: 1.5px solid black; 63 | border-radius: 50%; 64 | background-color: #55a555; 65 | margin: 5px 5px; 66 | 67 | } 68 | 69 | .bubble:hover { 70 | background-color: #40a140; 71 | cursor: pointer; 72 | } 73 | 74 | .gameOver { 75 | text-align: center; 76 | /* display: flex; */ 77 | /* justify-content: center; */ 78 | /* border: 2p x solid; */ 79 | /* align-items: center; */ 80 | position: absolute; 81 | top: 50%; 82 | left: 0; 83 | width: 100%; 84 | /* height: 80%; */ 85 | } 86 | 87 | .gameOver button { 88 | width: 16%; 89 | height: 40px; 90 | } 91 | 92 | .Starting { 93 | display: flex; 94 | justify-content: center; 95 | align-items: center; 96 | 97 | width: 100%; 98 | } 99 | 100 | .starting-text { 101 | width: 16%; 102 | height: 40px; 103 | } -------------------------------------------------------------------------------- /project-2_calculator/css/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | outline: none; 5 | box-sizing: border-box; 6 | } 7 | body { 8 | font-family: montserrat; 9 | display: flex; 10 | text-align: center; 11 | justify-content: center; 12 | align-items: center; 13 | min-height: 100vh; 14 | background: linear-gradient(#9cebfc, #6ae1fb); 15 | } 16 | .center { 17 | /* display: none; */ 18 | width: 350px; 19 | background: black; 20 | border-radius: 20px; 21 | } 22 | input[type="text"] { 23 | height: 60px; 24 | width: 300px; 25 | margin-top: 40px; 26 | border-radius: 1px; 27 | border: 1px solid #e1e7ea; 28 | color: black; 29 | font-size: 22px; 30 | font-weight: bold; 31 | text-align: right; 32 | padding-right: 20px; 33 | background: linear-gradient(#d1dce0, #dfe6e9); 34 | } 35 | form .buttons { 36 | width: 300px; 37 | margin: 10px 25px 0 25px; 38 | padding: 10px 0; 39 | } 40 | input[type="button"] { 41 | width: 58px; 42 | height: 55px; 43 | margin: 5px; 44 | font-size: 22px; 45 | line-height: 55px; 46 | border-radius: 3px; 47 | border: 1px solid #d9d9d9; 48 | background: linear-gradient(#d9d9d9, #bfbfbf); 49 | } 50 | input[type="button"]:hover { 51 | transition: 0.5s; 52 | background: linear-gradient(#bfbfbf, #d9d9d9); 53 | } 54 | input#clear { 55 | background: #ff1a1a; 56 | border: 1px solid #cc0000; 57 | color: white; 58 | } 59 | input#equal { 60 | width: 275px; 61 | margin: 10px 0 10px 0; 62 | font-size: 30px; 63 | color: white; 64 | background: #ff3d00; 65 | border: 1px solid #b32a00; 66 | } 67 | -------------------------------------------------------------------------------- /project-2_calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Calculator 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 |
35 | 41 |
42 |
43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /project-2_calculator/js/index.js: -------------------------------------------------------------------------------- 1 | const buttons = document.querySelectorAll("#btn"); 2 | const display = document.getElementById("display"); 3 | buttons.forEach((button) => { 4 | button.addEventListener("click", () => { 5 | display.value += button.value; 6 | }); 7 | }); -------------------------------------------------------------------------------- /project-3_wavy_login_form/css/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: steelblue; 9 | color: #fff; 10 | font-family: "Muli", sans-serif; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | height: 100vh; 16 | overflow: hidden; 17 | margin: 0; 18 | } 19 | .container { 20 | background-color: rgba(0, 0, 0, 0.3); 21 | padding: 20px 40px; 22 | border-radius: 5px; 23 | } 24 | .container h1 { 25 | text-align: center; 26 | margin-bottom: 30px; 27 | } 28 | .container form .form-control { 29 | position: relative; 30 | margin: 20px 0 40px; 31 | width: 300px; 32 | } 33 | .container form .form-control label { 34 | position: absolute; 35 | top: 15px; 36 | left: 0; 37 | } 38 | .container form .form-control label span { 39 | display: inline-block; 40 | font-size: 18px; 41 | min-width: 5px; 42 | transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 43 | } 44 | 45 | .container form .form-control input:focus + label span, 46 | .container form .form-control input:valid + label span { 47 | color: lightblue; 48 | transform: translateY(-30px); 49 | } 50 | .container form .form-control input { 51 | background-color: transparent; 52 | border: 0; 53 | border-bottom: 2px #fff solid; 54 | display: block; 55 | width: 100%; 56 | padding: 15px 0; 57 | font-size: 18px; 58 | color: #fff; 59 | outline: none; 60 | } 61 | .container form .form-control input:focus, 62 | .container form .form-control input:valid { 63 | outline: 0; 64 | border-bottom-color: lightblue; 65 | } 66 | .container form .btn { 67 | cursor: pointer; 68 | display: inline-block; 69 | width: 100%; 70 | background: lightblue; 71 | padding: 15px; 72 | font-family: inherit; 73 | font-size: 16px; 74 | border: 0; 75 | border-radius: 5px; 76 | } 77 | 78 | .container form .btn:focus { 79 | outline: 0; 80 | } 81 | 82 | .container form .btn:active { 83 | transform: scale(0.98); 84 | } 85 | .container form .text { 86 | margin-top: 30px; 87 | } 88 | .container form a { 89 | text-decoration: none; 90 | color: lightblue; 91 | } 92 | -------------------------------------------------------------------------------- /project-3_wavy_login_form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login Form 8 | 9 | 10 |
11 |

Login Form

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

Don't have an account? Register

24 |
25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /project-3_wavy_login_form/js/index.js: -------------------------------------------------------------------------------- 1 | const labels = document.querySelectorAll(".form-control label"); 2 | 3 | labels.forEach((label) => { 4 | label.innerHTML = label.innerText 5 | .split("") 6 | .map( 7 | (letter, idx) => 8 | `${letter}` 9 | 10 | ) 11 | .join(""); 12 | }); 13 | -------------------------------------------------------------------------------- /project-4_random_quote_generator/css/index.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 | body { 7 | background-color: #252525; 8 | font-family: "Roboto", sans-serif; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | margin: 0; 16 | padding: 20px; 17 | } 18 | .container { 19 | background-color: #fff; 20 | border-radius: 10px; 21 | 22 | padding: 50px 20px; 23 | text-align: center; 24 | max-width: 100%; 25 | width: 800px; 26 | } 27 | h3 { 28 | margin: 0; 29 | opacity: 0.5; 30 | letter-spacing: 2px; 31 | } 32 | 33 | .quote { 34 | font-size: 30px; 35 | letter-spacing: 1px; 36 | line-height: 40px; 37 | margin: 50px auto; 38 | max-width: 600px; 39 | } 40 | 41 | .btn { 42 | background-color: #1b1b1b; 43 | color: #fff; 44 | border: 0; 45 | border-radius: 10px; 46 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 47 | padding: 14px 40px; 48 | font-size: 16px; 49 | cursor: pointer; 50 | } 51 | 52 | .btn:active { 53 | transform: scale(0.98); 54 | } 55 | 56 | .btn:focus { 57 | outline: 0; 58 | } 59 | -------------------------------------------------------------------------------- /project-4_random_quote_generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Quote Generator 8 | 9 | 10 |
11 |

Today's Quote

12 |
loading.....
13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /project-4_random_quote_generator/js/index.js: -------------------------------------------------------------------------------- 1 | // Get the button element with ID "getbtn" 2 | const btn = document.getElementById("getbtn"); 3 | 4 | // Get the quote element with ID "quote" 5 | const QuoteElem = document.getElementById("quote"); 6 | 7 | // Fetch a random quote from the Quotable API 8 | const fetchData = async () => { 9 | QuoteElem.innerHTML = `

Loading...

`; 10 | // Send a request to the Quotable API to get a random quote 11 | let data = await fetch("https://api.quotable.io/random"); 12 | 13 | // Parse the response as JSON 14 | let json = await data.json(); 15 | 16 | // Set the text of the quote element to the content of the fetched quote 17 | QuoteElem.innerHTML = `

${json.content}

`; 18 | }; 19 | 20 | // Add an event listener to the button element that triggers the fetchData function when clicked 21 | btn.addEventListener("click", fetchData); 22 | 23 | // Call the fetchData function once to initially populate the quote element with a random quote 24 | fetchData(); 25 | -------------------------------------------------------------------------------- /project-5_random_color_changer/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | background-color: #81d4fa; 7 | } 8 | .btn { 9 | background: white; 10 | border-radius: 60px; 11 | outline: none; 12 | border: none; 13 | padding: 6px; 14 | height: 60px; 15 | width: 50%; 16 | font-size: 18px; 17 | font-weight: bold; 18 | } 19 | .btn:hover, 20 | .btn:active { 21 | box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); 22 | } 23 | -------------------------------------------------------------------------------- /project-5_random_color_changer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Color Changer 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /project-5_random_color_changer/js/index.js: -------------------------------------------------------------------------------- 1 | // Select the button element with the ID 'btn' 2 | const btn = document.getElementById("btn"); 3 | 4 | // Define a function to change the background color 5 | const changebg = () => { 6 | // Generate a random value between 0 and 255 for each color component (red, green, blue) 7 | const red = Math.floor(Math.random() * 256); 8 | const green = Math.floor(Math.random() * 256); 9 | const blue = Math.floor(Math.random() * 256); 10 | 11 | // Construct an RGB color string using the random values 12 | const rgbColor = `rgb(${red}, ${green}, ${blue})`; 13 | 14 | // Set the background color of the body to the random RGB color 15 | document.body.style.backgroundColor = rgbColor; 16 | }; 17 | 18 | // Call the changebg function once to set the initial background color 19 | changebg(); 20 | 21 | // Add an event listener to the button that calls the changebg function when clicked 22 | btn.addEventListener("click", changebg); 23 | -------------------------------------------------------------------------------- /project-6_qr_code_generator/css/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Lato", sans-serif; 7 | } 8 | 9 | body { 10 | background-color: #cad7d8; 11 | height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .container { 18 | max-width: 450px; 19 | width: 100%; 20 | padding: 20px; 21 | margin: 100px auto; 22 | background-color: #fff; 23 | border-radius: 8px; 24 | box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); 25 | } 26 | 27 | .container h1 { 28 | font-palette: 18px; 29 | background: #1b1b1b; 30 | font-weight: 300; 31 | padding: 25px 0; 32 | margin: -20px -20px 20px -20px; 33 | text-align: center; 34 | border-radius: 8px 8px 0 0; 35 | color: white; 36 | } 37 | 38 | .container form input { 39 | width: 100%; 40 | outline: none; 41 | border: 1.5px solid #ccc; 42 | height: 45px; 43 | border-radius: 3px; 44 | padding: 0 10px; 45 | background: #fff; 46 | margin-bottom: 0.7rem; 47 | font-size: 18px; 48 | } 49 | 50 | .container form button { 51 | width: 100%; 52 | outline: none; 53 | border: none; 54 | height: 45px; 55 | border-radius: 3px; 56 | padding: 0 10px; 57 | background: #1b1b1b; 58 | margin-bottom: 0.7rem; 59 | font-size: 18px; 60 | color: white; 61 | } 62 | 63 | .container form #qrcode-container { 64 | display: none; 65 | justify-content: center; 66 | } 67 | 68 | .container form .qrcode { 69 | padding: 10px; 70 | margin-bottom: 15px; 71 | } 72 | 73 | .container form .qrcode img { 74 | margin: 0 auto; 75 | box-shadow: 0 2px 3px rgba(67, 67, 68, 0.25); 76 | padding: 4px; 77 | } 78 | -------------------------------------------------------------------------------- /project-6_qr_code_generator/css/index.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Lato", sans-serif; 7 | } 8 | body { 9 | background-color: rgb(202, 215, 216); 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | .container { 16 | max-width: 450px; 17 | width: 100%; 18 | padding: 20px; 19 | margin: 100px auto; 20 | background-color: #fff; 21 | border-radius: 8px; 22 | box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); 23 | h1 { 24 | font-palette: 18px; 25 | background: #1b1b1b; 26 | font-weight: 300; 27 | padding: 25px 0; 28 | margin: -20px -20px 20px -20px; 29 | text-align: center; 30 | border-radius: 8px 8px 0 0; 31 | color: rgb(255, 255, 255); 32 | } 33 | form { 34 | input { 35 | width: 100%; 36 | outline: none; 37 | border: 1.5px solid #ccc; 38 | height: 45px; 39 | border-radius: 3px; 40 | padding: 0 10px; 41 | background: #fff; 42 | margin-bottom: 0.7rem; 43 | font-size: 18px; 44 | } 45 | button { 46 | width: 100%; 47 | outline: none; 48 | border: none; 49 | height: 45px; 50 | border-radius: 3px; 51 | padding: 0 10px; 52 | background: #1b1b1b; 53 | margin-bottom: 0.7rem; 54 | font-size: 18px; 55 | color: white; 56 | } 57 | #qrcode-container { 58 | display: none; 59 | justify-content: center; 60 | } 61 | 62 | .qrcode { 63 | padding: 10px; 64 | margin-bottom: 15px; 65 | } 66 | .qrcode img { 67 | margin: 0 auto; 68 | box-shadow: 0 2px 3px rgba(67, 67, 68, 0.25); 69 | padding: 4px; 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /project-6_qr_code_generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Qr Code Generator 9 | 10 | 11 |
12 |

Qr Code Generator

13 |
14 | 20 |
21 |
22 | qrcode 23 |
24 |
25 | 26 |
27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /project-6_qr_code_generator/js/index.js: -------------------------------------------------------------------------------- 1 | // Selecting the necessary DOM elements 2 | const input = document.getElementById("inp"); 3 | const qrcodeContainer = document.getElementById("qrcode-container"); 4 | const qrimg = document.getElementById("qrimg"); 5 | const btn = document.getElementById("btn"); 6 | 7 | // Add an event listener to the button that triggers the creation of the QR code 8 | btn.addEventListener("click", () => { 9 | // Check if the input field has a value 10 | if (input.value) { 11 | // If the input field has a value, set the source of the QR code image to a URL that will create the QR code 12 | // using the input field's value as the data for the QR code. Set the size of the QR code to 300x150 pixels. 13 | qrimg.setAttribute( 14 | "src", 15 | `https://api.qrserver.com/v1/create-qr-code/?size=300x150&data=${input.value}` 16 | ); 17 | 18 | // Show the container element that holds the QR code image by setting its display style to "flex" 19 | qrcodeContainer.style.display = "flex"; 20 | } else { 21 | // If the input field does not have a value, show an alert message asking the user to enter text 22 | alert("Please Enter Text!"); 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /project-7_stopwatch_timer/css/index.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | height: 100vh; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | background-color: steelblue; 8 | } 9 | .stopwatch { 10 | text-align: center; 11 | background: rgba(0, 0, 0, 0.3); 12 | padding: 30px 0; 13 | max-width: 430px; 14 | width: 100%; 15 | border-radius: 8px; 16 | } 17 | h2 { 18 | font-weight: 300; 19 | color: white; 20 | } 21 | .stopwatch h1 { 22 | font-size: 50px; 23 | font-weight: 300; 24 | color: white; 25 | } 26 | 27 | button { 28 | cursor: pointer; 29 | display: inline-block; 30 | margin: 0 10px; 31 | background: lightblue; 32 | padding: 15px; 33 | font-family: inherit; 34 | font-size: 16px; 35 | border: 0; 36 | border-radius: 5px; 37 | } 38 | -------------------------------------------------------------------------------- /project-7_stopwatch_timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Stopwatch Timer 8 | 9 | 10 |
11 |

Stopwatch

12 |

00:00:00

13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /project-7_stopwatch_timer/js/index.js: -------------------------------------------------------------------------------- 1 | // select elements from the DOM 2 | const stopwatchEl = document.querySelector(".stopwatch"); 3 | const timerEl = stopwatchEl.querySelector(".timer"); 4 | const startBtn = document.getElementById("start"); 5 | const stopBtn = document.getElementById("stop"); 6 | const resetBtn = document.getElementById("reset"); 7 | 8 | // initialize timer variables 9 | let startTime, 10 | elapsedTime = 0, 11 | intervalId; 12 | 13 | // function to pad numbers with zeros 14 | function pad(num, places) { 15 | return String(num).padStart(places, "0"); 16 | } 17 | 18 | // function to display the timer 19 | function displayTimer() { 20 | let minutes = Math.floor(elapsedTime / 60000); 21 | let seconds = Math.floor((elapsedTime % 60000) / 1000); 22 | let milliseconds = Math.floor((elapsedTime % 1000) / 10); 23 | timerEl.textContent = `${pad(minutes, 2)}:${pad(seconds, 2)}:${pad( 24 | milliseconds, 25 | 2 26 | )}`; 27 | } 28 | 29 | // function to start the timer 30 | function startTimer() { 31 | startTime = Date.now() - elapsedTime; 32 | intervalId = setInterval(() => { 33 | elapsedTime = Date.now() - startTime; 34 | displayTimer(); 35 | }, 10); 36 | startBtn.disabled = true; 37 | stopBtn.disabled = false; 38 | resetBtn.disabled = false; 39 | } 40 | 41 | // function to stop the timer 42 | function stopTimer() { 43 | clearInterval(intervalId); 44 | startBtn.disabled = false; 45 | stopBtn.disabled = true; 46 | } 47 | 48 | // function to reset the timer 49 | function resetTimer() { 50 | clearInterval(intervalId); 51 | elapsedTime = 0; 52 | displayTimer(); 53 | startBtn.disabled = false; 54 | stopBtn.disabled = true; 55 | resetBtn.disabled = true; 56 | } 57 | 58 | // add event listeners to the buttons 59 | startBtn.addEventListener("click", startTimer); 60 | stopBtn.addEventListener("click", stopTimer); 61 | resetBtn.addEventListener("click", resetTimer); -------------------------------------------------------------------------------- /project-8_password_generator/css/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | background: steelblue; 13 | font-family: "Poppins", sans-serif; 14 | } 15 | .container { 16 | position: relative; 17 | max-width: 350px; 18 | width: 100%; 19 | background: #f1f1f1; 20 | border-radius: 12px; 21 | padding: 30px 25px; 22 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 23 | } 24 | .container .input-box { 25 | position: relative; 26 | height: 50px; 27 | } 28 | .container .input-box input { 29 | height: 100%; 30 | width: 100%; 31 | border-radius: 8px; 32 | padding: 0 45px 0 15px; 33 | border: 1px solid #aaa; 34 | background-color: transparent; 35 | outline: none; 36 | } 37 | .container .input-box #copy-btn { 38 | position: absolute; 39 | right: 15px; 40 | top: 50%; 41 | color: #707070; 42 | font-size: 20px; 43 | cursor: pointer; 44 | transform: translateY(-50%); 45 | } 46 | .container .range-box { 47 | display: flex; 48 | align-items: center; 49 | margin-top: 20px; 50 | } 51 | .container .range-box input { 52 | width: 100%; 53 | height: 5px; 54 | accent-color: steelblue; 55 | cursor: pointer; 56 | } 57 | .container .range-box .slider-number { 58 | min-width: 30px; 59 | text-align: right; 60 | font-size: 17px; 61 | color: #707070; 62 | } 63 | .container button { 64 | width: 100%; 65 | color: #fff; 66 | padding: 12px 0; 67 | margin-top: 20px; 68 | background: steelblue; 69 | border: none; 70 | border-radius: 8px; 71 | cursor: pointer; 72 | transition: all 0.2s ease; 73 | } 74 | -------------------------------------------------------------------------------- /project-8_password_generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 16 | 17 | Password Generator 18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 |
26 | 27 | 8 28 |
29 | 32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /project-8_password_generator/js/index.js: -------------------------------------------------------------------------------- 1 | // Selecting Element 2 | const passwordInput = document.getElementById("passwordInput"); 3 | const copyBtn = document.getElementById("copy-btn"); 4 | const rangeSlider = document.getElementById("range"); 5 | const sliderNumber = document.getElementById("slider-number"); 6 | const generatBtn = document.getElementById("generate-button"); 7 | 8 | //Generate Password Function 9 | const generatePass = () => { 10 | let newpass = ""; 11 | let all = 12 | "abcdefghijklmnopqrstubwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890()[]<>&%@#"; 13 | for (let i = 0; i < rangeSlider.value; i++) { 14 | newpass += all[Math.floor(Math.random() * all.length)]; 15 | } 16 | passwordInput.value = newpass; 17 | }; 18 | 19 | //Calling The Function On Page Load 20 | generatePass(); 21 | 22 | //Copy Button Click Event Handle 23 | copyBtn.addEventListener("click", () => { 24 | passwordInput.select(); 25 | document.execCommand("copy"); 26 | //Change The Icon After Copy 27 | copyBtn.setAttribute("class", "far fa-clipboard"); 28 | 29 | }); 30 | 31 | //Slider Slide Input Event Handle 32 | rangeSlider.addEventListener("input", () => { 33 | sliderNumber.textContent = rangeSlider.value; 34 | }); 35 | 36 | //Genearte Button Click Event Handle 37 | generatBtn.addEventListener("click", generatePass); 38 | -------------------------------------------------------------------------------- /project-9_responsive_navbar/css/index.css: -------------------------------------------------------------------------------- 1 | /* Import font */ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | body { 9 | height: 100vh; 10 | background: #047aed; 11 | font-family: "Poppins", sans-serif; 12 | } 13 | .navbar { 14 | width: 100vw; 15 | height: 74px; 16 | background-color: #1b1b1b; 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | padding: 0 20px; 21 | } 22 | .navbar .logo { 23 | color: #fff; 24 | font-weight: 300; 25 | } 26 | .navbar .logo h1 span { 27 | color: red; 28 | } 29 | .navbar #toggler { 30 | display: none; 31 | } 32 | 33 | .navbar .burger { 34 | position: relative; 35 | width: 56px; 36 | height: 55px; 37 | border-radius: 3px; 38 | cursor: pointer; 39 | display: none; 40 | } 41 | 42 | .navbar .bun { 43 | position: absolute; 44 | width: 30px; 45 | height: 30px; 46 | top: 9px; 47 | left: 9px; 48 | transition: transform 0.18s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.15s; 49 | } 50 | 51 | .navbar .bun__crust { 52 | position: absolute; 53 | display: block; 54 | width: 17px; 55 | height: 1px; 56 | background-color: #fff; 57 | border-radius: 1px; 58 | left: 7px; 59 | transition: transform 0.1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) 0.2s; 60 | } 61 | 62 | .navbar .bun__crust--top { 63 | top: 14px; 64 | 65 | transform: translateY(-3px); 66 | } 67 | 68 | .navbar .bun__crust--bottom { 69 | bottom: 14px; 70 | 71 | transform: translateY(3px); 72 | } 73 | 74 | .navbar #toggler:checked + .burger .bun--top { 75 | transform: rotate(45deg); 76 | } 77 | 78 | .navbar #toggler:checked + .burger .bun--bottom { 79 | transform: rotate(-45deg); 80 | } 81 | 82 | .navbar #toggler:checked + .burger .bun__crust--top, 83 | .navbar #toggler:checked + .burger .bun__crust--bottom { 84 | transform: none; 85 | transition: transform 0.1806s cubic-bezier(0.04, 0.04, 0.12, 0.96); 86 | } 87 | .navbar #toggler:checked ~ ul { 88 | left: 50%; 89 | } 90 | .navbar ul { 91 | display: flex; 92 | list-style-type: none; 93 | transition: 0.4s ease-in-out; 94 | } 95 | .navbar ul li { 96 | padding: 0 20px; 97 | } 98 | .navbar ul li a { 99 | text-decoration: none; 100 | color: #fff; 101 | } 102 | .navbar ul li a:hover { 103 | color: red; 104 | } 105 | 106 | /*For Responsiveness */ 107 | @media (max-width: 760px) { 108 | .navbar .burger { 109 | display: block; 110 | } 111 | .navbar ul { 112 | position: absolute; 113 | flex-direction: column; 114 | align-items: center; 115 | top: 74px; 116 | left: -100%; 117 | transform: translateX(-50%); 118 | 119 | width: 100%; 120 | background: #1b1b1b; 121 | } 122 | .navbar ul li { 123 | margin: 1.5rem 0; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /project-9_responsive_navbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Responsive Navbar 10 | 11 | 12 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /project-9_responsive_navbar/js/index.js: -------------------------------------------------------------------------------- 1 | //in this project we've not used javascript 2 | -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | https://armanidrisi.github.io/frontend-projects/ 5 | 6 | 7 | https://armanidrisi.github.io/frontend-projects/project-18_toggle_dark_light_mode 8 | 9 | 10 | https://armanidrisi.github.io/frontend-projects/project-17_remove_Signature_bg 11 | 12 | 13 | https://armanidrisi.github.io/frontend-projects/project-16_pricing_component 14 | 15 | 16 | https://armanidrisi.github.io/frontend-projects/project-15_currrency_convertor 17 | 18 | 19 | https://armanidrisi.github.io/frontend-projects/project-14_music_loader 20 | 21 | 22 | https://armanidrisi.github.io/frontend-projects/project-13_profile_card 23 | 24 | 25 | https://armanidrisi.github.io/frontend-projects/project-12_contact_form 26 | 27 | 28 | https://armanidrisi.github.io/frontend-projects/project-11_analog_clock 29 | 30 | 31 | https://armanidrisi.github.io/frontend-projects/project-10_404_error_page 32 | 33 | 34 | https://armanidrisi.github.io/frontend-projects/project-9_responsive_navbar 35 | 36 | 37 | https://armanidrisi.github.io/frontend-projects/project-8_password_generator 38 | 39 | 40 | https://armanidrisi.github.io/frontend-projects/project-6_qr_code_generator 41 | 42 | 43 | https://armanidrisi.github.io/frontend-projects/project-7_stopwatch_timer 44 | 45 | 46 | https://armanidrisi.github.io/frontend-projects/project-5_random_color_changer 47 | 48 | 49 | https://armanidrisi.github.io/frontend-projects/project-4_random_quote_generator 50 | 51 | 52 | https://armanidrisi.github.io/frontend-projects/project-3_wavy_login_form 53 | 54 | 55 | https://armanidrisi.github.io/frontend-projects/project-2_calculator 56 | 57 | 58 | https://armanidrisi.github.io/frontend-projects/project-1_landing-page 59 | 60 | --------------------------------------------------------------------------------