Skip to content

PO2405 #17

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
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

PO2405 #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
81dd158
PO2405
mdrela May 30, 2022
ad87923
wireframe
mdrela May 30, 2022
466fb1f
trying to make navbar work + bootstrap
mdrela May 30, 2022
da47615
post section cleanup
mdrela May 30, 2022
ab944bf
fixed navbar
mdrela May 31, 2022
b570c21
probably finished
mdrela May 31, 2022
a337908
removed bootstrap
mdrela May 31, 2022
e4097f4
missing id
mdrela Jul 2, 2022
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
5 changes: 5 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
kasia.css
mainScreen.html
mainScreen.js
mainScreen.css
modal.html
Binary file added assets/background.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/facebook.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 favicon.ico → assets/favicon.ico
View file
Open in desktop
File renamed without changes.
Binary file added assets/instagram.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/pinterest.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
156 changes: 156 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog project - CDV</title>
<link rel="stylesheet" href="./styles/style.css"/>
</head>
<body>
<section id="top_section">
<div id="heading">
<h1>GENERIC<span class="serif">lifestyle</span>BLOG</h1>
<p>by a CDV student</p>
</div>
<div id="login_popup">
<form action="/login.php" class="login_form">
<h4>Log in</h4>
<label for="name">Username</label>
<input type="text" name="name" required>
<label for="password">Password</label>
<input type="password" name="password" required>
<button type="button" class="button" id="login_login">Login</button>
<button type="button" class="button cancel" id="login_cancel">Close</button>
</form>
</div>
<nav>
<ul id="main_menu">
<li><a href='#'>Home</a></li>
<li><a href='#'>Archive</a></li>
<li><a href='#'>About</a></li>
<li id="menu_login"><a href='#'>Log In</a></li>
<li><a href="#"><img class="sm_icon" src="/assets/facebook.png"/></a></li>
<li><a href="#"><img class="sm_icon" src="/assets/instagram.png"/></a></li>
<li><a href="#"><img class="sm_icon" src="/assets/pinterest.png"/></a></li>
</ul>
</nav>
</section>
<section id="main_section">
<div class="section" id="posts">
<div class="post_header">
<p class="date">May 30, 2022</p>
<h2 class="post_title"><a href="#">Upbeat post title</a></h2>
</div>
<div class="content">
<div class="post_imgs">
<img class="post_img main_img" alt="Lifestyle main photo" src="https://images.pexels.com/photos/1055691/pexels-photo-1055691.jpeg">
<img class="post_img another_img" alt="Lifestyle secondary photo" src="https://images.pexels.com/photos/325521/pexels-photo-325521.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<img class="post_img another_img" alt="Lifestyle secondary photo" src="https://images.pexels.com/photos/2253275/pexels-photo-2253275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="post_text">
<p class="post_paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi possimus, doloremque deserunt obcaecati est reiciendis dignissimos deleniti laborum ipsam facere corrupti veritatis iusto perferendis delectus alias nam commodi. Possimus, consequuntur!
Reprehenderit fugiat ducimus similique iste alias nam numquam, nulla iure necessitatibus dignissimos possimus, expedita soluta autem est itaque repudiandae doloremque. Incidunt aliquam exercitationem error deserunt rerum iste voluptatum molestias blanditiis?
</p>
<p class="post_paragraph">Sunt culpa nam ratione accusamus, illum nisi asperiores. Odio laboriosam doloribus officiis! Voluptates possimus molestiae magni doloremque hic maxime fugiat. Eos voluptas recusandae laborum? Dicta aliquam pariatur repellat alias quae.
</p>
<p class="post_paragraph">Nihil quasi tempore sint ex omnis? Sint eos reprehenderit debitis alias nostrum similique, fugiat pariatur totam blanditiis quia minus hic at earum placeat numquam, expedita, maxime quasi? Eum, distinctio optio.
A autem minima dolore, voluptatum eum laudantium sed molestias cum velit quo aut aliquid repellendus culpa molestiae aspernatur quaerat ullam exercitationem enim quis. Nihil tempore ipsam dolorum id aspernatur officia?
</p>
<p class="post_paragraph">Atque necessitatibus blanditiis veniam reprehenderit fuga omnis? Quas vero commodi sed ducimus repellendus doloribus porro necessitatibus numquam sint repudiandae assumenda voluptatibus ea aut excepturi impedit eligendi dolor explicabo, quidem voluptate.</p>
</div>
</div>
<div class="post_footnote">
<a id="view_comments" href="#comments">View comments</a>
</div>
</div>
<div class="comments_section" id="hidden_section">
<div class="new_comment">
<p>Add a new comment</p>
<form id="comment_form" action="" method="post">
<p>
<label>Name<br><input type="text" name="new_comment_author" id="new_comment_author" required></label>
</p>
<label>Comment<br></label><textarea name="new_comment_body" id="new_comment_body"></textarea>
<p class="submit_button">
<br><input name="new_comment_submit" type="button" id="new_comment_submit" value="Submit">
</p>
</form>
</div>
<div class="posted_comments">
<div class="comment">
<div class="comment_avatar_container">
<img class="avatar" id="avatar_a" src="https://randomuser.me/api/portraits/women/90.jpg"/>
</div>
<div class="comment_author_container">
<p class="comment_author"><span class="author_name" id="comment_author_a">Author</span>, age: <span class="author_age" id="author_age_a">33</span></p>
</div>
<div class="comment_body_container">
<p class="comment_body">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est, unde esse. Molestiae necessitatibus consequuntur id optio eius? Vel recusandae suscipit, qui molestiae ad, quas est ut nihil perspiciatis officiis similique?</p>
</div>
</div>

