<!DOCTYPE html>
<html>
<head>
<title>Exercise V3.0</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="w3.css">
</head>
<body>
<div class="container">
<div class="header">
<ul>
<li ><i class="fa fa-home" id="me"></i></li>
<li><i class="fa fa-trash" ></i></li>
<li ><i class="fa fa-close" id="he"></i></li>
</ul>
</div>
<div class="title">
<span>Completed 15 of 67 Exercises:</span>
</div>
<div class="nav">
<ul>
<li><button>JS Variable</button></li>
<li><button>JS Operator</button></li>
<li><button>JS Data Type</button></li>
<li><button>JS Function</button></li>
<li><button>JS Object</button></li>
<li><button>JS Operator</button></li>
<li><button>JS Variable</button></li>
<li><button>JS Operator</button></li>
<li><button>JS Variable</button></li>
<li><button>JS Operator</button></li>
<li><button>JS Variable</button></li>
<li><button>JS Operator</button></li>
<li><button>JS Variable</button></li>
<li><button>JS Operator</button></li>
<li><button>JS Data Type</button></li>
<li><button>JS Function</button></li>
<li><button>JS Object</button></li>
<li><button>JS Operator</button></li>
<li><button>JS Variable</button></li>
<li><button>JS Operator</button></li>
<li><button>JS Variable</button></li>
</ul>
</div>
</div>
<section class="bod">
<div class="p1">
<div class="t1">
<span>Exercise:</span>
</div>
<div class="s2">
<p>Create a variable called <span style="background: #e7e9eb;">carName</span>, assign the value <span style="background: #e7e9eb;">Volvo</span> to it.</p>
</div>
<div class="q1">
<div class="que">
</br></br><span style="margin-left: 24px;">var</span> <input type="text" name="b1" id="b1"maxlength="7" style=" font-size: 15px;"><span>="</span><input type="text" name="b2" id="b2" maxlength="5"><span>";</span>
</div>
<div class="button">
<input type="button" value="Show Answer" onclick="nn()" id="b">
</div>
</div>
</div>
</section>
<script type="text/javascript">
function nn(){
var x=document.getElementById("b1");
if (x.value === "") {
x.value = "carName";
x.style.color="blue";
} else {
x.value = "";
}
var y = document.getElementById("b2");
if (y.value === "") {
y.value = "Volvo";
y.style.color="blue";
} else {
y.value = "";
}
var z = document.getElementById("b");
if (z.value === "Show Answer") {
z.value = "Hide Answer";
} else {
z.value = "Show Answer";
}
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 100%;
height: 113vh;
display: inline;
}
.container{
display: block;
position: fixed;
height: 100%;
width: 262px;
background: #38444d;
box-shadow: 0px 3px 3px 3px #0003;
z-index: 1;
}
.container .header{
display: block;
padding: 1px 10px;
background: white;
}
.container .header ul{
display: flex;
list-style: none;
margin-left: -40px;
}
.container .header ul li{
margin-left: -10px;
margin-right: -10px;
margin-top: -7px;
width: 100%;
padding:0px 10px;
text-align: center;
font-size: 24px;
}
#me{
float: left;
}
#he{
float: right;
}
.container .title{
display: block;
padding: 17px 10px;
text-align: center;
background: #E7E9EB;
}
.container .title span{
font-family: sans-serif;
font-size: 15px;
}
.container .nav ul{
list-style: none;
margin-top: 0px;
}
.container .nav ul li{
display: block;
width: 100%;
}
.container .nav li button{
width: 118%;
border: 1px solid transparent;
border-bottom: 1px solid #000;
margin-left: -40px;
display: block;
font-family: Gadugi;
font-weight: normal;
font-size: 18.5px;
color: #CFDAD1;
background: transparent;
text-align: left;
padding: 14px 30px;
}
.bod{
margin-left: 264px;
height:85vh;
z-index: -1;
}
.bod .p1{
margin-top: 130px;
}
.bod .p1 .t1{
font-family: "Segoe UI Light";
font-size: 40px;
margin-left: 32px;
font-weight: bold;
}
.bod .p1 .s2{
font-family: sans-serif;
margin-left: 32px;
margin-top: 26px;
font-size: 15px;
}
.bod .p1 .q1{
margin-top: 34px;
margin-left: 32px;
background: #E7E9EB;
margin-right: 40px;
height: 290px;
font-family: monospace;
font-size: 20px;
font-weight: thin;
color: black;
border-radius: 5px;
}
#b1{
width: 58px;
border: 1px solid transparent;
height: 18px;
font-family: monospace;
}
#b2{
width: 43px;
border: 1px solid transparent;
height: 18px;
font-size: 15px;
font-family: monospace;
}
.button{
float: right;
margin-top: 155px;
margin-right: 20px;
}
.button #b{
height: 44px;
width: 180px;
margin-right: 10px;
margin-bottom: 30px;
border: 1px solid transparent;
border-radius: 30px 30px 30px 30px;
background: #282A35;
color: white;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
.button #b:hover{
cursor: pointer;
background: black;
}
</style>
</body>
</html>
Kirubel_2 15 Newbie Poster
AndreRet commented: Not sure if there is a question in here? +15
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.