├── .vscode └── settings.json ├── README.md ├── card-design-1 ├── images │ ├── image1.jpg │ ├── image2.jpg │ └── image3.jpg ├── index.html └── style.css ├── card-design-2 ├── index.html └── style.css ├── card-team-design ├── images │ ├── Islam_Anisul.jpg │ ├── Lisa_Milton.jpg │ ├── Usman_Islam.jpg │ └── allef-vinicius.jpg ├── index.html └── style.css ├── contact-form-submit ├── index.html └── style.css ├── dog-api ├── index.html ├── index.js └── style.css ├── dyanmic-card ├── index.html ├── index.js └── style.css ├── faq-design ├── index.html ├── main.js └── style.css ├── guessing-game ├── index.html ├── index.js └── style.css ├── learnings.txt ├── slideshow-demo ├── index.html ├── script.js └── style.css ├── swiper-slider ├── index.html ├── main.js └── style.css ├── todo-app ├── css │ └── style.css ├── html │ └── index.html └── js │ ├── classes │ └── Todo.js │ └── index.js └── user-preference ├── index.html ├── index.js └── style.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-JS Mini Projects or styles 2 | -------------------------------------------------------------------------------- /card-design-1/images/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/html-css-javascript-projects/17405031308aebea9e9d6acc1568196b793e39e8/card-design-1/images/image1.jpg -------------------------------------------------------------------------------- /card-design-1/images/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/html-css-javascript-projects/17405031308aebea9e9d6acc1568196b793e39e8/card-design-1/images/image2.jpg -------------------------------------------------------------------------------- /card-design-1/images/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/html-css-javascript-projects/17405031308aebea9e9d6acc1568196b793e39e8/card-design-1/images/image3.jpg -------------------------------------------------------------------------------- /card-design-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card design 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |

Features

23 |
24 |
25 | 26 |
27 |

Card Title 1

28 |

29 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 30 | temporibus, delectus error suscipit nihil illum. 31 |

32 | 33 |
34 |
35 | 36 |
37 | 38 |
39 |

Card Title 2

40 |

41 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 42 | temporibus, delectus error suscipit nihil illum. 43 |

44 | 45 |
46 |
47 | 48 |
49 | 50 |
51 |

Card Title 3

52 |

53 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 54 | temporibus, delectus error suscipit nihil illum. 55 |

56 | 57 |
58 |
59 | 60 |
61 | 62 |
63 |

Card Title 1

64 |

65 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 66 | temporibus, delectus error suscipit nihil illum. 67 |

68 | 69 |
70 |
71 | 72 |
73 | 74 |
75 |

Card Title 2

76 |

77 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 78 | temporibus, delectus error suscipit nihil illum. 79 |

80 | 81 |
82 |
83 | 84 |
85 | 86 |
87 |

Card Title 3

88 |

89 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 90 | temporibus, delectus error suscipit nihil illum. 91 |

