Skip to content
This repository has been archived by the owner on Oct 23, 2018. It is now read-only.

Vidit hello world #4068

Merged
merged 3 commits into from
Oct 16, 2018
Merged

Vidit hello world #4068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aebc819
Create vidit-Hello-world.html
viditvarshney Oct 16, 2018
3c14ddb
Create vidit-Hello-world.css
viditvarshney Oct 16, 2018
4221e67
Create vidit-Hello-world.js
viditvarshney Oct 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions Html/vidit-Hello-world/vidit-Hello-world.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
body {
background-color: lightcoral;
}

.header {
width:100%;
height:100px;
position: relative;
top:40%;
}

.container {
display: inline-block;
height:50px;
position: absolute;
top: 20px;
left: 42%;
}


.msg {
font-size: 25px;
}
button {
width: 200px;
height:50px;
background-color: aquamarine;
border: none;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 10px darkgoldenrod;
color:white;
cursor: pointer;

}

button:active {
position: relative;
top:7px;
box-shadow: none;
color: rebeccapurple;
font-weight: bold;

}
#btn {
font-size: 25px;
font-family: cursive;
}
#hello {
font-size: 50px;
font-family: cursive;
color: blueviolet;
font-style: oblique;
font-weight: bold;
text-align: center;
text-decoration: underline brown;
}
22 changes: 22 additions & 0 deletions Html/vidit-Hello-world/vidit-Hello-world.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<html>
<head>
<title>Hello-World</title>
<link rel = "stylesheet" type="text/css" href="vidit-hello.css">

</head>
<body id="body">
<p id="hello"></p>
<div class="header">
<!--create a button with span -->
<div class="container">

<button id="btn"><span class="msg">Click-Me</span></button>

</div>
</div>



<script src="vidit-hello.js"></script>
</body>
</html>
6 changes: 6 additions & 0 deletions Html/vidit-Hello-world/vidit-Hello-world.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
document.getElementById("btn").onclick = function() {
document.getElementById("btn").innerHTML = "Button Clicked";
document.getElementById("hello").innerHTML = "Hello-World";
document.getElementById("body").style.backgroundColor = "lightgreen";

}