├── Analog_Clock ├── app.js ├── clock.png ├── index.html └── style.css ├── BMI_Calculator ├── .gitignore ├── app.js ├── index.html └── style.css ├── Bulb-On_OFF ├── images │ ├── off.png │ ├── off.svg │ ├── on.png │ └── on.svg ├── index.html ├── main.html ├── off-img.html └── on-img.html ├── CSS-Grid └── index.html ├── Calculator ├── app.js ├── index.html └── style.css ├── Loan_Calculator ├── app.js └── index.html ├── Mario_Run_Animation ├── index.html └── media │ ├── background.jpg │ └── mario-gif.gif ├── Music_Player ├── index.html └── media │ ├── background.jpg │ ├── music.mp3 │ ├── pause.png │ └── play.png ├── My_Portfolio ├── .gitignore ├── css │ └── style.css ├── images │ ├── email.png │ ├── facebook.png │ ├── github.png │ ├── instagram.png │ ├── linkedin.png │ ├── logo-transparent.png │ ├── logo.png │ ├── logo.svg │ ├── projects-c.png │ ├── projects-c.svg │ ├── projects-chrome.png │ ├── projects-chrome.svg │ ├── projects-java.png │ ├── projects-java.svg │ ├── projects-other.png │ ├── projects-other.svg │ ├── projects-python.png │ ├── projects-python.svg │ ├── projects-webdev.png │ ├── projects-webdev.svg │ ├── sushant.jpg │ └── twitter.png ├── index.html └── js │ └── script.js ├── Note_Taker ├── app.js └── index.html ├── Parallax_Effect_Webpage ├── images │ ├── BG-1.jpg │ └── BG-2.jpg └── index.html ├── Portfolio-Only_HTML ├── 9.gif ├── index.html └── me.jpg ├── README.md ├── Searchy-Search_Engine ├── README.md ├── dist │ └── css │ │ ├── style.min.css │ │ └── style.min.css.map ├── icon.png ├── index.html ├── js │ ├── dataFunctions.js │ ├── main.js │ ├── searchBar.js │ └── searchResults.js └── sass │ ├── _base.scss │ ├── _searchEntry.scss │ ├── _searchResults.scss │ ├── _sharedClasses.scss │ └── style.scss ├── Survey_Form └── index.html ├── Technical_Documentation └── index.html ├── ToDo_List ├── app.js └── index.html ├── Tribute_Page-APJ_Kalam ├── APJ_Kalam.png └── index.html ├── cloud_note ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── index.css │ └── index.js ├── news_teller ├── .gitignore ├── README.md ├── output.png ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── components │ ├── Navbar.js │ ├── News.js │ ├── NewsComponent.js │ ├── Spinner.js │ └── loading.gif │ ├── index.js │ └── reportWebVitals.js └── text_helper ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── favicon.ico ├── favicon.png ├── favicon.svg ├── index.html ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── components ├── Alert.js ├── InputForm.js └── Navbar.js ├── index.css ├── index.js ├── reportWebVitals.js └── setupTests.js /Analog_Clock/app.js: -------------------------------------------------------------------------------- 1 | setInterval(() => 2 | { 3 | d = new Date(); //object of date() 4 | hr = d.getHours(); 5 | min = d.getMinutes(); 6 | sec = d.getSeconds(); 7 | hr_rotation = 30*hr + min/2; 8 | min_rotation = 6*min; 9 | sec_rotation = 6*sec; 10 | 11 | hour.style.transform = `rotate(${hr_rotation}deg)`; 12 | minute.style.transform = `rotate(${min_rotation}deg)`; 13 | second.style.transform = `rotate(${sec_rotation}deg)`; 14 | }, 1000); -------------------------------------------------------------------------------- /Analog_Clock/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Analog_Clock/clock.png -------------------------------------------------------------------------------- /Analog_Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Analog Clock 8 | 9 | 10 | 62 | 63 | 64 | 65 |
66 |
67 |
68 |
69 |
70 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /Analog_Clock/style.css: -------------------------------------------------------------------------------- 1 | #clockContainer 2 | { 3 | position: relative; 4 | margin: auto; 5 | height: 40vw; /*to make the height and width responsive*/ 6 | width: 40vw; 7 | background: url(clock.png) no-repeat; /*setting our background image*/ 8 | background-size: 100%; 9 | } 10 | 11 | #hour, #minute, #second 12 | { 13 | position: absolute; 14 | background: black; 15 | border-radius: 10px; 16 | transform-origin: bottom; 17 | } 18 | 19 | #hour 20 | { 21 | width: 1.8%; 22 | height: 25%; 23 | top: 25%; 24 | left: 48.85%; 25 | opacity: 0.8; 26 | } 27 | 28 | #minute 29 | { 30 | width: 1.6%; 31 | height: 30%; 32 | top: 19%; 33 | left: 48.9%; 34 | opacity: 0.8; 35 | } 36 | 37 | #second 38 | { 39 | width: 1%; 40 | height: 40%; 41 | top: 9%; 42 | left: 49.25%; 43 | opacity: 0.8; 44 | } -------------------------------------------------------------------------------- /BMI_Calculator/.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/ -------------------------------------------------------------------------------- /BMI_Calculator/app.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | let button = document.querySelector("#btn"); 3 | button.addEventListener("click", calculateBMI); //function for calculating BMI 4 | }; 5 | 6 | function calculateBMI() { 7 | //getting input from user into height variable. 8 | // Input is string so typecasting is necessary. 9 | let height = parseInt(document.querySelector("#height").value); 10 | 11 | //getting input from user into weight variable. 12 | let weight = parseInt(document.querySelector("#weight").value); 13 | 14 | let result = document.querySelector("#result"); 15 | 16 | console.log(height); 17 | //checking if user is providing a proper value or not 18 | if (height === "" || isNaN(height)) 19 | result.innerHTML = "Provide a valid Height!"; 20 | else if (weight === "" || isNaN(weight)) 21 | result.innerHTML = "Provide a valid Weight!"; 22 | 23 | //when both the input is valid, calculate the bmi 24 | else { 25 | let bmi = (weight / ((height * height) / 10000)).toFixed(2); 26 | 27 | //deciding output as per the bmi conditions 28 | if (bmi < 18.6) result.innerHTML = `Under Weight : ${bmi}`; 29 | else if (bmi >= 18.6 && bmi < 24.9) 30 | result.innerHTML = `Normal : ${bmi}`; 31 | else result.innerHTML = `Over Weight : ${bmi}`; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /BMI_Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | BMI Calculator 9 | 10 | 11 | 12 | 13 | 14 |
15 |

16 | 17 | 18 |

Height (in cm)

19 | 20 | 21 |

Weight (in kg)

22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /BMI_Calculator/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: yellow; 5 | font-family: cursive; 6 | } 7 | 8 | .container { 9 | width: 30%; 10 | height: 50%; 11 | background-color: black; 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translateX(-50%) translateY(-50%); 16 | padding: 50px; 17 | box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, 0.75); 18 | } 19 | 20 | h1 { 21 | color: red; 22 | text-align: center; 23 | } 24 | 25 | p { 26 | padding-left: 0.5rem; 27 | color: white; 28 | } 29 | 30 | #height, 31 | #weight { 32 | width: 100%; 33 | height: 35px; 34 | outline: none; 35 | border: 2px solid black; 36 | border-radius: 2rem; 37 | font-family: cursive; 38 | font-size: 1.35rem; 39 | padding-left: 1.25rem; 40 | } 41 | 42 | button { 43 | margin-left: 2.5rem; 44 | font-family: cursive; 45 | font-size: 1.25rem; 46 | width: 90%; 47 | height: 2.5rem; 48 | margin-top: 1.5rem; 49 | border-radius: 2rem; 50 | background-color: yellow; 51 | color: black; 52 | font-weight: bolder; 53 | } 54 | 55 | #result { 56 | color: white; 57 | text-align: center; 58 | margin-top: 20px; 59 | font-size: 20px; 60 | } 61 | -------------------------------------------------------------------------------- /Bulb-On_OFF/images/off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Bulb-On_OFF/images/off.png -------------------------------------------------------------------------------- /Bulb-On_OFF/images/on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Bulb-On_OFF/images/on.png -------------------------------------------------------------------------------- /Bulb-On_OFF/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bulb 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Bulb-On_OFF/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bulb 9 | 12 | 13 | 43 | 44 | 45 | 46 |

47 | ON 48 |

49 |

50 | OFF 51 |

52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /Bulb-On_OFF/off-img.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | OFF Bulb 9 | 12 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Bulb-On_OFF/on-img.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | ON Bulb 9 | 12 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /CSS-Grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid Design Layout 9 | 10 | 64 | 65 | 66 | 67 |
68 |

Header
69 |


Box1
70 |


Box2
71 |


Box3
72 |







Side-Bar
73 |





This is a Simple CSS-Grid Layout Overview 74 |
75 |

Footer
76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /Calculator/app.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | let screen = document.querySelector(".screen"); 3 | let buttons = document.querySelectorAll(".numbers"); 4 | let clear = document.querySelector(".btn-red"); 5 | let equal = document.querySelector(".btn-green"); 6 | 7 | buttons.forEach(function (button) { 8 | button.addEventListener("click", function (e) { 9 | let value = e.target.dataset.num; 10 | screen.value += value; 11 | }); 12 | }); 13 | // will evaluate the result on the screen and set the value on the screen after the evaluation. 14 | equal.addEventListener("click", function () { 15 | if (screen.value === "") screen.value = "Enter value"; 16 | else { 17 | let answer = eval(screen.value); 18 | screen.value = answer; 19 | } 20 | }); 21 | // will clear the screen when the clear btn will be clicked. 22 | clear.addEventListener("click", function () { 23 | screen.value = ""; 24 | }); 25 | }; 26 | -------------------------------------------------------------------------------- /Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calculator 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 | -------------------------------------------------------------------------------- /Calculator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: cursive; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | } 11 | 12 | .container { 13 | margin-top: 5%; 14 | width: 35%; 15 | } 16 | 17 | .screen { 18 | background: rgb(2, 2, 43); 19 | padding: 20px; 20 | width: 92.5%; 21 | color: white; 22 | font-size: 60px; 23 | border: none; 24 | } 25 | 26 | .buttons { 27 | display: flex; 28 | flex-wrap: wrap; 29 | } 30 | button { 31 | flex: 22%; 32 | font-size: 64px; 33 | border: 1px solid black; 34 | } 35 | 36 | .btn { 37 | background: orange; 38 | color: white; 39 | } 40 | 41 | .btn-green { 42 | background-color: green; 43 | } 44 | 45 | .btn-red { 46 | background-color: red; 47 | } 48 | -------------------------------------------------------------------------------- /Loan_Calculator/app.js: -------------------------------------------------------------------------------- 1 | function Calculate() 2 | { 3 | const amount = document.querySelector("#amount").value; //extracting value in the amount section in the variable 4 | const rate = document.querySelector("#rate").value; //extracting value in the interest rate section in the variable 5 | const months = document.querySelector("#months").value; //extracting value in the months section in the variable 6 | 7 | //Calculating interest per month 8 | const interest = (amount * (rate * 0.01))/months; 9 | //Calculating total payment 10 | const total = ((amount/months) + interest).toFixed(2); 11 | 12 | document.querySelector("#total").innerHTML = "EMI : (₹)" + total; 13 | } -------------------------------------------------------------------------------- /Loan_Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 46 | 47 | Loan Calculator 48 | 49 | 50 | 51 |

52 | Loan Calculator 53 |

54 |
55 | 56 | 57 | 58 |

Amount (₹)

59 | 60 |

Interest Rate

61 | 62 |

Months to Pay

63 | 64 | 65 |

66 | 67 |
68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /Mario_Run_Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mario Animation 9 | 10 | 11 | 12 | 13 | 14 | 71 | 72 | 73 | 74 | 75 |
76 |
77 | 78 | 79 |

RUN MARIO RUN

80 |
81 |
82 | 83 | 84 | -------------------------------------------------------------------------------- /Mario_Run_Animation/media/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Mario_Run_Animation/media/background.jpg -------------------------------------------------------------------------------- /Mario_Run_Animation/media/mario-gif.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Mario_Run_Animation/media/mario-gif.gif -------------------------------------------------------------------------------- /Music_Player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | My Music 9 | 10 | 11 | 77 | 78 | 79 | 80 |
81 | 88 |
89 | 90 |
91 |
92 |

MY
SOUNDS

93 |
94 | 95 |
96 |

