JSFiddle - React, Tailwind, and code Playground

by christian_552

HTML

<!doctype html>
<!--
Auteur: <Chrsistan>
Aanmaakdatum: 15-2-2021

project opdracht
-->

<html>
<head>
    <title>
    </title>
    <!--        deklaleren van karakterset-->
    <meta charset="UTF-8">
    <!--        declareren viewport-->
    <meta name="viewport" content="width=width, initial-scale=1.0">
    <!--        koppelins CSS bestand-->
    <link rel="stylesheet" href="../style/style.css">
    <!--        koppeling javascript bestand-->
    <script src="../script/calculatie.js" defer></script>
</head>

<body>
<div class="grid-container">
    <div class="menu">
        <img id="img1" src="../afbeeldingen/logo-dark.png" height="150px" width="150px">
<nav>
    <li ><a id="blue" href="">Home</a></li>
    <li><a href="">Afslanken</a></li>
    <li><a href="">BMI</a></li>
    <li><a href="../pages/calculatie.php">Calorieën Calculator</a></li>
    <li><a href="">Duurzaam Slank</a></li>
    <li><a href="">IEMT Integral</a></li>
    <li><a href="">Eye Movement Therapy</a></li>
    <li><a href="">Cryolipolyse</a></li>
    <li><a href="">Ballancer</a></li>
    <li><a href="">Orthomoleculair</a></li>
    <li><a href="">Overgewicht</a></li>
    <li><a href="">Over ons</a></li>
    <li><a href="">Contact Den Bosch</a></li>
    <li><a href="">Contact Rosmalen</a></li>
    <li><a href="">Contact Vinkel</a></li>
</nav>
    </div>
   <div class="main">
    <h2 id="header2">
        Calorieën calculator
    </h2>
        <p class="paragraaf">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Fusce vel mi id odio tempor eleifend. Duis dapibus quam vitae
            tellus tincidunt scelerisque. Donec gravida vel magna ac tincidunt.
            Phasellus blandit lectus eu laoreet faucibus.
        </p>
        <p class="paragraaf">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Fusce vel mi id odio tempor eleifend. Duis dapibus quam vitae
            tellus tincidunt scelerisque. Donec gravida vel magna ac...

CSS

body
{
    margin: 0px;
    padding: 0px;
    font-family: "Open Sans", Arial, sans-serif;

}

.grid-container {
    display: grid;
    grid-template-columns: 0.3fr 1.7fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
    "menu main";
}

.menu
{
    grid-area: menu;
    height: 100vw;
    background-color: white;
    position: fixed;

}
.main
{
    grid-area: main;
    position: relative;
}
/*list in navigatie*/
li
{
    list-style: none;
    line-height: 9px;
    text-align: left;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    outline: 0;
    background: 0 0;
    font-size: 100%;
    vertical-align: baseline;
    -webkit-text-size-adjust: 100%;
    font-weight: 500;
    padding: 55px 0 0 0;
    padding-top: 22px;
    color: grey;


}

#blue
{
    color: #2ea3f2;
}

.mid
{   margin-top: 50px;
    color: #333;
    font-weight: 500;
    text-align: center;
    font-size: 40px;
    font-family: 'Merriweather',Georgia,"Times New Roman",serif;
    text-transform: uppercase;

}
.links
{
    -webkit-font-smoothing: antialiased;
    left: 0px;

    vertical-align: baseline;
    -webkit-text-size-adjust: 100%;
    padding-bottom: 10px;
    color: #333;

    font-family: 'Merriweather',Georgia,"Times New Roman",serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.6em;
}
.links p
{
    color: #666;
    font-family: "Open Sans",Arial,sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    word-wrap: break-word;
    text-align: left;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
    font-size: 100%;
    vertical-align: baseline;
    -webkit-text-size-adjust: 100%;
    line-height: 2em;
    padding-bottom: 0;
}
.left
{
    padding-left: 20px;
}
.paragraaf
{
    width:20vw;

    color: #666;
    font-family: "Open Sans",Arial,sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    line-height: 1.7em;
   ...

JavaScript

function berekenen()
{
    var man = document.getElementById("man").value;
    var vrouw = document.getElementById("vrouw").value;
    var leeftijd = document.getElementById("leeftijd").value;
    var lengte = document.getElementById("lengte").value;
    var gewicht = document.getElementById("gewicht").value;

    console.log(man,vrouw,leeftijd,lengte,gewicht)
    if (man == "1")
        {
            var antwoord =88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd);
            document.getElementById("maximum calorie inname" + antwoord)
            console.log(antwoord);
        }
    else if (vrouw == "2")
        {
            var antwoord = 447.593 + (9.247 * gewicht) + (3.098 * lengte) - (4.330 * leeftijd);
            document.getElementById("maximum calorie inname" + antwoord);
            console.log(antwoord);
        }
    else
    {
        prompt("je hebt iets verkeerd ingevult")
    }
    console.log(antwoord)
}