Sparta Vocabulary Notebook
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
<link href='{{ url_for("static", filename="mystyle.css") }}' rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
.container {
width: 80%;
max-width: 800px;
margin: 30px auto;
padding: 20px;
background-color: white;
border: solid 1px gray;
border-radius: 10px;
}
span.example {
color: gray;
font-size: 14px;
}
.btn-sparta {
color: #fff;
background-color: #e8344e;
border-color: #e8344e;
}
.btn-outline-sparta {
color: #e8344e;
background-color: transparent;
background-image: none;
border-color: #e8344e;
}
</style>
<script>
let word = '{{ word }}'
$(document).ready(function () {
{#get_definitions()#}
{% if status=='old' %}
get_examples()
{% endif %}
})
function get_definitions() {
$.ajax({
type: "GET",
url: `https://owlbot.info/api/v4/dictionary/${word}`,
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Token be0f5ffabb32a681282efaf2a5602b2371c8c41f");
},
data: {},
error: function (xhr, status, error) {
alert("에러 발생!");
},
success: function (response) {
console.log(response)
$('#word').text(response['word'])
if (response['pronunciation'] == null) {
$('#pronunciation').text('')
} else {
$('#pronunciation').text(`/${response['pronunciation']}/`)
}
let definitions = response['definitions']
$('#definitions').empty()
for (let i = 0; i < definitions.length; i++) {
let definition = definitions[i]
let temp_html = ``
if (definition['example'] == null) {
temp_html = `<div style="padding:10px">
<i>${definition['type']}</i>
<br>${definition['definition']}<br>
</div> `
} else {
temp_html = `<div style="padding:10px">
<i>${definition['type']}</i>
<br>${definition['definition']}<br>
<span class="example">${definition['example']}</span>
</div> `
}
$('#definitions').append(temp_html)
}
}
})
}
function save_word() {
$.ajax({
type: "POST",
url: `/api/save_word`,
data: {
word_give: '{{ word }}',
definition_give: '{{ result.definitions[0].definition }}'
},
success: function (response) {
alert(response["msg"])
window.location.href = '/detail/{{ word }}?status_give=old'
}
});
}
function delete_word() {
$.ajax({
type: "POST",
url: `/api/delete_word`,
data: {
word_give: '{{ word }}'
},
success: function (response) {
alert(response["msg"])
window.location.href = '/'
}
});
}
function get_examples() {
$("#example-list").empty()
$.ajax({
type: "GET",
url: `/api/get_exs?word_give=${word}`,
data: {},
success: function (response) {
console.log(response)
let examples = response['examples']
for (let i = 0; i < examples.length; i++) {
let example = examples[i]["example"]
let html_temp = `<li id="ex-${i}">${example} <a
href="javascript:delete_ex(${i})">delete</a></li>
`
$('#example-list').append(html_temp)
}
}
});
}
function add_ex() {
let new_ex = $('#new-example').val();
if (!new_ex.toLowerCase().includes(word.toLowerCase())) {
alert(`${word}를 포함하는 문장을 써 주세요!`)
return
}
$.ajax({
type: "POST",
url: `/api/save_ex`,
data: {
word_give: word,
ex_give: new_ex
},
success: function (response) {
console.log(response)
get_examples()
$('#new-example').val("")
}
});
}
function delete_ex(i) {
console.log("deleting", i)
$.ajax({
type: "POST",
url: `/api/delete_ex`,
data: {
word_give: word,
number_give: i
},
success: function (response) {
get_examples()
}
});
}
</script>
{{ result.word }}
{% if result.pronuncition %}
/{{ result.pronunciation }}/
{% endif %}
{% if status=='new' %}
{% else %}
{% endif %}
{% for definition in result.definitions %}
{{ definition.type }}
{{ definition.definition.encode('ascii','ignore').decode('utf-8') }}
{% if definition.example %}
{{ definition.example.encode('ascii','ignore').decode('utf-8')|safe }}
{% endif %}
{% endfor %}
{% if status=='old' %}
{% endif %}