Click Here To Listen

97 | 98 |
99 |
100 | 101 | 104 | 105 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /Music_Player/media/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Music_Player/media/background.jpg -------------------------------------------------------------------------------- /Music_Player/media/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Music_Player/media/music.mp3 -------------------------------------------------------------------------------- /Music_Player/media/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Music_Player/media/pause.png -------------------------------------------------------------------------------- /Music_Player/media/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Music_Player/media/play.png -------------------------------------------------------------------------------- /My_Portfolio/.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/ -------------------------------------------------------------------------------- /My_Portfolio/css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-color: #4c84ff; 3 | --primary-bg-color: #fff; 4 | --secondary-bg-color: #eee; 5 | --primary-text-color: #222; 6 | --secondary-text-color: #666; 7 | } 8 | 9 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap"); 10 | 11 | * { 12 | font-family: "Roboto", sans-serif; 13 | margin: 0; 14 | padding: 0; 15 | box-sizing: border-box; 16 | outline: none; 17 | border: none; 18 | text-decoration: none; 19 | transition: all 0.3s cubic-bezier(0.38, 1.15, 0.7, 1.12); 20 | } 21 | 22 | *::selection { 23 | background-color: var(--main-color); 24 | color: #fff; 25 | } 26 | 27 | html { 28 | font-size: 62.5%; 29 | overflow-x: hidden; 30 | } 31 | 32 | html::-webkit-scrollbar { 33 | width: 1.3rem; 34 | } 35 | 36 | html::-webkit-scrollbar-track { 37 | background-color: var(--secondary-bg-color); 38 | } 39 | 40 | html::-webkit-scrollbar-thumb { 41 | background-color: var(--main-color); 42 | } 43 | 44 | body { 45 | background: var(--secondary-bg-color); 46 | } 47 | 48 | body.dark-theme { 49 | --primary-bg-color: #252c48; 50 | --secondary-bg-color: #171c32; 51 | --primary-text-color: #fff; 52 | --secondary-text-color: #eee; 53 | } 54 | 55 | section { 56 | min-height: 100vh; 57 | padding: 1rem; 58 | padding: 0 8%; 59 | } 60 | 61 | .btn { 62 | display: inline-block; 63 | padding: 0.9rem 3.5rem; 64 | font-size: 2rem; 65 | background: none; 66 | color: #fff; 67 | border-radius: 0.5rem; 68 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 69 | margin-top: 1rem; 70 | z-index: 0; 71 | position: relative; 72 | overflow: hidden; 73 | border: 0.2rem solid var(--main-color); 74 | } 75 | 76 | .btn::before { 77 | content: ""; 78 | position: absolute; 79 | top: 50%; 80 | left: 50%; 81 | transform: translate(-50%, -50%); 82 | border-radius: 0.5rem; 83 | background: var(--main-color); 84 | height: 85%; 85 | width: 95%; 86 | z-index: -1; 87 | transition: 0.2s linear; 88 | } 89 | 90 | .btn:hover:before { 91 | top: 100%; 92 | transform: translate(-50%, 100%); 93 | } 94 | 95 | .btn:hover { 96 | color: var(--primary-text-color); 97 | } 98 | 99 | .heading { 100 | font-size: 5rem; 101 | color: var(--primary-text-color); 102 | text-align: center; 103 | padding: 1rem; 104 | text-transform: uppercase; 105 | } 106 | 107 | .heading span { 108 | color: var(--main-color); 109 | text-transform: uppercase; 110 | } 111 | 112 | #menu { 113 | font-size: 2rem; 114 | background: var(--main-color); 115 | color: #fff; 116 | border-radius: 5rem; 117 | height: 5rem; 118 | width: 5rem; 119 | text-align: center; 120 | line-height: 5rem; 121 | position: fixed; 122 | top: 2rem; 123 | right: 2rem; 124 | z-index: 1000; 125 | cursor: pointer; 126 | } 127 | 128 | #menu.fa-times { 129 | transform: rotate(-180deg); 130 | } 131 | 132 | .navbar { 133 | position: fixed; 134 | top: 2.4rem; 135 | right: 2.5rem; 136 | padding: 1.1rem 2rem; 137 | padding-right: 4rem; 138 | z-index: 999; 139 | border: 0.2rem solid var(--main-color); 140 | border-radius: 1rem; 141 | background: var(--primary-bg-color); 142 | opacity: 0; 143 | transform-origin: top right; 144 | transform: scale(0); 145 | } 146 | 147 | .navbar.nav-toggle { 148 | opacity: 1; 149 | transform: scale(1); 150 | } 151 | 152 | .navbar a { 153 | display: block; 154 | font-size: 2rem; 155 | padding: 1rem; 156 | padding-right: 7rem; 157 | color: var(--primary-text-color); 158 | } 159 | 160 | .navbar a:hover { 161 | color: var(--main-color); 162 | transform: translateX(1rem); 163 | } 164 | 165 | .home { 166 | display: flex; 167 | align-items: center; 168 | justify-content: center; 169 | flex-wrap: wrap; 170 | } 171 | 172 | .home .image { 173 | flex: 1 1 40rem; 174 | padding: 1rem; 175 | text-align: center; 176 | } 177 | 178 | .home .image img { 179 | height: 50rem; 180 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); 181 | border-top: 3rem solid var(--primary-bg-color); 182 | border-right: 3rem solid var(--primary-bg-color); 183 | border-bottom: 3rem solid var(--main-color); 184 | border-left: 3rem solid var(--main-color); 185 | border-radius: 0.5rem; 186 | } 187 | 188 | .home .content { 189 | flex: 1 1 40rem; 190 | padding: 1rem; 191 | } 192 | 193 | .home .content .hello { 194 | display: inline-block; 195 | padding: 1rem 0; 196 | font-size: 2.6rem; 197 | color: var(--secondary-text-color); 198 | } 199 | 200 | .home .content h3 { 201 | color: var(--primary-text-color); 202 | font-size: 5rem; 203 | } 204 | 205 | .home .content h3 span { 206 | color: var(--main-color); 207 | } 208 | 209 | .home .content p { 210 | padding: 1rem 0; 211 | color: var(--secondary-text-color); 212 | font-size: 1.85rem; 213 | } 214 | 215 | .home .home-logo{ 216 | padding: 1rem; 217 | } 218 | 219 | .home .home-logo2{ 220 | padding: 0.5rem; 221 | } 222 | 223 | .about .row { 224 | display: flex; 225 | align-items: center; 226 | justify-content: center; 227 | flex-wrap: wrap; 228 | } 229 | 230 | .about .row .box { 231 | flex: 1 1 40rem; 232 | background-color: var(--primary-bg-color); 233 | border-radius: 0.5rem; 234 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 235 | padding: 0.5rem 1.5rem; 236 | margin: 1.5rem; 237 | } 238 | 239 | .about .row .box .title { 240 | color: var(--primary-text-color); 241 | font-size: 2.25rem; 242 | padding: 1rem 0; 243 | text-align: center; 244 | } 245 | 246 | .about .row .box .progress { 247 | padding: 1rem 0; 248 | } 249 | 250 | .about .row .box .progress h3 { 251 | font-size: 1.7rem; 252 | color: var(--secondary-text-color); 253 | display: flex; 254 | justify-content: space-between; 255 | } 256 | 257 | .about .row .box .progress .bar { 258 | height: 2.5rem; 259 | border-radius: 0.5rem; 260 | border: 0.2rem solid var(--main-color); 261 | padding: 0.5rem; 262 | margin: 1rem 0; 263 | } 264 | 265 | .about .row .box .progress .bar span { 266 | height: 100%; 267 | border-radius: 0.3rem; 268 | background-color: var(--main-color); 269 | display: block; 270 | } 271 | 272 | .about .row .box:nth-child(1) .progress:nth-child(2) .bar span { 273 | width: 90%; 274 | } 275 | 276 | .about .row .box:nth-child(1) .progress:nth-child(3) .bar span { 277 | width: 85%; 278 | } 279 | 280 | .about .row .box:nth-child(1) .progress:nth-child(4) .bar span { 281 | width: 75%; 282 | } 283 | 284 | .about .row .box:nth-child(1) .progress:nth-child(5) .bar span { 285 | width: 65%; 286 | } 287 | 288 | .about .row .box:nth-child(1) .progress:nth-child(6) .bar span { 289 | width: 75%; 290 | } 291 | 292 | .about .row .box:nth-child(2) .progress:nth-child(2) .bar span { 293 | width: 85%; 294 | } 295 | 296 | .about .row .box:nth-child(2) .progress:nth-child(3) .bar span { 297 | width: 80%; 298 | } 299 | 300 | .about .row .box:nth-child(2) .progress:nth-child(4) .bar span { 301 | width: 85%; 302 | } 303 | 304 | .about .row .box:nth-child(2) .progress:nth-child(5) .bar span { 305 | width: 80%; 306 | } 307 | 308 | .about .row .box:nth-child(2) .progress:nth-child(6) .bar span { 309 | width: 60%; 310 | } 311 | 312 | .about .row .box .exp-box { 313 | padding: 0 1.8rem; 314 | margin-top: 1rem; 315 | margin-bottom: 2rem; 316 | border-left: 0.2rem solid var(--main-color); 317 | position: relative; 318 | } 319 | 320 | .about .row .box .exp-box h3 { 321 | color: var(--main-color); 322 | font-size: 2rem; 323 | } 324 | 325 | .about .row .box .exp-box p { 326 | color: var(--secondary-text-color); 327 | font-size: 1.5rem; 328 | padding: 1rem 0; 329 | } 330 | 331 | .about .row .box .exp-box a{ 332 | text-decoration: none; 333 | font-weight: bold; 334 | color:var(--main-color); 335 | } 336 | 337 | .about .row .box .exp-box::before { 338 | content: ""; 339 | position: absolute; 340 | top: 0; 341 | left: -1rem; 342 | border-radius: 50%; 343 | height: 2rem; 344 | width: 2rem; 345 | background: var(--main-color); 346 | } 347 | 348 | .about .download { 349 | background: var(--primary-bg-color); 350 | border-radius: 0.5rem; 351 | text-align: center; 352 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 353 | padding: 2rem; 354 | padding-bottom: 3rem; 355 | margin: 1rem; 356 | } 357 | 358 | .portfolio a { 359 | text-decoration: none; 360 | color: pri; 361 | text-align: center; 362 | } 363 | 364 | .portfolio .button-container { 365 | display: flex; 366 | align-items: center; 367 | justify-content: center; 368 | flex-wrap: wrap; 369 | padding: 1rem 0; 370 | } 371 | 372 | .portfolio .button-container .btn { 373 | margin: 1rem; 374 | } 375 | 376 | .portfolio .image-container { 377 | display: flex; 378 | align-items: center; 379 | justify-content: center; 380 | flex-wrap: wrap; 381 | padding: 1rem 0; 382 | } 383 | 384 | .portfolio .image-container .box { 385 | width: 35rem; 386 | margin: 1rem; 387 | border-radius: 0.5rem; 388 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 389 | overflow: hidden; 390 | height: 25rem; 391 | position: relative; 392 | border: 1.5rem solid var(--primary-bg-color); 393 | cursor: pointer; 394 | } 395 | 396 | .portfolio .image-container .box img { 397 | height: 100%; 398 | width: 100%; 399 | /* object-fit: cover; */ 400 | } 401 | 402 | .portfolio .image-container .box .info { 403 | position: absolute; 404 | top: 0; 405 | left: 0; 406 | height: 100%; 407 | width: 100%; 408 | background: var(--primary-bg-color); 409 | display: flex; 410 | align-items: center; 411 | justify-content: center; 412 | flex-wrap: wrap; 413 | opacity: 0.9; 414 | transform: scale(0); 415 | } 416 | 417 | .portfolio .image-container .box:hover .info { 418 | transform: scale(1); 419 | } 420 | 421 | .portfolio .image-container .box .info h3 { 422 | font-size: 2.5rem; 423 | color: var(--primary-text-color); 424 | } 425 | 426 | .contact .row { 427 | display: flex; 428 | justify-content: center; 429 | flex-wrap: wrap; 430 | } 431 | 432 | .contact .row form { 433 | flex: 1 1 40rem; 434 | background: var(--primary-bg-color); 435 | padding: 2rem; 436 | margin: 1rem; 437 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 438 | border-radius: 0.5rem; 439 | } 440 | 441 | .contact .row .map { 442 | flex: 1 1 40rem; 443 | margin: 1rem; 444 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 445 | border-radius: 0.5rem; 446 | border: 2rem solid var(--primary-bg-color); 447 | width: 100%; 448 | } 449 | 450 | .contact .row form .inputBox { 451 | display: flex; 452 | justify-content: space-between; 453 | flex-wrap: wrap; 454 | } 455 | 456 | .contact .row form input, 457 | .contact .row form textarea { 458 | padding: 1rem 0; 459 | margin: 1rem 0; 460 | font-size: 1.7rem; 461 | border-bottom: 0.1rem solid var(--secondary-text-color); 462 | text-transform: none; 463 | background: none; 464 | color: var(--main-color); 465 | width: 100%; 466 | } 467 | 468 | .contact .row form input::placeholder, 469 | .contact .row form textarea::placeholder { 470 | text-transform: capitalize; 471 | color: var(--secondary-text-color); 472 | } 473 | 474 | .contact .row form input:focus, 475 | .contact .row form textarea:focus { 476 | border-color: var(--main-color); 477 | } 478 | 479 | .contact .row form .inputBox input { 480 | width: 49%; 481 | } 482 | 483 | .contact .row form textarea { 484 | height: 15rem; 485 | resize: none; 486 | } 487 | 488 | .contact .row form .btn { 489 | cursor: pointer; 490 | } 491 | 492 | .contact .box-container { 493 | display: flex; 494 | justify-content: space-between; 495 | flex-wrap: wrap; 496 | align-items: center; 497 | } 498 | 499 | .contact .box-container .box { 500 | flex: 1 1 30rem; 501 | margin: 1rem; 502 | padding: 3rem 1rem; 503 | background: var(--primary-bg-color); 504 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 505 | border-radius: 0.5rem; 506 | text-align: center; 507 | } 508 | 509 | .contact .box-container .box i { 510 | height: 6rem; 511 | width: 6rem; 512 | line-height: 6rem; 513 | border-radius: 50%; 514 | font-size: 3rem; 515 | background: var(--secondary-bg-color); 516 | color: var(--main-color); 517 | } 518 | 519 | .contact .box-container .box h3 { 520 | color: var(--primary-text-color); 521 | padding: 1rem 0; 522 | font-size: 2rem; 523 | } 524 | 525 | .contact .box-container .box p { 526 | font-size: 1.5rem; 527 | color: var(--secondary-text-color); 528 | } 529 | 530 | .footer { 531 | padding: 2.5rem 1rem; 532 | text-align: center; 533 | font-size: 2rem; 534 | color: var(--primary-text-color); 535 | background: var(--primary-bg-color); 536 | margin-top: 1rem; 537 | } 538 | 539 | .footer span { 540 | color: var(--main-color); 541 | } 542 | 543 | .footer a { 544 | text-decoration: none; 545 | color: var(--main-color); 546 | } 547 | 548 | #theme-toggler { 549 | position: fixed; 550 | top: 8.5rem; 551 | right: 2rem; 552 | z-index: 998; 553 | height: 5rem; 554 | width: 5rem; 555 | line-height: 5rem; 556 | text-align: center; 557 | font-size: 2rem; 558 | background: var(--main-color); 559 | color: #fff; 560 | cursor: pointer; 561 | border-radius: 5rem; 562 | } 563 | 564 | #theme-toggler.fa-sun { 565 | transform: rotate(-180deg); 566 | } 567 | 568 | 569 | /* media queries */ 570 | @media (max-width: 991px) { 571 | html { 572 | font-size: 55%; 573 | } 574 | 575 | section { 576 | padding: 1rem; 577 | padding: 0 3%; 578 | } 579 | } 580 | 581 | @media (max-width: 768px) { 582 | .home .image img { 583 | height: auto; 584 | width: 100%; 585 | } 586 | } 587 | 588 | @media (max-width: 400px) { 589 | html { 590 | font-size: 50%; 591 | } 592 | 593 | .services .box-container .box { 594 | width: 100%; 595 | } 596 | 597 | .portfolio .image-container .box { 598 | width: 100%; 599 | } 600 | 601 | .blog .box-container .box { 602 | width: 100%; 603 | } 604 | 605 | .contact .row form .inputBox input { 606 | width: 100%; 607 | } 608 | } 609 | -------------------------------------------------------------------------------- /My_Portfolio/images/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/email.png -------------------------------------------------------------------------------- /My_Portfolio/images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/facebook.png -------------------------------------------------------------------------------- /My_Portfolio/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/github.png -------------------------------------------------------------------------------- /My_Portfolio/images/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/instagram.png -------------------------------------------------------------------------------- /My_Portfolio/images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/linkedin.png -------------------------------------------------------------------------------- /My_Portfolio/images/logo-transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/logo-transparent.png -------------------------------------------------------------------------------- /My_Portfolio/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/logo.png -------------------------------------------------------------------------------- /My_Portfolio/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /My_Portfolio/images/projects-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/projects-c.png -------------------------------------------------------------------------------- /My_Portfolio/images/projects-chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/projects-chrome.png -------------------------------------------------------------------------------- /My_Portfolio/images/projects-java.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/projects-java.png -------------------------------------------------------------------------------- /My_Portfolio/images/projects-java.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /My_Portfolio/images/projects-other.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/projects-other.png -------------------------------------------------------------------------------- /My_Portfolio/images/projects-python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/projects-python.png -------------------------------------------------------------------------------- /My_Portfolio/images/projects-webdev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/projects-webdev.png -------------------------------------------------------------------------------- /My_Portfolio/images/sushant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/sushant.jpg -------------------------------------------------------------------------------- /My_Portfolio/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/My_Portfolio/images/twitter.png -------------------------------------------------------------------------------- /My_Portfolio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sushant Gaurav's Portfolio 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 32 | 33 |
34 | 35 |
36 | 37 | 38 | 39 |
40 | 41 |
42 | Sushant Gaurav 43 | About Me 44 |
45 | 46 |
47 | Hello! 48 |

