Skip to content

Commit 6c721c1

Browse files
howdyAnkithowdyAnkit
committed
Final code
0 parents  commit 6c721c1

File tree

4 files changed

+226
-0
lines changed

4 files changed

+226
-0
lines changed

‎index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Word Smith</title>
6+
<link rel="stylesheet" type="text/css" href="public/style.css" />
7+
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Work+Sans:200,500" rel="stylesheet">
8+
</head>
9+
10+
<body>
11+
<header>
12+
<img src="https://s3.amazonaws.com/codecademy-content/courses/intermediate-javascript-requests/wordsmith_logo.svg" class="logo" />
13+
14+
</header>
15+
<main id="main">
16+
<div class="container">
17+
18+
<h1>Enter a Word</h1>
19+
20+
<form id="form" autocomplete="off">
21+
<input type="text" id="input" value="" placeholder="type in a word">
22+
23+
<input type="text" id="topic" value="" placeholder="type in a topic">
24+
<button id="submit">SUBMIT</button>
25+
</form>
26+
27+
<div id="responseField">
28+
29+
</div>
30+
31+
</div>
32+
</main>
33+
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
34+
<script src="public/main.js"></script>
35+
<script src="public/helperFunctions.js"></script>
36+
</body>
37+
</html>

‎public/helperFunctions.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// Formats response to look presentable on webpage
2+
const renderResponse = (res) => {
3+
// handles if res is falsey
4+
if(!res){
5+
console.log(res.status)
6+
}
7+
// in case res comes back as a blank array
8+
if(!res.length){
9+
responseField.innerHTML = "<p>Try again!</p><p>There were no suggestions found!</p>"
10+
return
11+
}
12+
13+
// creating an array to contain the HTML strings
14+
let wordList = []
15+
// looping through the response and maxxing out at 10
16+
for(let i = 0; i < Math.min(res.length, 10); i++){
17+
// creating a list of words
18+
wordList.push(`<li>${res[i].word}</li>`)
19+
}
20+
// joins the array of HTML strings into one string
21+
wordList = wordList.join("")
22+
23+
// manipulates responseField to render the modified response
24+
responseField.innerHTML = `<p>You might be interested in:</p><ol>${wordList}</ol>`
25+
return
26+
}
27+
28+
// Renders response before it is modified
29+
const renderRawResponse = (res) => {
30+
// taking the first 10 words from res
31+
let trimmedResponse = res.slice(0, 10)
32+
//manipulates responseField to render the unformatted response
33+
responseField.innerHTML = `<text>${JSON.stringify(trimmedResponse)}</text>`
34+
}
35+
36+
// Renders the JSON that was returned when the Promise from fetch resolves.
37+
const renderJsonResponse = (res) => {
38+
// creating an empty object to store the JSON in key-value pairs
39+
let rawJson = {}
40+
for(let key in response){
41+
rawJson[key] = response[key]
42+
}
43+
// converting JSON into a string and adding line breaks to make it easier to read
44+
rawJson = JSON.stringify(rawJson).replace(/,/g, ", \n")
45+
// manipulates responseField to show the returned JSON.
46+
responseField.innerHTML = `<pre>${rawJson}</pre>`
47+
}

‎public/main.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// Information to reach API
2+
const url = 'https://api.datamuse.com/words?';
3+
const queryParams = 'rel_jjb=';
4+
const additionalParams = '&topics=';
5+
// Selecting page elements
6+
const inputField = document.querySelector('#input');
7+
const topicField = document.querySelector('#topic');
8+
const submit = document.querySelector('#submit');
9+
const responseField = document.querySelector('#responseField');
10+
11+
// AJAX function
12+
const getSuggestions = () => {
13+
const wordQuery = inputField.value;
14+
const topicQuery = topicField.value;
15+
const endpoint = `${url}${queryParams}${wordQuery}${additionalParams}${topicQuery}`;
16+
17+
const xhr = new XMLHttpRequest();
18+
xhr.responseType = 'json';
19+
20+
xhr.onreadystatechange = () => {
21+
if (xhr.readyState === XMLHttpRequest.DONE) {
22+
renderResponse(xhr.response);
23+
}
24+
}
25+
26+
xhr.open('GET', endpoint);
27+
xhr.send();
28+
}
29+
30+
// Clear previous results and display results to webpage
31+
const displaySuggestions = (event) => {
32+
event.preventDefault();
33+
while(responseField.firstChild){
34+
responseField.removeChild(responseField.firstChild);
35+
}
36+
getSuggestions();
37+
}
38+
39+
submit.addEventListener('click', displaySuggestions);

‎public/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
header {
2+
text-align: center;
3+
background-color: #ef6b68;
4+
padding: 10px;
5+
}
6+
7+
main {
8+
background-color: #ef6b68;
9+
height: 900px;
10+
text-align: center;
11+
}
12+
13+
h1 {
14+
height: 38px;
15+
font-family: Work Sans, sans-serif;
16+
font-size: 32px;
17+
font-weight: 200;
18+
letter-spacing: 0.6px;
19+
text-align: center;
20+
color: #1f233e;
21+
padding-top: 40px;
22+
margin: 0;
23+
}
24+
25+
li {
26+
text-align: center;
27+
margin: 0 25% 0 25%;
28+
}
29+
30+
.logo {
31+
width: 110px;
32+
height: 28px;
33+
margin-top: 40px;
34+
object-fit: contain;
35+
}
36+
37+
.container {
38+
width: 400px;
39+
margin: auto;
40+
text-align: center;
41+
}
42+
43+
44+
45+
input {
46+
width: 219px;
47+
height: 37px;
48+
border-radius: 3.2px;
49+
border: solid 0.8px #1f233e;
50+
background-color: inherit;
51+
display: block;
52+
margin: auto;
53+
margin-top: 10px;
54+
font-family: Source Sans Pro;
55+
font-size: 14px;
56+
letter-spacing: 0.2px;
57+
text-align: center;
58+
color: #ffffff;
59+
}
60+
61+
#submit {
62+
width: 125px;
63+
height: 30px;
64+
border-radius: 2px;
65+
border-color: inherit;
66+
background-color: #1f233e;
67+
font-family: Work Sans, sans-serif;
68+
font-size: 16px;
69+
font-weight: 500;
70+
letter-spacing: 0.3px;
71+
margin-top: 30px;
72+
text-align: center;
73+
color: #ef6b68;
74+
margin-right: -3px;
75+
}
76+
77+
#responseField {
78+
min-width: 191px;
79+
min-height: 120px;
80+
background-color: #1f233e;
81+
margin: auto;
82+
margin-top: 25px;
83+
font-family: Source Sans Pro;
84+
font-weight: 400;
85+
font-size: 14px;
86+
letter-spacing: 0.2px;
87+
text-align: center;
88+
color: #ffffff;
89+
overflow-wrap: break-word;
90+
padding: 20px;
91+
}
92+
93+
#submit:hover {
94+
color: #ffffff;
95+
cursor: pointer;
96+
}
97+
98+
#submit:active {
99+
background-color: #ffffff;
100+
border-color: #ffffff;
101+
color: #ef6b68;
102+
cursor: pointer;
103+
}

0 commit comments

Comments
 (0)