Skip to content

Instantly share code, notes, and snippets.

@PandaWhoCodes

PandaWhoCodes/currency_converter.html

Last active February 6, 2020 06:34
Show Gist options
  • Save PandaWhoCodes/f71c1a87b8c70a7a14c27def958a8c97 to your computer and use it in GitHub Desktop.
Save PandaWhoCodes/f71c1a87b8c70a7a14c27def958a8c97 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
currency_converter.html
<html>
<head>
<meta charset="UTF-8">
<title>Currency Converter</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<label for="amount">Enter amount in ruppess </label>
<input type="number" id="amount">
<button onclick="calculate();">Calculate</button>
<h3 >Total: <span id="amount_converted"></span><br></h3>
</div>
</div>
</div>
</body>
<script>
var url = "https://free.currconv.com/api/v7/convert?q=USD_INR&compact=ultra&apiKey=53bddc6058cce13a751b";
function calculate(){
var amount = $("#amount").val();
var conversion_ratio = 1;
$.getJSON(
url,
function(data) {
// Success! Do stuff with data.
console.log(data["USD_INR"]);
$("#amount_converted").html(amount/data["USD_INR"]);
}
);
}
</script>
<html>
Raw
todo.html
<html>
<head>
<title>ToDo test1</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 style="color:blue;"> TODO List</h1>
<br>
<br>
<label for="text">Enter the new item: </label>
<input type="text" id="task">
<button id="add" onclick="add();">Add to list</button>
<ol id="items">
<!-- the tasks will be listed here -->
</ol>
</body>
<script>
function add(){
var item = $('#task').val();
$('#items').append(
'<li>'+item+'</li>'
);
}
</script>
</html>
Raw
todo2.html
<html>
<head>
<title>ToDo test1</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 style="color:blue;"> TODO List</h1>
<br>
<br>
<label for="text">Enter the new item: </label>
<input type="text" id="task">
<button id="add" onclick="add();">Add to list</button>
<ol id="items">
<!-- the tasks will be listed here -->
</ol>
</body>
<script>
function add(){
var item = $('#task').val();
$('#items').append(
'<li>'+item+'</li>' + "<span class='label pending'>Mark as complete</span></li>"
);
}
</script>
<style>
ol#items li {
padding: 10px 2px 5px;
}
.label {
padding: 5px 10px;
border-radius: 5px;
color: #333333;
font-size: 0.5em;
padding-left: 10px;
}
.label.pending {
background-color: #d95a6a;
}
.completed {
text-decoration: line-through;
}
</style>
</html>
Raw
todo3.html
<html>
<head>
<title>ToDo test1</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 style="color:blue;"> TODO List</h1>
<br>
<br>
<label for="text">Enter the new item: </label>
<input type="text" id="task">
<button id="add" onclick="add();">Add to list</button>
<ol id="items">
<!-- the tasks will be listed here -->
</ol>
</body>
<script>
var todo_list = [];
function add(){
var item = $('#task').val();
$("#task").val("");
todo_list.push({
item:item,
is_done:false
});
update_todos();
}
function update_todos() {
$("#items").html("");
for (var i = 0; i < todo_list.length; i++) {
if(!todo_list[i]["is_done"]){
$("#items").append(
"<li>" +
todo_list[i]["item"] +
"<span class='label pending' onclick='change_status("+i+")'>Mark as complete</span></li>"
);
}
else{
$("#items").append(
"<li>" +
todo_list[i]["item"] +
"<span class='label pending completed'>Completed</span></li>"
);
}
}
}
function change_status(i){
todo_list[i]["is_done"]=true;
update_todos();
}
</script>
<style>
ol#items li {
padding: 10px 2px 5px;
}
.label {
padding: 5px 10px;
border-radius: 5px;
color: #333333;
font-size: 0.5em;
padding-left: 10px;
}
.label.pending {
background-color: #d95a6a;
}
.completed {
text-decoration: line-through;
}
</style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment