Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@H-A-R-S-H-K
H-A-R-S-H-K authored Feb 3, 2024
1 parent 4948985 commit 6028f92
Show file tree
Hide file tree
Showing 3 changed files with 309 additions and 0 deletions.
46 changes: 46 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="top-bar">
<img src="https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/033/original/SST_Logo.png?1706888781" >
<img src="https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/032/original/scaler-social.png?1706888764" >
</div>
</nav>
<div class="delete-modal-container">
<div class="delete-modal">
<img src="https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/030/original/delete-color-filled.png?1706888714">
<p>
Are you sure you want to permanently delete this tweet?
</p>
<button class="modal-cancel">Cancel</button>
<button class="modal-delete">Delete</button>
</div>
</div>

<div class="container">
<div class="tweet-section">
<p>Post your thoughts here</p>
<div class="tweet">
<img src="https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/031/original/profile_image.png?1706888739">
<textarea placeholder="Type your thoughts here..."></textarea>
<br>
<div class="tweet-bottom">
<p>0 / 100</p>
<button class="post">Post</button>
</div>
</div>
</div>
<div class="feed-section">
<p>Your Feed</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
101 changes: 101 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
let modal = document.querySelector(".delete-modal-container");
let feeds = document.querySelectorAll(".feed");
let feedSection = document.querySelector(".feed-section");
let feed;

document.addEventListener("click", function(e) {
if (e.target.classList[0] == 'delete') {
modal.style.display = "block";
feed = e.target.parentElement.parentElement.parentElement;
console.log(feed);
}
else if (e.target.classList[0] == 'modal-cancel') {
modal.style.display = "none";
}
else if (e.target.classList[0] == 'modal-delete') {
deleteFeed(feed, feeds);
modal.style.display = "none";
}
else if (e.target.classList[0] == 'post' && e.target.parentElement.previousElementSibling.previousElementSibling.value != "") {
createFeed(e.target.parentElement.previousElementSibling.previousElementSibling.value);
e.target.parentElement.previousElementSibling.previousElementSibling.value = "";
}
else if (e.target.classList[0] == 'like') {
if(e.target.src == 'https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/029/original/heart.png?1706888679'){
e.target.src = 'https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/025/original/state_clicked.png?1706888455';
}
else{
e.target.src = 'https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/029/original/heart.png?1706888679';
}
}
else if (e.target.classList[0] == 'comment') {

}
else if (e.target.classList[0] == 'edit') {
window.alert('Now content is editable');
e.target.parentElement.parentElement.nextElementSibling.contentEditable = "true";
}
})

function deleteFeed (feed, feeds) {
feedSection.removeChild(feed);
}

function createFeed (text) {
let newFeed = document.createElement("div");
newFeed.className = "feed";
let newFeedTopBar = document.createElement("div");
newFeedTopBar.className = "feed-top-bar";
newFeed.appendChild(newFeedTopBar);
let newFeedTopBarInside = document.createElement("div");
newFeedTopBarInside.className = "feed-top-bar-inside";

let img = document.createElement("img");
img.src = 'https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/031/original/profile_image.png?1706888739';
img.className = 'person-icon';
newFeedTopBarInside.appendChild(img);

let h3 = document.createElement('h3');
h3.innerText = 'Name';
newFeedTopBarInside.appendChild(h3);

let p = document.createElement('p');
p.innerText = "@akkakakak";
newFeedTopBarInside.appendChild(p);

newFeedTopBar.appendChild(newFeedTopBarInside);

let div = document.createElement('div');
div.className = 'feed-top-bar-inside';

let img1 = document.createElement("img");
img1.src = 'https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/028/original/edit.png?1706888661';
img1.className = 'edit other-icons';
div.appendChild(img1);

let img2 = document.createElement("img");
img2.src = 'https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/030/original/delete-color-filled.png?1706888714';
img2.className = 'delete other-icons';
div.appendChild(img2);

newFeedTopBar.appendChild(div);

let p2 = document.createElement('p');
p2.innerText = text;
newFeed.appendChild(p2);

let img3 = document.createElement("img");
img3.src = 'https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/026/original/comment.png?1706888619';
img3.className = 'comment';
newFeed.appendChild(img3);

let img4 = document.createElement("img");
img4.src = 'https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/064/029/original/heart.png?1706888679';
img4.className = 'like';
newFeed.appendChild(img4);
add(newFeed, feeds);
}

function add (newFeed) {
feedSection.appendChild(newFeed);
}
162 changes: 162 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
body {
margin: 0;
}

.top-bar {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 30px;
padding-right: 30px;
border-bottom: 1px solid #e8ecf1;
}

p {
margin: 10;
}

.tweet {
background-color: white;
width: 500px;
border: 1px solid #e8ecf1;
border-radius: 5px;
padding: 5px;
}

.tweet-section {
padding-top: 150px;
background-color: #f7fcff;
width: 60%;
height: 100vh;
}

.tweet-section > * {
margin-left: 200px;
}

.tweet > img {
margin: 10px 10px 180px 10px;
}

.tweet-bottom {
display: flex;
justify-content: space-around;
height: 30px;
align-items: center;
}

.tweet-bottom p {
color: #b1bac8;
}

textarea {
height: 200px;
width: 400px;
border-radius: 10px;
border: 0;
}

button {
background-color: #0041ca;
color: white;
border: none;
border-radius: 10px;
width: 80px;
height: 30px;
cursor: pointer;
}

.container {
display: flex;
}

.feed-section p {
margin: 20px;
font-size: 20px;
}

.feed-top-bar {
display: flex;
justify-content: space-between;
}

.feed {
background-color: white;
width: 500px;
border: 1px solid #e8ecf1;
border-radius: 5px;
padding: 5px;
margin-left: 20px;
}

.person-icon {
width: 60px;
margin: 10px;
}

.other-icons {
width: 15px;
height: 15px;
margin-right: 20px;
cursor: pointer;
}

.feed > p {
font-size: 15px;
margin-left: 40px;
}
.feed-top-bar p {
color: #b1bac8;
}

.comment {
margin-left: 40px;
cursor: pointer;
margin-right: 20px;
}

.like {
cursor: pointer;
}
.feed-top-bar-inside {
display: flex;
align-items: center;
}

.feed-top-bar-inside p {
font-size: 15px;
}

.delete-modal {
padding: 20px;
height: 150px;
border-radius: 10px;
width: 400px;
border: 1px solid grey
}
.delete-modal img {
height: 20px;
}

.delete-modal-container {
display: none;
background-color: white;
position: fixed;
top: 15%;
left: 35%;
z-index: 1;
margin-top: 200px;
}

.modal-delete {
background-color: red;
color: white;
}

.modal-cancel {
color: lightblue;
border: 1px solid lightblue;
background-color: white;
margin-left: 100px;
}

0 comments on commit 6028f92

Please sign in to comment.