Skip to content

Add js dom manipulation #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DBeaulne wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Add js dom manipulation #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3379904
update user profile and add responsive commands for tablet and deskto…
DBeaulne Mar 2, 2024
b08db7b
update to rwd behaviour and username profile and picture
DBeaulne Mar 2, 2024
53a92a5
add main css & scss
DBeaulne Mar 2, 2024
c6fc11f
update profile data programmatically
DBeaulne Mar 23, 2024
876400c
Merge branch 'add-js-dom-manipulation' of https://github.com/DBeaulne…
DBeaulne Apr 7, 2024
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
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
#Ignore scss map files
*.css.map
.prettierrc
4 changes: 4 additions & 0 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"singleQuote": true,
"arrowParens": "avoid"
}
164 changes: 84 additions & 80 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Linked In</title>
<link href="./styles/main.css" rel="stylesheet" />
<link href="./styles/global.css" rel="stylesheet" />
</head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Linked In</title>
<link href="./styles/main.css" rel="stylesheet" />
<link href="./styles/global.css" rel="stylesheet" />
</head>

<body>
<!-- Navigation-->
<nav class="nav">
<div class="nav__logo">
<img src="./assets/images/In-White-128.png" />
</div>
<div class="nav__username">Ankur Bag</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" />
</div>
<div class="profile-card__title">Ankur Bag, Software Engineer</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" />
</div>
<div class="start-post-user__text">
<input type="text" placeholder="Start Post" />
</div>
</div>
<div class="start-post-btn"><button>POST</button></div>
</section>
<section class="posts">
<!-- POST-->
<div class="posts__item">
<div class="posts__username">User 1 Posted</div>
<div class="posts__content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur
repellendus cupiditate minima adipisci ullam sit culpa eaque
iure fugit ipsam.
</p>
</div>
<div class="posts__like"><button>Like</button></div>
</div>
<div class="posts__item">
<div class="posts__username">User 1 Posted</div>
<div class="posts__content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur
repellendus cupiditate minima adipisci ullam sit culpa eaque
iure fugit ipsam.
</p>
</div>
<div class="posts__like"><button>Like</button></div>
</div>
<div class="posts__item">
<div class="posts__username">User 1 Posted</div>
<div class="posts__content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur
repellendus cupiditate minima adipisci ullam sit culpa eaque
iure fugit ipsam.
</p>
</div>
<div class="posts__like"><button>Like</button></div>
</div>
</section>
</section>
</main>
</body>
<body>
<!-- Navigation-->
<nav class="nav">
<div class="nav__logo">
<img src="./assets/images/In-White-128.png" />
</div>
<div class="nav__username data-username">username goes here</div>
</nav>
<!--- Main Container-->
<main class="container">
<section class="left-container">
<section class="profile-card">
<div class="profile-card__img">
<img class="data-profilepic" src="" />
</div>
<div class="profile-card__title">
<span class="data-username">username goes here</span>,
<span class="data-jobtitle">title goes here</span>
</div>
</section>
</section>
<section class="right-container">
<section class="start-post">
<div class="start-post-user">
<div class="start-post-user__img">
<img class="data-profilepic" src="" />
</div>
<div class="start-post-user__text">
<input type="text" placeholder="Start Post" />
</div>
</div>
<div class="start-post-btn"><button>POST</button></div>
</section>
<section class="posts">
<!-- POST-->
<div class="posts__item">
<div class="posts__username">User 1 Posted</div>
<div class="posts__content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur
repellendus cupiditate minima adipisci ullam sit culpa eaque
iure fugit ipsam.
</p>
</div>
<div class="posts__like"><button>Like</button></div>
</div>
<div class="posts__item">
<div class="posts__username">User 1 Posted</div>
<div class="posts__content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur
repellendus cupiditate minima adipisci ullam sit culpa eaque
iure fugit ipsam.
</p>
</div>
<div class="posts__like"><button>Like</button></div>
</div>
<div class="posts__item">
<div class="posts__username">User 1 Posted</div>
<div class="posts__content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur
repellendus cupiditate minima adipisci ullam sit culpa eaque
iure fugit ipsam.
</p>
</div>
<div class="posts__like"><button>Like</button></div>
</div>
</section>
</section>
</main>
<script src="./scripts/index.js"></script>
</body>
</html>
34 changes: 34 additions & 0 deletions scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/* LinkedIn Challenge javascript */
/**
* Implement the following functionality:
* Get username, job title and profile picture dynamically from the script instead
* of hard-coding the data.
* Hint : You need to use & store the data in javascript variables and
* show them on HTML file using DOM manipulation
*
* */

// Declare global data

const userProfileImage = './assets/images/nonbinary.png';
const userName = 'Gandalf the Grey';
const userTitle = 'VP of Wizards';

// 1. Identify location of username, job title and profile picture
const userNameElem = document.querySelectorAll('.data-username');
const jobTitleElem = document.querySelector('.data-jobtitle');
const profilePictureElem = document.querySelectorAll('.data-profilepic');

// 2 Manipulation
// iterate through userNameElem
// change the innerHTML

for (let el of userNameElem) {
el.innerHTML = userName;
}

jobTitleElem.innerHTML = userTitle;

for (let pro of profilePictureElem) {
pro.src = userProfileImage;
}
2 changes: 1 addition & 1 deletion styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@ body {
padding: 0;
font-family: "LinkedIn SourceSans", Arial, Helvetica, sans-serif;
background-color: #f3f2ef;
}
}/*# sourceMappingURL=global.css.map */
1 change: 1 addition & 0 deletions styles/global.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading