-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
89 lines (71 loc) · 2.62 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// importing the function here
import searchIT from './searchitapi';
// getting the refrences here
const form = document.querySelector('#search');
const input = document.querySelector('#inputText');
// adding the event listeners
form.addEventListener('submit', (e) => {
e.preventDefault();
// getting the input value
let value = input.value;
// getting the sort value
const sortValue = document.querySelector('input[name="sortby"]:checked').value;
// getting the limit value
const limtiValue = document.querySelector('#limit').value;
// validating the form
if (value === '') {
showMessage('Please type something to search', 'alert-danger');
}
// clearing the value here
input.value = ''
// search here
searchIT.search(value, sortValue, limtiValue)
.then((res) => {
let output = '<div class="card-columns">';
res.forEach(post => {
// Check for image
let image = post.preview
? post.preview.images[0].source.url
: 'https://cdn.comparitech.com/wp-content/uploads/2017/08/reddit-1.jpg';
output += `
<div class="card mb-2">
<img class="card-img-top" src="${image}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">${post.title}</h5>
<p class="card-text">${truncateString(post.selftext, 100)}</p>
<a href="${post.url}" target="_blank
" class="btn btn-primary">Read More</a>
<hr>
<span class="badge badge-secondary">Subreddit: ${post.subreddit}</span>
<span class="badge badge-dark">Score: ${post.score}</span>
</div>
</div>
`;
});
output += '</div>';
document.getElementById('output').innerHTML = output;
})
});
// message function
const showMessage = (txt, cls) => {
// creating the div
const div = document.createElement('div');
// adding the class
div.className = `alert ${cls}`;
// adding txt
div.textContent = txt
// getting the parent
const parent = document.getElementById('search-container');
const parentChild = document.getElementById('search');
// appending here
parent.insertBefore(div, parentChild);
setTimeout(() => {
document.querySelector('.alert').remove();
}, 2000);
}
// Truncate String Function
function truncateString(myString, limit) {
const shortened = myString.indexOf(' ', limit);
if (shortened == -1) return myString;
return myString.substring(0, shortened);
}