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:

    Saturday, March 13, 2021

    Exercise 2

    Enter your name:

    Enter your Score:

    Enter total number of items:
    at No comments:

    Exercise 1

    First Javascript Program place on the body Hello World!
    welcome to Javascript Programming <
    Name : null
    Course :null
    Address: null
    Talent: null
    at No comments:

    Wednesday, January 13, 2021

    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 artists have much to learn, and in order to avoid stagnating and being left behind, as a creative, you constantly need to push and develop your skills.

    And that’s not just about learning new software techniques or making sure you've got the best pencils available. It’s also about refreshing and refining those core art skills that help you to create brilliant visuals, whatever your medium. In this post, we look at five ways to do so.

    01. Sketch regularly

    Illustration by Christina Mrozik

    Illustration by Christina Mrozik

    Whether you use a pen and paper or tablet and stylus, regular sketching is an essential way to maintain and improve your skills. 

    American artist Terryl Whitlach, who’s known for her creature designs for Lucasfilm, says: “It’s important to get better as an artist, and to have a platform to experiment, mess up, try again – and again – and grow. Sometimes, things just don't turn out, but that is the process of getting out of one’s comfort zone, and getting better.”

    Regular sketching can also help you come up with concepts and ideas that you may not reach through other routes. 

    Fantasy artist Tony Diterlizzi, says: “I often sketch random ideas conjured from a relaxed state of mind. Accessing this part of my imagination allows me to sketch out unusual ideas, which I can later incorporate into finished illustrations.”

    Online sketching resources

    For advice on how to settle into a productive sketching regime, check out these sketching tips for beginners and these 10 tips from leading international artists. 

    Also don't miss our round up of the best drawing tablets and the best tablets with a stylus for drawing.

    02. Work on your figure drawing 

    Figure Drawing for Artists by Steve Huston

    Figure Drawing for Artists by Steve Huston is accessible and comprehensive

    Figure drawing – the accurate reproduction of the human form in various shapes and postures – is a core skill for any artist, digital or otherwise, and always worth working on. 

    The best way to learn the basics is, of course, by attending life drawing classes. But there are ton of books out there to help you, too: here are some of our favourites.

    Books on figure drawing

    Figure Drawing for Artists by Steve Huston serves as a good introduction to the subject. It's an accessible book that covers all the principles and practices of figure drawing without ever feeling academic or overly complex.

    Human Figure Drawing by Daniela Brambilla, meanwhile, is less concerned with theory and more about encouraging you to practise, practise, practise. It does this by setting a series of exercises and encourages you to learn by doing – all the while learning from your mistakes.

    A more suitable read for experienced artists is perhaps Figure Drawing for Concept Artists by Kan Muftic, who has created concept art for movies like Guardians of the Galaxy, Jungle Book and Godzilla. 

    In this, the concept artist outlines systematic methods to advance your life drawing: the three-tiered approach (observe, process and apply); the Reilly Method; shadow mapping; negative space and shapes; and more.

    Muftic also reveals how Henry Yan once asked him, “Are you a digital artist? Muftic replied, “Yes, why do you ask?”. Yan shot back, “Well, you just move your hand around mindlessly, hoping that something comes out of the mess.”

    If your main goal is to achieve anatomic accuracy, you may like The Anatomy of Style: Figure Drawing Techniques by fantasy artist Patrick J Jones, which uses annotated versions of his own pencil drawings to get human anatomy right, without losing sight of creative vision.

    Online figure drawing resources

    Away from the printed page, there are number of online articles that show how these principles are put into practice by top artists. 

    In how to begin a figure drawing tutorial Chris Legaspi takes you through all you need to know to get started drawing figures.

    Similarly, in our get better at figure drawing article, Patrick J Jones demonstrates how he draws from life without slavishly copying what he sees. 

    And in this perfect your figures with our anatomy masterclass, Glen Vilppu shares tips and tricks for getting your figures just right.

    03. Develop your portrait skills

    Borislav Mitkov's walkthrough

    Borislav Mitkov explains how to create a portrait in Painter 2017 in this walkthrough

    Portraiture, whether drawn from life or the imagination, is another fundamental skill that every artist aims to master. 

    Books on portrait skills

    One of the best recent introductions we’ve seen to this subject is Draw Faces in 15 Minutes by art expert and teacher Jake Spicer. Based on pencil drawing, this easy-to-follow book breaks down its subject into comprehensive stages. 

    You’ll learn how to construct a basic portrait sketch, then go on to discover how to develop your drawings and make them more lifelike. 

    Online portrait skills resources

    When it comes to developing your portraits digitally, the following tutorials demonstrate some interesting approaches. 

    To create portrait art in Corel Painter 2017, check out our create portrait art in Corel Painter walkthrough by illustrator and concept artist Borislav Mitkov, in which he makes use of custom brushes from other artists. 

    This tutorial on how to create a striking figure in watercolour shares how you can combine watercolours and Photoshop to create stunning results.

    Finally, this video walkthrough by award-winning Photoshop brush maker Kyle T Webster demonstrates how to create an Edvard Munch-style portrait in Photoshop CC. 

    04. Evolve your character drawing skills

    The Silver Way by Stephen Silver offers a systematic approach to improving your character drawings

    Improving your character drawing is largely about practice, hard work and inspiration. But there are some useful pointers to be learned from the pros as well.

    Books on character design

    One of our favourite books is The Silver Way: Techniques, Tips and Tutorials for Effective Character Design by Stephen Silver, who’s worked on animated TV shows such as Kim Possible as well as running the Silver Drawing Academy.

    His fun, colourful 250-page book packs a huge amount of advice and instruction, and covers a number of unusual techniques such as ‘memory sketching’, ‘blind feeling’ and ‘throwing up on the page’ that could help you bring your character drawing to the next level.

    Online character design resources

    There’s a lot of great advice online about character design too. Check out our how to improve your character drawing tutorial by legendary artist Aaron Blaise, 20 top character design tips from leading illustrator Jon Burgerman and Mina Petrovic’s step-by-step explanation of how to hand-draw a manga character.

    05. Understand composition

    Golden Ratio composition on temple

    Dan Dos Santos explains the fundamental principles that lie behind composition

    Whatever kind of art you’re producing, composition is key. If you’re struggling with composition, it’s worth learning or refreshing the key principles behind it, such as the Golden Ratio and the Rule of Thirds. 

    You’ll find a quick refresher in these 12 pro tips to improve your artistic composition from artist Dan Dos Santos.

    And to take your compositions a step further, discover how to create dynamic movement in a composition with Chris Rathbone's tips.

    at No comments:
    Subscribe to: Posts (Atom)

    COMPILATION OF ALL ACTIVITIES

    Home social accounts Facebook Instagram E Youtube Channel ...