Scribd Logo
Upload

Welcome to Scribd!

  • Web 04

    Uploaded by

    Ajo Mathew
    8 views3 pages
    The document contains CSS styles for setting up a drum kit interface. It defines styles for the body, headings, footer, and individual drum buttons/pads. Key selectors include classes for each drum button (.w, .a, etc.) and shared styles for the .drum class governing the button properties. It also includes JavaScript code defining a HouseKeeper constructor function to initialize HouseKeeper objects with properties like name, age, and languages spoken.

    Original Description:

    Web Developement using HTML, CSS, JS

    Original Title

    web 04

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains CSS styles for setting up a drum kit interface. It defines styles for the body, headings, footer, and individual drum buttons/pads. Key selectors include classes for each drum button (.w, .a, etc.) and shared styles for the .drum class governing the button properties. It also includes JavaScript code defining a HouseKeeper constructor function to initialize HouseKeeper objects with properties like name, age, and languages spoken.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views3 pages

    Web 04

    Uploaded by

    Ajo Mathew
    The document contains CSS styles for setting up a drum kit interface. It defines styles for the body, headings, footer, and individual drum buttons/pads. Key selectors include classes for each drum button (.w, .a, etc.) and shared styles for the .drum class governing the button properties. It also includes JavaScript code defining a HouseKeeper constructor function to initialize HouseKeeper objects with properties like name, age, and languages spoken.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    background-color: #283149;

    h1 {
    font-size: 5rem;
    color: #DBEDF3;
    font-family: "Arvo", cursive;
    text-shadow: 3px 0 #DA0463;

    footer {
    color: #DBEDF3;
    font-family: sans-serif;
    }

    .w {
    background-image: url("/Users/ajomathew/Downloads/Drum Kit Starting
    Files/images/tom1.png");
    }

    .a {
    background-image: url("/Users/ajomathew/Downloads/Drum Kit Starting
    Files/images/tom2.png");
    }

    .s {
    background-image: url("/Users/ajomathew/Downloads/Drum Kit Starting
    Files/images/tom3.png");
    }

    .d {
    background-image: url("/Users/ajomathew/Downloads/Drum Kit Starting
    Files/images/tom4.png");
    }

    .j {
    background-image: url("/Users/ajomathew/Downloads/Drum Kit Starting
    Files/images/crash.png");
    }

    .k {

    background-image: url("/Users/ajomathew/Downloads/Drum Kit Starting


    Files/images/kick.png");
    }

    .l {
    background-image: url("/Users/ajomathew/Downloads/Drum Kit Starting
    Files/images/snare.png");
    }

    .set {
    margin: 10% auto;
    }

    .game-over {
    background-color: red;
    opacity: 0.8;
    }

    .pressed {
    box-shadow: 0 3px 4px 0 #DBEDF3;
    opacity: 0.5;
    }

    .red {
    color: red;
    }

    .drum {
    outline: none;
    border: 10px solid #404B69;
    font-size: 5rem;
    font-family: 'Arvo', cursive;
    line-height: 2;
    font-weight: 900;
    color: #DA0463;
    text-shadow: 3px 0 #DBEDF3;
    border-radius: 15px;
    display: inline-block;
    width: 150px;
    height: 150px;
    text-align: center;
    margin: 10px;
    background-color: white;
    }

    Advanced Js
    var houseKeeper = {

    name: "Ajo Mathew",


    age: 34,
    hasWorkPermit: true,
    languagesSpeak: ["English", "Malayalam"]

    }
    console.log(houseKeeper.name);
    console.log(houseKeeper.age);
    console.log(houseKeeper.hasWorkPermit);
    console.log(houseKeeper.languagesSpeak);

    Constructor Function
    Rules:

    function name should begin with Capital letters.

    Eg:

    function BellBoy (name, age, hasWorkPermit, languages ) {

    this.name = name;
    this.age = age;
    this.languages = languages;

    }
    Initialise the object
    var bellBoy1 = new BellBoy("Ajo", 33, "yes", ["English", "Tamil"]);
    var bellBoy1 = new BellBoy("Ajo", 44, "no", ["German", "French"]);

    Eg:

    create an constructor function


    function HouseKeeper (name, age, hasWorkPermit) {
    this.name = name;
    this.age = age;
    this.hasWorkPermit = hasWorkPermit;
    }

    and initialise it
    var houseKeeper1 = new HouseKeeper("Ajo", 34, "yes");

    Output:
    HouseKeeper {name: 'Ajo', age: 34, hasWorkPermit: 'yes'}

    Also,
    console.log(houseKeeper1.name);

    IMPORTANT TOPIC
    How to get a particular text manipulated?
    Here w, a, s, d j, k or l : how to get these
    texts?
    Ans: var key = this.innerHTML;

    or

    var key = this.textContent;

    <body>

    <h1 id="title">Drum 🥁 Kit</h1>


    <div class="set">
    <button class="w drum">w</button>
    <button class="a drum">a</button>
    <button class="s drum">s</button>
    <button class="d drum">d</button>
    <button class="j drum">j</button>
    <button class="k drum">k</button>
    <button class="l drum">l</button>
    </div>

    You might also like