Module-1
MODULE
CHANGE COLORE AND TEXT CHANGE
HTML CODE
<!-- @format -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Module 1</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-10 diplay_container" id="display">
<h1>welcome <span id="name"></span></h1>
<p id="display-text">
Chang Contains Here...!!
</p>
</div>
</div>
<div class="row">
<div class="col">
<h5><i>Click To Color Button and Change The Color</i></h5>
<div class="row">
<div class="col color-button">
<button id="white">white</button>
<button id="green">green</button>
<button id="yellow">yellow</button>
<button id="voilet">voilet</button>
<button id="red">red</button>
<button id="pink">pink</button>
<button id="darkblue">dark blue</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<h5><i>Change The Text Here...</i></h5>
<div class="text">
<textarea rows="10" class="col" cols="100" id="textareatext"></textarea>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="module.js"></script>
</body>
</html>
CSS CODE
/** @format */
.diplay_container {
margin: 90px auto 30px;
height: 500px;
padding: 50px !important;
background-color: rgb(0, 140, 255);
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(182, 182, 182, 0.534);
}
.diplay_container h1 {
text-align: center;
font-weight: 700;
font-size: 60px;
margin-bottom: 20px;
font-family: "Open Sans";
color: rgba(255, 255, 255, 0.486);
transition: 1s;
}
.diplay_container h1:hover {
color: rgba(255, 255, 255, 0.938);
}
.diplay_container p {
font-size: 20px;
color: rgba(255, 255, 255, 0.705);
}
.color-button button {
background: none !important;
padding: 10px;
width: 100px;
border-radius: 25px;
margin: 10px 10px;
border: 0px;
outline: 0px;
transition: 0.5s;
}
.color-button button:focus {
outline: 0px;
box-shadow: 5px 5px 5px rgba(193, 222, 230, 0.418);
}
#darkblue {
background-color: rgb(4, 2, 94) !important;
color: white !important;
}
#white {
background-color: white !important;
color: rgb(156, 136, 136) !important;
border: 1px solid black !important;
}
#green {
background-color: rgb(16, 238, 16) !important;
}
#yellow {
background-color: rgba(255, 255, 38, 0.836) !important;
}
#voilet {
background-color: rgb(162, 2, 255) !important;
}
#red {
background-color: red !important;
}
#pink {
background-color: pink !important;
}
.text {
width: fit-content;
margin: 0 auto;
}
.text textarea {
border: 1px solid blue;
border-radius: 10px;
padding: 10px;
}
#name {
color: rgba(255, 255, 255, 0.884);
}
JS CODE
/** @format */
let displayContainer = document.getElementById("display");
let name = prompt("PLEASE ENTER YOUR NAME:- ");
document.getElementById("name").textContent = name;
console.log(name);
/*call buttond*/
let whiteBtn = document
.getElementById("white")
.addEventListener("click", whiteBtnFun);
let greenBtn = document
.getElementById("green")
.addEventListener("click", greenBtnFun);
let yellowBtn = document
.getElementById("yellow")
.addEventListener("click", yellowBtnFun);
function whiteBtnFun() {
console.log("white");
displayContainer.style.backgroundColor = "white";
}
function greenBtnFun() {
console.log("green");
displayContainer.style.backgroundColor = "rgb(16, 238, 16)";
}
function yellowBtnFun() {
console.log("yellow");
displayContainer.style.backgroundColor = "rgba(255, 255, 38, 0.836)";
}
let voiletBtn = document
.getElementById("voilet")
.addEventListener("click", voiletBtnFun);
function voiletBtnFun() {
console.log("voilet");
displayContainer.style.backgroundColor = "rgb(162, 2, 255)";
}
let redBtn = document
.getElementById("red")
.addEventListener("click", redBtnFun);
function redBtnFun() {
console.log("red");
displayContainer.style.backgroundColor = "red";
}
let pinkBtn = document
.getElementById("pink")
.addEventListener("click", pinkBtnFun);
function pinkBtnFun() {
console.log("pink");
displayContainer.style.backgroundColor = "pink";
}
let darkblueBtn = document
.getElementById("darkblue")
.addEventListener("click", darkblueBtnFun);
function darkblueBtnFun() {
console.log("darkblue");
displayContainer.style.backgroundColor = "rgb(4, 2, 94)";
}
let displayText = document.getElementById("display-text");
let textarea = document.getElementById("textareatext");
textarea.textContent = displayText.textContent;
textarea.addEventListener("change", changeText);
function changeText() {
console.log("changeText");
let newtext = document.getElementById("textareatext").value;
console.log(newtext);
displayText.textContent = newtext;
}
Comments
Post a Comment