Feature/add object event handling

.gitignore

@@ -0,0 +1 @@
+**/.DS_Store

index.html

@@ -15,29 +15,29 @@
 			<div class="nav__logo">
 				<img src="./assets/images/In-White-128.png" />
 			</div>
-			<div class="nav__username">Ankur Bag</div>
+			<div class="nav__username data-username">Sony Chen</div>
 		</nav>
 		<!--- Main Container-->
 		<main class="container">
 			<section class="left-container">
 				<section class="profile-card">
 					<div class="profile-card__img">
-						<img src="./assets/images/man.png" />
+						<img class="data-profilepic" src="./assets/images/Sony-1.png" />
 					</div>
-					<div class="profile-card__title">Ankur Bag, Software Engineer</div>
+					<div class="profile-card__title">Sony Chen, <span class="data-jobtitle">Product Designer</span></div>
 				</section>
 			</section>
 			<section class="right-container">
 				<section class="start-post">
 					<div class="start-post-user">
 						<div class="start-post-user__img">
-							<img src="./assets/images/man.png" />
+							<img src="./assets/images/Sony-1.png" />
 						</div>
 						<div class="start-post-user__text">
-							<input type="text" placeholder="Start Post" />
+							<input type="text" class="data-post" placeholder="Start Post" />
 						</div>
 					</div>
-					<div class="start-post-btn"><button>POST</button></div>
+					<div class="start-post-btn"><button onclick="createPost()">POST</button></div>
 				</section>
 				<section class="posts">
 					<!-- POST-->
@@ -80,5 +80,7 @@
 				</section>
 			</section>
 		</main>
+		<script src="./scripts/data.js"></script>
+		<script src="./scripts/index.js"></script>
 	</body>
 </html>

scripts/Index.js

@@ -0,0 +1,50 @@
+const loadUserProfile = () =>{
+    const usernameElem = document.querySelectorAll(".data-username");
+    const jobTitleElem = document.querySelector(".data-jobtitle");
+    const profilePicElem = document.querySelectorAll(".data-profilepic");
+
+    for (let el of usernameElem){
+        el.innerHTML = userProfile.username;
+    }
+
+    jobTitleElem.innerHTML = userProfile.jobtitle;
+
+    for(let pro of profilePicElem){
+        pro.src = userProfile.profilepic;
+    }
+};
+
+const createPost = () => {
+	const username = document.querySelector(".data-username").innerHTML;
+	const post = document.querySelector(".data-post").value;
+	console.log("username, post", username, post);
+
+	if (post) {
+
+		const parentDiv = document.querySelector(".posts");
+
+		const postsItemDiv = document.createElement("div");
+		postsItemDiv.classList.add("posts__item");
+
+		const postsUsernameDiv = document.createElement("div");
+		postsUsernameDiv.classList.add("posts__username");
+		postsUsernameDiv.innerText = username + " Posted";
+
+		const postsContentDiv = document.createElement("div");
+		postsContentDiv.classList.add("posts__content");
+		const postcontent = document.createElement("p");
+		postcontent.innerHTML = post;
+		postsContentDiv.append(postcontent);
+
+		const postsLikeDiv = document.createElement("div");
+		postsLikeDiv.classList.add("posts__like");
+
+        postsItemDiv.append(postsUsernameDiv);
+		postsItemDiv.append(postsContentDiv);
+		postsItemDiv.append(postsLikeDiv);
+
+		parentDiv.prepend(postsItemDiv);
+	} else {
+		alert("Error: your input shouldn't be empty!");
+	}
+};

scripts/data.js

@@ -0,0 +1,10 @@
+const userProfile = {
+    username: "Sony Chen",
+    jobtitle: "Product designer",
+    profilepic:"./assets/images/Sony-1.png",
+};
+
+
+
+
+

styles/global.css

@@ -20,4 +20,4 @@ body {
   padding: 0;
   font-family: "LinkedIn SourceSans", Arial, Helvetica, sans-serif;
   background-color: #f3f2ef;
-}
+}/*# sourceMappingURL=global.css.map */

styles/main.css

