Javascript-Age in days challange-1 (Source code)
JAVASCRIPT
function ageInDays(){
var birthYear = prompt("What year you born......... good friend");
var ageInDays = (2020 - birthYear)* 365;
var h1 = document.createElement("h1");
var textAnswer = document.createTextNode('You are' + ageInDays + 'Days');
h1.setAttribute('id', 'ageInDays');
h1.appendChild(textAnswer);
document.getElementById('result').appendChild(h1);
};
function reset(){
document.getElementById('ageInDays').remove();
};
CSS
.btn-container{
border: 2px solid black;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.container-box-heading1{
border: 2px solid black;
justify-content: center;
align-items: center;
display: flex;
}
.result{
border: 2px solid black;
width: auto;
height: 45px;}
.btn-container{
padding: 20px;
}
.container_1{
width: 75%;
display: flex;
flex-direction: column;
align-content: center;
margin-left: 12.5%;
}
.btn_primary button{
background-color: rgb(238, 16, 16);
color: rgb(245, 240, 240);
width: 75px;
height: 30px;
border-radius: 3px;
cursor: pointer;
font-size: 15px;
border: none;
}
.btn_danger button{
background-color: rgb(65, 54, 223);
color: rgb(245, 240, 240);
width: 75px;
height: 30px;
border-radius: 3px;
cursor: pointer;
font-size: 15px;
border: none;
}
.flexbox-result{
width: auto;
height: auto;
border: 2px solid black;
width: 75%;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/project1.css">
<title>Document</title>
</head>
<body>
<div class="container_1">
<div class="container-box-heading1">
<h1>Challange1:Your age in days</h1>
</div>
<div class="btn-container">
<div class="btn_primary" onclick="ageInDays()"><button>Click me</button></div>
<div class="btn_danger" onclick="reset()"><button>Reset</button></div>
</div>
<div id="result">
</div>
</div>
<script src="/js/project1.js"></script>
<script>
</script>
</body>
</html>
Comments
Post a Comment