Word info graphic creator #68
Assignees
Labels
enhancement
New feature or request
Comments
|
How did you make this specific card? |
Currently using Apple Keynote application. It's handy for me as it works on mobile, iPad as well as laptop. But to make it available to everyone and to reduce manual effort, I want to make this work directly on our website. |
sanketgarade
added
enhancement
|
Initial screen <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Marathi Shabd</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="display-card">
<h1>मराठी वाचावा</h1>
<h3>बोला. लिहा. वाचा. टिकवा.</h3>
<div class="display-word">
<h1 id="display-incorrect-word">Kitchen</h1>
<h3 id="display-incorrect-sentence">भांडी Kitchen मध्ये आहेत.</h3>
<div>incorrect emoji</div>
</div>
<div class="display-word">
<h1 id="display-correct-word">स्वयंपाकघर</h1>
<h3 id="display-correct-sentence">भांडी स्वयंकपाकघरात आहेत.</h3>
<div>correct emoji</div>
</div>
</div>
<hr>
<form class="display-form">
<label>Word</label> <input type="text" id="incorrect-word"></br>
<label>Incorrect Sentence</label> <input type="text" id="incorrect-sentence"></br>
<label>Correct Word</label> <input type="text" id="correct-word"></br>
<label>Correct Sentence</label> <input type="text" id="correct-sentence"></br>
<button type="button" onclick="showCard()">Show</button>
</form>
</body>
<script src="index.js"></script>
</html>index.js function showCard() {
const inorrectWord = document.querySelector('#incorrect-word').value;
const incorrectSentence = document.querySelector('#incorrect-sentence').value;
const correctWord = document.querySelector('#correct-word').value;
const correctSentence = document.querySelector('#correct-sentence').value;
document.querySelector('#display-incorrect-word').innerHTML = inorrectWord
document.querySelector('#display-incorrect-sentence').innerHTML = incorrectSentence
document.querySelector('#display-correct-word').innerHTML = correctWord
document.querySelector('#display-correct-sentence').innerHTML = correctSentence
}style.css .display-card {
text-align: center;
}
.display-form {
margin: auto;
width: 60%;
padding: 10px;
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a feature to create card like images which can be shared on social media for creating awareness.
Additional to the search functionality, a user can get an info graphic (like the one shown below) when he or she search for a specific word. It can be downloaded as an image (worst case, take a screenshot) and can be shared further.
If anyone has any idea how this can be done and wants to take it up please let me know here. So that we can discuss further.
The text was updated successfully, but these errors were encountered: