Tuesday, June 15, 2021

COMPILATION OF ALL ACTIVITIES

Home
Facebook Instagram E Youtube Channel
Exercise 6 Exercise 7 Exercise 8 Exercise 9 Exercise 10 Exercise 11
Exercise 6 Exercise 7 Exercise 8 Exercise 10 Exercise 11 Exercise 12 Exercise 13

HOME Fixed Full-height Side Nav




News

© 2021 | klarixie

at No comments:

EXERCISE 12 CHAT BOX (INTERACTIVE MEDIA)

 


HTML CODE

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Message Box </title>
<link rel="stylesheet" href="Exercise 012 Chat box css.css">
</head>

<body>

<section>

<h1> Click the chat button below to start chatting </h1>
<button class="chat-btn"> <b> CHAT </b> </button>
<div id="chat-container" onclick="changeColor()" class="chat-popup">
<div class="chat-area">
<div class="income-msg">
<img src="https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/160717144_1060963257760965_2837933381773745912_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=09cbfe&_nc_ohc=ChQkPJGen28AX-n6J0q&tn=yRHVMOXFu00onmAh&_nc_ht=scontent.fmnl9-2.fna&oh=3030078dfc465d62ac69841275883746&oe=60CCCC1A" class="emman" alt="emman">
<span class="msg"> Emman: What? </span>
</div>
</div>
<div class="input-area">
<input id="name-input" type="name" size="10" style="margin-right:8px;" placeholder="Type your name">
<input id="message-input" type="text" placeholder="Type your message here">
<input type="color" id="colorpicker" class="colors" value="#C7C7C7">
<button class="submit"> SEND </button>
</div>
</div>
</section>

<script src="Exercise 012 Chat box js.js"> </script>

</body>
</html>
CSS CODE 
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

button {
border: none;
outline: none;
cursor: pointer;
}

body {
font-family: Arial, Helvetica, sans-serif;
background-color: #ec97fc;
display: flex;
justify-content: center;
height: 100vh;
width: 100%;
}

section {
max-width: 1100px;
margin: auto;
text-align: center;
padding: 0 1.5rem;
}

h1 {
font-size: 3rem;
margin-bottom: 2rem;
}

.chat-btn {
position: fixed;
right: 50px;
bottom: 50px;
background: white;
color: black;
width: 60px;
height: 60px;
border-radius: 50%;
opacity: 0.8;
transition: opacity 0.3s;
box-shadow: 0 5px 5px rgba(0,0,0,0.4);
}

.chat-btn:hover, .submit:hover, .colors:hover {
opacity: 1;
}

.chat-popup {
display: none;
position: fixed;
bottom: 80px;
right: 120px;
height: 400px;
width: 425px;
background-color: #C7C7C7;
flex-direction: column;
justify-content: space-between;
padding: 0.75rem;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
border-radius: 10px;
}

.show {
display: flex;
}

.chat-area{
height: 80%;
overflow-y: auto;
overflow-x: hidden;
}

.income-msg {
display: flex;
align-items: center;
}

.kai {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
}

.income-msg .msg {
background-color: white;
color: black;
padding: 0.6rem;
border-radius: 8px;
margin-left: 1rem;
box-shadow: 0 2 5px rgba(0,0,0,0.4);
border: 1px solid gray;
}

.input-area {
position: relative;
display: flex;
justify-content: center;
}

input [type="text"], input [type="name"] {
width: 100%;
border: 1px solid #ccc;
font-size: 1rem;
border-radius: 5%;
height: 2.2rem;
padding: 2px;
}

.colors {
margin-left: 0.5rem;
background-color: white;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
opacity: 0.7;
}

.submit {
padding: 0.25rem 0.5rem;
margin-left: 0.5rem;
background-color: white;
color: black;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
border: 1px solid gray;
opacity: 0.7;
}

.out-msg {
display: flex;
justify-content:flex-end;
align-items: center;
}

.my-msg {
display: flex;
justify-content: flex-end;
margin: 0.75rem;
padding: 0.6rem;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px, 5px rgba (0,0,0,0.4);
border: 1px solid gray;
word-break: break-all;
}

@media (max-width:500px){
.chat-popup{
bottom: 120px;
right: 10%;
width: 80vw;
}
}
JAVASCRIPT 
const popup = document.querySelector('.chat-popup');
const chatBtn = document.querySelector('.chat-btn');
const submitBtn = document.querySelector('.submit');
const chatArea = document.querySelector('.chat-area');
const inputElm = document.querySelector('input');
const nameInput = document.getElementById('name-input');
const messageInput = document.getElementById('message-input');

chatBtn.addEventListener('click', ()=>{
popup.classList.toggle('show');
})

function changeColor() {
document.getElementById("chat-container").style.backgroundColor = 
document.getElementById("colorpicker").value;
}

submitBtn.addEventListener('click', ()=>{
let name = nameInput.value;
let message = messageInput.value;
let temp =
`<div class="out-msg">
<span class="my-msg">${name}: ${message}</span>
<img src="" class="Emman">
</div>`;
chatArea.insertAdjacentHTML("beforeEnd", temp);
nameInput.value = '';
messageInput.value = '';
})



at No comments:

EXERCISE 13 LOGIN AND SIGNUP FORM (INTERACTIVE MEDIA)

 






at No comments:

Monday, June 14, 2021

EXERCISE 11 COUNTING GAME (INTERACTIVE MEDIA)

Counting Game

Let's Count!

Let's count the shapes on the screen!

Score:

0

at No comments:

Sunday, June 13, 2021

EXERCISE 10 DRAWING IN CANVA (INTEACTIVE MEDIA)

Exercise 10 Drawing in Canvas
at No comments:

Friday, June 11, 2021

Exercise 11 audio/video (Web programming)

fruits and veggies

at No comments:

Thursday, June 10, 2021

EXERCISE 10 ANIMATION (WEB PROGRAMMING)

at No comments:

Friday, May 7, 2021

exercise 9

Home
Facebook Instagram E Youtube Channel
Exercise 6 Exercise 7 Exercise 8 Exercise 9
Exercise 6 Exercise 7 Exercise 8

HOME Fixed Full-height Side Nav




News

© 2021 | klarixie

at No comments:

exercise 8 sidebar

Exercise 8 CSS Sidebar navigation

Home


Hi my Name is MARIA CLARISSE SALO MMA STUDENT IN UNIVERSITY OF PERPETUAL HELP SYSTEM DALTA . I'm a Graphic designer, photographer and videographer

Portfolio

digital art digital art digital art
digital art digital art digital art

Profile


DSC-0041

HI!

Maria clarisse is here!


