MY TUTORIAL
Tuesday, 22 June 2021
Thursday, 17 June 2021
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';
}
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 = '';
})
Exercise 11: YouTube Video Link Parameters
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
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;}
}
}
Friday, 7 May 2021
Thursday, 6 May 2021
Exercise 7 CSS (3 Rows-3 Columns) HTML
BESTSELLER
KVNFVZED Sratch Style
ONLY for 500.00 💥🔥
KVNFVZED
BLUE ROSE LIMITED EDITION!
Contact Us
What are you waiting for? Buy now!
Excercise 8 CSS (SIDE BAR NAVIGATION) HTML
Home
Hi my name is Excekel Cabarloc I'm a Freelance Videographer and Graphic Designer
Portfolio
Profile
HI! I'm
Excekel Cabarloc
Aspiring Videographer and Graphic Designer, I'm currently 3rd year Multimedia Arts student in University of Perpetual Help Molino.
I make my own digital art and vector art I posted it on my instagram account
Itake pictures in event like Debut and Wedding
I have some short film in my youtube channel
Contact
You Can contact me Via Instagram: KVNFVZED
link
...Wednesday, 5 May 2021
Wednesday, 21 April 2021
Exercise 6 (CSS Colors) HTML
Color Values
Red 1
Red 0.9
Red 0.8
Red 0.7
Red 0.6
Red 0.5
Red 0.4
Blue 1
Blue 0.9
Blue 0.8
Blue 0.7
Blue 0.6
Blue 0.5
Blue 0.4
Violet 1
Violet 0.9
Violet 0.8
Violet 0.7
Violet 0.6
Violet 0.5
Violet 0.4
Monday, 19 April 2021
Wednesday, 31 March 2021
Wednesday, 17 March 2021
Excercise 1 Java Script Program
Name : Cabarloc, Excekel Paul T.
My favorite Songs
- Ayo
- Loyal
- Higa
- Baby it's You
My favorite Subjects
- Math
- Video and Film Productions
- Art and Design
Links to your portfolio
Discuss about the contents of your portfolio
Tuesday, 16 March 2021
exercise 2 Grade Equivalents
Enter your score
Enter total numbers of item