I'M SUSHANT GAURAV

49 |

50 | I am a Junior Year Student currently undertaking my bachelor's in Computer Science and Engineering. I am 51 | a pragmatic programmer who loves to create major and minor projects. I am currently working as a 52 | freelance Technical Content Writer at Scaler. 53 |

54 | I have been a Technical Content Writer Intern at GeeksForGeeks. 55 | Besides Development and Content Writing, I constantly work on Open-Source and I have been a participant 56 | in various Open-Source Initiatives such as GSSoC, GWoC, Hacktober Fest, etc. 57 |

58 | I am a Microsoft Learn Student Ambassador, Agora Student Ambassador. I am a Software Developer with 59 | experience in various programming languages, Databases, Web Development, DSA, and Technical Content 60 | Writing. 61 |

62 | Thanks again for reading this, Nice meeting You :) 63 |

64 | 65 |

Let's Connect! 66 |

67 | 69 | 71 | 73 | 75 | 77 | 79 |

80 |
81 | 82 |

Checkout my Competitive Programming profiles and Articles. 83 |

84 | 85 | @sushantgaurav57 88 | imsushant12/profile 91 | sushantgaurav57 94 | @sushantgaurav57 97 | 98 | imsushant12 101 | sushantgaurav57 104 | imsushant 107 |

108 | 109 |
110 | 111 |
112 | 113 | 114 | 115 |
116 | 117 |

About Me

118 | 119 |
120 |
121 |

What I know ?

122 |
123 |

C/C++ 90%

124 |
125 |
126 |
127 |

Data Structures and Algorithm85%

128 |
129 |
130 |
131 |

Python 75%

132 |
133 |
134 |
135 |

Java 65%

136 |
137 |
138 |
139 |

Web Development 75%

140 |
141 |
142 |
143 | 144 |
145 |

What I know ?

146 |
147 |

Git and GitHub 85%

148 |
149 |
150 |
151 |

Operating Systems 80%

152 |
153 |
154 |
155 |

Data Base Management Systems 85%

156 |
157 |
158 |
159 |

Databases: SQL, MySQL, MongoDB 80%

160 |
161 |
162 |
163 |

LINUX 60%

164 |
165 |
166 |
167 | 168 |
169 |

EXPERIENCE & ACHIEVEMENTS

170 |
171 |

Technical Content Writer at 172 | Scaler by InterviewBit.

173 |

• Ideated and published more than 10 articles on the Scaler Topics platform.
174 | • Brainstormed and delivered content around C++, Operating Systems, and Data Base Management 175 | Systems.

176 |
177 |
178 |

Technical Content Writer Intern at GeeksForGeeks. 180 | ↗ 181 |

182 |

• Ideated and published more than 35 articles on the GeeksForGeeks platform.
183 | • Brainstormed and delivered content around C, C++, Java, Python, LINUX, Data Structures, 184 | Algorithms, and Web Development.

185 |
186 |
187 |

Participant in GirlScript Summer of Code: GSSoC'21. ↗ 189 |

190 |

• Ranked in the top 50 among thousands of participants by contributing to 2 open source projects 191 | NeoAlgo and Algo-Tree.
192 | • Raised more than 25 successfully merged PRs working on various domains such as C, C++, Data 193 | Structures, and Algorithm.

194 |
195 |
196 |
197 |

198 | Microsoft Learn Student Ambassador. 199 | ↗

200 |

• Conducted more than 10 events and workshops on 201 | Azure Fundamentals, Git, and GitHub as well as moderated various Microsoft Learn TV live events. 202 |

203 |
204 |
205 |

Technical Scripter 2020 - GeeksForGeeks.

206 |

• Placed in the top 25 Technical Scripters for the article ToDo 208 | List.

209 |
210 |
211 |

Mentor - HackTX (Texas University Hackathon).

212 |

• Selected among Microsoft Student 213 | Ambassadors where I mentored more than 100 students in their projects on various domains.

214 |
215 |
216 | 217 |
218 |

EDUCATION

219 |
220 |

Lakshmi Narain College of Technology Excellence, Bhopal.

221 |

• Undertaking Bachelor of Technology in Computer Science and Engineering.
222 | • Currently in the third year with an overall 9.26 CGPA.

223 |
224 |
225 |

Trident Public School, Muzaffarpur.

226 |

• Completed my Higher Secondary Education (AISSCE) under the Central Board of Secondary 227 | Education from my hometown under the Science stream in 2018.
228 | • Secured 80%.

229 |
230 |
231 |

Trident Public School, Muzaffarpur.

232 |

• Completed my Matriculation (AISSE) under the Central Board of Secondary Education from my 233 | hometown under the Physics-Chemistry-Mathematics stream in 2016.
234 | • Secured 10 CGPA.

235 |
236 |
237 |
238 | 239 |
240 | Download Resume 242 |
243 | 244 |
245 | 246 | 247 | 248 |
249 | 250 |

My Projects

251 | 252 |
253 |
C/C++
254 |
Python
255 |
Java
256 |
Web Development
257 |
Chrome Extension
258 |
259 | 260 |
261 | 262 |
263 | C and C++ Projects 264 |
265 |

266 | C/C++ Projects

267 |
268 |
269 |
270 | Python Projects 271 |
272 |

273 | Python Projects

274 |
275 |
276 |
277 | Java Projects 278 |
279 |

280 | Java Projects

281 |
282 |
283 |
284 | Web Development Projects 285 |
286 |

287 | Web Dev Projects

288 |
289 |
290 |
291 | Chrome Extension 292 |
293 |

294 | Chrome Extension

295 |
296 |
297 |
298 | Other Projects 299 |
300 |

301 | More???
Checkout my Repositories

302 |
303 |
304 |
305 | 306 |
307 | 308 | 309 | 310 |
311 | 312 |

contact me

313 | 314 |
315 | 316 |
317 | 318 |

My Number

319 |

+91 79037 45948

320 |
321 | 322 |
323 | 324 |

My Email

325 |

sushantgaurav57@gmail.com

326 |
327 | 328 |
329 | 330 |

My Address

331 |

Bhopal, India.