<div class="comment">
<div class="comment_avatar_container">
<img class="avatar" id="avatar_b" src="https://randomuser.me/api/portraits/women/90.jpg"/>
</div>
<div class="comment_author_container">
<p class="comment_author"><span class="author_name" id="comment_author_b">Author</span>, age: <span class="author_age" id="author_age_b">33</span></p>
</div>
<div class="comment_body_container">
<p class="comment_body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur corporis repellendus tempora deleniti sint sunt quo minima saepe quia similique? Vitae asperiores quisquam delectus, odio illum repellendus debitis autem tenetur?</p>
</div>
</div>

<div class="comment">
<div class="comment_avatar_container">
<img class="avatar" id="avatar_c" src="https://randomuser.me/api/portraits/women/90.jpg"/>
</div>
<div class="comment_author_container">
<p class="comment_author"><span class="author_name" id="comment_author_c">Author</span>, age: <span class="author_age" id="author_age_c">33</span></p>
</div>
<div class="comment_body_container">
<p class="comment_body">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium facilis adipisci, ab illo commodi labore velit debitis voluptate esse ratione distinctio ipsam quisquam vero, quos consequatur dicta quis voluptatibus sint.</p>
</div>
</div>

<div class="comment">
<div class="comment_avatar_container">
<img class="avatar" id="avatar_d" src="https://randomuser.me/api/portraits/women/90.jpg"/>
</div>
<div class="comment_author_container">
<p class="comment_author"><span class="author_name" id="comment_author_d">Author</span>, age: <span class="author_age" id="author_age_d">33</span></p>
</div>
<div class="comment_body_container">
<p class="comment_body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nostrum rerum facere laboriosam ex iusto, est architecto, exercitationem molestias dignissimos, accusamus vero fugit temporibus earum cupiditate iure veniam eveniet minus.</p>
</div>
</div>




</div>
</div>
<!-- end of comment section -->
<div class="see_more">
<h3 class="see_more_title">See more</h3>
<div class="see_more_gallery">
<a href="#"><img class="more_posts_img" alt="Check out another post" src="https://images.pexels.com/photos/1148960/pexels-photo-1148960.jpeg"></a>
<a href="#"><img class="more_posts_img" alt="Check out another post" src="https://images.pexels.com/photos/4731084/pexels-photo-4731084.jpeg"></a>
<a href="#"><img class="more_posts_img" alt="Check out another post" src="https://images.pexels.com/photos/2281793/pexels-photo-2281793.jpeg"></a>
<a href="#"><img class="more_posts_img" alt="Check out another post" src="https://images.pexels.com/photos/4786270/pexels-photo-4786270.jpeg"></a>
</div>
</div>
</section>
<section id="footnote">
<div>
<p>Project created during frontend developer studies @Collegium Da Vinci <img src="./assets/favicon.ico"/></p>

</div>
</section>

<script src="./main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</body>
</html>
89 changes: 89 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
const $loginButton = document.getElementById('menu_login');
const $loginPopup = document.getElementById('login_popup');
const $loginLogin = document.getElementById('login_login')
const $loginCancel = document.getElementById('login_cancel');

const $viewCommentsButton = document.getElementById('view_comments');
const $hiddenComments = document.getElementById('hidden_section');

const $submitCommentButton = document.getElementById('new_comment_submit');
const $commentAvatarA = document.getElementById('avatar_a');
const $commentAuthorA = document.getElementById('comment_author_a');
const $commentAuthorAgeA = document.getElementById('author_age_a');

const $commentAvatarB = document.getElementById('avatar_b');
const $commentAuthorB = document.getElementById('comment_author_b');
const $commentAuthorAgeB = document.getElementById('author_age_b');

const $commentAvatarC = document.getElementById('avatar_c');
const $commentAuthorC = document.getElementById('comment_author_c');
const $commentAuthorAgeC = document.getElementById('author_age_c');

const $commentAvatarD = document.getElementById('avatar_d');
const $commentAuthorD = document.getElementById('comment_author_d');
const $commentAuthorAgeD = document.getElementById('author_age_d');



$loginButton.addEventListener('click', () => {
$loginPopup.style.display = 'block';
});

$loginCancel.addEventListener('click', () => {
$loginPopup.style.display = 'none';
});

// nie jest to piękne ale działa ¯\_(ツ)_/¯

$viewCommentsButton.addEventListener('click', () => {
$hiddenComments.style.display = 'block';
$viewCommentsButton.style.display = 'none';

fetch('https://randomuser.me/api/?results=4')
.then((res) => res.json())
.then((res) => {
const identityA = res.results[0];
const identityB = res.results[1];
const identityC = res.results[2];
const identityD = res.results[3];

if (identityA) {

$commentAuthorA.innerText = identityA.name.first;
$commentAuthorAgeA.innerText = identityA.dob.age;
$commentAvatarA.src = identityA.picture.large;
};

if (identityB) {

$commentAuthorB.innerText = identityB.name.first;
$commentAuthorAgeB.innerText = identityB.dob.age;
$commentAvatarB.src = identityB.picture.large;
};

if (identityC) {

$commentAuthorC.innerText = identityC.name.first;
$commentAuthorAgeC.innerText = identityC.dob.age;
$commentAvatarC.src = identityC.picture.large;
};

if (identityD) {

$commentAuthorD.innerText = identityD.name.first;
$commentAuthorAgeD.innerText = identityD.dob.age;
$commentAvatarD.src = identityD.picture.large;
};


console.log(res);
});
});

$submitCommentButton.addEventListener('click', (e) => {
alert('Ale by było jakby działało');
});

$loginLogin.addEventListener('click', (e) => {
alert('Powiedzmy, że jesteś zalogowany');
});
Empty file removed style.css
View file
Open in desktop
Empty file.
Loading