Form Validation

├── Background-property-images ├── README.md ├── cute-bear.png ├── cute-girl.jpg ├── kitty-idea.png └── kitty.png ├── Form-Validation ├── README.md ├── images │ ├── illustration.svg │ └── logo.svg ├── index.html ├── main.js └── style.css ├── LICENSE ├── Media-Query-Project ├── Portrait.png ├── README.md ├── behance.png ├── dribbble-logo.png ├── instagram.png └── twitter-sign.png └── README.md /Background-property-images/README.md: -------------------------------------------------------------------------------- 1 | # Image-Hosting 2 | 3 | ## To download just 1 single folder, 4 | * go to the desired folder, 5 | * copy the url, 6 | * go to [downgit](https://minhaskamal.github.io/DownGit/#/home) & 7 | * follow the steps on the video 👇 -> 8 | 9 | ![](https://cloud.githubusercontent.com/assets/5456665/17822364/940bded8-6678-11e6-9603-b84d75bccec1.gif) 10 | 11 | 12 | 13 | # Project Part of This Video 14 | 15 | https://youtu.be/hwJKjsZUPjY 16 | 17 | [![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/hwJKjsZUPjY/maxresdefault.jpg 18 | )](https://youtu.be/hwJKjsZUPjY) 19 | 20 | 21 | ## Image credits : 22 | 23 | * [cute-girl](https://www.pexels.com/photo/woman-lying-on-plants-2125610/) 24 | * [cute-bear](https://www.freepik.com/free-vector/cute-bear-is-happy-cartoon-illustration_12341167.htm#position=4) 25 | * [kitty-avatar](https://www.flaticon.com/packs/kitty-avatars-3) 26 | -------------------------------------------------------------------------------- /Background-property-images/cute-bear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/Project-image-repo/e2aa9d5d409b28efe7040e4b92da891c64ee23ce/Background-property-images/cute-bear.png -------------------------------------------------------------------------------- /Background-property-images/cute-girl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/Project-image-repo/e2aa9d5d409b28efe7040e4b92da891c64ee23ce/Background-property-images/cute-girl.jpg -------------------------------------------------------------------------------- /Background-property-images/kitty-idea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/Project-image-repo/e2aa9d5d409b28efe7040e4b92da891c64ee23ce/Background-property-images/kitty-idea.png -------------------------------------------------------------------------------- /Background-property-images/kitty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/Project-image-repo/e2aa9d5d409b28efe7040e4b92da891c64ee23ce/Background-property-images/kitty.png -------------------------------------------------------------------------------- /Form-Validation/README.md: -------------------------------------------------------------------------------- 1 | # Image-Hosting 2 | 3 | This Repository contains project images for learners to work with. 4 | Belongs to [Joy Shaheb YouTube Channel](https://www.youtube.com/c/JoyShaheb) 5 | 6 | ## To download just 1 single folder, 7 | 8 | - go to the desired folder, 9 | - copy the url, 10 | - go to [downgit](https://minhaskamal.github.io/DownGit/#/home) & 11 | - follow the steps on the video 👇 -> 12 | 13 | ![](https://cloud.githubusercontent.com/assets/5456665/17822364/940bded8-6678-11e6-9603-b84d75bccec1.gif) 14 | -------------------------------------------------------------------------------- /Form-Validation/images/illustration.svg: -------------------------------------------------------------------------------- 1 | 247 | -------------------------------------------------------------------------------- /Form-Validation/images/logo.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /Form-Validation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Form Validation 15 | 16 | 17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 | Start for free & get
25 | attractive offers today ! 26 |

27 |

28 |

29 | 53 | 54 | 57 | 58 |

59 | User Name 60 | 61 | 67 | 68 | 69 |

70 |

71 | 72 | 75 | 76 |

77 | Email 78 | 79 | 85 | 86 | 87 |

88 |

89 | 90 | 93 | 94 |

95 | Password 96 | 97 | 103 | 104 | 105 |

106 |

107 | 108 | 109 |

110 |