332 |
333 | 334 |
335 | 336 |
337 | 340 | 341 | 344 | 345 |
346 | 347 |
348 | 349 | 350 | 351 |
Created by Sushant 352 | Gaurav with ❣️ 353 | ||  All Rights Reserved. [👆]
354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | -------------------------------------------------------------------------------- /My_Portfolio/js/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | $("#menu").click(function () { 3 | $(this).toggleClass("fa-times"); 4 | $(".navbar").toggleClass("nav-toggle"); 5 | }); 6 | 7 | $(window).on("scroll load", function () { 8 | $("#menu").removeClass("fa-times"); 9 | $(".navbar").removeClass("nav-toggle"); 10 | }); 11 | 12 | $("#theme-toggler").click(function () { 13 | $(this).toggleClass("fa-sun"); 14 | $("body").toggleClass("dark-theme"); 15 | }); 16 | 17 | // smooth scrolling 18 | 19 | $('a[href*="#"]').on("click", function (e) { 20 | e.preventDefault(); 21 | 22 | $("html, body").animate( 23 | { 24 | scrollTop: $($(this).attr("href")).offset().top, 25 | }, 26 | 500, 27 | "linear" 28 | ); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /Note_Taker/app.js: -------------------------------------------------------------------------------- 1 | showNotes(); 2 | 3 | //If user adds a note, add it to the localStorage 4 | let addBtn = document.getElementById("addBtn"); 5 | let clearBtn = document.getElementById("clearBtn"); 6 | addBtn.addEventListener("click", function (e) { 7 | let addTxt = document.getElementById("addTxt"); 8 | let notes = localStorage.getItem("notes"); 9 | 10 | if (notes == null) notesObj = []; 11 | else notesObj = JSON.parse(notes); 12 | 13 | notesObj.push(addTxt.value); 14 | localStorage.setItem("notes", JSON.stringify(notesObj)); 15 | addTxt.value = ""; 16 | 17 | showNotes(); 18 | }); 19 | 20 | clearBtn.addEventListener("click", function (e) { 21 | addTxt.value = ""; 22 | }); 23 | 24 | // Function to show elements from localStorage 25 | function showNotes() { 26 | let notes = localStorage.getItem("notes"); 27 | 28 | if (notes == null) notesObj = []; 29 | else notesObj = JSON.parse(notes); 30 | 31 | let html = ""; 32 | 33 | notesObj.forEach(function (element, index) { 34 | html += ` 35 |
36 |
37 |
Note ${index + 1}
38 |

${element}

