Tuesday, 22 June 2021

Tutorial Finals


MY TUTORIAL


Posted by at No comments:

Thursday, 17 June 2021

Compilation of Activities (FINAL)

​
Home
Instagram
Exercise 7 Exercise 8
Exercise 6 Exercise 7 Exercise 8
Exercise 10 Exercise 11 Exercise 12
Exercise 10 Exercise 11 Exercise 12 Exercise 13

COMPILATION OF ACTIVITIES

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">



<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

   

    <link rel="stylesheet" href="Exercise 8 CSS Side bar navigation.css">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

    <script>

      $(document).ready(function(){

        $('i').click(function(){

          $('ul').toggleClass('ul_show');

          $('section').toggleClass('slide_image');

        });

        $('li').click(function(){

          $(this).addClass('active').siblings().removeClass('active');

        });

      });



    </script>



  </head>

  <body>

    <ul>

<li class="active"><a href="#">Home</a></li>

<li><a href="#portfolio">Portfolio</a></li>

<li><a href="#profile">Profile</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#link">Link</a></li>

</ul>

<section>

      <i class="fas fa-bars"></i>

      <div class="sec1">

</div>

<h2 id="Home">

Home</h2>
<H1>Hi my name is Excekel Cabarloc I'm a Freelance Videographer and Graphic Designer</h1>

<div class="sec2">

</div>

<h2 id="portfolio">

Portfolio</h2>

<p>

 </p>
  <div id="imagelist">
  <a href="https://ibb.co/C89WTMD"><img src="https://i.ibb.co/8sxXSdt/DEADSKULL.png" alt="DEADSKULL" border="0" height="300" width="auto"></a>
   <a href="https://ibb.co/r7qRrps"><img src="https://i.ibb.co/Rvtkw6y/ANDROID.png" alt="ANDROID" height="300" width="auto"></a>
    <a href="https://ibb.co/0yJPR0B"><img src="https://i.ibb.co/TMhzxQK/HOPE.png" alt="HOPE" border="0" height="300" width="auto"></a>
   <a href="https://ibb.co/bsyfWy1"><img src="https://i.ibb.co/y6M3fM0/SPACE.png" alt="SPACE" border="0" height="300" width="auto"></a>

<div class="sec3">

</div>

<h2 id="profile">

Profile</h2>

<p>HI! I'm <h1>Excekel Cabarloc</h1><br> Aspiring Videographer and Graphic Designer, I'm currently 3rd year Multimedia Arts student in University of Perpetual Help Molino. </p><br>
  <li> Digital arts
  <p>I make my own digital art and vector art I posted it on my instagram account</p>
 <li> Photography
  <p> Itake pictures in event like Debut and Wedding</p><br>
<li> Video and Film Productions
  <p> I have some short film in my youtube channel</p><br>
    
    
    

<div class="sec4">

</div>

<h2 id="contact">

Contact</h2>

<h2>You Can contact me Via Instagram: KVNFVZED </h2>

<div class="sec5">

</div>

<h2 id="link">

link</h2>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Add font awesome icons -->
<a href="#" class="fa fa-youtube"></a>
...
          <p> <a 
<div class="sec6">

</div>

</div>

</section>



  </body>

</html>
Posted by at No comments:

Exercise 13: Login & Signup Forms

 

HTML
(LOGIN HTML)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login and Signup </title>
<link rel="stylesheet" href="loginnn CSS.css">
</head>

<body>

<form name="form">
<h2>Login</h2>
<p> Log in to Kelly Artwork. </p>
<div>
<label for="text"> <b> Username </b> </label>
<input  id="user"  name="user" type="text" placeholder="Username"> </div>
</div>
<div>
<label for="psw"> <b> Password </b> </label>
<input id="pass" name="pass" type="password"  placeholder="Password"> </div>
</div>
<div>
<button type="button" value="Login" onClick="validate(this.form)"> Login </button>
<button class="resetbtn" type="Reset"> Reset </button>
<hr>
<p> Don't have an account? <br> Sign up now! </p>
<a href="signuppp.html"> Sign Up </a>
</div>
</form>

<script src="login singup jv.js">

</script>

</body>
</html>

(LOGIN CSS)
body {
font-size: 18px;
background: #dbd9d9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* {
box-sizing: border-box;
}

h2 {
text-align: center;
text-decoration: underline;
}

input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}