i'm a multimedia student in UNIVERSITY OF PERPETUAL HELP SYSTEM DALTA 3rd year student soon to be graphic artist


  • Photography

    when i was in highschool i really love to take pictures landscape, portrait, nigth photography, fashion photography and street photography.


  • Video and Film Productions

    i enjoyed filming when i was in seniorhigh school and also editing our videos.


  • Digital arts

    making my imagination more realistic and more creative .

    Contact

    Don't hesitate to dm me in any social media accounts

    FOLLOW ME ON MY INSTAGRAM!

    Instagram: https://www.instagram.com/m.klarisss//h2>

    ...

    • © 2021 | klarixie
    at No comments:

    Thursday, May 6, 2021

    EXERCISE 7 - PRICE LIST INTERACTIVE






    HTML CODE
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exercise 007 JavaScript Selected Value</title>
    <link rel="stylesheet" href="CJINTERACTIVE7.css">
    </head>

    <body>
    <h1 class="font1"> Select Box Price List</h1>
    <div id="container">
    <form>
    <fieldset>
    <label for="name"> Add Products: </label>
    <input type="text" id="name" placeholder="Enter Product" autocomplete="off"> <br> <br>
    <label for="price"> Add Price: </label>
    <input type="number" id="price" placeholder="Enter Price" autocomplete="off"> <br>
    <br>
    <button class="btn" id="btnAdd" size=10> <b> Add Product </b> </button> <br>
    <div class="row">
    <div class="column">
    <label for="list"> Product List: </label> <br>
    <select id="list" name="list" multiple size=10>
    <option value="apple"> Apple </option>
    <option value="banana"> Banana </option>
    </select>
    </div>
    <div class="column">
    <label for="list"> Price List: </label> <br>
    <select id="price-list" name="price-list" multiple size=10>
    <option value="40"> 40 </option>
    <option value="60"> 60 </option>
    </select>
    </div>
    </div>
    <button class="btn" id="btnRemove"> <b> Remove Product </b> </button> <br>
    </fieldset>
    </form>
    </div>
    <script>
    const btnAdd = document.querySelector('#btnAdd');
    const btnRemove = document.querySelector('#btnRemove');
    const selectbox = document.querySelector('#list');
    const priceselectbox = document.querySelector('#price-list');
    const name = document.querySelector('#name');
    const price = document.querySelector('#price');
    var prod =
    btnAdd.onclick = (e) => {
    e.preventDefault();
    if (name.value == '') {
    alert('Please enter the name.');
    return;
    }
    if (price.value == '') {
    alert('Please enter the price.');
    return;
    }
    const option = new Option(name.value, name.value);
    const optionprice = new Option(price.value, price.value);
    selectbox.add(option, undefined);
    priceselectbox.add(optionprice, undefined);
    name.value = '';
    price.value = '';
    name.focus();
    };
    btnRemove.onclick = (e) => {
    e.preventDefault();
    let selected = [];
    for (let i = 0; i < selectbox.options.length; i++) {
    selected[i] = selectbox.options[i].selected;
    }
    const noneSelected = selected.every(x => !x);
    if (noneSelected) {
    for (let i = 0; i < priceselectbox.options.length; i++) {
    selected[i] = priceselectbox.options[i].selected;
    }
    }
    let index = selectbox.options.length;
    while (index--) {
    if (selected[index]) {
    selectbox.remove(index);
    priceselectbox.remove(index);
    }
    }
    };
    </script>
    </body>
    </html>

    CSS CODE
    * {
    box-sizing: border-box;
    }

    div {
    margin-bottom: 10px;
    }

    h1.font1 {
    font-size: 40px;
    margin-left: 30%;
    }

    label {
    display: inline-block;
    margin-left: 20px;
    }

    fieldset {
    width: 40%;
    background: #F08080;
    padding: 10px;
    margin-left: 30%;
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .column {
      float: left;
      width: 50%;
      padding: 10px;
    }


    p {
    display: inline-block;
    }

    .btn {
    color: white;
    display: block;
    width: 50%;
    margin-left: 25%;
    background-color: #000000;
    border-radius: 8px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 8px;
    padding-top: 8px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    font-family: Verdana;
    }

    select {
    width: 200px;
    margin-left: 23px;
    }
    at No comments:

    Wednesday, May 5, 2021

    EXERCISE 8 - ENTER COLOR NUMBER INTERACTIVE

    Javascript Events

    Enter color

    Enter number



    at No comments:

    Thursday, April 29, 2021

    CSS PAGE LAYOUT web prog

    Photography

    The Ability to capture unique and candid moments, it does not matter if it’s funny, sad, or happy because it will be always memorable and reproduction of those photos are possible but, it won’t have the essence of memorability and candidness that you see and feel in a photo that was captured in true emotion and Other picture that i captured in that particular moment.The most Beautiful thing about Photography is,hen a person either he/she is a Photographer or not clicks something A View,portrait,landscape Etc.What he tries to depict what he focuses in the image the efforts to blur the unnecessary objects in the background or in front and After all of these efforts the results are always beautiful Texting the beauty of A Photograph is a hard job for a photographer that's why we click !!“Stories are the most Beautiful things” Photography

    Digital art

    Creating some of digital art for some reason that i cannot explain virtually, but it has meaningful message for the people

    Digital Art

    MAGAZINE

    Magazine is one of our collection for showing to the people modeling a stylelish dress and our magazines contains articles, stories, photographs, and advertisements showing people some of inspirational works and new knowledge

    all rights reserve 2021 ©.

    at No comments:

    Sunday, April 18, 2021

    Exercise 6: color values web prog

     











    at No comments:

    EXERCISE 6- ORDERLIST INTERACTIVE

    Order List

    Please enter your details below






    at No comments:

    Wednesday, April 7, 2021

    left and right image

    Floating Images

    Float the image to the right:

    https://scontent.fmnl4-4.fna.fbcdn.net/v/t1.6435-9/68658418_2585374104848241_6427229399514349568_n.jpg?_nc_cat=100&ccb=1-3&_nc_sid=e3f864&_nc_eui2=AeGpr0-QglhX8hXsM9c8c0kPno7MSHRsImqejsxIdGwian-xKmRsKmDUfawrHDH8uHCZod5LJx3d5vvYT_FXBy-u&_nc_ohc=XcKJCbpcyqcAX85xqzt&_nc_ht=scontent.fmnl4-4.fna&oh=3295a970a9699f111ba76cea30eec2e6&oe=6092E6FC

    Float the image to the left:

    https://scontent.fmnl4-2.fna.fbcdn.net/v/t1.6435-9/151208419_3966830613369243_7187990405173214542_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=09cbfe&_nc_ohc=fU2kaZNq8ngAX8QAfWt&_nc_ht=scontent.fmnl4-2.fna&oh=92e2f1bafcc598310f7cd20f17481540&oe=60912539

    at No comments:

    ASSIGNMENT ENTITIES AND COLOR

     entities and color 


    Hexadecimal Color Code

        In computing we can identify a color using a unique color code which consists of a # followed by 6 digits. This is called the hexadecimal RGB color code. RGB stands for Red, Green and Blue. These 3 colors are in computing the the primary colors: which means that every color is made of a combination of these three colors.



    Red = #FF0000 = RGB(255, 0, 0)


    Green = #008000 = RGB(1, 128, 0)


    Blue = #0000FF = RGB(0, 0, 255)


    White = #FFFFFF = RGB(255,255,255)


    Ivory = #FFFFF0 = RGB(255, 255, 240)


    Black = #000000 = RGB(0, 0, 0)


    Gray = #808080 = RGB(128, 128, 128)


    Silver = #C0C0C0 = RGB(192, 192, 192)


    Yellow = #FFFF00 = RGB(255, 255, 0)


    Purple = #800080 = RGB(128, 0, 128)


    Orange = FFA500 = RGB(255, 165, 0)


    Maroon = #800000 = RGB(128, 0, 0)


    Fuchsia = #FF00FF = RGB(255, 0, 255)


    Lime = #00FF00 = RGB(0, 255, 0)


    Aqua = #00FFFF = RGB(0, 255, 255)


    Teal = #008080 = RGB(0, 128, 128)


    Olive = #808000 = RGB(128, 128, 0)


    Navy = #000080 = RGB(0, 0, 128)



    HTML Formatting Elements/Tags

    Formatting elements were designed to display special types of text


    TAG                         DESCRIPTION

    <b>           Defines bold text

    <em>          Defines emphasized text

    <i>           Defines a part of text in an alternate voice or mood

    <small>       Defines smaller text

    <strong>      Defines important text

    <sub>         Defines subscription text

    <sup>         Defines superscripted text

    <ins>         Defines inserted text

    <del>         Defines deleted text

    <mark>        Defines marked/highlighted text

    at No comments:

    Tuesday, April 6, 2021

    scholarship

    Fulfill the details below:

    SCHOLARSHIP APPLICATION RESULT

    at No comments:

    calendar

    <b>EVENT CALENDAR</b>

    SEARCH A MONTH

    Please type in the Month (1-12);



    at No comments:

    Sunday, March 14, 2021

    WEB PROGRAMMING EXERCISE 1: MY PROFILE

    My Profile

    Name : Maria Clarisse Salo

    My favorite Songs

    1. Build me up buttercup
    2. Heartbreak Anniversary
    3. ilysb lany
    4. The one that got away
    5. Pure Imagination

      My favorite Subjects

      • Video and Film Productions
      • Photography
      • Drawing

      Links to your portfolio

      Facebook

      Portfolios

      Discuss about the contents of your portfolio

    at No comments:

    Exercise 3

    Form Element and Attributes
    Personal Information:













    Gender: Male

    Female

    Talent/skills: Photography

    Videography

    Message:






    at No comments:
    Subscribe to: Posts (Atom)

    COMPILATION OF ALL ACTIVITIES

    Home social accounts Facebook Instagram E Youtube Channel ...

    • website for mma 3
        5 ways to improve your digital art skills Want to be a better digital artist? Here's how to boost your skills. Even successful digital...
    • INTERACTIVE PRESENTATION
      HI! I HOPE YOU LEARN AND LIKE IT ! ENJOY ! COME AND SEE WHAT'S IN SOLAR SYSTEM!! Just click the link and explore!  https://view.genial.l...
    • ASSIGNMENT ENTITIES AND COLOR
        entities and color  Hexadecimal Color Code     In computing we can identify a color using a unique color code which consists of a # follow...