92 | 93 |
94 |
95 |
96 |
97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /card-design-1/style.css: -------------------------------------------------------------------------------- 1 | /* reset code & common code starts */ 2 | * { 3 | border: none; 4 | box-sizing: border-box; 5 | list-style-type: none; 6 | margin: 0; 7 | outline: non; 8 | padding: 0; 9 | text-decoration: none; 10 | } 11 | 12 | html { 13 | scroll-behavior: smooth; 14 | } 15 | 16 | :root { 17 | --color-primary: #4a148c; 18 | --color-primary-light: #7c43bd; 19 | --color-primary-dark: #12005e; 20 | --color-secondary: #fff; 21 | --color-secondary-light: #fff; 22 | --color-secondary-dark: #ccc; 23 | --color-black: #000; 24 | --color-warning: orange; 25 | --transition: all 0.3s ease; 26 | --container-lg-width: 80%; 27 | --container-md-width: 90%; 28 | --container-sm-width: 95%; 29 | } 30 | 31 | img { 32 | display: block; 33 | width: 100%; 34 | object-fit: cover; 35 | } 36 | 37 | h1 { 38 | font-size: 3rem; 39 | } 40 | h2 { 41 | font-size: 2.5rem; 42 | } 43 | h3 { 44 | font-size: 2rem; 45 | } 46 | h4 { 47 | font-size: 1.5rem; 48 | } 49 | 50 | .btn { 51 | border: none; 52 | padding: 0.5rem 1rem; 53 | /* border-radius: 0.6rem; */ 54 | background-color: var(--color-primary-dark); 55 | color: var(--color-secondary); 56 | cursor: pointer; 57 | margin-top: 1rem; 58 | font-size: 1.2rem; 59 | text-transform: uppercase; 60 | } 61 | 62 | /* reset code & common code ends */ 63 | .cards { 64 | /* background-color: var(--color-primary-light); */ 65 | padding: 1rem 0; 66 | } 67 | section .title { 68 | text-align: center; 69 | margin: 2rem 0 3rem; 70 | } 71 | .cards__container { 72 | width: var(--container-lg-width); 73 | margin: 0 auto; 74 | display: grid; 75 | grid-template-columns: repeat(3, 1fr); 76 | gap: 2rem; 77 | } 78 | .card { 79 | background-color: var(--color-secondary-dark); 80 | transition: var(--transition); 81 | min-height: 30rem; 82 | border-radius: 0.5rem; 83 | } 84 | .card:hover { 85 | box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.3); 86 | } 87 | .card__img { 88 | height: 15rem; 89 | } 90 | .card__body { 91 | padding: 2rem; 92 | overflow: auto; 93 | display: flex; 94 | flex-direction: column; 95 | align-items: center; 96 | justify-content: center; 97 | } 98 | .card__title { 99 | margin-bottom: 0.6rem; 100 | } 101 | .card__desc { 102 | font-size: 0.9rem; 103 | line-height: 1.5rem; 104 | } 105 | 106 | @media screen and (max-width: 768px) { 107 | .cards__container { 108 | width: var(--container-md-width); 109 | grid-template-columns: repeat(2, 1fr); 110 | } 111 | } 112 | @media screen and (max-width: 600px) { 113 | .cards__container { 114 | width: var(--container-sm-width); 115 | grid-template-columns: auto; 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /card-design-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card design 8 | 9 | 10 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |

Features

32 |
33 |
34 |
35 |
36 |

Card Title 1

37 |

38 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 39 | temporibus, delectus error suscipit nihil illum. 40 |

41 | 42 |
43 |
44 | 45 |
46 |
47 |
48 |

Card Title 2

49 |

50 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 51 | temporibus, delectus error suscipit nihil illum. 52 |

53 | 54 |
55 |
56 | 57 |
58 |
59 | 60 |
61 |
62 |

Card Title 3

63 |

64 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 65 | temporibus, delectus error suscipit nihil illum. 66 |

67 | 68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 |
76 |

Card Title 1

77 |

78 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 79 | temporibus, delectus error suscipit nihil illum. 80 |

81 | 82 |
83 |
84 | 85 |
86 |
87 |
88 |

Card Title 2

89 |

90 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 91 | temporibus, delectus error suscipit nihil illum. 92 |

93 | 94 |
95 |
96 | 97 |
98 |
99 | 100 |
101 |
102 |

Card Title 3

103 |

104 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 105 | temporibus, delectus error suscipit nihil illum. 106 |

107 | 108 |
109 |
110 |
111 |
112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /card-design-2/style.css: -------------------------------------------------------------------------------- 1 | /* reset code & common code starts */ 2 | * { 3 | border: none; 4 | box-sizing: border-box; 5 | list-style-type: none; 6 | margin: 0; 7 | outline: non; 8 | padding: 0; 9 | text-decoration: none; 10 | } 11 | 12 | html { 13 | scroll-behavior: smooth; 14 | } 15 | 16 | :root { 17 | --color-primary: #4a148c; 18 | --color-primary-light: #7c43bd; 19 | --color-primary-dark: #12005e; 20 | --color-secondary: #fff; 21 | --color-secondary-light: #fff; 22 | --color-secondary-dark: #ccc; 23 | --color-black: #000; 24 | --color-warning: orange; 25 | --transition: all 0.3s ease; 26 | --container-lg-width: 80%; 27 | --container-md-width: 92%; 28 | --container-sm-width: 96%; 29 | } 30 | 31 | h1 { 32 | font-size: 2.5rem; 33 | } 34 | h2 { 35 | font-size: 2rem; 36 | } 37 | h3 { 38 | font-size: 1.5rem; 39 | } 40 | h4 { 41 | font-size: 1rem; 42 | } 43 | 44 | .btn { 45 | border: none; 46 | padding: 0.5rem 1rem; 47 | border-radius: 0.6rem; 48 | background-color: #1f2641; 49 | color: var(--color-secondary); 50 | cursor: pointer; 51 | margin-top: 1rem; 52 | font-size: 1.1rem; 53 | text-transform: uppercase; 54 | } 55 | 56 | /* reset code & common code ends */ 57 | .cards { 58 | background-color: #1f2641; 59 | padding: 1rem 5rem; 60 | } 61 | section .title { 62 | text-align: center; 63 | margin: 2rem 0 3rem; 64 | color: white; 65 | } 66 | .cards__container { 67 | width: var(--container-lg-width); 68 | margin: 0 auto; 69 | display: grid; 70 | grid-template-columns: repeat(3, 1fr); 71 | gap: 2rem; 72 | } 73 | .card { 74 | background-color: #424890; 75 | color: white; 76 | transition: var(--transition); 77 | min-height: 25rem; 78 | border-radius: 2rem; 79 | padding: 2rem; 80 | } 81 | .card:hover { 82 | box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.3); 83 | } 84 | .card__icon { 85 | margin-top: 1rem; 86 | } 87 | .card__icon i { 88 | background-color: #4a148c; 89 | color: var(--color-secondary); 90 | padding: 1rem; 91 | border-radius: 50%; 92 | font-size: 2rem; 93 | } 94 | .card__body { 95 | margin-top: 1rem; 96 | overflow: scroll; 97 | } 98 | .card__title { 99 | margin-bottom: 0.6rem; 100 | } 101 | .card__desc { 102 | margin: 1rem 0 1rem; 103 | font-size: 0.9rem; 104 | line-height: 1.5rem; 105 | } 106 | 107 | .card:nth-child(1) i { 108 | background-color: orange; 109 | } 110 | .card:nth-child(2) i { 111 | background-color: green; 112 | } 113 | .card:nth-child(3) i { 114 | background-color: purple; 115 | } 116 | .card:nth-child(4) i { 117 | background-color: violet; 118 | } 119 | .card:nth-child(5) i { 120 | background-color: peru; 121 | } 122 | .card:nth-child(6) i { 123 | background-color: orangered; 124 | } 125 | 126 | @media screen and (max-width: 768px) { 127 | .cards__container { 128 | width: var(--container-md-width); 129 | grid-template-columns: repeat(2, 1fr); 130 | } 131 | } 132 | @media screen and (max-width: 600px) { 133 | .cards__container { 134 | width: var(--container-sm-width); 135 | grid-template-columns: auto; 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /card-team-design/images/Islam_Anisul.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/html-css-javascript-projects/17405031308aebea9e9d6acc1568196b793e39e8/card-team-design/images/Islam_Anisul.jpg -------------------------------------------------------------------------------- /card-team-design/images/Lisa_Milton.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/html-css-javascript-projects/17405031308aebea9e9d6acc1568196b793e39e8/card-team-design/images/Lisa_Milton.jpg -------------------------------------------------------------------------------- /card-team-design/images/Usman_Islam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/html-css-javascript-projects/17405031308aebea9e9d6acc1568196b793e39e8/card-team-design/images/Usman_Islam.jpg -------------------------------------------------------------------------------- /card-team-design/images/allef-vinicius.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/html-css-javascript-projects/17405031308aebea9e9d6acc1568196b793e39e8/card-team-design/images/allef-vinicius.jpg -------------------------------------------------------------------------------- /card-team-design/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | team members card 8 | 9 | 10 | 17 | 18 | 19 | 20 | 21 |
22 |

Meet Team Members

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

Anisul Islam

30 |

Full-stack web developer

31 |

Bangladesh

32 |
33 |
34 | 35 | 36 | 37 | 38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 |

Lisa Milton

47 |

Software Enginner

48 |

Australia

49 |
50 |
51 | 52 | 53 | 54 | 55 |
56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 |

Usman Islam

64 |

Teacher

65 |

Pakistan

66 |
67 |
68 | 69 | 70 | 71 | 72 |
73 |
74 | 75 |
76 |
77 | 78 |
79 |
80 |

Allef Vinicius

81 |

Full-stack Trainer

82 |

Spain

83 |
84 |
85 | 86 | 87 | 88 | 89 |
90 |
91 |
92 |
93 | 94 | 95 | -------------------------------------------------------------------------------- /card-team-design/style.css: -------------------------------------------------------------------------------- 1 | /* css variables starts */ 2 | :root { 3 | --transition: all 0.3s ease-in-out; 4 | --box-shadow: 0.1rem 0.1rem 2rem rgba(0, 0, 0, 0.3); 5 | } 6 | /* css variables ends */ 7 | /* reset code & common code starts */ 8 | * { 9 | border: none; 10 | box-sizing: border-box; 11 | list-style-type: none; 12 | margin: 0; 13 | outline: none; 14 | padding: 0; 15 | text-decoration: none; 16 | } 17 | 18 | html { 19 | scroll-behavior: smooth; 20 | } 21 | 22 | .section-title { 23 | text-align: center; 24 | margin: 2rem 0; 25 | font-size: 2rem; 26 | } 27 | 28 | img { 29 | width: 100%; 30 | display: block; 31 | object-fit: cover; 32 | /* height: 20rem; */ 33 | } 34 | 35 | .container { 36 | padding: 3rem 5rem; 37 | } 38 | 39 | /* reset code & common code ends */ 40 | 41 | /* teams starts */ 42 | 43 | .teams { 44 | background-color: #2c2c2c; 45 | color: white; 46 | } 47 | 48 | .team__container { 49 | display: grid; 50 | grid-template-columns: repeat(4, 1fr); 51 | gap: 3rem; 52 | } 53 | .team__member { 54 | background: #4c4c4c; 55 | position: relative; 56 | padding: 0.1rem; 57 | transition: var(--transition); 58 | overflow: hidden; 59 | } 60 | 61 | .team__member:hover { 62 | box-shadow: var(--box-shadow); 63 | } 64 | 65 | .team__member-img { 66 | filter: saturate(0); 67 | } 68 | .team__member-img img { 69 | height: 20rem; 70 | } 71 | .team__member:hover .team__member-img { 72 | filter: saturate(1); 73 | } 74 | 75 | .team__member-info { 76 | padding: 2rem; 77 | } 78 | .team__member-name { 79 | margin-bottom: 1rem; 80 | } 81 | .team__member-position, 82 | .team__member-country { 83 | margin-bottom: 0.6rem; 84 | font-size: 0.9rem; 85 | } 86 | 87 | .team__member-socials { 88 | position: absolute; 89 | top: 0; 90 | left: -100%; 91 | 92 | background-color: rgba(0, 0, 0, 0.5); 93 | border-radius: 0 2rem 2rem 0; 94 | padding: 2rem; 95 | 96 | display: flex; 97 | flex-direction: column; 98 | gap: 1rem; 99 | transition: var(--transition); 100 | } 101 | .team__member-socials a { 102 | color: white; 103 | transition: var(--transition); 104 | } 105 | .team__member-socials a:hover { 106 | transform: scale(2); 107 | } 108 | .team__member:hover .team__member-socials { 109 | left: 0; 110 | } 111 | 112 | /* teams ends */ 113 | 114 | /* responsiveness starts */ 115 | 116 | @media (max-width: 768px) { 117 | .team__container { 118 | grid-template-columns: repeat(2, 1fr); 119 | } 120 | } 121 | @media (max-width: 600px) { 122 | .team__container { 123 | grid-template-columns: repeat(1, 1fr); 124 | } 125 | } 126 | /* responsiveness ends */ 127 | -------------------------------------------------------------------------------- /contact-form-submit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact Form 8 | 9 | 10 | 11 |
12 |

Contact Me

13 |
18 |
19 | 20 | 21 |
22 | 23 |
24 | 25 | 26 |
27 | 28 |
29 | 30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |
38 | 39 | 40 | 41 | 50 | -------------------------------------------------------------------------------- /contact-form-submit/style.css: -------------------------------------------------------------------------------- 1 | /* css variables */ 2 | :root { 3 | --primary-color: #3c3c3c; 4 | --primary-color-dark: #1c1c1c; 5 | --primary-color-light: #5c5c5c; 6 | --warning-color: orange; 7 | --text-color: #fff; 8 | 9 | --border-radius: 0.6rem; 10 | --transition: all 0.4s ease-in-out; 11 | } 12 | 13 | /* reset code */ 14 | * { 15 | border: none; 16 | box-sizing: border-box; 17 | list-style-type: none; 18 | margin: 0; 19 | padding: 0; 20 | text-decoration: none; 21 | outline: none; 22 | } 23 | 24 | .btn { 25 | cursor: pointer; 26 | text-transform: uppercase; 27 | } 28 | 29 | .contact { 30 | padding: 2rem 4rem; 31 | background-color: #1c1c1c; 32 | height: 100vh; 33 | color: var(--text-color); 34 | display: grid; 35 | place-items: center; 36 | } 37 | .contact__title { 38 | font-size: 2.5rem; 39 | margin-bottom: 2rem; 40 | } 41 | .contact__form { 42 | background-color: var(--primary-color); 43 | border-radius: var(--border-radius); 44 | padding: 1rem; 45 | width: 50%; 46 | } 47 | 48 | .contact__field { 49 | margin-bottom: 2rem; 50 | display: grid; 51 | } 52 | .contact__field:nth-last-child() { 53 | margin-bottom: 2rem; 54 | display: grid; 55 | } 56 | 57 | .contact__field label { 58 | margin-bottom: 0.5rem; 59 | } 60 | .contact__field input, 61 | textarea, 62 | button { 63 | padding: 0.6rem; 64 | border-radius: var(--border-radius); 65 | } 66 | .contact__form textarea { 67 | resize: none; 68 | height: 25vh; 69 | } 70 | 71 | .contact__field-btn { 72 | justify-self: center; 73 | width: 50%; 74 | background-color: var(--primary-color-dark); 75 | color: var(--text-color); 76 | transition: var(--transition); 77 | } 78 | .contact__field-btn:hover { 79 | background-color: var(--warning-color); 80 | } 81 | 82 | @media (max-width: 768px) { 83 | .contact__form { 84 | width: 80%; 85 | } 86 | } 87 | @media (max-width: 600px) { 88 | .contact__form { 89 | width: 100%; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /dog-api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |

Beautiful dog image

13 | 14 |
15 |
16 | 17 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /dog-api/index.js: -------------------------------------------------------------------------------- 1 | // find elements 2 | const getDogImageButton = document.querySelector("button"); 3 | const imgDiv = document.querySelector(".img-div"); 4 | 5 | const getDogImage = () => { 6 | fetch("https://dog.ceo/api/breeds/image/random") 7 | .then((res) => res.json()) 8 | .then((data) => { 9 | imgDiv.innerHTML = `dog image`; 10 | }); 11 | }; 12 | 13 | getDogImageButton?.addEventListener("click", getDogImage); 14 | -------------------------------------------------------------------------------- /dog-api/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | body { 7 | background-color: #2c2c2c; 8 | } 9 | .container { 10 | height: 90vh; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | 15 | color: white; 16 | padding: 3rem 1rem; 17 | } 18 | 19 | footer { 20 | height: 10vh; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | color: white; 25 | } 26 | footer p { 27 | font-size: 0.8rem; 28 | } 29 | h1 { 30 | text-align: center; 31 | margin-bottom: 2rem; 32 | } 33 | 34 | img { 35 | height: 15rem; 36 | width: 20rem; 37 | max-width: 100%; 38 | border-radius: 0.6rem; 39 | box-shadow: 0 0 1rem rgba(233, 227, 227, 0.5); 40 | } 41 | 42 | .btn { 43 | margin-bottom: 1.5rem; 44 | border: none; 45 | border-radius: 0.6rem; 46 | background-color: black; 47 | color: white; 48 | padding: 0.5rem; 49 | cursor: pointer; 50 | transition: all 0.3s; 51 | } 52 | 53 | .btn:hover { 54 | background-color: orange; 55 | color: black; 56 | } 57 | -------------------------------------------------------------------------------- /dyanmic-card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | posts 8 | 9 | 15 | 16 | 17 |

Posts

18 | 19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /dyanmic-card/index.js: -------------------------------------------------------------------------------- 1 | // dummy data 2 | // const posts = [ 3 | // { 4 | // title: "this is title1", 5 | // body: "this is body1", 6 | // }, 7 | // { 8 | // title: "this is title2", 9 | // body: "this is body2", 10 | // }, 11 | // { 12 | // title: "this is title3", 13 | // body: "this is body3", 14 | // }, 15 | // { 16 | // title: "this is title4", 17 | // body: "this is body4", 18 | // }, 19 | // { 20 | // title: "this is title5", 21 | // body: "this is body5", 22 | // }, 23 | // { 24 | // title: "this is title6", 25 | // body: "this is body6", 26 | // }, 27 | // { 28 | // title: "this is title7", 29 | // body: "this is body7", 30 | // }, 31 | // { 32 | // title: "this is title8", 33 | // body: "this is body8", 34 | // }, 35 | // ]; 36 | 37 | //
38 | //

post title 1

39 | //

post description 1

40 | //
; 41 | 42 | //fetch data 43 | const fecthData = async (config) => { 44 | try { 45 | const res = await axios(config); 46 | return res.data; 47 | } catch (error) { 48 | throw Error("data is not fetched"); 49 | } 50 | }; 51 | 52 | // selection 53 | const postsElement = document.querySelector(".posts"); 54 | 55 | const loadAllData = async () => { 56 | const posts = await fecthData("https://jsonplaceholder.typicode.com/posts"); 57 | posts.map((post) => { 58 | const postElement = document.createElement("div"); 59 | postElement.classList.add("post"); 60 | postElement.innerHTML = ` 61 |

${post.title}

62 |

${post.body}

63 | `; 64 | postsElement.appendChild(postElement); 65 | }); 66 | }; 67 | 68 | loadAllData(); 69 | -------------------------------------------------------------------------------- /dyanmic-card/style.css: -------------------------------------------------------------------------------- 1 | /* reset code starts */ 2 | * { 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | /* reset code ends */ 8 | 9 | h1 { 10 | text-align: center; 11 | font-size: 3rem; 12 | } 13 | 14 | /* posts starts here */ 15 | .posts { 16 | width: 100%; 17 | padding: 1rem; 18 | display: flex; 19 | flex-wrap: wrap; 20 | justify-content: center; 21 | } 22 | 23 | .post { 24 | width: 23%; 25 | margin: 0.3rem; 26 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 27 | padding: 1rem; 28 | transition: all 0.4s; 29 | } 30 | 31 | .post:hover { 32 | box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 33 | } 34 | /* posts ends here */ 35 | 36 | /* responsive parts starts here */ 37 | @media screen and (max-width: 992px) { 38 | .post { 39 | width: 48%; 40 | } 41 | } 42 | @media screen and (max-width: 600px) { 43 | .post { 44 | width: 100%; 45 | } 46 | } 47 | /* responsive parts ends here */ 48 | -------------------------------------------------------------------------------- /faq-design/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | faq 8 | 9 | 16 | 17 | 18 | 19 | 20 | 24 | 25 | 26 | 27 |
28 |

Frequently Asked Questions

29 |
30 |
31 |
32 | 33 |
34 |
35 |

36 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 37 | Explicabo, aspernatur ? 38 |

39 |

40 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 41 | vitae doloribus enim odit praesentium laudantium fugit, 42 | asperiores, ad necessitatibus itaque repudiandae? Modi, veniam 43 | quae? Totam, autem est culpa at qui temporibus vitae minus 44 | adipisci, fugit explicabo expedita, aut placeat excepturi? 45 |

46 |
47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 |

55 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 56 | Explicabo, aspernatur ? 57 |

58 |

59 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 60 | vitae doloribus enim odit praesentium laudantium fugit, 61 | asperiores, ad necessitatibus itaque repudiandae? Modi, veniam 62 | quae? Totam, autem est culpa at qui temporibus vitae minus 63 | adipisci, fugit explicabo expedita, aut placeat excepturi? 64 |

65 |
66 |
67 | 68 |
69 |
70 | 71 |
72 |
73 |

74 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 75 | Explicabo, aspernatur ? 76 |

77 |

78 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 79 | vitae doloribus enim odit praesentium laudantium fugit, 80 | asperiores, ad necessitatibus itaque repudiandae? Modi, veniam 81 | quae? Totam, autem est culpa at qui temporibus vitae minus 82 | adipisci, fugit explicabo expedita, aut placeat excepturi? 83 |

84 |
85 |
86 | 87 |
88 |
89 | 90 |
91 |
92 |

93 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 94 | Explicabo, aspernatur ? 95 |

96 |

97 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 98 | vitae doloribus enim odit praesentium laudantium fugit, 99 | asperiores, ad necessitatibus itaque repudiandae? Modi, veniam 100 | quae? Totam, autem est culpa at qui temporibus vitae minus 101 | adipisci, fugit explicabo expedita, aut placeat excepturi? 102 |

103 |
104 |
105 | 106 |
107 |
108 | 109 |
110 |
111 |

112 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 113 | Explicabo, aspernatur ? 114 |

115 |

116 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 117 | vitae doloribus enim odit praesentium laudantium fugit, 118 | asperiores, ad necessitatibus itaque repudiandae? Modi, veniam 119 | quae? Totam, autem est culpa at qui temporibus vitae minus 120 | adipisci, fugit explicabo expedita, aut placeat excepturi? 121 |

122 |
123 |
124 | 125 |
126 |
127 | 128 |
129 |
130 |

131 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 132 | Explicabo, aspernatur. 133 |

134 |

135 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 136 | vitae doloribus enim odit praesentium laudantium fugit, 137 | asperiores, ad necessitatibus itaque repudiandae? Modi, veniam 138 | quae? Totam, autem est culpa at qui temporibus vitae minus 139 | adipisci, fugit explicabo expedita, aut placeat excepturi? 140 |

141 |
142 |
143 | 144 |
145 |
146 | 147 |
148 |
149 |

150 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 151 | Explicabo, aspernatur ? 152 |

153 |

154 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 155 | vitae doloribus enim odit praesentium laudantium fugit, 156 | asperiores, ad necessitatibus itaque repudiandae? Modi, veniam 157 | quae? Totam, autem est culpa at qui temporibus vitae minus 158 | adipisci, fugit explicabo expedita, aut placeat excepturi? 159 |

160 |
161 |
162 | 163 |
164 |
165 | 166 |
167 |
168 |

169 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 170 | Explicabo, aspernatur ? 171 |

172 |

173 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 174 | vitae doloribus enim odit praesentium laudantium fugit, 175 | asperiores, ad necessitatibus itaque repudiandae? Modi, veniam 176 | quae? Totam, autem est culpa at qui temporibus vitae minus 177 | adipisci, fugit explicabo expedita, aut placeat excepturi? 178 |

179 |
180 |
181 | 182 |
183 |
184 | 185 |
186 |
187 |

188 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 189 | Explicabo, aspernatur ? 190 |

191 |

192 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 193 | vitae doloribus enim odit praesentium laudantium fugit, 194 | asperiores, ad necessitatibus itaque repudiandae? Modi, veniam 195 | quae? Totam, autem est culpa at qui temporibus vitae minus 196 | adipisci, fugit explicabo expedita, aut placeat excepturi? 197 |

198 |
199 |
200 | 201 |
202 |
203 | 204 |
205 |
206 |

207 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 208 | Explicabo, aspernatur ? 209 |

210 |

211 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 212 | vitae doloribus enim odit praesentium laudantium fugit, 213 | asperiores, ad necessitatibus itaque repudiandae? Modi, veniam 214 | quae? Totam, autem est culpa at qui temporibus vitae minus 215 | adipisci, fugit explicabo expedita, aut placeat excepturi? 216 |

217 |
218 |
219 |
220 |
221 | 222 | 223 | 224 | 225 | -------------------------------------------------------------------------------- /faq-design/main.js: -------------------------------------------------------------------------------- 1 | const faqs = document.querySelectorAll(".faq"); 2 | faqs.forEach((faq) => { 3 | faq.addEventListener("click", () => { 4 | const faqDesc = faq.querySelector(".faq__desc"); 5 | const faqIcon = faq.querySelector(".faq__icon i"); 6 | faqDesc.classList.toggle("open"); 7 | 8 | if (faqIcon.className === "fa-solid fa-plus") { 9 | faqIcon.className = "fa-solid fa-minus"; 10 | } else { 11 | faqIcon.className = "fa-solid fa-plus"; 12 | } 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /faq-design/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | border: 0; 3 | box-sizing: border-box; 4 | list-style-type: none; 5 | margin: 0; 6 | outline: none; 7 | padding: 0; 8 | text-decoration: none; 9 | } 10 | 11 | html { 12 | scroll-behavior: smooth; 13 | } 14 | 15 | body { 16 | font-family: "Montserrat", sans-serif; 17 | line-height: 1.5; 18 | color: white; 19 | background: #1f2641; 20 | } 21 | 22 | .faqs { 23 | padding: 1rem 5rem; 24 | } 25 | .faqs h2 { 26 | text-align: center; 27 | margin: 2rem 0 3rem; 28 | font-size: 2rem; 29 | } 30 | .faqs__container { 31 | display: grid; 32 | grid-template-columns: repeat(2, 1fr); 33 | gap: 2rem; 34 | } 35 | .faq { 36 | display: flex; 37 | align-items: center; 38 | background-color: #6c63ff; 39 | padding: 2.5rem; 40 | } 41 | .faq__icon { 42 | margin-right: 2rem; 43 | font-size: 2rem; 44 | align-self: flex-start; 45 | } 46 | .faq__desc { 47 | margin-top: 1rem; 48 | font-size: 0.9rem; 49 | display: none; 50 | } 51 | 52 | .open { 53 | display: block; 54 | } 55 | 56 | @media (max-width: 768px) { 57 | .faqs__container { 58 | display: grid; 59 | grid-template-columns: repeat(1, 1fr); 60 | gap: 2rem; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /guessing-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | guessing game 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Guessing game

15 |
16 |
17 |
18 |
19 | 20 | 27 |
28 | 29 |
30 | 31 |
32 |
33 |

34 |

35 |
36 |
37 |
38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /guessing-game/index.js: -------------------------------------------------------------------------------- 1 | // initializing some values 2 | let totalAttempts = 5; 3 | let attempts = 0; 4 | let totalWons = 0; 5 | let totallosts = 0; 6 | 7 | // finding elements 8 | const form = document.querySelector("form"); 9 | const cardBody = document.querySelector(".card-body"); 10 | const guessingNumber = form.querySelector("#guessingNumber"); 11 | const checkButton = form.querySelector("#check"); 12 | const resultText = cardBody.querySelector(".resultText"); 13 | const lostWonMessage = document.createElement("p"); 14 | const remainingAttempts = cardBody.querySelector(".remainingAttempts"); 15 | 16 | form.addEventListener("submit", function (event) { 17 | event.preventDefault(); 18 | 19 | attempts++; 20 | if (attempts === 5) { 21 | guessingNumber.disabled = true; 22 | checkButton.disabled = true; 23 | } 24 | if (attempts < 6) { 25 | let guessNumber = Number(guessingNumber.value); 26 | checkResult(guessNumber); 27 | remainingAttempts.innerHTML = `Remaining attempts: ${ 28 | totalAttempts - attempts 29 | }`; 30 | } 31 | guessingNumber.value = ""; 32 | }); 33 | 34 | function checkResult(guessingNumber) { 35 | const randomNumber = getRandomNumber(5); 36 | if (guessingNumber === randomNumber) { 37 | resultText.innerHTML = `you have won`; 38 | totalWons++; 39 | } else { 40 | resultText.innerHTML = `you have lost; random number was: ${randomNumber}`; 41 | totallosts++; 42 | } 43 | lostWonMessage.innerHTML = `Won: ${totalWons}, Lost: ${totallosts}`; 44 | lostWonMessage.classList.add("large-text"); 45 | cardBody.appendChild(lostWonMessage); 46 | } 47 | 48 | function getRandomNumber(limit) { 49 | return Math.floor(Math.random() * limit) + 1; 50 | } 51 | -------------------------------------------------------------------------------- /guessing-game/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700;900&display=swap"); 2 | 3 | /* reset code starts */ 4 | * { 5 | box-sizing: border-box; 6 | margin: 0; 7 | padding: 0; 8 | outline: none; 9 | text-decoration: none; 10 | list-style-type: none; 11 | font-family: "Nunito", sans-serif; 12 | font-weight: 400; 13 | } 14 | /* reset code ends */ 15 | 16 | .container { 17 | width: 100%; 18 | height: 100vh; 19 | background-color: bisque; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | } 24 | 25 | .card { 26 | width: 32rem; 27 | height: 20rem; 28 | background-color: rgb(2, 160, 245); 29 | border-radius: 0.6rem; 30 | padding: 1rem; 31 | color: white; 32 | box-shadow: 0.1rem 0.1rem 0.1rem #222, -0.1rem 0 0.1rem #222; 33 | font-size: 1.2rem; 34 | transition: all 0.3s; 35 | } 36 | 37 | .card:hover { 38 | box-shadow: 0.2rem 0.2rem 0.2rem #222, -0.2rem 0 0.2rem #222; 39 | } 40 | .card-title { 41 | text-align: center; 42 | color: white; 43 | margin-bottom: 1rem; 44 | } 45 | 46 | .form-field { 47 | margin-bottom: 1rem; 48 | } 49 | 50 | input { 51 | border: none; 52 | border: 0.1rem solid; 53 | border-radius: 0.6rem; 54 | padding: 0.2rem; 55 | background-color: rgb(4, 117, 238); 56 | color: white; 57 | cursor: pointer; 58 | font-size: 1.2rem; 59 | width: 42%; 60 | } 61 | 62 | .buttons { 63 | display: flex; 64 | justify-content: flex-end; 65 | margin: 0 0.8rem 1rem 0; 66 | } 67 | .btn { 68 | border: none; 69 | border: 0.1rem solid; 70 | border-radius: 0.6rem; 71 | padding: 0.2rem; 72 | background-color: rgb(4, 117, 238); 73 | cursor: pointer; 74 | transition: all 0.3s; 75 | font-size: 1.2rem; 76 | } 77 | 78 | .btn:hover { 79 | background-color: white; 80 | } 81 | 82 | p { 83 | text-align: center; 84 | } 85 | 86 | .large-text { 87 | font-size: 1.5rem; 88 | color: bisque; 89 | } 90 | -------------------------------------------------------------------------------- /learnings.txt: -------------------------------------------------------------------------------- 1 | // todo app 2 | - html 3 | - css 4 | - js 5 | - setTimeOut 6 | - localStorage 7 | - array 8 | - mapping 9 | - dom manipulation 10 | - event listeners 11 | 12 | step 1 : create the html basic structure 13 | step 2 : style html elements 14 | step 3: find all the html elements and add listeners 15 | step 4: add todo 16 | step 5: showMessage 17 | step 6: adding todos in localstorage 18 | step 7: delete Todo 19 | setp 8: read todo 20 | -------------------------------------------------------------------------------- /slideshow-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | slideshow 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 | 22 |
23 |
24 |
25 | 26 |

Football

27 |
28 | 29 |
30 | 31 |

Volleyball

32 |
33 | 34 |
35 | 36 |

Swimming

37 |
38 |
39 |
40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /slideshow-demo/script.js: -------------------------------------------------------------------------------- 1 | const slideshowElements = document.querySelectorAll(".slideshow-element"); 2 | 3 | let countElements = 1; 4 | 5 | setInterval(() => { 6 | countElements++; 7 | let currentElement = document.querySelector(".current"); 8 | currentElement.classList.remove("current"); 9 | 10 | if (countElements > slideshowElements.length) { 11 | slideshowElements[0].classList.add("current"); 12 | countElements = 1; 13 | } else { 14 | currentElement.nextElementSibling.classList.add("current"); 15 | } 16 | }, 3000); 17 | -------------------------------------------------------------------------------- /slideshow-demo/style.css: -------------------------------------------------------------------------------- 1 | .slideshow-container { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | background-color: beige; 7 | } 8 | .slideshow-element { 9 | text-align: center; 10 | position: absolute; 11 | transform: translate(-50%, -50%) scale(0); 12 | transition: transform 0.6s; 13 | } 14 | .slideshow-element i, 15 | h2 { 16 | font-size: 10rem; 17 | color: coral; 18 | } 19 | .slideshow-element.current { 20 | transform: translate(-50%, -50%) scale(1); 21 | transition: transform 0.6s; 22 | } 23 | -------------------------------------------------------------------------------- /swiper-slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Slider 8 | 9 | 10 | 17 | 18 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |

Testimonial

29 | 30 |
31 | 32 |
33 | 34 |
35 |
36 | 37 |
38 |
39 |

Anisul Islam

40 | Software developer 41 |
42 |
43 |

44 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 45 | Incidunt impedit consequatur expedita et necessitatibus, earum 46 | saepe minus eligendi labore consequuntur. 47 |

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

Rabeya Begum

56 | Student 57 |
58 |
59 |

60 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 61 | Incidunt impedit consequatur expedita et necessitatibus, earum 62 | saepe minus eligendi labore consequuntur. 63 |

64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 |

Zannatul Islam

72 | Teacher 73 |
74 |
75 |

76 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 77 | Incidunt impedit consequatur expedita et necessitatibus, earum 78 | saepe minus eligendi labore consequuntur. 79 |

80 |
81 |
82 |
83 |
84 | 85 |
86 |
87 |

Rakibul Islam

88 | Teaching Assistant 89 |
90 |
91 |

92 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 93 | Incidunt impedit consequatur expedita et necessitatibus, earum 94 | saepe minus eligendi labore consequuntur. 95 |

96 |
97 |
98 |
99 | 100 |
101 | 102 | 103 | 104 |
105 |
106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /swiper-slider/main.js: -------------------------------------------------------------------------------- 1 | const swiper = new Swiper(".swiper", { 2 | // Optional parameters 3 | // direction: 'vertical', 4 | // loop: true, 5 | 6 | // If we need pagination 7 | pagination: { 8 | el: ".swiper-pagination", 9 | clickable: true, 10 | }, 11 | 12 | slidesPerView: "1", 13 | 14 | // Navigation arrows 15 | navigation: { 16 | nextEl: ".swiper-button-next", 17 | prevEl: ".swiper-button-prev", 18 | }, 19 | 20 | // And if we need scrollbar 21 | scrollbar: { 22 | el: ".swiper-scrollbar", 23 | }, 24 | }); 25 | -------------------------------------------------------------------------------- /swiper-slider/style.css: -------------------------------------------------------------------------------- 1 | h2, 2 | h3 { 3 | margin: 0; 4 | } 5 | 6 | .swiper { 7 | width: 600px; 8 | height: 300px; 9 | } 10 | .testimonials { 11 | padding: 1rem 5rem; 12 | height: 100vh; 13 | display: grid; 14 | place-items: center; 15 | background-color: aliceblue; 16 | } 17 | .testimonials h2 { 18 | text-align: center; 19 | } 20 | 21 | .testimonial { 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: center; 25 | align-items: center; 26 | background-color: antiquewhite; 27 | } 28 | 29 | .testimonial__avatar i { 30 | font-size: 2.5rem; 31 | padding: 1rem; 32 | border-radius: 50%; 33 | margin: 0 auto 1rem; 34 | border: 0.5rem solid #000000; 35 | } 36 | .testimonial__info { 37 | text-align: center; 38 | } 39 | .testimonial__desc { 40 | padding: 0 2rem; 41 | } 42 | -------------------------------------------------------------------------------- /todo-app/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | list-style-type: none; 6 | text-decoration: none; 7 | outline: none; 8 | } 9 | html { 10 | scroll-behavior: smooth; 11 | } 12 | 13 | .container { 14 | background-color: #333; 15 | height: 100vh; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | padding: 1rem; 20 | } 21 | 22 | .card { 23 | background-color: #222; 24 | color: white; 25 | padding: 1rem; 26 | min-height: 80vh; 27 | width: 50%; 28 | overflow: scroll; 29 | border-radius: 0.6rem; 30 | } 31 | 32 | .card-title { 33 | font-size: 2.5rem; 34 | text-align: center; 35 | margin-bottom: 1rem; 36 | } 37 | 38 | input { 39 | border: none; 40 | border-radius: 0.6rem; 41 | padding: 0.5rem; 42 | width: 80%; 43 | } 44 | 45 | .btn { 46 | border: none; 47 | border-radius: 0.6rem; 48 | padding: 0.5rem; 49 | background-color: orange; 50 | color: white; 51 | transition: all 0.3s; 52 | cursor: pointer; 53 | } 54 | .btn:hover { 55 | background-color: white; 56 | color: black; 57 | } 58 | 59 | #addTodoButton { 60 | width: 19%; 61 | } 62 | 63 | .li-style { 64 | display: flex; 65 | justify-content: space-between; 66 | align-items: center; 67 | background-color: #333; 68 | color: white; 69 | padding: 0.5rem; 70 | border-radius: 0.6rem; 71 | margin: 1rem 0; 72 | transition: all 0.3s; 73 | } 74 | 75 | .li-style:hover { 76 | background-color: #111; 77 | } 78 | .bg-success { 79 | margin: 0.5rem 0; 80 | padding: 0.5rem; 81 | color: black; 82 | background-color: #ddffdd; 83 | border-left: 6px solid #04aa6d; 84 | } 85 | .bg-danger { 86 | margin: 0.5rem 0; 87 | padding: 0.5rem; 88 | color: black; 89 | background-color: #ffdddd; 90 | border-left: 6px solid #f44336; 91 | } 92 | -------------------------------------------------------------------------------- /todo-app/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | todo app 8 | 9 | 16 | 17 | 18 |
19 |
20 |

Todo App

21 |
22 |
23 | 29 | 32 |
33 |

34 |
    35 |
    36 |
    37 |
    38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /todo-app/js/classes/Todo.js: -------------------------------------------------------------------------------- 1 | export class Todo { 2 | constructor(todoId, todoValue) { 3 | this.todoId = todoId; 4 | this.todoValue = todoValue; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /todo-app/js/index.js: -------------------------------------------------------------------------------- 1 | import { Todo } from "./classes/Todo.js"; 2 | 3 | // find the elements 4 | const todoForm = document.querySelector(".todo-form"); 5 | const todoInput = document.querySelector("#inputTodo"); 6 | const todoLists = document.getElementById("lists"); 7 | const messageElement = document.getElementById("message"); 8 | 9 | // showMessage 10 | const showMessage = (text, status) => { 11 | messageElement.textContent = text; 12 | messageElement.classList.add(`bg-${status}`); 13 | setTimeout(() => { 14 | messageElement.textContent = ""; 15 | messageElement.classList.remove(`bg-${status}`); 16 | }, 1000); 17 | }; 18 | 19 | // createTodo 20 | const createTodo = (newTodo) => { 21 | const todoElement = document.createElement("li"); 22 | todoElement.id = newTodo.todoId; 23 | todoElement.classList.add("li-style"); 24 | todoElement.innerHTML = ` 25 | ${newTodo.todoValue} 26 | 27 | `; 28 | todoLists.appendChild(todoElement); 29 | 30 | const deleteButton = todoElement.querySelector("#deleteButton"); 31 | deleteButton.addEventListener("click", deleteTodo); 32 | }; 33 | 34 | // deleteTodo 35 | const deleteTodo = (event) => { 36 | const selectedTodo = event.target.parentElement.parentElement.parentElement; 37 | 38 | todoLists.removeChild(selectedTodo); 39 | showMessage("todo is deleted", "danger"); 40 | 41 | let todos = getTodosFromLocalStorage(); 42 | todos = todos.filter((todo) => todo.todoId !== selectedTodo.id); 43 | localStorage.setItem("mytodos", JSON.stringify(todos)); 44 | }; 45 | 46 | // getTodosFromLocalStorage 47 | const getTodosFromLocalStorage = () => { 48 | return localStorage.getItem("mytodos") 49 | ? JSON.parse(localStorage.getItem("mytodos")) 50 | : []; 51 | }; 52 | 53 | // addTodo 54 | const addTodo = (event) => { 55 | event.preventDefault(); 56 | const todoValue = todoInput.value; 57 | 58 | // unique id 59 | const todoId = Date.now().toString(); 60 | 61 | const newTodo = new Todo(todoId, todoValue); 62 | 63 | createTodo(newTodo); 64 | showMessage("todo is added", "success"); 65 | 66 | // add todo to localStorage 67 | const todos = getTodosFromLocalStorage(); 68 | todos.push(newTodo); 69 | localStorage.setItem("mytodos", JSON.stringify(todos)); 70 | 71 | todoInput.value = ""; 72 | }; 73 | 74 | // loadTodos 75 | const loadTodos = () => { 76 | const todos = getTodosFromLocalStorage(); 77 | todos.map((todo) => createTodo(todo)); 78 | }; 79 | 80 | // adding listeners 81 | todoForm.addEventListener("submit", addTodo); 82 | window.addEventListener("DOMContentLoaded", loadTodos); 83 | -------------------------------------------------------------------------------- /user-preference/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | user preference 8 | 9 | 10 | 11 |
    12 | 13 | 14 | 20 | 21 | 22 | 23 | 29 | 30 | 31 | 32 |
    33 |

    34 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque 35 | similique quia, numquam animi quidem eligendi explicabo commodi 36 | facere, eum, quam molestias voluptatibus. Non ea saepe quidem 37 | voluptates rerum et ducimus natus tempore architecto sunt sed numquam, 38 | perferendis corrupti! Totam similique est magni quidem perferendis. 39 | Voluptatum officia labore temporibus quos! Voluptatum, numquam! At 40 | possimus eligendi ipsam quos rerum? Soluta asperiores sit inventore 41 | debitis repudiandae. Vero nostrum optio rerum unde molestiae sunt 42 | dolorem, corrupti sapiente. Quo veritatis eum a harum ratione 43 | excepturi commodi consequatur vel quae rerum, pariatur perferendis 44 | quasi, cum aliquid iure nemo quam repellendus, quas dicta voluptate 45 | ullam accusantium laborum. Neque vero deleniti temporibus qui? Tempore 46 | dolor fuga et ad sed sint aut? Asperiores laudantium unde impedit quis 47 | quasi laboriosam? 48 |

    49 |

    50 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure 51 | distinctio quae eos corporis nihil. Expedita, nemo. Unde id asperiores 52 | aspernatur. Quo atque aliquam sapiente velit, ea nam beatae, animi 53 | quaerat provident voluptas eligendi laborum fuga magnam. Non tenetur 54 | temporibus, ducimus eaque beatae cum voluptatem sequi. Quo quibusdam 55 | ab, velit nihil ipsa quod fuga corrupti et a saepe odit? Est nam 56 | dolore perferendis vero neque deleniti culpa eligendi tempore 57 | voluptates aliquid libero ad ratione optio doloremque perspiciatis rem 58 | sequi animi quibusdam, obcaecati qui officia consectetur recusandae. 59 | Sequi veritatis deleniti, autem, quam at laudantium esse delectus 60 | perferendis a est maxime, necessitatibus inventore. 61 |

    62 |
    63 |
    64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /user-preference/index.js: -------------------------------------------------------------------------------- 1 | const selectFontSize = document.getElementById("selectFontSize"); 2 | const selectBgColor = document.getElementById("selectBgColor"); 3 | const resetButton = document.getElementById("resetButton"); 4 | const mainElement = document.querySelector("main"); 5 | 6 | const setValues = (fontSize, bgColor) => { 7 | selectFontSize.value = fontSize; 8 | selectBgColor.value = bgColor; 9 | mainElement.style.fontSize = fontSize; 10 | mainElement.style.backgroundColor = bgColor; 11 | }; 12 | 13 | // load LocalStorage Value 14 | const initialSetup = () => { 15 | const bgColor = localStorage.getItem("bgColor"); 16 | const fontSize = localStorage.getItem("fontSize"); 17 | 18 | if (bgColor && fontSize) { 19 | setValues(fontSize, bgColor); 20 | } 21 | if (!bgColor && !fontSize) { 22 | setValues("16px", "aqua"); 23 | } 24 | if (!bgColor && fontSize) { 25 | setValues(fontSize, "aqua"); 26 | } 27 | if (bgColor && !fontSize) { 28 | setValues("16px", bgColor); 29 | } 30 | }; 31 | 32 | // changeFontSize 33 | const changeFontSize = (event) => { 34 | const selectedFontSize = event.target.value; 35 | mainElement.style.fontSize = selectedFontSize; 36 | localStorage.setItem("fontSize", selectedFontSize); 37 | }; 38 | 39 | // changeBgColor 40 | const changeBgColor = (event) => { 41 | const selectedBgColor = event.target.value; 42 | mainElement.style.backgroundColor = selectedBgColor; 43 | localStorage.setItem("bgColor", selectedBgColor); 44 | }; 45 | 46 | // clearLocalStorage 47 | const clearLocalStorage = () => { 48 | localStorage.removeItem("bgColor"); 49 | localStorage.removeItem("fontSize"); 50 | setValues("16px", "aqua"); 51 | }; 52 | 53 | // add event listeners 54 | selectFontSize.addEventListener("change", changeFontSize); 55 | selectBgColor.addEventListener("change", changeBgColor); 56 | resetButton.addEventListener("click", clearLocalStorage); 57 | 58 | initialSetup(); 59 | -------------------------------------------------------------------------------- /user-preference/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .container { 8 | padding: 1rem; 9 | } 10 | 11 | select { 12 | margin: 0 1rem 1rem 0; 13 | } 14 | 15 | main { 16 | background-color: aqua; 17 | font-size: 16px; 18 | padding: 1rem; 19 | } 20 | p { 21 | margin: 1rem; 22 | } 23 | button { 24 | border: none; 25 | border-radius: 0.6rem; 26 | padding: 0.5rem; 27 | font-size: 1.2rem; 28 | } 29 | --------------------------------------------------------------------------------