39 | 40 |
41 |
`; 42 | }); 43 | 44 | let notesElm = document.getElementById("notes"); 45 | 46 | if (notesObj.length != 0) notesElm.innerHTML = html; 47 | else 48 | notesElm.innerHTML = `Nothing to show! Use "Add a Note" section above to add notes.`; 49 | } 50 | 51 | // Function to delete a note 52 | function deleteNote(index) { 53 | let notes = localStorage.getItem("notes"); 54 | 55 | if (notes == null) notesObj = []; 56 | else notesObj = JSON.parse(notes); 57 | 58 | notesObj.splice(index, 1); 59 | 60 | localStorage.setItem("notes", JSON.stringify(notesObj)); 61 | 62 | showNotes(); 63 | } 64 | /* 65 | let search = document.getElementById("searchTxt"); 66 | search.addEventListener("input", function () 67 | { 68 | let inputVal = search.value.toLowerCase(); 69 | let noteCards = document.getElementsByClassName("noteCard"); 70 | 71 | Array.from(noteCards).forEach(function (element) 72 | { 73 | let cardTxt = element.getElementsByTagName("p")[0].innerText; 74 | 75 | if(cardTxt.includes(inputVal)) 76 | element.style.display = "block"; 77 | else 78 | element.style.display = "none"; 79 | }); 80 | }); 81 | */ 82 | -------------------------------------------------------------------------------- /Note_Taker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Notes Taker using JS 9 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | 26 | 27 |
28 |

Save and Delete your Notes📝

29 |
30 |
31 |
Types your notes here...
32 |
33 | 34 |
35 | 36 | 37 |
38 |
39 |
40 |

Your Notes

41 |
42 |
43 |
44 | 45 | 48 | 51 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /Parallax_Effect_Webpage/images/BG-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Parallax_Effect_Webpage/images/BG-1.jpg -------------------------------------------------------------------------------- /Parallax_Effect_Webpage/images/BG-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Parallax_Effect_Webpage/images/BG-2.jpg -------------------------------------------------------------------------------- /Parallax_Effect_Webpage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Parallax Webpage 9 | 10 | 11 | 77 | 78 | 79 | 80 |
81 |

82 | SUSHANT GAURAV 83 |

84 | 85 |
86 | 87 |
88 |

89 | Thankyou for showing interest, here is a quick story of me and this website. 90 | My programming journey started back in 2019, few months before I started studying CSE in LNCT 91 | Bhopal. 92 | I am currently in my second year and doing Technical Content Writing Internship at GeeksForGeeks. I 93 | like coding all kind of problems from the very basic like adding numbers to the complex ones like 94 | competitive 95 | programming problems. I love making projects and games. Infact this website is one of my Web Development 96 | Projects which is built using HTML and CSS. 97 |

98 | Languages known : C Language, C++, JAVA, Python, JavaScript, MySQL.
99 | IT Constructs : Data Structures and Algorithm, OOP, HTML, CSS, LINUX, and Git & GitHub. 100 |

101 |
102 | 103 |
104 |

105 | PROJECTS 106 |

107 | 108 |
109 | 110 |
111 |

112 |   113 | Calendar ☀  114 | Tic-Tac-Toe ☀  115 | Quiz Game ☀  116 | Survey Form ☀  117 | Chat Bot in C ☀  118 | Tribute Webpage ☀  119 | Portfolio Website ☀  120 | Guess the Number ☀  121 | Rock Paper Scissor ☀  122 | To-Do List using JS ☀  123 | Notes Taker using JS ☀  124 | BMI Calculator using JS ☀  125 | Loan Calculator using JS ☀  126 | Travel Management System ☀  127 | Random Password Generator ☀  128 | Different Management Systems 129 |

130 |
131 | 132 |
133 |

134 | ACHIEVEMENTS 135 |

136 | 137 |
138 | 139 |
140 |

141 |   142 | Technical Content Writer Intern at GeeksForGeeks ☀  143 | Microsoft Learn Student Ambassador - Beta ☀  144 | Participant in GirlScript Summer of Code 2021 ☀  145 | Mentored HackTX Hackathon 146 | 147 |

148 |
149 | 150 | 151 | -------------------------------------------------------------------------------- /Portfolio-Only_HTML/9.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Portfolio-Only_HTML/9.gif -------------------------------------------------------------------------------- /Portfolio-Only_HTML/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Portfolio-Only_HTML/me.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Web Development Projects 🌐 3 | 4 | #### This repository contains basics to advanced Web Development Projects. 5 | 6 | ## Tech Stacks used in these projects👨‍💻 7 | - HTML 8 | - BootStrap 9 | - CSS 10 | - JavaScript 11 | - React 12 | - Node.js 13 | - Express 14 | - MongoDB 15 | 16 | ## 👨‍💻 Projects 17 | 18 | ### FullStack Projects : 19 | - [CloudNote: A React App](/cloud_note/) 20 | 21 | ### React Frontend Projects: 22 | - [NewsTeller: A News Telling React App built using NEWS API](/news_teller/) 23 | - [Text Helper: A Text Utility React App](/text_helper/) 24 | 25 | ### Frontend Projects using JavaScript: 26 | - [Analog Clock using Date() Object in JS](/Analog_Clock/) 27 | - [BMI Calculator](/BMI_Calculator/) 28 | - [Calculator](/Calculator/) 29 | - [Loan Calculator](/Loan_Calculator/) 30 | - [My Portfolio](/My_Portfolio/) 31 | - [Notes Saver](/Note_Taker/) 32 | - [**SEARCHY** : A search engine powered by the Wikipedia API](/Searchy-Search_Engine/) 33 | - [ToDo List](/ToDo_List) 34 | 35 | 36 | ### Basic Frontend Projects: 37 | - [Bulb ON/OFF using i-frames](/Bulb-On_OFF/) 38 | - [CSS Grid Layout Design](/CSS-Grid/) 39 | - [Mario Starting Running Animation](/Mario_Run_Animation/) 40 | - [Music Player](/Music_Player/) 41 | - [Parallax-Effect Webpage](/Parallax_Effect_Webpage/) 42 | - [Portfolio Website (Non Responsive)](/Portfolio-Non_Responsive/) 43 | - [Portfolio Website using Only HTML](/Portfolio-Only_HTML/) 44 | - [Survey Form of a Coding Platform](/Survey_Form/) 45 | - [Technical Documentation Page: C++](/Technical_Documentation/) 46 | - [Tribute Page of Late APJ Abdul Kalam Sir](/Tribute_Page-APJ_Kalam) 47 | -------------------------------------------------------------------------------- /Searchy-Search_Engine/README.md: -------------------------------------------------------------------------------- 1 | ## 🔍 SEARCHY 2 | 3 |

4 | 5 |

6 | 7 | ### [Try out SEARCHY?](https://imsushant12.github.io/Searchy/) : A search engine powered by the Wikipedia API. 8 | 9 | ### Tech Stack used 👨‍💻 10 | - HTML 11 | - CSS 12 | - SASS 13 | - JavaScript 14 | 15 | ### API used 16 | - Wikipedia 17 | -------------------------------------------------------------------------------- /Searchy-Search_Engine/dist/css/style.min.css: -------------------------------------------------------------------------------- 1 | main,footer,.searchEntry,.results,.results .searchResults .resultItem{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}html,body{background-color:#fff;color:#000;width:100vw;min-height:100vh;font-family:"Roboto",Arial,sans-serif;font-size:22px}main{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;min-height:calc(100vh - 60px)}footer{width:100%;height:60px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}footer p{color:#70757a;font-size:0.5rem}@media only screen and (min-width: 768px){footer p{font-size:1rem}}footer p a{color:#70757a}img{display:block}.blue{color:#4885ed}.red{color:#db3236}.yellow{color:#ffc107}.green{color:#3cba54}.exclaim{display:inline-block;font-size:2.5rem;-webkit-transform:rotate(12deg);transform:rotate(12deg)}@media only screen and (min-width: 768px){.exclaim{font-size:5rem}}.offscreen{position:absolute;left:-10000px}.none{display:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.searchEntry{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-top:40px}.searchEntry .logo{letter-spacing:-5px;font-size:2rem;font-weight:600;margin-bottom:0.5rem}@media only screen and (min-width: 768px){.searchEntry .logo{font-size:4rem;letter-spacing:-10px}}.searchEntry .searchBar{width:90vw;display:-webkit-box;display:-ms-flexbox;display:flex;border:2px solid #e6e6e6;border-radius:500px;padding:0.15rem 0.25rem 0.15rem 0.75rem}@media only screen and (min-width: 768px){.searchEntry .searchBar{width:80vw;padding:1.25rem 1.5rem}}@media only screen and (min-width: 1025px){.searchEntry .searchBar{width:60vw}}.searchEntry .searchBar input[type="text"]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:0.75rem;text-align:left;letter-spacing:0.1rem;border:0;outline:none;min-width:150px}@media only screen and (min-width: 768px){.searchEntry .searchBar input[type="text"]{font-size:1.25rem}}.searchEntry .searchBar .button{cursor:pointer;border:0;background:transparent;min-width:48px;min-height:48px;outline:none}.searchEntry .searchBar .button i{font-family:"Font Awesome 5 Free";font-size:1rem}@media only screen and (min-width: 768px){.searchEntry .searchBar .button i{font-size:1.5rem}}.searchEntry .searchBar .button:hover i,.searchEntry .searchBar .button:focus i{padding-bottom:0.5rem;border-bottom-width:1px;border-bottom-style:solid}.searchEntry .searchBar .searchButton:hover i,.searchEntry .searchBar .searchButton:focus i{color:#3cba54}.searchEntry .searchBar .clear:hover i,.searchEntry .searchBar .clear:focus i{color:#db3236}@media only screen and (min-width: 768px){.searchEntry .searchBar .searchButton{padding-left:1rem}}.searchEntry .searchBar .clear{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#70757a;border-right:thin solid #d9d9d9}@media only screen and (min-width: 768px){.searchEntry .searchBar .clear{padding:0 1rem}}.searchEntry .searchBar:hover,.searchEntry .searchBar:focus-within{-webkit-box-shadow:0 2px 5px 2px #e6e6e6;box-shadow:0 2px 5px 2px #e6e6e6}.results{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding:0.5rem 1rem;width:90vw}@media only screen and (min-width: 768px){.results{width:75vw}}@media only screen and (min-width: 1025px){.results{width:55vw}}.results .statsBar{width:100%}.results .statsBar .stats{color:#70757a;font-size:0.75rem}@media only screen and (min-width: 768px){.results .statsBar .stats{font-size:1rem}}.results .searchResults{width:100%}.results .searchResults .resultItem{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:100%;padding:0.25rem 0}@media only screen and (min-width: 768px){.results .searchResults .resultItem{padding:0.5rem 0}}.results .searchResults .resultItem .resultTitle{width:100%;text-align:left;font-size:1rem;line-height:1.5rem;margin-bottom:0.25rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:3px 2px}@media only screen and (min-width: 768px){.results .searchResults .resultItem .resultTitle{font-size:1.5rem;line-height:1.75rem;margin-bottom:0.5rem}}.results .searchResults .resultItem .resultTitle a{color:#1a0dab;text-decoration:none;cursor:pointer}.results .searchResults .resultItem .resultTitle a:visited{color:#609}.results .searchResults .resultItem .resultTitle a:hover{text-decoration:underline}.results .searchResults .resultItem .resultTitle a:focus{outline:2px solid #000}.results .searchResults .resultItem .resultContents{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.results .searchResults .resultItem .resultContents .resultImage{margin-right:0.5rem}.results .searchResults .resultItem .resultContents .resultText{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:14px;line-height:20px;max-height:60px;overflow:hidden;text-overflow:ellipsis}@media only screen and (min-width: 768px){.results .searchResults .resultItem .resultContents .resultText{font-size:1rem;line-height:28px}} 2 | /*# sourceMappingURL=style.min.css.map */ -------------------------------------------------------------------------------- /Searchy-Search_Engine/dist/css/style.min.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "../../sass/style.scss", 6 | "../../sass/_base.scss", 7 | "../../sass/_sharedClasses.scss", 8 | "../../sass/_searchEntry.scss", 9 | "../../sass/_searchResults.scss" 10 | ], 11 | "names": [], 12 | "file": "style.min.css" 13 | } -------------------------------------------------------------------------------- /Searchy-Search_Engine/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Searchy-Search_Engine/icon.png -------------------------------------------------------------------------------- /Searchy-Search_Engine/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 15 | 16 | Searchy - Wikipedia Powered Search Engine 17 | 18 | 19 | 20 |
21 |

Searchy, a Search Engine Powered by the Wikipedia.

22 |
23 |

Search Term Entry

24 | 33 | 43 |
44 |
45 |

Results Found

46 |
47 |
48 |
49 |
50 |
51 |
52 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /Searchy-Search_Engine/js/dataFunctions.js: -------------------------------------------------------------------------------- 1 | export const getSearchTerm = () => { 2 | const rawSearchTerm = document.getElementById("search").value.trim(); 3 | const regex = /[ ]{2,}/gi; 4 | const searchTerm = rawSearchTerm.replaceAll(regex, " "); 5 | return searchTerm; 6 | }; 7 | 8 | export const retrieveSearchResults = async (searchTerm) => { 9 | const wikiSearchString = getWikiSearchString(searchTerm); 10 | const wikiSearchResults = await requestData(wikiSearchString); 11 | let resultArray = []; 12 | if (wikiSearchResults.hasOwnProperty("query")) { 13 | resultArray = processWikiResults(wikiSearchResults.query.pages); 14 | } 15 | return resultArray; 16 | }; 17 | 18 | const getWikiSearchString = (searchTerm) => { 19 | const maxChars = getMaxChars(); 20 | const rawSearchString = `https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrsearch=${searchTerm}&gsrlimit=20&prop=pageimages|extracts&exchars=${maxChars}&exintro&explaintext&exlimit=max&format=json&origin=*`; 21 | const searchString = encodeURI(rawSearchString); 22 | return searchString; 23 | }; 24 | 25 | const getMaxChars = () => { 26 | const width = window.innerWidth || document.body.clientWidth; 27 | let maxChars; 28 | if (width < 414) maxChars = 65; 29 | if (width >= 414 && width < 1400) maxChars = 100; 30 | if (width >= 1400) maxChars = 130; 31 | return maxChars; 32 | }; 33 | 34 | const requestData = async (searchString) => { 35 | try { 36 | const response = await fetch(searchString); 37 | const data = await response.json(); 38 | return data; 39 | } catch (err) { 40 | console.error(err); 41 | } 42 | }; 43 | 44 | const processWikiResults = (results) => { 45 | const resultArray = []; 46 | Object.keys(results).forEach((key) => { 47 | const id = key; 48 | const title = results[key].title; 49 | const text = results[key].extract; 50 | const img = results[key].hasOwnProperty("thumbnail") 51 | ? results[key].thumbnail.source 52 | : null; 53 | const item = { 54 | id: id, 55 | title: title, 56 | img: img, 57 | text: text 58 | }; 59 | resultArray.push(item); 60 | }); 61 | return resultArray; 62 | }; 63 | -------------------------------------------------------------------------------- /Searchy-Search_Engine/js/main.js: -------------------------------------------------------------------------------- 1 | import { 2 | setSearchFocus, 3 | showClearTextButton, 4 | clearSearchText, 5 | clearPushListener 6 | } from "./searchBar.js"; 7 | import { 8 | deleteSearchResults, 9 | buildSearchResults, 10 | clearStatsLine, 11 | setStatsLine 12 | } from "./searchResults.js"; 13 | import { getSearchTerm, retrieveSearchResults } from "./dataFunctions.js"; 14 | 15 | document.addEventListener("readystatechange", (event) => { 16 | if (event.target.readyState === "complete") { 17 | initApp(); 18 | } 19 | }); 20 | 21 | const initApp = () => { 22 | setSearchFocus(); 23 | const search = document.getElementById("search"); 24 | search.addEventListener("input", showClearTextButton); 25 | const clear = document.getElementById("clear"); 26 | clear.addEventListener("click", clearSearchText); 27 | clear.addEventListener("keydown", clearPushListener); 28 | const form = document.getElementById("searchBar"); 29 | form.addEventListener("submit", submitTheSearch); 30 | }; 31 | 32 | // Procedural "workflow" function 33 | const submitTheSearch = (event) => { 34 | event.preventDefault(); 35 | deleteSearchResults(); 36 | processTheSearch(); 37 | setSearchFocus(); 38 | }; 39 | 40 | // Procedural 41 | const processTheSearch = async () => { 42 | clearStatsLine(); 43 | const searchTerm = getSearchTerm(); 44 | if (searchTerm === "") return; //TODO: 45 | const resultArray = await retrieveSearchResults(searchTerm); 46 | if (resultArray.length) buildSearchResults(resultArray); 47 | setStatsLine(resultArray.length); 48 | }; 49 | -------------------------------------------------------------------------------- /Searchy-Search_Engine/js/searchBar.js: -------------------------------------------------------------------------------- 1 | export const setSearchFocus = () => { 2 | document.getElementById("search").focus(); 3 | }; 4 | 5 | export const showClearTextButton = () => { 6 | const search = document.getElementById("search"); 7 | const clear = document.getElementById("clear"); 8 | if (search.value.length) { 9 | clear.classList.remove("none"); 10 | clear.classList.add("flex"); 11 | } else { 12 | clear.classList.add("none"); 13 | clear.classList.remove("flex"); 14 | } 15 | }; 16 | 17 | export const clearSearchText = (event) => { 18 | event.preventDefault(); 19 | document.getElementById("search").value = ""; 20 | const clear = document.getElementById("clear"); 21 | clear.classList.add("none"); 22 | clear.classList.remove("flex"); 23 | setSearchFocus(); 24 | }; 25 | 26 | export const clearPushListener = (event) => { 27 | if (event.key === "Enter" || event.key === " ") { 28 | event.preventDefault(); 29 | document.getElementById("clear").click(); 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /Searchy-Search_Engine/js/searchResults.js: -------------------------------------------------------------------------------- 1 | export const deleteSearchResults = () => { 2 | const parentElement = document.getElementById("searchResults"); 3 | let child = parentElement.lastElementChild; 4 | while (child) { 5 | parentElement.removeChild(child); 6 | child = parentElement.lastElementChild; 7 | } 8 | }; 9 | 10 | export const buildSearchResults = (resultArray) => { 11 | resultArray.forEach((result) => { 12 | const resultItem = createResultItem(result); 13 | const resultContents = document.createElement("div"); 14 | resultContents.classList.add("resultContents"); 15 | if (result.img) { 16 | const resultImage = createResultImage(result); 17 | resultContents.append(resultImage); 18 | } 19 | const resultText = createResultText(result); 20 | resultContents.append(resultText); 21 | resultItem.append(resultContents); 22 | const searchResults = document.getElementById("searchResults"); 23 | searchResults.append(resultItem); 24 | }); 25 | }; 26 | 27 | const createResultItem = (result) => { 28 | const resultItem = document.createElement("div"); 29 | resultItem.classList.add("resultItem"); 30 | const resultTitle = document.createElement("div"); 31 | resultTitle.classList.add("resultTitle"); 32 | const link = document.createElement("a"); 33 | link.href = `https://en.wikipedia.org/?curid=${result.id}`; 34 | link.textContent = result.title; 35 | link.target = "_blank"; 36 | resultTitle.append(link); 37 | resultItem.append(resultTitle); 38 | return resultItem; 39 | }; 40 | 41 | const createResultImage = (result) => { 42 | const resultImage = document.createElement("div"); 43 | resultImage.classList.add("resultImage"); 44 | const img = document.createElement("img"); 45 | img.src = result.img; 46 | img.alt = result.title; 47 | resultImage.append(img); 48 | return resultImage; 49 | }; 50 | 51 | const createResultText = (result) => { 52 | const resultText = document.createElement("div"); 53 | resultText.classList.add("resultText"); 54 | const resultDescription = document.createElement("p"); 55 | resultDescription.classList.add("resultDescription"); 56 | resultDescription.textContent = result.text; 57 | resultText.append(resultDescription); 58 | return resultText; 59 | }; 60 | 61 | export const clearStatsLine = () => { 62 | document.getElementById("stats").textContent = ""; 63 | }; 64 | 65 | export const setStatsLine = (numberOfResults) => { 66 | const statLine = document.getElementById("stats"); 67 | if (numberOfResults) { 68 | statLine.textContent = `Displaying ${numberOfResults} results.`; 69 | } else { 70 | statLine.textContent = "Sorry, no results."; 71 | } 72 | }; 73 | -------------------------------------------------------------------------------- /Searchy-Search_Engine/sass/_base.scss: -------------------------------------------------------------------------------- 1 | $search-bar-border: #e6e6e6; 2 | $stats-color: #70757a; 3 | $clear-button-color: #d9d9d9; 4 | $background-color: #fff; 5 | $font-color: #000; 6 | $logo-blue: #4885ed; 7 | $logo-red: #db3236; 8 | $logo-yellow: #ffc107; 9 | $logo-green: #3cba54; 10 | $link-color: #1a0dab; 11 | $link-visited-color: #609; 12 | $link-outline-color: #000; 13 | $font-stack: "Roboto", Arial, sans-serif; 14 | 15 | %flex { 16 | display: flex; 17 | align-items: center; 18 | } 19 | 20 | @mixin flexColumn { 21 | @extend %flex; 22 | flex-direction: column; 23 | justify-content: flex-start; 24 | } 25 | 26 | @mixin flexCenter { 27 | @extend %flex; 28 | justify-content: center; 29 | } 30 | 31 | @mixin mq($size) { 32 | @media only screen and (min-width: $size) { 33 | @content; 34 | } 35 | } 36 | 37 | * { 38 | padding: 0; 39 | margin: 0; 40 | box-sizing: border-box; 41 | } 42 | 43 | html, 44 | body { 45 | background-color: $background-color; 46 | color: $font-color; 47 | width: 100vw; 48 | min-height: 100vh; 49 | font-family: $font-stack; 50 | font-size: 22px; 51 | } 52 | 53 | main { 54 | @include flexColumn; 55 | min-height: calc(100vh - 60px); 56 | } 57 | 58 | footer { 59 | width: 100%; 60 | height: 60px; 61 | @include flexCenter; 62 | 63 | p { 64 | color: $stats-color; 65 | font-size: 0.5rem; 66 | @include mq(768px) { 67 | font-size: 1rem; 68 | } 69 | 70 | a { 71 | color: $stats-color; 72 | } 73 | } 74 | } 75 | 76 | img { 77 | display: block; 78 | } 79 | -------------------------------------------------------------------------------- /Searchy-Search_Engine/sass/_searchEntry.scss: -------------------------------------------------------------------------------- 1 | .searchEntry { 2 | @include flexColumn; 3 | padding-top: 40px; 4 | 5 | .logo { 6 | letter-spacing: -5px; 7 | font-size: 2rem; 8 | font-weight: 600; 9 | margin-bottom: 0.5rem; 10 | @include mq(768px) { 11 | font-size: 4rem; 12 | letter-spacing: -10px; 13 | } 14 | } 15 | 16 | .searchBar { 17 | width: 90vw; 18 | display: flex; 19 | border: 2px solid $search-bar-border; 20 | border-radius: 500px; 21 | padding: 0.15rem 0.25rem 0.15rem 0.75rem; 22 | @include mq(768px) { 23 | width: 80vw; 24 | padding: 1.25rem 1.5rem; 25 | } 26 | @include mq(1025px) { 27 | width: 60vw; 28 | } 29 | 30 | input[type="text"] { 31 | flex-grow: 1; 32 | font-size: 0.75rem; 33 | text-align: left; 34 | letter-spacing: 0.1rem; 35 | border: 0; 36 | outline: none; 37 | min-width: 150px; 38 | @include mq(768px) { 39 | font-size: 1.25rem; 40 | } 41 | } 42 | 43 | .button { 44 | cursor: pointer; 45 | border: 0; 46 | background: transparent; 47 | min-width: 48px; 48 | min-height: 48px; 49 | outline: none; 50 | 51 | i { 52 | font-family: "Font Awesome 5 Free"; 53 | font-size: 1rem; 54 | @include mq(768px) { 55 | font-size: 1.5rem; 56 | } 57 | } 58 | } 59 | 60 | .button:hover, 61 | .button:focus { 62 | i { 63 | padding-bottom: 0.5rem; 64 | border-bottom-width: 1px; 65 | border-bottom-style: solid; 66 | } 67 | } 68 | 69 | .searchButton:hover, 70 | .searchButton:focus { 71 | i { 72 | color: $logo-green; 73 | } 74 | } 75 | 76 | .clear:hover, 77 | .clear:focus { 78 | i { 79 | color: $logo-red; 80 | } 81 | } 82 | 83 | .searchButton { 84 | @include mq(768px) { 85 | padding-left: 1rem; 86 | } 87 | } 88 | 89 | .clear { 90 | justify-content: center; 91 | align-items: center; 92 | color: $stats-color; 93 | border-right: thin solid $clear-button-color; 94 | @include mq(768px) { 95 | padding: 0 1rem; 96 | } 97 | } 98 | } 99 | 100 | .searchBar:hover, 101 | .searchBar:focus-within { 102 | box-shadow: 0 2px 5px 2px $search-bar-border; 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /Searchy-Search_Engine/sass/_searchResults.scss: -------------------------------------------------------------------------------- 1 | .results { 2 | @include flexColumn; 3 | padding: 0.5rem 1rem; 4 | width: 90vw; 5 | @include mq(768px) { 6 | width: 75vw; 7 | } 8 | @include mq(1025px) { 9 | width: 55vw; 10 | } 11 | 12 | .statsBar { 13 | width: 100%; 14 | 15 | .stats { 16 | color: $stats-color; 17 | font-size: 0.75rem; 18 | @include mq(768px) { 19 | font-size: 1rem; 20 | } 21 | } 22 | } 23 | 24 | .searchResults { 25 | width: 100%; 26 | 27 | .resultItem { 28 | @include flexColumn; 29 | width: 100%; 30 | padding: 0.25rem 0; 31 | @include mq(768px) { 32 | padding: 0.5rem 0; 33 | } 34 | 35 | .resultTitle { 36 | width: 100%; 37 | text-align: left; 38 | font-size: 1rem; 39 | line-height: 1.5rem; 40 | margin-bottom: 0.25rem; 41 | overflow: hidden; 42 | white-space: nowrap; 43 | text-overflow: ellipsis; 44 | padding: 3px 2px; 45 | @include mq(768px) { 46 | font-size: 1.5rem; 47 | line-height: 1.75rem; 48 | margin-bottom: 0.5rem; 49 | } 50 | 51 | a { 52 | color: $link-color; 53 | text-decoration: none; 54 | cursor: pointer; 55 | } 56 | 57 | a:visited { 58 | color: $link-visited-color; 59 | } 60 | 61 | a:hover { 62 | text-decoration: underline; 63 | } 64 | 65 | a:focus { 66 | outline: 2px solid $link-outline-color; 67 | } 68 | } 69 | 70 | .resultContents { 71 | display: flex; 72 | width: 100%; 73 | 74 | .resultImage { 75 | margin-right: 0.5rem; 76 | } 77 | 78 | .resultText { 79 | flex-grow: 1; 80 | font-size: 14px; 81 | line-height: 20px; 82 | max-height: 60px; 83 | overflow: hidden; 84 | text-overflow: ellipsis; 85 | @include mq(768px) { 86 | font-size: 1rem; 87 | line-height: 28px; 88 | } 89 | } 90 | } 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /Searchy-Search_Engine/sass/_sharedClasses.scss: -------------------------------------------------------------------------------- 1 | .blue { 2 | color: $logo-blue; 3 | } 4 | 5 | .red { 6 | color: $logo-red; 7 | } 8 | 9 | .yellow { 10 | color: $logo-yellow; 11 | } 12 | 13 | .green { 14 | color: $logo-green; 15 | } 16 | 17 | .exclaim { 18 | display: inline-block; 19 | font-size: 2.5rem; 20 | transform: rotate(12deg); 21 | @include mq(768px) { 22 | font-size: 5rem; 23 | } 24 | } 25 | 26 | .offscreen { 27 | position: absolute; 28 | left: -10000px; 29 | } 30 | 31 | .none { 32 | display: none; 33 | } 34 | 35 | .flex { 36 | display: flex; 37 | } 38 | -------------------------------------------------------------------------------- /Searchy-Search_Engine/sass/style.scss: -------------------------------------------------------------------------------- 1 | @import "_base"; 2 | @import "_sharedClasses"; 3 | @import "_searchEntry"; 4 | @import "_searchResults"; 5 | -------------------------------------------------------------------------------- /Survey_Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Survey Form 9 | 10 | 13 | 14 | 74 | 75 | 76 | 77 |

