Laskin

html_css_basics | ├── demos │ ├── ... │ └── d13 │ ├── index.html │ ├── style.css │ ├── (calc.js) │ └── (math.js) |

HTML

• Toteuta käyttöliittymä laskimelle
• Alusta HTML dokumentti ja lisää seuraavat elementit bodyyn
• Lisää halutessasi pääotsikko Laskin
• Lisää tyhjä header-elementti, jolla on id screen
• Lisää headerin alle section jolla on id buttons
• Lisää sectionin sisään taulukko, jossa on painikkeet
• Voit käyttää erikoismerkeissä HTML Entityjä
• Lisää style.css ja linkitä se headiin

CSS

• Määrittele teemavärit halutessasi muuttujina CSS:n root osioon
• Etsi Google Fontsista sopiva fontti esim. monospace tyylinen,
  jossa jokainen merkki vie saman verran tilaa
• Käytä fonttia bodyssä
• Määrittele teemavärit halutessasi muuttujina CSS:n root osioon
• Keskitä laskin asettamalla esim. bodylle display: flex; ja justify-content: center;
• Rajoita manin maksimileveys 260px
• Aseta taustavärit ja tesktien värit
• Aseta *{...} kaikille elementeille box-sizing: border-box;
• Aseta taulukon soluille (table td) reunaviiva (border)
• Säädä nappien taustaväriä (background-color) ja reunanväriä (border-color)
• Muuta nappien väriä tai kirkkautta (backdrop-filter: brightness) hover-tilassa
• Tallenna muutokset GitHubiin ja päivitä etusivun harjoituslista