├── Profile Picture ├── index.html ├── script.js └── styles.css ├── README.md ├── ShowHidePassword ├── index.html ├── script.js └── styles.css ├── images ├── defaultprofile.png └── images.png ├── index.html ├── readme.txt └── style.css /Profile Picture/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Add profile Image 7 | 11 | 12 | 13 | 14 |
15 |

Add Profile Photo

16 | 17 |
18 | 19 | 22 | 23 | 29 |
30 | 31 |

Back to All project

32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Profile Picture/script.js: -------------------------------------------------------------------------------- 1 | const profilePic = document.querySelector(".image img "); 2 | const userFile = document.querySelector(".user-file"); 3 | 4 | userFile.onchange = function () { 5 | profilePic.src = URL.createObjectURL(userFile.files[0]); 6 | }; 7 | -------------------------------------------------------------------------------- /Profile Picture/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | width: 100%; 9 | height: 100vh; 10 | background-color: #d2d1d3; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | font-family: Arial, Helvetica, sans-serif; 15 | } 16 | 17 | .wrapper { 18 | background-color: #fff; 19 | padding: 3% 5%; 20 | border-radius: 7px; 21 | display: flex; 22 | flex-direction: column; 23 | justify-content: center; 24 | align-items: center; 25 | } 26 | 27 | .image img { 28 | width: 200px; 29 | height: 200px; 30 | object-fit: cover; 31 | border-radius: 50%; 32 | cursor: pointer; 33 | } 34 | 35 | #file-path { 36 | display: none; 37 | } 38 | 39 | .wrapper h2 { 40 | margin-bottom: 20px; 41 | } 42 | 43 | .image { 44 | position: relative; 45 | } 46 | 47 | .image label { 48 | position: absolute; 49 | top: 10px; 50 | right: 13px; 51 | background-color: #1b74e4; 52 | color: #fff; 53 | width: 40px; 54 | height: 40px; 55 | display: flex; 56 | align-items: center; 57 | justify-content: center; 58 | border-radius: 50%; 59 | cursor: pointer; 60 | opacity: 0; 61 | pointer-events: none; 62 | transition: all 0.3s; 63 | } 64 | 65 | .image:hover label { 66 | opacity: 1; 67 | pointer-events: all; 68 | } 69 | 70 | .back { 71 | margin-top: 20px; 72 | } 73 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Javascript-everyday 2 | 3 | Here I practice Javascript Code 4 | 5 | !. profile Image Change 6 | -------------------------------------------------------------------------------- /ShowHidePassword/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 15 | 16 | 17 |
18 |

Enter Your Password

19 |
20 | 28 |
29 | 30 |

Back to All project

31 |
32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /ShowHidePassword/script.js: -------------------------------------------------------------------------------- 1 | var state = false; 2 | function toggle() { 3 | if (state) { 4 | document.getElementById("password").setAttribute("type", "Password"); 5 | document.getElementById("eye").style.color = "#7a797e"; 6 | state = false; 7 | console.log("hello"); 8 | } else { 9 | document.getElementById("password").setAttribute("type", "text"); 10 | document.getElementById("eye").style.color = "#5887ef"; 11 | state = true; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /ShowHidePassword/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | background-color: #5887ef; 6 | } 7 | 8 | .container { 9 | position: relative; 10 | min-height: 100vh; 11 | width: 100%; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | 18 | .wrapper { 19 | position: absolute; 20 | transform: translate(-50%, -50%); 21 | top: 50%; 22 | left: 50%; 23 | width: 300px; 24 | font-family: sans-serif; 25 | font-family: 600; 26 | } 27 | 28 | input { 29 | width: 100%; 30 | font-size: 20px; 31 | border: none; 32 | padding: 10px 10px; 33 | border-radius: 3px; 34 | line-height: 18px; 35 | color: #4a4a4a; 36 | letter-spacing: 0.5px; 37 | box-shadow: 0 5px 30px rgba(22, 89, 233, 0.4); 38 | } 39 | 40 | input:focus { 41 | outline: none; 42 | } 43 | h3 { 44 | color: white; 45 | text-align: center; 46 | font-family: Arial, Helvetica, sans-serif; 47 | } 48 | 49 | ::placeholder { 50 | color: #9a9a9a; 51 | font-weight: 400; 52 | } 53 | 54 | span { 55 | position: absolute; 56 | right: 15px; 57 | transform: translate(0, -50%); 58 | top: 50%; 59 | cursor: pointer; 60 | } 61 | 62 | .fa { 63 | font-size: 20px; 64 | color: #7a797e; 65 | } 66 | 67 | .back { 68 | margin-top: 100px; 69 | color: white; 70 | } 71 | 72 | a { 73 | color: white; 74 | font-family: serif; 75 | } 76 | -------------------------------------------------------------------------------- /images/defaultprofile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seo-asif/Javascript-everyday/b8fddce7d53f6a3c556157b049b944d45eb010b7/images/defaultprofile.png -------------------------------------------------------------------------------- /images/images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seo-asif/Javascript-everyday/b8fddce7d53f6a3c556157b049b944d45eb010b7/images/images.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Javascript EveryDay 7 | 8 | 9 | 10 |
11 |

All Javascript Project Link

12 |
    13 |
  1. 14 | Add a Profile Picture 15 |
    2. 16 |
  2. 17 | Show/Hide Password 18 |
    3. 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | asdadad -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | width: 100%; 9 | height: 100vh; 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | align-items: center; 14 | font-family: Arial, Helvetica, sans-serif; 15 | background-color: #5887ef; 16 | } 17 | 18 | .wrapper { 19 | height: 100vh; 20 | width: 100%; 21 | background-color: #fff; 22 | padding: 3% 5%; 23 | border-radius: 7px; 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: center; 27 | align-items: center; 28 | background-color: #c5d8ff; 29 | } 30 | 31 | .wrapper h2 { 32 | margin-bottom: 20px; 33 | } 34 | 35 | li { 36 | margin-top: 20px; 37 | } 38 | 39 | a { 40 | color: black; 41 | font-family: sans-serif; 42 | } 43 | --------------------------------------------------------------------------------