XYZ.com Survey Form

78 |

79 | Thank you for taking the time to help us improve the platform. 80 |

81 | 82 |
83 |
84 | 85 | 86 |
87 | 88 |
89 | 90 | 91 |
92 | 93 |
94 | 95 | 96 |
97 | 98 |
99 | 100 | 107 |
108 | 109 |
110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 |
122 | 123 |
124 | 125 | 126 | 127 | 128 |
129 | 130 |
131 | 132 | 133 |
134 | 135 | 136 |
137 | 138 | 139 | -------------------------------------------------------------------------------- /Technical_Documentation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | C++ | Technical Documentation 9 | 10 | 11 | 48 | 49 | 50 | 51 |
52 | 61 | 62 |
63 |
64 |
65 | What is C++? 66 |
67 |

68 | C++ is a general purpose programming language and widely used now a days for competitive 69 | programming. It has imperative, object-oriented and generic programming features. C++ runs on lots 70 | of platform like Windows, Linux, Unix, Mac etc. C++ is an efficient and powerful language and finds 71 | wide use in various GUI platforms, 3D graphics and real-time simulations. Because of the inclusion 72 | of rich function libraries, working in C++ becomes simpler and convenient than C. Being 73 | object-oriented programming like Java, C++ provides the support of inheritance, polymorphism, 74 | encapsulation, etc. Unlike C, C++ allows exception handling and function overloading. 75 |

76 |

he “Hello World” program is the first step towards learning any programming language and also one of 77 | the simplest programs you will learn. All you have to do is display the message “Hello World” on the 78 | screen. 79 |

Let us now look at the program :
80 |

81 | 82 | #include 83 |
84 | using namespace std; 85 |
86 | int main() 87 |
88 | { 89 |
90 | cout〈〈"Hello World"; 91 |
92 | return 0; 93 |
94 | } 95 | 96 |
97 |

C++ is an Object Oriented Programming Language.
98 | The main pilars of Object Oriented Programming are :

99 |
    100 |
  • Objects and Classes
    • 101 |
  • Inheritance
    • 102 |
  • Polymorphism
    • 103 |
  • Abstraction
    • 104 |
  • Encapsulation
    • 105 |
106 | 107 |
108 | 109 |
110 |
111 | Objects and Classes 112 |
113 |

114 | Object-oriented programming – As the name suggests uses objects in programming. Object-oriented 115 | programming aims to implement real-world entities like inheritance, hiding, polymorphism, etc in 116 | programming. The main aim of OOP is to bind together the data and the functions that operate on them 117 | so that no other part of the code can access this data except that function. 118 |

119 |

Object : An Object is an identifiable entity with some characteristics and behaviour. An 120 | Object is an instance of a Class. When a class is defined, no memory is allocated but when it 121 | is instantiated (i.e. an object is created) memory is allocated. 122 |
123 | Class : The building block of C++ that leads to Object-Oriented programming is a Class. It is 124 | a user-defined data type, which holds its own data members and member functions, which can be 125 | accessed & used by creating an instance of that class. A class is like a blueprint for an object. 126 | For Example: Consider the Class of Cars. There may be many cars with different names and brand but 127 | all of them will share some common properties like all of them will have 4 wheels, Speed Limit, 128 | Mileage range etc. So here, Car is the class and wheels, speed limits, mileage are their properties. 129 |

130 |
131 | 132 |
133 |
134 | Inheritance 135 |
136 |

137 | The capability of a class to derive properties and characteristics from another class is called 138 | Inheritance. Inheritance is one of the most important feature of Object Oriented Programming. 139 | Sub Class: The class that inherits properties from another class is called Sub class or Derived 140 | Class.Super Class:The class whose properties are inherited by sub class is called Base Class or 141 | Super class. Using inheritance, we have to write the functions only one time instead of three 142 | times as we have inherited rest of the three classes from base class(Vehicle). 143 |

144 |

Mode of Inheritance :

145 | 146 | Public Mode : If we derive a sub class from a public base class. Then the public member of 147 | the base 148 | class will become public in the derived class and protected members of the base class will become 149 | protected in derived class. 150 |

151 | Protected Mode : If we derive a sub class from a Protected base class. Then both public 152 | member and protected members of the base class will become protected in derived class. 153 |

154 | Private Mode : If we derive a sub class from a Private base class. Then both public member 155 | and protected members of the base class will become Private in derived class. 156 |

157 | Types of Inheritance in C++ : 158 |


159 | Single Inheritance : In single inheritance, a class is allowed to inherit from only one 160 | class. i.e. one sub class is inherited by one base class only. 161 |

162 | Multiple Inheritance : Multiple Inheritance is a feature of C++ where a class can inherit 163 | from more than one classes. i.e one sub class is inherited from more than one base classes. 164 |

165 | Multilevel Inheritance : In this type of inheritance, a derived class is created from another 166 | derived class. 167 |

168 | Hierarical Inheritance : In this type of inheritance, more than one sub class is inherited 169 | from a single base class i.e. more than one derived class is created from a single base class. 170 |

171 | Hybrid (Virtual) Inheritance : Hybrid Inheritance is implemented by combining more than one 172 | type of inheritance. For example: Combining Hierarchical inheritance and Multiple Inheritance. 173 |

174 |
175 | 176 |
177 |
178 | Polymorphism 179 |
180 |

181 | The word polymorphism means having many forms. In simple words, we can define polymorphism as the 182 | ability of a message to be displayed in more than one form. A real-life example of polymorphism, a 183 | person at the same time can have different characteristics. Like a man at the same time is a father, 184 | a husband, an employee. So the same person posses different behavior in different situations. This 185 | is called polymorphism. Polymorphism is considered as one of the important features of Object 186 | Oriented Programming. 187 |
188 | In C++ polymorphism is mainly divided into two types: 189 |
190 | 1. Compile time Polymorphism
191 | 2. Runtime Polymorphism 192 | 193 |

194 |

Compile time polymorphism: This type of polymorphism is achieved by function overloading or operator 195 | overloading.
196 | Runtime polymorphism: This type of polymorphism is achieved by Function Overriding. 197 |

198 |
199 | 200 |
201 |
202 | Abstraction 203 |
204 |

