The unit converter is my fourth project of Scrimba Front-End course, in this course I build web designs from scratch and structure the code to finish the layout design.
The Unit Converter is my fourth static website, I practice to build the function() and use "Template String" to make code easily to read.
I start the Scrimba Module 3 course- Making websites interactive and learn how to use basic HTML, CSS & JavaScript knowledge. At the end of the course, I follow the Figma template to finish the digital unit converter to quickly transfer the unit, take a look at the → Unit Converter.
- Ensure all points are taken into consideration from Figma Template. → Figma Template from Scrimba
- Generate all conversions when the user click "Convert".
- Round the numbers down to 3 decimal places.
- Use the "Template String/Template literals" concept in the project to show the conversion result.
Designing a unit converter website requires following some rules and taking into consideration that the project is not only a graphic project but a web project too. The next sections are crucial for any web project.
- onclick Call a function when a button is clicked:.
ℹ️ [onclick] GET to know more about the definition. → W3School
- Be familiar with the HTML Tag.
- Before working on each website project, I can build every template with my own structure concept. Building the structure before everything else will facilitate my work afterward.
<button onclick="myFunction()">Click me</button>Why do we use template string. The main purpose is easy to read→ Explanation
- Template String is a string interpolation with embedded expressions
- Below it is an example to show how to use it.
for (let i = 0; i < myLeads.length; i++) {
// listItems += "<li><a target='_blank' href='" + myLeads[i] + "'>" + myLeads[i] + "</a></li>"
listItems += `
<li>
<a target='_blank' href='${myLeads[i]}'>
${myLeads[i]}
</a>
</li>Another method to active the button.
The addEventListener() method attaches an event handler to the specified element. Example shows below.
document.getElementById("myBtn").addEventListener("click", displayDate);Resources: * 📖 addEventListener()
- When double click the function will be actived.
const deleteBtn = document.getElementById("delete-btn")
deleteBtn.addEventListener("dblclick", function() {
localStorage.clear()
myLeads = []
render(myLeads)
})