Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions js/navbar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
function newNavbarItem(text, url) {
// create an <a> element with text inside it, linking to url, and return the element
}

function renderNavbar(user) {
const navbarDiv = document.getElementById('nav-item-container');

navbarDiv.appendChild(newNavbarItem('Home', '#'));
navbarDiv.appendChild(newNavbarItem('Profile', '#'));
}
14 changes: 12 additions & 2 deletions js/profile.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,12 @@
const profileName = document.getElementById("profile-name");
profileName.innerText = "Aaron Sipser";
const user = {
name: "Rupayan Neogy",
last_post: "I took my cat on a walk today!"
};

function renderUserData(aUser){
document.getElementById('profile-name').innerText = aUser.name;
document.getElementById('profile-status').innerText = aUser.last_post;
}

renderUserData(user);
renderNavbar(user);
14 changes: 8 additions & 6 deletions profile.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@
<html>
<head>
<title>Profile Page</title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="navbar-brand">Catbook</div>
<div class="navbar-nav" id="nav-item-container">
<a class="nav-item nav-link disabled">Home</a>
<a class="nav-item nav-link active" href="">Profile</a>
<!-- These navbar items will be programmatically inserted! -->
<!-- <a class="nav-item nav-link disabled">Home</a>
<a class="nav-item nav-link active" href="">Profile</a> -->
</div>
</nav>
<div class="container text-center" id="profile-container">
Expand All @@ -19,7 +20,7 @@
</div>
<hr>
<div id="name-container">
<h1 id="profile-name">Rupayan Neogy</h1>
<h1 id="profile-name">Some User</h1>
</div>
<div class="row mt-4">
<div class="col">
Expand All @@ -35,7 +36,7 @@ <h4>About Me</h4>
<h4>My Latest Post</h4>
</div>
<div class="card-body" id="latest-post-card">
<p class="story-content card-text">Today was a great day! I made a home-made sushi banquet for me and my family of cats ^_^</p>
<p class="story-content card-text" id="profile-status">Today was a great day! I made a home-made sushi banquet for me and my family of cats ^_^</p>
</div>
</div>
</div>
Expand All @@ -47,5 +48,6 @@ <h3 id="favorite-cat">Russian Blue</h3>
</div>
</div>
</body>
<script src="js/navbar.js"></script>
<script src="js/profile.js"></script>
</html>