სოციალური მედიის აპლიკაცია ნაწილი 1

საწყისი ფაილები

index.html

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>სოციალური მედიის აპლიკაცია</title>
 </head>
 <body>
     <h1>სოციალური მედიის აპლიკაცია</h1>



     <script src="./index.js"></script>

 </body>
 </html>

index.js

console.log('index.js works!')

აპლიკაციის ჩონჩხი

<div id="app">
     <input id="post-text">
     <button>გამოქვეყნება</button>
     <h2>გამოქვეყნებული პოსტები</h2>
     <div id="posts">
</div>
</div>

publishPost ფუნქციის შექმნა

function publishPost() {
	let text = document.getElementById('post-text').value
	console.log(text)
}

ფუნქციის დაკავშირება ღილაკთან

<input id="post-text">
<button id="publish-post">გამოქვეყნება</button>
<h2>გამოქვეყნებული პოსტები</h2>

publishPost() ფუნქციის შემდეგ ჩაამატეთ ეს ხაზი

document.getElementById('publish-post').onclick = publishPost

პოსტის გამოქვეყნება

<h2>გამოქვეყნებული პოსტები</h2>
<div id="posts-feed">
</div>

function publishPost() {
	 let text = document.getElementById('post-text').value
	 let postsFeed = document.getElementById('posts-feed')
	 postsFeed.insertAdjacentHTML('afterbegin', text + '<br>')
}

პოსტის div-ის დამატება

function publishPost() {
     let postText = document.getElementById('post-text').value
     let postsFeed = document.getElementById('posts-feed')
     let postElem = '<div class="post-text">'+ postText + '</div>'
     postsFeed.insertAdjacentHTML('afterbegin', postElem)
}