Skip to content

added comments main.js and index.ejs #25

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

Merged
Ethodeus merged 1 commit into from
Jun 12, 2022
Merged

added comments main.js and index.ejs #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

ul {
margin: 0;
padding: 0 1rem;
list-style: none;
}

Expand Down Expand Up @@ -212,7 +213,6 @@ main {
border-radius: 25px;
width: 90%;
}


.scroll-container {
overflow-y: scroll;
Expand Down
9 changes: 8 additions & 1 deletion public/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,22 @@ async function getMatches() {
}
}

/**
* Name: renderMatches
* Description: takes an array of matches, each match represents resources that had contained a resource's keyword and renders each match to the DOM.
* @param {*} matches - accepts an array of objects had contained a resource's keyword.
*/
function renderMatches(matches) {
const list = document.getElementById('result-list');
list.innerHTML = '';

// For every match found, render the objects to the DOM in JSON format
matches.forEach(match => {
const li = document.createElement('li');

// Create an element that looks like a JSON object for every match
li.innerHTML = `
<pre class="json"><code>{<div class="indent"><br>name: ${match.name},<br>url: ${match.url},<br class="middle-br">keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]</div><br>}</code>
<pre class="json"><code>{<div class="indent"><br>name: '${match.name}',<br>url: '${match.url}',<br class="middle-br">keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]</div><br>}</code>
</pre>
`;

Expand Down
5 changes: 4 additions & 1 deletion views/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,13 @@
<div class="result">
<div class='scroll-container'>
<ul id="result-list">
<!-- Loop through resources array and render each object to the DOM -->
<% for(let i = 0; i < resources.length; i++) { %>
<li>
<!-- JSON Format for DOM rendering -->
<pre class="json">
<code>{<div class="indent"><br>name: <%= resources[i].name %>,<br>url: <%= resources[i].url %>,<br class="middle-br">keywords: [<%= resources[i].keywords.map(keyword => `'${keyword}'`).join(", ") %>]</div><br>}</code>
<!-- Add indentation, line break and quotes around each key's value -->
<code>{<div class="indent"><br>name: '<%= resources[i].name %>',<br>url: '<%= resources[i].url %>',<br class="middle-br">keywords: [<%= resources[i].keywords.map(keyword => `'${keyword}'`).join(", ") %>]</div><br>}</code>
</pre>
</li>
<% } %>
Expand Down