button {
background-color: dodgerblue;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

button:hover {
opacity:1;
}

form {
width: 300px;
background: #fff;
padding: 0px 40px 40px;
border: 1px solid #ccc;
margin: 1.5% auto auto auto;
border-radius: 5px;
}

label {
display: block;
margin-bottom: 5px
}

label i {
color: #999;
font-size: 80%;
}

input, select {
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
}

.cancelbtn, .resetbtn {
padding: 14px 20px;
background-color: #f44336;
}

.cancelbtn, .signupbtn {
width: 100%;
}

.container {
width: 300px;
background: #fff;
padding:0px 40px 40px;
border: 1px solid #ccc;
margin: 0px auto 0;
border-radius: 5px;
}

.modal {
display: none;
position: fixed;
background-color: #fff;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
padding: 30px 0px 30px 0px;
}

.modal-content {
background-color: #fefefe;
margin: 1% auto auto auto;
border: 1px solid #888;
width: 80%;
}

hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
 
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #5c5c5c;
}

.close:hover,
.close:focus {
color: #000;
cursor: pointer;
}

.form-inline {
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
}

.form-inline label, .form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}

.error {
color: red;
font-size: 90%;
}

@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}

(SIGNUP HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login and Signup </title>
<link rel="stylesheet" href="signuppp CSS.css">
</head>

<body>

<div id="signup-form" class="modal">
<form class="modal-content" onsubmit="return signup()">
<div class="container">
<h2> Sign Up </h2>
<p> Fill up this form to create your own account. </p>
<hr>
<label> <b>Username</b> </label>
<input id="username-input" type="text" placeholder="Enter Username" name="user" required>

<label> <b>Password</b> </label>
<input id="password-input" type="password" placeholder="Enter Password" name="pass" required>

<label> <b>Confirm Password</b> </label>
<input id="confirm-password-input" type="password" placeholder="Confirm Password" name="confirmPass" required>
<button type="submit" class="signupbtn"> Submit </button>
<button class="resetbtn" type="Reset"> Reset </button>
<a href="loginnn.html"> Back to Login </a>
</div>
</form>
</div>

</body>

<script src="login signup jv.js">

</script>

</html>

(SIGNUP CSS)
body {
font-size: 16px;
background: #dbd9d9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* {
box-sizing: border-box;
}

h2 {
text-align: center;
text-decoration: underline;
}

input[type=text],
input[type=password],
input[type=confirm-password-input] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=confirm-password-input]:focus. {
background-color: #ddd;
outline: none;
}

button {
background-color: dodgerblue;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

button:hover {
opacity:1;
}

form {
width: 300px;
background: #fff;
border: 1px solid #ccc;
margin: 1.5% auto auto auto;
border-radius: 5px;
}

label {
display: block;
margin-bottom: 5px
}

label i {
color: #999;
font-size: 80%;
}

input,
select {
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
}

.cancelbtn,
.resetbtn {
padding: 14px 20px;
background-color: #f44336;
}

.cancelbtn,
.signupbtn {
width: 100%;
}

.container {
width: 300px;
background: #fff;
padding:0px 40px 40px;
border: 1px solid #ccc;
margin: 0px auto 0;
border-radius: 5px;
}

.modal {
display: block;
position: fixed;
background-color: #fff;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
padding: 30px 0px 30px 0px;
}

.modal-content {
background-color: #fefefe;
margin: 1% auto auto auto;
border: none;
width: 80%;
}

hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
 
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #5c5c5c;
}

.close:hover,
.close:focus {
color: #000;
cursor: pointer;
}

.form-inline {
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
}

.form-inline label,
.form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}

.error {
color: red;
font-size: 90%;
}

@media screen and (max-width: 300px) {
.cancelbtn,
.signupbtn {
width: 100%;
}
}

(JAVA)

function validate(form) {


var credentials = JSON.parse(window.name);

var usernameInput = document.getElementById("user").value;

var passwordInput = document.getElementById("pass").value;

var matchingCredential = credentials.find(x => x.username == usernameInput);

if (matchingCredential == undefined) {

alert('No such user');

return;

}

if (matchingCredential.password == passwordInput) {

alert('Login Successful');

window.location.href = "https://kekelcabarloc.blogspot.com/";

}

else {

alert('No such credential');

}

}

var credentials = [];


function signup() {


var passwordPassesCriteria = false;

var passwordMatched = false;

var usernameInput = document.getElementById('username-input').value;

var passwordInput = document.getElementById('password-input').value;

var confirmPasswordInput = document.getElementById('confirm-password-input').value;

passwordMatched = passwordInput == confirmPasswordInput;

var regex = /^[a-zA-Z\s]+$/;

passwordPassesCriteria = regex.test(passwordInput);

console.log(saveCredentials);

if (passwordMatched && passwordPassesCriteria) {

displayFormData(usernameInput, passwordInput);

saveCredentials();

goToLogin();

}

}