@@ -1,156 +1,150 @@
 .nav {
-	height: 3.125rem;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	background-color: #0077b5;
-	color: #ffffff;
-	position: fixed;
-	width: 100vw;
-	z-index: 25;
+  height: 3.125rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: #0077b5;
+  color: #ffffff;
+  position: fixed;
+  width: 100vw;
+  z-index: 25;
 }
 .nav__logo {
-	padding: 0.625rem;
+  padding: 0.625rem;
 }
 .nav__logo img {
-	height: 2.05rem;
+  height: 2.05rem;
 }
 .nav__username {
-	line-height: 1.75rem;
-	padding: 0.625rem;
+  line-height: 1.75rem;
+  padding: 0.625rem;
 }
 
 h1 {
-	text-align: center;
+  text-align: center;
 }
 
 .container {
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	top: 3.125rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  top: 3.125rem;
 }
 @media screen and (min-width: 768px) {
-	.container {
-		/**
-    	TODO: Fix me
-    **/
-	}
+  .container {
+    display: flex;
+    flex-direction: row;
+  }
 }
 @media screen and (min-width: 1024px) {
-	.container {
-		/**
-    	TODO: Fix me
-    **/
-	}
+  .container {
+    display: flex;
+    flex-direction: row;
+  }
 }
 
 .profile-card {
-	display: flex;
-	flex-direction: column;
-	margin: 1.25rem;
-	justify-content: center;
-	background: #00a0dc;
-	border-radius: 0.3125rem;
+  display: flex;
+  flex-direction: column;
+  margin: 1.25rem;
+  justify-content: center;
+  background: #00a0dc;
+  border-radius: 0.3125rem;
 }
 @media screen and (min-width: 768px) {
-	.profile-card {
-		/**
-    	TODO: Fix me
-    **/
-	}
+  .profile-card {
+    width: 20rem;
+  }
 }
 @media screen and (min-width: 1024px) {
-	.profile-card {
-		/**
-    	TODO: Fix me
-    **/
-	}
+  .profile-card {
+    width: 20rem;
+  }
 }
 .profile-card__img {
-	text-align: center;
-	padding: 0.625rem 0;
+  text-align: center;
+  padding: 0.625rem 0;
 }
 .profile-card__img img {
-	width: 6.25rem;
-	height: 6.25rem;
+  width: 6.25rem;
+  height: 6.25rem;
 }
 .profile-card__title {
-	text-align: center;
-	background: #cfedfb;
-	padding: 1.25rem 0;
-	font-size: 1rem;
+  text-align: center;
+  background: #cfedfb;
+  padding: 1.25rem 0;
+  font-size: 1rem;
 }
 
 .start-post {
-	display: flex;
-	flex-direction: column;
-	margin: 1.25rem;
-	justify-content: center;
-	background: #ffffff;
-	border-radius: 0.3125rem;
-	padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  margin: 1.25rem;
+  justify-content: center;
+  background: #ffffff;
+  border-radius: 0.3125rem;
+  padding: 1.25rem;
 }
 .start-post-user {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
 }
 .start-post-user__img {
-	text-align: center;
-	padding: 0.625rem 0;
-	width: 20%;
+  text-align: center;
+  padding: 0.625rem 0;
+  width: 20%;
 }
 .start-post-user__img img {
-	width: 3.125rem;
-	height: 3.125rem;
+  width: 3.125rem;
+  height: 3.125rem;
 }
 .start-post-user__text {
-	text-align: center;
-	padding: 0.625rem 0;
-	width: 80%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+  text-align: center;
+  padding: 0.625rem 0;
+  width: 80%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .start-post-user__text input {
-	width: 80%;
-	height: 1.875rem;
+  width: 80%;
+  height: 1.875rem;
 }
 
 @media screen and (min-width: 768px) {
-	.posts {
-		flex-direction: row;
-		flex-wrap: wrap;
-		justify-content: space-evenly;
-		align-content: space-evenly;
-	}
+  .posts {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-content: space-evenly;
+  }
 }
 .posts__item {
-	display: flex;
-	flex-direction: column;
-	margin: 1.25rem;
-	justify-content: center;
-	background: #ffffff;
-	border-radius: 0.3125rem;
-	padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  margin: 1.25rem;
+  justify-content: center;
+  background: #ffffff;
+  border-radius: 0.3125rem;
+  padding: 1.25rem;
 }
 .posts__username {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	font-family: "LinkedIn SourceSans";
-	font-size: 1.25rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  font-family: "LinkedIn SourceSans";
+  font-size: 1.25rem;
 }
 .posts__content {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	font-family: "LinkedIn SourceSans";
-	font-size: 1.06rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  font-family: "LinkedIn SourceSans";
+  font-size: 1.06rem;
 }
 .posts__like {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-}
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}/*# sourceMappingURL=main.css.map */