205 | Data abstraction is one of the most essential and important feature of object oriented programming 206 | in C++. Abstraction means displaying only essential information and hiding the details. Data 207 | abstraction refers to providing only essential information about the data to the outside world, 208 | hiding the background details or implementation. 209 |
210 | Consider a real life example of a man driving a car. The man only knows that pressing the 211 | accelerators will increase the speed of car or applying brakes will stop the car but he does not 212 | know about how on pressing accelerator the speed is actually increasing, he does not know about the 213 | inner mechanism of the car or the implementation of accelerator, brakes etc in the car. This is what 214 | abstraction is. 215 |

216 |

Abstraction using Classes: We can implement Abstraction in C++ using classes. Class helps us 217 | to 218 | group data members and member functions using available access specifiers. A Class can decide which 219 | data member will be visible to outside world and which is not. 220 |
221 | Abstraction in Header files: One more type of abstraction in C++ can be header files. For 222 | example, 223 | consider the pow() method present in math.h header file. Whenever we need to calculate power of a 224 | number, we simply call the function pow() present in the math.h header file and pass the numbers as 225 | arguments without knowing the underlying algorithm according to which the function is actually 226 | calculating power of numbers. 227 |

Advantages of Data Abstraction:
228 | 229 | 1. Helps the user to avoid writing the low level code.
230 | 2. Avoids code duplication and increases reusability.
231 | 3. Can change internal implementation of class independently without affecting the user.
232 | 4. Helps to increase security of an application or program as only important details are provided to 233 | the user. 234 |

235 |
236 | 237 |
238 |
239 | Encapsulation 240 |
241 |

242 | In normal terms Encapsulation is defined as wrapping up of data and information under a single unit. 243 | In Object Oriented Programming, Encapsulation is defined as binding together the data and the 244 | functions that manipulates them. Consider a real life example of encapsulation, in a company there 245 | are different sections like the accounts section, finance section, sales section etc. 246 | The finance section handles all the financial transactions and keep records of all the data related 247 | to finance. Similarly the sales section handles all the sales related activities and keep records 248 | of all the sales. Now there may arise a situation when for some reason an official from finance 249 | section needs all the data about sales in a particular month. In this case, he is not allowed to 250 | directly access the data of sales section. He will first have to contact some other officer in the 251 | sales section and then request him to give the particular data. This is what encapsulation is. 252 | Here the data of sales section and the employees that can manipulate them are wrapped under a 253 | single name “sales section”. 254 |

Encapsulation also lead to data abstraction or hiding. As using encapsulation also hides the data. In 255 | the above example the data of any of the section like sales, finance or accounts is hidden from any 256 | other section.
257 | In C++ encapsulation can be implemented using Class and access modifiers.

258 |
259 | 260 |
261 |
262 | 263 | 264 | -------------------------------------------------------------------------------- /ToDo_List/app.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | const form1 = document.querySelector("#addForm"); 3 | 4 | let items = document.getElementById("items"); 5 | let submit = document.getElementById("submit"); 6 | 7 | let editItem = null; 8 | 9 | form1.addEventListener("submit", addItem); 10 | items.addEventListener("click", removeItem); 11 | }; 12 | 13 | function addItem(e) { 14 | e.preventDefault(); 15 | if (submit.value != "Submit") { 16 | editItem.target.parentNode.childNodes[0].data = 17 | document.getElementById("item").value; 18 | submit.value = "Submit"; 19 | document.getElementById("item").value = ""; 20 | 21 | document.getElementById("lblsuccess").innerHTML = 22 | "Text Edited successfully"; 23 | 24 | document.getElementById("lblsuccess").style.display = "block"; 25 | 26 | setTimeout(function () { 27 | document.getElementById("lblsuccess").style.display = "none"; 28 | }, 3000); 29 | 30 | return false; 31 | } 32 | 33 | let newItem = document.getElementById("item").value; 34 | if (newItem.trim() == "" || newItem.trim() == null) return false; 35 | else document.getElementById("item").value = ""; 36 | 37 | let li = document.createElement("li"); 38 | li.className = "list-group-item"; 39 | 40 | let deleteButton = document.createElement("button"); 41 | deleteButton.className = "btn-danger btn btn-md float-right mx-3 delete"; 42 | 43 | deleteButton.appendChild(document.createTextNode("Delete")); 44 | 45 | let editButton = document.createElement("button"); 46 | editButton.className = "btn-warning btn btn-md float-right edit"; 47 | 48 | editButton.appendChild(document.createTextNode("Edit")); 49 | 50 | li.appendChild(document.createTextNode(newItem)); 51 | li.appendChild(deleteButton); 52 | li.appendChild(editButton); 53 | 54 | items.appendChild(li); 55 | } 56 | 57 | function removeItem(e) { 58 | e.preventDefault(); 59 | if (e.target.classList.contains("delete")) { 60 | if (confirm("Are you Sure?")) { 61 | let li = e.target.parentNode; 62 | items.removeChild(li); 63 | document.getElementById("lblsuccess").innerHTML = 64 | "Text deleted successfully"; 65 | document.getElementById("lblsuccess").style.display = "block"; 66 | setTimeout(function () { 67 | document.getElementById("lblsuccess").style.display = "none"; 68 | }, 3000); 69 | } 70 | } 71 | if (e.target.classList.contains("edit")) { 72 | document.getElementById("item").value = 73 | e.target.parentNode.childNodes[0].data; 74 | submit.value = "Save"; 75 | editItem = e; 76 | } 77 | } 78 | 79 | function toggleButton(ref, btnID) { 80 | document.getElementById(btnID).disabled = false; 81 | } 82 | -------------------------------------------------------------------------------- /ToDo_List/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | To Do List 13 | 14 | 15 | 16 |
17 |
18 |
19 |
20 | 21 | ToDo List 22 | 23 | 24 |
25 |
26 |
27 |
28 |
29 |

Add Items

30 | 31 | 32 |
33 |
34 |
36 |
38 |
39 |
40 | 41 |

Tasks

42 | 43 |
44 | 45 |
46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /Tribute_Page-APJ_Kalam/APJ_Kalam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/Tribute_Page-APJ_Kalam/APJ_Kalam.png -------------------------------------------------------------------------------- /Tribute_Page-APJ_Kalam/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | A.P.J. Kalam | Tribute Page 9 | 10 | 11 | 66 | 67 | 68 | 69 |
70 |

A.P.J. Abdul Kalam

71 |
72 | Error Loading Image 73 | Great Indian scientist and 74 | politician who played a leading role in the development 75 | of India’s missile and nuclear weapon programs. 76 |
77 |
78 |

About the Legend

79 |

80 | ☛ A.P.J. Abdul Kalam, in full Avul Pakir Jainulabdeen Abdul Kalam, was born on October 15, 1931, 81 | in Rameswaram, Tamil Nadu, India.

82 | 83 | ☛ He served as the 11th President of India from 2002 to 2007.

84 | 85 | ☛ Kalam earned a degree in aeronautical engineering from the Madras Institute of Technology and 86 | in 1958 joined the Defence Research and Development Organisation (DRDO).

87 | 88 | ☛ In 1969, he moved to the Indian Space Research Organisation, where he was project director of 89 | the SLV-III, the first satellite launch vehicle that was both designed and produced in India.

90 | 91 | ☛ Rejoining DRDO in 1982, Kalam planned the program that produced a number of 92 | successful missiles, which helped earn him the nickname “Missile Man.”

93 | 94 | ☛ Among those successes was Agni, India’s first intermediate-range ballistic missile, which 95 | incorporated aspects of the SLV-III and was launched in 1989.

96 | 97 | ☛ He also played a pivotal organisational, technical, and political role in India's Pokhran-II 98 | nuclear tests in 1998, the first since the original nuclear test by India in 1974.

99 | 100 | ☛ From 1992 to 1997 Kalam was scientific adviser to the defense minister, and he later served as 101 | principal scientific adviser (1999–2001) to the government with the rank of cabinet minister.

102 | 103 | ☛ His prominent role in the country’s 1998 nuclear weapons tests solidified India as a nuclear 104 | power and established Kalam as a national hero, although the tests caused great concern in the 105 | international community.

106 | 107 | ☛ In 1998 Kalam put forward a countrywide plan called Technology Vision 2020, which he described 108 | as a road map for transforming India from a less-developed to a developed society in 20 years. 109 | The plan called for, among other measures, increasing agricultural productivity, emphasizing technology 110 | as a vehicle for economic growth, and widening access to health care and education.

111 | 112 | ☛ Kalam received 7 honorary doctorates from 40 universities. The Government of 113 | India honoured him with the Padma Bhushan in 1981 and the Padma Vibhushan in 1990 114 | for his work with ISRO and DRDO and his role as a scientific advisor to the Government.

115 | 116 | ☛ In 1997, Kalam received India's highest civilian honour, the Bharat Ratna, for his contribution 117 | to the scientific research and modernisation of defence technology in India.

118 | 119 | ☛ In 2013, he was the recipient of the Von Braun Award from the National Space Society "to 120 | recognize excellence in the management and leadership of a space-related project".

121 | 122 | ☛ While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and 123 | died from an 124 | apparent cardiac arrest on 27 July 2015 , aged 83.

125 | 126 | ☛ Wheeler Island, a national missile test site in Odisha, was renamed Kalam Island in 127 | September 2015.

128 | 129 | ☛ A prominent road in New Delhi was renamed from Aurangzeb Road to Dr APJ Abdul Kalam Road 130 | in August 2015.

131 | 132 | ☛ In February 2018, scientists from the Botanical Survey of India named a newly found plant 133 | species as Drypetes kalamii, in his honour.


134 | 135 |

136 |
137 |
    138 |
139 | For more information, check out 140 | 141 | A.P.J. Abdul Kalam on Wikipedia. 142 |
143 |
144 | 145 | 146 | -------------------------------------------------------------------------------- /cloud_note/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | /.pnp 3 | .pnp.js 4 | 5 | # testing 6 | /coverage 7 | 8 | # production 9 | /build 10 | 11 | # misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /cloud_note/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/cloud_note/README.md -------------------------------------------------------------------------------- /cloud_note/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cloud_note", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.2", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "concurrently": "^7.0.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-router-dom": "^6.2.1", 13 | "react-scripts": "5.0.0", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject", 21 | "both": "concurrently \"npm run start\" \"nodemon backend/index.js\"" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /cloud_note/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/cloud_note/public/favicon.ico -------------------------------------------------------------------------------- /cloud_note/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | CloudNote - Save Your Notes on the Cloud securely. 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /cloud_note/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/cloud_note/public/logo192.png -------------------------------------------------------------------------------- /cloud_note/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/cloud_note/public/logo512.png -------------------------------------------------------------------------------- /cloud_note/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "CloudNote", 3 | "name": "CloudNote is a secure React WebApp that saves your Notes on the cloud.", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /cloud_note/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/cloud_note/src/App.css -------------------------------------------------------------------------------- /cloud_note/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |
7 |
8 | logo 9 |

10 | Edit src/App.js and save to reload. 11 |

