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

Popular posts from this blog

React Project (Todo App)

-
Image
  Todo App (React ) Step 1: First create a project using create project comments -->create-react-app project_name Step 2: Next Open the live Server Means NPM servers -->npm start Step 3: Open your editors (ex: VS code)-->code . Step 3: Create a Firebase Project            REfer Firebase Documentation Step 4: Delete the Unuse Files Step 5: Code For App.js:- import   React , {  useState ,  useEffect  }  from   'react' ; import   Todo   from   './Todo' ; import  {  Button ,  FormControl ,  Input ,  InputLabel  }  from   '@material-ui/core' ; import   './App.css' ; import   db   from   './firebase' ; import   firebase   from   'firebase' ; function   App () {    const  [ todos ,  setTodos ] =  useState ([]);    const  [ input ,  setInput ] =  useState ( ''...
Read more

Bootstrap /Flex-Boxs / Grids

-
Image
 Bootstrap Introduction:-                                 Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites. How To Accesses Bootstrap?                                                 First Link The Bootstrap CDN in HTML file in the header section.                 Like CSS CDN :- <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" cros...
Read more

Switching Tab in wix

-
Image
Multi State Boxes STEPS:- 1) First of all please on development mode in wix. 2) Click the + ( add) icon. 3) Select and click interactive 4) And select and drag and drop Boxes -> Multi state boxes. 6) And manage and rename state boxes like repeater  7) Add the code -> open code corvid  terminal and past the following code and changes the accordingly  8) code => $w.onReady( function  () {                 $w( '# add button id' ).onClick(() => {         $w( '# add state box id' ).changeState( " add box name edited " );     });       $w( '# next button id ' ).onClick(() => {         $w( '# add state box id ' ).changeState( " add box name " );     }); });  
Read more