The Weekly Web Dev Challenge: String Calculator
The Weekly Web Dev Challenge: String Calculator
const mainContainer = document.getElementById("main-container")
const equationField = document.getElementById("equation-field")
const solveButton = document.getElementById("solve-button")
const solutionDisplay = document.getElementById("solution-display")
solveButton.addEventListener("click", function() {
// Clears the solution contents on each click
solutionDisplay.innerHTML = ``
// Write your code here 👇
})
/*
Part 1 (Calculation):
+Your first goal is to solve a simple text-based
math problem entered in the input field
+The problem can be add/sub/multiply/divide
+Here are few examples:
"3 + 3" -> 6
"10 - 3" -> 7
"44 / 2" -> 22
"2 * 8" -> 16
+When the 'Solve' button is clicked
-Create a new div with the
class 'equation-component'
its text value should be the solution
to the input equation
-This element should be added as a child of
the `solutionDisplay` div
Note: You can assume there will always only be 2 values,
both whole integers, and always a space between each
integer and the operator as in the above examples
Part 2 (Flex Display):
Then, you'll Flex your Flexbox skills!
+ Vertically stack the contents of the mainContainer
+ Center the content horizontally
+ Display all components of the equation
in the solutionDisplay using a horizontal Flexbox
with `space around` each component
Skills:
Event Listeners, String Manipulation, Array Manipulation,
Arithmetic, DOM Manipulation, Flexbox
STRETCH GOALS:
+Accept and solve more complex problems with more than 2 inputs
+Signal the different types of components (operator/value/solution) with different colors
+Accept strings without spaces
+Can you improve the overall design?
*/
refs
https://scrimba.com/scrim/coc3c469d9114ebc2cf00a3f7
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/13780360.html
未经授权禁止转载,违者必究!