12 | 18 | Learn React 19 | 20 |
21 |
22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /cloud_note/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/cloud_note/src/index.css -------------------------------------------------------------------------------- /cloud_note/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /news_teller/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /news_teller/README.md: -------------------------------------------------------------------------------- 1 | # NewsTeller 📰: A React App 2 | 3 | ## Tech Stacks 👨‍💻 4 | - HTML 5 | - CSS 6 | - BootStrap 7 | - React JS 8 | 9 | --- 10 | 11 | The NewsTeller Application uses the [NewsAPI](https://newsapi.org/), for fetching the news. 12 | 13 | --- 14 | 15 | ## About the Project and Features 🤩 16 | NewsTeller is a news app which can be used to grab quick daily news bites. If you are interested in updating yourself with daily news, NewsTeller is for you! 17 | 18 | ## Categories Available 🗞️ 19 | NewsTeller covers wide variety of categories such as - business, 20 | - entertainment, 21 | - general, 22 | - health, 23 | - science, 24 | - sports, 25 | - technology. 26 | 27 | --- 28 | 29 | ![](./output.png) 30 | 31 | --- -------------------------------------------------------------------------------- /news_teller/output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/news_teller/output.png -------------------------------------------------------------------------------- /news_teller/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "news_teller", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.2", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "5.0.0", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /news_teller/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/news_teller/public/favicon.ico -------------------------------------------------------------------------------- /news_teller/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | NewsTeller - Get Your Daily Dose of News absolutely free! 15 | 16 | 17 | 18 | 19 |
20 | 21 | 24 | 27 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /news_teller/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/news_teller/public/logo192.png -------------------------------------------------------------------------------- /news_teller/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/news_teller/public/logo512.png -------------------------------------------------------------------------------- /news_teller/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "NewsTeller", 3 | "name": "NewsTeller built using React and NEWS API", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /news_teller/src/App.css: -------------------------------------------------------------------------------- 1 | .text-changer { 2 | font-family: cursive; 3 | } 4 | 5 | .text-changer2 { 6 | font-family: monospace; 7 | } 8 | 9 | .bg-dark2 { 10 | background-color: #1f2327; 11 | } 12 | 13 | .top-margin { 14 | margin-top: 7.5rem; 15 | margin-bottom: 2.5rem; 16 | } 17 | -------------------------------------------------------------------------------- /news_teller/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import React, { Component } from "react"; 3 | import Navbar from "./components/Navbar"; 4 | import News from "./components/News"; 5 | 6 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; 7 | 8 | export class App extends Component { 9 | render() { 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 | 29 | 30 | 31 | 32 | 37 | 38 | 39 | 40 | 45 | 46 | 47 | 48 | 53 | 54 | 55 | 56 | 61 | 62 | 63 | 64 | 69 | 70 | 71 | 72 | 77 | 78 | 79 | 80 |
81 | ); 82 | } 83 | } 84 | 85 | export default App; 86 | -------------------------------------------------------------------------------- /news_teller/src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "../App.css"; 3 | import { Link } from "react-router-dom"; 4 | export class Navbar extends Component { 5 | render() { 6 | return ( 7 |
8 | 94 |
95 | ); 96 | } 97 | } 98 | 99 | export default Navbar; 100 | -------------------------------------------------------------------------------- /news_teller/src/components/News.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "../App.css"; 3 | import NewsComponent from "./NewsComponent"; 4 | import Spinner from "./Spinner"; 5 | import PropTypes from "prop-types"; 6 | 7 | export class News extends Component { 8 | // setting default props 9 | static defaultProps = { 10 | pageSize: 9, 11 | category: "general", 12 | }; 13 | 14 | static propTypes = { 15 | pageSize: PropTypes.number, 16 | category: PropTypes.string, 17 | }; 18 | 19 | // initially there will be no articles, and we will fetch the articles from the NEWS API. We will set the articles to the fetched articles using setState(); 20 | constructor() { 21 | super(); 22 | this.state = { 23 | articles: [], 24 | loading: false, 25 | }; 26 | } 27 | 28 | // getting the data from the NEWS API. 29 | async componentDidMount() { 30 | let newsUrl = `https://newsapi.org/v2/top-headlines?country=in&pageSize=${this.props.pageSize}&category=${this.props.category}&apiKey=${this.props.apiKey}`; 31 | 32 | // loading... 33 | this.setState({ loading: true }); 34 | 35 | let newsData = await fetch(newsUrl); 36 | 37 | // converting the raw data into JSON format. 38 | let parsedData = await newsData.json(); 39 | 40 | // setting the articles with the real time data and as the data is loading, set the loading to false. 41 | this.setState({ articles: parsedData.articles, loading: false }); 42 | } 43 | 44 | render() { 45 | return ( 46 |
47 |

48 | NewsTeller - Get your Daily Dose of News! 49 |

50 | 51 | {/* Will show the spinner at the time of loading only. */} 52 | {this.state.loading && } 53 | 54 |
55 | {this.state.articles.map((element) => { 56 | return ( 57 |
58 | 64 |
65 | ); 66 | })} 67 |
68 |
69 | ); 70 | } 71 | } 72 | 73 | export default News; 74 | -------------------------------------------------------------------------------- /news_teller/src/components/NewsComponent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export class NewsComponent extends Component { 4 | render() { 5 | let default_image = 6 | "https://thumbs.dreamstime.com/b/newspaper-headline-news-51970209.jpg"; 7 | let default_title = "No Title Provided"; 8 | let default_description = "No Description is Available :("; 9 | // Destructuring the props 10 | let { title, description, urlToImage, url} = this.props; 11 | 12 | return ( 13 |
14 |
15 | News 20 |
21 |
22 | {title ? title : default_title} 23 |
24 |
25 |

26 | {description ? description : default_description} 27 |

28 | 29 |
30 |
31 | 37 | Read More 38 | 39 |
40 |
41 |
42 |
43 | ); 44 | } 45 | } 46 | 47 | export default NewsComponent; 48 | -------------------------------------------------------------------------------- /news_teller/src/components/Spinner.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import loading from "./loading.gif"; 3 | 4 | export class Spinner extends Component { 5 | render() { 6 | return ( 7 |
8 | Loading 9 |
10 | ); 11 | } 12 | } 13 | 14 | export default Spinner; 15 | -------------------------------------------------------------------------------- /news_teller/src/components/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/news_teller/src/components/loading.gif -------------------------------------------------------------------------------- /news_teller/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import reportWebVitals from './reportWebVitals'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | 13 | reportWebVitals(); 14 | -------------------------------------------------------------------------------- /news_teller/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /text_helper/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /text_helper/README.md: -------------------------------------------------------------------------------- 1 | # Text Helper💁: A React App 2 | 3 | ### [Try Text Helper📝](https://imsushant12.github.io/Text-Helper-React/)- Word Counter, Transform Text, Remove Extra Spaces, and more! 4 | 5 | ### Tech Stacks 👨‍💻 6 | - HTML 7 | - CSS 8 | - BootStrap 9 | - React JS 10 | 11 | ## About the Project and Features 🤩 12 | ### Analyze your text 🗒️ 13 | Text Helper gives you a way to analyze your text quickly and efficiently. Be it reading time counter, word counter, character counter, sentence counter, text capitalizer, uppercase converter, lowercase converter, text inverter, and more. 14 | 15 | ### Free to use 🆓 16 | Text Helper is a free text utility tool that provides its users with a lot of features which is suitable for writing text with words or characters or sentences limits. 17 | 18 | ### Browser Compatible 🌐 19 | Text Helper utility software works well in any web browser such as Chrome, Firefox, Edge, Safari, Opera, etc. I suit to count characters in posts, blogs, books, journals, articles, essays, word documents, pdf documents, and text documents. 20 | 21 | -------------------------------------------------------------------------------- /text_helper/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "homepage": "https://imsushant12.github.io/Text-Helper-React", 3 | "name": "text_helper", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.1", 8 | "@testing-library/react": "^12.1.2", 9 | "@testing-library/user-event": "^13.5.0", 10 | "gh-pages": "^3.2.3", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-scripts": "5.0.0", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "predeploy": "npm run build", 18 | "deploy": "gh-pages -d build", 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /text_helper/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/text_helper/public/favicon-16x16.png -------------------------------------------------------------------------------- /text_helper/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/text_helper/public/favicon-32x32.png -------------------------------------------------------------------------------- /text_helper/public/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/text_helper/public/favicon-96x96.png -------------------------------------------------------------------------------- /text_helper/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/text_helper/public/favicon.ico -------------------------------------------------------------------------------- /text_helper/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsushant12/Web-Development-Projects/20c3de03f72c121d7d088acd87ca3f9dff0e2ea6/text_helper/public/favicon.png -------------------------------------------------------------------------------- /text_helper/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 16 | Text Helper - Home 17 | 18 | 19 | 20 |
21 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /text_helper/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Text Helper", 3 | "name": "Text Helper - an utility tool.", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "favicon-96x96.png", 12 | "type": "image/png", 13 | "sizes": "96x96" 14 | }, 15 | { 16 | "src": "favicon.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /text_helper/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /text_helper/src/App.css: -------------------------------------------------------------------------------- 1 | .text-changer{ 2 | font-family: monospace; 3 | } 4 | 5 | .btn-outline-dark { 6 | padding: 0.22rem; 7 | font-family: monospace; 8 | } 9 | 10 | .border{ 11 | border-radius: 0.35rem; 12 | } 13 | 14 | .alert{ 15 | padding: 0.25rem; 16 | } -------------------------------------------------------------------------------- /text_helper/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import Navbar from "./components/Navbar"; 3 | import InputForm from "./components/InputForm"; 4 | import Alert from "./components/Alert"; 5 | import React, { useState } from "react"; 6 | 7 | function App() { 8 | // Dark Mode logic! 9 | const [mode, setMode] = useState("light"); 10 | const [alert, setAlert] = useState(null); 11 | 12 | const showAlert = (message) => { 13 | setAlert({ 14 | msg: message, 15 | }); 16 | setTimeout(() => { 17 | setAlert(null); 18 | }, 2000); 19 | }; 20 | 21 | const toggleMode = () => { 22 | if (mode === "light") { 23 | setMode("dark"); 24 | document.body.style.backgroundColor = "#19252e"; 25 | document.body.style.color = "white"; 26 | } else { 27 | setMode("light"); 28 | document.body.style.backgroundColor = "white"; 29 | document.body.style.color = "black"; 30 | } 31 | }; 32 | 33 | return ( 34 | <> 35 | 36 | 37 |
38 | 44 |
45 | 46 | ); 47 | } 48 | 49 | export default App; 50 | -------------------------------------------------------------------------------- /text_helper/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /text_helper/src/components/Alert.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Alert(props) { 4 | return ( 5 | props.alert && ( 6 |
10 | {props.alert.msg} 11 |
12 | ) 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /text_helper/src/components/InputForm.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import PropTypes from "prop-types"; 3 | import "../App.css"; 4 | 5 | export default function InputForm(props) { 6 | const [text, setText] = useState(""); 7 | const changeEvent = (event) => { 8 | setText(event.target.value); 9 | }; 10 | 11 | const upperCase = () => { 12 | let newText = text.toUpperCase(); 13 | setText(newText); 14 | }; 15 | 16 | const lowerCase = () => { 17 | let newText = text.toLowerCase(); 18 | setText(newText); 19 | }; 20 | 21 | const trimText = () => { 22 | let newText = text.split(/[ ] + /).join(" "); 23 | setText(newText); 24 | }; 25 | 26 | const clearText = () => { 27 | let newText = ""; 28 | setText(newText); 29 | }; 30 | 31 | // reverse case logic! 32 | const inverseText = () => { 33 | let newText = (text) => 34 | [...text] 35 | .map((char) => 36 | char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase() 37 | ) 38 | .join(""); 39 | 40 | setText(newText); 41 | }; 42 | 43 | // Capitalize first letter logic! 44 | const capitalFirst = () => { 45 | const arr = text.split(" "); 46 | 47 | //loop through each element of the array and capitalize the first letter. 48 | for (var i = 0; i < arr.length; i++) { 49 | arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1); 50 | } 51 | 52 | //Join all the elements of the array back into a string 53 | //using a blank space as a separator 54 | setText(arr.join(" ")); 55 | }; 56 | 57 | // Clipboard copying logic! 58 | const clipboardCopy = () => { 59 | var copyText = text; 60 | navigator.clipboard.writeText(copyText); 61 | props.showAlert("📋Text copied successfully :)"); 62 | }; 63 | 64 | // Word counting logic! 65 | let wordLength = text.split(" ").length; 66 | if (text === "") wordLength = 0; 67 | 68 | // Length counting logic! 69 | const re = /[.!?]/; 70 | let sentences = text.split(re); 71 | let sentenceCount = sentences.length - 1; 72 | 73 | // reading time logic! 74 | let readingTime = Math.round(wordLength * 0.008); 75 | 76 | return ( 77 | <> 78 |
79 | 85 | 92 |
93 |
94 | 101 |
102 | 103 |
104 | 114 | 115 | 124 | 125 | 134 | 135 | 144 | 145 | 154 | 155 | 164 |
165 |
166 |

📜 Summary of your text

167 | 168 | {readingTime} minute(s) read 📖{" "} 169 | 170 |
171 | 172 | {sentenceCount} Sentence(s) ☝️{" "} 173 | {wordLength} Word(s) 👆  174 | {text.length} Character(s) 175 | 176 |
177 | 178 |

📖 Preview of your text

179 |

180 | {text.length > 0 181 | ? text 182 | : "Enter text in the text-box to see preview!"} 183 |

184 |
185 | 186 | ); 187 | } 188 | 189 | InputForm.propTypes = { 190 | title: PropTypes.string, 191 | }; 192 | -------------------------------------------------------------------------------- /text_helper/src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "../App.css"; 3 | 4 | export default function Navbar(props) { 5 | return ( 6 | <> 7 | 62 | 63 | ); 64 | } 65 | -------------------------------------------------------------------------------- /text_helper/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /text_helper/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | reportWebVitals(); 14 | -------------------------------------------------------------------------------- /text_helper/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /text_helper/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------