Scrimba Module 3 solo project - unit converter Frontend Developer Career Path
Requirements:
- follow the design spec Figma design
- generate all conversions when the user clicks "convert"
- round the numbers down to three decimal places
Personal stretch goals
- follow the design spec with no changes
- responsive design
Create Github repository
- initialize README
Setup basic HTML file
- insert my personal comment credit
- head tag includes stylesheet/link and fonts, double check for meta viewport tag
- initial semantic, accessible markup: placing main, heading and paragraph tags
- commit and push
Setup basic CSS file
- insert my personal comment credit
- decide on mobile or desktop-first design based on design file examples
- set up root selector with variables: colors, border radius, and font size
- margin, padding, box-size reset, root
- decide on global styles
- commit and push
Consult Figma design files
- use rems or ems
- adjust text properties: size, line height, color
- insert images and color properties
- decide on layout tools and markup accordingly
- add effects: borders, box shadows, etc
- commit and push after each major change
Publish live URL
Check markup and accessibility (https://validator.w3.org/) (https://wave.webaim.org/)
- make adjustments as necessary
- commit and push
- finish README
- Semantic HTML5 markup
- CSS custom properties
- Responsive Web Design
- vanilla JavaScript
- It is easier to assign specific numbers to variables to be used inside a function.
- I tried building with arrow functions, and their syntax seems way more usable to me.
- I learned the .toFixed() is way easier than Math.round() for certain size numbers.
const convertLength = () => {
let value = inputNum.value;
return length.textContent =
`${value} meters = ${(value * metersToFeet).toFixed(3)} feet |
${value} feet = ${(value / metersToFeet).toFixed(3)} meters`
}; DRYer code questions:
- functions with parameters When I try to make a function with parameters, or use function() in an event listener, it doesn't work. It seems to try to run all of the code immediately, or the button click doesn't work. Why is this?
- multiple event listeners Is there a way to do this without so many event listeners?
- Need hover and focus states for interactive elements.
CSS outline property
input:hover, input:focus {
width: 200px;
outline: 3px solid var(--spring-green);
}- A few unused classes and properties in CSS.
I had used these for coding the design and forgot to remove them.
- input positive number only: HTML or CSS
Input number type with minimum entry
<label class="hidden" for="number-entry">Number Entry</label>
<input type="number" id="num-val" name="number-entry" min="1"> Hide the spinner
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
} -
JavaScript is pretty short and sweet. A couple ways around all the event listeners. How might we use a parameter?
-
Alternative for input reset.