Merge pull request #1909 from Avdhesh-Varshney/emoji

TusharKesarwani · web-flow · commit 50d28cccd907 · 2023-07-31T15:47:35.000+05:30
[SSoC 2.0] Emoji Maker Completed
diff --git a/Projects/Emoji-Maker/README.md b/Projects/Emoji-Maker/README.md
@@ -0,0 +1,28 @@
+# EMOJI MAKER WEBSITE
+
+- This a simple project where users can create and develop of different type of emojis.
+
+--- 
+
+## **Tech Stack 🎮**
+
+- HTML
+- CSS
+- JS
+
+<br>
+
+## **Screenshots 📸**
+
+![Emoji-Maker](https://github.com/TusharKesarwani/Front-End-Projects/assets/114330097/5891b5ae-965b-41fa-ac43-070c07c6a664)
+
+<br>
+
+## **Created By 👦**
+
+[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
+
+<br>
+
+### **Thanks for using this application 🎉**
+
diff --git a/Projects/Emoji-Maker/images/eye-0.svg b/Projects/Emoji-Maker/images/eye-0.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="135" height="35" viewBox="0 0 135 35"><defs><style>.cls-1,.cls-2{fill:none;stroke:#403408;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:8.71px;}.cls-2{stroke-width:8.61px;}</style></defs><polyline class="cls-1" points="13 4.75 37.99 17.43 13.2 30"/><polyline class="cls-2" points="124.05 30 99.63 17.32 123.86 4.75"/></svg>
diff --git a/Projects/Emoji-Maker/images/eye-1.svg b/Projects/Emoji-Maker/images/eye-1.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="135" height="35" viewBox="0 0 135 35"><defs><style>.cls-1{fill:#ff5a58;}</style></defs><path class="cls-1" d="M100,2.7c4.71-1.79,9.14.07,11.94,3.76,2.92-3.6,7.41-5.32,12-3.38,5.84,2.43,7,8.29,4.42,13.87-1.83,4-9.85,11.53-14.17,15.4a4.08,4.08,0,0,1-5.49-.09c-4.18-4-11.94-11.74-13.64-15.83C92.73,10.78,94.06,5,100,2.7Z"/><path class="cls-1" d="M12.18,2.7c4.71-1.79,9.13.07,11.93,3.76C27,2.86,31.52,1.14,36.17,3.08c5.84,2.43,7,8.29,4.42,13.87-1.84,4-9.85,11.53-14.17,15.4a4.08,4.08,0,0,1-5.49-.09C16.74,28.26,9,20.52,7.29,16.43,4.93,10.78,6.26,5,12.18,2.7Z"/></svg>
diff --git a/Projects/Emoji-Maker/images/eye-2.svg b/Projects/Emoji-Maker/images/eye-2.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="135" height="35" viewBox="0 0 135 35"><defs><style>.cls-1{fill:#562912;}</style></defs><path class="cls-1" d="M37.19,32a4.17,4.17,0,0,1-3-1.24L13.74,10.22a4.22,4.22,0,1,1,6-6L40.18,24.77a4.26,4.26,0,0,1,0,6A4.21,4.21,0,0,1,37.19,32Z"/><path class="cls-1" d="M16.72,32a4.17,4.17,0,0,1-3-1.24,4.24,4.24,0,0,1,0-6L34.21,4.24a4.22,4.22,0,0,1,6,6L19.7,30.76A4.17,4.17,0,0,1,16.72,32Z"/><path class="cls-1" d="M118.28,32a4.17,4.17,0,0,1-3-1.24L94.82,10.22a4.22,4.22,0,0,1,6-6l20.47,20.53a4.24,4.24,0,0,1,0,6A4.17,4.17,0,0,1,118.28,32Z"/><path class="cls-1" d="M97.81,32a4.21,4.21,0,0,1-3-1.24,4.26,4.26,0,0,1,0-6L115.3,4.24a4.22,4.22,0,0,1,6,6L100.79,30.76A4.17,4.17,0,0,1,97.81,32Z"/></svg>
diff --git a/Projects/Emoji-Maker/images/eye-3.svg b/Projects/Emoji-Maker/images/eye-3.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="135" height="35" viewBox="0 0 135 35"><defs><style>.cls-1{fill:#403408;}</style></defs><path class="cls-1" d="M43.94,16.89h0a6.66,6.66,0,0,1-6.79,6.49H13.62a6.67,6.67,0,0,1-6.79-6.49h0a6.67,6.67,0,0,1,6.79-6.49H37.15A6.66,6.66,0,0,1,43.94,16.89Z"/><path class="cls-1" d="M129,16.89h0a6.66,6.66,0,0,1-6.79,6.49H98.7a6.67,6.67,0,0,1-6.79-6.49h0A6.67,6.67,0,0,1,98.7,10.4h23.53A6.66,6.66,0,0,1,129,16.89Z"/></svg>
diff --git a/Projects/Emoji-Maker/images/eye-4.svg b/Projects/Emoji-Maker/images/eye-4.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="135" height="35" viewBox="0 0 135 35"><defs><style>.cls-1{fill:#403408;}</style></defs><path class="cls-1" d="M19,34.53h0a7.73,7.73,0,0,1-7.66-7.74V8.23A7.72,7.72,0,0,1,19,.49h0a7.72,7.72,0,0,1,7.67,7.74V26.79A7.73,7.73,0,0,1,19,34.53Z"/><path class="cls-1" d="M115,34.53h0a7.73,7.73,0,0,1-7.67-7.74V8.23A7.72,7.72,0,0,1,115,.49h0a7.72,7.72,0,0,1,7.66,7.74V26.79A7.73,7.73,0,0,1,115,34.53Z"/></svg>
diff --git a/Projects/Emoji-Maker/images/eyebrow-0.svg b/Projects/Emoji-Maker/images/eyebrow-0.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="125" height="20" viewBox="0 0 125 20"><defs><style>.cls-1{fill:none;stroke:#403408;stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;}</style></defs><path class="cls-1" d="M2.65,12.58S17.77,18.86,23.16,5.2"/><path class="cls-1" d="M102.23,6.61c12.93-6.77,20.12,7.91,20.12,7.91"/></svg>
diff --git a/Projects/Emoji-Maker/images/eyebrow-1.svg b/Projects/Emoji-Maker/images/eyebrow-1.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="125" height="20" viewBox="0 0 125 20"><defs><style>.cls-1{fill:none;stroke:#403408;stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;}</style></defs><path class="cls-1" d="M98.5,4S93.88,18.81,83,16"/><path class="cls-1" d="M44,15.82S29.93,18.49,26.5,3.51"/></svg>
diff --git a/Projects/Emoji-Maker/images/eyebrow-2.svg b/Projects/Emoji-Maker/images/eyebrow-2.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="125" height="20" viewBox="0 0 125 20"><defs><style>.cls-1{fill:none;stroke:#403408;stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;}</style></defs><path class="cls-1" d="M9.42,12.46s13.39,5.27,18.16-6.19"/><path class="cls-1" d="M114.13,12.46S100.74,17.73,96,6.27"/></svg>
diff --git a/Projects/Emoji-Maker/images/eyebrow-3.svg b/Projects/Emoji-Maker/images/eyebrow-3.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="125" height="20" viewBox="0 0 125 20"><defs><style>.cls-1{fill:none;stroke:#403408;stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;}</style></defs><path class="cls-1" d="M2.72,14.74S10,0,23,6.61"/><path class="cls-1" d="M102.16,6.67c12.93-6.77,20.12,7.91,20.12,7.91"/></svg>
diff --git a/Projects/Emoji-Maker/images/mouth-0.svg b/Projects/Emoji-Maker/images/mouth-0.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="130" height="65" viewBox="0 0 130 65"><defs><style>.cls-1{fill:#3d3506;}.cls-2{fill:#ff5a58;}</style></defs><path class="cls-1" d="M64.74,40a12,12,0,0,1-7.94-2.91,9.49,9.49,0,0,1-2.23-11.82,9.48,9.48,0,0,1-1.35-3.47c-1-5.58,3.28-10.81,9.46-11.68A12.18,12.18,0,0,1,72,12.64a3.41,3.41,0,0,1,.31,5.17,4.4,4.4,0,0,1-5.74.28,3.45,3.45,0,0,0-2.67-.73,3,3,0,0,0-2.68,3.31,2.79,2.79,0,0,0,1,1.72,3.42,3.42,0,0,1,.19,5.34l-.13.11a2.69,2.69,0,0,0,.13,4,3.46,3.46,0,0,0,4.54,0,4.38,4.38,0,0,1,5.75-.05,3.41,3.41,0,0,1,.06,5.17A12,12,0,0,1,64.74,40Z"/><path class="cls-2" d="M48.38,17.47a16.26,16.26,0,0,0-22.19-2.8,14.56,14.56,0,0,0-5.49,8.75l-.21-.07C12,21.06,3.48,25.78,1.38,33.9s3,16.55,11.49,18.83l32,8.67,6.74-31A15.31,15.31,0,0,0,48.38,17.47Z"/></svg>
diff --git a/Projects/Emoji-Maker/images/mouth-1.svg b/Projects/Emoji-Maker/images/mouth-1.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="130" height="65" viewBox="0 0 130 65"><defs><style>.cls-1{fill:none;stroke:#403408;stroke-linecap:round;stroke-miterlimit:10;stroke-width:6px;}</style></defs><line class="cls-1" x1="11.41" y1="32.09" x2="118.44" y2="32.09"/></svg>
diff --git a/Projects/Emoji-Maker/images/mouth-2.svg b/Projects/Emoji-Maker/images/mouth-2.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="130" height="65" viewBox="0 0 130 65"><defs><style>.cls-1{fill:#403408;}</style></defs><ellipse class="cls-1" cx="65" cy="32.5" rx="28" ry="31.5"/></svg>
diff --git a/Projects/Emoji-Maker/images/mouth-3.svg b/Projects/Emoji-Maker/images/mouth-3.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="130" height="65" viewBox="0 0 130 65"><defs><style>.cls-1{fill:none;stroke:#403408;stroke-linecap:round;stroke-miterlimit:10;stroke-width:7px;}</style></defs><path class="cls-1" d="M30.61,44.78s7.08-23.69,33.64-23.69,33.34,23.5,33.34,23.5"/></svg>
diff --git a/Projects/Emoji-Maker/images/mouth-4.svg b/Projects/Emoji-Maker/images/mouth-4.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="130" height="65" viewBox="0 0 130 65"><defs><style>.cls-1{fill:none;stroke:#403408;stroke-linecap:round;stroke-miterlimit:10;stroke-width:7px;}</style></defs><path class="cls-1" d="M102.81,18.38s-8,28.24-38,28.24-37.64-28-37.64-28"/></svg>
diff --git a/Projects/Emoji-Maker/index.html b/Projects/Emoji-Maker/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+	<!-- Logo of the website -->
+	<link rel="shortcut icon" href="https://seeklogo.com/images/F/facebook-emoji-logo-75EA6BB076-seeklogo.com.png"
+		type="image/x-icon">
+
+	<title>Emoji Maker</title>
+
+	<!-- Google Fonts -->
+	<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
+
+	<!-- Stylesheet -->
+	<link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+	<!-- Main heading -->
+	<h1>Emoji Maker 😎</h1>
+
+	<!-- Main container -->
+	<div class="container">
+		<div class="buttons-container">
+			<button id="color">Color</button>
+			<button id="eyes">Eyes</button>
+			<button id="eyebrows">Eyebrows</button>
+			<button id="mouth">Mouth</button>
+		</div>
+
+		<div class="emoji-container">
+			<div class="emoji">
+				<img src="./images/eye-4.svg" class="eyes" />
+				<img src="./images/eyebrow-3.svg" class="eyebrows" />
+				<img src="./images/mouth-4.svg" class="mouth" />
+			</div>
+		</div>
+	</div>
+
+	<!-- Script -->
+	<script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/Projects/Emoji-Maker/script.js b/Projects/Emoji-Maker/script.js
@@ -0,0 +1,47 @@
+//Initial Reference
+let emoji = document.querySelector(".emoji");
+
+let colors = ["#4bff81", "#4bb4ff", "#ff702e", "#b88cff", "#ffd21f"];
+let eyes = document.querySelector(".eyes");
+let eyebrows = document.querySelector(".eyebrows");
+let mouth = document.querySelector(".mouth");
+
+let colorBtn = document.getElementById("color");
+let eyesBtn = document.getElementById("eyes");
+let eyebrowsBtn = document.getElementById("eyebrows");
+let mouthBtn = document.getElementById("mouth");
+
+//Setting up counters
+let counter1 = 0;
+let counter2 = 0;
+let counter3 = 0;
+let counter4 = 0;
+
+//Setting up total counts for different images
+let totalCounts = {
+	eyeCount: 5,
+	eyebrowsCount: 4,
+	mouthCount: 5,
+};
+
+//Adding event listener to each button
+colorBtn.addEventListener("click", () => {
+	emoji.style.backgroundColor = colors[counter1];
+	counter1 = counter1 < colors.length - 1 ? counter1 + 1 : 0;
+	console.log(counter1);
+});
+
+eyesBtn.addEventListener("click", () => {
+	eyes.setAttribute("src", `./images/eye-${counter2}.svg`);
+	counter2 = counter2 < totalCounts.eyeCount - 1 ? counter2 + 1 : 0;
+});
+
+eyebrowsBtn.addEventListener("click", () => {
+	eyebrows.setAttribute("src", `./images/eyebrow-${counter3}.svg`);
+	counter3 = counter3 < totalCounts.eyebrowsCount - 1 ? counter3 + 1 : 0;
+});
+
+mouthBtn.addEventListener("click", () => {
+	mouth.setAttribute("src", `./images/mouth-${counter4}.svg`);
+	counter4 = counter4 < totalCounts.mouthCount - 1 ? counter4 + 1 : 0;
+});
diff --git a/Projects/Emoji-Maker/style.css b/Projects/Emoji-Maker/style.css
@@ -0,0 +1,91 @@
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+	user-select: none;
+}
+
+body {
+	background-color: #a7edff;
+}
+
+h1 {
+	align-items: center;
+	text-align: center;
+	margin: 5%;
+	font-family: cursive;
+	text-transform: uppercase;
+	text-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
+}
+
+.container {
+	background-color: rgba(red, green, blue, 1);
+	height: 31.25em;
+	width: 25em;
+	position: absolute;
+	transform: translate(-50%, -50%);
+	left: 50%;
+	top: 55%;
+	border-radius: 0.8em;
+	box-shadow: 0 1.87em 4em rgba(86, 68, 9, 0.3);
+}
+
+.buttons-container {
+	height: 30%;
+	width: 100%;
+	position: absolute;
+	top: 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	padding: 0 1em;
+}
+
+.buttons-container button {
+	font-size: 0.9em;
+	gap: 0.5em;
+	padding: 0.8em 1em;
+	border-radius: 2em;
+	border: none;
+	background-color: rgba(red, green, blue, 0.1);
+	font-family: "Poppins", sans-serif;
+	cursor: pointer;
+}
+
+.emoji-container {
+	height: 70%;
+	width: 100%;
+	position: absolute;
+	top: 30%;
+}
+
+.emoji {
+	height: 14.37em;
+	width: 14.37em;
+	background-color: #ffd21f;
+	border-radius: 50%;
+	position: absolute;
+	transform: translate(-50%, -50%);
+	left: 50%;
+	top: 50%;
+}
+
+.eyes,
+.eyebrows,
+.mouth {
+	position: absolute;
+	transform: translateX(-50%);
+	left: 50%;
+}
+
+.eyes {
+	top: 5em;
+}
+
+.eyebrows {
+	top: 3.12em;
+}
+
+.mouth {
+	top: 7.5em;
+}
diff --git a/img/projects/Emoji-Maker.png b/img/projects/Emoji-Maker.png