111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /Form-Validation/main.js: -------------------------------------------------------------------------------- 1 | let id = (id) => document.getElementById(id); 2 | 3 | let classes = (classes) => document.getElementsByClassName(classes); 4 | 5 | let username = id("username"), 6 | email = id("email"), 7 | password = id("password"), 8 | form = id("form"), 9 | errorMsg = classes("error"), 10 | successIcon = classes("success-icon"), 11 | failureIcon = classes("failure-icon"); 12 | 13 | form.addEventListener("submit", (e) => { 14 | e.preventDefault(); 15 | 16 | engine(username, 0, "Username cannot be blank"); 17 | engine(email, 1, "Email cannot be blank"); 18 | engine(password, 2, "Password cannot be blank"); 19 | }); 20 | 21 | let engine = (id, serial, message) => { 22 | if (id.value.trim() === "") { 23 | errorMsg[serial].innerHTML = message; 24 | id.style.border = "2px solid red"; 25 | 26 | // icons 27 | failureIcon[serial].style.opacity = "1"; 28 | successIcon[serial].style.opacity = "0"; 29 | } else { 30 | errorMsg[serial].innerHTML = ""; 31 | id.style.border = "2px solid green"; 32 | 33 | // icons 34 | failureIcon[serial].style.opacity = "0"; 35 | successIcon[serial].style.opacity = "1"; 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /Form-Validation/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * ! changing default styles of brower 3 | **/ 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: sans-serif; 13 | } 14 | 15 | .container { 16 | display: flex; 17 | flex-direction: row; 18 | } 19 | 20 | /** 21 | * ! style rules for content section 22 | **/ 23 | 24 | .content { 25 | display: flex; 26 | flex-direction: column; 27 | justify-content: space-around; 28 | background-color: #f2796e; 29 | width: 55%; 30 | min-height: 100vh; 31 | padding: 10px 20px; 32 | } 33 | 34 | .image { 35 | background-image: url("./images/illustration.svg"); 36 | background-repeat: no-repeat; 37 | background-size: contain; 38 | background-position: center; 39 | /* border: 2px solid black; */ 40 | height: 65%; 41 | } 42 | 43 | .text { 44 | text-align: center; 45 | color: white; 46 | font-size: 18px; 47 | } 48 | 49 | /** 50 | * ! style rules for form section 51 | **/ 52 | 53 | form { 54 | display: flex; 55 | flex-direction: column; 56 | justify-content: center; 57 | width: 45%; 58 | /* max-width: 400px; */ 59 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); 60 | padding: 50px; 61 | } 62 | 63 | .title { 64 | font-size: 25px; 65 | font-weight: bold; 66 | margin-bottom: 20px; 67 | } 68 | 69 | form div input { 70 | width: 100%; 71 | height: 40px; 72 | border-radius: 8px; 73 | outline: none; 74 | border: 2px solid #c4c4c4; 75 | padding: 0 30px; 76 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); 77 | } 78 | 79 | label { 80 | display: block; 81 | margin-bottom: 5px; 82 | } 83 | 84 | form div { 85 | position: relative; 86 | margin-bottom: 15px; 87 | } 88 | 89 | input:focus { 90 | border: 2px solid #f2796e; 91 | } 92 | 93 | /** 94 | * ! style rules for social section 95 | **/ 96 | 97 | .btn { 98 | display: flex; 99 | flex-direction: row; 100 | justify-content: space-between; 101 | gap: 15px; 102 | } 103 | 104 | .btn-1, 105 | .btn-2 { 106 | padding: 10px 5px; 107 | width: 100%; 108 | display: flex; 109 | gap: 15px; 110 | justify-content: center; 111 | align-items: center; 112 | border: 2px solid #c4c4c4; 113 | border-radius: 8px; 114 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); 115 | cursor: pointer; 116 | } 117 | 118 | .btn-2 { 119 | background-color: #4f70b5; 120 | color: white; 121 | } 122 | 123 | .or { 124 | text-align: center; 125 | } 126 | 127 | .question { 128 | font-size: 15px; 129 | } 130 | 131 | span { 132 | color: #f2796e; 133 | cursor: pointer; 134 | } 135 | 136 | /** 137 | * ! style rules for form icons 138 | **/ 139 | 140 | form div i { 141 | position: absolute; 142 | padding: 10px; 143 | } 144 | 145 | .success-icon, 146 | .failure-icon { 147 | right: 0; 148 | opacity: 0; 149 | } 150 | 151 | .failure-icon, 152 | .error { 153 | color: red; 154 | } 155 | 156 | .success-icon { 157 | color: green; 158 | } 159 | 160 | .error { 161 | font-size: 14.5px; 162 | margin-top: 5px; 163 | } 164 | 165 | /** 166 | * ! style rules for button 167 | **/ 168 | 169 | button { 170 | margin-top: 15px; 171 | width: 100%; 172 | height: 45px; 173 | background-color: #f2796e; 174 | border: 2px solid #f2796e; 175 | border-radius: 8px; 176 | color: #fff; 177 | font-size: 20px; 178 | cursor: pointer; 179 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); 180 | transition: all 0.1s ease; 181 | } 182 | 183 | button:hover { 184 | opacity: 0.8; 185 | } 186 | 187 | /** 188 | * ! Media Queries are here 189 | **/ 190 | 191 | @media (max-width: 900px) { 192 | .container { 193 | flex-direction: column; 194 | } 195 | 196 | form, 197 | .content { 198 | width: 100%; 199 | } 200 | 201 | .btn { 202 | flex-direction: column; 203 | } 204 | .image { 205 | height: 70vh; 206 | } 207 | } 208 | 209 | @media (max-width: 425px) { 210 | form { 211 | padding: 20px; 212 | } 213 | } 214 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 JoyShaheb 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Media-Query-Project/Portrait.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/Project-image-repo/e2aa9d5d409b28efe7040e4b92da891c64ee23ce/Media-Query-Project/Portrait.png -------------------------------------------------------------------------------- /Media-Query-Project/README.md: -------------------------------------------------------------------------------- 1 | # Image-Hosting 2 | 3 | ## To download just 1 single folder, 4 | * go to the desired folder, 5 | * copy the url, 6 | * go to [downgit](https://minhaskamal.github.io/DownGit/#/home) & 7 | * follow the steps on the video 👇 -> 8 | 9 | ![Video Instruction](https://cloud.githubusercontent.com/assets/5456665/17822364/940bded8-6678-11e6-9603-b84d75bccec1.gif) 10 | 11 | 12 | # Project Part of This Video 13 | 14 | https://youtu.be/HY8q4TD3KGM 15 | 16 | [![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/HY8q4TD3KGM/maxresdefault.jpg 17 | )](https://youtu.be/HY8q4TD3KGM) 18 | 19 | 20 | ## Image credits : 21 | 22 | * [Portrait](https://www.pexels.com/photo/woman-wearing-brown-bucket-cap-732425/) 23 | * [Dribbble icon](https://www.flaticon.com/free-icon/dribbble-logo_87400) 24 | * [Behance icon](https://www.flaticon.com/free-icon/behance_254383) 25 | * [Twitter icon](https://www.flaticon.com/free-icon/twitter-sign_25347) 26 | * [Instagram icon](https://www.flaticon.com/free-icon/instagram_1384031) 27 | -------------------------------------------------------------------------------- /Media-Query-Project/behance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/Project-image-repo/e2aa9d5d409b28efe7040e4b92da891c64ee23ce/Media-Query-Project/behance.png -------------------------------------------------------------------------------- /Media-Query-Project/dribbble-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/Project-image-repo/e2aa9d5d409b28efe7040e4b92da891c64ee23ce/Media-Query-Project/dribbble-logo.png -------------------------------------------------------------------------------- /Media-Query-Project/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/Project-image-repo/e2aa9d5d409b28efe7040e4b92da891c64ee23ce/Media-Query-Project/instagram.png -------------------------------------------------------------------------------- /Media-Query-Project/twitter-sign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/Project-image-repo/e2aa9d5d409b28efe7040e4b92da891c64ee23ce/Media-Query-Project/twitter-sign.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Image-Hosting 2 | 3 | This Repository contains project images for learners to work with. 4 | Belongs to [Joy Shaheb YouTube Channel](https://www.youtube.com/c/JoyShaheb) 5 | 6 | ## To download just 1 single folder, 7 | * go to the desired folder, 8 | * copy the url, 9 | * go to [downgit](https://minhaskamal.github.io/DownGit/#/home) & 10 | * follow the steps on the video 👇 -> 11 | 12 | ![](https://cloud.githubusercontent.com/assets/5456665/17822364/940bded8-6678-11e6-9603-b84d75bccec1.gif) 13 | --------------------------------------------------------------------------------