function saveCredentials() {


var username = document.getElementById('username-input').value;

var password = document.getElementById('password-input').value;

credentials.push({

username: username,

password: password

});

var objectAsString = JSON.stringify(credentials);

    window.name = objectAsString;

}


function displayFormData(username, password) {

var alertMessage = 'Username: ' + username + '\n' +

'Password: ' + password;

alert(alertMessage);

}


function goToLogin() {

window.location.href = 'loginnn.html';

}


function goToSighUp() {

window.location.href = 'signuppp.html';

}

Posted by at No comments:

Tuesday, 15 June 2021

Exercise 12: Chat Box

 

HTML 
<!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 </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://i.ibb.co/6Js3nC3/10.png" class="kelly" alt="Kelly">
<span class="msg"> kelly: Zup? </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

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

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

body {
font-family: Arial, Helvetica, sans-serif;
background-color: #00ffcc;
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: #009dff;
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;
}

.kelly {
width: 60px;
height: 60px;
border-radius: 80%;
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;
}
}

JS

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="https://i.ibb.co/6Js3nC3/10.png"class="kelly" 
</div>`;
chatArea.insertAdjacentHTML("beforeEnd", temp);
nameInput.value = '';
messageInput.value = '';
})
Posted by at No comments:

Exercise 11 Counting Game

Counting Game

Let's Play!

Let's count the shapes you see on the screen!

Score:

0

Posted by at No comments:

Exercise 10 Drawing in Canvas

Exercise 10 Drawing in Canvas
Posted by at No comments:

Exercise 11: YouTube Video Link Parameters

Linking Videos
Home About Contacts

HOME

I wanna share some videos! ☺

Music Video

This video will autoplay but is muted

music when I need to chill

This video is looped

MY Dance Group

This video does not display controls

CSS * { box-sizing: border-box; } body, html { background-color: #74aab0; height: 100%; min-height: 100vh; margin: 0; position: relative; font-family: "Franklin Gothic Medium"; background-repeat: no-repeat; padding-bottom: 30px; } iframe:focus { outline: none; } iframe[seamless] { display: block; } .navbar { overflow: hidden; background-color: #fcba03; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: #ff546b; } .dropdown-content { display: none; position: absolute; background-color: #ffa38c; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ffcba6; } .dropdown:hover .dropdown-content { display: block; } .row::after { content: ""; clear: both; display: table; } [class*="col-"] { float: left; padding: 15px; } .column1 { float: left; width: 2%; background-color: #ffffff; height: 10px; } .column2 { border: 10px solid #ffffff; float: left; width: 96%; padding-left: 25px; padding-right: 25px; } .column3 { float: right; width: 2%; background-color: #ffffff; height: 10px; } [class*="col-"] { width: 100%; } @media only screen and (min-width: 600px) { .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} } @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } #footer { position: relative; height: 150px; margin-top: -100px; clear: both; background-color:#fcba03; }
Posted by at No comments:

Exercise 10: Animation Web Page



HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 010 Animated Web page</title>
<link rel="stylesheet" href="Exercise 010 CSS.css">
</head>

<body>

<div> <h1 style="font-size:40px;"> Multimedia Arts </h1> </div> <br> <br> <br> <br> <br> <br> <br> <br> 

<p style="text-align: justify; text-indent: 50px;"> Multimedia arts & design is the creation of images and content using the latest design techniques and technology. Multimedia art includes animation, audio, interactivity, still images, text, and video. Multimedia artists and designers may combine traditional forms of art such as painting or sculpture with any of the mediums mentioned above. <br> </p>

<p style="text-align: justify; text-indent: 50px;">A typical multimedia art & design program curriculum consists of a combination of general education courses, core courses, electives, and studios. General education courses may fall into a number of categories such as the arts, humanities, natural sciences, social and behavioral sciences, writing and speaking, health and wellness, integrative studies, and quantification.
  Examples of core courses and electives include:

3D Digital Art and Design Fundamentals
Animation Fundamentals
Application Development Design Studio
Design Concepts
Digital Art and Design Criticism
Digital Arts: Computer Graphics</p>

</body>
</html>

CSS

div {
  width: 300px;
  height: 50px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@keyframes example {
  0%   {background-color:orange; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:pink; left:0px; top:0px;}
}
}

Posted by at No comments:
Subscribe to: Posts (Atom)